优化

web/src/hooks/useHorizontalSwipe.ts

@@ -33,6 +33,12 @@ interface HorizontalSwipeOptions {
   dominance?: number
   /** 手势超过这个时长不算滑动（毫秒）。只对非跟手的滑动判定生效。 */
   maxDuration?: number
+  /**
+   * 跟手拖拽开始（方向判定通过、第一次 onDrag 之前）调一次。
+   * 宿主在这里记下跟手层当前的实际位移：上一次翻页的归位动画可能还没滑完，
+   * 新手势要接着那点残余位移继续，否则中途接管会把残余一笔抹掉，画面跳一格。
+   */
+  onDragStart?: () => void
   /** 跟手拖拽中的位移（px，向右为正）。传了才启用跟手。 */
   onDrag?: (dx: number) => void
   /** 跟手松手：宿主在这里回弹或翻页（随后浏览器补发的 click 会被吞掉）。 */
@@ -54,6 +60,7 @@ export function useHorizontalSwipe({
   minDistance = 45,
   dominance = 1.2,
   maxDuration = 800,
+  onDragStart,
   onDrag,
   onDragEnd,
 }: HorizontalSwipeOptions): HorizontalSwipeHandlers {
@@ -88,11 +95,12 @@ export function useHorizontalSwipe({
           return
         }
         draggingRef.current = true
+        onDragStart?.()
       }
       lastDxRef.current = dx
       onDrag?.(dx)
     },
-    [onDrag, dominance],
+    [onDragStart, onDrag, dominance],
   )
 
   const onTouchEnd = useCallback(

web/src/pages/reader/ReaderViewPage.tsx

@@ -44,6 +44,19 @@ import { getReaderAudioEngine } from './readerAudioEngine'
 
 const COLUMN_GAP = 48
 
+/**
+ * 正文「保持真实渲染」的页窗口：当前页 ± 这么多页的段落不做 content-visibility 跳过。
+ *
+ * 为什么要有这个窗口：被跳过的段落不能每帧重算可见性。翻页/拖动时内容每移动一点，
+ * 进入或离开视口的段落都要重新判定，而每次判定变化都会重排整条多栏流——实测一次
+ * 滑动触发 32 次 layout（20 次滑动主线程 10.6s，JS 只占 0.014s），帧根本画不完，
+ * 表现出来就是两页之间抖。窗口固定住以后，动画期间不再有可见性变化，帧就稳了；
+ * 只有读完窗口（每 TEXT_WARM_SHIFT 页）才付一次重排。
+ */
+const TEXT_WARM_PAGES = 12
+/** 页码漂出这个范围才移动渲染窗口，避免每翻一页都改可见性触发重排。 */
+const TEXT_WARM_SHIFT = 6
+
 /** 正文里的图片占位行前缀（本地 EPUB 的图片，服务端已换成签名地址）。 */
 const IMG_MARK = '[img]'
 
@@ -109,8 +122,10 @@ const ReaderTextPageBody = memo(function ReaderTextPageBody({
     <>
       {blocks.map((block, key) => {
         const { text, comments } = block
-        // content-visibility：跳过视口外段落的绘制。长章翻页时否则每次 transform
-        // 都要重绘整章（实测可到数百毫秒）。auto 尺寸会记住上次渲染高度，减少分页抖动。
+        // content-visibility：跳过视口外段落的绘制，否则每次 transform 都要重绘整章
+        // （实测可到数百毫秒）。默认全部按需跳过；当前页附近的段落由
+        // applyParagraphWarmWindow 改成 visible 并固定成一个窗口——被跳过的段落
+        // 会在每帧重新判定可见性，导致动画期间反复重排（见 TEXT_WARM_PAGES）。
         const skipPaint: CSSProperties = {
           contentVisibility: 'auto',
           containIntrinsicSize: 'auto 4em',
@@ -186,26 +201,53 @@ function firstReadableIndex(chapters: ReaderChapter[]): number {
  * 读一次布局把这一帧定成过渡起点，再打开过渡滑回 0；与此同时页码 +1/-1，
  * ReaderComic 那边单元格的 left 偏移在同一次提交里跟着换，两者相抵，
  * 屏幕上看到的就是新页从手指离开的位置平滑归位。
+ *
+ * base 是手势开始时舞台已经带着的残余位移（上一次归位动画没滑完就又被接管）。
  */
-function settleComicDrag(el: HTMLDivElement, turn: 1 | -1, dx: number, turnPage: () => void): void {
+function settleComicDrag(el: HTMLDivElement, turn: 1 | -1, dx: number, base: number, turnPage: () => void): void {
   const width = el.clientWidth || 1
   el.style.transition = 'none'
-  el.style.transform = `translateX(${turn > 0 ? width + dx : -width + dx}px)`
+  el.style.transform = `translateX(${base + dx + turn * width}px)`
   void el.offsetWidth
   el.style.transition = PAGE_TRANSITION
   el.style.transform = 'translateX(0px)'
   turnPage()
 }
 
+/**
+ * 读元素当前的实际横向位移。
+ *
+ * 跟手层/漫画舞台的归位是 CSS 过渡，一次手势可能在过渡中途就被下一次手势接管。
+ * 那时元素的 transform 停在中间值，必须把它读出来当作新手势的起点，
+ * 否则新手势从 dx 重新开始，残余位移被抹掉，画面就会跳一格——快速连续翻页时
+ * 最明显，看起来就是两页之间来回抖。
+ */
+function readTranslateX(el: HTMLElement): number {
+  const t = getComputedStyle(el).transform
+  if (!t || t === 'none') return 0
+  const nums = t.match(/-?[\d.]+(?:e[-+]?\d+)?/gi)
+  if (!nums) return 0
+  // translate3d 在 Chrome 里可能给 matrix(a,b,c,d,tx,ty) 也可能给 matrix3d(...)，
+  // 两种都要取横向平移分量。
+  const v = nums.length >= 16 ? Number(nums[12]) : nums.length >= 6 ? Number(nums[4]) : 0
+  return Number.isFinite(v) ? v : 0
+}
+
 /**
  * 文本滑动松手后的跟手层归位。正文多栏已瞬移，这里只把跟手层从「画面连续」的
  * 位移滑回 0。不用 void offsetWidth 强刷布局——长章多栏一强制回流就要几百毫秒。
  * turn=1 下一页，turn=-1 上一页；dx 为松手时的跟手位移。
+ *
+ * 起点必须是 base + dx + turn*stride：
+ * - stride 要和正文那一跳用的步长完全一致（列宽 + 列间距）。用列宽代替步长的话，
+ *   松手瞬间跟手层会少补一个列间距，画面先往回弹 48px 再往前滑。
+ * - base 是手势开始时跟手层已经带着的残余位移：上一次归位动画没滑完就又滑了一次时，
+ *   不带上它就等于把这段残余抹掉，画面跳一格。快速连续翻页时最明显。
  */
-function settleTextDrag(dragEl: HTMLDivElement, turn: 1 | -1, dx: number): void {
-  const width = dragEl.clientWidth || 1
+function settleTextDrag(dragEl: HTMLDivElement, turn: 1 | -1, dx: number, stride: number, base: number): void {
+  const step = stride > 0 ? stride : dragEl.clientWidth || 1
   dragEl.style.transition = 'none'
-  dragEl.style.transform = `translate3d(${turn > 0 ? width + dx : -width + dx}px,0,0)`
+  dragEl.style.transform = `translate3d(${base + dx + turn * step}px,0,0)`
   requestAnimationFrame(() => {
     dragEl.style.transition = 'transform 140ms ease-out'
     dragEl.style.transform = 'translate3d(0,0,0)'
@@ -274,6 +316,13 @@ export default function ReaderViewPage() {
   const textPageSyncTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   /** 首次分页完成后锁住 pageCount，避免 content-visibility 改变 scrollWidth 后反复 setPageCount。 */
   const pageCountLockedRef = useRef(false)
+  /** 正文段落节点与它们各自落在的页号，用来算「当前页附近的渲染窗口」。 */
+  const paragraphsRef = useRef<NodeListOf<HTMLParagraphElement> | null>(null)
+  const paragraphColsRef = useRef<Int32Array | null>(null)
+  /** 每个段落当前是不是「真实渲染」（1=visible，0=按需跳过），只在分类变化时写 DOM。 */
+  const paragraphWarmRef = useRef<Uint8Array | null>(null)
+  /** 当前窗口中心页；-1 表示窗口失效（映射刚重算过），下次应用时重建。 */
+  const warmCenterRef = useRef(-1)
   vwRef.current = vw
   pageCountRef.current = pageCount
   // 音频/漫画媒体状态
@@ -504,19 +553,29 @@ export default function ReaderViewPage() {
   }, [chapterIndex, book, chapters, contentCacheKey, contentReloadKey])
 
   // ── 分页排版（CSS 多栏 + 平移） ──
-  /** 把正文列平移到指定页。animate=true 时走 220ms 过渡；换章/重排传 false。 */
-  const applyTextPageTransform = useCallback((nextPage: number, animate: boolean) => {
-    const el = contentRef.current
-    if (!el) return
-    const width = vwRef.current > 0 ? vwRef.current : (viewportRef.current?.clientWidth ?? 0)
-    const stride = Math.max(width, 1) + COLUMN_GAP
-    el.style.transition = animate ? PAGE_TRANSITION : 'none'
-    // 正文多栏可能极宽，不要 translate3d / will-change，免得整章被提成巨大合成层。
-    el.style.transform = `translateX(-${nextPage * stride}px)`
-    appliedTextPageRef.current = nextPage
-    appliedTextVwRef.current = width
+  /** 一页正文占的横向步长：列宽 + 列间距。分页位移和跟手补位必须用同一个值。 */
+  const textPageStride = useCallback(() => {
+    const width = vwRef.current > 0
+      ? vwRef.current
+      : Math.round(viewportRef.current?.getBoundingClientRect().width ?? 0)
+    return Math.max(width, 1) + COLUMN_GAP
   }, [])
 
+  /** 把正文列平移到指定页。animate=true 时走 220ms 过渡；换章/重排传 false。 */
+  const applyTextPageTransform = useCallback(
+    (nextPage: number, animate: boolean) => {
+      const el = contentRef.current
+      if (!el) return
+      const stride = textPageStride()
+      el.style.transition = animate ? PAGE_TRANSITION : 'none'
+      // 正文多栏可能极宽，不要 translate3d / will-change，免得整章被提成巨大合成层。
+      el.style.transform = `translateX(-${nextPage * stride}px)`
+      appliedTextPageRef.current = nextPage
+      appliedTextVwRef.current = vwRef.current > 0 ? vwRef.current : (viewportRef.current?.clientWidth ?? 0)
+    },
+    [textPageStride],
+  )
+
   const updateTextPageLabel = useCallback((nextPage: number) => {
     const label = pageLabelRef.current
     if (!label) return
@@ -524,6 +583,72 @@ export default function ReaderViewPage() {
     label.textContent = title ? `${nextPage + 1} / ${pageCountRef.current} · ${title}` : `${nextPage + 1} / ${pageCountRef.current}`
   }, [])
 
+  /**
+   * 重算「段落 → 页号」映射。正文是一条超长多栏流，段落落在哪一栏只能从布局读。
+   * 2500 段读一遍 offsetLeft 约 2ms（布局干净时），比让浏览器每帧自己重算便宜得多。
+   */
+  const refreshParagraphColumns = useCallback(() => {
+    const el = contentRef.current
+    if (!el) return
+    const ps = el.querySelectorAll('p')
+    const stride = textPageStride()
+    const cols = new Int32Array(ps.length)
+    for (let i = 0; i < ps.length; i++) cols[i] = Math.floor(ps[i].offsetLeft / stride)
+    paragraphsRef.current = ps
+    paragraphColsRef.current = cols
+    // 映射变了，缓存的「谁在渲染」标记不能沿用：下次应用时以 DOM 现状为基准重算。
+    paragraphWarmRef.current = new Uint8Array(ps.length)
+    warmCenterRef.current = -1
+  }, [textPageStride])
+
+  /**
+   * 把当前页附近的段落固定成「真实渲染」，其余继续按需跳过。
+   * 只有分类真的变了的段落才写 DOM，所以窗口不动时这个函数是空转。
+   */
+  const applyParagraphWarmWindow = useCallback(
+    (nextPage: number) => {
+      if (settings.pageMode !== 'page' || contentType !== 'text') return
+      const cols = paragraphColsRef.current
+      const ps = paragraphsRef.current
+      const warm = paragraphWarmRef.current
+      if (!cols || !ps || !warm || cols.length !== ps.length) return
+      const center = warmCenterRef.current
+      if (center >= 0 && Math.abs(nextPage - center) <= TEXT_WARM_SHIFT) return
+      if (center < 0) {
+        for (let i = 0; i < ps.length; i++) warm[i] = ps[i].style.contentVisibility === 'visible' ? 1 : 0
+      }
+      warmCenterRef.current = nextPage
+      const lo = nextPage - TEXT_WARM_PAGES
+      const hi = nextPage + TEXT_WARM_PAGES
+      let flipped = false
+      for (let i = 0; i < ps.length; i++) {
+        const want = cols[i] >= lo && cols[i] <= hi ? 1 : 0
+        if (warm[i] === want) continue
+        warm[i] = want
+        flipped = true
+        // 放进窗口 = visible（真实渲染），移出窗口 = auto（按需跳过，高度用记住的值）。
+        ps[i].style.setProperty('content-visibility', want ? 'visible' : 'auto')
+      }
+      // 可见性一变，段落高度就从估算值换成真实值，后面所有段落都会挪位，
+      // 缓存的映射随即过期。等下一帧布局落定再重算，别卡在这一帧里。
+      if (flipped) requestAnimationFrame(() => refreshParagraphColumns())
+    },
+    [settings.pageMode, contentType, refreshParagraphColumns],
+  )
+
+  /** 退出翻页模式时把整章段落放回按需跳过，别留着上一次的渲染窗口。 */
+  const resetParagraphWarmWindow = useCallback(() => {
+    const ps = paragraphsRef.current
+    const warm = paragraphWarmRef.current
+    if (!ps || !warm) return
+    for (let i = 0; i < ps.length; i++) {
+      if (!warm[i]) continue
+      warm[i] = 0
+      ps[i].style.setProperty('content-visibility', 'auto')
+    }
+    warmCenterRef.current = -1
+  }, [])
+
   /**
    * 把 pageRef 写回 React。长章每次 setPage 都会让整页重渲染卡住 1s+，
    * 所以阅读翻页热路径绝不调用；只在打开菜单 / 换章 / 卸载时同步。
@@ -544,7 +669,7 @@ export default function ReaderViewPage() {
    * dragDx 有值表示来自滑动松手。
    */
   const commitTextPage = useCallback(
-    (nextPage: number, opts?: { dragDx?: number }) => {
+    (nextPage: number, opts?: { dragDx?: number; dragBase?: number }) => {
       const from = pageRef.current
       const dragDx = opts?.dragDx
       const fromSwipe = typeof dragDx === 'number'
@@ -553,58 +678,79 @@ export default function ReaderViewPage() {
       pageRef.current = nextPage
       applyTextPageTransform(nextPage, false)
       updateTextPageLabel(nextPage)
+      applyParagraphWarmWindow(nextPage)
 
       const dragEl = pageDragRef.current
       if (fromSwipe && dragEl && nextPage !== from) {
-        settleTextDrag(dragEl, turn, dragDx)
+        settleTextDrag(dragEl, turn, dragDx, textPageStride(), opts?.dragBase ?? 0)
       } else if (dragEl) {
-        dragEl.style.transition = 'none'
+        // 点按翻页也可能打断上一次的归位动画。这里不能用 transition:'none' 直接抹掉残余：
+        // 那是硬跳。带上过渡滑回 0，起点就是当前的实际位置，画面才是连续的。
+        dragEl.style.transition = PAGE_TRANSITION
         dragEl.style.transform = 'translate3d(0,0,0)'
       }
     },
-    [applyTextPageTransform, updateTextPageLabel],
+    [applyTextPageTransform, updateTextPageLabel, applyParagraphWarmWindow, textPageStride],
   )
 
   const relayout = useCallback(() => {
     const vp = viewportRef.current
-    if (!vp) return
-    const width = vp.clientWidth
+    const el = contentRef.current
+    if (!vp || !el) return
+    // 列宽必须是整数、而且要和位移用的步长完全一致。
+    // clientWidth / state 是取整的，而实际布局宽度可能是小数（缩放、非整数 DPI 很常见，
+    // 比如 382.4）。容器宽 382.4、column-width 写 382 时，浏览器按容器宽排出 382.4 的列，
+    // 真实列距就变成 430.4，而位移按 430 算——每页差 0.4px，误差乘以页码：
+    // 第 339 页就偏了 135px，整页文字从句子中间切开。所以这里把容器宽钉成同一个整数，
+    // 真实列距就等于步长，页码再大也不会漂。
+    const width = Math.max(1, Math.round(vp.getBoundingClientRect().width))
+    const widthPx = `${width}px`
+    // 宽度和列宽都用命令式写：React 那边用的是 vw state，晚一帧才跟上，
+    // 这一帧里算出来的 scrollWidth / 页数就会是错的。
+    if (el.style.width !== widthPx) el.style.width = widthPx
+    if (el.style.columnWidth !== widthPx) el.style.columnWidth = widthPx
     // 用正文列自己的 scrollWidth；视口在子元素 transform 时 scrollWidth 会抖，
     // 导致翻一页就重新 setPageCount → 整页重渲染卡 1s+。
-    const total = contentRef.current?.scrollWidth ?? vp.scrollWidth
+    const total = el.scrollWidth ?? vp.scrollWidth
     const count = Math.max(1, Math.ceil((total + COLUMN_GAP) / (width + COLUMN_GAP)))
 
-    const pendingEnd = pendingEndRef.current && count > 0
+    const widthChanged = width !== vwRef.current
+    if (widthChanged) pageCountLockedRef.current = false
+    // content-visibility 只给视口附近的段落算真尺寸，远端的段落按估算高度参与分页，
+    // 所以 scrollWidth 会随阅读单向变大。锁定期内只接受变大（页数更准，且增长是单向
+    // 的，不会来回抖）；不接受变小——正文一跳回估算值就会把页码夹回上一页，
+    // 表现出来就是「翻到下一页又被拉回上一页」。
+    const effectiveCount = pageCountLockedRef.current ? Math.max(count, pageCountRef.current) : count
+    const countGrew = effectiveCount !== pageCountRef.current
+
+    const pendingEnd = pendingEndRef.current && effectiveCount > 0
     const pendingPos = pendingPosRef.current > 0
-    const clamped = Math.min(pageRef.current, Math.max(0, count - 1))
+    const clamped = Math.min(pageRef.current, Math.max(0, effectiveCount - 1))
     const nextPage = pendingEnd
-      ? count - 1
+      ? effectiveCount - 1
       : pendingPos
-        ? Math.min(pendingPosRef.current, count - 1)
+        ? Math.min(pendingPosRef.current, effectiveCount - 1)
         : clamped
 
     if (pendingEnd) pendingEndRef.current = false
     if (pendingPos) pendingPosRef.current = 0
 
-    const widthChanged = width !== vwRef.current
-    // 窗口宽度变了要重新分页；锁住后忽略 scrollWidth 抖动（content-visibility 估算高度）。
-    if (widthChanged) pageCountLockedRef.current = false
-    const countChanged = !pageCountLockedRef.current && count !== pageCountRef.current
     const pageChanged = nextPage !== pageRef.current
 
     // 热路径上尺寸没变就别 setState——否则每次翻页都会重渲染 2000+ 段正文。
-    if (!widthChanged && !countChanged && !pageChanged && !pendingEnd && !pendingPos) {
+    if (!widthChanged && !countGrew && !pageChanged && !pendingEnd && !pendingPos) {
       if (count > 1) pageCountLockedRef.current = true
       return
     }
 
     vwRef.current = width
-    if (!pageCountLockedRef.current) pageCountRef.current = count
+    pageCountRef.current = effectiveCount
     pageRef.current = nextPage
+    applyParagraphWarmWindow(nextPage)
     if (widthChanged) setVw(width)
-    if (countChanged) {
-      setPageCount(count)
-      if (count > 1) pageCountLockedRef.current = true
+    if (countGrew) {
+      setPageCount(effectiveCount)
+      if (effectiveCount > 1) pageCountLockedRef.current = true
     }
     if (pageChanged || pendingEnd || pendingPos) {
       snapTextPageRef.current = true
@@ -612,11 +758,26 @@ export default function ReaderViewPage() {
       updateTextPageLabel(nextPage)
       applyTextPageTransform(nextPage, false)
     }
-  }, [applyTextPageTransform, updateTextPageLabel])
+  }, [applyTextPageTransform, updateTextPageLabel, applyParagraphWarmWindow])
 
   useLayoutEffect(() => {
     relayout()
-  }, [relayout, content, settings.fontSize, settings.lineHeight, settings.paragraphSpacing, settings.pageMode, vw])
+    // 正文/字号/列宽变了：段落落位全变了，重新算映射并重建渲染窗口。
+    if (settings.pageMode === 'page' && contentType === 'text') {
+      refreshParagraphColumns()
+      applyParagraphWarmWindow(pageRef.current)
+    } else {
+      resetParagraphWarmWindow()
+    }
+  }, [relayout, refreshParagraphColumns, applyParagraphWarmWindow, resetParagraphWarmWindow, content, settings.fontSize, settings.lineHeight, settings.paragraphSpacing, settings.pageMode, contentType, vw])
+
+  // 页脚页码的文字只由 DOM 直接写（翻页热路径不 setState），React 那边不渲染子节点。
+  // 两边都写的话，React 重渲染时会拿滞后的 page 去覆盖，覆盖失败时页面会闪一下旧页码。
+  // 这里在换章 / 页数变化时补写一次，保证页脚不为空。
+  useLayoutEffect(() => {
+    if (settings.pageMode !== 'page' || contentType !== 'text') return
+    updateTextPageLabel(pageRef.current)
+  }, [content, pageCount, chapterIndex, contentType, settings.pageMode, updateTextPageLabel])
 
   // 列宽变化或换章恢复时对齐位移。
   // 阅读热路径以 pageRef 为权威页码（不走 setPage）；这里绝不能用滞后的 React page
@@ -942,28 +1103,40 @@ export default function ReaderViewPage() {
   //   相抵，画面看不出切换。
   const comicStageRef = useRef<HTMLDivElement>(null)
   const pageDragEnabled = settings.pageMode === 'page' && (contentType === 'text' || comicDragSinglePage)
+  /**
+   * 本次跟手手势开始时，跟手层/舞台已经带着的残余位移。
+   * 上一次翻页的归位动画没滑完就又滑了一次，新位移必须接着它算，否则画面跳一格。
+   */
+  const dragBaseRef = useRef(0)
+
+  const onPageDragStart = useCallback(() => {
+    const el = contentType === 'image' ? comicStageRef.current : pageDragRef.current
+    dragBaseRef.current = el ? readTranslateX(el) : 0
+  }, [contentType])
 
   const onPageDrag = useCallback(
     (dx: number) => {
       const el = contentType === 'image' ? comicStageRef.current : pageDragRef.current
       if (!el) return
       el.style.transition = 'none'
-      el.style.transform = `translate3d(${dx}px,0,0)`
+      el.style.transform = `translate3d(${dragBaseRef.current + dx}px,0,0)`
     },
     [contentType],
   )
 
   const onPageDragEnd = useCallback(
     (dx: number) => {
+      const base = dragBaseRef.current
+      dragBaseRef.current = 0
       if (contentType === 'image') {
         const el = comicStageRef.current
         if (!el) return
         if (dx <= -DRAG_TURN_DISTANCE) {
-          settleComicDrag(el, 1, dx, goNext)
+          settleComicDrag(el, 1, dx, base, goNext)
           return
         }
         if (dx >= DRAG_TURN_DISTANCE) {
-          settleComicDrag(el, -1, dx, goPrev)
+          settleComicDrag(el, -1, dx, base, goPrev)
           return
         }
         el.style.transition = PAGE_TRANSITION
@@ -974,7 +1147,7 @@ export default function ReaderViewPage() {
       if (!el) return
       if (dx <= -DRAG_TURN_DISTANCE) {
         if (pageRef.current < pageCountRef.current - 1) {
-          commitTextPage(pageRef.current + 1, { dragDx: dx })
+          commitTextPage(pageRef.current + 1, { dragDx: dx, dragBase: base })
         } else {
           el.style.transition = PAGE_TRANSITION
           el.style.transform = 'translate3d(0,0,0)'
@@ -984,7 +1157,7 @@ export default function ReaderViewPage() {
       }
       if (dx >= DRAG_TURN_DISTANCE) {
         if (pageRef.current > 0) {
-          commitTextPage(pageRef.current - 1, { dragDx: dx })
+          commitTextPage(pageRef.current - 1, { dragDx: dx, dragBase: base })
         } else {
           el.style.transition = PAGE_TRANSITION
           el.style.transform = 'translate3d(0,0,0)'
@@ -1003,6 +1176,7 @@ export default function ReaderViewPage() {
     onSwipeRight: goPrev,
     onSwipeLeft: goNext,
     minDistance: DRAG_TURN_DISTANCE,
+    onDragStart: pageDragEnabled ? onPageDragStart : undefined,
     onDrag: pageDragEnabled ? onPageDrag : undefined,
     onDragEnd: pageDragEnabled ? onPageDragEnd : undefined,
   })
@@ -1385,15 +1559,14 @@ export default function ReaderViewPage() {
         )}
       </div>
 
-      {/* 页脚页码（翻页模式） */}
+      {/* 页脚页码（翻页模式）。文字由 updateTextPageLabel 直接写 DOM，
+          React 不渲染子节点，避免重渲染时用滞后的页码覆盖。 */}
       {settings.pageMode === 'page' && contentType === 'text' && content !== null && (
         <div
           ref={pageLabelRef}
           className="pointer-events-none pb-2 text-center text-2xs opacity-50"
           style={{ color: theme.text }}
-        >
-          {page + 1} / {pageCount} · {currentChapter?.title ?? ''}
-        </div>
+        />
       )}
 
       {/* 主菜单（仿 legado ReadMenu） */}