cmr-mini/doc/debug/模拟器控制面板重构方案.md

模拟器控制面板重构方案

目标

在不破坏现有老版面板的前提下，新增一套新版控制面板，用于承接更复杂的开发调试工作流。

重构目标：

• 保留老版入口，确保已有使用习惯不受影响
• 新增工作台式面板，提升连接、控制、观察、排障效率
• 继续复用现有模拟器脚本和 websocket 协议，避免维护两套逻辑

设计原则

1. 新旧并行
   • 新版入口使用 /
   • 旧版入口保留在 /v1/
2. 逻辑复用
   • 两个页面共用 simulator.js
   • 只通过不同 HTML 布局和 CSS 风格区分
3. 面向调试流程
   • 连接优先
   • 控制第二
   • 观察第三
   • 日志独立

新版布局

新版面板采用工作台布局：

• 顶部：连接状态条
• 左侧：控制区
• 中间：地图与路径预览
• 右侧：状态摘要与快捷观察
• 右下：调试日志浮层

功能分区

1. 顶部连接条

包含：

• 定位模拟连接状态
• 心率模拟连接状态
• 调试日志连接状态
• 一键连接开发调试源
• 新旧面板切换入口

2. 左侧控制区

包含：

• 资源加载
• 定位实时发送
• 路径回放
• 心率模拟
• 新网关桥接

采用折叠分组，默认展开高频项。

3. 中间地图区

保留现有 Leaflet 地图和轨迹预览能力，作为核心观察区。

4. 右侧状态摘要

包含：

• 当前经纬度
• 当前航向
• 当前路径点数
• 最近发送状态
• 最近心率发送状态
• 资源加载摘要
• 网关桥接摘要

5. 日志区

日志继续做成浮层：

• 默认悬浮在地图右下
• 可清空
• 面积更大
• 便于边看地图边看日志

与旧版的关系

旧版和新版应同时可用：

• 新版作为默认工作台
• 旧版继续作为稳定基线
• 问题排查时可快速回退旧版

实施顺序

1. 根路径切换到新版工作台
2. 新增新版样式 workbench.css
3. 复用现有 simulator.js
4. 旧版页面迁移到 /v1/
5. 在旧版和新版之间互相添加跳转入口
6. 更新 README 和调试文档索引

验收标准

• 老版页面继续正常工作
• 新版页面可完整使用现有 GPS、心率、日志、路径、网关能力
• 两个页面共用同一套 websocket 协议和数据逻辑
• 用户可以在两个版本之间切换