【Canvas × Vue】day86-topo-canvas-skeleton

Day 86 · TopoCanvas 组件骨架 — 三层画布迁进组件：ref 挂载与 DPR 适配施工第一天：把第 7 周的三层画布（背景/连线/节点层，Day 46 的分层设计）迁进 Vue 组件骨架。今天的重点是"挂载的时序"——canvas 元素要等 DOM 就位才能拿 getContex

作者：mario 发布时间：2026-09-04

分类：默认分类 , Canvas × Vue

标签： #前端开发

【Canvas × Vue】day85-boundary-analysis

Day 85 · 边界分析 — 哪些数据归 Vue，哪些留在画布：动手前的设计日今天的产出不是代码，是一份边界决策文档——把屏 C 的全部数据逐个过堂：归 Vue、归画布、还是走桥。这份文档是本周的施工图（后面六天都按它干活），也是你第一份"框架边界"的设计记录。边界课的全部价值在今天想清楚：动手

作者：mario 发布时间：2026-09-04

分类：默认分类 , Canvas × Vue

标签： #前端开发

【Vue3】day84-boss-three-screens

Day 84 · BOSS 战 — 三屏完整轮播与周收官：生态替换的全面验收本周收官战。屏 A/B 已迁移、屏 C 本周仍是占位（Week 13 主菜）——但这不妨碍今天做三屏完整轮播验收：占位屏也走真实的路由/缓存/守卫链路。今天的作业是"验收 + 收官"：跑 Day 69 联调清单的 Vue

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day83-screen-a-migration

Day 83 · 屏 A 迁移 — KPI 总览页：把"开场白"搬进 Vue 生态件就绪（Router/Pinia/KeepAlive/Teleport），今天迁最后一块主内容：屏 A（KPI 总览页）——大屏的"开场白"：四 KPI 翻牌矩阵 + 厂区俯视占位图 + 告警滚动条。它的迁移几乎全是装

作者：mario 发布时间：2026-09-03

分类：前端开发 , Vue3

标签： #前端开发

【Vue3】day82-keepalive-teleport

Day 82 · KeepAlive 与 Teleport — 缓存与传送：大屏交互的两件利器路由切换=卸载重建（Day 78 的痛）今天解决：KeepAlive 缓存屏幕组件实例，切走不销毁、切回零等待——它就是 Day 64"opacity 保实例"策略的官方实现，还附赠 onActivate

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day81-pinia-datalink

Day 81 · Pinia 进阶 — 数据源接入与 store 设计：ScreenStore 退役日昨天状态入了 store 但没有活水。今天把 WS 数据源接进 dashboard store——分层设计是今天的主题：实例（连接、定时器）住 store 外，数据与状态住 store 内，分频策

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day80-pinia-basic

Day 80 · Pinia 上手 — defineStore：全局状态的正规军替换周第二刀：Pinia 接管全局数据。今天先建 useDashboardStore——把 Day 65 ScreenStore 的"状态部分"（latest / alarms / tempWindows / conn

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day79-router-guards-carousel

Day 79 · 路由进阶 — 守卫、过渡与轮播联动：ScreenRouter 退役日昨天路由表跑通，但轮播还握在手写 ScreenRouter 手里。今天写一个纯决策的轮播调度器（composable）：它只回答"何时该切、切到哪"，切换动作统一走 router.push——职责分离后，守卫（b

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day78-vue-router-basic

Day 78 · Vue Router 基础 — 三屏路由化：URL 成为状态今天让 Day 64 手写的 ScreenRouter 开始退役：三屏切换交给 Vue Router，URL 成为屏幕状态的一部分——/a /b /c 分别对应三屏，刷新不丢、后退可用、可收藏分享。这是替换周的第一刀：只

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day77-boss-screen-b-vue

Day 77 · BOSS 战 — 屏 B Vue 版整屏迁移与"原生 vs Vue"对比报告本周收官。今天把 Day 74-76 的零件装配成完整的屏 B（实时监控页）Vue 版：五卡片布局 + 五图表模块 + 容错表现，与原生版行为逐项对齐。然后做本周最有价值的事：整理"原生 vs Vue 对

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day76-echarts-component

Day 76 · ECharts Vue 组件封装 — VChart：图表基座的三个老大难 ECharts 与 Vue 的结合是工业可视化的高频面试题，也是三个老大难的聚集地：0 尺寸容器 init 失败（Day 52 坑 1 的 Vue 版）、数据变化驱动更新（watch 的正确姿势）、dispo

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day75-composables

Day 75 · Composables 组合式函数 — 数据层的 Vue 化改造组合式函数不是"工具函数"，是有状态逻辑的复用单元。今天的核心工程：useScreenStore——把 Day 65 的手写 ScreenStore 桥接进响应式世界，并封装 useDataSource 让"订阅与退

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day74-props-emit-slot

Day 74 · props / emit / slot — 组件化第一课：装配三件套逻辑已就绪（Day 73），今天学把逻辑和结构装配成可复用组件的三个通道：props（父 → 子的数据）、emit（子 → 父的事件）、slot（父 → 子的内容分发）。实战两个组件：TechCard（Day 6

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day73-computed-watch

Day 73 · computed / watch / 生命周期 — 让状态自己流动起来昨天学会了"存状态"，今天学"状态之间的传导"：computed（派生状态）、watch（联动副作用）、生命周期钩子（成对清理纪律）。实战对象是 Day 67 的 KPI 数字翻牌器——它恰好是三者的完美交汇：

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day72-reactivity

Day 72 · 响应式核心 — ref / reactive / shallowRef 与模板语法响应式是 Vue 的心脏，也是"命令式 → 声明式"转型的地基。今天用三个实战组件吃透它：标题栏状态灯（连接状态的响应式映射）、屏切换的 v-show（对照 Day 64 的 opacity 策略）

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【Vue3】day71-vite-setup

Day 71 · Vite 项目搭建与大屏骨架迁移 — Vue 版的第一块砖今天不碰任何图表和数据，只做一件事：把大屏的"壳"用 Vue3 重建——Vite 工程、SFC 单文件组件、三屏容器、scale 自适应壳。壳迁移完成的标准：浏览器打开后，三个屏幕容器按 Day 64 的布局正确摆放（内容

作者：mario 发布时间：2026-09-03

分类：默认分类 , Vue3

标签： #前端开发

【阶段1收官】day70-boss-dashboard-demo

Day 70 · BOSS 战 — 交付日：验收、演示视频、简历条目与第 2 个月毕业昨天整机联调完毕，今天一行新代码都不写（写了一律回滚——交付日的代码改动是风险，不是产出）。今天做四件事：按验收清单做最终验收、录一支 ≤2 分钟的演示视频、写 README 与简历条目、做第 2 个月的毕业总结

作者：mario 发布时间：2026-09-03

分类：默认分类 , 阶段1收官

标签： #前端开发

【阶段1收官】day69-monitor-integration

Day 69 · 监控页整合与全屏联调 — 最后一块拼图与第一次整机测试屏 B 的迁移本身不难——第 9 周面板本来就是"订阅 DataSource 渲染"的结构，改成"订阅 Store"只是换数据入口。今天真正的主题是联调：三屏齐活后的整机测试——路由切换与图表 resize 的时序、数据流在轮

作者：mario 发布时间：2026-09-03

分类：默认分类 , 阶段1收官

标签： #前端开发

【阶段1收官】day68-topology-screen

Day 68 · 拓扑图页整合 — 让第 7 周的编辑器在实时数据里活过来今天是本周最有意思的一次迁移：第 7 周的流程图编辑器是"用户拖节点建图"，大屏拓扑页要的是"配置定义图 + 数据驱动状态"。同一个渲染内核，两种工作模式——这正好验证当初分层设计（model/render/interact

作者：mario 发布时间：2026-09-03

分类：默认分类 , 阶段1收官

标签： #前端开发

【阶段1收官】day67-visual-motion

Day 67 · 大屏视觉工程（下）— 入场动效、数字滚动与氛围渲染：克制的生命感昨天的大屏"能看"了，但像一张静态海报。今天注入生命感——入场动效编排、KPI 数字滚动、卡片扫描线氛围。但工业大屏的动效哲学和营销页完全相反：营销页动效越炫越好，大屏动效的第一美德是

作者：mario 发布时间：2026-09-03

分类：默认分类 , 阶段1收官

标签： #前端开发