fix(cbz): attach resize observer via callback ref + drop vh from scroll-mode geometry deps — fixes constant per-page gaps and refetch storm on mobile

docs/CHANGELOG_web.md

@@ -28,6 +28,9 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
 
 ### Changed / 变更
 
+- Shelf rebuilt into a content-first library UI: responsive cover grid (auto-fill 3:4 posters) with hover overlays for pages/size, color-coded format badges, in-cover progress bars, staggered entrance animations, skeleton loading, and dedicated empty/error/searching states; 继续阅读 is now a horizontal resume strip (cover + progress + library); library filter became a segmented pill bar with an icon search field in a sticky blurred top bar (brand mark, admin nav pills, user chip, icon logout); login got a brand card with icon-adorned inputs; toasts animate with icons; missing covers render a serif-initial placeholder instead of an endless pulse.
+- 书架重构为「内容优先」的现代书库界面：响应式封面网格（自适应列宽、3:4 海报），悬停显示页数/大小浮层、格式彩色徽章、封面内嵌进度条、卡片错峰入场动画、骨架屏加载与空/错/搜索无结果专属状态；「继续阅读」改为横向续读卡片条（封面+进度+所属库）；库筛选变成分段 pill，搜索框带图标并移入毛玻璃吸顶顶栏（品牌标、管理导航 pill、用户胶囊、图标退出）；登录页升级为主视觉卡片与带图标输入框；Toast 带动画与图标；无封面书籍以衬线首字占位，不再无限脉冲。
+
 - .txt chapter splitting no longer recognizes volumes: 「第X卷/部」 lines stay plain body text and volume-only books fall back to pseudo-sections as before; chapter switching moves from the dropdown to a 目录 sidebar overlay that highlights the current chapter, scrolls it into view, and closes on click-outside or after picking a chapter.
 - .txt 章节切分不再感知卷:「第X卷/部」行只作为正文文本,只有卷的书和以前一样退回伪章节切分;换章从下拉框改为「目录」侧边栏浮层——当前章高亮并自动居中可见,点击空白处或选定章节即收起。
 - Whole UI restyled to a warm library palette (stone surfaces + amber accents, replacing cool zinc + emerald): warmer dark chrome, amber primary buttons/links, hover/press feedback on shelf cards (cover lift + glow), reader header with format badge and blur, pill-style CBZ page indicator, EPUB spread centered like a book page.
@@ -35,6 +38,9 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
 
 ### Fixed / 修复
 
+- Comic continuous-scroll mode is contiguous again on phones: the size observer used to miss the scroll container (it was attached while the reader still showed "loading", so the box didn't exist), leaving page geometry computed from a stale 480px default width while pages rendered at the real (e.g. 390px) width — every page gained a constant dead gap. The observer now attaches when the box actually mounts; additionally, mobile address-bar show/hide no longer rebuilds the scroll geometry in continuous/whole-page modes, which used to wipe measured page heights and re-trigger a burst of image requests.
+- 手机端漫画「连读」模式页面不再上下脱节:尺寸监听器此前在阅读器还在「加载中」时就尝试挂载(滚动容器尚不存在),导致监听从未生效,页高按过时的 480px 默认宽计算而实际按手机真实宽度(如 390px)渲染,每页之间出现恒定空白断层;现改为容器真正挂载时再接管。另外,手机地址栏收展在连读/整页模式下不再重建滚动几何——此前会清空全部实测页高并引发一波图片重复请求。
+
 - Dragging the comic scrollbar (or the page slider) is no longer gritty: scroll handling is coalesced to one update per frame instead of per event, prefetching waits until scrolling settles instead of firing mid-drag, height corrections are batched per frame, the virtual list re-estimates unseen pages from the first measured page size (scrollbar geometry stops morphing under your finger), and slider seeks land instantly instead of restarting a smooth-scroll animation per notch.
 - 漫画拖动滚动条(及页码滑条)不再发涩:滚动改为每帧合并处理而非逐事件响应,预取等滚动停稳再发(不再拖拽途中抢带宽),量高补偿按帧合并,虚拟列表用首个实测页高重估所有未加载页(滚动条几何不再拖拽中变形),滑条寻址即时落位(不再每格重启一段平滑动画)。
 - .txt/.md files encoded in GBK/GB2312/GB18030 or UTF-16 (typical web-novel exports) no longer render as mojibake: the reader strictly tries UTF-8 first and falls back to GB18030, recognizing UTF-16 by BOM.

frontend/src/components/Cover.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import type { Book } from "../api/types";
 import { fetchObjectUrl } from "../lib/authImage";
-import { btn } from "./ui";
+import { btn, formatBadge } from "./ui";
+import { IconAlert } from "./icons";
 
 export function useAuthedImage(url: string | undefined): { src: string; failed: boolean; retry: () => void } {
   const [state, setState] = useState<{ key: string; src: string; failed: boolean }>({ key: "", src: "", failed: false });
@@ -27,14 +28,29 @@ export function useAuthedImage(url: string | undefined): { src: string; failed:
 
 export function Cover({ book, className }: { book: Book; className?: string }) {
   const { src, failed, retry } = useAuthedImage(book.cover_url);
-  if (failed)
+  if (!book.cover_url || failed) {
     return (
-      <div className={`grid place-items-center bg-stone-900 ${className ?? ""}`}>
-        <button className={btn} onClick={retry} aria-label="封面加载失败,重试">
-          重试
-        </button>
+      <div
+        className={`relative grid place-items-center overflow-hidden bg-linear-to-br from-stone-800 to-stone-900 ${className ?? ""}`}
+      >
+        <span className="select-none font-serif text-4xl text-stone-500">{Array.from(book.title)[0] ?? "?"}</span>
+        <span className={formatBadge(book.format, "absolute bottom-1.5 right-1.5")}>{book.format}</span>
+        {failed && (
+          <button className={btn + " absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"} onClick={retry}>
+            <IconAlert className="size-4" />
+            封面重试
+          </button>
+        )}
       </div>
     );
-  if (!src) return <div className={`animate-pulse bg-stone-800 ${className ?? ""}`} />;
-  return <img src={src} alt="" loading="lazy" className={`bg-stone-900 object-cover ${className ?? ""}`} />;
+  }
+  if (!src) return <div className={`animate-pulse bg-stone-800/80 ${className ?? ""}`} role="presentation" />;
+  return (
+    <img
+      src={src}
+      alt={`《${book.title}》封面`}
+      loading="lazy"
+      className={`bg-stone-900 object-cover ${className ?? ""}`}
+    />
+  );
 }

frontend/src/components/Toaster.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, type ReactNode } from "react";
+import { IconAlert, IconCheck } from "./icons";
 
 type Toast = { id: number; kind: "ok" | "err"; text: ReactNode };
 
@@ -31,10 +32,13 @@ export function Toaster() {
         <div
           key={t.id}
           role="status"
-          className={`max-w-sm rounded-lg px-4 py-2 text-sm shadow-lg ring-1 ring-white/10 ${
-            t.kind === "ok" ? "bg-emerald-900 text-emerald-100" : "bg-red-900 text-red-100"
+          className={`fx-rise flex max-w-sm items-center gap-2 rounded-xl px-4 py-2.5 text-sm shadow-xl ring-1 backdrop-blur-md ${
+            t.kind === "ok"
+              ? "bg-emerald-950/90 text-emerald-100 ring-emerald-500/25"
+              : "bg-red-950/90 text-red-100 ring-red-500/30"
           }`}
         >
+          {t.kind === "ok" ? <IconCheck className="size-4 shrink-0 text-emerald-400" /> : <IconAlert className="size-4 shrink-0 text-red-400" />}
           {t.text}
         </div>
       ))}

frontend/src/components/TopBar.tsx

@@ -1,41 +1,64 @@
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { useAuth } from "../auth/AuthContext";
-import { btn } from "./ui";
+import { IconBooks, IconFolder, IconLogout, IconUser } from "./icons";
+import { btnGhost } from "./ui";
 
 export function TopBar({ right }: { right?: ReactNode }) {
   const { user, isAdmin, logout } = useAuth();
   return (
-    <header className="flex shrink-0 items-center gap-2 border-b border-stone-800/80 px-4 py-3">
-      <Link to="/" className="font-serif text-lg font-semibold tracking-wide">
-        Book<span className="text-amber-500">Lib</span>
+    <header className="sticky top-0 z-30 flex shrink-0 items-center gap-1 border-b border-white/[0.06] bg-stone-950/80 px-4 py-2.5 backdrop-blur-md sm:px-6">
+      <Link
+        to="/"
+        className="flex shrink-0 items-center gap-2 rounded-lg pr-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
+      >
+        <span className="grid size-7 place-items-center rounded-lg bg-linear-to-br from-amber-500 to-orange-600 text-stone-950 shadow-md shadow-amber-500/25">
+          <IconBooks className="size-4.5" />
+        </span>
+        <span className="font-serif text-lg font-semibold tracking-wide">
+          Book<span className="text-amber-400">Lib</span>
+        </span>
       </Link>
       {isAdmin && (
-        <Link
-          className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
-          to="/admin/users"
-        >
-          用户
-        </Link>
+        <nav aria-label="管理" className="ml-2 hidden items-center gap-1 sm:flex">
+          <TabLink to="/admin/users">
+            <IconUser className="size-4" />
+            用户
+          </TabLink>
+          <TabLink to="/admin/libraries">
+            <IconFolder className="size-4" />
+            库管理
+          </TabLink>
+        </nav>
       )}
-      {isAdmin && (
-        <Link
-          className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
-          to="/admin/libraries"
-        >
-          库管理
-        </Link>
-      )}
-      <div className="ml-auto flex items-center gap-3">
+      <div className="ml-auto flex items-center gap-2 sm:gap-3">
         {right}
-        <span className="text-sm text-stone-400">
-          {user?.username}
-          {isAdmin ? "(admin)" : ""}
+        <span className="flex items-center gap-2 rounded-full bg-white/[0.05] py-1 pl-1 pr-3 text-sm text-stone-300 ring-1 ring-white/[0.07]">
+          <span className="grid size-6 shrink-0 place-items-center rounded-full bg-amber-500/20 text-[11px] font-semibold text-amber-300 ring-1 ring-amber-500/30">
+            {Array.from(user?.username ?? "?")[0]?.toUpperCase()}
+          </span>
+          <span className="hidden max-w-28 truncate sm:inline">{user?.username}</span>
+          {isAdmin && <span className="hidden rounded bg-amber-500/15 px-1 text-[10px] font-semibold text-amber-300 md:inline">admin</span>}
         </span>
-        <button className={btn} onClick={logout}>
-          退出
+        <button className={btnGhost} onClick={logout} aria-label="退出登录" title="退出登录">
+          <IconLogout className="size-4.5" />
         </button>
       </div>
     </header>
   );
 }
+
+function TabLink({ to, children }: { to: string; children: ReactNode }) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        `flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 ${
+          isActive ? "bg-white/[0.09] text-stone-100 ring-1 ring-white/10" : "text-stone-400 hover:bg-white/[0.06] hover:text-stone-100"
+        }`
+      }
+    >
+      {children}
+    </NavLink>
+  );
+}

frontend/src/components/icons.tsx

@@ -0,0 +1,122 @@
+import type { SVGProps } from "react";
+
+// 统一 1.7px 描边的线性图标(Phosphor 风格),尺寸由外部 className 控制
+function Svg({ children, ...p }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...p}
+    >
+      {children}
+    </svg>
+  );
+}
+
+type P = SVGProps<SVGSVGElement>;
+
+export const IconBooks = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H10a1.5 1.5 0 0 1 1.5 1.5V18a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 14.5v-9Z" />
+    <path d="M13 8h4.5A1.5 1.5 0 0 1 19 9.5v8A1.5 1.5 0 0 1 17.5 19H13" />
+    <path d="M7 4v12M16 12.5v4" />
+  </Svg>
+);
+
+export const IconSearch = (p: P) => (
+  <Svg {...p}>
+    <circle cx="11" cy="11" r="6.5" />
+    <path d="m16 16 4 4" />
+  </Svg>
+);
+
+export const IconRefresh = (p: P) => (
+  <Svg {...p}>
+    <path d="M20 12a8 8 0 1 1-2.34-5.66" />
+    <path d="M20 4v4.5h-4.5" />
+  </Svg>
+);
+
+export const IconScan = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16" />
+    <path d="M7 12h10" />
+  </Svg>
+);
+
+export const IconX = (p: P) => (
+  <Svg {...p}>
+    <path d="m6 6 12 12M18 6 6 18" />
+  </Svg>
+);
+
+export const IconTrash = (p: P) => (
+  <Svg {...p}>
+    <path d="M4.5 6.5h15M9.5 6.5V4.75A.75.75 0 0 1 10.25 4h3.5a.75.75 0 0 1 .75.75v1.75M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12" />
+  </Svg>
+);
+
+export const IconLogout = (p: P) => (
+  <Svg {...p}>
+    <path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" />
+    <path d="M10 8 6 12l4 4M6 12h10" />
+  </Svg>
+);
+
+export const IconArrowLeft = (p: P) => (
+  <Svg {...p}>
+    <path d="M20 12H4m0 0 6-6m-6 6 6 6" />
+  </Svg>
+);
+
+export const IconBookOpen = (p: P) => (
+  <Svg {...p}>
+    <path d="M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2 1.5-1.5 3.5-2 8-2v-13c-4.5 0-6.5.5-8 2Z" />
+    <path d="M12 6.5v13" />
+  </Svg>
+);
+
+export const IconUser = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="8" r="3.5" />
+    <path d="M5 19.5c1.2-3 3.7-4.5 7-4.5s5.8 1.5 7 4.5" />
+  </Svg>
+);
+
+export const IconLock = (p: P) => (
+  <Svg {...p}>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="1.5" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14v2.5" />
+  </Svg>
+);
+
+export const IconCheck = (p: P) => (
+  <Svg {...p}>
+    <path d="m5 12.5 4.5 4.5L19 7" />
+  </Svg>
+);
+
+export const IconAlert = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V13m0 3.5v.01" />
+  </Svg>
+);
+
+export const IconClock = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V12l3 2" />
+  </Svg>
+);
+
+export const IconFolder = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 6.5A1.5 1.5 0 0 1 5.5 5h3.2a1.5 1.5 0 0 1 1.2.6l.9 1.2a1.5 1.5 0 0 0 1.2.6h6.5A1.5 1.5 0 0 1 20 9.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-11Z" />
+  </Svg>
+);

frontend/src/components/ui.ts

@@ -1,7 +1,38 @@
+import type { Format } from "../api/types";
+
 export const btn =
-  "rounded-lg bg-stone-800 px-3 py-1.5 text-sm transition-colors hover:bg-stone-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-stone-600 disabled:cursor-not-allowed disabled:opacity-50";
+  "inline-flex items-center gap-1.5 rounded-lg bg-white/[0.06] px-3 py-1.5 text-sm ring-1 ring-white/10 transition-colors hover:bg-white/[0.11] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-50";
 export const btnPrimary =
-  "rounded-lg bg-amber-600 px-3 py-1.5 text-sm text-stone-950 transition-colors hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-50";
+  "inline-flex items-center gap-1.5 rounded-lg bg-amber-500 px-3 py-1.5 text-sm font-medium text-stone-950 shadow-md shadow-amber-500/20 transition-colors hover:bg-amber-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50";
+export const btnGhost =
+  "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-stone-400 transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";
 export const input =
-  "rounded-lg border border-stone-700 bg-stone-900 px-3 py-1.5 text-sm outline-none transition-colors placeholder:text-stone-500 focus:border-amber-500/70";
-export const card = "rounded-xl border border-stone-800 bg-stone-900";
+  "rounded-lg bg-white/[0.04] px-3 py-1.5 text-sm ring-1 ring-white/10 outline-none transition placeholder:text-stone-500 focus:bg-white/[0.06] focus:ring-2 focus:ring-amber-500/60";
+export const card = "rounded-xl bg-stone-900/70 ring-1 ring-white/[0.07]";
+
+// 库/筛选分段 pill
+export const pill =
+  "rounded-full px-3.5 py-1.5 text-sm text-stone-400 ring-1 ring-transparent transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";
+export const pillActive = "bg-amber-500/15 text-amber-300 ring-amber-500/30 hover:bg-amber-500/20 hover:text-amber-200";
+
+// 格式徽章:按类型着色,色彩之外始终伴随文字,不依赖颜色单独传义
+export const FORMAT_BADGE: Record<Format, string> = {
+  cbz: "bg-orange-500/15 text-orange-300 ring-orange-500/25",
+  pdf: "bg-rose-500/15 text-rose-300 ring-rose-500/25",
+  epub: "bg-sky-500/15 text-sky-300 ring-sky-500/25",
+  txt: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/25",
+  md: "bg-teal-500/15 text-teal-300 ring-teal-500/25",
+};
+
+export function formatBadge(fmt: Format, extra = ""): string {
+  return `rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ${FORMAT_BADGE[fmt]} ${extra}`;
+}
+
+export function formatSize(bytes: number): string {
+  if (bytes <= 0) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  let n = bytes;
+  for (; n >= 1024 && i < units.length - 1; i++) n /= 1024;
+  return `${n >= 10 || i === 0 ? Math.round(n) : n.toFixed(1)} ${units[i]}`;
+}

frontend/src/index.css

@@ -7,7 +7,17 @@ body,
 }
 body {
   @apply bg-stone-950 text-stone-100 antialiased;
+  /* 顶部一抹极淡的琥珀氛围光,避免大面积纯黑的"朴素感" */
+  background-image: radial-gradient(60rem 28rem at 50% -8rem, rgb(217 119 6 / 0.07), transparent 70%);
+  background-repeat: no-repeat;
 }
+
+/* 入场:卡片/区块轻微上浮淡入(列表 stagger 用 style.animationDelay) */
+@keyframes fx-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.fx-rise { animation: fx-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
@@ -57,6 +67,7 @@ body {
 @media (prefers-reduced-motion: reduce) {
   .rd-sheet { animation: none; }
   .rd-rise-anim { transition: none !important; }
+  .fx-rise { animation: none; }
 }
 
 /* markdown 正文(仅 .md-body 作用域) */

frontend/src/pages/Login.tsx

@@ -1,9 +1,21 @@
-import { useState, type FormEvent } from "react";
+import { useState, type FormEvent, type ReactNode } from "react";
 import { Navigate, useLocation } from "react-router-dom";
 import { useAuth } from "../auth/AuthContext";
+import { IconBooks, IconLock, IconUser } from "../components/icons";
 import { toast } from "../components/Toaster";
 import { btnPrimary, card, input } from "../components/ui";
 
+function Field({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="relative block">
+        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-stone-500">{icon}</span>
+        {children}
+      </span>
+    </label>
+  );
+}
+
 export default function Login() {
   const { login, user } = useAuth();
   const loc = useLocation() as { state?: { from?: string } };
@@ -27,13 +39,39 @@ export default function Login() {
 
   return (
     <div className="grid h-full place-items-center p-4">
-      <form onSubmit={submit} className={`${card} w-full max-w-sm space-y-4 p-6`}>
-        <h1 className="text-lg font-semibold">BookLib 登录</h1>
-        <input className={input + " w-full"} value={u} onChange={(e) => setU(e.target.value)}
-          aria-label="用户名" placeholder="用户名" autoFocus autoComplete="username" />
-        <input className={input + " w-full"} type="password" value={p} onChange={(e) => setP(e.target.value)}
-          aria-label="密码" placeholder="密码" autoComplete="current-password" />
-        <button className={btnPrimary + " w-full"} disabled={busy || !u || !p}>
+      <form onSubmit={submit} className={`${card} fx-rise w-full max-w-sm space-y-4 p-8 shadow-2xl shadow-black/40`}>
+        <div className="flex flex-col items-center pb-2 text-center">
+          <span className="grid size-12 place-items-center rounded-2xl bg-linear-to-br from-amber-500 to-orange-600 text-stone-950 shadow-lg shadow-amber-500/25">
+            <IconBooks className="size-7" />
+          </span>
+          <h1 className="mt-4 font-serif text-2xl font-semibold tracking-wide">
+            Book<span className="text-amber-400">Lib</span>
+          </h1>
+          <p className="mt-1 text-sm text-stone-500">你的漫画与书籍藏书馆</p>
+        </div>
+        <Field icon={<IconUser className="size-4" />}>
+          <input
+            className={input + " w-full pl-9"}
+            value={u}
+            onChange={(e) => setU(e.target.value)}
+            aria-label="用户名"
+            placeholder="用户名"
+            autoFocus
+            autoComplete="username"
+          />
+        </Field>
+        <Field icon={<IconLock className="size-4" />}>
+          <input
+            className={input + " w-full pl-9"}
+            type="password"
+            value={p}
+            onChange={(e) => setP(e.target.value)}
+            aria-label="密码"
+            placeholder="密码"
+            autoComplete="current-password"
+          />
+        </Field>
+        <button className={btnPrimary + " w-full justify-center py-2"} disabled={busy || !u || !p}>
           {busy ? "登录中…" : "登录"}
         </button>
       </form>

frontend/src/pages/Reader.tsx

@@ -4,8 +4,9 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import { api } from "../api/client";
 import type { Format } from "../api/types";
 import { useAuth } from "../auth/AuthContext";
+import { IconArrowLeft, IconTrash } from "../components/icons";
 import { toast } from "../components/Toaster";
-import { btn } from "../components/ui";
+import { btn, btnGhost, formatBadge } from "../components/ui";
 import type { ReaderProps } from "../lib/useProgress";
 
 const READERS: Partial<Record<Format, LazyExoticComponent<ComponentType<ReaderProps>>>> = {
@@ -68,17 +69,15 @@ export default function Reader() {
           (chromeOn ? "h-11 py-2 opacity-100" : "h-0 border-b-0 py-0 opacity-0")
         }
       >
-        <Link
-          to="/"
-          className="shrink-0 rounded-md px-2 py-1 text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
-        >
-          ← 书架
+        <Link to="/" className={btnGhost + " shrink-0"}>
+          <IconArrowLeft className="size-4" />
+          书架
         </Link>
         <span className="truncate font-medium">{book?.title ?? "…"}</span>
         {book && (
           <span className="hidden shrink-0 items-center gap-2 text-xs text-stone-500 sm:flex">
             {book.library && <span>{book.library}</span>}
-            <span className="rounded bg-stone-800/80 px-1.5 py-0.5 uppercase">{book.format}</span>
+            <span className={formatBadge(book.format)}>{book.format}</span>
             <span className="tabular-nums">{Math.round(book.percent * 100)}%</span>
           </span>
         )}
@@ -89,6 +88,7 @@ export default function Reader() {
               if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) del.mutate();
             }}
           >
+            <IconTrash className="size-4" />
             删除
           </button>
         )}

frontend/src/pages/Shelf.tsx

@@ -5,63 +5,87 @@ import { api } from "../api/client";
 import type { Book } from "../api/types";
 import { useAuth } from "../auth/AuthContext";
 import { Cover } from "../components/Cover";
+import { IconAlert, IconBookOpen, IconClock, IconFolder, IconRefresh, IconScan, IconSearch, IconX } from "../components/icons";
 import { TopBar } from "../components/TopBar";
 import { toast } from "../components/Toaster";
-import { btn, btnPrimary, card, input } from "../components/ui";
+import { btn, card, formatBadge, formatSize, input, pill, pillActive } from "../components/ui";
 import { groupByDir } from "../lib/group";
 
 function BookCard({
   book,
+  index,
   onOpen,
   onDelete,
 }: {
   book: Book;
+  index: number;
   onOpen: () => void;
   onDelete: () => void;
 }) {
   const { isAdmin } = useAuth();
+  const pct = Math.round(book.percent * 100);
   return (
-    <div className="group relative w-32 shrink-0">
-      <button onClick={onOpen} className="block w-full text-left">
-        <Cover
-          book={book}
-          className="aspect-[3/4] w-32 rounded-lg shadow-md ring-1 ring-stone-800 transition duration-200 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:ring-stone-600"
-        />
-        <p className="mt-1.5 truncate text-xs text-stone-200 transition-colors group-hover:text-amber-300">
+    <div
+      className="group fx-rise relative flex flex-col"
+      style={{ animationDelay: `${Math.min(index, 23) * 25}ms` }}
+    >
+      <button onClick={onOpen} className="block w-full text-left focus-visible:outline-none">
+        <div className="relative aspect-[3/4] w-full overflow-hidden rounded-lg shadow-md ring-1 ring-white/10 transition duration-200 will-change-transform group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-black/40 group-hover:ring-amber-500/40 group-focus-visible:-translate-y-1 group-focus-visible:ring-amber-500">
+          <Cover book={book} className="size-full" />
+          <span className={formatBadge(book.format, "absolute left-1.5 top-1.5 backdrop-blur-sm")}>{book.format}</span>
+          {book.state === "error" && (
+            <span
+              className="absolute right-1.5 top-1.5 rounded bg-red-950/90 px-1.5 py-0.5 text-[10px] font-semibold text-red-200 ring-1 ring-red-500/40"
+              title={book.error}
+            >
+              损坏
+            </span>
+          )}
+          <span className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-1 bg-linear-to-t from-black/80 via-black/30 to-transparent p-1.5 pt-6 text-[10px] tabular-nums text-stone-200 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
+            <span>{book.pages > 0 ? `${book.pages} 页` : ""}</span>
+            <span>{formatSize(book.size)}</span>
+          </span>
+          {pct > 0 && (
+            <span className="absolute inset-x-0 bottom-0 h-1 bg-black/50" role="presentation">
+              <span className="block h-full bg-amber-500" style={{ width: `${pct}%` }} />
+            </span>
+          )}
+        </div>
+        <p className="mt-2 truncate text-xs font-medium text-stone-200 transition-colors group-hover:text-amber-300 group-focus-visible:text-amber-300">
           {book.title}
         </p>
-        <p className="truncate text-[10px] text-stone-500">
-          {book.format} · {book.path}
-        </p>
+        <p className="truncate text-[10px] text-stone-500">{book.path.includes("/") ? book.path.slice(0, book.path.lastIndexOf("/")) : "根目录"}</p>
       </button>
-      {book.state === "error" && (
-        <span
-          className="absolute left-1 top-1 rounded bg-red-900 px-1 text-[10px] text-red-100"
-          title={book.error}
-        >
-          损坏
-        </span>
-      )}
-      {book.percent > 0 && (
-        <div className="mt-1 h-1 w-32 overflow-hidden rounded-full bg-stone-800">
-          <div className="h-full rounded-full bg-amber-500" style={{ width: `${Math.round(book.percent * 100)}%` }} />
-        </div>
-      )}
       {isAdmin && (
         <button
-          className="absolute right-1 top-1 hidden rounded bg-stone-900/80 px-1.5 text-xs text-red-300 group-hover:block"
+          className="absolute right-1.5 top-1.5 z-10 rounded-md bg-stone-950/80 p-1 text-stone-300 opacity-0 ring-1 ring-white/10 backdrop-blur-sm transition hover:bg-red-950 hover:text-red-300 focus-visible:opacity-100 group-hover:opacity-100"
           title="删除(连磁盘文件)"
+          aria-label={`删除《${book.title}》`}
           onClick={() => {
             if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
           }}
         >
-          ✕
+          <IconX className="size-3.5" />
         </button>
       )}
     </div>
   );
 }
 
+const GRID = "grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-x-4 gap-y-6 sm:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]";
+
+function Section({ title, icon, children }: { title: string; icon?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <section className="mb-10">
+      <h2 className="mb-3 flex items-center gap-1.5 text-sm font-semibold tracking-wide text-stone-300">
+        {icon}
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
 export default function Shelf() {
   const qc = useQueryClient();
   const nav = useNavigate();
@@ -110,90 +134,146 @@ export default function Shelf() {
 
   const continueRows = (progQ.data ?? []).slice(0, 12);
   const libs = libsQ.data ?? [];
+  const searching = q.length > 0;
 
   return (
     <div className="flex h-full flex-col">
       <TopBar
         right={
           <>
-            <button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })}>
-              刷新
-            </button>
+            <div className="relative">
+              <IconSearch className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-stone-500" />
+              <input
+                className={input + " w-36 pl-8 sm:w-52"}
+                type="search"
+                aria-label="搜索标题"
+                placeholder="搜索标题…"
+                value={qRaw}
+                onChange={(e) => setQRaw(e.target.value)}
+              />
+            </div>
             {isAdmin && lib > 0 && (
               <button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(lib)}>
+                <IconScan className="size-4" />
                 {scan.isPending ? "扫描中…" : "扫描此库"}
               </button>
             )}
-            <input
-              className={input + " w-44"}
-              aria-label="搜索标题" placeholder="搜索标题…"
-              value={qRaw}
-              onChange={(e) => setQRaw(e.target.value)}
-            />
+            <button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })} aria-label="刷新书目">
+              <IconRefresh className="size-4" />
+              <span className="hidden sm:inline">刷新</span>
+            </button>
           </>
         }
       />
-      <div className="flex-1 overflow-y-auto p-4">
-        {libs.length === 0 && (
-          <p className="text-sm text-stone-500">还没有书库。admin 请到「库管理」建库并扫描。</p>
+      <div className="flex-1 overflow-y-auto px-4 py-5 sm:px-6">
+        {libs.length === 0 && !libsQ.isPending && (
+          <p className="mb-6 flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-sm text-amber-200 ring-1 ring-amber-500/25">
+            <IconAlert className="size-4 shrink-0" />
+            还没有书库。admin 请到「库管理」建库并扫描。
+          </p>
         )}
-        <div className="mb-4 flex flex-wrap gap-2">
-          <button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}>
-            全部
-          </button>
-          {libs.map((l) => (
-            <button key={l.id} className={lib === l.id ? btnPrimary : btn} onClick={() => setLib(l.id)}>
-              {l.name}
+        {(libs.length > 0 || libsQ.isPending) && (
+          <nav aria-label="按库筛选" className="mb-8 flex w-fit flex-wrap gap-1 rounded-full bg-white/[0.04] p-1 ring-1 ring-white/[0.07]">
+            <button className={`${pill} ${lib === 0 ? pillActive : ""}`} aria-pressed={lib === 0} onClick={() => setLib(0)}>
+              全部
             </button>
-          ))}
-        </div>
+            {libs.map((l) => (
+              <button
+                key={l.id}
+                className={`${pill} ${lib === l.id ? pillActive : ""}`}
+                aria-pressed={lib === l.id}
+                onClick={() => setLib(l.id)}
+              >
+                {l.name}
+              </button>
+            ))}
+          </nav>
+        )}
 
-        {continueRows.length > 0 && (
-          <section className="mb-8">
-            <h2 className="mb-2 text-sm font-semibold text-stone-400">继续阅读</h2>
-            <div className="flex gap-4 overflow-x-auto pb-2">
-              {continueRows.map((r) => {
+        {continueRows.length > 0 && !searching && (
+          <Section title="继续阅读" icon={<IconClock className="size-4 text-amber-500/80" />}>
+            <ul className="flex gap-3 overflow-x-auto pb-2" role="list">
+              {continueRows.map((r, i) => {
                 const b = booksByKey.get(`${r.library_id}/${r.path}`);
                 if (!b)
                   return (
-                    <div key={`${r.library_id}/${r.path}`} className={`w-28 shrink-0 p-2 text-xs text-stone-600 ${card}`}>
-                      <p className="truncate">{r.title || "已删除的书"}</p>
-                      <p>{Math.round(r.percent * 100)}%</p>
-                    </div>
+                    <li key={`${r.library_id}/${r.path}`} className={`fx-rise w-44 shrink-0 ${card} p-3`} style={{ animationDelay: `${i * 40}ms` }}>
+                      <p className="truncate text-xs text-stone-400">{r.title || "已删除的书"}</p>
+                      <p className="mt-1 text-[10px] text-stone-600">#{r.library_id}/{r.path} · 进度已保留</p>
+                    </li>
                   );
+                const pct = Math.round(r.percent * 100);
                 return (
-                  <BookCard
-                    key={`${r.library_id}/${r.path}`}
-                    book={b}
-                    onOpen={() => nav(`/book/${b.id}`)}
-                    onDelete={() => del.mutate(b.id)}
-                  />
+                  <li key={`${r.library_id}/${r.path}`} className="fx-rise shrink-0" style={{ animationDelay: `${i * 40}ms` }}>
+                    <button
+                      className="group flex w-64 items-center gap-3 rounded-xl p-2 text-left ring-1 ring-white/[0.07] transition-colors hover:bg-white/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
+                      onClick={() => nav(`/book/${b.id}`)}
+                    >
+                      <Cover book={b} className="aspect-[3/4] w-14 shrink-0 rounded-md shadow ring-1 ring-white/10" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-sm font-medium text-stone-100 group-hover:text-amber-300">{b.title}</span>
+                        <span className="mt-0.5 flex items-center gap-1.5 text-[11px] text-stone-500">
+                          {r.library}
+                          <span className="tabular-nums text-stone-400">{pct}%</span>
+                        </span>
+                        <span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-white/10">
+                          <span className="block h-full rounded-full bg-amber-500" style={{ width: `${pct}%` }} />
+                        </span>
+                      </span>
+                      <IconBookOpen className="size-4 shrink-0 text-stone-600 transition-colors group-hover:text-amber-400" />
+                    </button>
+                  </li>
                 );
               })}
-            </div>
-          </section>
+            </ul>
+          </Section>
         )}
 
         {booksQ.isError && (
-          <p className="mb-4 text-sm text-red-400">
-            加载失败:{booksQ.error instanceof Error ? booksQ.error.message : ""}{" "}
+          <div className={`fx-rise mb-8 flex flex-wrap items-center gap-3 rounded-xl bg-red-950/40 px-4 py-3 text-sm text-red-200 ring-1 ring-red-500/25`}>
+            <IconAlert className="size-4 shrink-0" />
+            <span>加载失败:{booksQ.error instanceof Error ? booksQ.error.message : "未知错误"}</span>
             <button className={btn} onClick={() => booksQ.refetch()}>
+              <IconRefresh className="size-4" />
               重试
             </button>
-          </p>
+          </div>
         )}
+
+        {booksQ.isPending && !booksQ.isError && (
+          <div className={GRID} aria-busy="true" aria-label="加载书目中">
+            {Array.from({ length: 12 }).map((_, i) => (
+              <div key={i} className="space-y-2">
+                <div className="aspect-[3/4] animate-pulse rounded-lg bg-stone-800/70" />
+                <div className="h-3 w-3/4 animate-pulse rounded bg-stone-800/70" />
+                <div className="h-2 w-1/2 animate-pulse rounded bg-stone-800/50" />
+              </div>
+            ))}
+          </div>
+        )}
+
         {!booksQ.isPending && groups.length === 0 && !booksQ.isError && (
-          <p className="text-sm text-stone-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
+          <div className="fx-rise flex flex-col items-center py-16 text-center">
+            <IconFolder className="size-10 text-stone-700" />
+            <h3 className="mt-3 text-sm font-medium text-stone-300">{searching ? `没有匹配「${q}」的书` : "此库暂无书目"}</h3>
+            <p className="mt-1 text-sm text-stone-500">
+              {searching ? "换个关键词试试。" : "放入文件后等待扫描,或点上方「扫描此库」。"}
+            </p>
+          </div>
         )}
+
         {groups.map((g) => (
-          <section key={g.dir || "//"} className="mb-8">
-            <h2 className="mb-2 text-sm font-semibold text-stone-400">{g.dir || "根目录"}</h2>
-            <div className="flex flex-wrap gap-4">
-              {g.books.map((b) => (
-                <BookCard key={b.id} book={b} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
+          <Section
+            key={g.dir || "//"}
+            title={g.dir || "根目录"}
+            icon={<IconFolder className="size-4 text-stone-500" />}
+          >
+            <div className={GRID}>
+              {g.books.map((b, i) => (
+                <BookCard key={b.id} book={b} index={i} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
               ))}
             </div>
-          </section>
+          </Section>
         ))}
       </div>
     </div>

frontend/src/readers/CbzReader.tsx

@@ -106,22 +106,26 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
   const [mode, setMode] = useStoredMode();
   const fitH = mode === "fit";
 
+  // vh 只在适高模式参与几何;滚动模式里地址栏收展改 vh 不得重建(会丢全部实测页高→页间错位+重挂图请求风暴)
   const ph = useMemo(
     () => new PageHeights(count, fitH ? vh : width * ratio.current),
-    [count, width, vh, fitH],
+    [count, width, fitH ? vh : 0],
   );
 
-  // 容器尺寸自适应(尺寸变化后重建 PageHeights,阅读位置以当前滚动值为准)
-  useEffect(() => {
-    const el = boxRef.current;
+  // 容器尺寸自适应:回调 ref 在滚动盒真正挂载时才观测(等页数请求期间的早退渲染里没有这个节点)
+  const roRef = useRef<ResizeObserver | null>(null);
+  function attachBox(el: HTMLDivElement | null) {
+    boxRef.current = el;
+    roRef.current?.disconnect();
+    roRef.current = null;
     if (!el) return;
     const ro = new ResizeObserver(() => {
       setWidth(Math.min(el.clientWidth, MAX_W));
       setVh(el.clientHeight);
     });
     ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
+    roRef.current = ro;
+  }
 
   // 首次拿到 count 后恢复进度页
   useEffect(() => {
@@ -222,7 +226,7 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
       }}
     >
       <div
-        ref={boxRef}
+        ref={attachBox}
         onScroll={onScroll}
         onClick={onZoneClick}
         className={"h-full overflow-y-auto" + (mode !== "scroll" ? " snap-y snap-proximity" : "")}

frontend/test/ui.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { formatSize } from "../src/components/ui";
+
+describe("formatSize", () => {
+  it("renders human sizes across units", () => {
+    expect(formatSize(0)).toBe("");
+    expect(formatSize(512)).toBe("512 B");
+    expect(formatSize(2048)).toBe("2.0 KB");
+    expect(formatSize(15 * 1024 * 1024)).toBe("15 MB");
+    expect(formatSize(3.2 * 1024 ** 3)).toBe("3.2 GB");
+  });
+});