laic-frontend/docs/superpowers/plans/2026-08-25-monitor-detail-panel-fit.md

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 缺值显示 --