来源：AI开发日志公众号专辑「Build Your Own X With AI」
原文链接：https://mp.weixin.qq.com/s?__biz=MzUxMjg3MjE2OA==&mid=2247485778&idx=1&sn=67d6be79a24ff48c9f5a4013d536455a&chksm=f95c92d5ce2b1bc3b42294406d5e0b805398388a71bb4f2db3dd69ad01bd4bdacc902d6d762a#rd
50天重启人生-桌面日历应用
一个美观的桌面日历应用，可以作为桌面背景运行，提供年历视图和待办事项管理功能。
截图
功能特性
🗓️ 年历视图: 显示完整年度日历，左侧展示所有月份
✅ 待办事项管理: 右侧待办事项列表，支持添加、完成、删除操作
🌙 明暗主题: 支持明暗主题切换，适应不同使用场景
💾 数据持久化: 自动保存待办事项和主题设置到本地存储
📅 日期交互: 点击日历中的日期，待办事项会跳转到对应日期
🖥️ 桌面背景: 应用运行后作为桌面背景，其他应用在其上方显示
📱 响应式设计: 适配不同屏幕尺寸
技术栈
- Frontend
-
React 18 + CSS3
- Desktop
-
Electron 26
- 构建工具
-
React Scripts
- 包管理
-
npm
安装和运行
前置要求
Node.js (推荐 v16 或更高版本)
npm
开发模式
安装依赖：
npm install
启动开发服务器（仅 React 应用）：
npm run dev-react
访问 http://localhost:3000 查看应用
启动完整桌面应用（需要 Electron 正确安装）：
npm run dev
生产构建
构建 React 应用：
npm run build
构建桌面应用：
npm run build-electron
打包分发：
npm run dist
使用说明
基本操作
- 查看日历
-
应用启动后，左侧显示当前年度的完整日历
- 添加待办事项
-
在右侧输入框中输入内容，按回车或点击 + 按钮添加
- 完成待办事项
-
点击待办事项前的复选框标记为完成
- 删除待办事项
-
鼠标悬停在待办事项上，点击右侧的 × 按钮删除
- 切换主题
-
点击右上角的主题切换按钮（🌙/☀️）
日期交互
点击日历中的任意日期，右侧待办事项会切换到该日期
今天的日期会有特殊标记
有待办事项的日期会显示小圆点指示器
桌面背景模式
当作为桌面应用运行时：
应用会全屏显示在桌面背景层
其他应用窗口会显示在日历应用上方
仍可以与日历进行交互（点击、输入等）
项目结构
Calendar/
├── public/ # 静态资源
├── src/
│ ├── components/ # React 组件
│ │ ├── Calendar.js # 日历组件
│ │ ├── TodoList.js # 待办事项组件
│ │ └── ThemeToggle.js # 主题切换组件
│ ├── styles/ # CSS 样式文件
│ │ ├── App.css # 全局样式
│ │ ├── Calendar.css # 日历样式
│ │ ├── TodoList.css # 待办事项样式
│ │ └── ThemeToggle.css # 主题切换样式
│ ├── main.js # Electron 主进程
│ └── index.js # React 入口文件
├── package.json # 项目配置
└── README.md # 说明文档
自定义配置
主题颜色
可以在 CSS 文件中修改主题颜色：
深色主题：主要使用黑色渐变背景，红色强调色 (#ff6b6b)
浅色主题：主要使用白色渐变背景，蓝色强调色 (#e74c3c)
桌面行为
在 src/main.js 中可以调整桌面背景行为：
- transparent
-
背景透明度
- alwaysOnTop
-
是否总在最上层
- focusable
-
是否可以获得焦点
故障排除
Electron 安装问题
如果遇到 Electron 安装问题，尝试：
rm -rf node_modules/electron
npm install electron
网络问题
如果在网络受限环境中，可以：
使用淘宝镜像：npm config set registry https://registry.npmmirror.com
或仅运行 React 版本：npm run dev-react
开发计划
[ ] 添加更多待办事项功能（优先级、分类、提醒）
[ ] 支持导入/导出待办事项
[ ] 添加快捷键支持
[ ] 支持多年份切换
[ ] 添加天气信息显示
[ ] 支持自定义背景图片
贡献
欢迎提交 Issue 和 Pull Request！
许可证
MIT License