1.1 KiB
1.1 KiB
以 tabs.html 作为单窗口多标签的外壳，通过 <iframe> 嵌入 pages/ 下各功能页（OTA 主页 index.html、CAN 通信 can.html、CAN 监控 can_monitor.html、电机控制 motor.html），并引用同级 lab/ 下的实验页；标签列表由 JS 的 TABS 数组驱动，当前激活标签经由 iframe load 事件检测 pathname 后同步高亮并持久化至 localStorage (dcu_tab)。所有共享样式集中在 css/：base.css 定义深色设计令牌与全局重置；layout.css 提供 header-bar、卡片、表单、按钮、抽屉等布局组件；components.css 实现上传区、进度条、指标卡、阶段胶囊等原子组件；responsive.css 管理断点与合成器友好动画；can.css、motor.css 为各自功能的独立主题。每个 page HTML 通过 link 引用基础样式，其中 motor.html 自带完整 seed tokens 隔离主题，不依赖 base.css 颜色变量。页面内嵌 JavaScript 或通过 <script type="module"> 加载 ../js/... 逻辑脚本，与后端 ESP32 HTTP API (/can/*, /ota/*) 交互。