 CodeBuddy
|
5e8d14b460
|
fix(web): 用 iframe 承载章节文档，浏览器实测逼出来的四处修正
真机（Chromium，390x844）跑通整条链路后，之前"看起来对"的地方全都露馅了。
这一轮把渲染层按实测重做，四个都是必须修的：
1. **章节必须是真文档，不能是 shadow DOM 里的片段。**
章节里的 <img src> 和 <link rel=stylesheet> 是浏览器自己去请求的，
没法带 Authorization 头。把它们注入宿主文档的结果是每个插图、每个
样式表都 401 —— 书渲染成无样式无图。iframe 是真浏览上下文，它的
子资源请求是普通导航，URL 里带什么就发什么。所以：外壳用 shadow DOM
（挡的是客户端样式往书里漏，这是它真正能挡的方向），书本身用 iframe。
2. **子资源的 token 只能走 query。**
服务端新增 `queryTokenAllowed`，白名单式放行：仅 GET、仅
/api/v1/books/*/assets|cover|content。触发扫描、写元数据这类端点一律
不接受 URL 里的 token —— 那才是真正会泄到日志和 Referer 的地方。
新增 5 个测试固定这条边界。
3. **`column-fill: auto` 需要确定高度，否则根本没有分页。**
body 不设高度时它会撑到内容高度，整章排成一列，scrollWidth 等于
clientWidth —— 翻页手势完全无效，一章只显示一页。修完 390px 宽的一章
是 3732px / 9 页，翻页步长精确 422px（390 + 32 gutter）。
同时去掉 scroll-snap：吸附目标是列边缘而不是我做出来的页边界，
会导致 scrollLeft 落在两页之间、甚至一次跳两页。
4. **`pageWidth` 是上限不是实际宽度。**
手机上 720px 的列比屏幕还宽，同样退化成"一章一页"。取
min(读者设置, 实际宽度)。
另外发现并按格式分流修好的：PDF（kind=document）之前落进了图片翻页器，
读者看到的是一个破图；现在走 PdfReader。
封面 <img> 也漏了 token，一并改成 api.coverUrl()。
顺带把一个设计缺陷拆开了：目录不再从 manifest 的 groups 取。
groups 是传输分窗，它把目录显示成「第 1 章 – 第 40 章」——服务端的分页
边界漏进了 UI。新增 /books/:id/toc，按格式返回真正的目录
（epub 的 spine 标题、txt 的章节、漫画的卷），与分窗互不干扰。
|
2026-09-16 15:28:34 +08:00 |
|