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/pages/Shelf.tsx

@@ -5,63 +5,87 @@ import { api } from "../api/client";
 import type { Book } from "../api/types";
 import { useAuth } from "../auth/AuthContext";
 import { Cover } from "../components/Cover";
+import { IconAlert, IconBookOpen, IconClock, IconFolder, IconRefresh, IconScan, IconSearch, IconX } from "../components/icons";
 import { TopBar } from "../components/TopBar";
 import { toast } from "../components/Toaster";
-import { btn, btnPrimary, card, input } from "../components/ui";
+import { btn, card, formatBadge, formatSize, input, pill, pillActive } from "../components/ui";
 import { groupByDir } from "../lib/group";
 
 function BookCard({
   book,
+  index,
   onOpen,
   onDelete,
 }: {
   book: Book;
+  index: number;
   onOpen: () => void;
   onDelete: () => void;
 }) {
   const { isAdmin } = useAuth();
+  const pct = Math.round(book.percent * 100);
   return (
-    <div className="group relative w-32 shrink-0">
-      <button onClick={onOpen} className="block w-full text-left">
-        <Cover
-          book={book}
-          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">
+    <div
+      className="group fx-rise relative flex flex-col"
+      style={{ animationDelay: `${Math.min(index, 23) * 25}ms` }}
+    >
+      <button onClick={onOpen} className="block w-full text-left focus-visible:outline-none">
+        <div className="relative aspect-[3/4] w-full overflow-hidden rounded-lg shadow-md ring-1 ring-white/10 transition duration-200 will-change-transform group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-black/40 group-hover:ring-amber-500/40 group-focus-visible:-translate-y-1 group-focus-visible:ring-amber-500">
+          <Cover book={book} className="size-full" />
+          <span className={formatBadge(book.format, "absolute left-1.5 top-1.5 backdrop-blur-sm")}>{book.format}</span>
+          {book.state === "error" && (
+            <span
+              className="absolute right-1.5 top-1.5 rounded bg-red-950/90 px-1.5 py-0.5 text-[10px] font-semibold text-red-200 ring-1 ring-red-500/40"
+              title={book.error}
+            >
+              损坏
+            </span>
+          )}
+          <span className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-1 bg-linear-to-t from-black/80 via-black/30 to-transparent p-1.5 pt-6 text-[10px] tabular-nums text-stone-200 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
+            <span>{book.pages > 0 ? `${book.pages} 页` : ""}</span>
+            <span>{formatSize(book.size)}</span>
+          </span>
+          {pct > 0 && (
+            <span className="absolute inset-x-0 bottom-0 h-1 bg-black/50" role="presentation">
+              <span className="block h-full bg-amber-500" style={{ width: `${pct}%` }} />
+            </span>
+          )}
+        </div>
+        <p className="mt-2 truncate text-xs font-medium text-stone-200 transition-colors group-hover:text-amber-300 group-focus-visible:text-amber-300">
           {book.title}
         </p>
-        <p className="truncate text-[10px] text-stone-500">
-          {book.format} · {book.path}
-        </p>
+        <p className="truncate text-[10px] text-stone-500">{book.path.includes("/") ? book.path.slice(0, book.path.lastIndexOf("/")) : "根目录"}</p>
       </button>
-      {book.state === "error" && (
-        <span
-          className="absolute left-1 top-1 rounded bg-red-900 px-1 text-[10px] text-red-100"
-          title={book.error}
-        >
-          损坏
-        </span>
-      )}
-      {book.percent > 0 && (
-        <div className="mt-1 h-1 w-32 overflow-hidden rounded-full bg-stone-800">
-          <div className="h-full rounded-full bg-amber-500" style={{ width: `${Math.round(book.percent * 100)}%` }} />
-        </div>
-      )}
       {isAdmin && (
         <button
-          className="absolute right-1 top-1 hidden rounded bg-stone-900/80 px-1.5 text-xs text-red-300 group-hover:block"
+          className="absolute right-1.5 top-1.5 z-10 rounded-md bg-stone-950/80 p-1 text-stone-300 opacity-0 ring-1 ring-white/10 backdrop-blur-sm transition hover:bg-red-950 hover:text-red-300 focus-visible:opacity-100 group-hover:opacity-100"
           title="删除(连磁盘文件)"
+          aria-label={`删除《${book.title}》`}
           onClick={() => {
             if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
           }}
         >
-          ✕
+          <IconX className="size-3.5" />
         </button>
       )}
     </div>
   );
 }
 
+const GRID = "grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-x-4 gap-y-6 sm:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]";
+
+function Section({ title, icon, children }: { title: string; icon?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <section className="mb-10">
+      <h2 className="mb-3 flex items-center gap-1.5 text-sm font-semibold tracking-wide text-stone-300">
+        {icon}
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
 export default function Shelf() {
   const qc = useQueryClient();
   const nav = useNavigate();
@@ -110,90 +134,146 @@ export default function Shelf() {
 
   const continueRows = (progQ.data ?? []).slice(0, 12);
   const libs = libsQ.data ?? [];
+  const searching = q.length > 0;
 
   return (
     <div className="flex h-full flex-col">
       <TopBar
         right={
           <>
-            <button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })}>
-              刷新
-            </button>
+            <div className="relative">
+              <IconSearch className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-stone-500" />
+              <input
+                className={input + " w-36 pl-8 sm:w-52"}
+                type="search"
+                aria-label="搜索标题"
+                placeholder="搜索标题…"
+                value={qRaw}
+                onChange={(e) => setQRaw(e.target.value)}
+              />
+            </div>
             {isAdmin && lib > 0 && (
               <button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(lib)}>
+                <IconScan className="size-4" />
                 {scan.isPending ? "扫描中…" : "扫描此库"}
               </button>
             )}
-            <input
-              className={input + " w-44"}
-              aria-label="搜索标题" placeholder="搜索标题…"
-              value={qRaw}
-              onChange={(e) => setQRaw(e.target.value)}
-            />
+            <button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })} aria-label="刷新书目">
+              <IconRefresh className="size-4" />
+              <span className="hidden sm:inline">刷新</span>
+            </button>
           </>
         }
       />
-      <div className="flex-1 overflow-y-auto p-4">
-        {libs.length === 0 && (
-          <p className="text-sm text-stone-500">还没有书库。admin 请到「库管理」建库并扫描。</p>
+      <div className="flex-1 overflow-y-auto px-4 py-5 sm:px-6">
+        {libs.length === 0 && !libsQ.isPending && (
+          <p className="mb-6 flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-sm text-amber-200 ring-1 ring-amber-500/25">
+            <IconAlert className="size-4 shrink-0" />
+            还没有书库。admin 请到「库管理」建库并扫描。
+          </p>
         )}
-        <div className="mb-4 flex flex-wrap gap-2">
-          <button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}>
-            全部
-          </button>
-          {libs.map((l) => (
-            <button key={l.id} className={lib === l.id ? btnPrimary : btn} onClick={() => setLib(l.id)}>
-              {l.name}
+        {(libs.length > 0 || libsQ.isPending) && (
+          <nav aria-label="按库筛选" className="mb-8 flex w-fit flex-wrap gap-1 rounded-full bg-white/[0.04] p-1 ring-1 ring-white/[0.07]">
+            <button className={`${pill} ${lib === 0 ? pillActive : ""}`} aria-pressed={lib === 0} onClick={() => setLib(0)}>
+              全部
             </button>
-          ))}
-        </div>
+            {libs.map((l) => (
+              <button
+                key={l.id}
+                className={`${pill} ${lib === l.id ? pillActive : ""}`}
+                aria-pressed={lib === l.id}
+                onClick={() => setLib(l.id)}
+              >
+                {l.name}
+              </button>
+            ))}
+          </nav>
+        )}
 
-        {continueRows.length > 0 && (
-          <section className="mb-8">
-            <h2 className="mb-2 text-sm font-semibold text-stone-400">继续阅读</h2>
-            <div className="flex gap-4 overflow-x-auto pb-2">
-              {continueRows.map((r) => {
+        {continueRows.length > 0 && !searching && (
+          <Section title="继续阅读" icon={<IconClock className="size-4 text-amber-500/80" />}>
+            <ul className="flex gap-3 overflow-x-auto pb-2" role="list">
+              {continueRows.map((r, i) => {
                 const b = booksByKey.get(`${r.library_id}/${r.path}`);
                 if (!b)
                   return (
-                    <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>{Math.round(r.percent * 100)}%</p>
-                    </div>
+                    <li key={`${r.library_id}/${r.path}`} className={`fx-rise w-44 shrink-0 ${card} p-3`} style={{ animationDelay: `${i * 40}ms` }}>
+                      <p className="truncate text-xs text-stone-400">{r.title || "已删除的书"}</p>
+                      <p className="mt-1 text-[10px] text-stone-600">#{r.library_id}/{r.path} · 进度已保留</p>
+                    </li>
                   );
+                const pct = Math.round(r.percent * 100);
                 return (
-                  <BookCard
-                    key={`${r.library_id}/${r.path}`}
-                    book={b}
-                    onOpen={() => nav(`/book/${b.id}`)}
-                    onDelete={() => del.mutate(b.id)}
-                  />
+                  <li key={`${r.library_id}/${r.path}`} className="fx-rise shrink-0" style={{ animationDelay: `${i * 40}ms` }}>
+                    <button
+                      className="group flex w-64 items-center gap-3 rounded-xl p-2 text-left ring-1 ring-white/[0.07] transition-colors hover:bg-white/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
+                      onClick={() => nav(`/book/${b.id}`)}
+                    >
+                      <Cover book={b} className="aspect-[3/4] w-14 shrink-0 rounded-md shadow ring-1 ring-white/10" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-sm font-medium text-stone-100 group-hover:text-amber-300">{b.title}</span>
+                        <span className="mt-0.5 flex items-center gap-1.5 text-[11px] text-stone-500">
+                          {r.library}
+                          <span className="tabular-nums text-stone-400">{pct}%</span>
+                        </span>
+                        <span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-white/10">
+                          <span className="block h-full rounded-full bg-amber-500" style={{ width: `${pct}%` }} />
+                        </span>
+                      </span>
+                      <IconBookOpen className="size-4 shrink-0 text-stone-600 transition-colors group-hover:text-amber-400" />
+                    </button>
+                  </li>
                 );
               })}
-            </div>
-          </section>
+            </ul>
+          </Section>
         )}
 
         {booksQ.isError && (
-          <p className="mb-4 text-sm text-red-400">
-            加载失败:{booksQ.error instanceof Error ? booksQ.error.message : ""}{" "}
+          <div className={`fx-rise mb-8 flex flex-wrap items-center gap-3 rounded-xl bg-red-950/40 px-4 py-3 text-sm text-red-200 ring-1 ring-red-500/25`}>
+            <IconAlert className="size-4 shrink-0" />
+            <span>加载失败:{booksQ.error instanceof Error ? booksQ.error.message : "未知错误"}</span>
             <button className={btn} onClick={() => booksQ.refetch()}>
+              <IconRefresh className="size-4" />
               重试
             </button>
-          </p>
+          </div>
         )}
+
+        {booksQ.isPending && !booksQ.isError && (
+          <div className={GRID} aria-busy="true" aria-label="加载书目中">
+            {Array.from({ length: 12 }).map((_, i) => (
+              <div key={i} className="space-y-2">
+                <div className="aspect-[3/4] animate-pulse rounded-lg bg-stone-800/70" />
+                <div className="h-3 w-3/4 animate-pulse rounded bg-stone-800/70" />
+                <div className="h-2 w-1/2 animate-pulse rounded bg-stone-800/50" />
+              </div>
+            ))}
+          </div>
+        )}
+
         {!booksQ.isPending && groups.length === 0 && !booksQ.isError && (
-          <p className="text-sm text-stone-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
+          <div className="fx-rise flex flex-col items-center py-16 text-center">
+            <IconFolder className="size-10 text-stone-700" />
+            <h3 className="mt-3 text-sm font-medium text-stone-300">{searching ? `没有匹配「${q}」的书` : "此库暂无书目"}</h3>
+            <p className="mt-1 text-sm text-stone-500">
+              {searching ? "换个关键词试试。" : "放入文件后等待扫描,或点上方「扫描此库」。"}
+            </p>
+          </div>
         )}
+
         {groups.map((g) => (
-          <section key={g.dir || "//"} className="mb-8">
-            <h2 className="mb-2 text-sm font-semibold text-stone-400">{g.dir || "根目录"}</h2>
-            <div className="flex flex-wrap gap-4">
-              {g.books.map((b) => (
-                <BookCard key={b.id} book={b} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
+          <Section
+            key={g.dir || "//"}
+            title={g.dir || "根目录"}
+            icon={<IconFolder className="size-4 text-stone-500" />}
+          >
+            <div className={GRID}>
+              {g.books.map((b, i) => (
+                <BookCard key={b.id} book={b} index={i} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
               ))}
             </div>
-          </section>
+          </Section>
         ))}
       </div>
     </div>