# 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