Day 94 · README 与演示资产 — Vue 版重录：作品的第一印象工程
大屏 Vue 版上线了、瘦身了，但 README 和演示视频还是原生版时代的（Day 70 产出）。今天全部更新到 Vue 版：截图重截、GIF 重录、演示视频重录（含 URL 路由这个新卖点）、架构图重画（四层画布 + Pinia + Router）、性能表换新数据。原则不变：面试官 3 分钟看懂 README、5 分钟看完视频、愿意追问。
目录
一、README 的结构性更新
对照 Day 70 的模板，Vue 版的结构性变化：
# 智慧工厂监控大屏 Smart Factory Dashboard（Vue3 版）
一句话：Vue3 + TypeScript + Pinia + Vue Router + ECharts + Canvas 的
工业实时监控大屏——三屏路由轮播、WebSocket 实时链路、Canvas 拓扑。
！[演示 GIF](docs/demo.gif) ← Vue 版重录
！[拓扑屏截图](docs/topo-vue.png) ← 四层画布 + hover 详情
## 在线演示 ← 新增（Day 92 的部署）
https://your-app.vercel.app/?demo=1 （演示数据模式）
本地全栈模式见"快速启动"。
## 技术栈 ← 更新
- 框架：Vue 3.4（Composition API + script setup）
- 状态：Pinia（状态树 + Devtools 时间旅行）
- 路由：Vue Router 4（history 模式 + KeepAlive 缓存）
- 渲染：ECharts 5（按需引入）/ Canvas 2D 四层画布（拓扑）
- 数据：WebSocket + 心跳保活 + 会话序号补传
- 工程：Vite + TypeScript strict
## 快速启动 ← 更新（三模式）
# 模式 1：本地全栈
node server/index.js & npm run dev
# 模式 2：纯前端（演示数据）
npm run dev
# 模式 3：线上部署
npm run build → 静态托管 + SPA 回退（见 docs/deploy.md）
## 架构 ← 重画（第四节）
## 性能 ← 换新数据（Day 93 对比表）
## 与原生版的渊源 ← 新增：演进故事（招聘叙事的钩子）
本项目由一个纯 TS + DOM 的原生版本重构而来（同仓库 dashboard/ 目录），
重构过程与对比分析见博文《原生 vs Vue 开发大屏的体会》。
"与原生版的渊源"一节是 Vue 版 README 的灵魂——它把"重写一遍"从可疑行为变成架构演进的证据。
二、演示视频：Vue 版脚本
Day 70 脚本的升级版（变化点标注）：
【00:00-00:10】开场
镜头：屏 A 全景（入场动效 + KPI 翻牌）
旁白："Vue3 + TypeScript 构建的智慧工厂监控大屏，
三屏路由架构，线上可直接访问。"
【00:10-00:25】★ 新卖点：URL 路由
镜头：点底部圆点切到屏 B → 按后退键回屏 A → 地址栏直接输入 /c
旁白："每块屏都是一条路由——可直达、可回退、刷新不丢。"
【00:25-00:45】屏 B 实时监控
镜头：曲线推进 → 仪表摆动 → 告警列表
旁白："Pinia 全局状态树驱动，同一份数据在四类视图中零同步呈现。"
【00:45-01:10】屏 C 拓扑（技术浓度最高的段落）
镜头：节点状态色变化 → hover 节点出详情面板（迷你趋势）→ 拖拽平移缩放
→ 造一条 danger 告警 → 呼吸脉冲 + 弹窗三联动
旁白："Canvas 四层画布与 Vue 响应式共存——状态在 Pinia，
渲染在画布，桥接走显式契约。告警确认前切屏会被守卫拦截。"
【01:10-01:30】容错能力（保留——永远是高光）
镜头：杀本地 server → 状态灯红 → 重启 → 数据同帧恢复
旁白："断线自动重连，会话序号补传，曲线窗口自动补全。"
【01:30-01:50】工程化证据 ★ 新增
镜头：Devtools 的 Pinia 面板（状态树实时跳动）→ Performance 帧率
旁白："状态可视化调试，长时运行 55 帧以上零泄漏。"
【01:50-02:00】收尾
镜头：README 页面（在线演示链接特写）
旁白："开源，README 一键启动。"
录制纪律（Day 70 原样有效）：脚本先行、三遍取优、1920×1080 锁定、演示数据调到好看区间。
三、截图与 GIF 清单
docs/
demo.gif ≤3MB，README 门面（视频前 30 秒精华：翻牌+轮播+拓扑hover）
screen-a-vue.png 屏 A 全景（含告警滚动条有数据态）
screen-b-vue.png 屏 B 五卡片（曲线有 120 点完整窗口）
screen-c-vue.png 屏 C 拓扑 + hover 详情面板 + 一个 danger 脉冲
devtools-pinia.png ★ 新：Pinia 状态树（状态可视化证据）
lighthouse.png ★ 新：性能跑分卡（Day 93 的成果可视化）
arch-vue.png 架构图（第四节）
截图纪律：全部来自线上部署版（不是 localhost）——地址栏是线上域名时，截图自带"这不是本地玩具"的说服力。
四、架构图重画
原生版架构图（Day 64）是"模块依赖图"；Vue 版要画出数据流与边界（这是三周沉淀的认知升级）：
┌────────────────────────────────────────────────────────────┐
│ Vue 响应式世界 │
│ ┌─────────┐ ┌──────────┐ ┌────────────────────┐ │
│ │ Router │ │ Pinia │ │ 三屏组件（KeepAlive）│ │
│ │ /a /b /c │ │ 状态树 │ │ A/B/C + 弹窗 │ │
│ └────┬────┘ └────▲─────┘ └─────┬──────────────┘ │
│ │ 守卫/轮播 │ storeToRefs │ watch/computed │
├───────┼──────────────┼───────────────┼─────────────────────┤
│ │ 桥（显式契约） │ │
│ │ ▲ emit(id) ▼ update(states) │
│ ┌────┴─────────┴────────────────────┴─────┐ │
│ │ TopoRenderer（markRaw 隔离） │ │
│ │ 四层画布：bg / edges / nodes / anim │ │
│ │ 自治：视口·命中·脉冲相位（每帧私有） │ │
│ └─────────────────────────────────────────┘ │
├───────────────────────────────────────────────────────────┤
│ 数据链路服务：WsDataSource（心跳/重连/补传）→ sink 协议 │
└───────────────────────────────────────────────────────────┘
画图工具：Excalidraw / draw.io / 手绘拍照皆可——能讲清楚比好看重要（这张图会在面试白板上重画一遍）。
五、朋友测试 2.0
Day 70 的"朋友测试"升级版：
测试对象：没看过项目的朋友（最好非技术或半技术）
给的东西：只发 README 链接（含线上演示 URL）
观察点：
□ TA 能否自己打开线上演示（手机也试）
□ 3 分钟内能否说出"这个项目是干嘛的"
□ 演示视频看完没关（5 分钟注意力测试）
□ TA 的第一个问题是什么（= README 最大的悬念，通常该变成下一版的内容）
记录：所有 TA 卡住/疑惑的点 → 今晚修完
六、常见坑点
坑 1：README 只更新技术栈不更新证据
技术栈写了 Pinia，但截图还是原生版的、GIF 还带旧 UI——图文不一致比没图更减分。今天的清单就是防漏。
坑 2：架构图抄别人的画法
网上模板的分层（api/store/view）对不上你的项目（Canvas 边界是你的特色）——画自己真实的架构，面试官问"这张图为什么有 markRaw 隔离层"你能讲 10 分钟，抄的图讲不出。
坑 3：GIF 太大
README 的 demo.gif 超 10MB → 克隆慢、渲染卡。用 ffmpeg/ezgif 压到 3MB 内（降帧率到 10-15fps、缩到 960 宽——GIF 是门面不是正片）。
坑 4：视频里暴露调试残留
Console 面板忘关、测试数据难看（告警 0 条的空屏）、Devtools 的 auditTopoConfig 输出——录制前走一遍"上镜检查"。
七、自测挑战
T1 · README 全面更新（60 分钟）
第一节结构 + 第三节截图清单全部落地；线上截图替换本地截图。
T2 · 演示视频重录（50 分钟）
第二节脚本录制成片（≤2 分钟）+ 30 秒 GIF；上镜检查清单过一遍。
T3 · 架构图 + 朋友测试（40 分钟）
第四节架构图入库 README；找一位朋友跑第五节测试，卡点今晚修完。
八、总结
| 环节 | 要点 |
|---|---|
| README | 演进故事入册 + 三模式启动 + 新证据截图 |
| 视频 | URL 路由/Devtools/守卫拦截是新卖点 |
| 截图 | 线上版录制——自带说服力 |
| 架构图 | 画真实的（含 Canvas 边界）——白板可复现 |
| 朋友测试 | 卡点即改进项——3 分钟与 5 分钟两个注意力门槛 |
资产的壳就位。明天写它的魂：毕业博文《原生 vs Vue 开发大屏的体会》。