From 4767ee7fecdf1869d25215ecba41329100224c3c Mon Sep 17 00:00:00 2001
From: XingfenD <xingfen.fendy@outlook.com>
Date: Wed, 16 Sep 2026 17:43:51 +0800
Subject: [PATCH] refactor(frontend): PDF reader chrome to shadcn (B4)

---
 frontend/src/readers/PdfReader.tsx | 119 ++++++++++++++++-------------
 1 file changed, 67 insertions(+), 52 deletions(-)

diff --git a/frontend/src/readers/PdfReader.tsx b/frontend/src/readers/PdfReader.tsx
index e1f23a7..2a0f2c5 100644
--- a/frontend/src/readers/PdfReader.tsx
+++ b/frontend/src/readers/PdfReader.tsx
@@ -4,7 +4,8 @@ import * as pdfjs from "pdfjs-dist";
 import { apiRaw } from "../api/client";
 import { BookmarksTab } from "../components/Bookmarks";
 import { ReaderNav } from "../components/reader-nav";
-import { btn } from "../components/ui";
+import { ReaderSettings } from "../components/reader-settings";
+import { Button } from "@/components/ui/button";
 import { useProgressSaver, type ReaderProps } from "../lib/useProgress";
 
 // Vite 原生 worker 语法;pdfjs v5 要求 module worker
@@ -124,70 +125,84 @@ export default function PdfReader({ book, initialLocator, initialPercent }: Read
 
   if (err)
     return (
-      <div className="grid h-full place-items-center p-8 text-center">
+      <div className="bg-muted grid h-full place-items-center p-8 text-center">
         <div>
-          <p className="mb-3 text-red-400">{err}</p>
-          <button className={btn} onClick={() => setNonce((x) => x + 1)}>
+          <p className="text-destructive mb-3">{err}</p>
+          <Button variant="secondary" onClick={() => setNonce((x) => x + 1)}>
             重试
-          </button>
+          </Button>
         </div>
       </div>
     );
-  if (num === 0) return <div className="grid h-full place-items-center text-stone-500">PDF 加载中…</div>;
+  if (num === 0) return <div className="text-muted-foreground grid h-full place-items-center">PDF 加载中…</div>;
 
   return (
     <div
       tabIndex={0}
       onKeyDown={onKey}
       aria-label="PDF 阅读器,可用左右方向键翻页"
-      className="relative grid h-full grid-rows-[1fr_auto] focus:outline-none"
+      className="relative grid h-full grid-rows-[1fr_auto] bg-background text-foreground focus:outline-none focus-visible:outline-hidden"
     >
-      <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-2 border-t border-stone-800/80 px-4 py-2 text-sm">
-        <button
-          className={btn + " inline-flex items-center gap-0.5"}
-          disabled={page === 0}
-          onClick={() => setPage(0)}
-          aria-label="第一页"
-        >
-          <ChevronsLeft size={14} /> 首页
-        </button>
-        <button
-          className={btn + " inline-flex items-center gap-0.5"}
-          disabled={page === 0}
-          onClick={() => setPage((p) => Math.max(0, p - 1))}
-        >
-          <ChevronLeft size={14} /> 上一页
-        </button>
-        <span className="min-w-16 text-center tabular-nums text-stone-400">
-          {page + 1}/{num}
-        </span>
-        <button
-          className={btn + " inline-flex items-center gap-0.5"}
-          disabled={page >= num - 1}
-          onClick={() => setPage((p) => Math.min(num - 1, p + 1))}
-        >
-          下一页 <ChevronRight size={14} />
-        </button>
-        <button
-          className={btn + " inline-flex items-center gap-0.5"}
-          disabled={page >= num - 1}
-          onClick={() => setPage(num - 1)}
-          aria-label="最后一页"
-        >
-          <ChevronsRight size={14} /> 末页
-        </button>
-        <button
-          className="rd-btn inline-flex items-center gap-1.5"
-          aria-expanded={nav}
-          aria-controls="reader-nav"
-          onClick={() => setNav((v) => !v)}
-        >
-          <PanelLeft size={14} /> 导航
-        </button>
+      <div ref={wrapRef} className="bg-muted/50 flex min-h-0 items-start justify-center overflow-y-auto p-4">
+        <canvas ref={canvasRef} className="ring-border max-w-3xl rounded-md shadow-2xl ring-1" />
       </div>
+      <ReaderSettings
+        left={
+          <>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-0.5"
+              disabled={page === 0}
+              onClick={() => setPage(0)}
+              aria-label="第一页"
+            >
+              <ChevronsLeft size={14} /> 首页
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-0.5"
+              disabled={page === 0}
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+            >
+              <ChevronLeft size={14} /> 上一页
+            </Button>
+            <span className="min-w-16 text-center text-muted-foreground tabular-nums">
+              {page + 1}/{num}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-0.5"
+              disabled={page >= num - 1}
+              onClick={() => setPage((p) => Math.min(num - 1, p + 1))}
+            >
+              下一页 <ChevronRight size={14} />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-0.5"
+              disabled={page >= num - 1}
+              onClick={() => setPage(num - 1)}
+              aria-label="最后一页"
+            >
+              <ChevronsRight size={14} /> 末页
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-1.5"
+              aria-expanded={nav}
+              aria-controls="reader-nav"
+              onClick={() => setNav((v) => !v)}
+            >
+              <PanelLeft size={14} /> 导航
+            </Button>
+          </>
+        }
+      />
       {nav && (
         <ReaderNav
           tab="bm"