laic-frontend/docs/superpowers/plans/2026-08-28-monitor-detail-panel.md

MonitorDetailPanel Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 抽出 Monitor 右侧整块 aside.detail-panel 为展示组件；live/command/dockStatus 逻辑留页面。

Architecture: MonitorDetailPanel.vue 接收 VM props + emits。页面组装字符串/布尔后传入；controlExpanded 用 v-model:control-expanded。dock-status dialog、command-progress-float、地图不动。

Tech Stack: Vue 3、现有 LivePlayer、prototype.css

Spec: docs/superpowers/specs/2026-08-28-monitor-detail-panel-design.md

---

Task 1: 创建组件并接线

Files:

• Create: src/components/MonitorDetailPanel.vue

• Modify: src/views/MonitorView/MonitorView.vue

• Step 1: 将现 aside.detail-panel 模板（含 empty）迁入 MonitorDetailPanel.vue，改为 props/emits（见 spec）。

• Step 2: 页面用 computed 组装 VM；替换 aside；保留 live/runCommand/dialog/rt script。

• Step 3: controlExpanded 双向绑定到 layout class。

• Step 4: LivePlayer 在组件内；@toggle→emit toggle-live；全屏按钮 emit fullscreen-live，页面继续调现有 fullscreenLive（持有 livePlayerRef：组件 defineExpose({ livePlayerRef })，页面 detailPanelRef）。

• Step 5: 静态核对无残留内联 detail-header；commit
  refactor: 抽取 MonitorDetailPanel 右侧详情面板

Task 2: 冒烟

• 选中机巢/无人机：面板各区块正常
• 展开更多控制：layout control-expanded 生效
• 点一条命令：progress float 仍出现（可取消确认）
• 直播区按钮不报错；dock「查看详情」开 dialog
• 无 console error

约束

• 不改后台；精确 git add；中文 commit；跳过全量单测