CANdelaStudio类似页面制作方案

CANdelaStudio 类似页面制作方案

一、项目背景与目标

CANdelaStudio 是 Vector 公司开发的专业诊断数据库编辑工具，广泛应用于汽车电子控制单元（ECU）的 UDS（Unified Diagnostic Services）协议配置。本方案旨在设计并实现一个具备类似功能和交互体验的 Web 界面原型，用于：

• 展示 UDS 服务（如 $10 诊断会话控制）的结构化配置；
• 支持字节级数据定义（请求/响应/NRC）；
• 提供可视化字节视图（位域展示）；
• 实现多面板布局（导航树 + 编辑区 + 属性面板）；
• 模拟真实工程软件的 UI/UX 体验。

---

二、整体架构设计

2.1 技术选型

层级	技术
前端框架	原生 HTML/CSS/JavaScript（无框架，便于嵌入或轻量部署）
布局系统	Flexbox + CSS Grid
响应式	移动端适配基础支持（主要面向桌面端）
数据模拟	静态 JSON 结构 + DOM 动态更新
交互逻辑	原生事件监听 + 状态管理（简单变量）

说明：为降低依赖、提升可移植性，不使用 React/Vue 等重型框架，适合集成到现有工具链中。

---

2.2 页面结构（三栏布局）

+-------------------------------------------------------------+
| 顶部标题栏（含保存/验证/导出按钮）                          |
+------------------+----------------------+-------------------+
| 左侧 SID 导航树  | 中央编辑区           | 右侧属性面板      |
| - 服务分类       | - 标签页切换         | - 服务基本信息    |
| - 子功能列表     | - 表单/表格/视图     | - 数据包信息      |
| - 搜索框         |                      | - 配置状态        |
+------------------+----------------------+-------------------+
| 底部状态栏（文件路径、修改状态、协议标准）                  |
+-------------------------------------------------------------+

---

三、核心模块详细设计

3.1 左侧 SID 导航树（sid-nav）

功能点：

• 按 UDS 服务类型分组（诊断会话控制、安全访问、DTC 读取等）；
• 支持展开/折叠分类；
• 高亮当前选中的服务及子功能；
• 支持搜索过滤（模糊匹配 SID 或名称）。

实现要点：

• 使用 class="category-expanded" 控制展开状态；
• .sid-item.active 和 .sub-service-item.active 标记选中项；
• JavaScript 函数 selectService() / selectSubService() 更新上下文。

---

3.2 中央编辑区（editor-panel）

采用 标签页（Tabs） 切换不同配置维度：

标签页	内容
常规配置	服务名称、描述、会话类型、请求/响应格式说明（只读预览）
字节配置	表格形式定义每个字节/位的名称、类型、默认值、是否常量、描述
字节视图	可视化展示每个字节的 8 个 bit，支持十六进制/十进制/二进制切换
验证结果	显示配置完整性检查结果（✅/⚠️/❌）

字节配置表格特点：

• 分"请求"、"响应"、"否定响应"三个子 Tab；
• 支持"字节头"分组（如"字节 0: 服务ID"）；
• 支持位级参数（如 Bit 7 的 SuppressPosRspMsgIndicationBit）；
• 每行包含：字节号、位位置、名称、数据类型（uint8/bit）、默认值、常量复选框、描述。

字节视图交互：

• 每个字节以卡片形式展示 8 个 bit；
• 已使用 bit 高亮（绿色背景），未使用灰显；
• 底部显示完整数据包（如 10 01）；
• 支持显示模式切换（Hex / Dec / Bin）。

---

3.3 右侧属性面板（property-panel）

提供当前服务的元信息快照：

• 基本信息：SID、子功能、UDS 类别、ISO 标准；
• 数据包信息：请求/响应长度、超时参数（P2ServerMax）；
• 配置状态：是否已配置、最后修改时间、操作人；
• 帮助提示框：简要说明该 UDS 服务的作用。

使用 .status-badge 实现状态徽章（valid/warning/error）。

---

3.4 顶部与底部区域

• 顶部标题栏：

  • 左侧：应用名称 + 版本；
  • 右侧：操作按钮（保存 💾、验证 ✅、导出 ODX 📤）。

• 底部状态栏：

  • 左：当前状态（就绪 / 已修改 / 已保存）+ 文件名；
  • 右：协议标准 + 项目路径。

---

四、交互与状态管理

4.1 关键状态变量（JavaScript）

let currentService = '10';
let currentSubService = '01';
let currentDisplayMode = 'hex'; // hex / dec / bin
let currentByteTab = 'request'; // request / response / negresponse
let currentByteViewTab = 'request';

4.2 主要交互函数

函数	作用
selectService(sid, name)	切换主服务，更新标题和导航高亮
selectSubService(sid, subSid)	切换子功能，更新子标题
switchTab(tabId)	切换中央编辑区主标签页
switchByteTab(tabId)	切换字节配置子 Tab
setDisplayMode(mode)	切换位值显示模式（影响 .bit-value 可见性）
updateStatusBar(status)	更新底部状态文本

所有表单输入均绑定 input/change 事件，自动标记"已修改"。

---

五、UI/UX 设计规范

5.1 色彩体系

• 主色：#4a90e2（Vector 蓝）；
• 背景色：#f0f2f5（浅灰）；
• 卡片/面板：白色 + 阴影；
• 状态色：
  • 成功：#28a745（绿色）
  • 警告：#ffc107（黄色）
  • 错误：#dc3545（红色）

5.2 字体与间距

• 字体：'Segoe UI', 'Microsoft YaHei', sans-serif；
• 主标题：18px / 600；
• 表单项标签：13px / 500；
• 表格字体：12px（紧凑布局）；
• 统一使用 box-sizing: border-box。

5.3 动效与反馈

• 按钮悬停：轻微上移 + 背景加深；
• 输入框聚焦：蓝色边框 + 阴影；
• 状态变更：底部状态栏实时更新；
• 操作反馈：alert() 模拟（实际可替换为 Toast）。

---

六、扩展性与后续优化建议

1. 数据持久化：

   • 将配置导出为 JSON 或 CDD-like XML；
   • 支持从文件导入配置。

2. 动态生成字节视图：

   • 根据字节配置表自动生成 .byte-box 结构；
   • 支持 bit 字段联动（如修改 SuppressPosRspMsgIndicationBit 自动更新 Bit 7 值）。

3. 验证引擎：

   • 实现规则校验（如：请求必须包含 SID；响应长度 ≥ 2）；
   • 在"验证结果"标签页展示详细报告。

4. 多语言支持：

   • 抽离文案为 i18n 对象；
   • 支持中英文切换。

5. ODX 导出模拟：

   • 构建符合 ISO 22901 的 XML 结构；
   • 提供下载链接。

---

七、总结

本方案通过原生 Web 技术复现了 CANdelaStudio 的核心交互范式，兼顾专业性与可用性。其模块化设计便于后续功能迭代，可作为诊断配置工具的前端参考实现，亦可用于培训、演示或轻量级配置场景。

交付物：单 HTML 文件（含内联 CSS/JS），即开即用，无外部依赖。