## 
摘要
作为一名开发者，日常工作中频繁在番茄钟、待办事项、数据分析等多个工具间切换，严重影响专注效率。我用 TRAE SOLO 从零构建了一款集**番茄钟计时、待办事项管理、统计分析可视化**于一体的纯前端时间管理工具，全程零后端、零部署，打开 HTML 文件即可使用。项目经历了 3 轮迭代（基础功能 → 功能增强 → 全面优化），SOLO 自主完成了代码编写、Bug 修复、性能优化等全部工作，最终产出约 2400 行高质量代码，解决了计时器漂移、深色模式崩溃等 17 个技术问题。
-–
## 
背景
### 我的职业角色
我是一名开发者，日常负责金融科技方向的信息化建设工作，工作内容涉及需求分析、系统设计、编码实现和项目管理。
### 面临的工作痛点
在日常工作中，我长期被以下问题困扰：
1. **工具割裂，切换成本高**：番茄钟用 A 应用，待办事项用 B 应用，周报数据要从 C 应用手动导出——频繁切换应用严重打断工作心流，每次切换至少损失 5-10 分钟的专注时间
2. **数据隐私风险**：主流时间管理工具（如 Toggl、Clockify）都需要注册账号，工作数据存储在第三方服务器上，对于涉及金融科技领域的工作内容，数据安全是红线
3. **网络依赖**：公司网络偶尔不稳定，在线工具断网时完全不可用
4. **功能臃肿**：Notion、Todoist 等工具功能强大但过于复杂，加载慢、配置繁琐
5. **无法自定义**：工作时长 25 分钟不一定适合每个人，但很多工具不支持灵活调整
### 为什么选择 TRAE SOLO
TRAE SOLO 的不同之处在于：**它能理解我的完整需求，从零开始自主完成整个项目的开发**。我只需要用自然语言描述"我想要什么"，SOLO 就能自动创建文件、编写代码、启动服务器、在浏览器中验证效果。
-–
## 
实践过程
整个项目完全在 TRAE SOLO 中完成，经历了 3 轮迭代。
### 第一轮：基础功能（v1.0）—— 从需求到原型
我向 SOLO 描述了一份完整的需求文档，SOLO 自动完成了：
1. 创建 index.html、style.css、app.js 三个文件
2. 实现番茄钟计时器（25 分钟工作 + 5 分钟休息）
3. 实现待办事项的增删改查
4. 集成 Chart.js 做数据可视化
5. 启动本地 HTTP 服务器，在浏览器中实时预览
**遇到的问题**：Chart.js 从 CDN 加载失败，SOLO 自动检测到错误后，直接下载到本地并更新了引用路径。
**成果**：从需求到可运行的原型，大约 10 分钟完成。
### 第二轮：功能增强（v2.0）—— 让 SOLO 审查并建议
我没有直接告诉 SOLO 要加什么功能，而是让它自己审查代码并提出改进建议。SOLO 新增了 8 大功能：
| 功能 | 技术实现 | 解决的问题 |
|------|----------|------------|
| 
深色模式 | CSS 变量 + data-theme 属性 | 夜间使用刺眼 |
| 
键盘快捷键 | 全局 keydown 监听 | 频繁鼠标操作打断心流 |
| 
优先级与标签 | 三级优先级 + 四类标签 | 待办事项无法区分轻重缓急 |
| 
长休息机制 | roundsInCycle 跟踪（0-3） | 连续工作疲劳 |
| 
GitHub 风格热力图 | 12 周 × 7 天网格 | 缺乏长期效率趋势可视化 |
| 
PWA 离线支持 | Service Worker 缓存优先策略 | 断网时工具不可用 |
| 
浏览器通知 | Notification API | 切换标签页错过提醒 |
| 
每日目标 | localStorage 计数 + 进度条 | 缺乏每日量化目标 |
### 第三轮：全面优化（v3.0）—— 17 个问题的逐一修复
SOLO 对代码进行全面审计，发现了 8 个高优先级和 9 个中优先级问题。
**问题 1：计时器漂移（最隐蔽的 Bug）**
浏览器在后台标签页会节流 setInterval，导致番茄钟产生数分钟误差。SOLO 在审计阶段主动发现并修复：
```javascript
// 修复后：基于 Date.now() 计算实际时间差
start() {
this.endTime = Date.now() + this.remainingSeconds \* 1000;
this.intervalId = setInterval(() => this.tick(), 100);
},
tick() {
const remaining = Math.ceil((this.endTime - Date.now()) / 1000);
}
```
**问题 2：深色模式崩溃** — DarkMode 模块中 this.KEYS.THEME 引用错误，修复为 Storage.KEYS.THEME
**问题 3：轮次指示器初始状态错误** — 引入 roundsInCycle 变量（0-3 范围）
**问题 4：周报统计逻辑错误** — 新增 completedAt 字段替代 createdAt
-–
## 成果展示
### 最终产品功能
| 模块 | 功能点 |
|------|--------|
| 
番茄钟 | 自定义时长、长休息机制（每 4 轮）、每日目标进度、关联待办、页面标题倒计时、声音提醒 |
| 
待办事项 | CRUD、优先级（高/中/低）、标签分类（工作/学习/生活/健康）、实时搜索、批量清理、撤销删除 |
| 统计分析 | 4 个统计卡片、7 天柱状图、完成环形图、12 周热力图、本周效率报告、一键导出周报 |
| 体验优化 | 深色模式（手动/跟随系统）、键盘快捷键（Space/R/N/D/1/2/Esc）、PWA 离线、浏览器通知 |
| 
数据管理 | JSON 导入/导出、智能合并去重、自动清理 90 天旧数据 |
| 
无障碍 | ARIA 角色、aria-label、aria-pressed、aria-live 区域 |
### 技术指标
| 指标 | 数据 |
|------|------|
| 文件数量 | 6 个（HTML + CSS + JS + SW + Manifest + Chart.js） |
| 代码行数 | ~1500 行（JS）+ ~700 行（CSS）+ ~200 行（HTML） |
| 外部依赖 | 仅 Chart.js（已本地化，零网络依赖） |
| 数据存储 | localStorage（零服务器成本，数据完全本地） |
| 离线支持 | Service Worker 缓存所有资源，断网可用 |
| 响应式 | 桌面端 / 平板端 / 移动端三端适配 |
### 项目结构
```
tt1/
├── index.html # 页面结构（~200 行）
├── style.css # 样式文件（~700 行，含深色模式变量）
├── app.js # 核心逻辑（~1500 行，12 个模块）
├── chart.umd.min.js # Chart.js v4.4.7 本地化
├── manifest.json # PWA 配置（可安装到桌面）
└── sw.js # Service Worker 离线缓存策略
```
### 使用方式
打开 index.html 即可使用，无需安装任何依赖，无需启动服务器，无需注册账号。支持安装为 PWA 桌面应用。
> **完整源码已开源**：cbc1989/traesolo-fanqie ，欢迎 Clone 体验
-–
## 效果与经验总结
### 效率提升数据
| 维度 | 数据 |
|------|------|
| 开发时间 | 从需求到 v3.0 最终版，总计约 3-4 小时（传统方式估计需 3-5 天） |
| 代码质量 | SOLO 主动发现并修复 17 个优化点，包括 4 个高隐蔽性 Bug |
| 迭代轮次 | 3 轮（基础 → 增强 → 优化），每轮在已有代码上增量开发 |
| 日常使用 | 已成为每天工作中不可或缺的工具，工具切换成本降为零 |
### 核心经验总结
1. **AI 是执行者，人是决策者**：SOLO 负责写代码、调试、优化，但我负责定义需求、把控方向、验收质量。
2. **让 AI 做审计比直接问"怎么优化"更有价值**：SOLO 主动发现了计时器漂移等隐蔽 Bug，这些是我自己很难注意到的。
3. **技术选型要克制**：纯前端方案避免了过度工程化，零部署成本。
4. **增量迭代优于一步到位**：从 v1.0 到 v3.0，每轮在已有代码基础上增量开发。
### 可复用的建议
- **Prompt 技巧**：先描述完整需求文档，让 SOLO 生成初版；再让 SOLO 自主审查并提出优化建议
- **验证技巧**：每轮迭代后都在浏览器中实际操作验证，特别是边界情况
- **代码质量**：善用 SOLO 的代码审计能力，它对运行环境的理解往往超出预期
-–
> 本文参与 TRAE × 脉脉「AI 无限职场」SOLO 挑战赛
> 标签：**Code with SOLO**
> 项目仓库：cbc1989/traesolo-fanqie