feat(frontend): unified reader settings bar with theme linkage (B0)
This commit is contained in:
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user