code

番茄时钟项目（Pomodoro Timer）

📝 项目概述

本项目是一个基于 Vue 3 + Vite 搭建的番茄时钟（Pomodoro Timer）应用，主要功能包括 25 分钟专注倒计时、进度条展示及倒计时结束提示音。适用于移动端，使用了 Vant 组件库优化界面体验，并采用 Pinia 进行状态管理。后端数据使用静态数据模拟，方便快速开发与部署。

🎯 功能说明

✅ 25 分钟倒计时（默认设置）
✅ 进度条实时显示倒计时进度
✅ 倒计时结束时播放提示音
✅ 可暂停、继续倒计时
✅ 可重置计时器

🛠️ 技术架构

• 前端框架：Vue 3 + Vite
• UI 框架：Vant（适用于移动端）
• 状态管理：Pinia
• 后端模拟：静态 JSON 数据或本地模拟数据

📦 项目结构

pomodoro-timer/ │ ├── public/ # 公共资源（如提示音文件） │ └── alarm.mp3 │ ├── src/ │ ├── assets/ # 图片、样式等资源 │ ├── components/ # 组件 │ │ ├── Timer.vue # 倒计时组件 │ │ └── ProgressBar.vue # 进度条组件 │ ├── store/ # Pinia 状态管理 │ │ └── timerStore.js │ ├── views/ # 页面 │ │ └── Home.vue │ ├── App.vue # 根组件 │ └── main.js # 入口文件 │ ├── package.json └── vite.config.js

🚀 运行教程

环境要求

• Node.js 16.0 或更高版本
• npm 7.0 或更高版本

安装步骤

1. 克隆项目到本地：

git clone [项目地址]
cd pomodoro-timer

2. 安装依赖：

npm install

3. 运行开发服务器：

npm run dev

4. 打开浏览器访问：

http://localhost:3000

构建部署

1. 构建生产版本：

npm run build

2. 预览构建结果：

npm run preview

构建完成后，dist 目录中包含了可部署的文件。

📝 使用说明

1. 打开应用后，你会看到一个 25 分钟的倒计时器
2. 点击"开始"按钮开始倒计时
3. 在倒计时过程中，你可以：
   • 点击"暂停"按钮暂停倒计时
   • 点击"重置"按钮重置到 25 分钟
4. 当倒计时结束时，会播放提示音提醒你