From 3a6b8db0b3ab9cfdda550728617a5d73bbf3352b Mon Sep 17 00:00:00 2001
From: truewhile <779943132@qq.com>
Date: Thu, 8 Oct 2026 23:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/reader-ui-spec.md                  |  1 +
 web/src/pages/reader/ReaderViewPage.tsx | 48 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/docs/reader-ui-spec.md b/docs/reader-ui-spec.md
index 78fd9b8..8ab6bfd 100644
--- a/docs/reader-ui-spec.md
+++ b/docs/reader-ui-spec.md
@@ -103,6 +103,7 @@
 - 漫画图片显示尺寸（`utils/comicImageFit.ts`，仅上下滚动模式）：legado 的漫画阅读有「缩放」，Web 版原先只有一种写死的宽度（正文列封顶 900px），桌面端放不大也缩不小，所以补上一组档位，在界面面板的「图片尺寸」一行切换。`default` 就是老样子（900px 居中），`width` 适应宽度（正文列不再封顶、铺满窗口），`height` 适应高度（一屏一页），`long` 适应长边（整页完整可见），`original` 原图（原始像素 1:1，超出部分横向滚动）。`default`/`width` 由外层列宽决定，其余三个由 `<img>` 自身约束，**所以后三种必须放开 900px 列宽上限**，否则会被列再压回去。`height`/`long` 要按「一屏多高」换算，所以量的是滚动容器本身而不是 `window.innerHeight`（正文区是 root 里的 `flex-1`，另挂上下条之后就不等于窗口高度了），并用 `ResizeObserver` 跟随；只在启用了自尺寸档位时才挂观察器，默认档位不白白重渲染整章。`settings.comicImageFit` 是设备级偏好（不同屏幕和源分辨率合适的尺寸不同），和 `comicDoublePage` 一样只存本机、不参与账号同步。翻页模式是整页缩放进视口，本来就不存在「太大/太小」，档位对它不生效、也不显示入口。`ctrl/cmd+滚轮` 依然留给浏览器缩放，本功能只用档位做粗调。
 - **文本型漫画源按图片下发**（`internal/service/reader` 的 `imageMarkersOnly`）：拷贝漫画这类书源 `bookSourceType=0`（文本），正文规则直接给 `<img>`，服务端把整行标签转成 `[img]<签名地址>` 标记行后类型仍是 `text`，前端就会走文本阅读器——分页把每张图当成一列，一屏只看得到一张，桌面端也谈不上双页铺开。现在 `GetContentForBook` / `LocalChapterContent` 在标记化之后判断「非空行全部是 `[img]` 标记」，是则把 `type` 改成 `image` 并给出 `images`，交由漫画阅读器渲染（整页缩放、双页铺开、进度按图片序号）。判定只认「全是标记」：混了正文的章节一律保持 `text`，孤立的 HTML 标签行（`<div>`/`</div>`）与空行当作无内容忽略，绝不吞掉可读文字。
 - 鼠标滚轮翻页（仅翻页模式）：向上滚=上一页，向下滚=下一页；菜单打开时也不翻页。鼠标滚轮一格一页（间隔至少 220ms，与翻页动画对齐），触控板小步长累计到阈值翻一页且一次手势只翻一页（避免惯性连翻）。`ctrl/cmd+滚轮` 保留浏览器缩放。
+- **浏览器全屏（沉浸式）**：阅读页本身已经是 `fixed inset-0` 的独立布局（`/reader/*` 不套影视 Layout），所以屏幕上的留白只剩浏览器自带的地址栏/工具栏。底部动作行加「全屏 / 还原」，对 `readerRef` 调标准 Fullscreen API（`requestFullscreen` / `exitFullscreen`），进全屏前先收起菜单。按钮只在 `document.fullscreenEnabled === true` 时出现——**iOS 上的 Safari 至今不支持元素全屏**（只有 `<video>` 能全屏），所以那里不显示按钮，而不是显示一个点了没反应的死按钮；iPhone 想彻底去掉浏览器界面只能「添加到主屏幕」。离开阅读页时卸载 effect 主动 `exitFullscreen`，否则返回书架后浏览器仍停在全屏、整站都被罩住。全屏状态由 `fullscreenchange` 事件回写，不做乐观更新（用户按 Esc / 系统手势退出时也要跟着变）。
 - 目录：整屏面板（顶部返回 + 书名 + 章数，Virtuoso 虚拟列表，定位并高亮当前章，点章跳转）。**必须渲染在底部菜单之外**：菜单带 `backdrop-blur`，会成为 `fixed` 后代的包含块，放里面 `h-full` 只能拿到菜单高度；历史上它写的是 `top-0 + bottom-full`，两者同时存在时高度被算成 0，整块目录完全看不见。
 
 **本地书籍（对应 legado 本地 TXT / EPUB）**
diff --git a/web/src/pages/reader/ReaderViewPage.tsx b/web/src/pages/reader/ReaderViewPage.tsx
index c5a7057..2cfeec2 100644
--- a/web/src/pages/reader/ReaderViewPage.tsx
+++ b/web/src/pages/reader/ReaderViewPage.tsx
@@ -9,7 +9,9 @@ import {
   LayoutList,
   ListEnd,
   Loader2,
+  Maximize,
   MessageSquare,
+  Minimize,
   Minus,
   Moon,
   Plus,
@@ -269,6 +271,9 @@ export default function ReaderViewPage() {
 
   const [menuOpen, setMenuOpen] = useState(false)
   const [panel, setPanel] = useState<'none' | 'toc' | 'style'>('none')
+  // 浏览器全屏（沉浸式）：把阅读层整个铺满屏幕，连浏览器的地址栏/状态栏一起让出来。
+  // 页面本身是 fixed inset-0，所以这里要解决的是浏览器自身的界面，而不是页面内的留白。
+  const [fullscreen, setFullscreen] = useState(false)
   /** 目录面板顶部「区间下拉」选中的组号，随列表滚动同步。 */
   const [tocGroupIndex, setTocGroupIndex] = useState(0)
   // 换源：候选源来自按书名重新搜索的结果；reloadKey 变化时整本书重新加载
@@ -346,6 +351,39 @@ export default function ReaderViewPage() {
     return () => window.removeEventListener('resize', onResize)
   }, [])
 
+  // ── 浏览器全屏（沉浸式） ──
+  // 只认标准 API：iOS 上的 Safari 至今不支持元素全屏（只有 <video> 能全屏），
+  // 所以那里不显示按钮（不是灰掉——按钮点了没反应会被当成坏了）。
+  const fullscreenSupported = useMemo(
+    () => typeof document !== 'undefined' && document.fullscreenEnabled === true,
+    [],
+  )
+  useEffect(() => {
+    const onFullscreenChange = () => setFullscreen(Boolean(document.fullscreenElement))
+    document.addEventListener('fullscreenchange', onFullscreenChange)
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange)
+  }, [])
+  // 离开阅读页时退出全屏：否则返回书架后浏览器仍停在全屏，整站都被罩住。
+  useEffect(
+    () => () => {
+      if (document.fullscreenElement) void document.exitFullscreen()
+    },
+    [],
+  )
+  const toggleFullscreen = useCallback(() => {
+    const el = readerRef.current
+    if (!el) return
+    if (document.fullscreenElement) {
+      void document.exitFullscreen()
+      return
+    }
+    // 进全屏是为了看正文，菜单还压在上面就没意义了，先收起来。
+    setMenuOpen(false)
+    setPanel('none')
+    // 浏览器可能以权限策略等理由拒绝，静默忽略即可（按钮状态由 fullscreenchange 回写）。
+    void el.requestFullscreen?.().catch(() => {})
+  }, [])
+
   const comicImages = contentType === 'image' && media?.images ? media.images : NO_IMAGES
   const comicDoublePage =
     contentType === 'image' &&
@@ -1659,6 +1697,16 @@ export default function ReaderViewPage() {
                       },
                     ]
                   : []),
+                // 全屏：只在浏览器支持元素全屏时出现（iOS Safari 不支持，见上方注释）。
+                ...(fullscreenSupported
+                  ? [
+                      {
+                        icon: fullscreen ? <Minimize size={18} /> : <Maximize size={18} />,
+                        label: fullscreen ? '还原' : '全屏',
+                        action: toggleFullscreen,
+                      },
+                    ]
+                  : []),
                 ...(canSwitchSource
                   ? [
                       {