chore(frontend): tighten eslint/axe gates, remove reader waivers (B5 done, spec ② complete)

frontend/e2e/auth-shelf.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, type APIRequestContext } from "@playwright/test";
-import { adminApi, creds, ensureSampleBook } from "./helpers/api";
+import { adminApiRetry, creds, ensureSampleBook } from "./helpers/api";
 import { scanA11y } from "./helpers/axe";
 
 let admin: APIRequestContext;
@@ -7,7 +7,7 @@ let bookId: number;
 let title: string;
 
 test.beforeAll(async () => {
-  admin = await adminApi();
+  admin = await adminApiRetry();
   bookId = await ensureSampleBook(admin, "e2e");
   // 标题以 API 实况为准:后端 titleOf 可能改写文件名(下划线→空格等),书架卡按真实标题找。
   title = ((await (await admin.get(`/api/books/${bookId}`)).json()) as { title: string }).title;

frontend/e2e/helpers/api.ts

@@ -31,6 +31,18 @@ export async function adminApi(): Promise<APIRequestContext> {
   return request.newContext({ baseURL: BASE, extraHTTPHeaders: { Authorization: `Bearer ${token}` } });
 }
 
+/** adminApi 登录带 429 退避重试:三 spec 并发 worker 的登录总数可能顶到后端 1min/5 次限流门,等窗口即可;仅消耗等待预算,不改用例语义 */
+export async function adminApiRetry(): Promise<APIRequestContext> {
+  for (let i = 0; ; i++) {
+    try {
+      return await adminApi();
+    } catch (e) {
+      if (i > 20 || !(e instanceof Error) || !e.message.includes("HTTP 429")) throw e;
+      await new Promise((r) => setTimeout(r, 3000));
+    }
+  }
+}
+
 export async function ensureLibrary(ctx: APIRequestContext, name: string): Promise<number> {
   const libs = (await (await ctx.get("/api/libraries")).json()) as { id: number; name: string }[];
   const hit = libs.find((l) => l.name === name);

frontend/e2e/helpers/axe.ts

@@ -8,18 +8,10 @@ interface Waiver {
 }
 
 /**
- * critical/serious 违规的逐条豁免清单（spec S3）：
+ * critical/serious 违规的逐条豁免清单（④ 基建）：
- * 仅允许「属于将被 ② 阅读器改版重写的旧 chrome」的问题进这里，reason 必须写明归属。
+ * ② 阅读器改版后旧 chrome 重写完毕，本期清空；新增豁免必须写明 reason 并控制在一次性条件。
- * 例：{ page: "reader-chrome", rule: "color-contrast", reason: "旧 rd-* chrome 配色，② 迁移 shadcn token 后移除本豁免" }
  */
-const WAIVERS: Waiver[] = [
+const WAIVERS: Waiver[] = [];
-  {
-    page: "reader-chrome",
-    rule: "color-contrast",
-    reason:
-      "旧 chrome:Reader.tsx 头栏(书架返回钮/书名/库名/进度)用 stone-* 配色,对比不足;② 阅读器改版迁移 shadcn token 后移除本豁免",
-  },
-];
 
 export async function scanA11y(page: Page, name: string): Promise<void> {
   // 等 CSS 动画/过渡收尾(如 fx-rise 入场淡入)再扫:动画途中采样会因不透明度混色造成 contrast 误报;2s 上限兜底长动画

frontend/e2e/text-search.spec.ts

@@ -1,12 +1,12 @@
 import { expect, test, type APIRequestContext } from "@playwright/test";
-import { adminApi, creds, ensureBook, FIXTURE_TXT } from "./helpers/api";
+import { adminApiRetry, creds, ensureBook, FIXTURE_TXT } from "./helpers/api";
 import { scanA11y } from "./helpers/axe";
 
 let admin: APIRequestContext;
 let bookId: number;
 
 test.beforeAll(async () => {
-  admin = await adminApi();
+  admin = await adminApiRetry();
   // 文件名避免与 CBZ 样本书同名:fixture 用 e2e-sample-txt.txt(title=e2e-sample-txt)
   bookId = await ensureBook(admin, "e2e", "e2e-sample-txt.txt", FIXTURE_TXT);
 });
@@ -46,6 +46,17 @@ test("登录 → txt 阅读 → 全书搜索 → 跳转", async ({ page }) => {
 
   await scanA11y(page, "reader-chrome");
 
+  // 设置面板冒烟:字号/行距即时生效 + 主题卡联动阅读面(data-rd 受控)
+  const pre = page.locator(".rd-surface pre");
+  await expect(pre).toHaveCSS("font-size", "20px");
+  await page.getByRole("button", { name: "更多阅读设置" }).click();
+  await page.getByRole("button", { name: "加大字号" }).click();
+  await expect(pre).toHaveCSS("font-size", "22px");
+  await page.getByRole("button", { name: "1.8", exact: true }).click();
+  await expect(pre).toHaveAttribute("style", /line-height: 1\.8/);
+  await page.getByRole("button", { name: "夜色主题" }).click();
+  await expect(page.locator(".rd-surface").first()).toHaveAttribute("data-rd", "night");
+
   // 退出
   await page.getByRole("link", { name: "书架" }).click();
   await expect(page).toHaveURL(/\/$/);

frontend/eslint.config.js

@@ -21,25 +21,6 @@ export default tseslint.config(
       ],
     },
   },
-  {
-    // 旧阅读器 chrome 的点击区/交互元素将被 ② 阅读器改版迁入 radix 原语，
-    // 届时收严为 error；本期对存量文件降 warn（spec S1 决策）
-    files: [
-      "src/readers/**/*.tsx",
-      "src/components/Bookmarks.tsx",
-      "src/components/reader-nav.tsx",
-      "src/components/rd-slider.tsx",
-      "src/pages/Reader.tsx",
-    ],
-    rules: {
-      "jsx-a11y/click-events-have-key-events": "warn",
-      "jsx-a11y/no-static-element-interactions": "warn",
-      "jsx-a11y/no-noninteractive-element-interactions": "warn",
-      // 键盘焦点容器:CBZ/PDF 阅读器根 div 用 tabIndex={0} 接方向键翻页,
-      // 与上面三条同属 ② 改版范围（radix 原语自带焦点管理），本期随块降 warn
-      "jsx-a11y/no-noninteractive-tabindex": "warn",
-    },
-  },
   {
     files: ["e2e/**/*.ts"],
     // e2e 是 Playwright 脚本，测试工具链的动态类型用法（如 locator/fixture 包装）允许 any

frontend/src/components/format-badge.tsx

@@ -2,17 +2,20 @@ import { Badge } from "@/components/ui/badge";
 import type { Format } from "@/api/types";
 
 const CLASSES: Record<Format, string> = {
-  cbz: "bg-orange-500/15 text-orange-600 ring-orange-500/25 dark:text-orange-300",
+  cbz: "border-transparent bg-orange-500/15 text-orange-900 ring-0 dark:text-orange-300",
-  pdf: "bg-rose-500/15 text-rose-600 ring-rose-500/25 dark:text-rose-300",
+  pdf: "border-transparent bg-rose-500/15 text-rose-900 ring-0 dark:text-rose-300",
-  epub: "bg-sky-500/15 text-sky-600 ring-sky-500/25 dark:text-sky-300",
+  epub: "border-transparent bg-sky-500/15 text-sky-900 ring-0 dark:text-sky-300",
-  txt: "bg-emerald-500/15 text-emerald-600 ring-emerald-500/25 dark:text-emerald-300",
+  txt: "border-transparent bg-emerald-500/15 text-emerald-900 ring-0 dark:text-emerald-300",
-  md: "bg-teal-500/15 text-teal-600 ring-teal-600/25 dark:text-teal-300",
+  md: "border-transparent bg-teal-500/15 text-teal-900 ring-0 dark:text-teal-300",
 };
 
 /** 格式徽章:按类型着色,色彩之外始终伴随文字,不依赖颜色单独传义(承接旧 ui.ts formatBadge)。 */
 export function FormatBadge({ fmt, className }: { fmt: Format; className?: string }) {
   return (
-    <Badge variant="outline" className={`text-[10px] uppercase tracking-wide ${CLASSES[fmt]} ${className ?? ""}`}>
+    <Badge
+      variant="outline"
+      className={`text-[10px] font-semibold uppercase tracking-wide ${CLASSES[fmt]} ${className ?? ""}`}
+    >
       {fmt}
     </Badge>
   );

frontend/src/components/reader-settings.tsx

@@ -3,7 +3,15 @@ import { useState, type ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { useGlobalDark } from "@/components/theme";
-import { RD_THEMES, RD_THEME_LABEL, FONT_SIZES, resolveRdTheme, useReaderPrefs, type RdTheme } from "@/lib/readerPrefs";
+import {
+  RD_THEMES,
+  RD_THEME_LABEL,
+  FONT_SIZES,
+  resolveRdTheme,
+  useReaderPrefs,
+  type RdTheme,
+  type ReaderPrefs,
+} from "@/lib/readerPrefs";
 
 export interface ReaderSettingsProps {
   /** 进度滑条：value/max 页或千分比由调用方定，onChange 收整数；EPUB 无全局分数故可省 */
@@ -16,6 +24,11 @@ export interface ReaderSettingsProps {
   showFont?: boolean;
   /** 字号调节走哪一档（text=bumpText / epub=bumpEpub）；未传时不渲染 A−/A+ */
   onFont?: (d: number) => void;
+  /** 当前字号档位（用于 A−/A+ 边界禁用）；不传按文本框位 */
+  fontIdx?: number;
+  /** 受控主题：传入时用调用方状态，保证阅读面 data-rd 与设置栏同步（不传则组件内自持） */
+  themeMode?: ReaderPrefs["themeMode"];
+  onThemeMode?: (m: ReaderPrefs["themeMode"]) => void;
   /** 「更多设置」展开区内容（按格式给：CBZ 翻页/RTL/连读/预读；Text 行距/边距；EPUB 字号/行距/边距） */
   extra?: ReactNode;
 }
@@ -24,10 +37,23 @@ export interface ReaderSettingsProps {
 const SWATCH: Record<RdTheme, string> = { paper: "#faf8f4", sepia: "#f0e6d2", night: "#171512" };
 
 /** 统一阅读设置栏：常驻行 = 进度滑条 + 位置 + 左区 + 主题卡（含跟随全局）+ A−/A+；「更多设置」展开区按格式给。 */
-export function ReaderSettings({ slider, position, left, showFont = false, onFont, extra }: ReaderSettingsProps) {
+export function ReaderSettings({
-  const pr = useReaderPrefs();
+  slider,
+  position,
+  left,
+  showFont = false,
+  onFont,
+  fontIdx,
+  themeMode,
+  onThemeMode,
+  extra,
+}: ReaderSettingsProps) {
+  const internal = useReaderPrefs();
+  // 主题受控:调用方给状态时用调用方(阅读面 data-rd 联动);否则退回组件内自持(独立使用/测试)
+  const mode = themeMode ?? internal.prefs.themeMode;
+  const setMode = onThemeMode ?? internal.setThemeMode;
   const globalDark = useGlobalDark();
-  const rd = resolveRdTheme(pr.prefs.themeMode, globalDark);
+  const rd = resolveRdTheme(mode, globalDark);
   const [open, setOpen] = useState(false);
 
   return (
@@ -47,8 +73,8 @@ export function ReaderSettings({ slider, position, left, showFont = false, onFon
             <button
               key={t}
               aria-label={`${RD_THEME_LABEL[t]}色主题`}
-              aria-pressed={pr.prefs.themeMode === t}
+              aria-pressed={mode === t}
-              onClick={() => pr.setThemeMode(t)}
+              onClick={() => setMode(t)}
               className="h-5 w-5 shrink-0 rounded-full transition-transform hover:scale-110"
               style={{
                 background: SWATCH[t],
@@ -62,9 +88,9 @@ export function ReaderSettings({ slider, position, left, showFont = false, onFon
           <Button
             variant="ghost"
             size="xs"
-            aria-pressed={pr.prefs.themeMode === "auto"}
+            aria-pressed={mode === "auto"}
             className="text-muted-foreground"
-            onClick={() => pr.setThemeMode("auto")}
+            onClick={() => setMode("auto")}
           >
             跟随全局
           </Button>
@@ -76,7 +102,7 @@ export function ReaderSettings({ slider, position, left, showFont = false, onFon
                 variant="ghost"
                 size="icon-xs"
                 aria-label="减小字号"
-                disabled={pr.prefs.text.sizeIdx === 0}
+                disabled={(fontIdx ?? internal.prefs.text.sizeIdx) === 0}
                 onClick={() => onFont(-1)}
               >
                 A−
@@ -85,7 +111,7 @@ export function ReaderSettings({ slider, position, left, showFont = false, onFon
                 variant="ghost"
                 size="icon-xs"
                 aria-label="加大字号"
-                disabled={pr.prefs.text.sizeIdx === FONT_SIZES.length - 1}
+                disabled={(fontIdx ?? internal.prefs.text.sizeIdx) === FONT_SIZES.length - 1}
                 onClick={() => onFont(1)}
               >
                 A+

frontend/src/components/ui/tabs.tsx

@@ -10,10 +10,7 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
+      className={cn("inline-flex w-fit items-center justify-center rounded-lg bg-muted p-1-foreground", className)}
-        "inline-flex w-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-        className,
-      )}
       {...props}
     />
   );
@@ -24,7 +21,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-foreground text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

frontend/src/readers/CbzReader.tsx

@@ -331,7 +331,9 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
   }
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- 根容器仅接键盘翻页(含 RTL 方向翻转);交互语义由 aria-label 说明
     <div
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- 根容器聚焦以接方向键翻页;「滚动区可聚焦」通行做法
       tabIndex={0}
       aria-label="漫画阅读器,点按左右两侧翻屏,点按中间显示工具栏"
       className="relative h-full"
@@ -368,9 +370,10 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
           onTurnHook={pvTurn}
         />
       ) : (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- 手势区(两侧翻屏/中间收放 chrome);键盘翻页由根容器统一提供
         <div
           ref={attachBox}
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- 滚动容器须可聚焦(axe scrollable-region-focusable,键盘滚动可达);div 无交互语义属滚动区可聚焦的通行做法
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- 滚动容器须可聚焦(axe scrollable-region-focusable,键盘滚动可达);「滚动区可聚焦」通行做法
           tabIndex={0}
           onScroll={onScroll}
           onClick={onZoneClick}
@@ -423,6 +426,8 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
       {chrome.on ? (
         <div className="absolute inset-x-0 bottom-0 z-20">
           <ReaderSettings
+            themeMode={pr.prefs.themeMode}
+            onThemeMode={pr.setThemeMode}
             slider={{
               value: scrub ?? cur,
               max: Math.max(0, count - 1),
@@ -701,14 +706,14 @@ function PageView({
 
   const pages = spreadPages(page0, win.end, rtl);
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- 手势区(两侧翻页/中间收放 chrome);键盘翻页由外层根容器统一提供
     <div
       ref={rootRef}
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- 页模式容器须可聚焦以接键盘翻页;与长卷滚动容器同一理由
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- 容器可聚焦以接键盘翻页;与长卷滚动容器同一「滚动区可聚焦」理由
       tabIndex={0}
       aria-label="漫画页阅读视图"
       className="relative h-full cursor-pointer select-none overflow-hidden"
       style={{ background: "var(--rd-bg)", color: "var(--rd-fg)" }}
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- 手势区(两侧翻页/中间收放 chrome);键盘翻页由根容器 onKeyDown 提供
       onClick={onZone}
     >
       {count < 1 || winViews < 1 ? null : showEndCard ? (

frontend/src/readers/EpubReader.tsx

@@ -144,6 +144,8 @@ export default function EpubReader({ book, initialLocator, initialPercent }: Omi
         )}
       </div>
       <ReaderSettings
+        themeMode={pr.prefs.themeMode}
+        onThemeMode={pr.setThemeMode}
         left={
           <>
             <Button variant="ghost" size="sm" className="gap-0.5" onClick={() => rendRef.current?.prev()}>
@@ -166,6 +168,7 @@ export default function EpubReader({ book, initialLocator, initialPercent }: Omi
         }
         showFont
         onFont={pr.bumpEpub}
+        fontIdx={pr.prefs.epub.sizeIdx}
         extra={
           <>
             <FontSizeRow pr={pr} />

frontend/src/readers/PdfReader.tsx

@@ -137,7 +137,9 @@ export default function PdfReader({ book, initialLocator, initialPercent }: Read
   if (num === 0) return <div className="text-muted-foreground grid h-full place-items-center">PDF 加载中…</div>;
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- 根容器接键盘翻页;交互语义由 aria-label 说明
     <div
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- 根容器聚焦以接方向键翻页;「滚动区可聚焦」通行做法
       tabIndex={0}
       onKeyDown={onKey}
       aria-label="PDF 阅读器,可用左右方向键翻页"

frontend/src/readers/TextReader.tsx

@@ -122,6 +122,7 @@ function MdView({ book, initialLocator, initialPercent, chrome }: ReaderProps) {
   if (text == null) return <LoadState text="正文加载中…" />;
   return (
     <div className="rd-surface relative flex h-full flex-col" data-rd={rd}>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- 点正文唤出/收起工具栏的手势区;正文滚轮/拖选不涉及键盘操作 */}
       <div
         ref={boxRef}
         onScroll={onScroll}
@@ -136,6 +137,8 @@ function MdView({ book, initialLocator, initialPercent, chrome }: ReaderProps) {
       </div>
       {chrome.on && (
         <ReaderSettings
+          themeMode={pr.prefs.themeMode}
+          onThemeMode={pr.setThemeMode}
           slider={{
             value: Math.round(frac * 1000),
             max: 1000,
@@ -157,6 +160,7 @@ function MdView({ book, initialLocator, initialPercent, chrome }: ReaderProps) {
           }
           showFont
           onFont={pr.bumpText}
+          fontIdx={pr.prefs.text.sizeIdx}
           extra={
             <>
               <LineHeightRow pr={pr} />
@@ -247,7 +251,7 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
     const rawCh = Number(initialLocator?.ch);
     if (Number.isFinite(rawCh) && rawCh >= 0 && rawCh < chapters.length) {
       targetCi.current = Math.floor(rawCh);
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- 首章渲染后按缓存 locator 落位阅读进度;ci 与下方滚动定位 effect/refs 协作,改渲染期重置属高风险重构,保守保留
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- 首章渲染后按缓存 locator 落位阅读进度:ci 落位与下方滚动定位 effect/refs 协作,生命周期与恢复进度语义同源,保留带理由
       setCi(Math.floor(rawCh));
       if (hasF) restoreFrac.current = f;
     } else if (hasF) {
@@ -311,6 +315,7 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
 
   return (
     <div className="rd-surface relative flex h-full flex-col" data-rd={rd}>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- 点正文唤出/收起工具栏的手势区;点按是唯一唤出途径,键盘用户由常驻工具条提供全部控制 */}
       <div
         ref={boxRef}
         onScroll={onScroll}
@@ -326,6 +331,8 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
       </div>
       {chrome.on && (
         <ReaderSettings
+          themeMode={pr.prefs.themeMode}
+          onThemeMode={pr.setThemeMode}
           slider={{
             value: Math.round(total * 1000),
             max: 1000,
@@ -367,6 +374,7 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
           }
           showFont
           onFont={pr.bumpText}
+          fontIdx={pr.prefs.text.sizeIdx}
           extra={
             <>
               <LineHeightRow pr={pr} />