feat(ui): 添加全局Snackbar组件并替换局部实现
将原本分散在各组件的Snackbar功能统一为全局组件,通过Pinia store管理状态 移除CreateTemplateScreen中的局部Snackbar实现,改用全局组件 添加Snackbar store提供多种消息类型方法(success/error/warning/info)
This commit is contained in:
1 parent
55a85e7111
commit
ae20a30616
5 files changed
+191
-35
No files matched your search
@@ -0,0 +1,94 @@
|
||||
# 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`。
|
||||
Reference in new issue
Block a user