番茄时光 🍅

一个简洁美观的番茄钟时间管理应用，帮助你提高工作效率和专注力。

#项目背景

番茄工作法（Pomodoro Technique）是一种时间管理方法，通过将工作时间分割成多个专注时段（通常为 25 分钟），中间穿插短暂休息，来提高工作效率和注意力。本应用采用温暖的果篮主题设计，让时间管理变得更加有趣和直观。

每完成一个番茄钟，你的虚拟果篮中就会增加一个番茄，可视化地展示你的成果，给予即时的成就感反馈。

#功能特性

核心功能

• ▸

  三种计时模式

  • ▸🍅 工作模式：默认 25 分钟专注工作
  • ▸☕ 短休息：默认 5 分钟放松休息
  • ▸🛋️ 长休息：默认 15 分钟深度放松
• ▸

  可自定义设置

  • ▸自由调整各模式的时长（1-60 分钟）
  • ▸配置长休息触发间隔（默认每 4 个番茄钟）
  • ▸开启/关闭提示音
  • ▸自动启动下一个番茄钟或休息
• ▸

  进度可视化

  • ▸实时进度条显示当前番茄钟完成度
  • ▸动态番茄图标跟随进度移动
  • ▸果篮收集展示已完成的番茄数量
  • ▸距离下次长休息的进度指示
• ▸

  主题切换

  • ▸🌞 浅色模式：柔和奶油色背景，温暖舒适
  • ▸🌙 深色模式：护眼深色背景，适合夜间使用
• ▸

  细节优化

  • ▸优雅的番茄掉落动画效果
  • ▸计时器运行时的呼吸动画
  • ▸完成时的音效提醒（可关闭）
  • ▸响应式设计，支持各种屏幕尺寸

#技术栈

前端框架

• ▸Next.js 14 - React 全栈框架，App Router 架构
• ▸React 18 - 用户界面库
• ▸TypeScript - 类型安全的 JavaScript

样式方案

• ▸Tailwind CSS v4 - 原子化 CSS 框架
• ▸tw-animate-css - CSS 动画扩展
• ▸自定义动画 - tomato-bounce、tomato-drop、basket-shake 等

UI 组件

• ▸shadcn/ui - 基于 Radix UI 的高质量组件库
  • ▸Button、Card、Dialog、Progress
  • ▸Slider、Switch、Label、Badge

字体

• ▸Geist Sans/Mono - Vercel 官方字体
• ▸Fredoka One - Google 字体，用于标题和强调文本

其他工具

• ▸next-themes - 主题切换管理
• ▸lucide-react - 图标库
• ▸class-variance-authority - 样式变体管理
• ▸clsx + tailwind-merge - 类名合并工具

部署与分析

• ▸Vercel - 托管平台
• ▸Vercel Analytics - 流量分析

#License

MIT

专注工作，享受成果 ✨