P3.UA11R1-tab2-integrate-cabin-3d · Tab 2 集成 Cabin3DView 替换平面图占位(0.5d)

Worker:ClaudeA · 前端 / 部门:前端 P3-xitune / 预计:0.5d / 优先级:P1 / 状态:dispatched 隔离:🧵 文件隔离(单文件 CabinIRTab/index.vue 主体改 + 1 e2e 新增)

🔍 触发与解锁链

触发	状态	影响
用户 2026-05-31 22:11 实测反馈	✅	原话"3D 创建完了 · 如何应用呢 · 目前看并没有替换当前的替补方案啊"
parent_zombie P0.U-cabin-3d-css-transform	✅ 046fca7	Cabin3DView 共享组件 + types/cabin-3d.ts 已就位(P0.K-shared)· prompt 当时显式排除集成("仅提供 import 路径")
ADR-11 v1.4 R1 §3.4.2 落地路径	✅	共享组件路径:`@/components/measurement-shared/Cabin3DView.vue`

→ 纯前端集成 · 不修改 contract-v1.0 · 不动 ADR-11 fork 1-v3(b77b6a7)5-Tab 整体框架 · 仅 Tab 2 内部替换

任务定义

ADR-11 fork 1-v3(b77b6a7)落地 5-Tab UI · 其中 Tab 2(CabinIR)当前用平面图占位(SVG / Canvas 2D / div grid 等回退方案)· 用户体感"做了组件没用上"。本 fork 集成 P0.U-cabin-3d-css-transform(046fca7)落地的 <Cabin3DView /> 共享组件 · 替换平面图占位 · 闭合用户体验。

核心范围: 1. 替换 Tab 2 主视图:stages/xitune/modes/auto/CabinIRTab/index.vue 删平面图占位代码段 + import Cabin3DView from '@/components/measurement-shared/Cabin3DView.vue' 2. props 适配:从 fork 1-v3 已有 store / props 拿到 seats / channels / mics / irMatrix 数据 · 传给 <Cabin3DView />(零新发明字段 · 严格用 types/cabin-3d.ts 已 frozen schema) 3. emit 接线:Cabin3DView 的 hover- / select- 事件接到 fork 1-v3 现有交互逻辑(eg. 选中座位 / 通道 / mic 触发对应面板更新)· 若现有逻辑不存在则 emit 透传给父组件 4. 占位代码清理:旧平面图 SVG/Canvas/div 段必须完全删除(不留死代码 · grep 验证) 5. e2e 真值:浏览器实测 Tab 2 显示 256 IR 节点 + 拖拽改 rotation + 横竖屏切换 + 主题切换

🚨 全局红线对齐(继承自 cabin-3d fork · 用户拍板 2026-05-30 12:50): - 响应式横竖屏:Cabin3DView 已自带 ResizeObserver · 本 fork 仅需保证父容器(CabinIRTab)正确传递宽高 + 不限制 max-width - 主题色系切换:Cabin3DView 已用 var(--xs-cabin-*) design-token · 本 fork 严禁在 CabinIRTab 引入硬编码 hex(继承红线)

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

[U-thread]: P3.UA11R1-tab2-integrate-cabin-3d(alias: P3.U-tab2-integrate-cabin-3d)
[部门]: 前端 P3-xitune · 推荐 skill: vuejs-typescript-best-practices
[Worker CWD]: d:/work/25_claude/workspace/AlgoDepartment/04_development/
[Occupies]: P3.K-xitune-cabin-tab(写 · 主体改动)+ P0.K-shared-meter-dock(read · import Cabin3DView)
[隔离]: 🧵 file · 仅写 stages/xitune/modes/auto/CabinIRTab/index.vue + e2e 新增 · 不动 fork 1-v3 5-Tab 框架其他 Tab
[优先级]: P1 · 0.5d · ADR-11 v1.4 R1 集成闭环
[ADR]: docs/08-implementation/40-aios/ADR/ADR-AIOS-11-xitune-autotune.md(v1.4 R1)
[业务行为契约引用]: ADR-11 §3.4.2 Tab 2 v1.4 R1 3D 渲染方案 · 用户原话"3D 创建完了 · 如何应用呢 · 目前看并没有替换当前的替补方案"
[参考文档](绝对路径)
  - ADR-11 v1.4 R1:d:/work/25_claude/workspace/AlgoDepartment/06_docs/site-build/docs/08-implementation/40-aios/ADR/ADR-AIOS-11-xitune-autotune.md(§3.4.2 Tab 2 3D 方案锁定段 · 本 fork 主依据)
  - parent zombie 共享组件(046fca7):d:/work/25_claude/workspace/AlgoDepartment/06_docs/site-build/docs/08-implementation/40-aios/prompts/done/P0.U-cabin-3d-css-transform--046fca7.md(看 props/emits 接口)
  - parent zombie fork 1-v3(b77b6a7):d:/work/25_claude/workspace/AlgoDepartment/06_docs/site-build/docs/08-implementation/40-aios/prompts/done/P3.U-autotune-phase1-measure-v3--b77b6a7.md(5-Tab UI 落地 · CabinIRTab 现状)
  - 全局红线:ADR-12 §2.11 第 8+9 项(响应式横竖屏 + design-token 主题 · 继承自 Cabin3DView 自带能力)
  - 现状必读:
    · frontend_vue3/src/components/measurement-shared/Cabin3DView.vue(全文 · 看 props 接口 / emits)
    · frontend_vue3/src/types/cabin-3d.ts(SeatPosition / ChannelInfo / MicInfo / CabinIRMatrix 等 frozen schema)
    · frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue(全文 · 找平面图占位代码段 · 找 store / props 数据源)
    · frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/(若有子组件 · 看是否需联动)

【背景】
ADR-11 v1.4 R1 修订(2026-05-31 13:22)拍板 CSS 3D Transform 替代 three.js · cabin-3d fork(046fca7 ClaudeA 22:05 zombie)落地 `<Cabin3DView />` 共享组件 · 含响应式横竖屏 + design-token + ResizeObserver + 拖拽缩放。

但 cabin-3d fork prompt 当时**显式排除集成**("本 fork 不动 fork 1-v3 整体框架 · 仅提供 import 路径")· 集成留独立小 fork。结果用户 2026-05-31 22:11 实测原话:**"3D 创建完了 · 如何应用呢 · 目前看并没有替换当前的替补方案"** · Tab 2 仍是平面图占位 · 共享组件价值 = 0(没人调用)。

本 fork 闭合最后一公里 · 0.5d 集成任务 · 把 `<Cabin3DView />` 真正替换 Tab 2 平面图占位。

🚨 **真值核查关键点**(本 fork 第一步必跑):
- ① grep `CabinIRTab/index.vue` 找平面图占位代码段(SVG / Canvas 2D / div grid)· 必须全删
- ② grep 找 fork 1-v3 落地的 store / props 数据源(seats / channels / mics / irMatrix 字段)· 类型对齐 types/cabin-3d.ts
- ③ grep `Cabin3DView` 在全 stages/xitune/* 应 0 命中(确认本 fork 是首次集成)

【执行步骤】(5 步 · 0.5d)

Step 1 · 真值核查 + 数据源识别(0.05d)
- git status / git pull origin xistudio --no-rebase
- cat frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue(全文)
- grep -n "svg\|canvas\|平面图\|placeholder\|fallback" frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue(找占位代码段行号)
- grep -n "seats\|channels\|mics\|irMatrix\|cabinIR" frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue(找数据源)
- 输出真值核查到 commit message body:
  · 占位代码现状(SVG/Canvas/div grid · 起止行号)
  · 数据源现状(从 store 还是 props · 字段名清单)
  · 类型对齐情况(是否需在 CabinIRTab 加 type adapter · 还是直接传)

Step 2 · 替换 Tab 2 主视图(0.2d · 主体改动)
- 编辑 frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue
- 顶部加 `import Cabin3DView from '@/components/measurement-shared/Cabin3DView.vue'`
- template 替换:
  - 删:平面图占位段(Step 1 grep 锁定的起止行号 · 整段删除)
  - 加:`<Cabin3DView :seats="seats" :channels="channels" :mics="mics" :irMatrix="irMatrix" @hover-seat="onHoverSeat" @select-ir="onSelectIr" ... />`
- props/store 数据接线:确保 seats/channels/mics/irMatrix 类型对齐 types/cabin-3d.ts(若 fork 1-v3 字段名不同 · 加 computed adapter · 不改 types schema)
- emit handler:hover-* / select-* 接现有 fork 1-v3 交互逻辑(若不存在则 emit 透传父组件)

Step 3 · 占位代码清理 + 死代码核查(0.05d)
- grep `svg\|canvas\|placeholder` frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue(应仅剩与 Cabin3DView 无关的合法用法 · 若仍含平面图相关 · 必须删除)
- grep 未使用的 import / function / computed · 全删除
- 不动 fork 1-v3 5-Tab 整体框架(Tab 1/3/4/5 不碰)

Step 4 · vitest + e2e 真值(0.1d)
- 单测加 1-2 case(若 CabinIRTab 已有 __tests__):
  · case 1:Tab 2 mount · 包含 `<Cabin3DView />` 组件实例(stub 模式 OK)
  · case 2:props 正确传递(seats.length === 4 || 6 · channels.length === N · mics.length === M)
- e2e 新增 e2e/tab2-cabin-3d-integration.spec.ts:
  · 进 P3-xitune stage · 切到 Tab 2 CabinIR
  · 断言:DOM 包含 .xs-cabin-3d-container(Cabin3DView 根 class)
  · 断言:256 IR 节点 DOM 渲染(若 mock 数据提供)
  · 断言:旧平面图 class(svg.cabin-floorplan / canvas.cabin-fallback 等)0 命中
  · 断言:viewport 1920×1080(横屏)+ 1080×1920(竖屏)布局正确(继承自 Cabin3DView)
  · 断言:主题切换浅色↔深色 cabin-shell 颜色变化(继承自 Cabin3DView)

Step 5 · build + 手动 e2e + commit(0.1d)
- cd frontend_vue3
- npm run typecheck 全绿
- npm run test:unit 不退化(基线 356/3)
- npm run test:e2e -- tab2-cabin-3d-integration 全过
- 手动 e2e:
  · npm run dev
  · 浏览器进 P3-xitune stage · 切到 Tab 2 CabinIR
  · ✅ 看到真 3D 座舱(不是平面图)· 256 IR 节点(若 mock 数据)
  · ✅ 拖拽 → 旋转生效 · 滚轮 → perspective 缩放
  · ✅ hover IR 节点 → tooltip 显示
  · ✅ 横竖屏切换 + 主题切换正常
- git add frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue \
          e2e/tab2-cabin-3d-integration.spec.ts
- git commit subject + trailer 见下
- git push origin xistudio

【验收】

形式合规:
- [ ] npm run typecheck 全绿
- [ ] npm run test:unit 不退化(基线 356/3)
- [ ] npm run test:e2e -- tab2-cabin-3d-integration 全过
- [ ] 仅修动 1-2 文件(CabinIRTab/index.vue + e2e 新增)· 不动 fork 1-v3 其他 Tab
- [ ] grep `Cabin3DView` 在 CabinIRTab/index.vue 应 ≥ 1 命中(import + use)
- [ ] grep `svg.*cabin\|canvas.*cabin\|placeholder` 在 CabinIRTab/index.vue 应 0 命中(占位段全删)
- [ ] 不动 components/measurement-shared/Cabin3DView.vue(parent zombie 已 frozen)
- [ ] 不动 types/cabin-3d.ts(parent zombie 已 frozen)
- [ ] 不动 stages/xitune/modes/auto/{Tab1,Tab3,Tab4,Tab5}(本 fork 仅 Tab 2)

业务行为契约(端到端真值 · 必跑):
- [ ] Tab 2 显示真 3D 座舱(不是平面图)· 用户原话"如何应用呢"得到回答
- [ ] 256 IR 节点全渲染(4 座 × 16 通道 × 4 mic · 若 mock 数据提供)
- [ ] 鼠标拖拽改 rotation · 视觉旋转生效
- [ ] 滚轮改 perspective · 视觉缩放生效
- [ ] hover IR 节点 → tooltip 显示
- [ ] viewport 1920×1080(横屏)+ 1080×1920(竖屏)布局正确(全局红线 #1)
- [ ] 主题切换浅色↔深色 cabin-shell 颜色变化(全局红线 #2)
- [ ] 用户回测 ADR-11 v1.4 R1 §3.4.2 Tab 2 用户体感

【commit】
subject:`feat(P3.UA11R1-tab2-integrate-cabin-3d): replace floorplan placeholder with Cabin3DView in CabinIRTab · ADR-11 v1.4 R1 integration · user feedback "3D 创建完了如何应用呢"`

trailer(必须精确):
[step=5/5] [pid=P3] [uid=UA11R1-tab2-integrate-cabin-3d] [occupies=P3.K-xitune-cabin-tab+P0.K-shared-meter-dock(read)]
[files=frontend_vue3/src/stages/xitune/modes/auto/CabinIRTab/index.vue, e2e/tab2-cabin-3d-integration.spec.ts]
[isolation] file(单文件主体 + 1 e2e 新增 · 与 ADR-08-R1 fork 1+2 文件正交)
[derived_from] ADR-AIOS-11 v1.4 R1 集成 fork · parent_zombie 046fca7(共享组件)+ b77b6a7(fork 1-v3 5-Tab UI)
[truth-check] 占位现状=<SVG/Canvas/div grid · 起止行号> · 数据源=<store/props 字段清单> · 类型对齐=<直接传 / 加 adapter>
[acceptance] Tab 2 真 3D 座舱替换平面图 · 用户回测体感闭环

【禁止】(8 项红线)
1. ❌ 禁止动 components/measurement-shared/Cabin3DView.vue(parent zombie 046fca7 已 frozen · 仅 import 用)
2. ❌ 禁止动 types/cabin-3d.ts(parent zombie 已 frozen · 用 computed adapter 解类型对齐)
3. ❌ 禁止动 fork 1-v3 5-Tab 框架(stages/xitune/modes/auto/{Tab1,Tab3,Tab4,Tab5}/* 严禁)
4. ❌ 禁止保留平面图占位代码(必须全删 · grep 验证 0 命中)
5. ❌ 禁止硬编码 hex 色值(全局红线 #2 · 继承自 Cabin3DView design-token)
6. ❌ 禁止跳过响应式横竖屏 e2e(继承全局红线 #1 · viewport 双跑)
7. ❌ 禁止跳过手动 e2e 真值(必须浏览器实测 Tab 2 显示真 3D · 不是仅 typecheck 形式合规通过)
8. ❌ 禁止省略三元组 trailer + truth-check 报告

解锁链(本任务 zombie 后)

✅ ADR-11 v1.4 R1 用户体感闭环(用户原话"3D 创建完了如何应用呢"得到答复 · Tab 2 真 3D 替代平面图)
✅ ADR-11 Phase 2-4 推进解锁(Tab 2 不再是占位 · 后续 Phase 可基于真 3D 验证空间建模算法)
✅ ADR-12 §3.6 Spatial Acoustic View 复用 Cabin3DView 模式被本 fork 验证可行(集成路径明确)

风险评估

风险	缓解
⚠️ fork 1-v3 数据源字段名 / 类型与 types/cabin-3d.ts 不匹配	Step 1 grep 后用 computed adapter 转换(不改 types schema)· commit message truth-check 段报告对齐路径
⚠️ Tab 2 占位代码段定位困难(可能多处分散)	Step 1 grep `svg\\|canvas\\|平面图\\|placeholder\\|fallback` 全文扫描 + 用户原话"替补方案"提示 · 必要时 ask AIOS 协调
⚠️ Cabin3DView emit 事件接线到 fork 1-v3 现有 store action	Step 2 若现有 store action 不存在 · 直接 emit 透传给父组件(不发明新 store action)· 后续可独立 fork 加
⚠️ e2e mock 数据无 256 IR 节点(fork 1-v3 真接口可能未联调)	Step 4 e2e 用 fixture 注入 mock seats/channels/mics/irMatrix · 不依赖真接口(后续 ADR-11 Phase 2-4 真接口联调时再 e2e 升级)
⚠️ 与 ADR-08-R1 fork 1(同 ClaudeA 排队中)文件冲突	文件完全正交:本 fork 改 stages/xitune/ · ADR-08-R1 fork 1 改 stages/xilink/ + Inspector(零文件重叠)· 同 worker 内串行 commit 即可

历史

时间	事件	hash
2026-05-31 22:15	dispatched · 用户 22:11 实测反馈"3D 创建完了如何应用呢"· cabin-3d fork(046fca7)落组件未集成 → 拍板派 0.5d 集成 fork(选项 A · ClaudeA 上下文热)	—