2 changed files with 90 additions and 0 deletions
@ -0,0 +1,48 @@ |
|||||
|
# MonitorDeviceList 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:** 抽出左侧设备列表面板;筛选/选中逻辑留页面。 |
||||
|
|
||||
|
**Architecture:** 展示组件 + v-model search/filter + docks 列表 + 事件上抛。 |
||||
|
|
||||
|
**Spec:** `docs/superpowers/specs/2026-08-28-monitor-device-list-design.md` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 1 |
||||
|
|
||||
|
- Create `src/components/MonitorDeviceList.vue` |
||||
|
- Modify `src/views/MonitorView/MonitorView.vue` |
||||
|
|
||||
|
替换为类似: |
||||
|
|
||||
|
```vue |
||||
|
<MonitorDeviceList |
||||
|
:dock-count="devices.docks.length" |
||||
|
:drone-count="devices.drones.length" |
||||
|
v-model:search="search" |
||||
|
v-model:filter="filter" |
||||
|
:filter-counts="filterCounts" |
||||
|
:docks="filteredDocks" |
||||
|
:selected-dock-ids="selectedDockIds" |
||||
|
:selected-id="selectedId" |
||||
|
:is-dock-active="isDockCardActive" |
||||
|
:altitude-of="droneAltitude" |
||||
|
@clear-selection="clearSelection" |
||||
|
@select-all="selectAllDocks" |
||||
|
@clear-dock-selection="clearDockSelection" |
||||
|
@select="select" |
||||
|
@toggle-select="setDockSelection" |
||||
|
/> |
||||
|
``` |
||||
|
|
||||
|
Commit: `refactor: 抽取 MonitorDeviceList 左侧设备列表` |
||||
|
|
||||
|
### Task 2 冒烟 |
||||
|
|
||||
|
列表渲染;筛选/点选;空态。 |
||||
|
|
||||
|
## 约束 |
||||
|
|
||||
|
不改后台;精确 git add;中文 commit |
||||
@ -0,0 +1,42 @@ |
|||||
|
# MonitorDeviceList 设计 |
||||
|
|
||||
|
## 目标 |
||||
|
|
||||
|
将 Monitor 左侧 `aside.device-panel`(标题、搜索、筛选、多选条、DockDeviceCard 列表)抽为 `MonitorDeviceList.vue`。选中/筛选/多选状态与业务逻辑仍留页面。 |
||||
|
|
||||
|
## 非目标 |
||||
|
|
||||
|
- 不迁 `filteredDocks` / `filterCounts` / `select` / 多选 Set 计算 |
||||
|
- 不改 DockDeviceCard |
||||
|
- 不改地图与详情面板 |
||||
|
|
||||
|
## 契约 |
||||
|
|
||||
|
**Props** |
||||
|
|
||||
|
| prop | 说明 | |
||||
|
|------|------| |
||||
|
| `dockCount` / `droneCount` | 标题计数 | |
||||
|
| `search` | v-model 搜索 | |
||||
|
| `filter` | v-model:`all` \| `online` \| `alarm` | |
||||
|
| `filterCounts` | `{ all, online, alarm }` | |
||||
|
| `docks` | 当前列表(`filteredDocks`) | |
||||
|
| `selectedDockIds` | `Set` 或可 `has(id)` 的集合 | |
||||
|
| `selectedId` | 当前选中设备 id | |
||||
|
| `isDockActive` | `(dock) => boolean` | |
||||
|
| `altitudeOf` | `(drone) => string` 传给卡片 | |
||||
|
|
||||
|
**Emits:** `update:search` · `update:filter` · `clear-selection` · `select-all` · `clear-dock-selection` · `select` · `toggle-select` |
||||
|
|
||||
|
内部继续用 `DockDeviceCard`。 |
||||
|
|
||||
|
## 实现 |
||||
|
|
||||
|
1. `src/components/MonitorDeviceList.vue` |
||||
|
2. MonitorView 用组件替换 `aside.device-panel` |
||||
|
3. Commit: `refactor: 抽取 MonitorDeviceList 左侧设备列表` |
||||
|
4. 冒烟:搜索/筛选/点选机巢卡片正常 |
||||
|
|
||||
|
## 约束 |
||||
|
|
||||
|
精确 git add;中文 commit;跳过全量单测 |
||||
Loading…
Reference in new issue