mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-11 05:20:54 +08:00
CodeBuddy
5e8d14b460
真机（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 的章节、漫画的卷），与分窗互不干扰。
24 lines
648 B
JSON
24 lines
648 B
JSON
{
|
|
"name": "reader-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"description": "H5 客户端：同一份构建产物既作为纯 H5 客户端独立部署，也被 Android 外壳打进 assets 复用。",
|
|
"license": "AGPL-3.0-or-later",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -p tsconfig.json && vite build",
|
|
"typecheck": "tsc -p tsconfig.json",
|
|
"test": "tsx --test test/*.test.ts",
|
|
"preview": "vite preview"
|
|
},
|
|
"devDependencies": {
|
|
"@types/jsdom": "^30.0.0",
|
|
"jsdom": "^30.0.1",
|
|
"playwright": "^1.63.0",
|
|
"tsx": "^4.19.2",
|
|
"typescript": "^5.7.3",
|
|
"vite": "^6.0.7"
|
|
}
|
|
}
|