项目开发文档
一、项目简介
本项目为基于 Electron + Vue3 + TypeScript 的桌面即时通讯应用，采用前后端分离架构，前端界面使用 Vue3 及 Element Plus 组件库，后端通过 Electron 主进程与系统进行交互，支持多平台构建和运行。
二、项目结构
项目目录结构如下：
text
Apply
.
├── build/ # 构建相关脚本和配置
├── out/ # 构建输出目录
├── resources/ # 应用资源文件（如图标等）
├── src/ # 源码目录
│ ├── main/ # Electron 主进程代码
│ ├── preload/ # 预加载脚本
│ └── renderer/ # 渲染进程（前端）代码
├── package.json # 项目依赖与脚本
├── electron-builder.yml # Electron 打包配置
├── tsconfig*.json # TypeScript 配置
└── ... # 其他配置文件
1. 主进程（src/main）
- 负责应用生命周期管理、窗口创建、系统托盘、通知、与操作系统的交互等。
- 入口文件为 index.ts，集中管理窗口配置、IPC 通信、托盘图标、系统事件监听等。
- 通过 electron 和 @electron-toolkit/utils 提供的 API 实现跨平台兼容。
2. 预加载脚本（src/preload）
- 主要用于在渲染进程和主进程之间安全地暴露部分 Node 能力。
- 入口为 index.ts，可根据需要扩展。
3. 渲染进程（src/renderer）
- 前端界面，基于 Vue3 + TypeScript 实现，采用模块化结构，便于维护和扩展。
- 主要目录说明：
- src/renderer/index.html：前端入口 HTML。
- src/renderer/src/main.ts：前端应用入口，初始化 Vue 应用、全局插件、样式等。
- src/renderer/src/App.vue：根组件，承载路由视图。
- api/：接口请求封装，统一管理与后端的 HTTP/WebSocket 通信。
- components/：可复用的 Vue 组件。
- views/：页面级组件，按业务模块划分（如 Home、Login、Register 等）。
- store/：状态管理，基于 Vuex/Pinia（具体实现需结合实际代码）管理全局状态。
- router/：前端路由配置，管理页面跳转与权限控制。
- hooks/：自定义 hooks，封装常用逻辑和事件处理。
- utils/：工具函数，提供常用数据处理、格式化等功能。
- config/：配置文件，集中管理应用配置项。
- enum/：枚举类型，统一管理常量。
- message/：消息相关类型和结构体定义。
- assets/：静态资源，如样式、图片、字体、表情等。
- mode/：数据模型定义，描述业务对象结构。
三、设计方案
1. Electron 主进程设计
- 窗口管理：通过 BrowserWindow 创建主窗口，支持无边框、最小化、最大化、隐藏等操作。
- 系统托盘：集成系统托盘图标，支持闪烁提醒、菜单操作等。
- IPC 通信：主进程与渲染进程通过 ipcMain 和 ipcRenderer 实现事件和数据的双向通信。
- 系统事件监听：监听系统休眠、唤醒、窗口焦点变化等事件，及时通知前端处理。
- 安全性：开发环境下关闭证书校验，生产环境开启安全策略。
2. 渲染进程设计
- 模块化结构：前端代码按功能模块划分，便于维护和扩展。
- 状态管理：通过 store 统一管理用户、消息、会话、系统配置等全局状态。
- 路由管理：采用前端路由实现页面切换和权限控制。
- 组件复用：将常用 UI 和业务逻辑封装为组件，提高开发效率。
- 接口统一管理：所有后端接口请求集中管理，便于维护和切换。
- 自定义 hooks：将复杂或通用逻辑抽离为 hooks，提高代码复用性。
- 多语言与主题：支持 Element Plus 组件库的多语言和自定义主题。
3. 配置与构建
- 多平台支持：通过 Electron Builder 配置，支持 Windows、macOS、Linux 多平台打包。
- 开发体验：集成 ESLint、Prettier、Volar 等工具，保证代码规范和开发效率。
- 类型安全：全项目采用 TypeScript，提升代码健壮性和可维护性。
四、打包
-
npm run build #打包web
-
npm run build:win #打包exe
-
npm run build:linux #打包linux
-
npm run build:mac #打包mac
tips:需要什么包要在对应的操作系统上面打包，例如不要在win下打包linux
五、总结
本项目采用 Electron + Vue3 + TypeScript 技术栈，结构清晰、模块划分合理，具备良好的可扩展性和可维护性。主进程负责与系统交互，渲染进程专注于前端业务和界面，二者通过 IPC 实现高效通信。前端采用现代化工程化方案，支持多端构建和高效开发。如需了解具体模块实现细节，可进一步查阅各目录下的源码及注释。
