【Code With SOLO】用 SOLO 快速构建日历待办提醒系统 + 番茄时钟应用
一、摘要
面向日常工作学习中需要高效管理任务的人群，我利用 TRAE SOLO 开发了一款纯本地的日历待办提醒系统，集成番茄工作法计时功能。所有数据存储在浏览器 IndexedDB 中，无需后端支持，打开即可使用。
整个项目从零开始，仅使用 SOLO 的代码生成、测试辅助与调试能力，完成了需求分析、架构设计、代码实现、测试验证与 Bug 修复等全流程工作。
二、真实场景与需求
目标人群
-
职场人士：需要管理日常工作任务，提高工作效率
-
学生群体：需要规划学习计划，利用番茄工作法提升专注度
-
效率工具爱好者：追求简洁高效的任务管理解决方案
痛点描述
在日常工作学习中，任务管理面临以下挑战：
-
任务分散：待办事项分散在多个平台，难以统一管理
-
遗忘提醒：重要任务容易忘记，缺乏有效的提醒机制
-
效率低下：缺乏时间管理工具，工作专注度不够
-
数据安全：担心数据上传到云端的隐私问题
现有做法与不足
目前市面上的任务管理工具存在以下问题：
-
功能繁杂：过多功能导致使用复杂，学习成本高
-
需要联网：依赖云端同步，离线时无法使用
-
隐私担忧：数据存储在第三方服务器，存在安全风险
-
缺乏整合：待办管理与时间管理工具分离
三、作品介绍
本项目是一款基于 React + TypeScript 的纯前端日历待办提醒系统，集成番茄时钟功能，所有数据本地存储，无需后端支持。
核心功能
| 功能模块 | 核心能力 |
|:—:|---------|
| 日历管理 | 月视图/列表视图切换、待办 CRUD、重复任务 |
| 提醒机制 | 浏览器桌面通知、自定义提醒时间 |
| 番茄时钟 | 25分钟倒计时、工作内容记录 |
| 数据统计 | 完成率统计、优先级分布、使用分析 |
功能亮点
1. 日历模块
-
月视图：显示当前月份日历网格，每个日期显示待办数量角标
-
列表视图：按日期倒序显示所有待办，支持筛选（全部/待完成/已完成/今日到期）
-
待办 CRUD：标题、描述、日期时间、重复规则、提醒时间、优先级
-
重复规则：支持每日/每周/每月/每年重复
-
完成标记：一键完成/取消完成，自动记录完成时间
2. 提醒机制
-
浏览器桌面通知（需用户授权）
-
可自定义提前提醒时间（5/10/15/30/60分钟）
-
页面打开时自动检测并弹出到期提醒
-
支持重复任务自动生成下一个周期
3. 番茄时钟
-
大字体倒计时显示，视觉清晰
-
工作内容输入（必填才能开始）
-
开始/暂停/重置控制按钮
-
计时完成自动触发浏览器通知
-
自动在今日日历中创建已完成待办记录
4. 数据统计
-
待办完成率统计（总数、已完成、待完成、完成率）
-
今日待办概览
-
优先级分布可视化图表（高/中/低）
-
重复规则分布统计
-
番茄时钟使用统计（总次数、总时长、平均时长）
-
时间周期统计（今日/本周/本月）
-
最近完成的番茄记录列表
四、用 TRAE SOLO 实现的过程
任务拆解策略
整个项目被拆解为五个阶段：
| 阶段 | 任务 | 使用的 SOLO 能力 |
|:—:|------|----------------|
| Step 1 | 需求分析与设计 | 需求分析能力、架构设计能力 |
| Step 2 | 核心代码生成 | 代码生成能力、TypeScript 支持 |
| Step 3 | 测试验证 | 测试辅助能力、单元测试生成 |
| Step 4 | Bug 修复与优化 | 调试能力、问题定位能力 |
| Step 5 | 功能扩展 | 代码生成能力、样式设计 |
使用的 SOLO 能力
① 需求分析与架构设计
利用 SOLO 的需求分析能力，明确了项目的功能模块和技术选型：
-
技术栈：Vite + React + TypeScript
-
数据存储：IndexedDB（使用 idb 库）
-
状态管理：React Context
-
日期处理：date-fns
② 代码生成
从零开始生成了完整的项目代码，包括：
-
类型定义文件（Todo、PomodoroRecord、Settings）
-
数据库操作模块（IndexedDB CRUD）
-
Context 状态管理（TodoContext、PomodoroContext、SettingsContext）
-
自定义 Hooks（useNotification、useReminder）
-
UI 组件（Header、MonthView、ListView、TodoEditor、PomodoroTimer、Statistics）
③ 测试辅助
自动生成了单元测试用例，覆盖：
-
ID 生成器唯一性测试
-
类型定义验证
-
通知 Hook 测试
-
重复任务计算逻辑测试
-
计时器计算测试
④ Bug 修复
在开发过程中发现并修复了以下问题：
| 问题 | 原因 | 解决方案 |
|:—:|------|---------|
| IndexedDB 主键冲突 | crypto.randomUUID() 在极短时间内可能生成重复 ID | 使用时间戳+随机字符串生成唯一 ID |
| 优先级按钮样式问题 | currentColor 继承导致背景色与字体颜色相同 | 为每个优先级设置明确的背景色和白色字体 |
关键实现
数据模型设计
interface Todo {
id: string;
title: string;
description: string;
datetime: number;
repeat: 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly';
reminder: number;
priority: 'high' | 'medium' | 'low';
completed: boolean;
completedAt: number | null;
createdAt: number;
}
项目结构
src/
├── components/ # UI组件
│ ├── Header.tsx
│ ├── MonthView.tsx
│ ├── ListView.tsx
│ ├── TodoItem.tsx
│ ├── TodoEditor.tsx
│ ├── PomodoroTimer.tsx
│ └── Statistics.tsx
├── contexts/ # 状态管理
│ ├── TodoContext.tsx
│ ├── PomodoroContext.tsx
│ └── SettingsContext.tsx
├── hooks/ # 自定义 Hooks
│ ├── useNotification.ts
│ └── useReminder.ts
├── db/ # 数据库操作
│ └── index.ts
└── types/ # 类型定义
└── index.ts
五、效果与总结
提效成果
| 指标 | 传统方式 | 使用 SOLO | 提升幅度 |
|:—:|---------|:---------:|:—
| 开发时间 | 约 8 小时 | 约 1.5 小时 | 节省 80% |
| 代码质量 | 依赖人工检查 | 自动生成高质量代码 | 显著提升 |
| 测试覆盖率 | 手动编写 | 自动生成测试用例 | 全面覆盖 |
| Bug 修复效率 | 手动定位 | AI 辅助分析 | 大幅提升 |
SOLO 在流程中的价值
1. 需求分析阶段
-
SOLO 帮助梳理清晰的功能模块和技术方案
-
提供架构设计建议，避免后期重构
2. 代码生成阶段
-
自动生成完整的代码结构，无需从头编写
-
代码风格统一，符合最佳实践
-
自动处理复杂的状态管理逻辑
3. 测试阶段
-
自动生成测试用例，确保代码质量
-
快速验证功能正确性
4. Bug 修复阶段
-
AI 辅助定位问题根源
-
提供针对性的修复方案
-
加速问题解决流程
经验总结
-
明确需求再动手：先用 SOLO 梳理清楚需求和设计，再开始编码，可以避免很多后期返工
-
善用生成能力：对于重复性工作（如 CRUD 操作、Context 状态管理），充分利用 SOLO 的代码生成能力
-
测试先行：在生成代码阶段就考虑测试，确保功能稳定性和可维护性
-
持续迭代：遇到问题及时用 SOLO 分析和修复，保持开发节奏
-
保持沟通：在生成过程中不断与 SOLO 确认细节，确保输出符合预期
未来计划
-
添加数据导出/导入功能，方便数据迁移
-
支持主题切换（深色/浅色模式）
-
添加更多统计维度和可视化图表
-
支持快捷键操作，提升操作效率
六、展示截图
- 月视图界面 - 展示日历网格和待办数量角标
- 列表视图界面 - 展示筛选功能和待办列表
-
新建待办弹窗 - 展示表单填写界面
-
番茄时钟界面 - 展示倒计时和控制按钮
- 数据统计页面 - 展示完成率和使用统计
七、技术栈
-
前端框架：React 18 + TypeScript
-
构建工具：Vite 5
-
数据存储：IndexedDB（idb 库）
-
日期处理：date-fns
-
通知提醒：Browser Notification API
-
测试框架：Jest + @testing-library/react
标签：Code With SOLO、React、TypeScript、效率工具、任务管理