一个功能完善的微信小程序待办事项管理应用,支持番茄钟专注、分类管理、优先级设置等功能。
- 🍅 新增番茄钟功能 - 工作/短休息/长休息三种模式
- 🔗 关联待办 - 番茄钟可关联具体待办事项
- 📊 专注统计 - 记录今日完成番茄钟数量
- ⏱️ 专注时长 - 待办事项显示累计专注时间
- 🎨 优化编辑体验 - 显示已选择的分类和优先级(带颜色标识)
- 📜 虚拟滚动组件 - 支持长列表性能优化(待启用)
todo-miniprogram/
├── pages/ # 页面目录
│ ├── index/ # 首页 - 待办列表
│ ├── add/ # 新增/编辑页
│ ├── category/ # 分类管理页
│ └── pomodoro/ # 番茄钟页 ⭐ 新增
│
├── components/ # 公共组件
│ ├── todo-item/ # 待办项组件
│ ├── filter-bar/ # 筛选栏组件
│ ├── empty-state/ # 空状态组件
│ └── virtual-list/ # 虚拟滚动组件 ⭐ 新增
│
├── utils/ # 工具函数
│ ├── storage.js # 本地存储封装
│ ├── util.js # 通用工具
│ └── date.js # 日期处理
│
└── styles/ # 样式变量
└── variables.wxss # CSS 变量定义
- ✅ 待办事项增删改查
- ✅ 完成/取消完成切换
- ✅ 分类管理(支持自定义分类和颜色)
- ✅ 优先级设置(高/中/低)
- ✅ 截止时间设置
- ✅ 多维度筛选(全部/未完成/已完成/分类)
- ⏱️ 25 分钟工作模式
- ☕ 5 分钟短休息
- 🌴 15 分钟长休息
- 🔗 关联待办事项
- 📊 今日专注统计
- 📈 累计专注时长记录
- 📳 完成震动提醒
- 🎨 简洁现代的 UI 设计
- 📱 流畅的动画过渡
- 🔄 下拉刷新
- 💾 本地数据持久化
- 🎯 左滑删除操作
- 🏷️ 分类和优先级可视化
- 选择分类后显示带颜色标识的标签
- 选择优先级后显示对应颜色标签
- 编辑模式自动加载已有数据
- 表单字段默认值正确显示
// 自动检测列表长度,超过阈值启用虚拟滚动
<virtual-list
items="{{todos}}"
item-height="160"
buffer-size="5"
threshold="20"
/>- 使用
setInterval精确计时 - 支持暂停/继续/重置
- 自动切换工作/休息模式
- 数据持久化保存
- 打开微信开发者工具
- 选择「导入项目」
- 选择项目目录
- 填写 AppID(测试可选「测试号」)
- 点击「导入」
- 点击「编译」按钮
- 在模拟器或真机上预览
所有样式变量定义在 styles/variables.wxss 中:
page {
--primary-color: #3498db; /* 主题色 */
--success-color: #2ecc71; /* 成功色 */
--danger-color: #e74c3c; /* 危险色 */
--bg-color: #f5f6fa; /* 背景色 */
/* ... 更多变量 */
}todos- 待办事项数组categories- 分类数组pomodoro_history- 番茄钟完成记录 ⭐ 新增
{
id: 'id_1711353600000_abc123',
title: '完成项目报告',
completed: false,
categoryId: 'cat_001',
priority: 'high',
dueDate: 1711353600000,
focusTime: 50, // 累计专注分钟数 ⭐ 新增
createdAt: 1711267200000,
updatedAt: 1711267200000
}- 待办事项搜索
- 子任务支持
- 重复待办
- 提醒通知
- 数据导出/导入
- 云同步
- 统计图表
- 虚拟滚动实际集成到首页
- 长列表虚拟滚动启用
- 图片懒加载
- 分包加载
- 骨架屏
- 使用 ES6+ 语法
- 组件化开发
- 样式使用 CSS 变量
- 注释清晰完整
feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 样式调整
refactor: 重构代码
test: 测试相关
chore: 构建/工具链
MIT License
开发者: Survivor0102
最后更新: 2026-03-25