# 番茄钟

**Repository Path**: monoio/pomodoro-timer

## Basic Information

- **Project Name**: 番茄钟
- **Description**: vibecodding 练习
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-16
- **Last Updated**: 2026-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 番茄钟 Pomodoro Timer App

> 使用 [opencode](https://opencode.com) + OMO + Superpowers Vibe Coding 构建的桌面应用

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Electron |
| 前端 | React 18 |
| 状态管理 | Zustand |
| 测试 | Jest + Testing Library |
| 构建 | Webpack + electron-builder |

## 项目背景

本项目展示了如何使用 **Vibe Coding** 方式快速构建一个完整的桌面应用。

### 什么是 Vibe Coding？

Vibe Coding 是一种由 AI 辅助的编程方式，核心特点：

- **自然语言驱动**：通过对话描述需求，AI 完成代码实现
- **迭代式开发**：快速原型 → 测试 → 修复 → 完善
- **技能分工**：利用专门的 AI Agent 处理不同任务（探索、实现、审查、规划）
- **TDD 优先**：先写测试，再写实现，确保代码质量

### 本项目使用的工具

- **opencode**: AI 编程助手，提供多 Agent 协作框架
- **OMO (OhMyOpenCode)**: 预配置的 AI Agent 系统
- **Superpowers**: 定制技能集，包含：
  - `brainstorming`: 需求分析和设计
  - `writing-plans`: 任务规划和拆分
  - `using-git-worktrees`: Git 工作树管理
  - `test-driven-development`: TDD 开发流程
  - `requesting-code-review`: 代码审查
  - `receiving-code-review`: 处理审查反馈
  - `verification-before-completion`: 交付前验证
  - `finishing-a-development-branch`: 分支完成和合并

## 功能特性

- 🍅 **番茄钟计时**：25分钟工作 + 5分钟休息循环
- 📝 **任务管理**：创建、删除、标记完成
- ⏱️ **计时记录**：绑定任务并记录专注时长
- 📊 **统计面板**：今日/本周专注时长统计
- ⚙️ **自定义设置**：可调整工作和休息时长
- 💾 **数据持久化**：自动保存到本地存储
- 🖥️ **系统托盘**：最小化到托盘运行
- 🌙 **深色主题**：护眼深色 UI

## 快速开始

### 运行开发版本

```bash
# 安装依赖
npm install

# 启动开发模式
npm run dev

# 运行测试
npm test
```

### 构建发布版本

```bash
# 构建 Web 资源
npm run build

# 打包为可执行文件
npm run dist
```

打包后的可执行文件位于：`release/win-unpacked/`

## 项目结构

```
timer_clock/
├── src/
│   ├── main/main.js           # Electron 主进程
│   └── renderer/             # React 前端
│       ├── components/        # UI 组件
│       │   ├── TimerDisplay  # 计时器显示
│       │   ├── TimerControls # 计时器控制
│       │   ├── TaskList      # 任务列表
│       │   ├── StatsPanel    # 统计面板
│       │   └── SettingsModal # 设置弹窗
│       ├── store/            # Zustand 状态管理
│       │   ├── timerStore    # 计时器状态
│       │   └── taskStore     # 任务状态
│       ├── utils/            # 工具函数
│       │   ├── sound.js      # 响铃功能
│       │   └── storage.js    # 数据存储
│       └── styles/           # CSS 样式
├── release/                  # 构建输出
│   └── win-unpacked/        # Windows 可执行文件
├── package.json
└── README.md
```

## 开发流程

本项目采用 TDD 开发模式：

1. **需求分析** → `brainstorming` 技能分析需求
2. **任务规划** → `writing-plans` 技能拆分任务
3. **创建分支** → `using-git-worktrees` 技能创建隔离工作区
4. **TDD 实现** → `test-driven-development` 技能驱动开发
5. **代码审查** → `requesting-code-review` 技能审查代码
6. **修复反馈** → `receiving-code-review` 技能处理反馈
7. **交付验证** → `verification-before-completion` 技能验证功能
8. **完成分支** → `finishing-a-development-branch` 技能合并清理

## 测试

项目包含 40 个单元测试，覆盖所有核心功能：

```bash
npm test
```

测试覆盖：
- TimerDisplay 组件
- TimerControls 组件
- TaskList 组件
- StatsPanel 组件
- SettingsModal 组件
- timerStore 状态管理
- taskStore 状态管理
- sound 工具函数
- storage 工具函数

## 技术亮点

### 1. Zustand 状态管理

使用 Zustand 简洁地管理番茄钟状态和任务数据：

```javascript
const useTimerStore = create((set, get) => ({
  timeLeft: 25 * 60,
  mode: 'work',
  isRunning: false,
  // ...
}));
```

### 2. TDD 开发

每个功能都先编写测试，再实现代码：

```javascript
// Test
test('start sets isRunning to true', () => {
  const { start } = useTimerStore.getState();
  start();
  expect(useTimerStore.getState().isRunning).toBe(true);
});
```

### 3. 数据持久化

使用 localStorage 实现数据持久化：

```javascript
useEffect(() => {
  saveData({ tasks, currentTaskId, workDuration, breakDuration });
}, [tasks, currentTaskId, workDuration, breakDuration]);
```

## 许可证

MIT License