diff --git a/docs/superpowers/specs/2026-08-25-monitor-detail-panel-fit-design.md b/docs/superpowers/specs/2026-08-25-monitor-detail-panel-fit-design.md new file mode 100644 index 0000000..195bc48 --- /dev/null +++ b/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 缺门状态/充电字段时,对应格显示 `--`,不造假数据 +- 一屏与可读性冲突时,优先保证控制可点与关键运行态可读,再压装饰性空白