From 3178c2802fda145cccc30a0ea851c4f4f568ddc8 Mon Sep 17 00:00:00 2001
From: Fendy <xingfen.fendy@outlook.com>
Date: Tue, 8 Sep 2026 21:31:20 +0800
Subject: [PATCH] refactor(web): extract prefetch slider into reusable RdSlider
 component

---
 frontend/src/components/rd-slider.tsx | 37 +++++++++++++++++++++++++++
 frontend/src/readers/CbzReader.tsx    | 28 +++++++-------------
 2 files changed, 46 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/rd-slider.tsx

diff --git a/frontend/src/components/rd-slider.tsx b/frontend/src/components/rd-slider.tsx
new file mode 100644
index 0000000..e2f732e
--- /dev/null
+++ b/frontend/src/components/rd-slider.tsx
@@ -0,0 +1,37 @@
+/** 阅读器主题内的滑条配置项:说明 + 整数档位滑条 + 锚点刻度. */
+export function RdSlider({
+  label,
+  ariaLabel,
+  min,
+  max,
+  value,
+  onChange,
+}: {
+  label: string;
+  ariaLabel: string;
+  min: number;
+  max: number;
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div className="px-2.5 pb-1.5 pt-2">
+      <div className="mb-1 text-sm">{label}</div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={1}
+        value={value}
+        aria-label={ariaLabel}
+        className="rd-range"
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+      <div className="flex justify-between px-1 text-[10px] tabular-nums opacity-50" aria-hidden="true">
+        {Array.from({ length: max - min + 1 }, (_, i) => (
+          <span key={i}>{min + i}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/readers/CbzReader.tsx b/frontend/src/readers/CbzReader.tsx
index af69618..2d531f6 100644
--- a/frontend/src/readers/CbzReader.tsx
+++ b/frontend/src/readers/CbzReader.tsx
@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
 import { api, formatPageUrl } from "../api/client";
 import { btn } from "../components/ui";
 import { BookmarksTab } from "../components/Bookmarks";
+import { RdSlider } from "../components/rd-slider";
 import { ReaderNav, type NavTab } from "../components/reader-nav";
 import { fetchObjectUrl } from "../lib/authImage";
 import { useProgressSaver, type ReaderProps } from "../lib/useProgress";
@@ -395,25 +396,14 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
                       </DropdownMenu.ItemIndicator>
                     </DropdownMenu.CheckboxItem>
                     {locked && (
-                      <div className="px-2.5 pb-1.5 pt-2">
-                        <div className="mb-1 text-sm">预读:锁章末尾时提前挂载其后 N 章</div>
-                        <input
-                          type="range"
-                          min={0}
-                          max={3}
-                          step={1}
-                          value={prefetch}
-                          aria-label="预读章数"
-                          className="rd-range"
-                          onChange={(e) => setPrefetch(Number(e.target.value))}
-                        />
-                        <div className="flex justify-between px-1 text-[10px] tabular-nums opacity-50" aria-hidden="true">
-                          <span>0</span>
-                          <span>1</span>
-                          <span>2</span>
-                          <span>3</span>
-                        </div>
-                      </div>
+                      <RdSlider
+                        label="预读:锁章末尾时提前挂载其后 N 章"
+                        ariaLabel="预读章数"
+                        min={0}
+                        max={3}
+                        value={prefetch}
+                        onChange={setPrefetch}
+                      />
                     )}
                   </DropdownMenu.Content>
                 </DropdownMenu.Portal>