{text}
} - {!onRetry &&{text}
} +{text}
{onRetry && ( - )} 会冻死浏览器:按章渲染,一章一个滚动块。
function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps) {
const boxRef = useRef(null);
@@ -239,7 +230,11 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
const [ci, setCi] = useState(0);
const [frac, setFrac] = useState(0);
const [nav, setNav] = useState(null);
+ const [query, setQuery] = useState("");
+ const [hits, setHits] = useState(null);
const pr = useReaderPrefs();
+ const globalDark = useGlobalDark();
+ const rd = resolveRdTheme(pr.prefs.themeMode, globalDark);
const { text, err, retry } = useFileText(book.file_url ?? "");
const chapters = useMemo(() => (text == null ? null : splitChapters(text)), [text]);
@@ -276,6 +271,15 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
if (nav === "toc") activeRow.current?.scrollIntoView({ block: "center" });
}, [nav]);
+ // 全书搜索:250ms 防抖,空 query 在同一 timer 内清空结果(避免 effect 内同步 setState)
+ useEffect(() => {
+ if (!chapters || !text) return;
+ const t = setTimeout(() => {
+ setHits(query.trim() ? searchChapters(text, chapters, query) : null);
+ }, 250);
+ return () => clearTimeout(t);
+ }, [query, chapters, text]);
+
function goChapter(i: number, intra = 0) {
if (!chapters) return;
restoreFrac.current = intra > 0 ? intra : null;
@@ -306,7 +310,7 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
const total = chapters.length > 1 ? Math.min(1, (ci + frac) / chapters.length) : frac;
return (
-
+
{chapterText(text, chapters, ci)}
{chrome.on && (
-
-
- {chapters.length > 1 && (
+ seek(v / 1000),
+ ariaLabel: "阅读进度",
+ }}
+ position={`${Math.round(total * 100)}%`}
+ left={
<>
-
- {ci + 1}/{chapters.length}
-
-
+ {chapters.length > 1 && (
+ <>
+
+ {ci + 1}/{chapters.length}
+
+
+
+
+ )}
- )}
-
+ }
+ showFont
+ onFont={pr.bumpText}
+ extra={
+ <>
+ {
+ const len = chapterText(text, chapters, h.ch).length;
+ goChapter(h.ch, Math.min(1, Math.max(0, h.pos / Math.max(1, len))));
+ setNav(null);
+ }}
+ />
+ }
toc={
/* ponytail: 目录一次渲染全部章节,数千章级书若卡顿再上虚拟列表 */
chapters.length > 1 && (
@@ -394,3 +429,62 @@ function TxtView({ book, initialLocator, initialPercent, chrome }: ReaderProps)
);
}
+
+/** 搜索面板(导航抽屉「搜索」选项卡):防抖输入 + 章节/片段结果,点击跳到命中章的大致位置。 */
+function SearchPanel({
+ query,
+ hits,
+ chapters,
+ onQuery,
+ onJump,
+}: {
+ query: string;
+ hits: SearchHit[] | null;
+ chapters: { title: string; start: number }[];
+ onQuery: (q: string) => void;
+ onJump: (h: SearchHit) => void;
+}) {
+ const inputRef = useRef(null);
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []); // autofocus 以 effect 实现,规避 jsx-a11y/no-autofocus 与打断首帧渲染
+ return (
+
+ onQuery(e.target.value)}
+ aria-label="搜索全书"
+ />
+
+ {hits == null && 输入关键词检索全书
}
+ {hits != null && hits.length === 0 && 无结果
}
+ {hits != null && hits.length > 0 && (
+
+ {hits.map((h, i) => {
+ const { before, match, after } = splitHighlight(h.snippet, h.matchStart, h.matchLen);
+ return (
+ -
+
+
+ );
+ })}
+
+ )}
+
+
+ );
+}