fix(web): active lib highlight, rail a11y names, card focus ring, AA accent + destructive tokens, touch-reachable menu, brand wordmark, chrome unify

frontend/src/components/app-shell.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { BookMarked, BookOpen, FolderCog, LogOut, Users } from "lucide-react";
-import { NavLink, Outlet, useLocation } from "react-router-dom";
+import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
 import { api } from "@/api/client";
 import { useAuth } from "@/auth/AuthContext";
 import { Button } from "@/components/ui/button";
@@ -10,31 +10,32 @@ import { ThemeToggle } from "./theme-toggle";
 import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
 
-function Brand({ compact }: { compact?: boolean }) {
+function Brand() {
   return (
-    <NavLink to="/" className="flex h-12 shrink-0 items-center gap-2 rounded-md px-3 focus-visible:outline-2 focus-visible:outline-offset-2">
+    <Link to="/" aria-label="BookLib 首页" className="flex h-12 shrink-0 items-center gap-2 rounded-md px-3 focus-visible:outline-2 focus-visible:outline-offset-2">
       <span className="grid size-6 place-items-center rounded bg-accent text-accent-foreground">
         <BookMarked className="size-4" />
       </span>
-      {!compact && <span className="text-[15px] font-semibold tracking-tight">BookLib</span>}
-    </NavLink>
+      <span className="hidden text-[15px] font-semibold tracking-tight lg:inline">BookLib</span>
+    </Link>
   );
 }
 
-function NavItem({ to, icon, label, search }: { to: string; icon: ReactNode; label: string; search?: string }) {
+/* NavLink 不可用:其 isActive/aria-current 前缀匹配 "/" 会无视 search,导致 ?lib=N 全部同时高亮 */
+function NavItem({ to, icon, label, active }: { to: string; icon: ReactNode; label: string; active: boolean }) {
   return (
-    <NavLink
-      to={to + (search ?? "")}
-      className={({ isActive }) =>
-        cn(
-          "flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
-          isActive && "bg-secondary font-medium text-foreground",
-        )
-      }
+    <Link
+      to={to}
+      aria-label={label}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+        active && "bg-secondary font-medium text-foreground",
+      )}
     >
       {icon}
       <span className="hidden lg:inline">{label}</span>
-    </NavLink>
+    </Link>
   );
 }
 
@@ -43,12 +44,13 @@ export function AppShell() {
   const loc = useLocation();
   const libsQ = useQuery({ queryKey: ["libraries"], queryFn: api.listLibraries });
   const libs = libsQ.data ?? [];
+  const libParam = new URLSearchParams(loc.search).get("lib");
 
   const account = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="gap-2 px-2">
-          <span className="grid size-7 place-items-center rounded-full bg-accent/15 text-xs font-semibold text-accent">
+        <Button variant="ghost" className="gap-2 px-2" aria-label={`账户 ${user?.username ?? ""}`}>
+          <span className="grid size-7 place-items-center rounded-full bg-accent/15 text-xs font-semibold text-accent-strong">
             {Array.from(user?.username ?? "?")[0]?.toUpperCase()}
           </span>
           <span className="hidden max-w-28 truncate text-sm lg:inline">{user?.username}</span>
@@ -67,14 +69,14 @@ export function AppShell() {
   return (
     <div className="flex h-full">
       {/* 桌面/平板侧栏;lg 全文标签,md 图标栏 */}
-      <aside className="hidden w-14 shrink-0 flex-col gap-1 border-r bg-card/60 p-2 md:flex lg:w-60">
-        <Brand compact />
+      <aside className="hidden w-14 shrink-0 flex-col gap-1 border-r bg-background/85 p-2 backdrop-blur md:flex lg:w-60">
+        <Brand />
         <nav aria-label="主导航" className="flex flex-col gap-1">
-          <NavItem to="/" icon={<BookOpen className="size-4 shrink-0" />} label="书架" />
+          <NavItem to="/" icon={<BookOpen className="size-4 shrink-0" />} label="书架" active={loc.pathname === "/" && !libParam} />
           {isAdmin && (
             <>
-              <NavItem to="/admin/libraries" icon={<FolderCog className="size-4 shrink-0" />} label="库管理" />
-              <NavItem to="/admin/users" icon={<Users className="size-4 shrink-0" />} label="用户管理" />
+              <NavItem to="/admin/libraries" icon={<FolderCog className="size-4 shrink-0" />} label="库管理" active={loc.pathname.startsWith("/admin/libraries")} />
+              <NavItem to="/admin/users" icon={<Users className="size-4 shrink-0" />} label="用户管理" active={loc.pathname.startsWith("/admin/users")} />
             </>
           )}
         </nav>
@@ -82,9 +84,8 @@ export function AppShell() {
           <div className="mt-3 hidden min-h-0 flex-1 flex-col lg:flex">
             <p className="px-3 pb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">书库</p>
             <div className="min-h-0 flex-1 overflow-y-auto">
-              <NavItem to="/" search="?lib=0" icon={<span className="size-1.5 shrink-0 rounded-full bg-muted-foreground/50" />} label="全部" />
               {libs.map((l) => (
-                <NavItem key={l.id} to="/" search={`?lib=${l.id}`} icon={<span className="size-1.5 shrink-0 rounded-full bg-accent/60" />} label={l.name} />
+                <NavItem key={l.id} to={`/?lib=${l.id}`} icon={<span className="size-1.5 shrink-0 rounded-full bg-accent/60" />} label={l.name} active={loc.pathname === "/" && libParam === String(l.id)} />
               ))}
             </div>
           </div>
@@ -98,7 +99,7 @@ export function AppShell() {
 
       <div className="flex min-w-0 flex-1 flex-col">
         {/* 移动端顶栏 */}
-        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-card/60 px-3 lg:hidden">
+        <header className="flex h-12 shrink-0 items-center justify-between border-b bg-background/85 px-3 backdrop-blur lg:hidden">
           <Brand />
           <div className="flex items-center gap-1">
             <ThemeToggle />
@@ -109,8 +110,8 @@ export function AppShell() {
           <Outlet />
         </main>
         {/* 移动端底 Tab */}
-        <nav aria-label="底部导航" className="flex h-14 shrink-0 items-stretch border-t bg-card/90 backdrop-blur md:hidden">
-          <TabItem to="/" icon={<BookOpen className="size-5" />} label="书架" search="?lib=0" />
+        <nav aria-label="底部导航" className="flex h-14 shrink-0 items-stretch border-t bg-background/85 backdrop-blur md:hidden">
+          <TabItem to="/" icon={<BookOpen className="size-5" />} label="书架" />
           {isAdmin && <TabItem to="/admin/libraries" icon={<FolderCog className="size-5" />} label="库管理" />}
           {isAdmin && <TabItem to="/admin/users" icon={<Users className="size-5" />} label="用户" />}
         </nav>
@@ -119,9 +120,9 @@ export function AppShell() {
   );
 }
 
-function TabItem({ to, icon, label, search }: { to: string; icon: ReactNode; label: string; search?: string }) {
+function TabItem({ to, icon, label }: { to: string; icon: ReactNode; label: string }) {
   return (
-    <NavLink to={to + (search ?? "")} className={({ isActive }) => cn("flex flex-col items-center justify-center gap-0.5 text-[11px] text-muted-foreground", isActive && "text-accent")}>
+    <NavLink to={to} end={to === "/"} className={({ isActive }) => cn("flex flex-col items-center justify-center gap-0.5 text-[11px] text-muted-foreground", isActive && "text-accent-strong")}>
       {icon}
       {label}
     </NavLink>

frontend/src/components/ui.ts

@@ -1,7 +1,5 @@
 import type { Format } from "../api/types";
 
-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 btnGhost =