# vp_tools

**Repository Path**: tab-cn/vp_tools

## Basic Information

- **Project Name**: vp_tools
- **Description**: 基于vue3+vite+electron的开源autosar代码生成工具，生成vp_vs仓库对应代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2026-10-21
- **Last Updated**: 2026-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OS Generator — AUTOSAR BSW 配置工具

> 基于 Electron + Vue 3 + TypeScript 的 BSW 配置桌面工具，支持 `.proj` 工程导入、`.arxml` 配置解析与动态表单编辑，并可导出 C 代码配置。

---

## 一、项目概述

![工具截图](/doc/img/vp_vs_tool.png)
本工具面向 AUTOSAR Classic Platform 场景，提供以下核心能力：

- **工程管理**：新建/打开/保存工程，支持 `.proj` 工程描述文件、`.osgen`/`.json` 自有项目文件、以及 `.arxml` 单个配置文件的直接打开与解析
- **模块导航**：打开 `.proj` 后，根据 `moduleKindModels / moduleModels` 层级在左侧导航动态展示模块分组与模块叶子（如 COM / DIAG / MCAL / MEM / SYS / WDG 等）
- **ARXML 动态表单编辑**：选择模块后，工具自动读取对应模块的 `.arxml` 配置文件（`BSW_Builder/<芯片名>/<模块名>.arxml`），解析 ECUC 容器树与参数，并按参数 `DEST` 类型自动渲染为输入框 / 数字框 / 开关 / 引用等 UI 控件
- **配置校验与代码导出**：工程配置校验、C 头文件/源文件模板导出

与工具配套的示例工程目录：`BSW_ConfigProject/`（S32K148 芯片，包含 Os/Can/Com/Dem/Dcm/EcuM 等 30+ 模块的 arxml 及生成的 `*_Cfg.c/h` 代码）。

---

## 二、技术栈

| 层 | 技术 / 库 | 说明 |
|----|-----------|------|
| 桌面外壳 | **Electron 36** | 提供原生菜单、对话框、文件读写 |
| 前端框架 | **Vue 3.5** (Composition API) | `<script setup>` 写法 |
| 语言 | **TypeScript 5.8** | 严格模式 |
| 构建 | **Vite 6** + **vite-plugin-electron** | 渲染进程 + 主进程/Preload 一体化构建 |
| UI 组件 | **Element Plus 2.10** | 表单、Tabs、Dialog、Message 等 |
| 状态 | **Pinia 3** | 集中管理工程、节点、ARXML 配置 |
| 路由 | **Vue Router 4** | Home / ModuleView / About 三个路由页面 |
| 代码规范 | **ESLint 9** + **Prettier 3** | `lint` / `format` 命令 |

---

## 三、项目结构

```
vp_vs_tools/
├── BSW_ConfigProject/                   # 示例 AUTOSAR 工程 (S32K148)
│   ├── project.proj                    # 工程入口 .proj（由工具解析为左侧导航树）
│   ├── BSW_Builder/
│   │   └── S32K148/                    # 芯片级 arxml 配置
│   │       ├── Os.arxml                # OS 模块 ECUC 配置
│   │       ├── Can.arxml / CanIf.arxml
│   │       ├── Com.arxml / ComM.arxml
│   │       ├── Dem.arxml / Dcm.arxml / Det.arxml
│   │       ├── EcuM.arxml / EcuC.arxml
│   │       ├── Fee.arxml / NvM.arxml / MemIf.arxml
│   │       ├── Wdg.arxml / WdgIf.arxml / WdgM.arxml
│   │       └── ...（共 30+ 模块 arxml）
│   ├── ServiceComponents/
│   │   └── serviceComponent.arxml
│   └── config/                         # 由外部工具生成的 C 配置代码
│       ├── Os_Cfg.c / Os_Cfg.h
│       ├── CanIf_Cfg.c/h、Com_Cfg.c/h
│       ├── PduR_PBcfg.c/h、Rte_*.c/h
│       └── ...
│
├── src/
│   ├── electron/                       # Electron 主进程
│   │   ├── main/
│   │   │   ├── index.ts                # 主进程入口，创建 BrowserWindow
│   │   │   ├── topMenu.ts              # 原生菜单（文件/编辑/视图/工程/帮助）
│   │   │   └── ipc/
│   │   │       └── core.ts             # IPC: 打开/保存/另存/导出/读 BSW_Builder
│   │   └── preload/
│   │       └── index.ts                # contextBridge 暴露 ipcRenderer 白名单
│   │
│   └── renderer/                       # 渲染进程（Vue 单页应用）
│       ├── main.ts                     # Vue/Pinia/Router 挂载入口
│       ├── App.vue                     # 主壳：SideBar + <router-view/> + 状态栏
│       ├── style.css                   # 全局样式 + CSS 变量 (--bg-main / --accent 等)
│       │
│       ├── components/
│       │   ├── SideBar.vue             # 左侧导航（动态 moduleKinds → moduleModels 树）
│       │   ├── ArxmlContainerNode.vue  # ARXML 容器卡片 + 动态表单（开关/数字/文本）
│       │   ├── RightPanel.vue          # 右侧属性面板
│       │   ├── BottomPanel.vue         # 底部控制台
│       │   ├── StatusBar.vue           # 底部状态栏
│       │   └── NodeListPage.vue        # 通用节点列表组件
│       │
│       ├── views/
│       │   ├── Home.vue                # 首页：工程信息 + 节点增删改查
│       │   ├── ModuleView.vue          # 模块配置页（Tabs + 容器卡片 + 动态表单）
│       │   └── About.vue               # 关于页
│       │
│       ├── store/
│       │   └── projectInfoStore.ts     # Pinia Store：Proj 解析 + Arxml 解析 + 参数更新
│       │
│       ├── router/index.ts             # 路由：/home /module /about
│       ├── api/index.ts                # 渲染进程 → 主进程 API 封装
│       ├── constants/index.ts          # 全局常量（路由路径、AppName 等）
│       ├── composables/useResize.ts    # 窗口尺寸变化 hook
│       ├── styles/variables.css        # CSS 变量 (暗色调)
│       ├── styles/page-common.css      # 通用页面布局样式
│       └── utils/index.ts              # 工具函数
│
├── electron.config.js                  # electron-builder 打包配置
├── vite.config.ts                      # Vite + vite-plugin-electron 配置
├── tsconfig.json / tsconfig.app.json / tsconfig.node.json
├── .eslintrc.cjs / .prettierrc
├── .gitignore / .prettierignore
└── package.json
```

---

## 四、核心功能详解

### 4.1 `.proj` 工程解析 — 左侧动态导航

`project.proj` 为 XML 格式，典型结构：

```xml
<projectDescription>
  <name>BSW_ConfigProject</name>
  <linkedResources>
    <ecuConfigurationModels projectName="BSW_ConfigProject">
      <moduleKindModels kindName="COM">      <!-- 一级：分组 -->
        <moduleModels moduleName="CanIf"/>  <!-- 二级：模块 -->
        <moduleModels moduleName="Com"/>
        ...
      </moduleKindModels>
      <moduleKindModels kindName="MCAL">...</moduleKindModels>
      <moduleKindModels kindName="OS">...</moduleKindModels>
      ...
    </ecuConfigurationModels>
  </linkedResources>
</projectDescription>
```

解析后渲染为两级折叠树：
- 未打开工程：显示「请打开 .proj 工程文件」空态
- 打开后：每个 `moduleKindModels` 为折叠分组，点击分组展开模块叶子，点击叶子选中并跳转 `/module` 配置页

### 4.2 `.arxml` 配置解析

选择模块后，主进程 `project:readBswBuilder` 通道根据 `.proj` 所在路径定位 `BSW_Builder/<芯片名>/<模块名>.arxml`，读取文件内容；渲染进程用浏览器原生 `DOMParser` 解析 AUTOSAR ECUC XML：

- `ECUC-MODULE-CONFIGURATION-VALUES` → 模块根
- `CONTAINERS > ECUC-CONTAINER-VALUE` → 顶层容器（每个顶层容器对应 `ModuleView.vue` 的一个 tab）
- 递归 `SUB-CONTAINERS` → 嵌套子容器（在 `ArxmlContainerNode.vue` 中以卡片形式嵌套）
- `PARAMETER-VALUES` + `REFERENCE-VALUES` → 动态表单控件

解析结果保存在 Pinia `arxmlConfigs: Record<moduleName, ModuleArxmlConfig>`。

### 4.3 动态表单 — 控件映射规则

依据 `DEFINITION-REF` 元素的 `DEST` 属性，自动选择 Element Plus 控件：

| ARXML 参数类型 | DEST 特征 | 渲染控件 | 示例 |
|----------------|-----------|----------|------|
| 布尔参数 | `ECUC-BOOLEAN-PARAM-DEF` | `<el-switch>` 开关 | `OsStackMonitoring = true` |
| 整数参数 | `ECUC-INTEGER-PARAM-DEF` | `<el-input-number>` 步进为 1 | `OsNumberOfCores = 1` |
| 浮点参数 | `ECUC-FLOAT-PARAM-DEF` | `<el-input-number>` 精度 3 位 | `OsSecondsPerTick = 0.001` |
| 枚举参数 | `ECUC-ENUMERATION-PARAM-DEF` | `<el-input>` 可编辑文本 | `OsScalabilityClass = SC1` |
| 函数名 | `ECUC-FUNCTION-NAME-DEF` | `<el-input>` 可编辑文本 | `OsTimerSource = STM0_SR0` |
| 引用参数 | `ECUC-REFERENCE-DEF` / `CHOICE-REFERENCE-DEF` | `<el-input>` 可编辑文本 | `/S32K148/Os/OsTask_1ms` |

每个参数修改后即时通过 `store.updateParamValue(moduleName, containerPath, paramName, newValue)` 更新内存中的 arxml 数据（响应式）。

### 4.4 `ModuleView.vue` — 模块配置页

页内结构：

```
模块配置 — Os
├── 头：模块名 + DEFINITION-REF 完整路径
└── el-tabs（每个顶层容器一张 tab）
    ├── Tab: OsOS
    │   └── ArxmlContainerNode: OsOS
    │       ├── 表单 (SystemSettings)：Cores Number / Stack Size / Status ...
    │       └── 子卡片 OsHooks：Error/Shutdown/Startup Hook 开关
    ├── Tab: OSDEFAULTAPPMODE
    ├── Tab: OsCounter
    │   └── ArxmlContainerNode SystemTimer_Core_0
    │       └── 子表单：CounterMax / TicksPerBase / Type / SecondsPerTick
    ├── Tab: OsTask_Init / OsTask_1ms / ...
    ├── Tab: OsAlarm_1ms / 5ms / ...
    └── Tab: CAN0_ORed_0_15_MB / CAN0_ORed_16_31_MB ...
```

### 4.5 原生菜单（替代了页面顶部工具栏）

通过 `文件 → 打开工程 (Ctrl+O)` 触发主进程对话框，其他菜单项：

| 菜单项 | 快捷键 | 行为 |
|--------|--------|------|
| 文件 → 新建 | Ctrl+N | 新建自有 .osgen 工程 |
| 文件 → 打开工程 | Ctrl+O | 选择 .proj / .osgen / .json / .arxml |
| 文件 → 保存 | Ctrl+S | 保存为 .osgen |
| 文件 → 另存为 | — | 另存为 .osgen |
| 工程 → 验证配置 | Ctrl+B | 执行 store.validate() 规则校验 |
| 工程 → 生成代码 | Ctrl+G | 导出 C 配置代码 |
| 视图 → 控制台 | Ctrl+J | 展开/收起 BottomPanel |

---

## 五、数据模型（Store）

核心 `projectInfoStore`定义的主要接口：

```ts
// 老版自有工程
ProjectConfig { name, version, compiler, target, cores, maxTasks, ... }
ProjectNode   { id, name, module, msgNum, signalNum, comment }

// .proj 工程导航
ProjModuleKind { kindName, modules: ProjModule[] }
ProjData       { name, projectName, moduleKinds }

// .arxml 配置（递归容器）
ArxmlParam     { name, value, dest, kind: 'numerical'|'textual'|'reference'|'other' }
ArxmlContainer { name, definitionRef, params, references, subContainers }
ModuleArxmlConfig { moduleName, definitionRef, containers }
```

主要方法：

| 方法 | 作用 |
|------|------|
| `newProject(name)` | 新建自有工程 |
| `importFromJSON(str)` / `exportToJSON()` | 自有工程序列化 |
| `importFromProjXml(str)` | 解析 .proj XML 填充左侧导航 |
| `importArxmlFiles(files[])` | 批量解析主进程读回的 arxml 内容并缓存 |
| `updateParamValue(module, path[], name, value)` | 在指定容器路径下更新参数值 |
| `selectModule(name)` / `clearProj()` | 切换选中模块、清空工程状态 |

---

## 六、开发指南

### 6.1 环境要求

- Node.js ≥ 18（本项目基于 20/22 验证）
- npm ≥ 9
- Windows 10/11 （Electron Builder 以 Windows 为主目标）

### 6.2 安装依赖

```bash
npm install
```

### 6.3 开发模式（Vite + Electron 热更新）

```bash
npm run dev
```

Vite 默认监听 `http://localhost:5173/`，主进程与 preload 脚本由 `vite-plugin-electron` 一并构建并拉起 Electron 窗口（窗口内自动加载 `http://localhost:5173/`）。

### 6.4 构建 & 打包

```bash
# 仅构建前端和主进程，不打安装包
npm run build

# 完整 Electron 安装包（调用 electron-builder）
npm run build:electron
# 产物输出：dist/<平台>/test-app Setup <version>.exe
```

### 6.5 代码质量

```bash
# ESLint 检查并自动修复（忽略 .gitignore 中条目）
npm run lint

# 仅检查不修复
npm run lint:check

# Prettier 格式化
npm run format
npm run format:check
```

---

## 七、IPC 通道一览

主进程 IPC 定义：[src/electron/main/ipc/core.ts]

| 通道 | 模式 | 功能 |
|------|------|------|
| `project:new` | on | 清空当前文件路径 |
| `project:save` | handle | 保存到上一次路径；若为空则弹出保存对话框 |
| `project:saveAs` | handle | 强制另存为对话框 |
| `project:open` | handle | 打开文件对话框，读回内容 + 路径（支持 .proj/.osgen/.json/.arxml/*） |
| `project:readBswBuilder` | handle | 给定 .proj 路径，扫描同级 `BSW_Builder/<芯片名>/*.arxml` 批量读回 |
| `project:export` | handle | 文本导出为 C 源码 |
| `project:getPath` | handle | 返回当前打开文件的本地路径 |
| `menu:new/open/save/saveAs/validate/export/toggle-console/about` | on | 原生菜单下发事件 |
| `main-openProjectDialog` | on | 其他端触发打开工程对话框 |

---

## 八、示例工程快速上手

1. `npm install && npm run dev` 启动应用
2. `文件 → 打开工程（Ctrl+O）` → 选择 `BSW_ConfigProject/project.proj`
3. 左侧导航按 `COM / DIAG / MCAL / MEM / SYS / WDG` 分组展开，点击任意模块（如 `Os`）
4. 主区域自动切换到 `/module` 页，顶部 Tabs 列出该模块所有顶层容器（如 `OsOS`、`OsTask_Init`、`OsAlarm_1ms`）
5. 切换 Tab 查看容器参数，尝试修改：
   - 布尔值（如 `OsStackMonitoring`）→ 开关切换
   - 整数（如 `OsNumberOfCores`）→ 数字步进
   - 浮点（如 `OsSecondsPerTick`）→ 小数步进
   - 枚举/文本 → 普通输入框
6. `工程 → 验证配置`、`工程 → 生成代码` 可执行配置校验与代码导出