将原本分散在各组件的Snackbar功能统一为全局组件,通过Pinia store管理状态 移除CreateTemplateScreen中的局部Snackbar实现,改用全局组件 添加Snackbar store提供多种消息类型方法(success/error/warning/info)
95 lines
2.9 KiB
Markdown
95 lines
2.9 KiB
Markdown
# IFLOW 上下文文档
|
||
|
||
## 项目概述
|
||
|
||
这是一个基于 **Vite + Vue 3 + Electron** 的桌面应用程序开发模板,名为 **Vutron**。它提供了一个快速搭建跨平台桌面应用的环境,内置了热重载、TypeScript 支持、多语言支持、主题切换(暗黑/明亮)、全局状态管理(Pinia)等功能。
|
||
|
||
项目使用 `pnpm` 作为包管理器,主要技术栈包括:
|
||
|
||
- 前端框架:Vue 3 (Composition API)
|
||
- 构建工具:Vite
|
||
- 桌面应用框架:Electron
|
||
- UI 库:Vuetify
|
||
- 状态管理:Pinia
|
||
- 国际化:vue-i18n
|
||
- 自动更新:electron-updater
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── main/ # Electron 主进程代码
|
||
│ ├── AutoUpdater.ts # 自动更新功能
|
||
│ ├── IPCs.ts # IPC 通信处理
|
||
│ ├── MainRunner.ts # 主窗口和错误窗口创建
|
||
│ ├── index.dev.ts # 开发环境入口
|
||
│ ├── index.ts # 生产环境入口
|
||
│ ├── tray.ts # 系统托盘功能
|
||
│ └── utils/
|
||
│ └── Constants.ts # 常量定义
|
||
├── preload/ # Electron 预加载脚本
|
||
├── public/ # 静态资源
|
||
└── renderer/ # 渲染进程(Vue 应用)
|
||
├── App.vue # 根组件
|
||
├── main.ts # Vue 应用入口
|
||
├── components/ # 公共组件
|
||
├── screens/ # 页面组件
|
||
├── plugins/ # 插件配置(vuetify, i18n, pinia)
|
||
├── router/ # 路由配置
|
||
├── store/ # Pinia 状态管理
|
||
├── locales/ # 语言包
|
||
└── utils/ # 工具函数
|
||
|
||
buildAssets/ # 构建相关资源
|
||
docs/ # 项目文档
|
||
tests/ # 测试文件
|
||
```
|
||
|
||
## 构建和运行
|
||
|
||
### 开发环境
|
||
|
||
1. 安装依赖:
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
2. 启动开发服务器:
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
这将启动 Vite 开发服务器,并在 Electron 中打开应用。
|
||
|
||
3. 构建项目:
|
||
|
||
```bash
|
||
pnpm build
|
||
```
|
||
|
||
构建应用到 `dist/` 目录,并使用 `electron-builder` 打包成可执行文件。
|
||
|
||
4. 运行测试:
|
||
```bash
|
||
pnpm test
|
||
```
|
||
运行 Playwright 自动化测试。
|
||
|
||
### 生产环境
|
||
|
||
构建后的应用位于 `release/` 目录下,根据不同平台生成对应的安装包。
|
||
|
||
## 开发约定
|
||
|
||
- 使用 TypeScript 进行开发,类型检查通过 `vue-tsc` 完成。
|
||
- 代码风格遵循 ESLint 和 Prettier 规范。
|
||
- 使用 Pinia 进行全局状态管理。
|
||
- 国际化支持通过 vue-i18n 实现。
|
||
- 主进程与渲染进程通过 IPC 进行通信。
|
||
- 日志记录使用 `electron-log` 模块。
|
||
- 自动更新功能通过 `electron-updater` 实现。
|
||
|
||
如果有修改代码,任务结束前需要先运行 `pnpm typecheck` 检查类型错误。不要直接运行 `pnpm dev` 或 `pnpm build`。
|