Robot-Al-Platform-Web/README.md

<h1 align="center">electron-app</h1>

<p align="center">An Electron application with Vue3 and TypeScript</p>

<p align="center">
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/electron" alt="electron-version">
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/electron-vite" alt="electron-vite-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/electron-builder" alt="electron-builder-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/vite" alt="vite-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/vue" alt="vue-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/typescript" alt="typescript-version" />
</p>

<p align='center'>
<img src='./build/electron-vite-vue-ts.png'/>
</p>

## Features

- 💡 Optimize asset handling
- 🚀 Fast HMR for renderer processes
- 🔥 Hot reloading for main process and preload scripts
- 🔌 Easy to debug
- 🔒 Compile to v8 bytecode to protect source code

## Getting Started

Read [documentation](https://electron-vite.org/) for more details.

- [Configuring](https://electron-vite.org/config/)
- [Development](https://electron-vite.org/guide/dev.html)
- [Asset Handling](https://electron-vite.org/guide/assets.html)
- [HMR](https://electron-vite.org/guide/hmr.html) & [Hot Reloading](https://electron-vite.org/guide/hot-reloading.html)
- [Debugging](https://electron-vite.org/guide/debugging.html)
- [Source code protection](https://electron-vite.org/guide/source-code-protection.html)
- [Distribution](https://electron-vite.org/guide/distribution.html)
- [Troubleshooting](https://electron-vite.org/guide/troubleshooting.html)

You can also use the [create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron) tool to scaffold your project for other frameworks (e.g. `React`, `Svelte` or `Solid`).

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

## Project Setup

### Install

```bash
$ npm install
```

### Development

```bash
$ npm run dev
```

### Build

```bash
# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux
```


# 项目结构 (Project Structure)

这是一个基于 Electron + Vite + TypeScript 的桌面应用程序项目结构，使用 Tailwind CSS 进行样式设计，并通过 electron-builder 进行打包分发。

## 目录结构

### 📁 `build/`
- **构建配置目录**  
  包含与打包相关的脚本和资源文件
  - `icons/` - 应用程序图标集（不同尺寸）
  - `installer.nsh` - NSIS 安装脚本配置
  - `scripts/` - 构建相关脚本

### 📁 `node_modules/`
- **依赖库目录**  
  存储所有 npm/yarn 安装的第三方依赖包  
  *（此目录不应手动修改）*

### 📁 `out/`
- **临时输出目录**  
  存放开发/构建过程中生成的临时文件
  - `main/` - 主进程编译输出
  - `renderer/` - 渲染进程编译输出

### 📁 `release/`
- **发布目录**  
  最终生成的应用程序安装包和可执行文件

### 📁 `resources/`
- **资源文件目录**  
  包含应用程序使用的静态资源
  - `icons/` - 应用程序图标资源
  - `data/` - 其他静态数据文件

### 📁 `src/`
- **核心源代码目录**  
  应用程序的主要逻辑和界面代码
  - `main/` - Electron 主进程代码
  - `preload/` - Electron 预加载脚本
  - `renderer/` - 渲染进程代码
    - `src/` - Vite 应用源码
      - `api/` -  用于与后端或外部服务进行数据交互的API请求
      - `assets/` - 前端资源文件 (images, fonts, etc.)
      - `components/` - UI 组件
      - `config/` - 项目配置相关
      - `hooks/` -  自定义 Vue Hooks
      - `layout/` -  页面布局组件
      - `mock/` -  模拟数据用于开发和测试
      - `plugins/` - 项目插件
      - `router/` - 前端路由配置
      - `stores/` - 状态管理 (Pinia)
      - `styles/` - 全局样式（Sass）
      - `utils/` - 工具函数 (日期格式化，数据处理等)
      - `views/` - 页面级别的组件 (Pages)
        - `Design/` - 设计面板页面
          - `CommManagement/` (通信管理)
          - `ControllerManagement/` (控制器管理)
          - `Controls/` (设计控制控件集合组件)
          - `ImagesCapture/` (图像集 design-panel-controls)
          - `LogManagement/` (日志管理)
          - `Settings/` - (设置)
          - `Workflow/` - (工作流)
          - `index.vue` - 设计面板页面入口文件。
      - `App.vue` - 主应用组件 (Vue.js)
      - `main.ts` - 渲染进程入口
      - `env.d.ts` - 环境变量类型定义
      - `auto-imports.d.ts` - 自动导入的模块类型定义
      - `components.d.ts` - 组件类型定义
      - `index.html` - HTML 入口文件
  - `types/` - 全局类型定义

### 📁 `test/`
- **测试目录**  
  包含应用程序的各种测试
  - `e2e/` - 端到端测试
  - `unit/` - 单元测试
  - `mocks/` - 测试用模拟数据

## 配置文件

### ⚙️ 基础配置
| 文件 | 用途 |
|------|------|
| `package.json` | 项目元数据、依赖项和 NPM 脚本 |
| `package-lock.json` | 锁定依赖版本确保一致性 |
| `tsconfig.json` | TypeScript 基础配置 |
| `tsconfig.node.json` | Node.js 环境 TypeScript 配置 |
| `tsconfig.web.json` | 浏览器环境 TypeScript 配置 |

### 🛠️ 构建工具
| 文件 | 用途 |
|------|------|
| `electron.vite.config.ts` | Vite 的 Electron 专用配置 |
| `electron-builder.yml` | Electron 应用打包配置 |
| `postcss.config.js` | PostCSS 处理配置 |
| `tailwind.config.js` | Tailwind CSS 样式框架配置 |

### 🧹 代码质量
| 文件 | 用途 |
|------|------|
| `.editorconfig` | 跨编辑器/IDE 的代码风格统一 |
| `.eslintrc.cjs` | ESLint 代码检查配置 |
| `.eslintignore` | ESLint 忽略文件配置 |
| `.prettierrc.yaml` | Prettier 代码格式化配置 |
| `.prettierignore` | Prettier 忽略文件配置 |

### 📌 其他文件
| 文件 | 用途 |
|------|------|
| `.gitignore` | Git 版本控制忽略规则 |
| `.npmrc` | npm 配置 |
| `README.md` | 项目说明文档 |

## 技术栈概览

- **核心框架**: Electron
- **开发语言**: TypeScript
- **构建工具**: Vite
- **UI 框架**: Element Plus
- **样式方案**: Tailwind CSS
- **代码质量**: ESLint + Prettier
- **打包工具**: electron-builder
- **CSS 处理**: PostCSS
- **测试框架**: Vitest

## Examples

- [electron-vite-bytecode-example](https://github.com/alex8088/electron-vite-bytecode-example), source code protection
- [electron-vite-decorator-example](https://github.com/alex8088/electron-vite-decorator-example), typescipt decorator
- [electron-vite-worker-example](https://github.com/alex8088/electron-vite-worker-example), worker and fork