2 changed files with 98 additions and 0 deletions
@ -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;跳过全量单测 |
||||
@ -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…
Reference in new issue