P0.U-widget-workspace-framework · ADR-12 Phase 1 #2 · DashboardCanvas + 4 套 Preset 首个 UI 变化

Worker:TBD(用户分配)· 部门:前端 (frontend_vue3) 预计:2.5d · 优先级:P1 · 状态:dispatched 隔离:文件隔离(stages/xitest/dashboard/ 全新子目录 · 不动现有 modes/ 业务文件)

🔍 触发与解锁链

触发:P0.U-meter-types-v3 (9fc31c4) zombie 后 ADR-12 Phase 1 #2 解锁(2026-05-29 15:36)
前置就位:7 类 MeterFrame schema + DashboardWidget/Workspace/WorkspacePreset types + xiTestWorkspaceStore 骨架(9fc31c4 落地)
本任务 zombie 后解锁:Phase 2 全部 5 fork(#5/#6/#7 前端 MeasurementNode 实施 + #9 P7 端点已就位 → 联调真后端)
用户期待:本任务完成 → ⭐ 首个用户可见 UI 变化(DashboardCanvas + 拖拽 + 4 套 Preset 切换)

任务定义(基于 ADR-AIOS-12 §2.1 + §2.5 + §2.6)

按 ADR-12 §2.1 主决议 + §2.5 Widget 容器 8 大功能 + §2.6 4 套 Preset,落地 Widget Workspace UI 框架。仅 stages/xitest/dashboard/ 全新子目录 + xiTestWorkspaceStore 业务实施 · 不动现有 modes/ 业务组件。

完整 prompt(直接复制粘贴 worker 终端)

[U-thread] P0.U-widget-workspace-framework
[部门] 前端 (frontend_vue3) · 推荐 skill: vuejs-typescript-best-practices
[Worker CWD] d:/work/25_claude/workspace/AlgoDepartment/04_development/(由用户分配的 worker / worktree 决定)
[Occupies] P0.K-shared-meter-dock(写) · P0.K-shared-types(read) · P4.K1-page-layout(read · stages/xitest/index.vue 挂载)
[隔离] 文件隔离 · 仅写 frontend_vue3/src/stages/xitest/dashboard/* 全新子目录 + xiTestWorkspaceStore 业务实施 + index.vue 挂载点
       严禁动 stages/xitest/modes/*(P4.U3 ceecccf 已实装的 regression/realtime mode · 后续 Phase 2 才动)
[优先级] P1 · 2.5d · ADR-12 Phase 1 #2 · ⭐ 用户最关心的"首个 UI 变化"
[ADR] docs/08-implementation/40-aios/ADR/ADR-AIOS-12-xitest-realtime-arch.md(必读 §2.1 + §2.5 + §2.6 + §2.11)
[业务行为契约引用] ADR-AIOS-12 §3.1-§3.7 7 类 MeasurementNode × 5 项契约(本任务实施容器层 · widget 真实业务行为留 Phase 2)
[参考文档](绝对路径)
  - d:/work/25_claude/workspace/AlgoDepartment/06_docs/site-build/docs/08-implementation/40-aios/ADR/ADR-AIOS-12-xitest-realtime-arch.md(主 ADR · §2/§3 必读)
  - d:/work/25_claude/workspace/AlgoDepartment/04_development/frontend_vue3/src/types/measurement-node.ts(P0.U-meter-types-v3 9fc31c4 落地 · MeasurementNode 7 子能力)
  - d:/work/25_claude/workspace/AlgoDepartment/04_development/frontend_vue3/src/types/dashboard-widget.ts(DashboardWidget + Workspace + WorkspacePreset · 9fc31c4 落地)
  - d:/work/25_claude/workspace/AlgoDepartment/04_development/frontend_vue3/src/stores/xiTestWorkspaceStore.ts(Pinia store 骨架 · 9fc31c4 落地 · 本任务填实 actions/getters)
  - d:/work/25_claude/workspace/AlgoDepartment/04_development/frontend_vue3/src/stages/xitest/index.vue(P4 stage 入口 · 本任务在此挂载 DashboardCanvas)
  - d:/work/25_claude/workspace/AlgoDepartment/06_docs/site-build/docs/08-implementation/40-aios/prompts/done/P0.U-meter-types-v3--9fc31c4.md(同部门标本 · 严格仿写 frontmatter + 8 段格式)

【背景】
ADR-12 Phase 1 #2 是 Widget Workspace UI 框架起手 · DashboardCanvas + Widget 容器 + 4 套 Preset 切换。完成后用户能首次看到 ADR-12 落地 UI(主 stage 区拖拽 widget · 切换 Preset · 容器框架)。Phase 2 fork #5/#6/#7 才填实每类 MeasurementNode 真实业务行为。

【执行步骤】

Step 1 · read 已有基础(只读)
- read frontend_vue3/src/types/{measurement-node,dashboard-widget,workspace,task-flow}.ts(9fc31c4 schema)
- read stages/xitest/index.vue(P4 stage 入口 · 当前 modes/realtime + modes/regression 占位 · 本任务挂载 DashboardCanvas)
- 确认现有 6 stub vue(K-shared-meter-dock · ea5e9e4)是 read-only 引用

Step 2 · 选 vue-grid-layout 集成方案
- 推荐 npm i vue-grid-layout(成熟开源 · 6.x 兼容 Vue 3)· 或自研 div + CSS Grid + drag/resize 库
- ⚠️ 严守 .clinerules v1.6 §prompt 内容硬约束 · 不嵌入 Vue SFC 全段(让 worker 自决)

Step 3 · 新建 stages/xitest/dashboard/ 子目录(全新)
- DashboardCanvas.vue(主画布 · 集成 vue-grid-layout · 8 大功能:Drag/Resize/Dock/Float/Split/Fullscreen/Save Layout · Multi-monitor schema 留)
- WidgetContainer.vue(单 widget 容器 · props: DashboardWidget · 渲染 measurementNode + state(docked/floating/fullscreen/split-h/split-v))
- WorkspacePresetSwitcher.vue(顶栏切换器 · 4 套 Preset 按钮:Tuning/Electrical/Recording/Multi-channel · 切换时调 store action loadPreset)
- 最小 4 个新 .vue · 不嵌入完整代码骨架(prompt ≤ 220 行硬约束)

Step 4 · 实施 xiTestWorkspaceStore actions(填实骨架)
- loadPreset(preset: WorkspacePreset):加载 4 套预设 widget 组合(Tuning=Transfer+FFT+Phase+RMS · Electrical=THD+SINAD+Scope+Generator · Recording=Waveform+Spectrogram+Markers · Multi-channel=RMS Matrix + Delay Matrix + Phase Matrix)
- saveLayout():序列化 widgets[] + gridLayout 到 Workspace · 持久化(localStorage / IndexedDB · Phase 3 才完整 · 本任务先 localStorage 简化)
- addWidget(measurementNodeId: string):创建 DashboardWidget · 默认 layout 在第一个空位
- removeWidget(id: string):清理 + 释放 measurementNode

Step 5 · 在 stages/xitest/index.vue 挂载
- 加 <DashboardCanvas /> 容器 · 与现有 modes/* 共存(用户切到 realtime 模式 → 显示 DashboardCanvas · 切到 regression → 显示现有 RegressionMode.vue)
- 不破坏现有 5 mode chip 切换逻辑

Step 6 · 单元测试
- 新增 dashboard-canvas.test.ts(渲染 + 切 Preset + 拖拽事件触发)
- 新增 workspace-preset-switcher.test.ts(4 套 Preset 切换 · loadPreset action 调用)
- 新增 xiTestWorkspaceStore-actions.test.ts(loadPreset/addWidget/removeWidget)
- test:unit 基线 312/3 → 目标 ≥ 330(+18 用例)

Step 7 · 验收
- npm run typecheck → ✓ exit 0
- npm run build → ✓ 零错误(vue-grid-layout 集成不引入既有错误)
- npm run test:unit → ≥ 330/3
- 浏览器手动测试:打开 /xitest?mode=realtime → 看到 DashboardCanvas 框架 · 切 Preset 按钮 4 套切换流畅

【验收】

- typecheck/build 全绿 · test:unit ≥ 330/3
- DashboardCanvas + WidgetContainer + WorkspacePresetSwitcher 3 新 .vue + xiTestWorkspaceStore actions 实施
- 用户能在浏览器看到:① DashboardCanvas 主画布 ② 顶栏 4 套 Preset 切换按钮 ③ 切换流畅(预设 widget 重新组合)
- 不动 stages/xitest/modes/*(regression/realtime · P4.U3 实装)
- 与 aios-cpu1 ADR-11 实施完全不冲突(子目录全新 · 0 重叠)

**端到端真值** ⭐(.clinerules v1.8 §业务行为契约必填段强制要求)
- e2e 真值:浏览器打开 /xitest?mode=realtime → DashboardCanvas 渲染 · 切 Tuning Preset → 4 widget 占位(Transfer/FFT/Phase/RMS · 各显示 measurementNode.type 占位 · Phase 2 才填实业务行为)
- 切 Electrical Preset → 4 widget 占位(THD/SINAD/Scope/Generator)
- 切 Recording Preset → 3 widget 占位(Waveform/Spectrogram/Markers)
- 切 Multi-channel Preset → 3 widget 占位(RMS Matrix/Delay Matrix/Phase Matrix)
- 自查清单:
  - [ ] DashboardCanvas 8 大功能(Drag/Resize/Dock/Float/Split/Fullscreen/Save Layout)逐项可触发
  - [ ] 4 套 Preset 切换 · widget 占位重新组合
  - [ ] WidgetContainer state 切换(docked/floating/fullscreen/split-h/split-v)
  - [ ] xiTestWorkspaceStore actions 测试覆盖(loadPreset/addWidget/removeWidget/saveLayout)
  - [ ] 不破坏现有 modes/* 切换逻辑(realtime/regression mode 共存)

【commit】
- subject:`feat(P0.U-widget-workspace-framework/dashboard): Widget Workspace 框架 + 4 套 Preset · ADR-12 Phase 1 #2`
- trailer:`[step=7/7] [pid=P0] [uid=U-widget-workspace-framework] [occupies=P0.K-shared-meter-dock+P0.K-shared-types+P4.K1] [files=stages/xitest/dashboard/*.vue+stores/xiTestWorkspaceStore.ts+stages/xitest/index.vue+tests/*]`

【禁止】
1. ❌ 不动 stages/xitest/modes/*(P4.U3 ceecccf 已实装的 regression/realtime mode · 后续 Phase 2 才动)
2. ❌ 不实施 measurementNode 真实业务行为(本任务仅占位 widget · widget 内部业务行为留 Phase 2 #5/#6/#7)
3. ❌ 不嵌入完整 Vue SFC 骨架(.clinerules v1.6 §prompt 内容硬约束)· worker 自决具体实现风格
4. ❌ 不绑定 CPU(本 prompt frontmatter worker: TBD · 用户分配 worker/worktree)
5. ❌ 不与 ADR-11 P3 fork 1-4 冲突(P3 改 stages/xitune/* · 本任务改 stages/xitest/*)
6. ❌ 不实施 Multi-monitor UI(schema 留 monitor 字段 · UI 实施留下季度 · ADR-12 §2.5)
7. ❌ 不验"typecheck 全绿就 commit"——必须按业务行为契约 5 项自查 · 浏览器手动测试 4 套 Preset 切换

解锁链(本任务 zombie 后)

✅ Phase 2 #5 P0.U-measurement-rms-fft-phase(2.0d · RMS+FFT+Phase 真实业务实施)
✅ Phase 2 #6 P0.U-measurement-transfer-waveform(2.0d · Transfer+Waveform · Smaart 双通道)
✅ Phase 2 #7 P0.U-measurement-electrical-recorder-stub(1.5d · Electrical+Recorder schema + UI stub)
⭐ 用户首次看到 ADR-12 落地 UI · 后续 fork 在本任务框架内填实

风险评估

风险	缓解
⚠️ vue-grid-layout 与 Vue 3 版本兼容问题	选 6.x 版本 · 已验证 Vue 3 兼容 · 备选自研 div + CSS Grid
⚠️ 切 Preset 时 widget 切换闪烁	用 v-show 替代 v-if · 或加 transition 动画(参考现有 stages/xitest 风格)
⚠️ saveLayout 持久化方案不一致	本任务用 localStorage 简化 · Phase 3 #11 P0.U-bottom-dock-storage-engine 完整实施 IndexedDB

历史

时间	事件	hash
2026-05-29 15:36	dispatched · ADR-12 Phase 1 #2 解锁 · #1 zombie(9fc31c4)后立即派	—
2026-05-29 19:48	✅ zombie · DashboardCanvas + WidgetContainer + 4 套 Preset 切换 + xiTestWorkspaceStore actions 实施 · 🎉 ADR-12 Phase 1 全闭环 · 解锁 Phase 2 #5/#6/#7	`a7df354`