mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-11 21:41:02 +08:00
cnb.dQC5J6ohAGA
dbaac99b45
首页（书架）此前是纯命令式拼出来的，而整个客户端没有任何路由：URL 从头到尾不变， 返回键、刷新、分享、收藏一概不成立。 ## 路由 `ui/router.ts` 把 fragment 解析成 route，shell 渲染 router 报上来的那个： #/shelf 书架 #/book/<id> 阅读器 #/library/<路径> 书库里的目录 用 fragment 而不是路径，是因为同一份产物要被两个宿主加载，而两个都服务不了任意路径： Android 从 appassets.androidplatform.net 加载（那里没有服务端），H5 由 reader 服务端 托管（没有客户端路由回落）。路径式路由会在 vite dev 里正常、在两个生产宿主里 404。 返回走应用自己的屏幕轨迹，不走 history.back()：应用里的「返回」是「上一个屏幕」， 而浏览器历史里可能有登录表单或别的站点。轨迹为空时（新标签页里粘贴的链接）替换成父级， 而不是压入——否则那个链接会永远压在书架后面。 走进书库子目录用 replace：书库是一个带面包屑的屏幕，走目录是同一个屏幕改自己的参数。 压栈的话，读者走过四个文件夹再按返回会逐层退出来。 带着链接进来而尚未登录时，route 存在 App.pending 里等在登录页后面，登录后直接落到 目标屏幕，而不是落到一个他从未见过的书架。 Android 外壳的返回手势不需要改动：它看的是 WebView 的 canGoBack()，而路由现在真的 往 WebView 历史里写——之前那段注释描述的行为，从这次起才成立。 ## 首页 - 先看到书，再看到控件：标题和封面在最上面，搜索在后，排序与数量贴在它们作用的那一节上。 旧版把搜索框、数量、四个排序 chip 依次排在封面之前，三行控件才轮到第一本书。 - 排序栏是唯一吸顶的东西，它承载的是读者会滚回去改的两件事。 - 空状态给一条出路（打开书库管理 / 刷新 / 清除搜索），而不是一句「书库还是空的」。 - 冷启动画骨架屏，且按当前密度画——密度不对的骨架屏会让读者看到布局动两次。 - 封面缺图时把书名画成封面，而不是一个灰色方块。 ## 顺手修掉的 5 个真缺陷 1. mountUI 在 unmount 之后仍会渲染。屏幕是异步加载的，离开后那条迟到的响应会把 整棵树画进一个刚被清空的容器；书架迟到的响应会把自己一屏封面画进书库管理器。 2. --safe-left/-right/-top/-bottom 从未在生效的样式表里定义过，只有一份没人 import 的 死样式表定义过。未定义的自定义属性会让整个 calc() 失效并静默丢弃声明。 3. 封面在 flex 列里没有显式宽度，aspect-ratio 盒子因此收缩到内容宽度：只有书名的封面 塌成 42px、有图的占满卡片，整排看起来参差不齐。 4. 阅读列在宽屏上被拉伸到 9 列 45px 的封面。现在内容列封顶 68rem，封面随断点变大。 5. 删掉 web/src/ui/styles.css——414 行从未被引用的旧样式，以及 .book-highlight 等 已经没有任何代码产出的规则。 ## 验证 - web 全量 284 项测试通过（新增 router 19 项 + 链接契约 4 项）。 - typecheck / build / check-shell.sh / build-web-assets.sh 均通过。 - 真浏览器实测：深链直开、刷新不丢、返回离开屏幕、登录后落回目标、书库走目录、 空搜索、粘性工具栏、深浅色、390px 与 1440px 两档宽度。 - 体积：251KB → 252KB（gzip 79.1KB）。