docs: add monitor detail panel fit and dock runtime design

Align monitor right panel with jcWeb 3 dock metrics and 1080p one-screen density goals.

docs/superpowers/specs/2026-08-25-monitor-detail-panel-fit-design.md

@@ -0,0 +1,99 @@
+# 监控页右侧详情栏：机巢运行态补齐 + 1080p 一屏密度
+
+## 背景
+
+`/monitor` 选中设备后，右侧 `detail-panel` 在 `1920×1080` 下内容偏高，需要滚动才能操作控制区。同时对照 `jcWeb 3` 原型，机巢态运行指标与原型不一致：当前展示舱内温湿度 / PLC 连接，原型为电量 / 充电 / 舱门 / 控制模式，并提供「查看详情」入口。
+
+## 目标
+
+1. 机巢运行态对齐 `jcWeb 3`
+2. 增加「查看详情」跳转设备详情页
+3. `1920×1080` 下右侧栏尽量整栏一屏显示（默认快捷控制与展开「更多控制」都尽量不滚）
+4. 不改变控制指令语义与业务数据协议
+
+## 非目标
+
+- 不改左侧设备列表信息架构
+- 不重构整页布局为新组件体系
+- 不新增后端字段；仅复用现有 realtime / environment / devicesStore 数据
+- 不做小于 1080p 高度的强制一屏（小屏仍允许滚动）
+
+## 对照结论（jcWeb 3 → 当前）
+
+原型机巢右侧栏结构：
+
+1. header
+2. 实时画面
+3. 运行状态：无人机电量 / 充电状态 / 舱门状态 / 控制模式 +「查看详情」
+4. 机巢环境：舱外温度 / 风速 / 雨量
+5. 快捷控制 / 更多控制
+
+当前实现缺口：
+
+- 机巢 `metric-grid` 使用温湿度与 PLC，缺少充电 / 舱门 / 控制模式
+- 缺少运行状态旁「查看详情」文本按钮（虽有 header 最大化按钮，但与原型入口不一致）
+- 区块间距与控件高度导致 1080p 易溢出
+
+## 设计
+
+### 1. 机巢运行态指标
+
+选中机巢时，`status-section` 改为：
+
+| 格子 | 文案 | 数据来源 |
+|---|---|---|
+| 1 | 无人机电量 | 绑定无人机 `selectedDrone.battery` |
+| 2 | 充电状态 | `realtime.chargingState`（文案映射复用 DeviceDetailView：`charging→充电中` 等） |
+| 3 | 舱门状态 | 复用 DeviceDetailView 的左右门汇总逻辑（已关闭 / 已打开 / 不一致 / `--`） |
+| 4 | 控制模式 | `record.mode` 或 `realtime.controlMode` 文本 |
+
+标题：
+
+- `机巢状态` → `运行状态`
+- 右侧增加文本按钮 `查看详情`，点击走现有 `goDetail()`（`device-detail`）
+
+充电中等成功态可沿用现有 `.success` / green-text 视觉。
+
+### 2. 机巢环境
+
+保留环境区块，不删除。展示字段保持现有数据绑定（风速 / 室外温度 / 降雨）；若后续单独对齐雨量单位文案，另开任务。本任务不把环境改成阻塞项。
+
+### 3. 无人机态
+
+保持现有飞行状态四格（电量 / 高度 / 速度 / 卫星）。速度继续一位小数。本任务不为无人机新增任务进度条（`jcWeb 3` 有，但超出本次“缺机巢详情 + 一屏”范围）。
+
+### 4. 1080p 密度
+
+以 CSS 密度压缩为主，结构不拆：
+
+- 压缩 `detail-header`、section padding、`section-title` margin
+- 适度降低视频区高度
+- 压缩 `metric-grid` 卡片高度与字号
+- 压缩 workflow / stage / extra control 按钮高度与间距
+- 展开「更多控制」时再压一档 extra 按钮高度
+
+生效策略：
+
+- 优先用 `@media (min-height: 900px) and (max-height: 1100px)`（覆盖 1080p 主目标）
+- 避免把更小高度屏幕进一步挤爆；小屏保留滚动
+
+### 5. 实现落点
+
+- `src/views/MonitorView/MonitorView.vue`：机巢指标字段、查看详情按钮、必要的展示 helper（可抽本地函数，或轻量复用 DeviceDetail 映射思路；避免大范围跨页耦合）
+- `src/styles/prototype.css`：密度样式与必要的 `.text-button` / 成功态样式对齐
+- 不改命令下发、不改 live 播放逻辑
+
+## 验收
+
+在 `1920×1080`：
+
+1. 选中机巢：可见实时画面、运行状态四格（电量/充电/舱门/控制模式）、环境、快捷控制；右侧栏尽量无纵向滚动
+2. 点击「查看详情」进入对应设备详情页
+3. 展开「更多控制」后尽量仍一屏；若极限溢出，仅允许控制区内部微滚，外层栏优先不滚
+4. 选中无人机：飞行状态 + 环境 + 控制尽量一屏
+5. 小于目标高度的屏幕：不强制一屏，功能正常
+
+## 风险
+
+- 部分机巢 realtime 缺门状态/充电字段时，对应格显示 `--`，不造假数据
+- 一屏与可读性冲突时，优先保证控制可点与关键运行态可读，再压装饰性空白