# Monitor Detail Panel Fit + Dock Runtime Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 监控页右侧详情栏对齐 `jcWeb 3` 机巢运行态（电量/充电/舱门/控制模式 + 查看详情），并在 `1920×1080` 尽量整栏一屏不滚动。

**Architecture:** 在 `MonitorView` 本地复用 DeviceDetail 已有 realtime 映射思路（充电/舱门汇总），替换机巢 metric 四格并加「查看详情」；用 CSS media query 压缩 1080p 密度，不改控制指令与数据协议。

**Tech Stack:** Vue 3、现有 `devicesStore` realtime、`prototype.css`

**Spec:** `docs/superpowers/specs/2026-08-25-monitor-detail-panel-fit-design.md`

---

### Task 1: 机巢运行态字段与查看详情

**Files:**
- Modify: `src/views/MonitorView/MonitorView.vue`

**Steps:**
1. 将机巢 `status-section` 标题改为「运行状态」
2. 标题右侧加文本按钮「查看详情」，`@click="goDetail"`
3. 替换 metric 四格：
   - 无人机电量 → `selectedDrone?.battery || '--'`
   - 充电状态 → `chargeText(rt('chargingState'))`，充电中加 success 样式
   - 舱门状态 → `doorSummary`
   - 控制模式 → `record?.mode || controlModeText(rt('controlMode')) || '--'`
4. 在 `<script setup>` 增加本地 helper（不要跨文件硬耦合 DeviceDetail）：
   - `rt(key)` / `rtObj(key)` 基于 `record.value?.realtime`
   - `chargeText` / `doorSummary` / `isClosed` / `doorValue`
5. 删除或停用机巢态旧的温湿度/PLC 四格（环境区保留）

**Acceptance:**
- 选中机巢可见四格新文案
- 点「查看详情」进入 `/device/:id`
- 缺字段时显示 `--`，不造假

---

### Task 2: 1080p 密度样式

**Files:**
- Modify: `src/styles/prototype.css`
- Modify (如需 class): `src/views/MonitorView/MonitorView.vue`

**Steps:**
1. 增加针对约 1080p 高度的密度规则，例如：
   - `@media (min-height: 900px) and (max-height: 1100px)`
2. 压缩：
   - `.detail-header` min-height / padding
   - `.detail-panel section` padding
   - `.section-title` margin
   - 视频区高度（`.video-frame` / LivePlayer 容器）
   - `.metric-grid > div` min-height / font-size
   - `.workflow-action` / `.stage-actions button` / `.reset-action` / extra control 按钮高度与 gap
3. 展开更多控制时（`.quick-actions.all-controls`）再压一档 extra 按钮
4. 小屏（低于 900px 高）不强制套用，保留滚动

**Acceptance:**
- `1920×1080` 机巢默认态右侧栏尽量无纵向滚动
- 展开更多控制尽量仍一屏；极限溢出时优先控制区内微滚
- 无人机态同样尽量一屏

---

### Task 3: 浏览器冒烟

**Steps:**
1. 启动 `vite-dev`
2. mock / 真实数据选中机巢与无人机
3. 视口设为 `1920×1080`
4. 验证：
   - 机巢四格文案正确
   - 「查看详情」跳转
   - 默认/展开控制尽量无外层滚动
   - 飞行速度仍一位小数（回归）

**Acceptance:**
- 截图或 DOM/样式检查证明 1080p 下外层滚动条不出现（或仅控制区内部）
- 字段与跳转行为正确

---

### Execution note

- 跳过全仓 formatter / 全量测试；只做本页冒烟
- 不改后端协议；realtime 缺值显示 `--`