diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0961381..3620311 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3,6 +3,7 @@ import { AuthProvider, RequireAuth } from "./auth/AuthContext";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { Toaster } from "./components/Toaster";
 import Login from "./pages/Login";
+import Shelf from "./pages/Shelf";
 
 function Placeholder({ name }: { name: string }) {
   return <div className="p-8 text-zinc-500">{name}:待后续任务落地</div>;
@@ -18,7 +19,15 @@ export default function App() {
             path="/"
             element={
               <RequireAuth>
-                <Placeholder name="书架" />
+                <Shelf />
+              </RequireAuth>
+            }
+          />
+          <Route
+            path="/book/:id"
+            element={
+              <RequireAuth>
+                <Placeholder name="阅读器" />
               </RequireAuth>
             }
           />
diff --git a/web/src/components/TopBar.tsx b/web/src/components/TopBar.tsx
new file mode 100644
index 0000000..8428b3f
--- /dev/null
+++ b/web/src/components/TopBar.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../auth/AuthContext";
+import { btn } from "./ui";
+
+export function TopBar({ right }: { right?: ReactNode }) {
+  const { user, isAdmin, logout } = useAuth();
+  return (
+    <header className="flex shrink-0 items-center gap-4 border-b border-zinc-800 px-4 py-3">
+      <Link to="/" className="font-semibold">
+        BookLib
+      </Link>
+      {isAdmin && (
+        <Link className="text-sm text-zinc-400 hover:text-zinc-100" to="/admin/users">
+          用户
+        </Link>
+      )}
+      {isAdmin && (
+        <Link className="text-sm text-zinc-400 hover:text-zinc-100" to="/admin/libraries">
+          库管理
+        </Link>
+      )}
+      <div className="ml-auto flex items-center gap-3">
+        {right}
+        <span className="text-sm text-zinc-400">
+          {user?.username}
+          {isAdmin ? "(admin)" : ""}
+        </span>
+        <button className={btn} onClick={logout}>
+          退出
+        </button>
+      </div>
+    </header>
+  );
+}
diff --git a/web/src/pages/Shelf.tsx b/web/src/pages/Shelf.tsx
new file mode 100644
index 0000000..69280cc
--- /dev/null
+++ b/web/src/pages/Shelf.tsx
@@ -0,0 +1,195 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import type { Book } from "../api/types";
+import { useAuth } from "../auth/AuthContext";
+import { Cover } from "../components/Cover";
+import { TopBar } from "../components/TopBar";
+import { toast } from "../components/Toaster";
+import { btn, btnPrimary, card, input } from "../components/ui";
+import { groupByDir } from "../lib/group";
+
+function BookCard({
+  book,
+  onOpen,
+  onDelete,
+}: {
+  book: Book;
+  onOpen: () => void;
+  onDelete: () => void;
+}) {
+  const { isAdmin } = useAuth();
+  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" />
+        <p className="mt-1 truncate text-xs text-zinc-300">{book.title}</p>
+        <p className="truncate text-[10px] text-zinc-500">
+          {book.format} · {book.path}
+        </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 bg-zinc-800">
+          <div className="h-full bg-emerald-600" style={{ width: `${Math.round(book.percent * 100)}%` }} />
+        </div>
+      )}
+      {isAdmin && (
+        <button
+          className="absolute right-1 top-1 hidden rounded bg-zinc-900/80 px-1.5 text-xs text-red-300 group-hover:block"
+          title="删除(连磁盘文件)"
+          onClick={() => {
+            if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
+          }}
+        >
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default function Shelf() {
+  const qc = useQueryClient();
+  const nav = useNavigate();
+  const [lib, setLib] = useState(0); // 0 = 全部库
+  const [qRaw, setQRaw] = useState("");
+  const [q, setQ] = useState("");
+
+  useEffect(() => {
+    const t = setTimeout(() => setQ(qRaw.trim()), 300); // 搜索防抖
+    return () => clearTimeout(t);
+  }, [qRaw]);
+
+  const libsQ = useQuery({ queryKey: ["libraries"], queryFn: api.listLibraries });
+  const booksQ = useQuery({
+    queryKey: ["books", lib, q],
+    queryFn: () => api.listBooks({ library: lib || undefined, q }),
+  });
+  const progQ = useQuery({ queryKey: ["progress"], queryFn: api.listProgress });
+  // 继续阅读行 → book id 解析用(键与 booksQ 默认态一致,天然共享缓存)
+  const allQ = useQuery({ queryKey: ["books", 0, ""], queryFn: () => api.listBooks() });
+
+  const del = useMutation({
+    mutationFn: (id: number) => api.deleteBook(id),
+    onSuccess: () => {
+      toast("ok", "已删除");
+      qc.invalidateQueries({ queryKey: ["books"] });
+    },
+    onError: (e) => toast("err", e instanceof Error ? e.message : "删除失败"),
+  });
+  const scan = useMutation({
+    mutationFn: (id: number) => api.scanLibrary(id),
+    onSuccess: () => {
+      toast("ok", "扫描已触发");
+      setTimeout(() => qc.invalidateQueries({ queryKey: ["books"] }), 3000); // 给周期扫描留出时间
+    },
+    onError: (e) => toast("err", e instanceof Error ? e.message : "扫描失败"),
+  });
+
+  const groups = useMemo(() => groupByDir(booksQ.data ?? []), [booksQ.data]);
+  const booksByKey = useMemo(() => {
+    const m = new Map<string, Book>();
+    for (const b of allQ.data ?? []) m.set(`${b.library_id}/${b.path}`, b);
+    return m;
+  }, [allQ.data]);
+
+  const continueRows = (progQ.data ?? []).slice(0, 12);
+  const libs = libsQ.data ?? [];
+
+  return (
+    <div className="flex h-full flex-col">
+      <TopBar
+        right={
+          <>
+            <button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })}>
+              刷新
+            </button>
+            {lib > 0 && (
+              <button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(lib)}>
+                {scan.isPending ? "扫描中…" : "扫描此库"}
+              </button>
+            )}
+            <input
+              className={input + " w-44"}
+              placeholder="搜索标题…"
+              value={qRaw}
+              onChange={(e) => setQRaw(e.target.value)}
+            />
+          </>
+        }
+      />
+      <div className="flex-1 overflow-y-auto p-4">
+        {libs.length === 0 && (
+          <p className="text-sm text-zinc-500">还没有书库。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}
+            </button>
+          ))}
+        </div>
+
+        {continueRows.length > 0 && (
+          <section className="mb-8">
+            <h2 className="mb-2 text-sm font-semibold text-zinc-400">继续阅读</h2>
+            <div className="flex gap-4 overflow-x-auto pb-2">
+              {continueRows.map((r) => {
+                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-zinc-600 ${card}`}>
+                      <p className="truncate">{r.title || "已删除的书"}</p>
+                      <p>{Math.round(r.percent * 100)}%</p>
+                    </div>
+                  );
+                return (
+                  <BookCard
+                    key={`${r.library_id}/${r.path}`}
+                    book={b}
+                    onOpen={() => nav(`/book/${b.id}`)}
+                    onDelete={() => del.mutate(b.id)}
+                  />
+                );
+              })}
+            </div>
+          </section>
+        )}
+
+        {booksQ.isError && (
+          <p className="mb-4 text-sm text-red-400">
+            加载失败:{booksQ.error instanceof Error ? booksQ.error.message : ""}{" "}
+            <button className={btn} onClick={() => booksQ.refetch()}>
+              重试
+            </button>
+          </p>
+        )}
+        {!booksQ.isPending && groups.length === 0 && !booksQ.isError && (
+          <p className="text-sm text-zinc-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
+        )}
+        {groups.map((g) => (
+          <section key={g.dir || "//"} className="mb-8">
+            <h2 className="mb-2 text-sm font-semibold text-zinc-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)} />
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}