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