-
{
- const v = Number(e.target.value);
+
+ {
setScrub(v);
goPage(v, false); // 拖拽中瞬移:平滑动画会被下一格打断,手感像卡顿
- }}
- onPointerUp={() => setScrub(null)}
- onPointerCancel={() => setScrub(null)}
- onBlur={() => setScrub(null)}
- className="rd-range"
- aria-label="页码跳转"
- />
-
- {(scrub ?? cur) + 1}/{count} · {Math.round((((scrub ?? cur) + 1) / Math.max(1, count)) * 100)}%
-
-
-
-
- {chapters && (
+ },
+ ariaLabel: "页码跳转",
+ }}
+ position={`${(scrub ?? cur) + 1}/${count} · ${Math.round((((scrub ?? cur) + 1) / Math.max(1, count)) * 100)}%`}
+ left={
<>
-
- {ci + 1}/{chapters.length}
-
-
+ {chapters && (
+ <>
+
+ {ci + 1}/{chapters.length}
+
+
+
上一章
+
+
+
+ )}
+
+ }
+ extra={
+ <>
+
+ {CBZ_MODES.map((m) => (
+
+ ))}
+
+ {mode !== "strip" && (
+
+
+
+ )}
+ {chapters && chapters.length >= 2 && (
+
+
+
+ )}
+ {locked && (
+
+ patchCbz({ prefetch: v })}
+ aria-label="预读章数"
+ />
+
+ )}
+
+ }
+ />
+
{cur + 1}/{count}
@@ -508,3 +560,179 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
);
}
+
+/** 设置行通用骨架:label + 右侧控件组。 */
+function SettingRow({ label, children }: { label: string; children: ReactNode }) {
+ return (
+
+ {label}
+ {children}
+
+ );
+}
+
+type Chrome = { on: boolean; toggle: () => void; show: () => void };
+
+/** 页/双页横向阅读:章锁=章末卡片止步,连读=自动进下一章;RTL 翻转翻页方向;视图配对手动按 [2i,2i+1]。 */
+function PageView({
+ count,
+ chapters,
+ locked,
+ ci,
+ setCi,
+ continuous,
+ fmt,
+ rtl,
+ mode,
+ saver,
+ chrome,
+ pvSeek,
+ onSeekDone,
+ onCur,
+ onTurnHook,
+}: {
+ count: number;
+ chapters: { title: string; start: number }[] | null;
+ locked: boolean;
+ ci: number;
+ setCi: (i: number) => void;
+ continuous: boolean;
+ fmt: string;
+ rtl: boolean;
+ mode: PageMode;
+ saver: ReturnType
;
+ chrome: Chrome;
+ pvSeek: { page: number; n: number } | null;
+ onSeekDone: () => void;
+ onCur: (p: number) => void;
+ onTurnHook: { current: ((d: number) => void) | null };
+}) {
+ // 章窗口:locked 时视图范围 = 本章页;continuous/扁平 = 全书
+ const win =
+ locked && chapters
+ ? { start: chapters[ci].start, end: ci + 1 < chapters.length ? chapters[ci + 1].start : count }
+ : { start: 0, end: count };
+ const winViews = viewCount(Math.max(0, win.end - win.start), mode);
+ const [v, setV] = useState(0);
+ const [showEndCard, setShowEndCard] = useState(false);
+ const pend = useRef(null);
+ const rootRef = useRef(null);
+ const [cw, setCw] = useState(0);
+
+ // 容器宽度(单页=宽度全用,双页=对半)
+ useEffect(() => {
+ const el = rootRef.current;
+ if (!el) return;
+ const ro = new ResizeObserver(() => setCw(el.clientWidth));
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, []);
+ const pageW = mode === "spread" ? Math.min(Math.floor(cw / 2), MAX_W) : Math.min(cw, MAX_W);
+
+ // 外部跳页(pvSeek):锁章时切章,等 ci 生效再落位(pending ref 模式,与 strip 路径同一惯性)
+ useEffect(() => {
+ if (pvSeek == null) return;
+ pend.current = pvSeek.page;
+ if (locked && chapters) setCi(chapterIndexAt(chapters, pvSeek.page));
+ onSeekDone();
+ }, [pvSeek, locked, chapters, setCi, onSeekDone]);
+ useEffect(() => {
+ if (pend.current === null || winViews === 0) return;
+ const t = pend.current;
+ pend.current = null;
+ setShowEndCard(false);
+ const at = Math.max(win.start, Math.min(win.end - 1, t));
+ setV(pageIndexToView(at - win.start, mode));
+ }, [pvSeek, ci, winViews, win.start, win.end, mode]);
+
+ const page0 = win.start + viewToPageIndex(v, mode);
+ // 当前页由 PageView 上报(供滑条/HUD/位置文本);进度随页落(与长卷路径同一 report 语义)
+ useEffect(() => {
+ onCur(page0);
+ saver.report({ page: page0 }, (page0 + 1) / count);
+ }, [page0, onCur]); // saver/report 每页一次,依赖从简(同 fetchObjectUrl 前载语义)
+
+ useEffect(() => {
+ // 相邻页预载(±2)
+ for (const p of [page0 - 2, page0 + 2])
+ if (p >= 0 && p < count) fetchObjectUrl(formatPageUrl(fmt, p)).catch(() => {});
+ }, [page0, fmt, count]);
+
+ function turn(d: number) {
+ chrome.show();
+ const fwd = rtl ? d < 0 : d > 0;
+ if (showEndCard) {
+ if (fwd) advanceChapter();
+ else {
+ setShowEndCard(false);
+ setV(winViews - 1);
+ }
+ return;
+ }
+ const nv = turnView(v, d, rtl, winViews);
+ if (nv !== v) {
+ setV(nv);
+ return;
+ }
+ if (fwd && v >= winViews - 1) {
+ // 视图尽头:章末卡片(锁章止步/全书完)或跨章
+ if (win.end >= count) setShowEndCard(true);
+ else if (locked && !continuous) setShowEndCard(true);
+ else advanceChapter();
+ }
+ }
+ function advanceChapter() {
+ if (!chapters || ci + 1 >= chapters.length) return; // 全书完:停在末页
+ setCi(ci + 1);
+ setShowEndCard(false);
+ setV(0);
+ }
+ useEffect(() => {
+ onTurnHook.current = turn;
+ return () => {
+ onTurnHook.current = null;
+ };
+ });
+
+ function onZone(e: MouseEvent) {
+ if ((e.target as HTMLElement).closest("button,input,nav,a")) return;
+ if (window.getSelection()?.toString()) return;
+ const r = e.currentTarget.getBoundingClientRect();
+ const x = (e.clientX - r.left) / r.width;
+ if (x < 0.3) turn(-1);
+ else if (x > 0.7) turn(1);
+ else chrome.toggle();
+ }
+
+ const pages = spreadPages(page0, win.end, rtl);
+ return (
+
+ {count < 1 || winViews < 1 ? null : showEndCard ? (
+
+ {win.end >= count ? (
+ — 全书完 —
+ ) : (
+
+ )}
+
+ ) : (
+
+ {pages.map((p) => (
+
{}} />
+ ))}
+
+ )}
+