Day 84 · BOSS 战 — 三屏完整轮播与周收官：生态替换的全面验收
本周收官战。屏 A/B 已迁移、屏 C 本周仍是占位（Week 13 主菜）——但这不妨碍今天做三屏完整轮播验收：占位屏也走真实的路由/缓存/守卫链路。今天的作业是"验收 + 收官"：跑 Day 69 联调清单的 Vue 版全量、性能对比、对照表汇总，以及两件退役件的"荣誉退役报告"。今天的新代码量应接近零——验收日写代码说明前面有债。
目录
- 一、验收清单：三屏完整轮播
- 二、数据链路全链路核查（Vue 版五断点）
- 三、容错场景回放
- 四、性能验收与对比
- 五、对照表汇总：手写件 vs 生态件
- 六、荣誉退役报告
- 七、常见坑点
- 八、自测挑战
- 九、总结
一、验收清单：三屏完整轮播
□ 首启：/ 重定向 /a → 屏 A 入场动效 + KPI 翻牌 + 数据 1s 内到位
□ 自动轮播：A(15s) → B(20s) → C(15s) 循环，过渡 0.3s+0.3s 无白屏
□ KeepAlive：切回任意屏零等待（ECharts 实例不重建——Performance 无 init 峰）
□ 手动切换：圆点点击 → 当前屏计时重置；后退键 → 逐屏回退且轮播重排
□ URL 工作流：刷新停留当前屏；直接输入 /c 直达拓扑占位屏
□ 激活协议：失活屏的滚动条/轮询停走（CPU 观察）；切回数据即时最新
□ 懒加载：Network 面板三屏是独立 chunk，首屏只载 /a 的包
□ Tab 切走：visibilitychange 暂停轮播 + 数据链路照常（回来看不到断档）
二、数据链路全链路核查（Vue 版五断点）
Day 69 的"温度值追踪法"在 Vue 架构下重跑（断点位置变了，方法论不变）：
核查对象：1 号炉温度，从服务器到三屏的呈现
服务器端： generateSnapshot → temp(80) = 85.3
WS 帧： {"type":"snapshot","seq":1301,...85.3...}
传输/会话： ReconnectingWebSocket → SessionManager（seq 校验）✅ 原样服役
数据源： WsDataSource（data-link 服务层）→ 回调投递
断点 3： dashboard store.setSnapshot（actions） ← Vue 版断点位
state.latest = snap + tempWindows push
断点 4： 屏级 watch / computed（kpis、option 派生） ← Vue 版断点位
断点 5： 模板渲染：KpiTile display / VChart setOption ← Vue 版断点位
与原生版的对照结论：Day 65 的"Store.ingest → dispatch → 订阅者"三层，收敛为"actions 写 state → 组件读 state"两层——分发层消失，因为响应式系统就是分发层。这一行要重点写进对照表。
三、容错场景回放
Day 63/69 的三大容错场景，Vue 版全量回放：
场景 1：轮播中杀服务器
□ 状态灯变黄/红（ConnIndicator 读 store.connState）
□ 当前屏曲线冻结、无报错刷屏（VChart 只是不再收新 option）
□ 弹窗类：若断线产生 danger 告警 → Teleport 弹窗 + 轮播停 + 切屏拦（三联动）
□ 重启 → 退避重连 → 补传 → 三屏数据同帧恢复
场景 2：屏 C 激活时断网 30 秒
□ 补传数据进 store → 切回任何屏即满窗（"隐藏期间数据也在长"的 Pinia 版）
场景 3：告警发生在屏 B 激活时
□ 屏 A（失活）的滚动条状态已更新（读同一 store，无"激活才拉"的坑）
□ 切回屏 A 时 onActivated 里 start 的滚动条立即播最新告警
场景 3 是架构正确性的试金石：失活组件读 store 也是"活的"——KeepAlive 摘下的是 DOM，不是响应式连接。
四、性能验收与对比
4.1 验收表
| 场景 | 指标 | 目标 | 实测 |
|---|---|---|---|
| 三屏稳态 ×3（各 10 分钟） | fps | ≥55 | ___ |
| 轮播整圈 ×20（KeepAlive 命中） | fps | ≥55 | ___ |
| 切屏单次耗时（激活校准） | ms | <50 | ___ |
| 30 分钟整机 | JS Heap | 稳定 | ___ |
| Tab hidden 10 分钟 | CPU | ≈0 | ___ |
4.2 与 Week 11（无缓存路由前）的专项对比
对照实验：屏 B ↔ 屏 A 连切 20 次
Week 11（v-show 常驻）：切换 0ms，内存常驻 3 屏实例
本周（KeepAlive） ：切换 <50ms（激活校准），实例保留但 DOM 摘下
假设（无缓存路由） ：切换 100-200ms（init 重建）——Day 78 的痛，已解
三个架构决策（v-show / KeepAlive / 无缓存）的量化对比入对照表——这是"组件缓存"面试题的完整弹药。
五、对照表汇总：手写件 vs 生态件
本周 NOTES.md 汇总（Week 11 表 + 本周 8+ 行，总数应 ≥ 20 行）。本周的灵魂四行：
| 场景 | 手写件 | 生态件 | 本质变化 |
|---|---|---|---|
| 屏幕切换 | ScreenRouter.switchTo 改 class | router.push + Transition | 切换有了统一关卡与皮肤 |
| 状态分发 | Store.dispatch 遍历订阅者 | 响应式系统自动分发 | 分发层消失——响应式即分发 |
| 实例保活 | opacity 互斥手艺 | KeepAlive + include 白名单 | 手艺变配置，附带激活协议 |
| 弹窗置顶 | 无此能力（DOM 塞壳内） | Teleport to body | 逻辑树与 DOM 树解耦 |
六、荣誉退役报告
本周两件退役件（写进毕业博文的"演进故事"素材）：
🔧 src/core/screen-router.ts（Day 64 生 → Day 79 逝，服役 15 天）
服役功绩：三屏互斥、轮播调度、激活广播——撑起了原生版的骨架
退役原因：URL 状态、守卫、过渡、懒加载——手写件够不到的能力面
遗产：useCarousel 继承了它的轮播决策逻辑（算法未死，换了宿主）
🔧 src/core/screen-store.ts（Day 65 生 → Day 81 逝，服役 16 天）
服役功绩：单连接纪律、订阅分频、窗口维护、"隐藏期间数据也在长"
退役原因：镜像桥接的冗余、HMR 单例坑、无可观测性
遗产：actions 里的 setSnapshot/pushAlarms 逻辑逐行源自它
🎯 手写 → 替换 → 退役的完整周期本身就是学习路径：不手写一遍，永远不知道库在替你做什么；不替换一遍，永远不知道手写的边界在哪。这两个周期（第 2 个月的三大件整合、本周的生态替换）是简历上"渐进式重构"故事的两章。
七、常见坑点
坑 1：验收日手痒加功能
看到拓扑占位屏"太素"想提前做屏 C——范围冻结。屏 C 是 Week 13 的主菜，今天动它只会两都做不好。
坑 2：对照表只写"变好了"
生态替换的代价也必须入表：构建层复杂度（Vite/依赖链）、Devtools 学习成本、Map 深侦听的开销决策（Day 81 坑 2）——诚实的代价栏是技术判断力的证明（Day 77 坑 4 的重现，验收日自查）。
坑 3：性能对比基准污染
跑分时 Devtools 全开 + 后台编译任务 → 数据失真。纪律：跑分前关闭无关面板、静置 30s、跑三遍取中位。
坑 4：退役报告写成"删除记录"
"删了两个文件"没有信息量。报告的价值在服役功绩与遗产——写清楚哪些设计决策被生态件继承（单连接纪律、窗口维护），这是架构演进的证据链。
八、自测挑战
T1 · 全量验收（80 分钟）
第一至三节清单逐项打勾并留档（录屏 + 表格填数）。任何阻断项修复后整段重跑。
T2 · 性能对比填表（40 分钟）
第四节表格填满；重点完成"三种切换架构"的量化对比（4.2）——这是本周最值钱的实测数据。
T3 · 对照表与退役报告成文（40 分钟）
第五、六节汇总成文；对照表总数核查 ≥ 20 行；每行能回答"为什么"（面试模拟：让朋友随机抽一行提问）。
T4 · 毕业博文提纲（进阶，20 分钟）
Week 14 要写《原生 vs Vue 开发大屏的体会》——今天列三级提纲（三大件整合 → 生态替换 → 成本收益），对照表按提纲归位。
九、总结
| 环节 | 要点 |
|---|---|
| 三屏轮播 | 路由/缓存/守卫/弹窗四件套全链路验收 |
| 五断点 | 分发层消失——响应式即分发（本周最重要认知） |
| 容错 | 失活组件读 store 也是活的（架构正确性试金石） |
| 性能 | 三种切换架构的量化对比入表 |
| 退役 | 两件手写类荣誉退役——演进故事两章 |
本周毕业标准：三屏完整轮播验收全过、性能达标、对照表 ≥ 20 行、退役报告成文。下周（Week 13）主菜：屏 C 拓扑页迁移——Canvas 与响应式系统的共存，这是三屏里技术浓度最高的一块，也是"Vue 不接管一切"的边界课。