XingfenD/book-comic-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): warm library palette (zinc+emerald -> stone+amber) with hover/focus feedback; text reader gains paper/sepia/night themes + persisted font-size (lib/readerPrefs.ts), serif justified measure; PDF drops emoji icons for 首页/末页, CBZ pill page counter, EPUB centered spread, blur reader header with format badge, aria labels on login/search/chapter select

Browse Source
This commit is contained in:
XingfenD
2026-09-07 22:37:47 +08:00
parent 2478da059b
commit 7fb01ce335
20 changed files with 281 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/readers/PdfReader.tsx
+17 -12
View File
@@ -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 ref={wrapRef} className="flex min-h-0 items-start justify-center overflow-y-auto bg-zinc-900 p-4">
<canvas ref={canvasRef} className="rounded shadow-lg" />
<div
tabIndex={0}
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">
<button className={btn} disabled={page === 0} onClick={() => setPage(0)}>
⏮
<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)} 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>