页面出错了
-{String(this.state.err)}
-
diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
index 8428b3f..bd5687f 100644
--- a/frontend/src/components/TopBar.tsx
+++ b/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 (
-
-
- BookLib
+
+
+ BookLib
{isAdmin && (
-
+
用户
)}
{isAdmin && (
-
+
库管理
)}
{right}
-
+
{user?.username}
{isAdmin ? "(admin)" : ""}
diff --git a/frontend/src/components/ui.ts b/frontend/src/components/ui.ts
index 5c56510..e9a37aa 100644
--- a/frontend/src/components/ui.ts
+++ b/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";
-export const card = "rounded-xl border border-zinc-800 bg-zinc-900";
+ "rounded-lg border border-stone-700 bg-stone-900 px-3 py-1.5 text-sm outline-none transition-colors placeholder:text-stone-500 focus:border-amber-500/70";
+export const card = "rounded-xl border border-stone-800 bg-stone-900";
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5b28d2c..b9c1f27 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,15 +6,44 @@ 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-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 作用域) */
.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 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 code { @apply rounded bg-zinc-800 px-1 py-0.5 text-[13px]; }
-.md-body pre { @apply my-3 overflow-x-auto rounded-lg bg-zinc-900 p-3; }
+.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 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 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); }
diff --git a/frontend/src/lib/readerPrefs.ts b/frontend/src/lib/readerPrefs.ts
new file mode 100644
index 0000000..bc29246
--- /dev/null
+++ b/frontend/src/lib/readerPrefs.ts
@@ -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 = { 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(() => {
+ 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)) })),
+ };
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 5402644..ed47ef0 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -30,9 +30,9 @@ export default function Login() {