一个现代化的 Electron 桌面待办事项应用，具有简洁的用户界面和系统托盘集成。
## 功能特点 - **现代化 UI 设计**：简洁、直观的响应式布局。 - **系统托盘集成**：支持快速访问，左键单击切换窗口显隐，右键提供“显示”和“退出”选项。 - **智能窗口管理**：关闭窗口时最小化到托盘，防止误操作导致应用退出。 - **优雅退出**：提供退出确认对话框，可选择“取消”、“最小化”或“直接退出”。 - **跨平台兼容**：支持 Windows、macOS 和 Linux。 - **自定义右键菜单**：在应用内右键可进行“刷新”或“退出”操作。 ## 环境要求 - **Node.js**: v14 或更高版本 - **pnpm**: v6 或更高版本 ## 安装与启动 ```bash # 1. 克隆仓库 git clone https://gitee.com/zimo493/electron-app.git cd electron-app # 2. 安装依赖 pnpm install # 3. 启动开发环境 pnpm dev # 4. 打包应用 pnpm build ``` ## 应用操作指南 1. **待办事项**：启动后即可开始管理您的待办事项。 2. **最小化到托盘**：点击窗口的关闭按钮，应用将最小化至系统托盘。 3. **托盘菜单**： - **左键单击**：切换应用窗口的显示与隐藏。 - **右键单击**： - **显示应用**：恢复应用窗口。 - **退出应用**：完全关闭应用。 4. **应用内右键菜单**： - **刷新**：重新加载当前页面。 - **退出选项**：弹出退出确认对话框。 ## 项目结构 ``` electron-app/ ├── build/ # 应用图标和构建资源 ├── electron/ # Electron 后端文件 │ ├── main.js # 主进程，负责窗口和应用生命周期 │ └── preload.js # 预加载脚本，用于安全地暴露 Node.js API ├── src/ # 前端代码 └── package.json # 项目配置与依赖 ``` ## 技术栈 - **Electron**: ^37.8.0 - **electron-builder**: ^26.0.12 ## 打包配置 应用打包由 `electron-builder` 管理，核心配置如下： - **应用 ID**: `com.zimo.todo` - **产品名称**: `待办事项清单` - **版权**: `Copyright © 2025 zimo` - **图标路径**: `build/icon.ico` - **输出目录**: `dist_electron` ## 核心实现 ### `electron/main.js` 此文件是应用的“大脑”，负责所有后端逻辑： - **窗口管理**：创建和控制浏览器窗口，包括尺寸限制和优雅关闭。 - **系统托盘**：初始化托盘图标，并绑定单击和右键单击事件。 - **应用生命周期**：处理应用的启动、激活和关闭事件，并实现单实例锁。 - **上下文菜单**：为应用窗口和托盘图标创建自定义右键菜单。 ### `electron/preload.js` 作为渲染进程与主进程之间的桥梁，它通过 `contextBridge` 安全地将 Node.js 功能暴露给前端，同时确保上下文隔离。 ### 功能亮点 1. **智能托盘管理**： - 应用启动时自动创建托盘图标。 - 左键单击可在显示和隐藏之间快速切换，提升操作效率。 - 右键菜单提供核心的“显示”和“退出”功能。 2. **精细化窗口控制**： - 关闭操作默认为最小化，防止意外退出。 - 退出时提供清晰的对话框，让用户自主选择“取消”、“最小化”或“彻底退出”。 - 窗口尺寸经过优化，最小宽度 `1000px`，最小高度 `600px`，确保界面始终完整。 3. **增强的右键菜单**： - 在应用内右键即可访问“刷新”和“退出”选项，简化操作。