Day 91 · BOSS 战 — 屏 C 终验收与三屏齐活：边界课的结业考

本周收官，也是第 3 个月的"内容完成日"——三屏全部 Vue 化。今天两场验收：屏 C 终验收（拓扑功能 + 边界纯净度 + 动画生命周期）与三屏齐活回归（Day 84 清单重跑 + 拓扑增强项）。今天依然"验收不写码"——如果屏 C 有阻断项，修复后整屏重验。验收通过后，大屏 Vue 版只差最后一周（Week 14）的收官部署。

一、屏 C 终验收清单

1.1 功能验收（对照原生版 Day 70 录屏）

□ 静态结构：20 节点 + 连线正确渲染（对照 Day 68 原生版截图）
□ 实时驱动：节点状态色随快照变化（ok 蓝/warn 黄/danger 红底）
□ 温度副标签：实时跳动（脏检查生效——打点计数远低于快照数）
□ hover：节点详情面板（状态/温度/迷你趋势），离开消失
□ pan/zoom：滚轮以鼠标为锚缩放、拖拽平移、光标变化
□ 告警脉冲：danger 节点呼吸光晕、z 序衬底、告警解除后清残影
□ 图例：四状态实时计数
□ 对账：auditTopoConfig 零死节点、零未上拓扑

1.2 KeepAlive 三态矩阵（Day 89 的完整版）

                    danger 存在        danger 不存在
屏 C 激活           脉冲可见+续播       无脉冲不空转
屏 C 失活           rAF 停（CPU≈0）     rAF 静默
失活期告警解除      激活后无脉冲        ——
失活期告警新增      激活后脉冲起转      ——

二、边界纯净度审计

本周的"隐形验收"——架构纪律的代码审查（逐条过堂，任何违反即返工）：

□ renderer 实例：普通变量/markRaw 持有，全工程搜索无 reactive/ref 包裹
□ 视口状态（scale/offset）：仅存在于 renderer 内部
□ 拖拽 10 秒：Day 87 打点零增长 + Devtools 组件树零高亮（双证据）
□ hoverNode：存 id（全工程搜索确认无对象赋值）
□ 脉冲相位：renderer 私有字段，Vue 侧无引用
□ 桥的双向契约：入向（update/resize/setAnimation）出向（hover/select）
  ——组件与 renderer 之间无第三条数据通路（全 import 审查）
□ destroy 成对：事件解绑、rAF 取消、清残影——Console 驱动核对

审计通过的标准不是"能跑"而是"经得起看"——把这份清单交给朋友（或未来的自己）审查，能独立确认每一条。

三、三屏齐活回归

Day 84 的验收清单全量重跑（拓扑从占位变完整后的整体回归）：

□ 首启：/ → 屏 A，数据 1s 内到位
□ 轮播循环：A(15s) → B(20s) → C(15s)，三屏过渡无白屏
□ 屏 C 增强项（本周新增）：
   □ 轮播进入屏 C 瞬间：resize 校准无跳变（onActivated 生效）
   □ 失活期间告警数据照常入 store，切回即最新（含 dangerIds）
   □ 拓扑 hover 详情与屏 B 曲线同源同帧
□ URL 工作流：/c 直达、后退逐屏、刷新停留
□ 手动切换/告警弹窗拦截/Tab 暂停——Day 84 全项复验
□ 数据五断点（Day 84 版）：追加第六断点位——renderer.update 入口打点

四、性能终验

场景	指标	目标	实测
屏 C 稳态（10 分钟，含 hover 操作）	fps	≥55	___
屏 C 告警脉冲全开（多 danger）	fps	≥55	___
pan/zoom 拖拽（连续 30s）	fps	≥55	___
三屏轮播 ×20 圈（KeepAlive 全命中）	fps	≥55	___
30 分钟整机	JS Heap	稳定	___
屏 C 失活期间	CPU	≈0	___

重点关注 pan/zoom 行：这是"视口不进 Vue"决策的直接兑现场景——拖拽时如果掉帧，先查动画层是否被拖着全量重绘（Day 89 坑 2 的性能面）。

五、对照表与边界文档定稿

5.1 本周对照表增量（灵魂行）

场景	原生版	Vue 版	本质变化
渲染引擎持有	全局单例自管	组件闭包 + markRaw	生命周期与组件同构
数据→画布	store.ingest 直接调 update	computed 投影 + watch 桥	窄口契约，可替换性
重绘频率	2s 分频订阅	脏检查按需	频率控制第三代
hover 状态	渲染器内部（DOM 详情框）	屏级 ref 存 id	跨世界传 id 不传对象
脉冲动画	常转不歇	告警驱动启停 + 失活暂停	架构联动的白赚红利
详情面板	命中处画 DOM	Vue 组件回 store 取数	渲染职责彻底分离

5.2 边界文档定稿

docs/boundary-screen-c.md（Day 85 起维护）收尾三件事：

裁决表补实测列——每个裁决追加"实测验证"备注（如视口：拖拽零 watch 已验）
第四层的扩层记录——三层→四层的决策过程与理由（文档要反映演进，不是掩盖）
复审条件更新——设备数阈值、HUD 需求、配置可视化三个待办的现状

六、常见坑点

坑 1：验收日改架构

审计发现某条违反（比如某个 watch 里顺手读了 renderer 内部状态）——最小修复：改成走桥，不要"顺手重构整个交互层"。边界修复原则：补契约，不改设计。

坑 2：性能数据只跑一遍

跑分受环境噪声影响（后台任务、温控降频）。纪律（Day 84 坑 3 重申）：静置 30s、三遍取中位、记录环境（机型/浏览器版本）。

坑 3：对照表漏记"代价"

Canvas × Vue 共存的代价也要入表：桥的维护成本（两份契约要同步演化）、调试跨世界（Vue Devtools 看不到画布内部，canvas 打点要自己埋）——诚实表才有公信力（Day 77/84 坑的老规矩，最后一次自查）。

坑 4：把"验收通过"当"完成"

屏 C 验收通过 ≠ 项目完成——Week 14 还有部署（history 回退配置，Day 78 坑 4 的欠账）、README、对比博客、简历更新。今天的收官语是"内容齐活"，不是"交付完毕"。

七、自测挑战

T1 · 双验收（90 分钟）

第一至三节清单逐项打勾留档（屏 C 终验 + 三屏齐活回归）。阻断项修复后重跑对应段落。

T2 · 边界审计（40 分钟）

第二节的审计清单逐条执行，产出审计记录（每条的证据：搜索截图/打点数据/Console 输出）。这份记录本身就是"Canvas 状态管理"面试题的书面答案。

T3 · 性能填表 + 对照表定稿（40 分钟）

第四节表格填满（三遍取中位）；第五节对照表与边界文档定稿归档。

T4 · 结业自述（进阶，20 分钟）

不看资料，用 5 分钟向朋友（或对镜）讲清楚：“Canvas 项目里怎么管理状态？Vue 和 Canvas 怎么分工？”——讲不圆的地方就是下周博客要补的认知。

八、总结

环节	要点
屏 C 终验	功能 × KeepAlive 三态矩阵全过
边界审计	七条纪律逐条留证——经得起看才算过
三屏齐活	Day 84 回归 + 拓扑增强项 + 第六断点
性能	pan/zoom 是"视口不进 Vue"的兑现场景
文档	裁决表补实测、演进留痕、复审条件更新

本周毕业标准：屏 C 双验收全过、边界审计七条留证、性能达标、对照表与边界文档定稿。

里程碑：大屏三屏内容全部 Vue 化——从 Day 71 的空壳到今天，三周走完了"核心 → 生态 → 边界"的完整曲线。下周（Week 14）收官：部署上线、README 与演示资产、《原生 vs Vue 开发大屏的体会》毕业博文——第 3 个月的毕业礼。

【Canvas × Vue】day91-boss-screen-c