DCU_DesktopController/.qoder/repowiki/knowledge/zh/ESP32 DCU 调试控制台仓库根/ESP32_DCU 调试控制台前端页面集/架构设计.md

以 `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/*`) 交互。