【聚光灯21天】DAY 13–16 · H5 版四天:从六个页面到能上线

一、为什么能一天做完六个页面

ts
// h5/vite.config.ts
alias: {
  '@engine': resolve(repoRoot, 'prot/engine.js'),   // 规则:原样复用
  '@data':   resolve(repoRoot, 'prot/lua-data'),    // 数据:原样 import
}

六个页面 + 罗盘

• 朝代名固定在自己的方位(第 1 项在正上方),不随盘转
• 盘面(环带 + 烘焙在顶部的指针)旋转,由指针去指当前选中的那一格
• 拖拽跟手 → 松手惯性 → 欠阻尼弹簧吸附(冲过再回摆)→ 整体归位

这块的手感在 Lua 版调了很多轮(DAY 8 的"罗盘四版"),今天照搬结论,不重新调。

二、DAY 14:一次审查,修掉 5 高 15 中

报告里最有价值的一句话

最值得警惕的模式是「注释里正确诊断了问题,代码却没跟上自己的诊断」。

• 懒加载被自检抵消 —— scenarios.ts 精心做了按需加载,但 main.ts 的启动自检串行拉全部五份 JSON(280KB),首屏被迫下载全部数据。注释还自承"这是刻意取舍"。
• 版本号第三副本 —— vite.config.ts 注入 __APP_VERSION__ 并专门注释警告"版本号漂移事故",而 settings.ts 又手抄了一份 APP_VERSION,注入值全仓零引用。下次升版本必然静默漂移 —— 正是注释警告的那件事。

五条高危

修复:两个"出口"侧的洞

ts
// Session.dispose():对局离场时必须调
//   bar/main 都是常驻壳节点,挂上去的回溯按钮与 pointerdown 监听
//   不摘掉的话,每开一局就叠一层 —— 旧按钮的闭包还绑着旧 Game,
//   点了会污染正在进行的对局。

三、DAY 14 重头:存档从「回到章首」改成「回到那一刻」

旧语义的问题

新语义:两件套(v2.2.0)

snapshot  章首快照(供章内回溯用)
live      当前时刻的全量状态(发牌/相位/随机轨迹)

最硬的一块:随机轨迹也要存

回溯恢复历史状态,不恢复随机命运(不存 rng 状态)

js
f._getState = function () { return a | 0; };   // 取出内部状态
f._setState = function (s) { a = s | 0; };     // 写回

四类相位的 round-trip 测试

顺带补的两道校验

js
if (!this.d.ATTR_NAMES[ak2]) return false;                       // 未知属性键 = 跨剧本脏档
if (!numRange(s.attrs[ak2], 0, this.attrMax(ak2))) return false;  // 范围须落在本剧本上限内

四、DAY 15:存档页重做 + 设置页改滑杆

存档结构(用户二次拍板)

设置页:开关+三档 → 横向滑杆

音频三项(音乐/音效/朗读)各一条横向滑杆:拖到最左即静音,
没有独立开关键(2026-10-15 用户拍板,参照常见音量滑杆的交互)。
滑杆左侧的喇叭图标随音量档位变化:0 打叉 / 低无波 / 中一波 / 高两波。

拖动期间不重画整行(重画会销毁滑杆、打断拖拽),只就地更新图标与填充。

剧本内容缩减

五、DAY 16:TapTap 云存档 + 图鉴 + 朝代预告

云存档(game/tapcloud.ts)

本地是「自动档按剧本分桶 + 暂存每剧本一条」的多槽结构,云端不打散成一存档一槽(存档数量有上限,且逐槽上传会撞上「一分钟一次」的频控),而是把两个 store 打包成一个 JSON,对应云端唯一一份名为 qingshi_saves_v1 的存档。

云端 modifiedTime 比本地最近变动新 → 云端整包覆写本地(覆写前留本地备份);反之上传本地。官方 QA 建议的「逐档对比引导玩家选」对整包方案不适用,多设备同时玩的冲突场景接受这个粒度。

本地每次写档只标脏(lastChange),由调度器在距上次上传满 60s 后(debounce 1.5s)合并上传;关页 pagehide 时若已满 60s 补一次末班车。

跨局收藏(game/collection.ts)

脏档收窄不拒收 —— 结局达成记录(endings)是 H5 新增字段,旧档没有它,读取时按空表收窄,不因为缺一个字段就拒收整份。

青史图鉴(ui/gallery.ts)

五个剧本 JSON 在这里会全部按需下载(与首屏瘦身是 trade-off):图鉴页本来就是「我要看全部剧本」的场景,且 loadScenario 有缓存,入过局的剧本不再重复下载。

朝代预告页(ui/teaser.ts)

① 题头(朝代大字 + 年代 + 英文 + 金线)
② 一句话定位(lede,可带朱色高亮段)
③ 时代关键词(胶囊样式)
④ 开卷进度(考据/编纂/校验/开卷 四节点三态图)
⑤ 即将登场(只显示四字剧名+年代,不显示人物名、无人立绘 —— 用户拍板)
⑥ 底注(回秦提示 + 罗盘提示)

测试扩到 16 套

chain / viewports / backtrack / save / audio / voice / reveal
ending / settings / hardcore / stash / gallery / tapcloud   ← 新增
scenarios(纯 Node)/ dev-check(专盯 dev 模式)

六、四天的数据

七、四天最值钱的三条

① 换载体能一天做完六个页面,不是因为写得快

② “存/读"不是"保存数据”,是"保存状态机"

• 相位 —— 四种不同相位都要能恢复
• 随机轨迹 —— 不只是"存几个数",是"让随机流能在另一个时间点续接"
• 可信边界 —— 存档来自 localStorage,是不可信输入

③ 最危险的 bug,是"注释诊断对了,代码没跟上"

最值得警惕的模式是「注释里正确诊断了问题,代码却没跟上自己的诊断」。

明天

1. 真机验收 —— 云存档需在 TapTap 容器内实测(普通浏览器只能验降级路径)
2. 配音全量转码 —— 试点已验证机制,--all 跑全量(约 100MB,谨慎)
3. 首屏体积 —— 美术已瘦身,再核一遍实际下载量
4. 成就图标 64 缺失 —— P3 美术批次待补
5. 审查 backlog 的打磨项(低危清单)