# 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；跳过全量单测