Day 70 · BOSS 战 — 交付日：验收、演示视频、简历条目与第 2 个月毕业
昨天整机联调完毕，今天一行新代码都不写（写了一律回滚——交付日的代码改动是风险，不是产出）。今天做四件事：按验收清单做最终验收、录一支 ≤2 分钟的演示视频、写 README 与简历条目、做第 2 个月的毕业总结。程序员和"会写代码的人"的分水岭就在交付能力：同样的代码，能讲清楚、能演示、能让别人 5 分钟跑起来，价值差一个量级。
目录
一、最终验收：对照清单逐项打勾
Day 64 定下的验收标准（week10 总览第五节），今天逐项执行并留档（截图 / 录屏 / 数据表进 docs/acceptance/）：
1.1 功能验收
□ 首次打开：屏 A 入场动效完整播放，4 个 KPI 翻牌从 0 滚到真实值
□ 轮播循环：A(15s) → B(20s) → C(15s) → A，切屏淡入淡出无白屏
□ 手动切换：底部圆点指示器可点击，切换后该屏停留计时重置
□ 断线重连：杀掉服务器 → 状态灯变黄 → 重启服务器 → 数据同帧恢复
□ 补传验证：断线 30s 期间切到屏 B → 恢复后曲线无断档（Store 窗口补全）
□ 告警联动：屏 B 激活时触发告警 → 切到屏 A 时告警已在列表中
□ Tab 切走 10 分钟回来：轮播停在原地等恢复（visibilitychange 暂停）
1.2 性能验收（Day 69 的表格填数）
1.3 视觉与工程验收
□ 1920×1080 与 1366×768 双分辨率截图无破版（transform scale 壳生效）
□ README 一键启动：两条命令跑通（server + client）
□ 找一个没看过代码的朋友（或换台机器）clone 试跑，全程不看你的求助消息
🎯 "朋友测试"是工程验收的黄金标准：你不在场时能不能跑起来，决定了这个项目是"作品"还是"只有我电脑上能跑的代码"。任何需要口头解释的启动步骤，都要写进 README。
二、演示视频：先写脚本再录制
2.1 为什么必须写脚本
现场即兴录制的失败模式高度一致：忘了演示重连、鼠标乱晃、中途发现 bug 慌张修补、录了 6 分钟舍不得剪。脚本 = 演示的分镜，2 分钟 ≈ 6-8 个镜头，每镜头 15-25 秒。
2.2 参考脚本（直接可用）
【00:00-00:08】开场
镜头：屏 A 全景（入场动效 + KPI 翻牌滚动）
旁白："基于原生 TS + ECharts + Canvas 的智慧工厂监控大屏，
数据由本地 WebSocket 服务器实时推送。"
【00:08-00:20】屏 A 细节
镜头：鼠标扫过 4 个 KPI 卡片 → 告警滚动条
旁白："首屏总览：关键指标实时翻牌，底部告警由服务端事件驱动。"
【00:20-00:40】屏 B 实时监控
镜头：切到屏 B（手动点圆点）→ 曲线实时推进 → 仪表盘指针摆动
旁白："实时监控页：五模块分频更新，高频曲线每帧推送，
仪表与 KPI 一秒一刷，互不抢占主线程。"
【00:40-01:00】屏 C 产线拓扑
镜头：切到屏 C → hover 一个节点看详情 → 鼠标拖拽平移缩放
旁白："产线拓扑：Canvas 三层画布渲染，节点状态色与温度
由实时数据驱动，支持平移缩放与命中检测。"
【01:00-01:30】容错能力（视频的高光段落）
镜头：切回屏 B → 杀掉服务器进程 → 状态灯变黄、曲线冻结
→ 重启服务器 → 数据恢复、曲线补全无断档
旁白："断线自动重连，重连后按会话序号补传，
曲线窗口自动补全——工业场景的网络容错。"
【01:30-01:50】性能证据
镜头：打开 DevTools Performance 录 10s → 展示帧率与内存曲线
旁白："全动效开启下稳定 55 帧以上，长时运行内存无泄漏。"
【01:50-02:00】收尾
镜头：回到屏 A 全景淡出
旁白："项目开源，README 一键启动。"
2.3 录制纪律
录三遍取最好的一遍，不要现场剪辑——剪辑是另一个技能坑
旁白后配音或用剪映加字幕皆可，环境安静比设备高级重要
录屏分辨率锁 1920×1080，浏览器缩放 100%
录之前把 demo 数据调到"好看区间"（温度 75-85 波动、告警 2-3 条）——演示数据的观感也是工程能力
三、README：让别人 5 分钟跑起来
3.1 README 结构模板
# 智慧工厂监控大屏 Smart Factory Dashboard
一句话：原生 TypeScript + ECharts + Canvas 的工业实时监控大屏，
WebSocket 实时推送、断线重连补传、三屏自动轮播。
 ← 视频转 GIF，README 的门面
## 技术栈
- 渲染：ECharts 5（自定义主题）/ Canvas 2D 三层画布（拓扑）
- 数据：WebSocket + 心跳保活 + 会话序号补传 + rAF 批量调度
- 工程：Vite + TypeScript strict
## 快速启动
```bash
# 1. 启动数据服务器（独立终端）
node server/index.js
# 2. 启动前端
npm install
npm run dev
# 打开 http://localhost:5173
功能清单
[x] 三屏轮播（KPI 总览 / 实时监控 / 产线拓扑）+ 手动切换
[x] 断线重连 + 序号补传 + 连接状态灯
[x] 订阅分频（高频曲线 / 低频 KPI 互不干扰）
[x] 工业深色主题 token 系统 + 入场动效编排
[x] 拓扑节点实时状态色 + hover 详情 + 平移缩放
架构
（贴 Day 64 的模块依赖图 ASCII 版）
性能
（贴 1.2 的实测表格）
### 3.2 README 的三条红线
1. **没有截图/GIF 的 README 等于没有**——面试官 3 秒内决定要不要继续看
2. 启动步骤必须真的从零跑一遍验证（`rm -rf node_modules` 后重来）
3. 不写"后续计划"超过 3 条——TODO 列表越长越显得没完成
---
## 四、简历条目：150 字写法与参考答案
### 4.1 写法公式
动词开头 + 技术名词（可被面试官追问的）+ 量化结果 + 工程亮点
- ❌ "做了一个智慧工厂大屏" —— 没有任何信息量
- ❌ "使用了各种先进技术" —— 无法追问，等于没写
- ✅ 结果 + 数字 + 一个能讲 10 分钟的深度点
### 4.2 参考答案（150 字）
> **智慧工厂实时监控大屏**（个人项目，开源）
> 原生 TypeScript + ECharts + Canvas 构建的工业监控大屏：三屏轮播架构（KPI 总览 / 实时监控 / 产线拓扑），WebSocket 实时推送，自研心跳保活与会话序号补传机制，断线重连后数据窗口自动补全。设计全局 Store 统一数据分发，按模块分频订阅（曲线每帧、KPI 秒级）降低渲染压力；拓扑页基于 Canvas 三层画布实现命中检测与视口变换。全动效下稳定 55fps+，长时运行内存零泄漏。
### 4.3 每句话都是面试钩子
| 简历句子 | 面试官会问 | 你的弹药（出处） |
|----------|-----------|----------------|
| "会话序号补传" | 怎么判断丢数据？补哪些？ | Day 61 SessionManager |
| "按模块分频订阅" | 为什么要分频？怎么实现？ | Day 56/65 三层分频 |
| "三层画布" | 为什么三层？脏矩形吗？ | Day 46/49 |
| "55fps、零泄漏" | 怎么测的？ | Day 69 性能验收 |
> 🎯 **简历上每一句都要能撑住 10 分钟追问**——写你做过的，不写你听过的。
---
## 五、第 2 个月毕业总结
### 5.1 五周回顾：从零件到整机
Week 6 工业可视化基础 → Canvas 图形/文本/交互基本功
Week 7 Canvas 高级 → 编辑器内核（命中/拖拽/多层/撤销）
Week 8 图表与 ECharts → 五大图表模块 + 主题 + 性能优化
Week 9 实时数据链路 → WS 心跳/重连/补传/调度/MQTT 概念
Week 10 月度综合项目 → 三合一整机 + 交付资产
### 5.2 能力对照：一个月前 vs 现在
| 能力 | 第 1 个月末 | 第 2 个月末 |
|------|------------|------------|
| 图形渲染 | 会画基本图形 | 三层画布架构 + 命中检测 + 视口变换 |
| 数据可视化 | 手写 Bar/Line | ECharts 定制主题 + 五模块 + 性能调优 |
| 实时数据 | 无 | 心跳/退避重连/序号补传/rAF 批量调度全链路 |
| 架构 | 单文件小 demo | 模块边界/全局 Store/订阅分频/屏幕路由 |
| 交付 | 无 | Demo + 视频 + README + 简历条目 |
### 5.3 本月最有价值的三个认知（写进毕业博文）
1. **状态只存一份**（Day 65/69）：数据上移到 Store 后，"隐藏期间数据也在长"、"切屏零等待"、"三屏同帧"全部免费获得——好架构是让问题消失而不是解决它。
2. **性能是纪律不是技巧**（Day 56/67/69）：分频、批量、动画预算、退订成对——没有一个技巧是高深的，全部是"知道要做并坚持做"。
3. **"不做什么"决定成败**（Week 10 铁律）：3D、登录、持久化全部进了第 3 个月待办，才有今天 90% 完成度的作品——范围控制是工程师的成人礼。
### 5.4 待办清单（第 3 个月输入）
告警规则配置界面（本周发现：告警阈值目前写死在 markLine）
数据持久化（当前刷新即丢）
Vue3 重构（阶段 2 主线：把本周的 DOM 版换成 Vue 组件化）
拓扑图配置可视化（当前是 JSON 文件，可回流编辑器能力）
---
## 六、作品链资产盘点
第 2 个月结束时，你的 `my-study` 应该有这些可展示资产：
| 资产 | 位置 | 用途 |
|------|------|------|
| 🎯 大屏 Demo 源码 | `dashboard/`（本周项目） | 简历第一项目 |
| 演示视频（≤2min） | `dashboard/docs/demo.mp4` | 简历附件 / 面试开场 |
| README + 架构图 + 性能表 | `dashboard/README.md` | 面试官第一入口 |
| 毕业博文 | 个人博客 | 内容资产 + 认知输出 |
| 70 篇学习文档 | `TypeScript/day41-70` | 知识图谱（面试前翻阅） |
| 流程图编辑器 | Week 7 项目 | 第二作品（Canvas 深度证据） |
| 实时面板 | Week 9 项目 | 已被大屏吸收（保留演进记录） |
> 🎯 **作品链思维**：单个项目是点，作品链是"每个作品都比上一个多吃一层能力"的线——大屏吃了编辑器（渲染）+ 图表（可视化）+ 数据链路（实时），这种演进故事本身就是面试素材。
---
## 七、常见坑点
### 坑 1：交付日手痒改代码
验收中发现"小问题"忍不住重构，改出新 bug 且没时间回归。修复：**交付冻结**——发现的问题只记 issue 不动手，除非是阻断性 bug（白屏/报错）。
### 坑 2：视频录了 8 分钟舍不得剪
信息密度低于每 10 秒一个看点，观众就会划走。修复：严格按 2.2 脚本分镜，超时删镜头不删旁白。
### 坑 3：README 启动步骤漏了前置条件
"我电脑能跑"但没写 Node 版本、端口占用处理。修复：换目录或换机器完整跑一遍 `README` 步骤。
### 坑 4：简历写了自己讲不动的技术点
比如写了"消息队列"但只用了 MQTT 概念。修复：4.3 的表格自检——每句话预设追问并确认弹药充足，讲不动的一律删。
### 坑 5：毕业总结写成流水账
"这周学了 A 下周学了 B"。修复：按 5.2 的对照表结构写——**变化量比清单更有说服力**。
---
## 八、自测挑战
### T1 · 最终验收全清单（60 分钟）
第一节全部清单逐项打勾并留档（截图 + 实测表），任何阻断项修完重跑。
### T2 · 演示视频成片（40 分钟）
按 2.2 脚本录制，三遍取优，输出 ≤2 分钟 MP4 + 15 秒 GIF（README 用）。
### T3 · 朋友测试（20 分钟）
发给一个没看过项目的人，只给 README，记录 TA 卡在哪一步——卡点即 README 缺陷。
### T4 · 毕业博文（进阶，60 分钟）
按 5.1-5.3 结构写第 2 个月毕业总结发布：五周演进 + 能力对照 + 三个认知 + 待办。**这篇博文是你学习方法的公开证据**。
---
## 九、总结
| 环节 | 要点 |
|------|------|
| 最终验收 | 清单留档 + 双分辨率 + 朋友测试 |
| 演示视频 | 脚本先行、分镜录制、容错演示是高光 |
| README | 截图门面 + 一键启动 + 实测性能表 |
| 简历条目 | 每句话撑住 10 分钟追问 |
| 毕业总结 | 写变化量不写流水账，待办转下月输入 |
| 作品链 | 每个作品比上一个多吃一层能力 |
---
**🎉 第 2 个月毕业。** 你现在拥有：一个能演示、能追问、能跑分的完整工业大屏 Demo，和 70 天攒下的知识图谱。下个月进入阶段 2 主线：**Vue3 组件化重构大屏**——同一个作品换引擎再跑一遍，是检验"学的是架构还是 API"的最好方式。开始第 11 周。