docs: 新增 .qoder Repowiki 知识库文档
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
schema_version: 1
|
||||
module_path: frontend_pages
|
||||
title: ESP32/DCU 调试控制台前端页面集
|
||||
scope:
|
||||
- pages/
|
||||
- css/
|
||||
- tabs.html
|
||||
source_files: []
|
||||
depends_on: []
|
||||
related_to:
|
||||
- path: python_server
|
||||
reason: esp32_server.py 作为静态文件服务器提供 tabs.html、pages/ 与 lab/ 目录下的 HTML，页面由本服务同源 serving。
|
||||
kk_module_id: d0ed905a-8c06-4326-a9e3-22a026d276f7
|
||||
kk_ordinal: 1
|
||||
kk_cards:
|
||||
architecture_design:
|
||||
id: 921fdcb0-3189-46ef-963e-539b2f5e2b3b
|
||||
title: ESP32/DCU 调试控制台前端页面集
|
||||
coding_conventions:
|
||||
id: 4a7606c7-8beb-455d-95f1-4605e6668630
|
||||
title: ESP32/DCU 调试控制台前端页面集
|
||||
overview:
|
||||
id: 6eafe8be-cffd-4e08-9002-1332165ffedf
|
||||
title: ESP32/DCU 调试控制台前端页面集
|
||||
tech_stack:
|
||||
id: eb3279e1-7af2-4ade-ba37-5bb6f4118b15
|
||||
title: ESP32/DCU 调试控制台前端页面集
|
||||
@@ -0,0 +1 @@
|
||||
纯静态 HTML + CSS + 原生 JS (无构建工具、无框架)；CAN DBC 解析、BLE/GAP 连接、OTA 传输逻辑交由 `js/` 目录下的模块脚本加载。
|
||||
@@ -0,0 +1 @@
|
||||
以 `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/*`) 交互。
|
||||
@@ -0,0 +1 @@
|
||||
提供 ESP32/DCU 设备的 OTA 中继、CAN 发送/监控与电机控制等 Web 调试页面的静态外壳与样式体系。
|
||||
@@ -0,0 +1,6 @@
|
||||
- 每个页面 HTML 统一在 head 内引入空 favicon (`data:,`) 以避免浏览器请求导致本地静态服务 404。
|
||||
- 页面间通过相对路径 `../css/...` 引用共享样式，并通过版本号 query 参数（如 `?v=857f83a5`）强制缓存失效。
|
||||
- 状态指示使用 `.pill` + `.indicator` 元素组合，通过添加 `online/offline/processing/live/idle` 类切换状态颜色与呼吸灯效果。
|
||||
- 卡片采用 `.card.card--<子系统>` 修饰类注入顶部色带与图标底色，子系统色来自 `--esp32 / --gd32 / --ble / --can / --motor / --mem` 等语义 token。
|
||||
- 动画关键帧仅操作 transform/opacity 以保证合成器直通；box-shadow/background-position 等重绘型动画仅限短暂临时态（如 dragover、OTA 阶段）。
|
||||
- 响应式行为通过 `@media (max-width: 1100px)` 与 `640px` 两档断点在 `responsive.css` 中集中维护，页面侧不重复定义布局断点。
|
||||
Reference in New Issue
Block a user