# 监控页右侧详情栏：机巢运行态补齐 + 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 缺门状态/充电字段时，对应格显示 `--`，不造假数据
- 一屏与可读性冲突时，优先保证控制可点与关键运行态可读，再压装饰性空白