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