feat(ui): content-first shelf redesign — responsive cover grid, hover overlays, format badges, skeletons, sticky blurred top bar, brand login, SVG icon set, animated toasts

frontend/src/components/Cover.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import type { Book } from "../api/types";
 import { fetchObjectUrl } from "../lib/authImage";
-import { btn } from "./ui";
+import { btn, formatBadge } from "./ui";
+import { IconAlert } from "./icons";
 
 export function useAuthedImage(url: string | undefined): { src: string; failed: boolean; retry: () => void } {
   const [state, setState] = useState<{ key: string; src: string; failed: boolean }>({ key: "", src: "", failed: false });
@@ -27,14 +28,29 @@ export function useAuthedImage(url: string | undefined): { src: string; failed:
 
 export function Cover({ book, className }: { book: Book; className?: string }) {
   const { src, failed, retry } = useAuthedImage(book.cover_url);
-  if (failed)
+  if (!book.cover_url || failed) {
     return (
-      <div className={`grid place-items-center bg-stone-900 ${className ?? ""}`}>
-        <button className={btn} onClick={retry} aria-label="封面加载失败,重试">
-          重试
-        </button>
+      <div
+        className={`relative grid place-items-center overflow-hidden bg-linear-to-br from-stone-800 to-stone-900 ${className ?? ""}`}
+      >
+        <span className="select-none font-serif text-4xl text-stone-500">{Array.from(book.title)[0] ?? "?"}</span>
+        <span className={formatBadge(book.format, "absolute bottom-1.5 right-1.5")}>{book.format}</span>
+        {failed && (
+          <button className={btn + " absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"} onClick={retry}>
+            <IconAlert className="size-4" />
+            封面重试
+          </button>
+        )}
       </div>
     );
-  if (!src) return <div className={`animate-pulse bg-stone-800 ${className ?? ""}`} />;
-  return <img src={src} alt="" loading="lazy" className={`bg-stone-900 object-cover ${className ?? ""}`} />;
+  }
+  if (!src) return <div className={`animate-pulse bg-stone-800/80 ${className ?? ""}`} role="presentation" />;
+  return (
+    <img
+      src={src}
+      alt={`《${book.title}》封面`}
+      loading="lazy"
+      className={`bg-stone-900 object-cover ${className ?? ""}`}
+    />
+  );
 }

frontend/src/components/Toaster.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, type ReactNode } from "react";
+import { IconAlert, IconCheck } from "./icons";
 
 type Toast = { id: number; kind: "ok" | "err"; text: ReactNode };
 
@@ -31,10 +32,13 @@ export function Toaster() {
         <div
           key={t.id}
           role="status"
-          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"
+          className={`fx-rise flex max-w-sm items-center gap-2 rounded-xl px-4 py-2.5 text-sm shadow-xl ring-1 backdrop-blur-md ${
+            t.kind === "ok"
+              ? "bg-emerald-950/90 text-emerald-100 ring-emerald-500/25"
+              : "bg-red-950/90 text-red-100 ring-red-500/30"
           }`}
         >
+          {t.kind === "ok" ? <IconCheck className="size-4 shrink-0 text-emerald-400" /> : <IconAlert className="size-4 shrink-0 text-red-400" />}
           {t.text}
         </div>
       ))}

frontend/src/components/TopBar.tsx

@@ -1,41 +1,64 @@
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { useAuth } from "../auth/AuthContext";
-import { btn } from "./ui";
+import { IconBooks, IconFolder, IconLogout, IconUser } from "./icons";
+import { btnGhost } from "./ui";
 
 export function TopBar({ right }: { right?: ReactNode }) {
   const { user, isAdmin, logout } = useAuth();
   return (
-    <header className="flex shrink-0 items-center gap-2 border-b border-stone-800/80 px-4 py-3">
-      <Link to="/" className="font-serif text-lg font-semibold tracking-wide">
-        Book<span className="text-amber-500">Lib</span>
+    <header className="sticky top-0 z-30 flex shrink-0 items-center gap-1 border-b border-white/[0.06] bg-stone-950/80 px-4 py-2.5 backdrop-blur-md sm:px-6">
+      <Link
+        to="/"
+        className="flex shrink-0 items-center gap-2 rounded-lg pr-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
+      >
+        <span className="grid size-7 place-items-center rounded-lg bg-linear-to-br from-amber-500 to-orange-600 text-stone-950 shadow-md shadow-amber-500/25">
+          <IconBooks className="size-4.5" />
+        </span>
+        <span className="font-serif text-lg font-semibold tracking-wide">
+          Book<span className="text-amber-400">Lib</span>
+        </span>
       </Link>
       {isAdmin && (
-        <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>
+        <nav aria-label="管理" className="ml-2 hidden items-center gap-1 sm:flex">
+          <TabLink to="/admin/users">
+            <IconUser className="size-4" />
+            用户
+          </TabLink>
+          <TabLink to="/admin/libraries">
+            <IconFolder className="size-4" />
+            库管理
+          </TabLink>
+        </nav>
       )}
-      {isAdmin && (
-        <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">
+      <div className="ml-auto flex items-center gap-2 sm:gap-3">
         {right}
-        <span className="text-sm text-stone-400">
-          {user?.username}
-          {isAdmin ? "(admin)" : ""}
+        <span className="flex items-center gap-2 rounded-full bg-white/[0.05] py-1 pl-1 pr-3 text-sm text-stone-300 ring-1 ring-white/[0.07]">
+          <span className="grid size-6 shrink-0 place-items-center rounded-full bg-amber-500/20 text-[11px] font-semibold text-amber-300 ring-1 ring-amber-500/30">
+            {Array.from(user?.username ?? "?")[0]?.toUpperCase()}
+          </span>
+          <span className="hidden max-w-28 truncate sm:inline">{user?.username}</span>
+          {isAdmin && <span className="hidden rounded bg-amber-500/15 px-1 text-[10px] font-semibold text-amber-300 md:inline">admin</span>}
         </span>
-        <button className={btn} onClick={logout}>
-          退出
+        <button className={btnGhost} onClick={logout} aria-label="退出登录" title="退出登录">
+          <IconLogout className="size-4.5" />
         </button>
       </div>
     </header>
   );
 }
+
+function TabLink({ to, children }: { to: string; children: ReactNode }) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        `flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 ${
+          isActive ? "bg-white/[0.09] text-stone-100 ring-1 ring-white/10" : "text-stone-400 hover:bg-white/[0.06] hover:text-stone-100"
+        }`
+      }
+    >
+      {children}
+    </NavLink>
+  );
+}

frontend/src/components/icons.tsx

@@ -0,0 +1,122 @@
+import type { SVGProps } from "react";
+
+// 统一 1.7px 描边的线性图标(Phosphor 风格),尺寸由外部 className 控制
+function Svg({ children, ...p }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...p}
+    >
+      {children}
+    </svg>
+  );
+}
+
+type P = SVGProps<SVGSVGElement>;
+
+export const IconBooks = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H10a1.5 1.5 0 0 1 1.5 1.5V18a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 14.5v-9Z" />
+    <path d="M13 8h4.5A1.5 1.5 0 0 1 19 9.5v8A1.5 1.5 0 0 1 17.5 19H13" />
+    <path d="M7 4v12M16 12.5v4" />
+  </Svg>
+);
+
+export const IconSearch = (p: P) => (
+  <Svg {...p}>
+    <circle cx="11" cy="11" r="6.5" />
+    <path d="m16 16 4 4" />
+  </Svg>
+);
+
+export const IconRefresh = (p: P) => (
+  <Svg {...p}>
+    <path d="M20 12a8 8 0 1 1-2.34-5.66" />
+    <path d="M20 4v4.5h-4.5" />
+  </Svg>
+);
+
+export const IconScan = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16" />
+    <path d="M7 12h10" />
+  </Svg>
+);
+
+export const IconX = (p: P) => (
+  <Svg {...p}>
+    <path d="m6 6 12 12M18 6 6 18" />
+  </Svg>
+);
+
+export const IconTrash = (p: P) => (
+  <Svg {...p}>
+    <path d="M4.5 6.5h15M9.5 6.5V4.75A.75.75 0 0 1 10.25 4h3.5a.75.75 0 0 1 .75.75v1.75M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12" />
+  </Svg>
+);
+
+export const IconLogout = (p: P) => (
+  <Svg {...p}>
+    <path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" />
+    <path d="M10 8 6 12l4 4M6 12h10" />
+  </Svg>
+);
+
+export const IconArrowLeft = (p: P) => (
+  <Svg {...p}>
+    <path d="M20 12H4m0 0 6-6m-6 6 6 6" />
+  </Svg>
+);
+
+export const IconBookOpen = (p: P) => (
+  <Svg {...p}>
+    <path d="M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2 1.5-1.5 3.5-2 8-2v-13c-4.5 0-6.5.5-8 2Z" />
+    <path d="M12 6.5v13" />
+  </Svg>
+);
+
+export const IconUser = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="8" r="3.5" />
+    <path d="M5 19.5c1.2-3 3.7-4.5 7-4.5s5.8 1.5 7 4.5" />
+  </Svg>
+);
+
+export const IconLock = (p: P) => (
+  <Svg {...p}>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="1.5" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14v2.5" />
+  </Svg>
+);
+
+export const IconCheck = (p: P) => (
+  <Svg {...p}>
+    <path d="m5 12.5 4.5 4.5L19 7" />
+  </Svg>
+);
+
+export const IconAlert = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V13m0 3.5v.01" />
+  </Svg>
+);
+
+export const IconClock = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V12l3 2" />
+  </Svg>
+);
+
+export const IconFolder = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 6.5A1.5 1.5 0 0 1 5.5 5h3.2a1.5 1.5 0 0 1 1.2.6l.9 1.2a1.5 1.5 0 0 0 1.2.6h6.5A1.5 1.5 0 0 1 20 9.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-11Z" />
+  </Svg>
+);

frontend/src/components/ui.ts

@@ -1,7 +1,38 @@
+import type { Format } from "../api/types";
+
 export const btn =
-  "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";
+  "inline-flex items-center gap-1.5 rounded-lg bg-white/[0.06] px-3 py-1.5 text-sm ring-1 ring-white/10 transition-colors hover:bg-white/[0.11] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-50";
 export const btnPrimary =
-  "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";
+  "inline-flex items-center gap-1.5 rounded-lg bg-amber-500 px-3 py-1.5 text-sm font-medium text-stone-950 shadow-md shadow-amber-500/20 transition-colors hover:bg-amber-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50";
+export const btnGhost =
+  "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-stone-400 transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";
 export const input =
-  "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";
+  "rounded-lg bg-white/[0.04] px-3 py-1.5 text-sm ring-1 ring-white/10 outline-none transition placeholder:text-stone-500 focus:bg-white/[0.06] focus:ring-2 focus:ring-amber-500/60";
+export const card = "rounded-xl bg-stone-900/70 ring-1 ring-white/[0.07]";
+
+// 库/筛选分段 pill
+export const pill =
+  "rounded-full px-3.5 py-1.5 text-sm text-stone-400 ring-1 ring-transparent transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";
+export const pillActive = "bg-amber-500/15 text-amber-300 ring-amber-500/30 hover:bg-amber-500/20 hover:text-amber-200";
+
+// 格式徽章:按类型着色,色彩之外始终伴随文字,不依赖颜色单独传义
+export const FORMAT_BADGE: Record<Format, string> = {
+  cbz: "bg-orange-500/15 text-orange-300 ring-orange-500/25",
+  pdf: "bg-rose-500/15 text-rose-300 ring-rose-500/25",
+  epub: "bg-sky-500/15 text-sky-300 ring-sky-500/25",
+  txt: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/25",
+  md: "bg-teal-500/15 text-teal-300 ring-teal-500/25",
+};
+
+export function formatBadge(fmt: Format, extra = ""): string {
+  return `rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ${FORMAT_BADGE[fmt]} ${extra}`;
+}
+
+export function formatSize(bytes: number): string {
+  if (bytes <= 0) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  let n = bytes;
+  for (; n >= 1024 && i < units.length - 1; i++) n /= 1024;
+  return `${n >= 10 || i === 0 ? Math.round(n) : n.toFixed(1)} ${units[i]}`;
+}