feat(frontend): unified reader settings bar with theme linkage (B0)

frontend/src/components/reader-settings.test.tsx

@@ -0,0 +1,72 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { expect } from "vitest";
+import { beforeEach, describe, it } from "vitest";
+import { ReaderSettings } from "@/components/reader-settings";
+import { ThemeProvider } from "@/components/theme";
+import { DEFAULT_PREFS } from "@/lib/readerPrefs";
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+function renderSettings(props = {}) {
+  return render(
+    <ThemeProvider>
+      <ReaderSettings
+        slider={{ value: 2, max: 10, onChange: () => {}, ariaLabel: "页码跳转" }}
+        position="3/12 · 25%"
+        {...props}
+      />
+    </ThemeProvider>,
+  );
+}
+
+describe("ReaderSettings", () => {
+  it("常驻行渲染：滑条 aria-label 与位置文本", () => {
+    renderSettings();
+    expect(screen.getByRole("slider", { name: "页码跳转" })).toBeInTheDocument();
+    expect(screen.getByText("3/12 · 25%")).toBeInTheDocument();
+  });
+
+  it("主题卡点击 → localStorage 的 themeMode 变手动值", () => {
+    renderSettings();
+    fireEvent.click(screen.getByRole("button", { name: "夜色主题" }));
+    const stored = JSON.parse(localStorage.getItem("reader-prefs") ?? "{}");
+    expect(stored.themeMode).toBe("night");
+  });
+
+  it("「跟随全局」按钮存在且点击回 auto", () => {
+    renderSettings();
+    const follow = screen.getByRole("button", { name: "跟随全局" });
+    expect(follow).toBeInTheDocument();
+    expect(follow).toHaveAttribute("aria-pressed", "true");
+    fireEvent.click(screen.getByRole("button", { name: "米色主题" }));
+    expect(screen.getByRole("button", { name: "跟随全局" })).toHaveAttribute("aria-pressed", "false");
+    fireEvent.click(screen.getByRole("button", { name: "跟随全局" }));
+    const stored = JSON.parse(localStorage.getItem("reader-prefs") ?? "{}");
+    expect(stored.themeMode).toBe("auto");
+  });
+
+  it("showFont=false 时无 A−/A+", () => {
+    renderSettings({ showFont: false });
+    expect(screen.queryByRole("button", { name: "减小字号" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "加大字号" })).not.toBeInTheDocument();
+  });
+
+  it("「更多设置」展开/收起（aria-expanded 翻转、extra 可见性）", () => {
+    renderSettings({ extra: <div data-testid="extra">额外面板</div> });
+    const toggle = screen.getByRole("button", { name: "更多阅读设置" });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByTestId("extra")).not.toBeInTheDocument();
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByTestId("extra")).toBeInTheDocument();
+  });
+
+  it("showFont 时 A+ 点击 → text.sizeIdx 增加", () => {
+    renderSettings({ showFont: true });
+    fireEvent.click(screen.getByRole("button", { name: "加大字号" }));
+    const stored = JSON.parse(localStorage.getItem("reader-prefs") ?? "{}");
+    expect(stored.text.sizeIdx).toBe(DEFAULT_PREFS.text.sizeIdx + 1);
+  });
+});

frontend/src/components/reader-settings.tsx

@@ -0,0 +1,116 @@
+import { ChevronDown, ChevronUp } from "lucide-react";
+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";
+
+export interface ReaderSettingsProps {
+  /** 进度滑条：value/max 页或千分比由调用方定，onChange 收整数 */
+  slider: { value: number; max: number; onChange: (v: number) => void; ariaLabel: string };
+  /** 位置文本，如 "3/12 · 25%" */
+  position?: string;
+  /** 左半区按钮（导航/上一章/下一章等），调用方给 */
+  left?: ReactNode;
+  /** 是否显示 A−/A+ 与字号（text/epub true；cbz/pdf false） */
+  showFont?: boolean;
+  /** 「更多设置」展开区内容（按格式给：CBZ 翻页/RTL/连读/预读；Text 行距/边距；EPUB 字号/行距/边距） */
+  extra?: ReactNode;
+}
+
+/** 主题色卡样式（纸 #faf8f4 / 米 #f0e6d2 / 夜 #171512，与 --rd-bg 三值一致） */
+const SWATCH: Record<RdTheme, string> = { paper: "#faf8f4", sepia: "#f0e6d2", night: "#171512" };
+
+/** 统一阅读设置栏：常驻行 = 进度滑条 + 位置 + 左区 + 主题卡（含跟随全局）+ A−/A+；「更多设置」展开区按格式给。 */
+export function ReaderSettings({ slider, position, left, showFont = false, extra }: ReaderSettingsProps) {
+  const pr = useReaderPrefs();
+  const globalDark = useGlobalDark();
+  const rd = resolveRdTheme(pr.prefs.themeMode, globalDark);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      className="border-t bg-background/95 text-foreground backdrop-blur pt-1.5 pb-[max(0.5rem,env(safe-area-inset-bottom))]"
+      data-rd={rd}
+    >
+      <div className="flex items-center gap-2.5 px-2.5">
+        {left && <div className="flex items-center gap-1.5">{left}</div>}
+        {position && (
+          <span className="shrink-0 text-xs tabular-nums text-muted-foreground" aria-live="polite">
+            {position}
+          </span>
+        )}
+        <div className="flex items-center gap-1.5 whitespace-nowrap" role="group" aria-label="阅读主题">
+          {RD_THEMES.map((t) => (
+            <button
+              key={t}
+              aria-label={`${RD_THEME_LABEL[t]}色主题`}
+              aria-pressed={pr.prefs.themeMode === t}
+              onClick={() => pr.setThemeMode(t)}
+              className="h-5 w-5 shrink-0 rounded-full transition-transform hover:scale-110"
+              style={{
+                background: SWATCH[t],
+                boxShadow:
+                  rd === t
+                    ? "0 0 0 2px var(--rd-accent)"
+                    : "inset 0 0 0 1px color-mix(in oklab, currentColor 35%, transparent)",
+              }}
+            />
+          ))}
+          <Button
+            variant="ghost"
+            size="xs"
+            aria-pressed={pr.prefs.themeMode === "auto"}
+            className="text-muted-foreground"
+            onClick={() => pr.setThemeMode("auto")}
+          >
+            跟随全局
+          </Button>
+        </div>
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          {showFont && (
+            <>
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                aria-label="减小字号"
+                disabled={pr.prefs.text.sizeIdx === 0}
+                onClick={() => pr.bumpText(-1)}
+              >
+                A−
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                aria-label="加大字号"
+                disabled={pr.prefs.text.sizeIdx === FONT_SIZES.length - 1}
+                onClick={() => pr.bumpText(1)}
+              >
+                A+
+              </Button>
+            </>
+          )}
+          {extra && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label="更多阅读设置"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+            >
+              {open ? <ChevronUp className="size-4" /> : <ChevronDown className="size-4" />}
+            </Button>
+          )}
+        </div>
+      </div>
+      <Slider
+        className="mx-2.5 mt-2 w-[calc(100%-1.25rem)]"
+        value={[slider.value]}
+        max={slider.max}
+        onValueChange={([v]) => slider.onChange(v)}
+        aria-label={slider.ariaLabel}
+      />
+      {extra && open && <div className="px-2.5 pt-2">{extra}</div>}
+    </div>
+  );
+}

frontend/src/components/ui/slider.tsx

@@ -14,6 +14,8 @@ function Slider({
     () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
     [value, defaultValue, min, max],
   );
+  // radix 的可访问 slider 角色在 Thumb 上，aria-label 提到 Root 传不进去——改下沉到每个 Thumb。
+  const { "aria-label": ariaLabel, ...rootProps } = props;
   return (
     <SliderPrimitive.Root
       data-slot="slider"
@@ -25,7 +27,7 @@ function Slider({
         "relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className,
       )}
-      {...props}
+      {...rootProps}
     >
       <SliderPrimitive.Track
         data-slot="slider-track"
@@ -40,6 +42,7 @@ function Slider({
         <SliderPrimitive.Thumb
           key={i}
           data-slot="slider-thumb"
+          aria-label={Array.isArray(ariaLabel) ? ariaLabel[i] : ariaLabel}
           className="block size-4 shrink-0 rounded-full border border-primary/50 bg-background shadow transition-[color,box-shadow] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/50 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}