Electron + Vue 3 桌面应用实践：StudyDesk 的架构与功能设计

你有没有过这样的学习状态课表放在一个 App待办记在另一个 App番茄钟又开着一个网页复习资料散落在文件夹里考试倒数日靠手机提醒想听点轻音乐还要再切一次窗口。工具越来越多学习却未必更专注。很多时候我们不是缺少功能而是被频繁切换工具打断了注意力。于是我做了StudyDesk学习桌面一款运行在 Windows 10/11 上的免费开源桌面应用把学生日常高频使用的学习工具集中到同一个窗口里。项目地址https://github.com/miku1130/study-desk不是简单堆功能而是串起一整天的学习流程StudyDesk 想解决的核心问题是让学习计划、执行、记录和复盘形成一条完整链路。早上打开电脑你可以在仪表盘看到当天课程、重点任务、最近倒数日和喝水进度上课前课表会根据自定义作息自动提醒并播放铃声准备自习时从任务列表直接启动番茄钟完成的专注次数会自动记录到对应任务学习结束后再通过统计页面和专注花园看到自己的积累。整个过程中不需要来回切换多个应用也不需要注册账号。1. 课表不只是展示到点还能自动响铃StudyDesk 提供按真实时间比例显示的周课表。课程卡片会根据起止时间和持续时长自动定位当前课程与当天列会高亮显示。你可以自定义每一节课的时间记录课程名称、教师、地点和颜色也可以通过 JSON 导入或导出课表。更实用的是应用会按照课表在上课、下课时间自动播放铃声并弹出系统通知。内置校园电铃和威斯敏斯特音乐钟声也支持导入本地音频或添加在线资源。2. 从待办直接进入专注让计划真正落地很多待办软件只负责“记下来”但真正困难的是“开始做”。StudyDesk 的备忘录中心支持任务、备忘和灵感三种记录类型可以设置优先级、标签、截止日期、子任务、置顶和到点提醒。任务还可以绑定番茄钟点击“开始专注”后完成的番茄会自动累计到该任务中。比如你给“复习高数第三章”设置 4 个番茄完成后会直接显示为 4/4。计划、执行和进度不再分散在三个地方。3. 番茄钟、锁屏专注和全屏时钟番茄钟支持工作、短休息和长休息循环时长、长休间隔以及是否自动开始下一阶段都可以自定义。如果普通倒计时还不够StudyDesk 还提供锁屏专注模式进入专注后屏幕会显示全屏置顶的大号倒计时尽量减少其他窗口带来的干扰。目前内置极简、翻页钟、像素 LED 和呼吸光四种全屏时钟风格。无论是备考、自习、写作还是阅读都能快速进入一个更纯粹的专注环境。4. 完成一个番茄种下一棵真正会成长的树为了让长期坚持更有反馈StudyDesk 加入了游戏化的“专注花园”。每完成一个番茄钟就能获得金币并种下一棵幼苗。新的专注记录会继续为幼苗浇灌让它逐步成长为大树。花园中还有每日任务、装饰商店、树种图鉴、成就墙和稀有金树。你可以自由选择下一棵树的种植位置也可以购买长椅、风铃、石灯笼、莲花池、喷泉等装饰慢慢把花园布置成自己的样子。它不会用夸张的奖励机制催促你而是把原本抽象的“今天学了多久”变成一片可以慢慢长大的风景。5. 学习资料不再散落进度、计时和笔记统一管理StudyDesk 的学习资料库可以添加 PDF、电子书、Word、PPT、Excel 等文件并按分类、状态、收藏和标签整理。对于正在阅读的资料可以记录当前页与总页数或直接拖动进度条开启“计时阅读”后应用会自动保存本次阅读时长每本资料还可以添加带页码的摘录和想法并通过全局搜索快速找到。如果原文件被移动或删除应用会标红提示并支持一键重新定位。双击资料卡片则会直接调用系统默认程序打开文件。6. 倒数日、背景音乐、健康提醒一个桌面统一处理除了核心学习流程StudyDesk 还提供考试、DDL 和重要日期倒数日在线轻音乐、本地音乐与在线链接播放网易云音乐、QQ 音乐歌单链接导入最近 7 天专注统计喝水、久坐和护眼 20-20-20 提醒4-4-6 节律深呼吸桌面置顶浮窗、系统托盘、全局热键和CtrlK全局搜索明暗主题、自定义强调色与自定义背景全量数据备份、恢复和应用内自动更新。本地优先无需登录核心数据保存在自己的电脑中StudyDesk 无需注册账号课表、任务、专注记录、资料信息和个性化设置等核心数据都保存在本地。这既减少了首次使用的门槛也避免了为了使用一个简单学习工具而提交额外个人信息。没有网络时课表、番茄钟、待办、资料管理、统计和内置铃声等主要功能仍然可以正常使用。在线音乐与歌单解析依赖第三方公开接口受接口稳定性和版权限制影响部分歌曲可能只能试听或无法播放你也可以完全使用本地音乐。开发者视角Vue 3 Electron 的完整桌面应用实践StudyDesk 不仅是一款可以直接使用的软件也是一个采用 MIT 许可证开源的桌面应用项目。主要技术栈包括模块技术桌面外壳Electron 33前端Vue 3.5、TypeScript状态管理Pinia 2路由Vue Router 4构建electron-vite 2、Vite 5持久化本地 JSON Store打包与更新electron-builder、electron-updater测试Vitest、Electron 冒烟测试项目采用 Electron 主进程、preload 安全桥接和 Vue 渲染进程分层。主进程负责窗口、托盘、系统通知、文件访问、提醒调度、番茄引擎和自动更新渲染层负责页面、状态管理和交互preload 通过contextBridge暴露受控 API。对于正在学习 Electron、Vue 3、Pinia、桌面应用状态持久化、系统托盘、自动更新或跨进程通信的开发者这个项目也可以作为一份可运行的参考实现。当前版本与后续计划当前版本为v0.2.2这一版本升级了整体视觉系统并重做了课表的真实时间轴布局。课程卡片现在能够按实际起止时间和分钟数等比例显示同时补充了更完整的课程信息。后续计划包括专注统计热力图、番茄白噪音场景和云同步等功能。欢迎通过 GitHub Issues 提交 Bug、建议或参与开发。下载与运行普通用户可以前往 GitHub Releases 下载 Windows 安装包https://github.com/miku1130/study-desk/releases开发者可以直接克隆项目运行gitclone https://github.com/miku1130/study-desk.gitcdstudy-desknpminstallnpmrun dev构建、检查与测试命令npmrun typechecknpmtestnpmrun buildnpmrun build:win运行环境要求Node.js 18 或更高版本Windows 10/11。总结StudyDesk 的目标不是成为又一个功能复杂的效率软件而是尽量把学习中真正高频的动作连接起来看课表、列任务、开始专注、整理资料、记录进度、定期复盘。项目代码、问题反馈与后续开发计划均维护在 GitHub 仓库中可通过 Issues 参与讨论或提交改进。项目地址https://github.com/miku1130/study-desk许可证MIT