添加点击2次全屏的功能

web/src/hooks/useDoubleTap.test.ts

@@ -0,0 +1,29 @@
+import { decideDoubleTap } from './useDoubleTap.ts'
+
+function check(name: string, condition: boolean) {
+  if (!condition) throw new Error(`useDoubleTap: ${name}`)
+}
+
+// 空闲时的第一下：进入等待窗口，单击不立刻触发（留给定时器）。
+const first = decideDoubleTap('none', 'tap')
+check('first tap opens a window', first.window === 'tap')
+check('first tap does not fire immediately', first.fire === null)
+
+// 窗口里的第二下：判成双击并立刻触发（必须在事件里同步执行，见实现注释）。
+const second = decideDoubleTap('tap', 'tap')
+check('second tap fires double', second.fire === 'double')
+check('second tap closes the window', second.window === 'none')
+
+// 菜单遮罩关菜单：只开窗口，不触发单击，也不影响状态语义。
+const armed = decideDoubleTap('none', 'arm')
+check('arm opens a window', armed.window === 'armed')
+check('arm never fires a single', armed.fire === null)
+
+// 关掉菜单后紧接的第二下要算双击，否则菜单一开一关就永远进不了全屏。
+check('tap after arm fires double', decideDoubleTap('armed', 'tap').fire === 'double')
+
+// 已经在双击窗口里再 arm：续期，窗口保持 armed。
+check('arm during window stays armed', decideDoubleTap('armed', 'arm').window === 'armed')
+check('arm during tap window stays armed', decideDoubleTap('tap', 'arm').window === 'armed')
+
+console.log('useDoubleTap.test.ts ok')

web/src/hooks/useDoubleTap.ts

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+/** 两次点击间隔在这个毫秒数以内算一次双击。 */
+export const DOUBLE_TAP_MS = 280
+
+/**
+ * 双击窗口的状态。
+ *
+ * - `none`  空闲，没有待判定的点击
+ * - `tap`   刚单击过一次，还等第二下；窗口期满仍没有第二下就触发单击
+ * - `armed` 只开了双击窗口（菜单遮罩关掉菜单时用），期满什么也不触发
+ */
+export type DoubleTapWindow = 'none' | 'tap' | 'armed'
+
+/** 一次动作立刻要触发的效果；null 表示只更新窗口状态、不立刻触发（留给定时器）。 */
+export type DoubleTapFire = 'single' | 'double' | null
+
+export interface DoubleTapDecision {
+  window: DoubleTapWindow
+  fire: DoubleTapFire
+}
+
+/**
+ * 双击窗口的纯决策（不碰计时器，便于单测）：给定当前窗口状态和这次动作，
+ * 得出窗口进入什么状态、要不要立刻触发回调。
+ *
+ * `tap` = 用户点了一下中间区域；`arm` = 只开窗口不算点击（关菜单时调用）。
+ */
+export function decideDoubleTap(window: DoubleTapWindow, action: 'tap' | 'arm'): DoubleTapDecision {
+  if (action === 'arm') {
+    // 只开窗口：已在窗口里就续期，否则新开一个 armed 窗口，永远不触发单击。
+    return { window: 'armed', fire: null }
+  }
+  // 已经有窗口（无论是单击待定的 tap 还是刚 arm 的）→ 第二下到达，判成双击。
+  if (window !== 'none') return { window: 'none', fire: 'double' }
+  // 第一下：进入 tap 窗口等第二下，单击由窗口期满的定时器触发。
+  return { window: 'tap', fire: null }
+}
+
+/**
+ * 中间区域的「单击 / 双击」识别（手机上用来区分呼出菜单和进出全屏）。
+ *
+ * 中间区域原先单击就是呼出菜单，现在双击还要切全屏，两个动作落在同一块屏幕上，
+ * 就得先等一小会儿看有没有第二下：第一下把窗口置为 `tap`，第二下在窗口内到达就
+ * 取消单击、改判双击。**双击回调必须在第二次点击的事件里同步执行**——浏览器只认
+ * 用户手势上下文里的 `requestFullscreen`，挪进定时器再调会被直接拒绝。
+ *
+ * 返回三个入口：
+ * - `tap()`：分区点击。`enabled` 为假（桌面端，或 iOS 这种不支持元素全屏的浏览器）
+ *   时不做任何延迟，单击立刻生效，端上呼出菜单的手感与改动前完全一致。
+ * - `arm()`：只开一个双击窗口、不排单击。菜单打开时整屏遮罩会先吃掉那次点击
+ *   （见 ReaderViewPage 的关闭遮罩），遮罩把菜单关掉的同时调它，紧跟着的第二下
+ *   才能落进窗口被判成双击，而不是又当成单击把菜单重新打开。
+ * - `cancel()`：丢掉待判定的点击。用户点了中间又立刻去翻页时，别让那次单击
+ *   在窗口期满时把菜单弹出来。
+ */
+export function useDoubleTap({
+  onDoubleTap,
+  onSingleTap,
+  enabled,
+  delay = DOUBLE_TAP_MS,
+}: {
+  onDoubleTap: () => void
+  onSingleTap: () => void
+  enabled: boolean
+  delay?: number
+}): { tap: () => void; arm: () => void; cancel: () => void } {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const windowRef = useRef<DoubleTapWindow>('none')
+  // 回调每次渲染都可能是新闭包，用 ref 兜住，免得已排队的定时器跟着旧闭包一起失效。
+  const doubleRef = useRef(onDoubleTap)
+  const singleRef = useRef(onSingleTap)
+  useEffect(() => {
+    doubleRef.current = onDoubleTap
+    singleRef.current = onSingleTap
+  })
+
+  const clear = useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  /** 取消待判定的点击并回到空闲。 */
+  const cancel = useCallback(() => {
+    clear()
+    windowRef.current = 'none'
+  }, [clear])
+
+  /** 开一个双击窗口：期满后，tap 窗口触发单击，armed 窗口什么也不做。 */
+  const startWindow = useCallback(
+    (kind: DoubleTapWindow) => {
+      clear()
+      windowRef.current = kind
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null
+        const wasTap = windowRef.current === 'tap'
+        windowRef.current = 'none'
+        if (wasTap) singleRef.current()
+      }, delay)
+    },
+    [clear, delay],
+  )
+
+  // 卸载时清掉待执行的单击，避免离开页面后还蹦一下。
+  useEffect(() => cancel, [cancel])
+  // 双击被关掉（如切到桌面布局）时，丢弃已排队的点击。
+  useEffect(() => {
+    if (!enabled) cancel()
+  }, [enabled, cancel])
+
+  const tap = useCallback(() => {
+    if (!enabled) {
+      singleRef.current()
+      return
+    }
+    const decision = decideDoubleTap(windowRef.current, 'tap')
+    if (decision.fire === 'double') {
+      // 第二下：取消待定的单击，改判双击（同步执行，保住用户手势上下文）。
+      cancel()
+      doubleRef.current()
+      return
+    }
+    startWindow(decision.window)
+  }, [enabled, cancel, startWindow])
+
+  const arm = useCallback(() => {
+    if (!enabled) return
+    startWindow(decideDoubleTap(windowRef.current, 'arm').window)
+  }, [enabled, startWindow])
+
+  return { tap, arm, cancel }
+}

web/src/hooks/useIsTouchDevice.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+
+// 按设备能力判断「手机/平板」：没有真正的鼠标悬停能力的就是触摸设备。
+// 应用里已有同样的做法（PlayerControls / Vr360Stage 的 isHoverlessDevice），
+// 这里做成 hook：媒体查询在字体缩放、外接鼠标插拔、chrome 设备模拟时会变化，
+// 跟随 change 事件回写，比渲染时读一次更稳。
+const HOVERLESS_QUERY = '(hover: none)'
+
+function queryHoverless(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia(HOVERLESS_QUERY).matches
+}
+
+/** 当前设备是否是触摸设备（手机/平板）。桌面端（带鼠标）返回 false。 */
+export function useIsTouchDevice(): boolean {
+  const [touch, setTouch] = useState(queryHoverless)
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+    const media = window.matchMedia(HOVERLESS_QUERY)
+    const onChange = () => setTouch(media.matches)
+    onChange()
+    media.addEventListener('change', onChange)
+    return () => media.removeEventListener('change', onChange)
+  }, [])
+
+  return touch
+}

web/src/pages/reader/ReaderComic.tsx

@@ -252,8 +252,10 @@ export function ReaderComic({ images, theme, mode, page, onZone, initialImage, o
             const rect = e.currentTarget.getBoundingClientRect()
             const x = (e.clientX - rect.left) / rect.width
             if (x < 0.3) {
+              onZone('left')
               scrollRef.current?.scrollBy({ top: -window.innerHeight * 0.9, behavior: 'auto' })
             } else if (x > 0.7) {
+              onZone('right')
               scrollRef.current?.scrollBy({ top: window.innerHeight * 0.9, behavior: 'auto' })
             } else {
               onZone('center')

web/src/pages/reader/ReaderViewPage.tsx

@@ -30,7 +30,9 @@ import {
   type ReaderSearchOrigin,
 } from '../../api/reader'
 import { useComicSpreads } from '../../hooks/useComicSpreads'
+import { useDoubleTap } from '../../hooks/useDoubleTap'
 import { useHorizontalSwipe } from '../../hooks/useHorizontalSwipe'
+import { useIsTouchDevice } from '../../hooks/useIsTouchDevice'
 import { useSmoothWheelScroll } from '../../hooks/useSmoothWheelScroll'
 import { useReaderAudioStore } from '../../stores/readerAudio'
 import { COMIC_IMAGE_FITS, READER_THEMES, getReaderTheme, useReaderSettingsStore } from '../../stores/readerSettings'
@@ -384,6 +386,19 @@ export default function ReaderViewPage() {
     void el.requestFullscreen?.().catch(() => {})
   }, [])
 
+  // ── 手机端：中间区域双击进出全屏 ──
+  // 只在「触摸设备 + 浏览器支持元素全屏」时启用：桌面端不装这套（点击不带任何延迟，
+  // 保持原来的操作手感），iOS Safari 不支持元素全屏（见上）也照旧只留单击呼出菜单。
+  // 区分单击/双击的等待与「第二下同步调 requestFullscreen」的约束都在 useDoubleTap 里。
+  const touchDevice = useIsTouchDevice()
+  const doubleTapFullscreen = fullscreenSupported && touchDevice
+  const { tap: centerTap, arm: armCenterDoubleTap, cancel: cancelCenterTap } = useDoubleTap({
+    // 单击仍是呼出/收起菜单，双击改成进出浏览器全屏。
+    onSingleTap: () => setMenuOpen((v) => !v),
+    onDoubleTap: toggleFullscreen,
+    enabled: doubleTapFullscreen,
+  })
+
   const comicImages = contentType === 'image' && media?.images ? media.images : NO_IMAGES
   const comicDoublePage =
     contentType === 'image' &&
@@ -1221,11 +1236,18 @@ export default function ReaderViewPage() {
   const handleZoneTap = useCallback(
     (clientX: number, rect: DOMRect) => {
       const x = rect.width > 0 ? (clientX - rect.left) / rect.width : 0.5
-      if (x < 0.3) goPrev()
-      else if (x > 0.7) goNext()
-      else setMenuOpen((v) => !v)
+      if (x < 0.3) {
+        cancelCenterTap()
+        goPrev()
+      } else if (x > 0.7) {
+        cancelCenterTap()
+        goNext()
+      } else {
+        // 中间单击=菜单、双击=全屏，区分逻辑在 useDoubleTap（桌面端原样单击）。
+        centerTap()
+      }
     },
-    [goPrev, goNext],
+    [goPrev, goNext, centerTap, cancelCenterTap],
   )
 
   // ── 键盘（桌面端） ──
@@ -1420,7 +1442,13 @@ export default function ReaderViewPage() {
   }
 
   return (
-    <div ref={readerRef} className="fixed inset-0 z-40 flex flex-col" style={{ backgroundColor: theme.bg, color: theme.text }}>
+    <div
+      ref={readerRef}
+      className="fixed inset-0 z-40 flex flex-col"
+      // 手机上双击中间切全屏时，别让浏览器把自己的「双击缩放」也做一遍：
+      // touch-action:manipulation 关掉双击缩放，纵向滚动与双指缩放照常。
+      style={{ backgroundColor: theme.bg, color: theme.text, touchAction: doubleTapFullscreen ? 'manipulation' : undefined }}
+    >
       {/* 正文视口 */}
       <div className="relative flex-1 overflow-hidden">
         <div className={`mx-auto h-full w-full ${comicFullWidth ? '' : 'max-w-[900px]'}`}>
@@ -1443,7 +1471,9 @@ export default function ReaderViewPage() {
               draggable={comicDragSinglePage}
               stageRef={comicStageRef}
               onZone={(zone) => {
-                if (zone === 'center') setMenuOpen((v) => !v)
+                if (zone === 'center') centerTap()
+                // 点了左右分区（翻屏）就丢掉待判定的中间单击，别让它在窗口期满时弹菜单。
+                else cancelCenterTap()
               }}
               initialImage={restorePos}
               onProgress={(idx) => {
@@ -1571,6 +1601,7 @@ export default function ReaderViewPage() {
               aria-label="上一页"
               onClick={() => {
                 if (consumeSwipe()) return
+                cancelCenterTap()
                 goPrev()
               }}
               className="cursor-w-resize"
@@ -1580,7 +1611,8 @@ export default function ReaderViewPage() {
               aria-label="菜单"
               onClick={() => {
                 if (consumeSwipe()) return
-                setMenuOpen((v) => !v)
+                // 中间单击=菜单、双击=全屏，区分逻辑在 useDoubleTap（桌面端原样单击）。
+                centerTap()
               }}
               className="cursor-default"
             />
@@ -1589,6 +1621,7 @@ export default function ReaderViewPage() {
               aria-label="下一页"
               onClick={() => {
                 if (consumeSwipe()) return
+                cancelCenterTap()
                 goNext()
               }}
               className="cursor-e-resize"
@@ -1614,7 +1647,16 @@ export default function ReaderViewPage() {
             type="button"
             aria-label="关闭菜单"
             className="fixed inset-0 z-40 cursor-default bg-black/30"
-            onClick={() => setMenuOpen(false)}
+            onClick={(e) => {
+              // 关菜单要立刻生效，不套单击延迟。
+              setMenuOpen(false)
+              // 但若这一下关在中间区域，就顺手开个双击窗口：菜单开着时双击中间
+              // 也能切全屏（第二下落在刚关掉菜单的正文上，见 useDoubleTap.arm）。
+              // 点在左右三分区（本意是翻页）时不开窗口，免得被下一拍误判成双击。
+              const rect = e.currentTarget.getBoundingClientRect()
+              const x = rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0.5
+              if (x >= 0.3 && x <= 0.7) armCenterDoubleTap()
+            }}
           />
           {/* 顶栏 */}
           <div