Browse Source

docs: 增加 MonitorDetailPanel 设计与实现计划

右侧详情面板抽离,直播与指令逻辑留在页面。
main
xiaosi 3 weeks ago
parent
commit
8dc80b936f
  1. 38
      docs/superpowers/plans/2026-08-28-monitor-detail-panel.md
  2. 60
      docs/superpowers/specs/2026-08-28-monitor-detail-panel-design.md

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

@ -0,0 +1,38 @@
# 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;跳过全量单测

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

@ -0,0 +1,60 @@
# MonitorDetailPanel 设计
## 目标
`MonitorView` 右侧整块 `aside.detail-panel`(含空态)抽为 `MonitorDetailPanel.vue`,页面模板瘦身;**直播会话 / `runCommand` / `commandProgress` / dockStatus dialog 逻辑仍留在 MonitorView**。
## 非目标
- 不改地图、`command-progress-float`、侧栏设备列表
- 不把 live join/leave/heartbeat、指令轮询迁入组件
- 不把 dock-status `t-dialog` 塞进 aside
- 首轮不按 section 拆多文件
## 归属
| 能力 | 归属 |
|------|------|
| detail-panel 模板(header/relation/video/status/mission/env/actions/empty) | 组件 |
| `live` 状态机、`toggleLive`/`openLive`/`closeLive`/`fullscreenLive` | 页面 |
| `runCommand`、`buttonStatusText`、`commandProgress` | 页面 |
| `dockStatusOpen` + dialog + summary/rt | 页面 |
| `controlExpanded` | 页面持有(layout class 依赖),组件 v-model |
## 组件契约(精简)
**Props(VM 对象,页面组装成字符串后再传入):**
- `selected: boolean`
- `header`, `relation`, `liveView`, `dockStatus`, `flightStatus`, `mission`, `environment`, `actions`
**Emits:**
- `close` / `open-device-detail` / `select-parent`
- `toggle-live` / `fullscreen-live` / `live-error`
- `open-dock-status` / `open-mission-detail`
- `update:controlExpanded`
- `command``{ title, desc }`
**LivePlayer:** 组件内渲染;fullscreen 由组件对内部 ref 调用,失败可 `emit('toast')` 或沿用 `@fullscreen-live` 让页面处理。为保持现语义:**校验+toast 留页面,组件 expose `livePlayerRef``@fullscreen-live` 由页面调现有 `fullscreenLive`**(推荐后者,改动最小)。
## 验收
1. 选中机巢/无人机:详情头、视频区、状态/任务/环境、快捷控制与展开一致
2. 直播开关/全屏入口仍可用
3. 下发命令仍走页面 `runCommand`,地图上 progress float 仍工作
4. 「查看详情」仍打开页面 dock-status dialog
5. `control-expanded` 仍作用到 `monitor-layout`
6. 无 console error
## 实现
1. 新增 `src/components/MonitorDetailPanel.vue`
2. 改 `MonitorView`:替换 aside,组装 VM + 接线 emits
3. Commit:`refactor: 抽取 MonitorDetailPanel 右侧详情面板`
4. 浏览器冒烟
## 约束
- 不改后台;精确 git add;中文 commit
- 跳过全量单测;冒烟为准
Loading…
Cancel
Save