优化

web/src/components/BookCardMenu.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { FolderInput, Info, MoreVertical, Trash2 } from 'lucide-react'
+
+import type { ReaderBook } from '../api/reader'
+import { bookDetailPath } from '../pages/reader/bookshelfModel'
+
+/**
+ * 书籍卡片上的「⋯」操作菜单：把「移到分组 / 书籍详情 / 移出书架」收进一个下拉里，
+ * 不再让三个图标直接铺在封面上。
+ *
+ * 定位上有三点刻意的处理：
+ *  1. 菜单用 `position: fixed` + 实测位置渲染（而不是绝对定位挂在卡片里）。
+ *     网格卡片为了裁圆角带 `overflow-hidden`，绝对定位的子元素会被裁掉；固定定位能
+ *     逃出这个裁剪，也不用引入 portal。
+ *  2. 网格布局下菜单与书籍卡片**同宽、左边缘对齐**、向下展开，看起来像卡片自己展开的
+ *     动作面板；宽度取自卡片（`data-book-card` 标记的元素），列数变化时自动跟随。
+ *  3. 下方确实放不下时才向上翻，并夹在视口内，避免贴底部的卡片点开看不见。
+ */
+export function BookCardMenu({
+  book,
+  onPickGroup,
+  onRemove,
+  variant = 'overlay',
+}: {
+  book: ReaderBook
+  onPickGroup: () => void
+  onRemove: () => void
+  /** overlay：网格封面上的圆形按钮；plain：列表布局右侧的浅色按钮。 */
+  variant?: 'overlay' | 'plain'
+}) {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+  // 进场动画用：先以「缩起来」渲染一帧，再切到展开态触发过渡
+  const [shown, setShown] = useState(false)
+  const [pos, setPos] = useState<{ top: number; left: number; width: number; up: boolean } | null>(null)
+  const btnRef = useRef<HTMLButtonElement>(null)
+
+  /** 列表布局（一行很宽）不适合跟行同宽，保持固定宽度。 */
+  const PLAIN_WIDTH = 176
+  /** 网格卡片过窄时给个下限，保证文字不挤成两行。 */
+  const MIN_WIDTH = 132
+  /** 三个菜单项 + 分隔线的大致高度，用来判断下方是否放得下。 */
+  const MENU_HEIGHT = 140
+  const GAP = 8
+  const EDGE = 8
+
+  const openMenu = () => {
+    const el = btnRef.current
+    if (!el) return
+    const btnRect = el.getBoundingClientRect()
+
+    // 网格：取卡片本身的位置与宽度（由 BookshelfCard 打上 data-book-card 标记）
+    const cardEl = variant === 'overlay' ? el.closest('[data-book-card]') : null
+    const cardRect = cardEl instanceof HTMLElement ? cardEl.getBoundingClientRect() : null
+
+    const width = cardRect
+      ? Math.max(MIN_WIDTH, Math.min(cardRect.width, window.innerWidth - EDGE * 2))
+      : PLAIN_WIDTH
+    const maxLeft = Math.max(EDGE, window.innerWidth - width - EDGE)
+    const left = cardRect
+      ? Math.min(Math.max(EDGE, cardRect.left), maxLeft)
+      : Math.min(Math.max(EDGE, btnRect.right - width), maxLeft)
+
+    // 默认向下；只有下方真的放不下才向上翻
+    const spaceBelow = window.innerHeight - btnRect.bottom
+    const up = spaceBelow < MENU_HEIGHT + GAP + EDGE && btnRect.top >= MENU_HEIGHT + GAP + EDGE
+    const top = up
+      ? Math.max(EDGE, btnRect.top - GAP - MENU_HEIGHT)
+      : Math.min(btnRect.bottom + GAP, Math.max(EDGE, window.innerHeight - MENU_HEIGHT - EDGE))
+
+    setShown(false)
+    setPos({ top, left, width, up })
+    setOpen(true)
+  }
+
+  useEffect(() => {
+    if (!open) return
+    const close = () => setOpen(false)
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node
+      if (btnRef.current?.contains(target)) return
+      // 菜单本身在 fixed 层里，点它不算「点外部」
+      if (target instanceof Element && target.closest('[data-book-card-menu]')) return
+      close()
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') close()
+    }
+    document.addEventListener('pointerdown', onPointerDown, true)
+    document.addEventListener('keydown', onKeyDown)
+    // 滚动/缩放后按钮位置会变，菜单会脱位，直接关掉更省事
+    window.addEventListener('scroll', close, true)
+    window.addEventListener('resize', close)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      document.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('resize', close)
+    }
+  }, [open])
+
+  // 挂载后下一帧再切到展开态，否则过渡不会触发
+  useEffect(() => {
+    if (!open) return
+    const id = window.requestAnimationFrame(() => setShown(true))
+    return () => window.cancelAnimationFrame(id)
+  }, [open])
+
+  const run = (action: () => void) => {
+    setOpen(false)
+    action()
+  }
+
+  const triggerClass =
+    variant === 'overlay'
+      ? 'rounded-full bg-black/55 p-1.5 text-white opacity-85 backdrop-blur transition hover:bg-brand-500 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-white'
+      : 'rounded-lg p-1.5 text-[var(--app-muted)] transition hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]'
+
+  // 每行自己声明完整配色（含文字颜色），避免同类 utility 互相覆盖
+  const itemBase =
+    'flex w-full items-center gap-2 rounded-lg px-2.5 py-2.5 text-left text-xs font-bold transition-colors'
+  const itemNormal = 'text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]'
+  const itemDanger = 'text-red-500/90 hover:bg-red-500/10 hover:text-red-500'
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={`更多操作：${book.name}`}
+        title="更多操作"
+        onClick={(event) => {
+          event.stopPropagation()
+          if (open) setOpen(false)
+          else openMenu()
+        }}
+        className={triggerClass}
+      >
+        <MoreVertical size={variant === 'overlay' ? 13 : 16} />
+      </button>
+
+      {open && pos && (
+        <div
+          data-book-card-menu=""
+          role="menu"
+          style={{
+            top: pos.top,
+            left: pos.left,
+            width: pos.width,
+            transformOrigin: pos.up ? 'bottom right' : 'top right',
+          }}
+          className={`fixed z-[120] rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] p-1.5 shadow-2xl transition duration-100 ease-out ${
+            shown ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
+          }`}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <button type="button" role="menuitem" className={`${itemBase} ${itemNormal}`} onClick={() => run(onPickGroup)}>
+            <FolderInput size={14} className="shrink-0 text-brand-500" /> 移到分组
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className={`${itemBase} ${itemNormal}`}
+            onClick={() => run(() => navigate(bookDetailPath(book)))}
+          >
+            <Info size={14} className="shrink-0 opacity-70" /> 书籍详情
+          </button>
+          <div className="my-1 border-t border-[var(--app-border)]" />
+          <button
+            type="button"
+            role="menuitem"
+            className={`${itemBase} ${itemDanger}`}
+            onClick={() => run(onRemove)}
+          >
+            <Trash2 size={14} className="shrink-0" /> 移出书架
+          </button>
+        </div>
+      )}
+    </>
+  )
+}

web/src/components/BookGroupBar.tsx

@@ -0,0 +1,55 @@
+import { Library, ListFilter } from 'lucide-react'
+
+import type { BookGroupTab } from '../utils/readerBookGroups'
+
+/**
+ * 书架分组栏（对齐影视模块的 LibraryTagBar）：
+ * 固定「全部」+（有分组时）「未分组」+ 每个分组一个页签，选中后只展示该分组的书。
+ *
+ * 只是展示层过滤，不改动书架数据本身。这里只负责展示与选中：新建 / 重命名 / 删除 /
+ * 拖拽排序都在「管理」菜单的「管理分组」弹窗里做，分组栏保持干净。
+ */
+export function BookGroupBar({
+  tabs,
+  selectedGroupId,
+  onSelect,
+}: {
+  tabs: BookGroupTab[]
+  selectedGroupId: string
+  onSelect: (groupId: string) => void
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 border-b border-[var(--app-border)] pb-3">
+      {tabs.map((tab) => {
+        const active = tab.id === selectedGroupId
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => onSelect(tab.id)}
+            aria-pressed={active}
+            className={`inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-bold transition-colors ${
+              active
+                ? 'border-brand-500/60 bg-brand-500/10 text-brand-600'
+                : 'border-[var(--app-border)] bg-[var(--app-panel-soft)] text-[var(--app-subtle)] hover:border-brand-500/40 hover:text-[var(--app-text)]'
+            }`}
+            title={
+              tab.kind === 'all'
+                ? '显示全部书籍'
+                : tab.kind === 'ungrouped'
+                  ? '显示没有归入任何分组的书籍'
+                  : `只看「${tab.name}」分组`
+            }
+          >
+            {tab.kind === 'all' && <Library size={13} />}
+            {tab.kind === 'ungrouped' && <ListFilter size={13} />}
+            <span className="max-w-[8rem] truncate">{tab.name}</span>
+            <span className={`font-mono text-[10px] ${active ? 'text-brand-500' : 'text-[var(--app-muted)]'}`}>
+              {tab.count}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

web/src/components/BookGroupPickerDialog.tsx

@@ -0,0 +1,91 @@
+import { Check, FolderInput, Layers, X } from 'lucide-react'
+
+import type { BookGroup, ReaderBook } from '../api/reader'
+
+/**
+ * 「移到分组」选择框：给一本书指定所属分组。
+ *
+ * 书籍归组没有放在分组管理弹窗里 —— 书架可能有上千本，逐个列出来既慢又难找，
+ * 直接在卡片上点「分组」更顺手。一本书只归一个分组，选「未分组」即移出所有分组。
+ */
+export function BookGroupPickerDialog({
+  book,
+  groups,
+  currentGroupId,
+  busy = false,
+  onPick,
+  onClose,
+}: {
+  book: ReaderBook
+  groups: BookGroup[]
+  /** 当前所属分组名；空串表示未分组。 */
+  currentGroupId: string
+  busy?: boolean
+  onPick: (groupName: string) => void
+  onClose: () => void
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="移到分组"
+        className="flex max-h-[80vh] w-full max-w-sm flex-col overflow-hidden rounded-3xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-2xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-[var(--app-border)] px-5 py-4">
+          <div className="min-w-0">
+            <h3 className="truncate text-sm font-bold text-[var(--app-text)]">移到分组</h3>
+            <p className="mt-0.5 truncate text-2xs text-[var(--app-muted)]">《{book.name}》</p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-xl p-1.5 text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]"
+            title="关闭"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2">
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onPick('')}
+            className="flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-left transition hover:bg-[var(--app-hover)] disabled:opacity-50"
+          >
+            <Layers size={14} className="shrink-0 text-[var(--app-muted)]" />
+            <span className="min-w-0 flex-1 truncate text-xs font-bold text-[var(--app-text)]">未分组</span>
+            {currentGroupId === '' && <Check size={14} className="shrink-0 text-brand-600" />}
+          </button>
+
+          {groups.length === 0 ? (
+            <p className="px-3 py-6 text-center text-2xs text-[var(--app-muted)]">
+              还没有分组，先在书架分组栏的「管理分组」里新建一个
+            </p>
+          ) : (
+            groups.map((group) => (
+              <button
+                key={group.name}
+                type="button"
+                disabled={busy}
+                onClick={() => onPick(group.name)}
+                className="flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-left transition hover:bg-[var(--app-hover)] disabled:opacity-50"
+              >
+                <FolderInput size={14} className="shrink-0 text-brand-500" />
+                <span className="min-w-0 flex-1 truncate text-xs font-bold text-[var(--app-text)]">
+                  {group.name}
+                </span>
+                {currentGroupId === group.name && <Check size={14} className="shrink-0 text-brand-600" />}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

web/src/components/ManageBookGroupsDialogView.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useState } from 'react'
+import { Check, GripVertical, Loader2, Pencil, Plus, Trash2, X } from 'lucide-react'
+import toast from 'react-hot-toast'
+
+import { confirmAction } from './confirmAction'
+import { useDragReorder } from '../hooks/useDragReorder'
+import { MAX_BOOK_GROUPS, bookGroupNameError, normalizeBookGroupName } from '../utils/readerBookGroups'
+import type { BookGroup } from '../api/reader'
+
+export type ManageBookGroupsDialogProps = {
+  groups: BookGroup[]
+  /** 分组名 → 当前书架里实际属于该组的书籍数（不统计已失效的 ID）。 */
+  bookCounts: Record<string, number>
+  saving: boolean
+  onCreate: (name: string) => Promise<string>
+  onRename: (from: string, to: string) => Promise<void>
+  onRemove: (name: string) => Promise<void>
+  /** 按给定分组名顺序重排（拖拽排序的落点）。 */
+  onReorder: (orderedNames: string[]) => Promise<void>
+  onClose: () => void
+}
+
+/**
+ * 分组管理对话框（对齐影视模块的管理标签弹窗，去掉成员分配那半边）：
+ * 新建 / 重命名 / 删除分组，拖拽调整分组栏顺序。
+ *
+ * 书籍归组不在这里做，而是在书架卡片上的「分组」按钮里逐个/批量指定 —— 书可能有上千本，
+ * 逐个列在弹窗里既慢又难找。
+ */
+export function ManageBookGroupsDialogView({
+  groups,
+  bookCounts,
+  saving,
+  onCreate,
+  onRename,
+  onRemove,
+  onReorder,
+  onClose,
+}: ManageBookGroupsDialogProps) {
+  const [draftName, setDraftName] = useState('')
+  const [renaming, setRenaming] = useState('')
+  const [renameDraft, setRenameDraft] = useState('')
+  const { draggingId, dragOverId, dragProps } = useDragReorder(
+    groups.map((group) => group.name),
+    onReorder,
+  )
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [onClose])
+
+  const submitCreate = () => {
+    const name = normalizeBookGroupName(draftName)
+    if (!name) return
+    const err = bookGroupNameError(draftName, groups)
+    if (err) {
+      toast.error(err)
+      return
+    }
+    setDraftName('')
+    void onCreate(name)
+  }
+
+  const submitRename = (from: string) => {
+    const name = normalizeBookGroupName(renameDraft)
+    setRenaming('')
+    setRenameDraft('')
+    if (!name || name === from) return
+    const err = bookGroupNameError(renameDraft, groups, from)
+    if (err) {
+      toast.error(err)
+      return
+    }
+    void onRename(from, name)
+  }
+
+  const handleRemove = async (name: string) => {
+    const ok = await confirmAction({
+      title: '删除分组',
+      message: `删除「${name}」后，组内的书会回到「未分组」，书籍本身不会被移除。确定吗？`,
+      confirmText: '删除',
+      danger: true,
+    })
+    if (!ok) return
+    void onRemove(name)
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="管理分组"
+        className="flex max-h-[85vh] w-full max-w-md flex-col overflow-hidden rounded-3xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-2xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-[var(--app-border)] px-5 py-4">
+          <div>
+            <h3 className="text-sm font-bold text-[var(--app-text)]">管理分组</h3>
+            <p className="mt-0.5 text-2xs text-[var(--app-muted)]">
+              拖拽调整顺序 · 最多 {MAX_BOOK_GROUPS} 个分组
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-xl p-1.5 text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]"
+            title="关闭"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 border-b border-[var(--app-border)] px-5 py-3">
+          <input
+            value={draftName}
+            onChange={(event) => setDraftName(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault()
+                submitCreate()
+              }
+            }}
+            maxLength={24}
+            placeholder="新分组名"
+            className="h-9 min-w-0 flex-1 rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-3 text-xs font-semibold text-[var(--app-text)] outline-none placeholder:text-[var(--app-muted)] focus:border-brand-500"
+          />
+          <button
+            type="button"
+            onClick={submitCreate}
+            disabled={saving || !draftName.trim() || groups.length >= MAX_BOOK_GROUPS}
+            className="inline-flex shrink-0 items-center gap-1 rounded-xl border border-[var(--app-border)] px-3 py-2 text-xs font-bold text-brand-600 transition hover:bg-[var(--app-hover)] disabled:opacity-40"
+          >
+            <Plus size={13} /> 新建
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2">
+          {groups.length === 0 ? (
+            <p className="py-10 text-center text-xs text-[var(--app-muted)]">
+              还没有分组，先在上方新建一个，再到书籍卡片上用「分组」按钮把书放进去
+            </p>
+          ) : (
+            <div className="space-y-1">
+              {groups.map((group) => {
+                const isRenaming = renaming === group.name
+                const dragging = draggingId === group.name
+                const over = dragOverId === group.name
+                return (
+                  <div
+                    key={group.name}
+                    {...dragProps(group.name)}
+                    className={`flex items-center gap-2 rounded-xl border px-2 py-2 transition ${
+                      dragging
+                        ? 'border-brand-500/60 opacity-60'
+                        : over
+                          ? 'border-brand-500/60 bg-brand-500/5'
+                          : 'border-transparent hover:bg-[var(--app-hover)]'
+                    }`}
+                  >
+                    <span
+                      className="shrink-0 cursor-grab p-1 text-[var(--app-muted)] active:cursor-grabbing"
+                      title="拖拽调整顺序"
+                    >
+                      <GripVertical size={14} />
+                    </span>
+
+                    {isRenaming ? (
+                      <>
+                        <input
+                          autoFocus
+                          value={renameDraft}
+                          onChange={(event) => setRenameDraft(event.target.value)}
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter') {
+                              event.preventDefault()
+                              submitRename(group.name)
+                            }
+                            if (event.key === 'Escape') {
+                              setRenaming('')
+                              setRenameDraft('')
+                            }
+                          }}
+                          maxLength={24}
+                          className="h-7 min-w-0 flex-1 rounded-lg border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-2 text-xs font-semibold text-[var(--app-text)] outline-none focus:border-brand-500"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => submitRename(group.name)}
+                          className="rounded-lg p-1.5 text-brand-600 hover:bg-[var(--app-hover)]"
+                          title="保存"
+                        >
+                          <Check size={14} />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setRenaming('')
+                            setRenameDraft('')
+                          }}
+                          className="rounded-lg p-1.5 text-[var(--app-muted)] hover:bg-[var(--app-hover)]"
+                          title="取消"
+                        >
+                          <X size={14} />
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <span className="min-w-0 flex-1 truncate text-xs font-bold text-[var(--app-text)]">
+                          {group.name}
+                        </span>
+                        <span className="shrink-0 font-mono text-[10px] text-[var(--app-muted)]">
+                          {bookCounts[group.name] ?? 0} 本
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setRenaming(group.name)
+                            setRenameDraft(group.name)
+                          }}
+                          className="rounded-lg p-1.5 text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]"
+                          title="重命名"
+                        >
+                          <Pencil size={13} />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => void handleRemove(group.name)}
+                          className="rounded-lg p-1.5 text-[var(--app-muted)] hover:bg-red-500/10 hover:text-red-500"
+                          title="删除分组"
+                        >
+                          <Trash2 size={13} />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        {saving && (
+          <div className="flex items-center justify-center gap-2 border-t border-[var(--app-border)] py-2 text-2xs text-[var(--app-muted)]">
+            <Loader2 size={12} className="animate-spin" /> 正在保存…
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

web/src/components/ReaderBookCover.tsx

@@ -1,13 +1,17 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type SyntheticEvent } from 'react'
 import { BookOpen } from 'lucide-react'
 
 import { isRenderableCover } from '../utils/coverUrl'
+import { readerCoverSrc } from '../utils/readerCover'
 
 // 阅读子系统统一封面图。
 //
 // 书源返回的 cover_url 经常不是图片（空值、站点地址、data: 参数信封），
 // 直接塞进 <img> 会显示破图。这里统一处理：地址不是图片、或加载失败时，
 // 一律回退成占位图标。
+//
+// 另外，明文 http 的封面在 https 部署下会被混合内容策略拦掉，统一经后端图片
+// 代理下发（见 readerCoverSrc），否则这些封面会全部退化成占位图标。
 export default function ReaderBookCover({
   url,
   alt = '',
@@ -25,7 +29,17 @@ export default function ReaderBookCover({
     setFailed(false)
   }, [url])
 
-  if (!isRenderableCover(url) || failed) {
+  const src = readerCoverSrc(url)
+
+  // 后端图片代理抓不到上游时会回一张 1×1 透明 PNG（HTTP 200），<img> 因此不会
+  // 触发 onError。书源在「没有封面」时可能返回源站首页这类非图片地址，代理同样
+  // 只能给出这张占位像素——按加载失败处理，才会退回图标而不是留下一块空白。
+  const handleLoad = (e: SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget
+    if (img.naturalWidth <= 1 && img.naturalHeight <= 1) setFailed(true)
+  }
+
+  if (!isRenderableCover(src) || failed) {
     return (
       <div className="flex h-full w-full items-center justify-center">
         <BookOpen size={iconSize} className="text-[var(--app-muted)]" />
@@ -35,11 +49,12 @@ export default function ReaderBookCover({
 
   return (
     <img
-      src={url ?? ''}
+      src={src}
       alt={alt}
       loading="lazy"
       referrerPolicy="no-referrer"
       className={className}
+      onLoad={handleLoad}
       onError={() => setFailed(true)}
     />
   )

web/src/components/RequireAuth.tsx

@@ -1,12 +1,25 @@
-import { ReactNode } from 'react'
+import { useEffect, type ReactNode } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 
 import { useAuthStore } from '../stores/auth'
+import { hydrateReaderSettings, startReaderSettingsSync } from '../utils/readerSettingsSync'
 
 // Route guard: redirects to /login when no token is present.
 export function RequireAuth({ children }: { children: ReactNode }) {
   const token = useAuthStore((s) => s.token)
+  const userId = useAuthStore((s) => s.user?.id ?? null)
   const location = useLocation()
+
+  // 阅读器偏好按账号存在服务端：一进入受保护区域就开启回写订阅，并在
+  // 登录 / 换账号时重新拉取（这里同时覆盖影视外壳和 /reader/* 独立布局）。
+  useEffect(() => {
+    startReaderSettingsSync()
+  }, [])
+  useEffect(() => {
+    if (!userId) return
+    void hydrateReaderSettings()
+  }, [userId])
+
   if (!token) {
     return <Navigate to="/login" replace state={{ from: location }} />
   }