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

This commit is contained in:
2026-09-07 22:37:47 +08:00
parent 2478da059b
commit 7fb01ce335
20 changed files with 281 additions and 126 deletions
+11 -1
View File
@@ -8,7 +8,17 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
## [Unreleased] ## [Unreleased]
### Fixed / 修复 ### Added / 新增
- Text (.txt/.md) reader upgrades: paper / sepia / night reading themes and adjustable font size, with a compact prefs bar; choices persist across books (localStorage); body text is now serif with a readable measure and justified lines.
- 文本阅读器(.txt/.md)升级:新增 纸/米/夜 三种阅读主题与字号调节,工具条常驻;偏好跨书持久化(localStorage);正文改为衬线字体、收窄行宽并两端对齐,更利于长时间阅读。
- PDF reader: emoji skip icons replaced with 首页/末页 text buttons, framed page canvas, and an accessible label announcing arrow-key paging.
- PDF 阅读器:以文字按钮(首页/末页)替换 emoji 图标,页面画布加边框投影,并补充可访问的「方向键翻页」说明。
### Changed / 变更
- 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 页面居中成书卷感,主按钮/链接统一琥珀色并补齐悬停/焦点反馈。
- .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. - .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 识别。 - GBK/GB2312/GB18030 或 UTF-16 编码的 .txt/.md(网文导出常见)不再乱码:阅读器先按 UTF-8 严格解码,失败自动回退 GB18030,UTF-16 靠 BOM 识别。
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" /> <link rel="icon" href="/icon.svg" type="image/svg+xml" />
<title>BookLib — 个人书库</title> <title>BookLib — 个人书库</title>
</head> </head>
+1 -1
View File
@@ -77,7 +77,7 @@ export function RequireAuth({ children }: { children: ReactNode }) {
const { user, ready } = useAuth(); const { user, ready } = useAuth();
const loc = useLocation(); const loc = useLocation();
if (!getToken()) return <Navigate to="/login" replace state={{ from: loc.pathname }} />; 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}</>; return <>{children}</>;
} }
+3 -3
View File
@@ -29,12 +29,12 @@ export function Cover({ book, className }: { book: Book; className?: string }) {
const { src, failed, retry } = useAuthedImage(book.cover_url); const { src, failed, retry } = useAuthedImage(book.cover_url);
if (failed) if (failed)
return ( 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 className={btn} onClick={retry} aria-label="封面加载失败,重试">
重试 重试
</button> </button>
</div> </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 ?? ""}`} />;
} }
+2 -2
View File
@@ -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 className="grid h-full place-items-center p-8 text-center">
<div> <div>
<p className="mb-2 text-lg text-red-400">页面出错了</p> <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> </button>
</div> </div>
+1 -1
View File
@@ -31,7 +31,7 @@ export function Toaster() {
<div <div
key={t.id} key={t.id}
role="status" 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" t.kind === "ok" ? "bg-emerald-900 text-emerald-100" : "bg-red-900 text-red-100"
}`} }`}
> >
+12 -6
View File
@@ -6,23 +6,29 @@ import { btn } from "./ui";
export function TopBar({ right }: { right?: ReactNode }) { export function TopBar({ right }: { right?: ReactNode }) {
const { user, isAdmin, logout } = useAuth(); const { user, isAdmin, logout } = useAuth();
return ( 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> </Link>
{isAdmin && ( {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> </Link>
)} )}
{isAdmin && ( {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> </Link>
)} )}
<div className="ml-auto flex items-center gap-3"> <div className="ml-auto flex items-center gap-3">
{right} {right}
<span className="text-sm text-zinc-400"> <span className="text-sm text-stone-400">
{user?.username} {user?.username}
{isAdmin ? "(admin)" : ""} {isAdmin ? "(admin)" : ""}
</span> </span>
+4 -4
View File
@@ -1,7 +1,7 @@
export const btn = 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 = 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 = 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";
+37 -8
View File
@@ -6,15 +6,44 @@ body,
height: 100%; height: 100%;
} }
body { body {
@apply bg-zinc-950 text-zinc-100 antialiased; @apply bg-stone-950 text-stone-100 antialiased;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
::-webkit-scrollbar-thumb { ::-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-select {
@apply rounded-md px-2 py-1 text-sm outline-none;
background: color-mix(in oklab, currentColor 8%, transparent);
color: inherit;
}
.rd-divider { border-color: color-mix(in oklab, currentColor 14%, transparent); }
/* markdown 正文(仅 .md-body 作用域) */ /* markdown 正文(仅 .md-body 作用域) */
.md-body h1 { @apply mt-8 mb-3 text-2xl font-semibold; } .md-body h1 { @apply mt-8 mb-3 text-2xl font-semibold; }
@@ -23,12 +52,12 @@ body {
.md-body p { @apply my-3; } .md-body p { @apply my-3; }
.md-body ul { @apply my-3 list-disc space-y-1 pl-6; } .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 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 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 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 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); }
+36
View File
@@ -0,0 +1,36 @@
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],
cycleTheme: () =>
setPrefs((p) => ({ ...p, theme: RD_THEMES[(RD_THEMES.indexOf(p.theme) + 1) % RD_THEMES.length] })),
bump: (d: number) =>
setPrefs((p) => ({ ...p, sizeIdx: Math.min(FONT_SIZES.length - 1, Math.max(0, p.sizeIdx + d)) })),
};
}
+2 -2
View File
@@ -30,9 +30,9 @@ export default function Login() {
<form onSubmit={submit} className={`${card} w-full max-w-sm space-y-4 p-6`}> <form onSubmit={submit} className={`${card} w-full max-w-sm space-y-4 p-6`}>
<h1 className="text-lg font-semibold">BookLib 登录</h1> <h1 className="text-lg font-semibold">BookLib 登录</h1>
<input className={input + " w-full"} value={u} onChange={(e) => setU(e.target.value)} <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)} <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}> <button className={btnPrimary + " w-full"} disabled={busy || !u || !p}>
{busy ? "登录中…" : "登录"} {busy ? "登录中…" : "登录"}
</button> </button>
+13 -8
View File
@@ -57,16 +57,21 @@ export default function Reader() {
return ( return (
<div className="flex h-full flex-col"> <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 className="flex shrink-0 items-center gap-3 border-b border-stone-800/80 bg-stone-950/80 px-4 py-2 text-sm backdrop-blur">
<Link to="/" className="text-zinc-400 hover:text-zinc-100"> <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> </Link>
<span className="truncate font-medium">{book?.title ?? "…"}</span> <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 && ( {isAdmin && book && (
<button <button
className={btn + " ml-auto text-red-300"} className={btn + " ml-auto text-red-300"}
@@ -87,7 +92,7 @@ export default function Reader() {
function Msg({ text, retry }: { text: string; retry?: () => void }) { function Msg({ text, retry }: { text: string; retry?: () => void }) {
return ( 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> <div>
<p className="mb-3">{text}</p> <p className="mb-3">{text}</p>
{retry && ( {retry && (
+17 -12
View File
@@ -23,9 +23,14 @@ function BookCard({
return ( return (
<div className="group relative w-32 shrink-0"> <div className="group relative w-32 shrink-0">
<button onClick={onOpen} className="block w-full text-left"> <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} {book.format} · {book.path}
</p> </p>
</button> </button>
@@ -38,13 +43,13 @@ function BookCard({
</span> </span>
)} )}
{book.percent > 0 && ( {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> </div>
)} )}
{isAdmin && ( {isAdmin && (
<button <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="删除(连磁盘文件)" title="删除(连磁盘文件)"
onClick={() => { onClick={() => {
if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete(); if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
@@ -121,7 +126,7 @@ export default function Shelf() {
)} )}
<input <input
className={input + " w-44"} className={input + " w-44"}
placeholder="搜索标题…" aria-label="搜索标题" placeholder="搜索标题…"
value={qRaw} value={qRaw}
onChange={(e) => setQRaw(e.target.value)} onChange={(e) => setQRaw(e.target.value)}
/> />
@@ -130,7 +135,7 @@ export default function Shelf() {
/> />
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-4">
{libs.length === 0 && ( {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"> <div className="mb-4 flex flex-wrap gap-2">
<button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}> <button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}>
@@ -145,13 +150,13 @@ export default function Shelf() {
{continueRows.length > 0 && ( {continueRows.length > 0 && (
<section className="mb-8"> <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"> <div className="flex gap-4 overflow-x-auto pb-2">
{continueRows.map((r) => { {continueRows.map((r) => {
const b = booksByKey.get(`${r.library_id}/${r.path}`); const b = booksByKey.get(`${r.library_id}/${r.path}`);
if (!b) if (!b)
return ( 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 className="truncate">{r.title || "已删除的书"}</p>
<p>{Math.round(r.percent * 100)}%</p> <p>{Math.round(r.percent * 100)}%</p>
</div> </div>
@@ -178,11 +183,11 @@ export default function Shelf() {
</p> </p>
)} )}
{!booksQ.isPending && groups.length === 0 && !booksQ.isError && ( {!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) => ( {groups.map((g) => (
<section key={g.dir || "//"} className="mb-8"> <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"> <div className="flex flex-wrap gap-4">
{g.books.map((b) => ( {g.books.map((b) => (
<BookCard key={b.id} book={b} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} /> <BookCard key={b.id} book={b} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
+4 -4
View File
@@ -67,9 +67,9 @@ export default function AdminLibraries() {
<div key={l.id} className={`${card} p-4`}> <div key={l.id} className={`${card} p-4`}>
<div className="mb-1 flex items-baseline gap-3"> <div className="mb-1 flex items-baseline gap-3">
<span className="font-medium">{l.name}</span> <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> </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"> <div className="flex flex-wrap items-center gap-3">
<button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(l.id)}> <button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(l.id)}>
{scan.isPending ? "扫描中…" : "扫描"} {scan.isPending ? "扫描中…" : "扫描"}
@@ -90,12 +90,12 @@ export default function AdminLibraries() {
<button className={btn} onClick={() => fileRefs.current[l.id]?.click()}> <button className={btn} onClick={() => fileRefs.current[l.id]?.click()}>
上传文件 上传文件
</button> </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>
</div> </div>
))} ))}
{(libsQ.data ?? []).length === 0 && !libsQ.isPending && ( {(libsQ.data ?? []).length === 0 && !libsQ.isPending && (
<p className="text-sm text-zinc-500">还没有库,用上方表单创建。</p> <p className="text-sm text-stone-500">还没有库,用上方表单创建。</p>
)} )}
</div> </div>
</div> </div>
+4 -4
View File
@@ -55,7 +55,7 @@ export default function AdminUsers() {
</button> </button>
</form> </form>
<table className="w-full max-w-2xl text-sm"> <table className="w-full max-w-2xl text-sm">
<thead className="text-left text-zinc-500"> <thead className="text-left text-stone-500">
<tr> <tr>
<th className="py-1">ID</th> <th className="py-1">ID</th>
<th>用户名</th> <th>用户名</th>
@@ -66,11 +66,11 @@ export default function AdminUsers() {
</thead> </thead>
<tbody> <tbody>
{(usersQ.data ?? []).map((x) => ( {(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.username}</td>
<td>{x.role}</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"> <td className="py-1 text-right">
<button <button
className={btn + " text-red-300"} className={btn + " text-red-300"}
+9 -6
View File
@@ -26,7 +26,7 @@ function PageImg({ url, width, onLoaded }: { url: string; width: number; onLoade
}, [url, nonce]); }, [url, nonce]);
if (failed) if (failed)
return ( 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)}> <button className={btn} onClick={() => setNonce((n) => n + 1)}>
重试 重试
@@ -34,7 +34,7 @@ function PageImg({ url, width, onLoaded }: { url: string; width: number; onLoade
</div> </div>
); );
if (!src) 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: width * EST_RATIO }} />;
return ( return (
<img <img
src={src} src={src}
@@ -102,10 +102,10 @@ export default function CbzReader({ book, initialLocator }: ReaderProps) {
// pages_url 缺失时 query 被 disabled 永久 pending → 只有真正发起了请求才显示加载态 // pages_url 缺失时 query 被 disabled 永久 pending → 只有真正发起了请求才显示加载态
if (countQ.isPending && !!book.pages_url) 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) if (countQ.isError || !book.page_url_fmt)
return ( 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"} 无法解析页索引:{countQ.error instanceof Error ? countQ.error.message : "缺 page_url_fmt"}
</div> </div>
); );
@@ -138,8 +138,11 @@ export default function CbzReader({ book, initialLocator }: ReaderProps) {
})} })}
</div> </div>
</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"> <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">
{cur + 1}/{count} <span>
{cur + 1}/{count}
</span>
<span className="opacity-60">{Math.round(((cur + 1) / count) * 100)}%</span>
</div> </div>
</div> </div>
); );
+3 -3
View File
@@ -91,11 +91,11 @@ export default function EpubReader({ book, initialLocator }: ReaderProps) {
return ( return (
<div className="grid h-full grid-rows-[1fr_auto]"> <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" /> <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>
<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 className={btn} onClick={() => rendRef.current?.prev()}>
上一页 上一页
</button> </button>
+17 -12
View File
@@ -123,28 +123,33 @@ export default function PdfReader({ book, initialLocator }: ReaderProps) {
</div> </div>
</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 ( 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>
<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>
<button className={btn} disabled={page === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}> <button className={btn} disabled={page === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>
上一页 ← 上一页
</button> </button>
<span className="text-zinc-400"> <span className="min-w-16 text-center tabular-nums text-stone-400">
{page + 1}/{num} {page + 1}/{num}
</span> </span>
<button className={btn} disabled={page >= num - 1} onClick={() => setPage((p) => Math.min(num - 1, p + 1))}> <button className={btn} disabled={page >= num - 1} onClick={() => setPage((p) => Math.min(num - 1, p + 1))}>
下一页 下一页 →
</button> </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> </button>
</div> </div>
</div> </div>
+102 -46
View File
@@ -1,12 +1,47 @@
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import { marked } from "marked"; import { marked } from "marked";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { apiRaw } from "../api/client"; import { apiRaw } from "../api/client";
import { btn, input } from "../components/ui"; import { btn } from "../components/ui";
import { chapterText, splitChapters } from "../lib/chapters"; import { chapterText, splitChapters } from "../lib/chapters";
import { decodeText } from "../lib/encoding"; import { decodeText } from "../lib/encoding";
import { FONT_SIZES, RD_THEME_LABEL, useReaderPrefs } from "../lib/readerPrefs";
import { useProgressSaver, type ReaderProps } from "../lib/useProgress"; import { useProgressSaver, type ReaderProps } from "../lib/useProgress";
type Prefs = ReturnType<typeof useReaderPrefs>;
function PrefsBar({ pr }: { pr: Prefs }) {
return (
<div className="flex items-center gap-1.5 text-sm" role="group" aria-label="阅读偏好">
<button className="rd-btn text-xs" onClick={pr.cycleTheme} aria-label="切换阅读主题">
{RD_THEME_LABEL[pr.prefs.theme]}·主题
</button>
<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>
);
}
function ReaderToolbar({ pr, children }: { pr: Prefs; children?: ReactNode }) {
return (
<div className="rd-divider flex shrink-0 items-center gap-2 border-b px-4 py-1.5">
{children}
<div className="ml-auto">
<PrefsBar pr={pr} />
</div>
</div>
);
}
function useFileText(url: string) { function useFileText(url: string) {
const [text, setText] = useState<string | null>(null); const [text, setText] = useState<string | null>(null);
const [err, setErr] = useState(""); const [err, setErr] = useState("");
@@ -31,7 +66,7 @@ function LoadState({ text, onRetry }: { text: string; onRetry?: () => void }) {
<div className="grid h-full place-items-center p-8 text-center"> <div className="grid h-full place-items-center p-8 text-center">
<div> <div>
{onRetry && <p className="mb-3 text-red-400">{text}</p>} {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 && ( {onRetry && (
<button className={btn} onClick={onRetry}> <button className={btn} onClick={onRetry}>
重试 重试
@@ -50,6 +85,7 @@ function MdView({ book, initialLocator }: ReaderProps) {
const boxRef = useRef<HTMLDivElement>(null); const boxRef = useRef<HTMLDivElement>(null);
const saver = useProgressSaver(book.id); const saver = useProgressSaver(book.id);
const restored = useRef(false); const restored = useRef(false);
const pr = useReaderPrefs();
const { text, err, retry } = useFileText(book.file_url ?? ""); const { text, err, retry } = useFileText(book.file_url ?? "");
const html = useMemo(() => (text == null ? null : DOMPurify.sanitize(marked.parse(text, { async: false }))), [text]); const html = useMemo(() => (text == null ? null : DOMPurify.sanitize(marked.parse(text, { async: false }))), [text]);
@@ -75,8 +111,15 @@ function MdView({ book, initialLocator }: ReaderProps) {
if (err) return <LoadState text={err} onRetry={retry} />; if (err) return <LoadState text={err} onRetry={retry} />;
if (text == null) return <LoadState text="正文加载中…" />; if (text == null) return <LoadState text="正文加载中…" />;
return ( 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 ?? "" }} /> <ReaderToolbar pr={pr} />
<div ref={boxRef} onScroll={onScroll} 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>
</div> </div>
); );
} }
@@ -89,6 +132,7 @@ function TxtView({ book, initialLocator }: ReaderProps) {
const restoreFrac = useRef<number | null>(null); const restoreFrac = useRef<number | null>(null);
const targetCi = useRef(0); const targetCi = useRef(0);
const [ci, setCi] = useState(0); const [ci, setCi] = useState(0);
const pr = useReaderPrefs();
const { text, err, retry } = useFileText(book.file_url ?? ""); const { text, err, retry } = useFileText(book.file_url ?? "");
const chapters = useMemo(() => (text == null ? null : splitChapters(text)), [text]); const chapters = useMemo(() => (text == null ? null : splitChapters(text)), [text]);
@@ -141,53 +185,65 @@ function TxtView({ book, initialLocator }: ReaderProps) {
if (err) return <LoadState text={err} onRetry={retry} />; if (err) return <LoadState text={err} onRetry={retry} />;
if (text == null || !chapters) return <LoadState text="正文加载中…" />; if (text == null || !chapters) return <LoadState text="正文加载中…" />;
const chapterOptions = (() => {
const groups: { vol: string | undefined; items: number[] }[] = [];
chapters.forEach((c, i) => {
const last = groups[groups.length - 1];
if (!last || last.vol !== c.vol) groups.push({ vol: c.vol, items: [i] });
else last.items.push(i);
});
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)
),
);
})();
return ( return (
<div className="flex h-full flex-col"> <div className="rd-surface flex h-full flex-col" data-rd={pr.prefs.theme}>
{chapters.length > 1 && ( <ReaderToolbar pr={pr}>
<div className="flex shrink-0 items-center gap-2 border-b border-zinc-800 px-4 py-2 text-sm"> {chapters.length > 1 && (
<select className={input + " max-w-64"} value={ci} onChange={(e) => goChapter(Number(e.target.value))}> <>
{(() => { <select
const groups: { vol: string | undefined; items: number[] }[] = []; className="rd-select max-w-72 truncate"
chapters.forEach((c, i) => { value={ci}
const last = groups[groups.length - 1]; aria-label="选择章节"
if (!last || last.vol !== c.vol) groups.push({ vol: c.vol, items: [i] }); onChange={(e) => goChapter(Number(e.target.value))}
else last.items.push(i); >
}); {chapterOptions}
const opt = (i: number) => ( </select>
<option key={i} value={i}> <span className="text-xs opacity-60 tabular-nums">
{i + 1}. {chapters[i].title} {ci + 1}/{chapters.length}
</option> </span>
); </>
return groups.length === 1 && !groups[0].vol )}
? chapters.map((_, i) => opt(i)) </ReaderToolbar>
: groups.map((g, gi) => <div ref={boxRef} onScroll={onScroll} className="min-h-0 flex-1 overflow-y-auto px-5 py-6 sm:px-6">
g.vol ? ( <pre
<optgroup key={gi} label={g.vol}> className="mx-auto max-w-[34em] break-words whitespace-pre-wrap"
{g.items.map(opt)} style={{ fontSize: pr.fontSize, lineHeight: 1.9, textAlign: "justify" }}
</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)} {chapterText(text, chapters, ci)}
</pre> </pre>
</div> </div>
{chapters.length > 1 && ( {chapters.length > 1 && (
<div className="flex shrink-0 items-center justify-center gap-3 border-t border-zinc-800 px-4 py-2 text-sm"> <div className="rd-divider flex shrink-0 items-center justify-center gap-3 border-t px-4 py-2 text-sm">
<button className={btn} disabled={ci === 0} onClick={() => goChapter(ci - 1)}> <button className="rd-btn" disabled={ci === 0} onClick={() => goChapter(ci - 1)}>
上一章 ← 上一章
</button> </button>
<button className={btn} disabled={ci === chapters.length - 1} onClick={() => goChapter(ci + 1)}> <button className="rd-btn" disabled={ci === chapters.length - 1} onClick={() => goChapter(ci + 1)}>
下一章 下一章 →
</button> </button>
</div> </div>
)} )}
+2 -2
View File
@@ -14,8 +14,8 @@ export default defineConfig({
name: "BookLib 个人书库", name: "BookLib 个人书库",
short_name: "BookLib", short_name: "BookLib",
description: "个人书库/漫画库在线阅读", description: "个人书库/漫画库在线阅读",
theme_color: "#09090b", theme_color: "#0c0a09",
background_color: "#09090b", background_color: "#0c0a09",
display: "standalone", display: "standalone",
icons: [{ src: "icon.svg", sizes: "any", type: "image/svg+xml", purpose: "any" }], icons: [{ src: "icon.svg", sizes: "any", type: "image/svg+xml", purpose: "any" }],
}, },