From e154af7083ae335429adcea79d9ef92311d032f2 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Mon, 31 Aug 2026 14:04:43 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20Monitor=20DockDevi?=
 =?UTF-8?q?ceCard=20=E5=AE=9E=E7=8E=B0=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

侧栏机巢卡抽离，分接入与冒烟两步验收。
---
 .../2026-08-28-monitor-dock-device-card.md    | 196 ++++++++++++++++++
 1 file changed, 196 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-08-28-monitor-dock-device-card.md

diff --git a/docs/superpowers/plans/2026-08-28-monitor-dock-device-card.md b/docs/superpowers/plans/2026-08-28-monitor-dock-device-card.md
new file mode 100644
index 0000000..38116fb
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-28-monitor-dock-device-card.md
@@ -0,0 +1,196 @@
+# Monitor DockDeviceCard 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 侧栏机巢设备卡抽成 `DockDeviceCard` 薄展示组件；选中/多选/过滤仍由页面持有。
+
+**Architecture:** 新增 `DockDeviceCard.vue`（dock + 选中态 props，emit `select` / `toggle-select`）。`droneSummary` / `droneTag` 迁入组件；飞行高度通过可选 `altitudeOf(id)` 回调。继续使用 `prototype.css`。
+
+**Tech Stack:** Vue 3 `<script setup>`、TDesign `t-checkbox`、`prototype.css`
+
+**Spec:** `docs/superpowers/specs/2026-08-28-monitor-dock-device-card-design.md`
+
+---
+
+## File map
+
+| 文件 | 职责 |
+|------|------|
+| `src/components/DockDeviceCard.vue` | 单张机巢卡展示 |
+| `src/views/MonitorView/MonitorView.vue` | 接入组件；删除内联卡模板与 summary/tag |
+
+**不改：** 地图、控制条、LivePlayer、filter-row、multi-select-bar、devicesStore、prototype.css
+
+---
+
+### Task 1: DockDeviceCard + MonitorView 接入
+
+**Files:**
+- Create: `src/components/DockDeviceCard.vue`
+- Modify: `src/views/MonitorView/MonitorView.vue`
+
+- [ ] **Step 1: 创建 DockDeviceCard.vue**
+
+```vue
+<template>
+  <article class="device-card" :class="{ active, 'multi-selected': multiSelected }">
+    <div class="device-select-checkbox" :title="`选择${dock.name}`" @click.stop>
+      <t-checkbox
+        :checked="multiSelected"
+        @change="(checked) => $emit('toggle-select', dock.id, checked)"
+      />
+    </div>
+    <button class="device-card-main" @click="$emit('select', dock.id)">
+      <span class="dock-glyph" :class="{ alarm: dock.statusClass === 'alarm', offline: dock.statusClass === 'offline' }">
+        <svg><use href="#i-home" /></svg>
+      </span>
+      <span class="device-copy">
+        <strong>{{ dock.name }}</strong>
+        <small>{{ dock.code }}</small>
+      </span>
+      <i class="status" :class="dock.statusClass">{{ dock.status }}</i>
+    </button>
+
+    <button
+      v-for="drone in dock.children || []"
+      :key="drone.id"
+      class="bound-drone"
+      :class="{
+        active: selectedDroneId === drone.id,
+        flying: drone.statusClass === 'mission',
+        offline: drone.statusClass === 'offline'
+      }"
+      @click="$emit('select', drone.id)"
+    >
+      <span class="tree-line"></span>
+      <svg><use href="#i-plane" /></svg>
+      <span><strong>{{ drone.name }}</strong><small>{{ droneSummary(drone) }}</small></span>
+      <i>{{ droneTag(drone) }}</i>
+    </button>
+
+    <div v-if="dock.statusClass === 'alarm'" class="device-alert">
+      <svg><use href="#i-alert" /></svg>检测到设备告警<span>{{ dock.updated }}</span>
+    </div>
+    <div v-else-if="dock.statusClass === 'offline'" class="device-alert muted">
+      最后在线 {{ dock.updated }}<span>网络中断</span>
+    </div>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({
+  dock: { type: Object, required: true },
+  active: { type: Boolean, default: false },
+  multiSelected: { type: Boolean, default: false },
+  selectedDroneId: { type: String, default: null },
+  altitudeOf: { type: Function, default: null }
+})
+
+defineEmits(['select', 'toggle-select'])
+
+function droneSummary(drone) {
+  if (drone.statusClass === 'mission') {
+    const alt = props.altitudeOf?.(drone.id)
+    if (alt != null) return `飞行中 · ${alt} m`
+    return '飞行中'
+  }
+  if (drone.statusClass === 'offline') return '设备离线'
+  return drone.battery && drone.battery !== '--' ? `已入巢 · 充电 ${drone.battery}` : '已入巢'
+}
+
+function droneTag(drone) {
+  if (drone.statusClass === 'mission') return '飞行中'
+  if (drone.statusClass === 'offline') return '离线'
+  return '在巢'
+}
+</script>
+```
+
+- [ ] **Step 2: MonitorView 替换 device-list 循环**
+
+将 `device-list` 内 `template v-for` + 整段 `article.device-card` 替换为：
+
+```html
+<div class="device-list">
+  <DockDeviceCard
+    v-for="dock in filteredDocks"
+    :key="dock.id"
+    :dock="dock"
+    :active="isDockCardActive(dock)"
+    :multi-selected="selectedDockIds.has(dock.id)"
+    :selected-drone-id="selectedId"
+    :altitude-of="droneAltitude"
+    @select="select"
+    @toggle-select="setDockSelection"
+  />
+  <div v-if="!filteredDocks.length" class="table-empty" style="height:120px;display:grid;place-items:center;color:var(--muted);font-size:10px">暂无匹配设备</div>
+</div>
+```
+
+script：
+
+```js
+import DockDeviceCard from '@/components/DockDeviceCard.vue'
+
+function droneAltitude(id) {
+  return devices.asset(id)?.altitude
+}
+```
+
+删除页面内的 `droneSummary`、`droneTag` 函数（已迁入组件）。
+
+保留：`groupedDocks`、`filteredDocks`、`filterCounts`、`selectedDockIds`、`isDockCardActive`、`setDockSelection`、`selectAllDocks`、`clearDockSelection`、搜索、filter-row、multi-select-bar、地图与控制。
+
+确认 `select` / `setDockSelection` 可直接作为事件处理器（`select(id)`、`setDockSelection(id, checked)`）。
+
+- [ ] **Step 3: 静态核对**
+
+```bash
+rg -n 'DockDeviceCard|device-card|droneSummary|droneTag' src/components/DockDeviceCard.vue src/views/MonitorView/MonitorView.vue
+```
+
+Expected:
+- 组件内有 `device-card` / `droneSummary` / `droneTag`
+- MonitorView 使用 `DockDeviceCard`，无内联 `article.device-card`，无页面级 `function droneSummary`
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/DockDeviceCard.vue src/views/MonitorView/MonitorView.vue
+git commit -m "refactor: 抽取 Monitor DockDeviceCard 侧栏设备卡"
+```
+
+---
+
+### Task 2: 浏览器冒烟
+
+**Files:** 无代码改动（验收）
+
+- [ ] **Step 1: 打开 /monitor**
+
+- 侧栏有 `article.device-card`
+- filter-row（全部/在线/告警）仍在
+- multi-select-bar 仍在
+
+- [ ] **Step 2: 交互**
+
+- 点击机巢主行：选中态 / 右侧聚焦仍工作
+- 点击绑定无人机行：选中无人机
+- checkbox 勾选：`multi-selected` 样式；全选/取消选择可用
+
+- [ ] **Step 3: 回归**
+
+- map-type 卫星/地图仍在
+- 无 console error
+
+- [ ] **Step 4: 记录结果**
+
+失败则修组件事件/class 后补 commit；通过则完成。
+
+---
+
+## 约束
+
+- 工作目录：`/Users/qingyuan/CodeProject/laic-frontend`
+- 不改后台；精确 git add；中文 commit
+- 跳过全量单测；静态核对 + 浏览器冒烟