Electron + Vue 3 桌面应用实践:StudyDesk 的架构与功能设计
2026/7/20 15:00:30 网站建设 项目流程

你有没有过这样的学习状态?

课表放在一个 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 节律深呼吸;
  • 桌面置顶浮窗、系统托盘、全局热键和Ctrl+K全局搜索;
  • 明暗主题、自定义强调色与自定义背景;
  • 全量数据备份、恢复和应用内自动更新。

本地优先:无需登录,核心数据保存在自己的电脑中

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

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询