# 模拟器控制面板重构方案 ## 目标 在不增加第二套历史 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 协议和调试逻辑继续复用