# 模拟器控制面板重构方案 ## 目标 在不破坏现有老版面板的前提下,新增一套新版控制面板,用于承接更复杂的开发调试工作流。 重构目标: - 保留老版入口,确保已有使用习惯不受影响 - 新增工作台式面板,提升连接、控制、观察、排障效率 - 继续复用现有模拟器脚本和 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 协议和数据逻辑 - 用户可以在两个版本之间切换