feat(ui): admin pages on shadcn table/card/alert-dialog; drop TopBar, trim icons/ui.ts to reader-compat surface

frontend/src/components/TopBar.tsx

@@ -1,64 +0,0 @@
-import type { ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
-import { useAuth } from "../auth/AuthContext";
-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="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 && (
-        <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>
-      )}
-      <div className="ml-auto flex items-center gap-2 sm:gap-3">
-        {right}
-        <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={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

@@ -1,116 +1,15 @@
 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}
-    >
+    <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 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) => (
+export const IconArrowLeft = (p: SVGProps<SVGSVGElement>) => (
   <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

@@ -4,18 +4,8 @@ export { formatSize } from "../lib/format"; // deprecated: phase-2 随阅读器
 
 export const btn =
   "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 =
-  "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 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> = {