Merge branch 'feat/reader-warm-theme'

docs/CHANGELOG_web.md

@@ -8,8 +8,26 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
 
 ## [Unreleased]
 
+### Added / 新增
+
+- Immersive reading for text & comics (微信读书/Mihon-style): tap the middle of the page to show/hide the reader header and control bar; controls now live in a slide-up bottom sheet — a progress slider jumps to any position (text) or page (CBZ), theme swatches (纸/米/夜) are WYSIWYG color dots, plus A−/A+ font size; body text is serif with a readable justified measure; all prefs persist (localStorage).
+- 文本与漫画进入沉浸阅读:点正文中央唤出/隐藏顶栏与工具条;控件收进底部滑出抽屉——进度/页码滑条直接跳到全书任意位置或任意页,主题改为所见即所得的色卡(纸/米/夜),保留 A−/A+ 字号;txt/md 正文为衬线、限宽两端对齐;偏好本地持久化。
+- CBZ adds reading modes — 连读 (continuous scroll) / 整页 (snap to page top) / 适高 (one page per screen, full width) — cycle button in the bar, choice remembered; tapping the left/right edges turns a page/screen and ←/→/PageUp/PageDown work too.
+- CBZ 新增三种阅读模式——连读 / 整页吸附 / 适高(一页一屏满宽),工具条一键循环切换并记忆;点按画面左右缘翻页(屏),并支持 ←/→/PageUp/PageDown 键。
+- PDF reader: emoji skip icons replaced with 首页/末页 text buttons, framed page canvas, and an accessible label announcing arrow-key paging.
+- PDF 阅读器：以文字按钮（首页/末页）替换 emoji 图标，页面画布加边框投影，并补充可访问的「方向键翻页」说明。
+
+### Changed / 变更
+
+- .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.
+- 全站换为暖色「书房」配色（stone 深灰面 + amber 琥珀强调，替代冷色 zinc + emerald）：书架封面悬停上浮高亮、阅读器顶栏带格式徽章与毛玻璃、CBZ 页码改为悬浮胶囊、EPUB 页面居中成书卷感，主按钮/链接统一琥珀色并补齐悬停/焦点反馈。
+
 ### Fixed / 修复
 
+- 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.
 - GBK/GB2312/GB18030 或 UTF-16 编码的 .txt/.md（网文导出常见）不再乱码：阅读器先按 UTF-8 严格解码，失败自动回退 GB18030，UTF-16 靠 BOM 识别。
 - Reading a large .txt no longer freezes the browser: the text is split into chapters (「第X章」/Chapter X/序章… markers, pseudo-sections for unmarked files) and rendered one chapter at a time with a chapter selector and prev/next navigation; 「第X卷/部」 are volume groupings (dropdown optgroups), not chapter breaks, and books with only volumes split by volume; reading progress restores to the saved chapter.

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#09090b" />
+    <meta name="theme-color" content="#0c0a09" />
     <link rel="icon" href="/icon.svg" type="image/svg+xml" />
     <title>BookLib — 个人书库</title>
   </head>

frontend/src/auth/AuthContext.tsx

@@ -77,7 +77,7 @@ export function RequireAuth({ children }: { children: ReactNode }) {
   const { user, ready } = useAuth();
   const loc = useLocation();
   if (!getToken()) return <Navigate to="/login" replace state={{ from: loc.pathname }} />;
-  if (!ready || !user) return <div className="grid h-full place-items-center text-zinc-500">加载中…</div>;
+  if (!ready || !user) return <div className="grid h-full place-items-center text-stone-500">加载中…</div>;
   return <>{children}</>;
 }
 

frontend/src/components/Cover.tsx

@@ -29,12 +29,12 @@ export function Cover({ book, className }: { book: Book; className?: string }) {
   const { src, failed, retry } = useAuthedImage(book.cover_url);
   if (failed)
     return (
-      <div className={`grid place-items-center bg-zinc-900 ${className ?? ""}`}>
+      <div className={`grid place-items-center bg-stone-900 ${className ?? ""}`}>
         <button className={btn} onClick={retry} aria-label="封面加载失败,重试">
           重试
         </button>
       </div>
     );
-  if (!src) return <div className={`animate-pulse bg-zinc-800 ${className ?? ""}`} />;
+  if (!src) return <div className={`animate-pulse bg-stone-800 ${className ?? ""}`} />;
-  return <img src={src} alt="" loading="lazy" className={`bg-zinc-900 object-cover ${className ?? ""}`} />;
+  return <img src={src} alt="" loading="lazy" className={`bg-stone-900 object-cover ${className ?? ""}`} />;
 }

frontend/src/components/ErrorBoundary.tsx

@@ -13,8 +13,8 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, { err: Err
         <div className="grid h-full place-items-center p-8 text-center">
           <div>
             <p className="mb-2 text-lg text-red-400">页面出错了</p>
-            <p className="mb-4 max-w-md text-sm break-all text-zinc-500">{String(this.state.err)}</p>
+            <p className="mb-4 max-w-md text-sm break-all text-stone-500">{String(this.state.err)}</p>
-            <button className="rounded-md bg-zinc-800 px-3 py-1.5 text-sm" onClick={() => this.setState({ err: null })}>
+            <button className="rounded-md bg-stone-800 px-3 py-1.5 text-sm" onClick={() => this.setState({ err: null })}>
               重试
             </button>
           </div>

frontend/src/components/Toaster.tsx

@@ -31,7 +31,7 @@ export function Toaster() {
         <div
           key={t.id}
           role="status"
-          className={`max-w-sm rounded-lg px-4 py-2 text-sm shadow-lg ${
+          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"
           }`}
         >

frontend/src/components/TopBar.tsx

@@ -6,23 +6,29 @@ import { btn } from "./ui";
 export function TopBar({ right }: { right?: ReactNode }) {
   const { user, isAdmin, logout } = useAuth();
   return (
-    <header className="flex shrink-0 items-center gap-4 border-b border-zinc-800 px-4 py-3">
+    <header className="flex shrink-0 items-center gap-2 border-b border-stone-800/80 px-4 py-3">
-      <Link to="/" className="font-semibold">
+      <Link to="/" className="font-serif text-lg font-semibold tracking-wide">
-        BookLib
+        Book<span className="text-amber-500">Lib</span>
       </Link>
       {isAdmin && (
-        <Link className="text-sm text-zinc-400 hover:text-zinc-100" to="/admin/users">
+        <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>
       )}
       {isAdmin && (
-        <Link className="text-sm text-zinc-400 hover:text-zinc-100" to="/admin/libraries">
+        <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">
         {right}
-        <span className="text-sm text-zinc-400">
+        <span className="text-sm text-stone-400">
           {user?.username}
           {isAdmin ? "(admin)" : ""}
         </span>

frontend/src/components/ui.ts

@@ -1,7 +1,7 @@
 export const btn =
-  "rounded-md bg-zinc-800 px-3 py-1.5 text-sm hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-50";
+  "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";
 export const btnPrimary =
-  "rounded-md bg-emerald-700 px-3 py-1.5 text-sm hover:bg-emerald-600 disabled:cursor-not-allowed disabled:opacity-50";
+  "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";
 export const input =
-  "rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm outline-none focus:border-zinc-500";
+  "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-zinc-800 bg-zinc-900";
+export const card = "rounded-xl border border-stone-800 bg-stone-900";

frontend/src/index.css

@@ -6,14 +6,57 @@ body,
   height: 100%;
 }
 body {
-  @apply bg-zinc-950 text-zinc-100 antialiased;
+  @apply bg-stone-950 text-stone-100 antialiased;
 }
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 ::-webkit-scrollbar-thumb {
-  @apply rounded bg-zinc-700;
+  @apply rounded-full border-2 border-transparent bg-clip-padding bg-stone-700/70;
+}
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-stone-600;
+}
+
+/* 阅读页主题:纸/米/夜,文本类阅读器共用 —— 见 lib/readerPrefs.ts */
+[data-rd="paper"] { --rd-bg: #faf8f4; --rd-fg: #292524; --rd-link: #9a3412; }
+[data-rd="sepia"] { --rd-bg: #f0e6d2; --rd-fg: #433a29; --rd-link: #92400e; }
+[data-rd="night"] { --rd-bg: #171512; --rd-fg: #c6c0b6; --rd-link: #e0a458; }
+.rd-surface {
+  background: var(--rd-bg);
+  color: var(--rd-fg);
+  font-family: ui-serif, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, Georgia, serif;
+}
+.rd-surface ::selection {
+  background: color-mix(in oklab, var(--rd-link) 30%, transparent);
+}
+/* 主题内的次级控件(章节条/翻页键),跟随当前阅读主题 */
+.rd-btn {
+  @apply rounded-md px-2.5 py-1 text-sm transition-colors;
+  background: color-mix(in oklab, currentColor 8%, transparent);
+}
+.rd-btn:hover { background: color-mix(in oklab, currentColor 16%, transparent); }
+.rd-btn:disabled { @apply cursor-not-allowed opacity-40; }
+/* 目录侧边栏行 */
+.rd-row { @apply block w-full truncate rounded-md px-2.5 py-1.5 text-left text-sm transition-colors; }
+.rd-row:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
+.rd-btn-on { @apply font-semibold; background: color-mix(in oklab, currentColor 20%, transparent); }
+.rd-divider { border-color: color-mix(in oklab, currentColor 14%, transparent); }
+
+/* 进度/页码滑条:主题色轨道 + 强调色拇指,触摸友好 */
+.rd-range { @apply h-1.5 w-full cursor-pointer appearance-none rounded-full; background: color-mix(in oklab, currentColor 18%, transparent); }
+.rd-range::-webkit-slider-thumb {
+  @apply h-4 w-4 appearance-none rounded-full ring-2 ring-black/10; background: var(--rd-link, #f59e0b);
+}
+.rd-range::-moz-range-thumb { @apply h-4 w-4 rounded-full border-0; background: var(--rd-link, #f59e0b); }
+
+/* 沉浸态底部工具抽屉的滑入动效 */
+@keyframes rd-rise { from { transform: translateY(100%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
+.rd-sheet { animation: rd-rise 0.2s ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .rd-sheet { animation: none; }
+  .rd-rise-anim { transition: none !important; }
 }
 
 /* markdown 正文(仅 .md-body 作用域) */
@@ -23,12 +66,12 @@ body {
 .md-body p { @apply my-3; }
 .md-body ul { @apply my-3 list-disc space-y-1 pl-6; }
 .md-body ol { @apply my-3 list-decimal space-y-1 pl-6; }
-.md-body blockquote { @apply my-3 border-l-2 border-zinc-600 pl-4 text-zinc-400; }
+.md-body blockquote { @apply my-3 border-l-2 pl-4; border-color: color-mix(in oklab, currentColor 30%, transparent); opacity: 0.75; }
-.md-body code { @apply rounded bg-zinc-800 px-1 py-0.5 text-[13px]; }
+.md-body code { @apply rounded px-1 py-0.5 text-[0.85em]; background: color-mix(in oklab, currentColor 10%, transparent); }
-.md-body pre { @apply my-3 overflow-x-auto rounded-lg bg-zinc-900 p-3; }
+.md-body pre { @apply my-3 overflow-x-auto rounded-lg p-3; background: color-mix(in oklab, currentColor 6%, transparent); }
 .md-body pre code { @apply bg-transparent p-0; }
-.md-body a { @apply text-emerald-400 underline; }
+.md-body a { color: var(--rd-link, #f59e0b); @apply underline underline-offset-2; }
 .md-body img { @apply my-3 max-w-full rounded; }
-.md-body hr { @apply my-6 border-zinc-800; }
+.md-body hr { @apply my-6; border-color: color-mix(in oklab, currentColor 15%, transparent); }
 .md-body table { @apply my-3 w-full border-collapse text-sm; }
-.md-body th, .md-body td { @apply border border-zinc-700 px-2 py-1 text-left; }
+.md-body th, .md-body td { @apply border px-2 py-1 text-left; border-color: color-mix(in oklab, currentColor 22%, transparent); }

frontend/src/lib/chapters.ts

@@ -1,10 +1,9 @@
-// txt 章节切分:优先识别「第X章」类标题行;「第X卷/部」是层级不是章节边界,
+// txt 章节切分:只识别「第X章」类标题行(卷/部不再感知,其行留在正文里);
-// 只做分组标签;整本没有章标记时才退而用卷作边界;再没有就按段落边界切
+// 整本没有章标记时按段落边界切伪章节,保证任何单块都能在浏览器里流畅渲染。
-// 伪章节,保证任何单块都能在浏览器里流畅渲染。纯逻辑,无 DOM,vitest 覆盖。
+// 纯逻辑,无 DOM,vitest 覆盖。
 export interface TxtChapter {
   title: string;
   start: number; // 正文中的起始字符偏移(含标题行本身)
-  vol?: string; // 所属卷标题(仅用于导航分组)
 }
 
 const NUM = "[0-9〇零一二三四五六七八九十百千万两]+";
@@ -12,7 +11,6 @@ const CH_RE = new RegExp(
   `^[ \\t\\u3000]*(?:第\\s*${NUM}\\s*[章节回篇话]|Chapter\\s+${NUM}|序[章言]|楔子|引子|尾声|终章|后记|番外)[^\\n]{0,60}[ \\t]*$`,
   "gim",
 );
-const VOL_RE = new RegExp(`^[ \\t\\u3000]*第\\s*${NUM}\\s*[卷部][^\\n]{0,60}[ \\t]*$`, "gm");
 
 const MIN_GAP = 200; // 距上一保留标题不足此数视为目录行/正文提及,丢弃
 const CHUNK = 20_000; // 伪章节目标字数
@@ -28,23 +26,9 @@ function markers(text: string, re: RegExp): TxtChapter[] {
 }
 
 export function splitChapters(text: string): TxtChapter[] {
-  const vols = markers(text, VOL_RE);
+  const chs = markers(text, CH_RE);
-  let chs = markers(text, CH_RE);
-  let volMarks = vols;
-  if (chs.length < 2 && vols.length > 1) {
-    chs = vols; // 只有卷的书:卷即章节
-    volMarks = [];
-  }
   if (chs.length > 1) {
     if (chs[0].start > MIN_GAP) chs.unshift({ title: "开篇", start: 0 });
-    for (const c of chs) {
-      let v: TxtChapter | undefined;
-      for (const m of volMarks) if (m.start < c.start) v = m;
-        else break;
-      if (!v) continue;
-      c.vol = v.title;
-      if (c.start - v.start < MIN_GAP) c.start = v.start; // 卷题行并入本章开头,不留在上一章尾部
-    }
     return chs;
   }
   const out: TxtChapter[] = [];
@@ -63,3 +47,10 @@ export function splitChapters(text: string): TxtChapter[] {
 export function chapterText(text: string, chapters: TxtChapter[], i: number): string {
   return text.slice(chapters[i].start, chapters[i + 1]?.start ?? text.length);
 }
+
+/** 全书进度分数(0..1)→ 章序号 + 章内分数。进度滑条用。 */
+export function seekChapter(n: number, frac: number): { idx: number; intra: number } {
+  const p = Math.min(0.9999, Math.max(0, frac)) * n;
+  const idx = Math.min(n - 1, Math.floor(p));
+  return { idx, intra: p - idx };
+}

frontend/src/lib/readerPrefs.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+export const RD_THEMES = ["paper", "sepia", "night"] as const;
+export type RdTheme = (typeof RD_THEMES)[number];
+export const RD_THEME_LABEL: Record<RdTheme, string> = { paper: "纸", sepia: "米", night: "夜" };
+export const FONT_SIZES = [16, 18, 20, 22, 25, 28];
+
+const KEY = "reader-prefs";
+
+export interface ReaderPrefs {
+  theme: RdTheme;
+  sizeIdx: number;
+}
+
+export function useReaderPrefs() {
+  const [prefs, setPrefs] = useState<ReaderPrefs>(() => {
+    try {
+      const p = JSON.parse(localStorage.getItem(KEY) ?? "") as ReaderPrefs;
+      if (RD_THEMES.includes(p.theme) && Number.isInteger(p.sizeIdx) && p.sizeIdx >= 0 && p.sizeIdx < FONT_SIZES.length)
+        return p;
+    } catch {
+      /* 首次使用或存了坏值 */
+    }
+    return { theme: "sepia", sizeIdx: 2 };
+  });
+  useEffect(() => localStorage.setItem(KEY, JSON.stringify(prefs)), [prefs]);
+
+  return {
+    prefs,
+    fontSize: FONT_SIZES[prefs.sizeIdx],
+    setTheme: (theme: RdTheme) => setPrefs((p) => ({ ...p, theme })),
+    bump: (d: number) =>
+      setPrefs((p) => ({ ...p, sizeIdx: Math.min(FONT_SIZES.length - 1, Math.max(0, p.sizeIdx + d)) })),
+  };
+}

frontend/src/lib/useProgress.ts

@@ -4,9 +4,16 @@ import { api } from "../api/client";
 import type { Book } from "../api/types";
 import { createProgressSaver, type ProgressSaver } from "./progress";
 
+export interface Chrome {
+  on: boolean;
+  toggle(): void;
+  show(): void;
+}
+
 export interface ReaderProps {
   book: Book;
   initialLocator?: Record<string, unknown>;
+  chrome: Chrome;
 }
 
 export function useProgressSaver(bookId: number): ProgressSaver {

frontend/src/lib/virt.ts

@@ -18,6 +18,21 @@ export class PageHeights {
     for (let i = from; i < this.n; i++) this.cum[i + 1] = this.cum[i] + (this.actual[i] ?? this.est);
   }
 
+  get estHeight(): number {
+    return this.est;
+  }
+
+  /** 重估默认页高(同开本漫画量出真实比例后,滚动条几何就不再逐页变了)。
+   * 返回起始偏移 < y 的未量高页数——调用方可按 n×Δest 自行补偿 scrollTop。 */
+  setEst(e: number, y: number): number {
+    if (!Number.isFinite(e) || e <= 0 || e === this.est) return 0;
+    let n = 0;
+    for (let i = 0; i < this.n && this.cum[i] < y; i++) if (this.actual[i] === undefined) n++;
+    this.est = e;
+    this.rebuild(0);
+    return n;
+  }
+
   /** 返回高度增量(相对旧值)。同值幂等返 0;越界/非法高度忽略。 */
   set(i: number, h: number): number {
     if (i < 0 || i >= this.n || !Number.isFinite(h) || h <= 0) return 0;

frontend/src/pages/Login.tsx

@@ -30,9 +30,9 @@ export default function Login() {
       <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)}
-          placeholder="用户名" autoFocus autoComplete="username" />
+          aria-label="用户名" placeholder="用户名" autoFocus autoComplete="username" />
         <input className={input + " w-full"} type="password" value={p} onChange={(e) => setP(e.target.value)}
-          placeholder="密码" autoComplete="current-password" />
+          aria-label="密码" placeholder="密码" autoComplete="current-password" />
         <button className={btnPrimary + " w-full"} disabled={busy || !u || !p}>
           {busy ? "登录中…" : "登录"}
         </button>

frontend/src/pages/Reader.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Suspense, lazy, type ComponentType, type LazyExoticComponent } from "react";
+import { Suspense, lazy, useCallback, useMemo, useState, type ComponentType, type LazyExoticComponent } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { api } from "../api/client";
 import type { Format } from "../api/types";
@@ -22,6 +22,11 @@ export default function Reader() {
   const qc = useQueryClient();
   const nav = useNavigate();
   const { isAdmin } = useAuth();
+  const [chromeOn, setChromeOn] = useState(true);
+
+  const toggle = useCallback(() => setChromeOn((v) => !v), []);
+  const show = useCallback(() => setChromeOn(true), []);
+  const chrome = useMemo(() => ({ on: chromeOn, toggle, show }), [chromeOn, toggle, show]);
 
   const bookQ = useQuery({ queryKey: ["book", id], queryFn: () => api.getBook(id), enabled: Number.isFinite(id) });
   const progQ = useQuery({ queryKey: ["progress"], queryFn: api.listProgress });
@@ -52,21 +57,31 @@ export default function Reader() {
     const R = READERS[book.format];
     if (!R) return <Msg text={`暂不支持的格式:${book.format}`} />;
     const row = (progQ.data ?? []).find((r) => r.library_id === book.library_id && r.path === book.path);
-    return <R book={book} initialLocator={row?.locator} />;
+    return <R book={book} initialLocator={row?.locator} chrome={chrome} />;
   })();
 
   return (
     <div className="flex h-full flex-col">
-      <header className="flex shrink-0 items-center gap-3 border-b border-zinc-800 px-4 py-2 text-sm">
+      <header
-        <Link to="/" className="text-zinc-400 hover:text-zinc-100">
+        className={
+          "flex shrink-0 items-center gap-3 overflow-hidden border-b border-stone-800/80 bg-stone-950/80 px-4 text-sm backdrop-blur transition-all duration-300 " +
+          (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>
         <span className="truncate font-medium">{book?.title ?? "…"}</span>
-        <span className="text-zinc-500">
+        {book && (
-          {book?.library ? book.library + " · " : ""}
+          <span className="hidden shrink-0 items-center gap-2 text-xs text-stone-500 sm:flex">
-          {book?.format}
+            {book.library && <span>{book.library}</span>}
-          {book ? ` · ${Math.round(book.percent * 100)}%` : ""}
+            <span className="rounded bg-stone-800/80 px-1.5 py-0.5 uppercase">{book.format}</span>
-        </span>
+            <span className="tabular-nums">{Math.round(book.percent * 100)}%</span>
+          </span>
+        )}
         {isAdmin && book && (
           <button
             className={btn + " ml-auto text-red-300"}
@@ -87,7 +102,7 @@ export default function Reader() {
 
 function Msg({ text, retry }: { text: string; retry?: () => void }) {
   return (
-    <div className="grid h-full place-items-center p-8 text-center text-zinc-500">
+    <div className="grid h-full place-items-center p-8 text-center text-stone-500">
       <div>
         <p className="mb-3">{text}</p>
         {retry && (

frontend/src/pages/Shelf.tsx

@@ -23,9 +23,14 @@ function BookCard({
   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" />
+        <Cover
-        <p className="mt-1 truncate text-xs text-zinc-300">{book.title}</p>
+          book={book}
-        <p className="truncate text-[10px] text-zinc-500">
+          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">
+          {book.title}
+        </p>
+        <p className="truncate text-[10px] text-stone-500">
           {book.format} · {book.path}
         </p>
       </button>
@@ -38,13 +43,13 @@ function BookCard({
         </span>
       )}
       {book.percent > 0 && (
-        <div className="mt-1 h-1 w-32 overflow-hidden rounded bg-zinc-800">
+        <div className="mt-1 h-1 w-32 overflow-hidden rounded-full bg-stone-800">
-          <div className="h-full bg-emerald-600" style={{ width: `${Math.round(book.percent * 100)}%` }} />
+          <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-zinc-900/80 px-1.5 text-xs text-red-300 group-hover:block"
+          className="absolute right-1 top-1 hidden rounded bg-stone-900/80 px-1.5 text-xs text-red-300 group-hover:block"
           title="删除(连磁盘文件)"
           onClick={() => {
             if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
@@ -121,7 +126,7 @@ export default function Shelf() {
             )}
             <input
               className={input + " w-44"}
-              placeholder="搜索标题…"
+              aria-label="搜索标题" placeholder="搜索标题…"
               value={qRaw}
               onChange={(e) => setQRaw(e.target.value)}
             />
@@ -130,7 +135,7 @@ export default function Shelf() {
       />
       <div className="flex-1 overflow-y-auto p-4">
         {libs.length === 0 && (
-          <p className="text-sm text-zinc-500">还没有书库。admin 请到「库管理」建库并扫描。</p>
+          <p className="text-sm text-stone-500">还没有书库。admin 请到「库管理」建库并扫描。</p>
         )}
         <div className="mb-4 flex flex-wrap gap-2">
           <button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}>
@@ -145,13 +150,13 @@ export default function Shelf() {
 
         {continueRows.length > 0 && (
           <section className="mb-8">
-            <h2 className="mb-2 text-sm font-semibold text-zinc-400">继续阅读</h2>
+            <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) => {
                 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-zinc-600 ${card}`}>
+                    <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>
@@ -178,11 +183,11 @@ export default function Shelf() {
           </p>
         )}
         {!booksQ.isPending && groups.length === 0 && !booksQ.isError && (
-          <p className="text-sm text-zinc-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
+          <p className="text-sm text-stone-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
         )}
         {groups.map((g) => (
           <section key={g.dir || "//"} className="mb-8">
-            <h2 className="mb-2 text-sm font-semibold text-zinc-400">{g.dir || "根目录"}</h2>
+            <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)} />

frontend/src/pages/admin/Libraries.tsx

@@ -67,9 +67,9 @@ export default function AdminLibraries() {
             <div key={l.id} className={`${card} p-4`}>
               <div className="mb-1 flex items-baseline gap-3">
                 <span className="font-medium">{l.name}</span>
-                <span className="text-xs text-zinc-500">#{l.id}</span>
+                <span className="text-xs text-stone-500">#{l.id}</span>
               </div>
-              <p className="mb-3 text-xs break-all text-zinc-500">{l.root_path}</p>
+              <p className="mb-3 text-xs break-all text-stone-500">{l.root_path}</p>
               <div className="flex flex-wrap items-center gap-3">
                 <button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(l.id)}>
                   {scan.isPending ? "扫描中…" : "扫描"}
@@ -90,12 +90,12 @@ export default function AdminLibraries() {
                 <button className={btn} onClick={() => fileRefs.current[l.id]?.click()}>
                   上传文件
                 </button>
-                <span className="text-xs text-zinc-600">白名单:cbz/zip/pdf/epub/txt/md</span>
+                <span className="text-xs text-stone-600">白名单:cbz/zip/pdf/epub/txt/md</span>
               </div>
             </div>
           ))}
           {(libsQ.data ?? []).length === 0 && !libsQ.isPending && (
-            <p className="text-sm text-zinc-500">还没有库,用上方表单创建。</p>
+            <p className="text-sm text-stone-500">还没有库,用上方表单创建。</p>
           )}
         </div>
       </div>

frontend/src/pages/admin/Users.tsx

@@ -55,7 +55,7 @@ export default function AdminUsers() {
           </button>
         </form>
         <table className="w-full max-w-2xl text-sm">
-          <thead className="text-left text-zinc-500">
+          <thead className="text-left text-stone-500">
             <tr>
               <th className="py-1">ID</th>
               <th>用户名</th>
@@ -66,11 +66,11 @@ export default function AdminUsers() {
           </thead>
           <tbody>
             {(usersQ.data ?? []).map((x) => (
-              <tr key={x.id} className="border-t border-zinc-800">
+              <tr key={x.id} className="border-t border-stone-800">
-                <td className="py-1 text-zinc-500">{x.id}</td>
+                <td className="py-1 text-stone-500">{x.id}</td>
                 <td>{x.username}</td>
                 <td>{x.role}</td>
-                <td className="text-zinc-500">{x.created_at.slice(0, 19).replace("T", " ")}</td>
+                <td className="text-stone-500">{x.created_at.slice(0, 19).replace("T", " ")}</td>
                 <td className="py-1 text-right">
                   <button
                     className={btn + " text-red-300"}

frontend/src/readers/CbzReader.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
 import { api, formatPageUrl } from "../api/client";
 import { btn } from "../components/ui";
 import { fetchObjectUrl } from "../lib/authImage";
@@ -9,7 +9,30 @@ import { PageHeights } from "../lib/virt";
 const MAX_W = 720;
 const EST_RATIO = 1.4; // 估高:宽 × 1.4(漫画常见竖幅)
 
-function PageImg({ url, width, onLoaded }: { url: string; width: number; onLoaded: (h: number) => void }) {
+type PageMode = "scroll" | "snap" | "fit"; // 连读 / 整页(适宽) / 适高(一页一屏)
+const MODES: PageMode[] = ["scroll", "snap", "fit"];
+const MODE_LABEL: Record<PageMode, string> = { scroll: "连读", snap: "整页", fit: "适高" };
+
+function useStoredMode() {
+  const [mode, setMode] = useState<PageMode>(() => {
+    const v = localStorage.getItem("cbz-mode");
+    return MODES.includes(v as PageMode) ? (v as PageMode) : "scroll";
+  });
+  useEffect(() => localStorage.setItem("cbz-mode", mode), [mode]);
+  return [mode, setMode] as const;
+}
+
+function PageImg({
+  url,
+  width,
+  fitH,
+  onLoaded,
+}: {
+  url: string;
+  width: number;
+  fitH: boolean;
+  onLoaded: (h: number) => void;
+}) {
   const [src, setSrc] = useState("");
   const [failed, setFailed] = useState(false);
   const [nonce, setNonce] = useState(0);
@@ -26,7 +49,7 @@ function PageImg({ url, width, onLoaded }: { url: string; width: number; onLoade
   }, [url, nonce]);
   if (failed)
     return (
-      <div className="grid place-items-center gap-2 bg-zinc-900 py-8 text-sm text-zinc-500" style={{ width }}>
+      <div className="grid place-items-center gap-2 bg-stone-900 py-8 text-sm text-stone-500" style={{ width }}>
         本页加载失败
         <button className={btn} onClick={() => setNonce((n) => n + 1)}>
           重试
@@ -34,7 +57,11 @@ function PageImg({ url, width, onLoaded }: { url: string; width: number; onLoade
       </div>
     );
   if (!src)
-    return <div className="animate-pulse bg-zinc-800" style={{ width, height: width * EST_RATIO }} />;
+    return (
+      <div className="animate-pulse bg-stone-800" style={{ width, height: fitH ? "100%" : width * EST_RATIO }} />
+    );
+  if (fitH)
+    return <img src={src} alt="" className="mx-auto block h-full w-full object-contain" loading="eager" />;
   return (
     <img
       src={src}
@@ -49,7 +76,7 @@ function PageImg({ url, width, onLoaded }: { url: string; width: number; onLoade
   );
 }
 
-export default function CbzReader({ book, initialLocator }: ReaderProps) {
+export default function CbzReader({ book, initialLocator, chrome }: ReaderProps) {
   const countQ = useQuery({
     queryKey: ["pages", book.id],
     queryFn: () => api.pageCount(book.pages_url ?? ""),
@@ -62,10 +89,22 @@ export default function CbzReader({ book, initialLocator }: ReaderProps) {
   const [width, setWidth] = useState(480);
   const [vh, setVh] = useState(600);
   const [top, setTop] = useState(0);
+  const [scrub, setScrub] = useState<number | null>(null); // 页滑条拖拽中的临时值
   const [, bump] = useState(0);
   const restored = useRef(false);
+  const scrollRaf = useRef(0);
+  const idle = useRef<undefined | ReturnType<typeof setTimeout>>(undefined);
+  const curRef = useRef(0);
+  const shift = useRef(0); // 量高补偿按帧合并,避免一次加载多页各改一次 scrollTop
+  const shiftRaf = useRef(0);
+  const ratio = useRef(EST_RATIO); // 学到的页高比(同开本漫画一页量准,全程几何稳定)
+  const [mode, setMode] = useStoredMode();
+  const fitH = mode === "fit";
 
-  const ph = useMemo(() => new PageHeights(count, width * EST_RATIO), [count, width]);
+  const ph = useMemo(
+    () => new PageHeights(count, fitH ? vh : width * ratio.current),
+    [count, width, vh, fitH],
+  );
 
   // 容器尺寸自适应(尺寸变化后重建 PageHeights,阅读位置以当前滚动值为准)
   useEffect(() => {
@@ -87,49 +126,125 @@ export default function CbzReader({ book, initialLocator }: ReaderProps) {
     if (Number.isInteger(p) && p > 0 && p < count) boxRef.current.scrollTop = ph.offset(p);
   }, [count, initialLocator, ph]);
 
+  // 滚动事件按帧合并;预取等滚动停稳再做——拖拽途中逐事件拉图=带宽/解码风暴
   function onScroll() {
+    if (scrollRaf.current) return;
+    scrollRaf.current = requestAnimationFrame(() => {
+      scrollRaf.current = 0;
+      const el = boxRef.current;
+      if (!el) return;
+      const t = el.scrollTop;
+      setTop(t);
+      if (count) {
+        curRef.current = ph.pageAt(t + vh / 2);
+        saver.report({ page: curRef.current }, (curRef.current + 1) / count);
+      }
+      clearTimeout(idle.current);
+      idle.current = setTimeout(() => {
+        for (let j = curRef.current + 1; j <= Math.min(count - 1, curRef.current + 5); j++)
+          fetchObjectUrl(formatPageUrl(book.page_url_fmt ?? "", j)).catch(() => {});
+      }, 250);
+    });
+  }
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(scrollRaf.current);
+      cancelAnimationFrame(shiftRaf.current);
+      clearTimeout(idle.current);
+    },
+    [],
+  );
+
+  function applyShift(d: number) {
+    shift.current += d;
+    if (shiftRaf.current) return;
+    shiftRaf.current = requestAnimationFrame(() => {
+      shiftRaf.current = 0;
+      const el = boxRef.current;
+      if (el && shift.current) el.scrollTop += shift.current;
+      shift.current = 0;
+    });
+  }
+
+  const cur = ph.pageAt(top + vh / 2);
+
+  function jump(i: number, smooth = true) {
     const el = boxRef.current;
     if (!el) return;
-    const t = el.scrollTop;
+    el.scrollTo({ top: ph.offset(Math.max(0, Math.min(count - 1, i))), behavior: smooth ? "smooth" : "auto" });
-    setTop(t);
+    chrome.show();
-    if (count) {
+  }
-      const cur = ph.pageAt(t + vh / 2);
+
-      saver.report({ page: cur }, (cur + 1) / count);
+  // 点按两侧翻页/翻屏,点中间唤出工具栏(微信读书/Mihon 式手势区)
-      for (let j = cur + 1; j <= Math.min(count - 1, cur + 5); j++)
+  function onZoneClick(e: MouseEvent<HTMLDivElement>) {
-        fetchObjectUrl(formatPageUrl(book.page_url_fmt ?? "", j)).catch(() => {}); // 预取下方 5 页
+    if ((e.target as HTMLElement).closest("button,input,nav,a")) return;
-    }
+    if (window.getSelection()?.toString()) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - r.left) / r.width;
+    if (x < 0.28) jump(cur - 1);
+    else if (x > 0.72) jump(cur + 1);
+    else chrome.toggle();
   }
 
   // pages_url 缺失时 query 被 disabled 永久 pending → 只有真正发起了请求才显示加载态
   if (countQ.isPending && !!book.pages_url)
-    return <div className="grid h-full place-items-center text-zinc-500">页索引加载中…</div>;
+    return <div className="grid h-full place-items-center text-stone-500">页索引加载中…</div>;
   if (countQ.isError || !book.page_url_fmt)
     return (
-      <div className="grid h-full place-items-center p-8 text-center text-zinc-500">
+      <div className="grid h-full place-items-center p-8 text-center text-stone-500">
         无法解析页索引:{countQ.error instanceof Error ? countQ.error.message : "缺 page_url_fmt"}
       </div>
     );
 
   const fmt: string = book.page_url_fmt;
   const [a, b] = ph.range(top, vh, 2);
-  const cur = ph.pageAt(top + vh / 2);
 
   return (
-    <div className="relative h-full">
+    <div
-      <div ref={boxRef} onScroll={onScroll} className="h-full overflow-y-auto">
+      tabIndex={0}
-        <div className="relative mx-auto" style={{ height: ph.total(), maxWidth: MAX_W }}>
+      aria-label="漫画阅读器,点按左右两侧翻页,点按中间显示工具栏"
+      className="relative h-full"
+      onKeyDown={(e) => {
+        if (e.key === "ArrowRight" || e.key === "PageDown") jump(cur + 1);
+        else if (e.key === "ArrowLeft" || e.key === "PageUp") jump(cur - 1);
+        else return;
+        e.preventDefault();
+      }}
+    >
+      <div
+        ref={boxRef}
+        onScroll={onScroll}
+        onClick={onZoneClick}
+        className={"h-full overflow-y-auto" + (mode !== "scroll" ? " snap-y snap-proximity" : "")}
+      >
+        <div className="relative mx-auto" style={{ height: ph.total(), maxWidth: fitH ? "none" : MAX_W }}>
           {Array.from({ length: b - a }, (_, k) => {
             const i = a + k;
             return (
-              <div key={i} className="absolute left-0 w-full" style={{ top: ph.offset(i) }}>
+              <div
+                key={i}
+                className="snap-start absolute left-0 w-full"
+                style={{ top: ph.offset(i), ...(fitH ? { height: vh } : null) }}
+              >
                 <PageImg
                   url={formatPageUrl(fmt, i)}
                   width={width}
+                  fitH={fitH}
                   onLoaded={(h) => {
+                    if (fitH) return; // 适高模式定高一页一屏,无需量高
                     const el = boxRef.current;
+                    const topY = el ? el.scrollTop : 0;
+                    const oldEst = ph.estHeight;
                     const topOfI = ph.offset(i);
                     const d = ph.set(i, h);
-                    if (el && d !== 0 && topOfI < el.scrollTop) el.scrollTop += d; // 视口上方页高变化 → 补偿滚动
+                    if (el && d !== 0 && topOfI < topY) applyShift(d); // 视口上方页高变化 → 补偿滚动
+                    // 让未量高页的估高收敛到实测页高:同开本漫画量一页后 d≈0,拖拽滚动条不再逐帧打架
+                    if (width > 0 && Math.abs(h - oldEst) / oldEst > 0.03) {
+                      const n = ph.setEst(h, topY);
+                      if (el && n) applyShift(n * (h - oldEst));
+                      ratio.current = h / width;
+                    }
                     bump((x) => x + 1);
                   }}
                 />
@@ -138,9 +253,47 @@ export default function CbzReader({ book, initialLocator }: ReaderProps) {
           })}
         </div>
       </div>
-      <div className="pointer-events-none absolute bottom-3 right-3 rounded bg-zinc-900/80 px-2 py-1 text-xs text-zinc-300">
+      {chrome.on ? (
-        {cur + 1}/{count}
+        <div className="rd-sheet absolute inset-x-0 bottom-0 z-20 border-t border-stone-700/60 bg-stone-900/85 px-4 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 text-stone-200 backdrop-blur">
-      </div>
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={0}
+              max={Math.max(0, count - 1)}
+              value={scrub ?? cur}
+              onChange={(e) => {
+                const v = Number(e.target.value);
+                setScrub(v);
+                jump(v, false); // 拖拽中瞬移:平滑动画会被下一格打断,手感像卡顿
+              }}
+              onPointerUp={() => setScrub(null)}
+              onPointerCancel={() => setScrub(null)}
+              onBlur={() => setScrub(null)}
+              className="rd-range"
+              aria-label="页码跳转"
+            />
+            <span className="w-20 shrink-0 text-right text-xs tabular-nums opacity-70">
+              {(scrub ?? cur) + 1}/{count} · {Math.round((((scrub ?? cur) + 1) / Math.max(1, count)) * 100)}%
+            </span>
+          </div>
+          <div className="mt-1 flex items-center gap-2 pb-1 text-sm">
+            <button
+              className="rd-btn"
+              onClick={() => setMode(MODES[(MODES.indexOf(mode) + 1) % MODES.length])}
+              aria-label="切换阅读模式"
+            >
+              {MODE_LABEL[mode]}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="pointer-events-none absolute bottom-3 right-3 flex items-center gap-2 rounded-full bg-stone-900/85 px-3 py-1.5 text-xs tabular-nums text-stone-200 shadow-lg ring-1 ring-stone-700/60 backdrop-blur">
+          <span>
+            {cur + 1}/{count}
+          </span>
+          <span className="opacity-60">{Math.round(((cur + 1) / Math.max(1, count)) * 100)}%</span>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/readers/EpubReader.tsx

@@ -91,11 +91,11 @@ export default function EpubReader({ book, initialLocator }: ReaderProps) {
 
   return (
     <div className="grid h-full grid-rows-[1fr_auto]">
-      <div className="relative min-h-0 bg-white">
+      <div className="relative mx-auto min-h-0 w-full max-w-4xl bg-white shadow-2xl ring-1 ring-stone-800">
         <div ref={hostRef} className="absolute inset-0" />
-        {!ready && !err && <div className="grid h-full place-items-center bg-zinc-950 text-zinc-500">EPUB 加载中…</div>}
+        {!ready && !err && <div className="grid h-full place-items-center bg-stone-950 text-stone-500">EPUB 加载中…</div>}
       </div>
-      <div className="flex items-center justify-center gap-3 border-t border-zinc-800 px-4 py-2 text-sm">
+      <div className="flex items-center justify-center gap-3 border-t border-stone-800 px-4 py-2 text-sm">
         <button className={btn} onClick={() => rendRef.current?.prev()}>
           上一页
         </button>

frontend/src/readers/PdfReader.tsx

@@ -123,28 +123,33 @@ export default function PdfReader({ book, initialLocator }: ReaderProps) {
         </div>
       </div>
     );
-  if (num === 0) return <div className="grid h-full place-items-center text-zinc-500">PDF 加载中…</div>;
+  if (num === 0) return <div className="grid h-full place-items-center text-stone-500">PDF 加载中…</div>;
 
   return (
-    <div tabIndex={0} onKeyDown={onKey} className="grid h-full grid-rows-[1fr_auto] focus:outline-none">
+    <div
-      <div ref={wrapRef} className="flex min-h-0 items-start justify-center overflow-y-auto bg-zinc-900 p-4">
+      tabIndex={0}
-        <canvas ref={canvasRef} className="rounded shadow-lg" />
+      onKeyDown={onKey}
+      aria-label="PDF 阅读器,可用左右方向键翻页"
+      className="grid h-full grid-rows-[1fr_auto] focus:outline-none"
+    >
+      <div ref={wrapRef} className="flex min-h-0 items-start justify-center overflow-y-auto bg-stone-900/70 p-4">
+        <canvas ref={canvasRef} className="max-w-3xl rounded-md shadow-2xl ring-1 ring-stone-700/50" />
       </div>
-      <div className="flex items-center justify-center gap-3 border-t border-zinc-800 px-4 py-2 text-sm">
+      <div className="flex items-center justify-center gap-2 border-t border-stone-800/80 px-4 py-2 text-sm">
-        <button className={btn} disabled={page === 0} onClick={() => setPage(0)}>
+        <button className={btn} disabled={page === 0} onClick={() => setPage(0)} aria-label="第一页">
-          ⏮
+          首页
         </button>
         <button className={btn} disabled={page === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>
-          上一页
+          ← 上一页
         </button>
-        <span className="text-zinc-400">
+        <span className="min-w-16 text-center tabular-nums text-stone-400">
           {page + 1}/{num}
         </span>
         <button className={btn} disabled={page >= num - 1} onClick={() => setPage((p) => Math.min(num - 1, p + 1))}>
-          下一页
+          下一页 →
         </button>
-        <button className={btn} disabled={page >= num - 1} onClick={() => setPage(num - 1)}>
+        <button className={btn} disabled={page >= num - 1} onClick={() => setPage(num - 1)} aria-label="最后一页">
-          ⏭
+          末页
         </button>
       </div>
     </div>

frontend/src/readers/TextReader.tsx

@@ -1,12 +1,23 @@
 import DOMPurify from "dompurify";
 import { marked } from "marked";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type MouseEvent, type ReactNode } from "react";
 import { apiRaw } from "../api/client";
-import { btn, input } from "../components/ui";
+import { btn } from "../components/ui";
-import { chapterText, splitChapters } from "../lib/chapters";
+import { chapterText, seekChapter, splitChapters } from "../lib/chapters";
 import { decodeText } from "../lib/encoding";
+import {
+  FONT_SIZES,
+  RD_THEMES,
+  RD_THEME_LABEL,
+  useReaderPrefs,
+  type RdTheme,
+} from "../lib/readerPrefs";
 import { useProgressSaver, type ReaderProps } from "../lib/useProgress";
 
+type Prefs = ReturnType<typeof useReaderPrefs>;
+
+const SWATCH: Record<RdTheme, string> = { paper: "#faf8f4", sepia: "#f0e6d2", night: "#171512" };
+
 function useFileText(url: string) {
   const [text, setText] = useState<string | null>(null);
   const [err, setErr] = useState("");
@@ -31,7 +42,7 @@ function LoadState({ text, onRetry }: { text: string; onRetry?: () => void }) {
     <div className="grid h-full place-items-center p-8 text-center">
       <div>
         {onRetry && <p className="mb-3 text-red-400">{text}</p>}
-        {!onRetry && <p className="text-zinc-500">{text}</p>}
+        {!onRetry && <p className="text-stone-500">{text}</p>}
         {onRetry && (
           <button className={btn} onClick={onRetry}>
             重试
@@ -42,14 +53,89 @@ function LoadState({ text, onRetry }: { text: string; onRetry?: () => void }) {
   );
 }
 
+/** 沉浸态底栏:进度滑条 + 主题色卡 + 字号,主题内配色。children 放左半区按钮(目录/翻页)。 */
+function ReaderSheet({
+  pr,
+  frac,
+  onSeek,
+  children,
+}: {
+  pr: Prefs;
+  frac: number;
+  onSeek: (f: number) => void;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="rd-sheet rd-divider relative z-20 shrink-0 border-t px-4 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2">
+      <div className="flex items-center gap-3">
+        <input
+          type="range"
+          min={0}
+          max={1000}
+          value={Math.round(frac * 1000)}
+          onChange={(e) => onSeek(Number(e.target.value) / 1000)}
+          className="rd-range"
+          aria-label="阅读进度"
+        />
+        <span className="w-10 shrink-0 text-right text-xs tabular-nums opacity-70">
+          {Math.round(frac * 100)}%
+        </span>
+      </div>
+      <div className="mt-1 flex items-center gap-2">
+        {children}
+        <div className="ml-auto flex items-center gap-1.5">
+          <div className="flex items-center gap-1.5" role="group" aria-label="阅读主题">
+            {RD_THEMES.map((t) => (
+              <button
+                key={t}
+                aria-label={`${RD_THEME_LABEL[t]}色主题`}
+                aria-pressed={pr.prefs.theme === t}
+                onClick={() => pr.setTheme(t)}
+                className="h-5 w-5 rounded-full transition-transform hover:scale-110"
+                style={{
+                  background: SWATCH[t],
+                  boxShadow:
+                    pr.prefs.theme === t
+                      ? "0 0 0 2px var(--rd-link)"
+                      : "inset 0 0 0 1px color-mix(in oklab, currentColor 35%, transparent)",
+                }}
+              />
+            ))}
+          </div>
+          <button className="rd-btn" onClick={() => pr.bump(-1)} disabled={pr.prefs.sizeIdx === 0} aria-label="减小字号">
+            A−
+          </button>
+          <button
+            className="rd-btn"
+            onClick={() => pr.bump(1)}
+            disabled={pr.prefs.sizeIdx === FONT_SIZES.length - 1}
+            aria-label="加大字号"
+          >
+            A+
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 点正文唤出/收起工具栏;拖选文本与控件点击不触发。 */
+function bodyTogglesChrome(e: MouseEvent<HTMLElement>, toggle: () => void) {
+  if ((e.target as HTMLElement).closest("a,button,input,nav")) return;
+  if (window.getSelection()?.toString()) return;
+  toggle();
+}
+
 export default function TextReader(props: ReaderProps) {
   return props.book.format === "md" ? <MdView {...props} /> : <TxtView {...props} />;
 }
 
-function MdView({ book, initialLocator }: ReaderProps) {
+function MdView({ book, initialLocator, chrome }: ReaderProps) {
   const boxRef = useRef<HTMLDivElement>(null);
   const saver = useProgressSaver(book.id);
   const restored = useRef(false);
+  const pr = useReaderPrefs();
+  const [frac, setFrac] = useState(0);
   const { text, err, retry } = useFileText(book.file_url ?? "");
 
   const html = useMemo(() => (text == null ? null : DOMPurify.sanitize(marked.parse(text, { async: false }))), [text]);
@@ -68,27 +154,50 @@ function MdView({ book, initialLocator }: ReaderProps) {
     const el = boxRef.current;
     if (!el) return;
     const max = el.scrollHeight - el.clientHeight;
-    const frac = max > 0 ? Math.min(1, Math.max(0, el.scrollTop / max)) : 0;
+    const f = max > 0 ? Math.min(1, Math.max(0, el.scrollTop / max)) : 0;
-    saver.report({ scrollFraction: frac }, frac);
+    setFrac(f);
+    saver.report({ scrollFraction: f }, f);
+  }
+
+  function seek(f: number) {
+    const el = boxRef.current;
+    if (!el) return;
+    el.scrollTop = f * (el.scrollHeight - el.clientHeight);
   }
 
   if (err) return <LoadState text={err} onRetry={retry} />;
   if (text == null) return <LoadState text="正文加载中…" />;
   return (
-    <div ref={boxRef} onScroll={onScroll} className="h-full overflow-y-auto p-6">
+    <div className="rd-surface flex h-full flex-col" data-rd={pr.prefs.theme}>
-      <article className="md-body mx-auto max-w-2xl text-[15px] leading-7" dangerouslySetInnerHTML={{ __html: html ?? "" }} />
+      <div
+        ref={boxRef}
+        onScroll={onScroll}
+        onClick={(e) => bodyTogglesChrome(e, chrome.toggle)}
+        className="min-h-0 flex-1 overflow-y-auto px-6 py-6"
+      >
+        <article
+          className="md-body mx-auto max-w-[46rem] leading-[1.85]"
+          style={{ fontSize: pr.fontSize }}
+          dangerouslySetInnerHTML={{ __html: html ?? "" }}
+        />
+      </div>
+      {chrome.on && <ReaderSheet pr={pr} frac={frac} onSeek={seek} />}
     </div>
   );
 }
 
 // 整本塞一个 <pre> 会冻死浏览器:按章渲染,一章一个滚动块。
-function TxtView({ book, initialLocator }: ReaderProps) {
+function TxtView({ book, initialLocator, chrome }: ReaderProps) {
   const boxRef = useRef<HTMLDivElement>(null);
   const saver = useProgressSaver(book.id);
   const inited = useRef(false);
   const restoreFrac = useRef<number | null>(null);
   const targetCi = useRef(0);
+  const activeRow = useRef<HTMLButtonElement>(null);
   const [ci, setCi] = useState(0);
+  const [frac, setFrac] = useState(0);
+  const [toc, setToc] = useState(false);
+  const pr = useReaderPrefs();
   const { text, err, retry } = useFileText(book.file_url ?? "");
 
   const chapters = useMemo(() => (text == null ? null : splitChapters(text)), [text]);
@@ -99,18 +208,15 @@ function TxtView({ book, initialLocator }: ReaderProps) {
     const f = Number(initialLocator?.scrollFraction);
     const hasF = Number.isFinite(f) && f > 0 && f <= 1;
     const rawCh = Number(initialLocator?.ch);
-    let idx = 0;
     if (Number.isFinite(rawCh) && rawCh >= 0 && rawCh < chapters.length) {
-      idx = Math.floor(rawCh);
+      targetCi.current = Math.floor(rawCh);
+      setCi(Math.floor(rawCh));
       if (hasF) restoreFrac.current = f;
     } else if (hasF) {
-      const p = f * chapters.length; // 旧版全局分数 → 章节近似定位
+      const { idx, intra } = seekChapter(chapters.length, f); // 旧版全局分数 → 章节近似定位
-      idx = Math.min(chapters.length - 1, Math.floor(p));
-      restoreFrac.current = p - idx;
-    }
-    if (idx > 0 || restoreFrac.current != null) {
       targetCi.current = idx;
       setCi(idx);
+      if (intra > 0) restoreFrac.current = intra;
     }
   }, [chapters, initialLocator]);
 
@@ -123,73 +229,106 @@ function TxtView({ book, initialLocator }: ReaderProps) {
     } else el.scrollTop = 0;
   }, [ci, chapters]);
 
-  function goChapter(i: number) {
+  useEffect(() => {
+    if (toc) activeRow.current?.scrollIntoView({ block: "center" });
+  }, [toc]);
+
+  function goChapter(i: number, intra = 0) {
     if (!chapters) return;
-    restoreFrac.current = null;
+    restoreFrac.current = intra > 0 ? intra : null;
+    targetCi.current = i;
     setCi(i);
-    saver.report({ ch: i, scrollFraction: 0 }, i / chapters.length);
+    setFrac(intra);
+    saver.report({ ch: i, scrollFraction: intra }, (i + intra) / chapters.length);
   }
 
   function onScroll() {
     const el = boxRef.current;
     if (!el || !chapters) return;
     const max = el.scrollHeight - el.clientHeight;
-    const frac = max > 0 ? Math.min(1, Math.max(0, el.scrollTop / max)) : 0;
+    const f = max > 0 ? Math.min(1, Math.max(0, el.scrollTop / max)) : 0;
-    saver.report({ ch: ci, scrollFraction: frac }, (ci + frac) / chapters.length);
+    setFrac(f);
+    saver.report({ ch: ci, scrollFraction: f }, (ci + f) / chapters.length);
+  }
+
+  function seek(f: number) {
+    if (!chapters) return;
+    const { idx, intra } = seekChapter(chapters.length, f);
+    goChapter(idx, intra);
   }
 
   if (err) return <LoadState text={err} onRetry={retry} />;
   if (text == null || !chapters) return <LoadState text="正文加载中…" />;
 
+  const total = chapters.length > 1 ? Math.min(1, (ci + frac) / chapters.length) : frac;
+
   return (
-    <div className="flex h-full flex-col">
+    <div className="rd-surface relative flex h-full flex-col" data-rd={pr.prefs.theme}>
-      {chapters.length > 1 && (
+      <div
-        <div className="flex shrink-0 items-center gap-2 border-b border-zinc-800 px-4 py-2 text-sm">
+        ref={boxRef}
-          <select className={input + " max-w-64"} value={ci} onChange={(e) => goChapter(Number(e.target.value))}>
+        onScroll={onScroll}
-            {(() => {
+        onClick={(e) => bodyTogglesChrome(e, chrome.toggle)}
-              const groups: { vol: string | undefined; items: number[] }[] = [];
+        className="min-h-0 flex-1 overflow-y-auto px-5 py-6 sm:px-6"
-              chapters.forEach((c, i) => {
+      >
-                const last = groups[groups.length - 1];
+        <pre
-                if (!last || last.vol !== c.vol) groups.push({ vol: c.vol, items: [i] });
+          className="mx-auto max-w-[34em] break-words whitespace-pre-wrap"
-                else last.items.push(i);
+          style={{ fontSize: pr.fontSize, lineHeight: 1.9, textAlign: "justify" }}
-              });
+        >
-              const opt = (i: number) => (
-                <option key={i} value={i}>
-                  {i + 1}. {chapters[i].title}
-                </option>
-              );
-              return groups.length === 1 && !groups[0].vol
-                ? chapters.map((_, i) => opt(i))
-                : groups.map((g, gi) =>
-                    g.vol ? (
-                      <optgroup key={gi} label={g.vol}>
-                        {g.items.map(opt)}
-                      </optgroup>
-                    ) : (
-                      g.items.map(opt)
-                    ),
-                  );
-            })()}
-          </select>
-          <span className="ml-auto text-zinc-500">
-            {ci + 1}/{chapters.length}
-          </span>
-        </div>
-      )}
-      <div ref={boxRef} onScroll={onScroll} className="min-h-0 flex-1 overflow-y-auto p-6">
-        <pre className="mx-auto max-w-2xl font-sans text-[15px] leading-7 break-words whitespace-pre-wrap">
           {chapterText(text, chapters, ci)}
         </pre>
       </div>
-      {chapters.length > 1 && (
+      {chrome.on && (
-        <div className="flex shrink-0 items-center justify-center gap-3 border-t border-zinc-800 px-4 py-2 text-sm">
+        <ReaderSheet pr={pr} frac={total} onSeek={seek}>
-          <button className={btn} disabled={ci === 0} onClick={() => goChapter(ci - 1)}>
+          {chapters.length > 1 && (
-            上一章
+            <>
-          </button>
+              <button
-          <button className={btn} disabled={ci === chapters.length - 1} onClick={() => goChapter(ci + 1)}>
+                className="rd-btn"
-            下一章
+                aria-expanded={toc}
-          </button>
+                aria-controls="toc-panel"
-        </div>
+                onClick={() => setToc((v) => !v)}
+              >
+                目录
+              </button>
+              <span className="text-xs opacity-60 tabular-nums">
+                {ci + 1}/{chapters.length}
+              </span>
+              <button className="rd-btn" disabled={ci === 0} onClick={() => goChapter(ci - 1)}>
+                ← 上一章
+              </button>
+              <button className="rd-btn" disabled={ci === chapters.length - 1} onClick={() => goChapter(ci + 1)}>
+                下一章 →
+              </button>
+            </>
+          )}
+        </ReaderSheet>
+      )}
+      {/* ponytail: 目录一次渲染全部章节,数千章级书若卡顿再上虚拟列表 */}
+      {toc && chapters.length > 1 && (
+        <>
+          <div className="fixed inset-0 z-10" aria-hidden="true" onClick={() => setToc(false)} />
+          <nav
+            id="toc-panel"
+            aria-label="章节目录"
+            className="rd-divider absolute inset-y-0 left-0 z-20 w-64 overflow-y-auto border-r bg-[var(--rd-bg)] p-2 shadow-2xl"
+          >
+            <ul className="space-y-0.5">
+              {chapters.map((c, i) => (
+                <li key={i}>
+                  <button
+                    ref={i === ci ? activeRow : undefined}
+                    className={"rd-row" + (i === ci ? " rd-btn-on" : "")}
+                    onClick={() => {
+                      goChapter(i);
+                      setToc(false);
+                    }}
+                  >
+                    {i + 1}. {c.title}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </>
       )}
     </div>
   );

frontend/test/chapters.test.ts

@@ -1,5 +1,5 @@
 import { expect, it } from "vitest";
-import { chapterText, splitChapters } from "../src/lib/chapters";
+import { chapterText, seekChapter, splitChapters } from "../src/lib/chapters";
 
 const pad = (n: number) => "字".repeat(n);
 
@@ -39,20 +39,28 @@ it("短文无标记 → 单节,chapterText 即全文", () => {
   expect(chapterText(t, chs, 0)).toBe(t);
 });
 
-it("卷不是章节边界:只按章切,卷题作分组标签并并入所属章开头", () => {
+it("卷不感知:只按章切,卷题行留在正文里", () => {
   const t =
     "第一卷 天云世界\n第一章 铜镜\n" + pad(500) + "\n第二章 修炼\n" + pad(500) +
     "\n\n\n第二卷 仙界\n第三章 飞升\n" + pad(300);
   const chs = splitChapters(t);
   expect(chs.map((c) => c.title)).toEqual(["第一章 铜镜", "第二章 修炼", "第三章 飞升"]);
-  expect(chs.map((c) => c.vol)).toEqual(["第一卷 天云世界", "第一卷 天云世界", "第二卷 仙界"]);
+  expect(chs[0].start).toBe(t.indexOf("第一章"));
-  expect(chs[2].start).toBe(t.indexOf("第二卷 仙界")); // 卷题行从本章开头渲染,而非上一章结尾
+  expect(chs[2].start).toBe(t.indexOf("第三章"));
-  expect(chapterText(t, chs, 2)).toMatch(/^第二卷 仙界/);
+  expect(chapterText(t, chs, 1)).toContain("第二卷 仙界"); // 卷题在第二章结尾,不进第三章开头
 });
 
-it("只有卷没有章的书:卷即章节", () => {
+it("seekChapter:全局进度分数 → (章序号, 章内分数),端点与越界安全", () => {
+  expect(seekChapter(69, 0)).toEqual({ idx: 0, intra: 0 });
+  expect(seekChapter(69, 0.5)).toEqual({ idx: 34, intra: 0.5 }); // 69*0.5=34.5
+  expect(seekChapter(69, 1).idx).toBe(68); // 顶到 0.9999 防越界
+  expect(seekChapter(69, 1).intra).toBeGreaterThan(0.99);
+  expect(seekChapter(69, -0.2)).toEqual({ idx: 0, intra: 0 });
+  expect(seekChapter(1, 0.3)).toEqual({ idx: 0, intra: 0.3 });
+});
+
+it("只有卷没有章的书:按伪章节切", () => {
   const t = "第一卷 起\n" + pad(600) + "\n第二卷 承\n" + pad(600) + "\n第三卷 转\n" + pad(600);
   const chs = splitChapters(t);
-  expect(chs.map((c) => c.title)).toEqual(["第一卷 起", "第二卷 承", "第三卷 转"]);
+  expect(chs).toEqual([{ title: "第 1 节", start: 0 }]);
-  expect(chs.every((c) => c.vol === undefined)).toBe(true);
 });

frontend/test/virt.test.ts

@@ -23,6 +23,14 @@ it("set 修正高度并平移后续 offset;返回增量;幂等", () => {
   expect(ph.set(2, 150)).toBe(0);
 });
 
+it("setEst:重估默认页高,返回视口上方「未量高」页数,已量高页保留", () => {
+  const ph = new PageHeights(5, 100); // cum 顶部: 0,100,200,300,400
+  ph.set(0, 160); // 页0 实测 160 → cum 顶部: 0,160,260,360,460
+  expect(ph.setEst(140, 260)).toBe(1); // 顶部<260 且未量高:页1(160)。页0 已量高排除,页2(260)不<260
+  expect(ph.total()).toBe(160 + 4 * 140); // 页0 实测保留,其余按新估高
+  expect(ph.setEst(140, 9999)).toBe(0); // 同值幂等:est 不变直接 0
+});
+
 it("n=0 时一切归空", () => {
   const ph = new PageHeights(0, 100);
   expect(ph.total()).toBe(0);

frontend/vite.config.ts

@@ -14,8 +14,8 @@ export default defineConfig({
         name: "BookLib 个人书库",
         short_name: "BookLib",
         description: "个人书库/漫画库在线阅读",
-        theme_color: "#09090b",
+        theme_color: "#0c0a09",
-        background_color: "#09090b",
+        background_color: "#0c0a09",
         display: "standalone",
         icons: [{ src: "icon.svg", sizes: "any", type: "image/svg+xml", purpose: "any" }],
       },