2.1 KiB
2.1 KiB
模拟器控制面板重构方案
文档版本：v1.0 最后更新：2026-04-02
目标
在不增加第二套历史 UI 负担的前提下，整理出一套新版控制面板，用于承接更复杂的开发调试工作流。
重构目标：
- 新增工作台式面板，提升连接、控制、观察、排障效率
- 继续复用现有模拟器脚本和 websocket 协议，避免维护两套逻辑
- 最终只保留新版入口，避免长期双份维护
设计原则
- 单入口维护
- 新版入口使用
/ - 模拟器只保留一个工作台入口
- 新版入口使用
- 逻辑复用
- 继续复用
simulator.js - 只维护一套 HTML 布局和 CSS 风格
- 继续复用
- 面向调试流程
- 连接优先
- 控制第二
- 观察第三
- 日志独立
新版布局
新版面板采用工作台布局：
- 顶部：连接状态条与全局模拟通道号
- 左侧：控制区
- 中间：地图与路径预览
- 右侧：运行摘要、当前位置、最近事件
- 右下：调试日志浮层
功能分区
1. 顶部连接条
包含：
- 定位模拟连接状态
- 心率模拟连接状态
- 调试日志连接状态
- 一键连接开发调试源
- 全局模拟通道号
2. 左侧控制区
包含：
- 资源加载
- 定位实时发送
- 路径回放
- 心率模拟
- 新网关桥接
采用折叠分组，默认展开高频项。
3. 中间地图区
保留现有 Leaflet 地图和轨迹预览能力，作为核心观察区。
4. 右侧状态摘要
包含：
- 运行摘要
- 当前位置
- 最近事件
5. 日志区
日志继续做成浮层：
- 默认悬浮在地图右下
- 可清空
- 面积更大
- 可缩到一角
- 支持按 scope 过滤
- 便于边看地图边看日志
实施顺序
- 根路径切换到新版工作台
- 新增新版样式
workbench.css - 复用现有
simulator.js - 清理历史入口和旧文案
- 更新 README 和调试文档索引
验收标准
- 新版页面可完整使用现有 GPS、心率、日志、路径、网关能力
- 模拟器只保留一个工作台入口
- websocket 协议和调试逻辑继续复用