From 5f229cd8452018fcb93a0e1193a17fccc967a8b3 Mon Sep 17 00:00:00 2001
From: ZGY1999 <1051684164@qq.com>
Date: Fri, 1 May 2026 16:52:31 +0800
Subject: [PATCH 1/3] feat: add vertical scroll reading mode

---
 .../app/src/components/reader/ReaderView.tsx  | 32 ++++++++++++++-----
 .../src/components/settings/ReadSettings.tsx  | 16 ++++++++++
 .../core/src/hooks/reader/usePagination.ts    | 12 +++++--
 packages/foliate-js/paginator.js              |  9 ++++++
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/components/reader/ReaderView.tsx b/packages/app/src/components/reader/ReaderView.tsx
index b384d17e..1cfc7282 100644
--- a/packages/app/src/components/reader/ReaderView.tsx
+++ b/packages/app/src/components/reader/ReaderView.tsx
@@ -189,6 +189,7 @@ function useAutoHideControls(
   delay = 2000,
   keepVisible = false,
   isDoublePage = false,
+  clickNavigationEnabled = true,
 ) {
   const [isVisible, setIsVisible] = useState(true);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -246,6 +247,18 @@ function useAutoHideControls(
         const leftNavEnd = viewStartX + viewWidth * (isDoublePage ? 0.25 : 0.375);
         const rightNavStart = viewStartX + viewWidth * (isDoublePage ? 0.75 : 0.625);
 
+        if (!clickNavigationEnabled) {
+          setIsVisible((prev) => {
+            if (prev) {
+              clearTimer();
+              return false;
+            }
+            showAndScheduleHide();
+            return true;
+          });
+          return;
+        }
+
         if (clickScreenX > leftNavEnd && clickScreenX < rightNavStart) {
           // Middle zone: toggle toolbar
           setIsVisible((prev) => {
@@ -272,7 +285,16 @@ function useAutoHideControls(
 
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [bookKey, clearTimer, containerRef, onNext, onPrev, showAndScheduleHide, isDoublePage]);
+  }, [
+    bookKey,
+    clearTimer,
+    clickNavigationEnabled,
+    containerRef,
+    onNext,
+    onPrev,
+    showAndScheduleHide,
+    isDoublePage,
+  ]);
 
   // Mouse enter/leave handlers for toolbar area
   const handleMouseEnter = useCallback(() => {
@@ -321,7 +343,6 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
   const appTab = useAppStore((s) => s.tabs.find((t) => t.id === tabId));
   const closeAppTab = useAppStore((s) => s.removeTab);
   const viewSettings = useSettingsStore((s) => s.readSettings);
-  const updateReadSettings = useSettingsStore((s) => s.updateReadSettings);
   const setProgress = useReaderStore((s) => s.setProgress);
   const setChapter = useReaderStore((s) => s.setChapter);
   const setSelectedText = useReaderStore((s) => s.setSelectedText);
@@ -804,6 +825,7 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     2000,
     keepControlsVisible,
     (viewSettings.paginatedLayout ?? "double") === "double",
+    viewSettings.viewMode !== "scroll",
   );
   const toolbarVisible = controlsVisible || isToolbarPinned;
   const readingHeaderTitle = (readerTab?.chapterTitle || book?.meta.title || "").trim();
@@ -860,12 +882,6 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     }, 5000),
   ).current;
 
-  useEffect(() => {
-    if (viewSettings.viewMode === "scroll") {
-      updateReadSettings({ viewMode: "paginated" });
-    }
-  }, [viewSettings.viewMode, updateReadSettings]);
-
   // --- Load book on mount ---
   useEffect(() => {
     if (!book?.filePath || isInitializedRef.current) return;
diff --git a/packages/app/src/components/settings/ReadSettings.tsx b/packages/app/src/components/settings/ReadSettings.tsx
index 9902d620..0aa59268 100644
--- a/packages/app/src/components/settings/ReadSettings.tsx
+++ b/packages/app/src/components/settings/ReadSettings.tsx
@@ -38,6 +38,22 @@ export function ReadSettingsPanel() {
         <p className="mb-4 text-xs text-muted-foreground/60">{t("settings.readingNotice")}</p>
 
         <div className="space-y-5">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-foreground">{t("settings.viewMode")}</span>
+            <Select
+              value={readSettings.viewMode ?? "paginated"}
+              onValueChange={(v) => updateReadSettings({ viewMode: v as "paginated" | "scroll" })}
+            >
+              <SelectTrigger className="w-[140px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="paginated">{t("settings.paginated")}</SelectItem>
+                <SelectItem value="scroll">{t("settings.scroll")}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
           <div className="flex items-center justify-between">
             <span className="text-sm text-foreground">{t("settings.paginatedLayout")}</span>
             <Select
diff --git a/packages/core/src/hooks/reader/usePagination.ts b/packages/core/src/hooks/reader/usePagination.ts
index 9584e50c..c88d05e5 100644
--- a/packages/core/src/hooks/reader/usePagination.ts
+++ b/packages/core/src/hooks/reader/usePagination.ts
@@ -24,12 +24,17 @@ export function usePagination({ bookKey, viewRef, containerRef }: UsePaginationO
   const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lockTime = useRef(0);
 
+  const isRendererScrolled = useCallback(
+    () => Boolean(viewRef.current?.renderer?.scrolled),
+    [viewRef],
+  );
+
   const handleWheel = useCallback(
     (deltaY: number, deltaX?: number) => {
       const view = viewRef.current;
       if (!view) return;
 
-      if (view.renderer?.scrolled) return;
+      if (isRendererScrolled()) return;
 
       const absDY = Math.abs(deltaY);
       const absDX = Math.abs(deltaX || 0);
@@ -69,7 +74,7 @@ export function usePagination({ bookKey, viewRef, containerRef }: UsePaginationO
         wheelLocked.current = false;
       }, WHEEL_IDLE_MS);
     },
-    [viewRef],
+    [isRendererScrolled, viewRef],
   );
 
   useEffect(() => {
@@ -100,13 +105,14 @@ export function usePagination({ bookKey, viewRef, containerRef }: UsePaginationO
     if (!container) return;
 
     const onWheel = (e: WheelEvent) => {
+      if (isRendererScrolled()) return;
       e.preventDefault();
       handleWheel(e.deltaY, e.deltaX);
     };
 
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => container.removeEventListener("wheel", onWheel);
-  }, [containerRef, handleWheel]);
+  }, [containerRef, handleWheel, isRendererScrolled]);
 
   return { handleWheel };
 }
diff --git a/packages/foliate-js/paginator.js b/packages/foliate-js/paginator.js
index d3afc9fd..c2ce7a99 100644
--- a/packages/foliate-js/paginator.js
+++ b/packages/foliate-js/paginator.js
@@ -799,6 +799,15 @@ export class Paginator extends HTMLElement {
     return Math.round(this.viewSize / this.size);
   }
   scrollBy(dx, dy) {
+    if (this.scrolled) {
+      const delta = this.#vertical ? dx : dy;
+      const element = this.#container;
+      element[this.scrollProp] += delta;
+      const viewSize = this.viewSize;
+      if (viewSize > 0) this.#anchor = this.start / viewSize;
+      return;
+    }
+
     const delta = this.#vertical ? dy : dx;
     const element = this.#container;
     const { scrollProp } = this;

From 46963d10f964b5d7c6c5d9d48a0f688857759c9e Mon Sep 17 00:00:00 2001
From: ZGY1999 <1051684164@qq.com>
Date: Sat, 2 May 2026 12:55:25 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AF=AD=E9=9F=B3?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E6=96=87=E6=9C=AC=E4=B8=8D=E8=B7=9F=E9=9A=8F?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复语音播放文本不跟随高亮显示问题
---
 .../src/components/reader/FoliateViewer.tsx   | 186 +++++++++++++++++-
 .../app/src/components/reader/ReaderView.tsx  | 101 ++++++++--
 packages/core/src/reader/index.ts             |   4 +
 packages/core/src/reader/tts-segments.test.ts |  24 +++
 packages/core/src/reader/tts-segments.ts      |  55 ++++++
 5 files changed, 341 insertions(+), 29 deletions(-)
 create mode 100644 packages/core/src/reader/tts-segments.test.ts
 create mode 100644 packages/core/src/reader/tts-segments.ts

diff --git a/packages/app/src/components/reader/FoliateViewer.tsx b/packages/app/src/components/reader/FoliateViewer.tsx
index 0f5ddac7..a78641e9 100644
--- a/packages/app/src/components/reader/FoliateViewer.tsx
+++ b/packages/app/src/components/reader/FoliateViewer.tsx
@@ -12,6 +12,7 @@ import type {
   ChapterParagraph,
   ChapterTranslationResult,
 } from "@readany/core/translation/chapter-translator";
+import { splitTextIntoTTSSegmentRanges } from "@readany/core/reader";
 import type { ViewSettings } from "@readany/core/types";
 import { Overlayer } from "foliate-js/overlayer.js";
 import { marked } from "marked";
@@ -255,6 +256,7 @@ export interface FoliateViewerHandle {
   /** Get visible text on the current page for TTS */
   getVisibleText: () => string;
   getVisibleTTSSegments: (alignCfi?: string | null) => Promise<TTSSegmentDetail[]>;
+  getSelectionTTSSegments: (selection: BookSelection) => Promise<TTSSegmentDetail[]>;
   getTTSSegmentContext: (
     cfi: string,
     before?: number,
@@ -715,6 +717,159 @@ export const FoliateViewer = forwardRef<FoliateViewerHandle, FoliateViewerProps>
       [ensureDesktopTTS],
     );
 
+    const getSelectionTTSSegments = useCallback(
+      async (selection: BookSelection): Promise<TTSSegmentDetail[]> => {
+        const view = viewRef.current;
+        const range = selection.range;
+        const fallbackText = normalizeTTSSegmentText(selection.text);
+        const fallbackCfi = selection.cfi || "";
+        const fallback = () =>
+          fallbackText && fallbackCfi ? [{ text: fallbackText, cfi: fallbackCfi }] : [];
+        if (!view || !range || range.collapsed) return fallback();
+
+        await ensureDesktopTTS();
+
+        const doc =
+          range.startContainer.nodeType === Node.DOCUMENT_NODE
+            ? (range.startContainer as Document)
+            : range.startContainer.ownerDocument;
+        if (!doc) return fallback();
+        const contents = view.renderer?.getContents?.() ?? [];
+        const content = contents.find(
+          (item: { doc?: Document; index?: number }) => item.doc === doc,
+        );
+        const sectionIndex = selection.chapterIndex ?? content?.index ?? 0;
+        const lang =
+          doc.documentElement.lang ||
+          doc.documentElement.getAttribute("xml:lang") ||
+          doc.body.lang ||
+          navigator.language ||
+          "en";
+        const root =
+          range.commonAncestorContainer.nodeType === Node.TEXT_NODE
+            ? range.commonAncestorContainer.parentElement
+            : range.commonAncestorContainer;
+        if (!root) return fallback();
+
+        const positionedNodes: Array<{
+          node: Text;
+          start: number;
+          end: number;
+          nodeStart: number;
+        }> = [];
+        let selectionText = "";
+        const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+          acceptNode: (node) => {
+            if (!node.nodeValue?.trim()) return NodeFilter.FILTER_SKIP;
+            const parent = (node as Text).parentElement;
+            if (!parent) return NodeFilter.FILTER_ACCEPT;
+            const tag = parent.tagName.toLowerCase();
+            if (tag === "script" || tag === "style") return NodeFilter.FILTER_REJECT;
+            if (parent.closest(".readany-translation")) return NodeFilter.FILTER_REJECT;
+
+            const nodeRange = doc.createRange();
+            try {
+              nodeRange.selectNodeContents(node);
+              if (range.compareBoundaryPoints(Range.END_TO_START, nodeRange) <= 0) {
+                return NodeFilter.FILTER_REJECT;
+              }
+              if (range.compareBoundaryPoints(Range.START_TO_END, nodeRange) >= 0) {
+                return NodeFilter.FILTER_REJECT;
+              }
+              return NodeFilter.FILTER_ACCEPT;
+            } catch {
+              return NodeFilter.FILTER_REJECT;
+            } finally {
+              nodeRange.detach?.();
+            }
+          },
+        });
+
+        for (
+          let textNode = walker.nextNode() as Text | null;
+          textNode;
+          textNode = walker.nextNode() as Text | null
+        ) {
+          const sourceText = textNode.nodeValue || "";
+          const startOffset =
+            textNode === range.startContainer
+              ? Math.max(0, Math.min(sourceText.length, range.startOffset))
+              : 0;
+          const endOffset =
+            textNode === range.endContainer
+              ? Math.max(0, Math.min(sourceText.length, range.endOffset))
+              : sourceText.length;
+          if (endOffset <= startOffset) continue;
+
+          const text = sourceText.slice(startOffset, endOffset);
+          const start = selectionText.length;
+          selectionText += text;
+          positionedNodes.push({
+            node: textNode,
+            start,
+            end: selectionText.length,
+            nodeStart: startOffset,
+          });
+        }
+
+        if (!selectionText.trim() || positionedNodes.length === 0) return fallback();
+
+        const resolvePosition = (absoluteOffset: number, isEnd: boolean) => {
+          for (const item of positionedNodes) {
+            if (absoluteOffset < item.end || (isEnd && absoluteOffset <= item.end)) {
+              return {
+                node: item.node,
+                offset: Math.max(
+                  0,
+                  Math.min(
+                    item.node.nodeValue?.length ?? 0,
+                    item.nodeStart + absoluteOffset - item.start,
+                  ),
+                ),
+              };
+            }
+          }
+          const last = positionedNodes[positionedNodes.length - 1];
+          return { node: last.node, offset: last.node.nodeValue?.length ?? 0 };
+        };
+
+        const seen = new Set<string>();
+        const segments: TTSSegmentDetail[] = [];
+        for (const segment of splitTextIntoTTSSegmentRanges(selectionText, lang)) {
+          const startPos = resolvePosition(segment.start, false);
+          const endPos = resolvePosition(segment.end, true);
+          if (!startPos || !endPos) continue;
+
+          const segmentRange = doc.createRange();
+          try {
+            segmentRange.setStart(startPos.node, startPos.offset);
+            segmentRange.setEnd(endPos.node, endPos.offset);
+            const cfi = view.getCFI(sectionIndex, segmentRange);
+            const identity = getTTSSegmentIdentity(cfi, segment.text);
+            if (cfi && !seen.has(identity)) {
+              seen.add(identity);
+              segments.push({ text: segment.text, cfi });
+            }
+          } catch {
+            // skip segment if CFI resolution fails
+          } finally {
+            segmentRange.detach?.();
+          }
+        }
+
+        if (segments.length > 0) {
+          console.log("[FoliateViewer][TTS] selectionTTSSegments", {
+            count: segments.length,
+            firstText: segments[0]?.text || null,
+          });
+          return segments;
+        }
+
+        return fallback();
+      },
+      [ensureDesktopTTS],
+    );
+
     const getTTSSegmentContext = useCallback(
       async (
         cfi: string,
@@ -979,6 +1134,7 @@ export const FoliateViewer = forwardRef<FoliateViewerHandle, FoliateViewerProps>
           }
         },
         getVisibleTTSSegments,
+        getSelectionTTSSegments,
         getTTSSegmentContext,
         setTTSHighlight: async (cfi: string | null, color?: string) => {
           ttsHighlightStateRef.current = {
@@ -1198,7 +1354,7 @@ export const FoliateViewer = forwardRef<FoliateViewerHandle, FoliateViewerProps>
               : undefined,
         }));
       },
-      [clearTTSHighlight, ensureDesktopTTS, getVisibleTTSSegments],
+      [clearTTSHighlight, ensureDesktopTTS, getSelectionTTSSegments, getVisibleTTSSegments],
     );
 
     // --- Section load handler ---
@@ -1760,12 +1916,23 @@ export const FoliateViewer = forwardRef<FoliateViewerHandle, FoliateViewerProps>
       if (!view) return null;
 
       const contents = view.renderer?.getContents?.();
-      if (!contents?.[0]?.doc) return null;
-
-      const doc = contents[0].doc as Document;
-      const sel = doc.getSelection();
-      const range = getSelectionRange(sel);
-      if (!range) return null;
+      if (!contents?.length) return null;
+
+      let doc: Document | null = null;
+      let sel: Selection | null = null;
+      let range: Range | null = null;
+      for (const content of contents) {
+        const contentDoc = content?.doc as Document | undefined;
+        const contentSelection = contentDoc?.getSelection();
+        const contentRange = getSelectionRange(contentSelection);
+        if (contentDoc && contentSelection && contentRange) {
+          doc = contentDoc;
+          sel = contentSelection;
+          range = contentRange;
+          break;
+        }
+      }
+      if (!doc || !sel || !range) return null;
       const text = (sel?.toString() || "").trim();
       if (!text) return null;
 
@@ -1773,7 +1940,10 @@ export const FoliateViewer = forwardRef<FoliateViewerHandle, FoliateViewerProps>
       let cfi: string | undefined;
       let chapterIndex: number | undefined;
       try {
-        const index = contents[0].index;
+        const rangeDoc = range.startContainer.ownerDocument;
+        const content =
+          contents.find((item: { doc?: Document }) => item.doc === rangeDoc) ?? contents[0];
+        const index = content.index;
         if (index !== undefined) {
           cfi = view.getCFI(index, range);
           chapterIndex = index;
diff --git a/packages/app/src/components/reader/ReaderView.tsx b/packages/app/src/components/reader/ReaderView.tsx
index 1cfc7282..02473fd0 100644
--- a/packages/app/src/components/reader/ReaderView.tsx
+++ b/packages/app/src/components/reader/ReaderView.tsx
@@ -1259,7 +1259,7 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     (sel: BookSelection | null) => {
       setSelection(sel);
       if (sel) {
-        setSelectedText(tabId, sel.text, null);
+        setSelectedText(tabId, sel.text, sel.cfi ?? null);
         if (sel.rects.length > 0) {
           // SelectionPopover uses absolute positioning relative to containerRef
           const containerRect = containerRef.current?.getBoundingClientRect();
@@ -1577,20 +1577,27 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
       void foliateRef.current?.setTTSHighlight(null);
       return;
     }
-    if (ttsSourceKind !== "page") {
+    if (ttsSourceKind !== "page" && ttsSourceKind !== "selection") {
       void foliateRef.current?.setTTSHighlight(null);
       return;
     }
     void foliateRef.current?.setTTSHighlight(
-      currentTTSSegment?.cfi || null,
+      currentTTSSegment?.cfi || (ttsSourceKind === "selection" ? ttsCurrentLocationCfi : null),
       "rgba(96, 165, 250, 0.35)",
     );
-  }, [bookId, currentTTSSegment?.cfi, ttsCurrentBookId, ttsPlayState, ttsSourceKind]);
+  }, [
+    bookId,
+    currentTTSSegment?.cfi,
+    ttsCurrentBookId,
+    ttsCurrentLocationCfi,
+    ttsPlayState,
+    ttsSourceKind,
+  ]);
 
   useEffect(() => {
     if (ttsCurrentBookId !== bookId) return;
     const targetCfi =
-      ttsSourceKind === "page" &&
+      (ttsSourceKind === "page" || ttsSourceKind === "selection") &&
       (ttsPlayState === "playing" || ttsPlayState === "paused" || ttsPlayState === "loading")
         ? currentTTSSegment?.cfi || ttsCurrentLocationCfi || null
         : readerTab?.currentCfi;
@@ -1878,27 +1885,47 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
   ]);
 
   const startSelectionTTS = useCallback(
-    (text: string) => {
+    async (text: string, selectionForCfi?: BookSelection | null) => {
       const normalized = text.trim();
       if (!normalized) return;
-      const segments = splitNarrationText(normalized)
-        .filter(Boolean)
-        .map((segmentText) => ({ text: segmentText, cfi: null }));
+      const selectionSegments =
+        selectionForCfi && foliateRef.current
+          ? await foliateRef.current.getSelectionTTSSegments(selectionForCfi)
+          : [];
+      const fallbackCfi =
+        selectionForCfi?.cfi ||
+        readerTab?.selectionCfi ||
+        ttsCurrentLocationCfi ||
+        readerTab?.currentCfi ||
+        null;
+      const segments = selectionSegments.length
+        ? selectionSegments.map((segment) => ({
+            text: segment.text.trim(),
+            cfi: segment.cfi || fallbackCfi,
+          }))
+        : splitNarrationText(normalized)
+            .filter(Boolean)
+            .map((segmentText) => ({ text: segmentText, cfi: fallbackCfi }));
+      const playableSegments = segments.filter((segment) => segment.text.length > 0);
       setTtsSourceKind("selection");
       setTtsContinuousEnabled(false);
       setTtsLastText(normalized);
-      setTtsSegments(segments);
+      setTtsSegments(playableSegments);
       setTtsPrevPageSegments([]);
       setTtsFutureSegments([]);
       ttsLastTextRef.current = normalized;
-      ttsSegmentsRef.current = segments;
+      ttsSegmentsRef.current = playableSegments;
       ttsFutureSegmentsRef.current = [];
       ttsContinuousRef.current = false;
       ttsSetOnEnd(null);
       ttsSetCurrentBook(book?.meta.title ?? "", readerTab?.chapterTitle ?? "", bookId);
-      ttsSetCurrentLocation(readerTab?.selectionCfi || readerTab?.currentCfi || "");
+      ttsSetCurrentLocation(playableSegments[0]?.cfi || fallbackCfi || "");
       setShowTTS(true);
-      ttsPlay(segments.length > 0 ? segments.map((segment) => segment.text) : normalized);
+      ttsPlay(
+        playableSegments.length > 0
+          ? playableSegments.map((segment) => segment.text)
+          : normalized,
+      );
     },
     [
       ttsPlay,
@@ -1909,6 +1936,7 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
       readerTab?.chapterTitle,
       readerTab?.selectionCfi,
       readerTab?.currentCfi,
+      ttsCurrentLocationCfi,
       bookId,
     ],
   );
@@ -2065,17 +2093,31 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
 
   // TTS: speak selected text (no auto page-turn)
   const handleSpeakSelection = useCallback(() => {
-    if (selection?.text) {
-      startSelectionTTS(selection.text);
+    const currentSelection = selection;
+    if (currentSelection?.text) {
+      void startSelectionTTS(currentSelection.text, currentSelection);
     }
     setSelection(null);
   }, [selection, startSelectionTTS]);
 
   const handleTTSReplay = useCallback(async () => {
     if (ttsSourceKind === "selection") {
-      const text = (ttsCurrentText || ttsLastText).trim();
+      const replaySegments = ttsSegmentsRef.current.filter((segment) => segment.text.trim());
+      if (replaySegments.length > 0) {
+        const text = replaySegments
+          .map((segment) => segment.text)
+          .join(" ")
+          .trim();
+        setTtsSegments(replaySegments);
+        setTtsLastText(text);
+        ttsLastTextRef.current = text;
+        ttsSetCurrentLocation(replaySegments[0]?.cfi || ttsCurrentLocationCfi || "");
+        ttsPlay(replaySegments.map((segment) => segment.text));
+        return;
+      }
+      const text = ttsLastText.trim();
       if (text) {
-        startSelectionTTS(text);
+        await startSelectionTTS(text);
       }
       return;
     }
@@ -2085,8 +2127,10 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     startPageTTS,
     startSelectionTTS,
     ttsContinuousEnabled,
-    ttsCurrentText,
+    ttsCurrentLocationCfi,
     ttsLastText,
+    ttsPlay,
+    ttsSetCurrentLocation,
     ttsSourceKind,
   ]);
 
@@ -2112,9 +2156,22 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     }
 
     if (ttsSourceKind === "selection") {
-      const text = (ttsCurrentText || ttsLastText).trim();
+      const replaySegments = ttsSegmentsRef.current.filter((segment) => segment.text.trim());
+      if (replaySegments.length > 0) {
+        const text = replaySegments
+          .map((segment) => segment.text)
+          .join(" ")
+          .trim();
+        setTtsSegments(replaySegments);
+        setTtsLastText(text);
+        ttsLastTextRef.current = text;
+        ttsSetCurrentLocation(replaySegments[0]?.cfi || ttsCurrentLocationCfi || "");
+        ttsPlay(replaySegments.map((segment) => segment.text));
+        return;
+      }
+      const text = ttsLastText.trim();
       if (text) {
-        startSelectionTTS(text);
+        await startSelectionTTS(text);
       }
       return;
     }
@@ -2124,11 +2181,13 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
     startPageTTS,
     startSelectionTTS,
     ttsContinuousEnabled,
-    ttsCurrentText,
+    ttsCurrentLocationCfi,
     ttsLastText,
     ttsPause,
+    ttsPlay,
     ttsPlayState,
     ttsResume,
+    ttsSetCurrentLocation,
     ttsSourceKind,
   ]);
 
diff --git a/packages/core/src/reader/index.ts b/packages/core/src/reader/index.ts
index 6c7bd09f..bec746bc 100644
--- a/packages/core/src/reader/index.ts
+++ b/packages/core/src/reader/index.ts
@@ -25,3 +25,7 @@ export type { SessionEvent, SessionDetector } from "./session-detector";
 // Annotation mutations
 export { createSelectionNoteMutation } from "./selection-note";
 export type { SelectionNoteMutation, SelectionNoteMutationInput } from "./selection-note";
+
+// TTS
+export { splitTextIntoTTSSegmentRanges } from "./tts-segments";
+export type { TTSTextSegmentRange } from "./tts-segments";
diff --git a/packages/core/src/reader/tts-segments.test.ts b/packages/core/src/reader/tts-segments.test.ts
new file mode 100644
index 00000000..f007b544
--- /dev/null
+++ b/packages/core/src/reader/tts-segments.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+
+import { splitTextIntoTTSSegmentRanges } from "./tts-segments";
+
+describe("splitTextIntoTTSSegmentRanges", () => {
+  it("keeps source offsets while trimming sentence whitespace", () => {
+    const segments = splitTextIntoTTSSegmentRanges("  First sentence.  Second sentence!  ", "en");
+
+    expect(segments).toEqual([
+      { text: "First sentence.", start: 2, end: 17 },
+      { text: "Second sentence!", start: 19, end: 35 },
+    ]);
+  });
+
+  it("supports Chinese punctuation", () => {
+    const segments = splitTextIntoTTSSegmentRanges("第一句。第二句！第三句？", "zh-CN");
+
+    expect(segments).toEqual([
+      { text: "第一句。", start: 0, end: 4 },
+      { text: "第二句！", start: 4, end: 8 },
+      { text: "第三句？", start: 8, end: 12 },
+    ]);
+  });
+});
diff --git a/packages/core/src/reader/tts-segments.ts b/packages/core/src/reader/tts-segments.ts
new file mode 100644
index 00000000..3cd807de
--- /dev/null
+++ b/packages/core/src/reader/tts-segments.ts
@@ -0,0 +1,55 @@
+export interface TTSTextSegmentRange {
+  text: string;
+  start: number;
+  end: number;
+}
+
+type SentenceSegmenter = new (
+  locales?: string | string[],
+  options?: { granularity?: "grapheme" | "word" | "sentence" },
+) => {
+  segment(input: string): Iterable<{ index: number; segment: string }>;
+};
+
+const FALLBACK_SENTENCE_RE =
+  /[^\r\n.!?;:\u3002\uff01\uff1f\uff1b\uff1a]+[.!?;:\u3002\uff01\uff1f\uff1b\uff1a\u2026]*/gu;
+
+export function splitTextIntoTTSSegmentRanges(
+  text: string,
+  locale?: string | string[],
+): TTSTextSegmentRange[] {
+  if (!text.trim()) return [];
+
+  const SegmenterCtor = (
+    Intl as typeof Intl & {
+      Segmenter?: SentenceSegmenter;
+    }
+  ).Segmenter;
+
+  const rawRanges = SegmenterCtor
+    ? Array.from(new SegmenterCtor(locale, { granularity: "sentence" }).segment(text)).map(
+        (item) => ({
+          start: item.index,
+          end: item.index + item.segment.length,
+        }),
+      )
+    : Array.from(text.matchAll(FALLBACK_SENTENCE_RE)).map((match) => ({
+        start: match.index ?? 0,
+        end: (match.index ?? 0) + match[0].length,
+      }));
+
+  const ranges = rawRanges.length ? rawRanges : [{ start: 0, end: text.length }];
+  const result: TTSTextSegmentRange[] = [];
+
+  for (const range of ranges) {
+    let start = range.start;
+    let end = range.end;
+    while (start < end && /\s/u.test(text[start] ?? "")) start++;
+    while (end > start && /\s/u.test(text[end - 1] ?? "")) end--;
+    const segmentText = text.slice(start, end).replace(/\s+/g, " ").trim();
+    if (segmentText.length < 1) continue;
+    result.push({ text: segmentText, start, end });
+  }
+
+  return result;
+}

From 0c44f25eb2f061fdc205b41d84274e2506dc2178 Mon Sep 17 00:00:00 2001
From: ZGY1999 <1051684164@qq.com>
Date: Sun, 3 May 2026 13:46:19 +0800
Subject: [PATCH 3/3] =?UTF-8?q?AI=E9=98=85=E8=AF=BB=E5=8A=A9=E6=89=8B?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=81=8A=E5=A4=B4=E5=86=85=E5=AE=B9=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI阅读助手支持聊头内容复制
---
 packages/app/src/components/chat/MessageList.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/chat/MessageList.tsx b/packages/app/src/components/chat/MessageList.tsx
index 5c0328f4..330d1212 100644
--- a/packages/app/src/components/chat/MessageList.tsx
+++ b/packages/app/src/components/chat/MessageList.tsx
@@ -103,8 +103,8 @@ export function MessageList({
     isStreaming && !!lastMsg && lastMsg.role === "assistant" && lastMsg.parts.length > 0;
 
   return (
-    <div ref={containerRef} className="relative flex h-full flex-col overflow-y-auto py-4">
-      <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4">
+    <div ref={containerRef} className="relative flex h-full select-text flex-col overflow-y-auto py-4">
+      <div className="mx-auto flex w-full max-w-3xl select-text flex-col gap-4 px-4">
         {messages.map((msg, idx) => (
           <MessageBubble
             key={msg.id}
@@ -193,8 +193,8 @@ function MessageBubble({ message, onCitationClick, isStreaming, currentStep }: M
     const hasQuotes = quoteParts.length > 0;
 
     return (
-      <div className="group mt-6 flex max-w-full flex-col first:mt-0">
-        <div className="max-w-[85%] self-end rounded-2xl bg-muted px-3 py-2 text-sm leading-relaxed">
+      <div className="group mt-6 flex max-w-full select-text flex-col first:mt-0">
+        <div className="max-w-[85%] select-text self-end rounded-2xl bg-muted px-3 py-2 text-sm leading-relaxed">
           {hasQuotes && (
             <div className="mb-2 flex flex-col gap-1.5">
               {quoteParts.map((q) => (
@@ -203,7 +203,7 @@ function MessageBubble({ message, onCitationClick, isStreaming, currentStep }: M
             </div>
           )}
           {textParts.length > 0 && (
-            <div className="whitespace-pre-wrap">
+            <div className="select-text whitespace-pre-wrap">
               {textParts.map((part) => {
                 if (part.type === "text") {
                   return <span key={part.id}>{part.text}</span>;
@@ -242,7 +242,7 @@ function MessageBubble({ message, onCitationClick, isStreaming, currentStep }: M
     !isLastPartActiveToolCall;
 
   return (
-    <div className="group flex w-full flex-col gap-1">
+    <div className="group flex w-full select-text flex-col gap-1">
       {message.parts.map((part) => (
         <PartRenderer
           key={part.id}