# 滴答清单 - Vue3 任务管理应用

一个基于 Vue3 的现代化任务管理应用，提供直观的用户界面和完整的功能。

## ✨ 功能特性

- 📝 **任务管理**: 添加、编辑、删除任务
- ✅ **任务完成**: 一键标记任务完成状态
- 📁 **项目管理**: 创建和管理多个项目，每个任务归属于特定项目
- 🏷️ **任务类型**: 支持需求分析、文档编写、开发代码、测试、运维等类型
- 🎯 **优先级设置**: 支持高、中、低三个优先级
- ⏰ **时间管理**: 设置任务的开始时间和结束时间，自动计算工作时长
- ⏱️ **计时器功能**: 为没有设置时间的任务提供计时器，自动统计工作时长
- 📊 **工作分析**: 实时分析每日工作分布，包括项目分布、类型分布和时间统计
- 🔍 **任务过滤**: 按项目、状态和类型筛选任务
- 📈 **统计信息**: 实时显示任务完成情况和今日工作统计
- 💾 **数据管理**: 支持JSON格式的数据导出、导入和清空功能
- 🗂️ **菜单系统**: 清晰的功能分区，包括任务管理、工作分析和数据管理
- ⛶ **全屏模式**: 支持浏览器宽度全屏显示，充分利用屏幕空间
- ☁️ **服务器同步**: 支持多设备数据同步，数据安全存储在服务器
- 🔄 **本地存储**: 数据自动保存到浏览器本地存储，支持数据备份和恢复
- 📱 **响应式设计**: 完美适配桌面和移动设备
- 🎨 **现代化UI**: 美观的渐变背景和卡片式设计

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

应用将在 `http://localhost:3000` 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 🛠️ 技术栈

- **Vue 3**: 使用 Composition API
- **Vite**: 快速的构建工具
- **VueUse**: 实用的 Vue 组合式函数
- **CSS3**: 现代化的样式设计
- **Node.js**: 后端服务器
- **Express**: Web 框架
- **Docker**: 容器化部署

## 🚀 快速部署

### 本地开发
```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 生产部署
```bash
# 使用部署脚本（推荐）
./deploy.sh

# 或手动部署
npm install
npm run build
node server.js
```

### Docker 部署
```bash
# 使用 Docker Compose
docker-compose up -d

# 或使用 Docker
docker build -t worktime-app .
docker run -d -p 3001:3001 worktime-app
```

详细部署说明请参考 [PRODUCTION_DEPLOYMENT.md](./PRODUCTION_DEPLOYMENT.md)

## 📁 项目结构

```
WorkTime/
├── src/
│   ├── App.vue          # 主应用组件
│   ├── main.js          # 应用入口
│   └── style.css        # 全局样式
├── dist/                # 构建输出目录
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── vite.config.js       # Vite 配置
├── server.js            # 后端服务器
├── Dockerfile           # Docker 配置
├── docker-compose.yml   # Docker Compose 配置
├── deploy.sh            # 部署脚本
├── test-deployment.sh   # 部署测试脚本
├── example-data.json    # 示例数据文件
├── user-data.json       # 用户数据文件
├── PRODUCTION_DEPLOYMENT.md  # 生产部署指南
└── README.md           # 项目说明
```

## 🎯 使用说明

1. **功能导航**: 使用顶部菜单在"任务管理"、"工作分析"、"数据管理"之间切换
2. **创建项目**: 在任务管理页面点击"新建项目"按钮创建新项目
3. **选择项目**: 点击项目列表中的项目进行切换
4. **添加任务**: 在输入框中输入任务内容，选择项目、任务类型、优先级和时间，点击"添加"按钮
5. **使用计时器**: 对于没有设置时间的任务，点击▶️按钮开始计时，点击⏹️按钮停止计时
6. **完成任务**: 点击任务前的圆形复选框标记完成
7. **编辑任务**: 点击任务右侧的编辑按钮进行修改
8. **删除任务**: 点击任务右侧的删除按钮移除任务
9. **过滤任务**: 使用过滤器按钮查看不同项目、状态和类型的任务
10. **查看分析**: 切换到"工作分析"页面查看工作统计和分析
11. **数据管理**: 切换到"数据管理"页面导出、导入或清空数据

## 💡 特色功能

- **智能日期显示**: 自动显示"今天"、"昨天"、"X天前"等相对时间
- **时间管理**: 支持设置任务的开始和结束时间，自动计算工作时长
- **计时器功能**: 为没有设置时间的任务提供实时计时器，支持开始/停止/累计计时
- **工作分析**: 实时分析每日工作分布，包括项目分布、类型分布和时间统计
- **项目管理**: 支持多项目管理，每个项目独立显示任务数量
- **任务类型标识**: 不同颜色的标签区分任务类型
- **项目标签**: 每个任务显示所属项目名称
- **悬停效果**: 鼠标悬停时显示操作按钮
- **键盘快捷键**: 支持回车键添加任务，ESC键取消编辑
- **空状态提示**: 根据不同情况显示相应的鼓励信息

- **数据备份**: 支持JSON格式的数据导出和导入，便于数据备份和迁移
- **菜单导航**: 清晰的功能分区，提供更好的用户体验和功能组织
- **全屏体验**: 支持一键切换浏览器宽度全屏，充分利用屏幕空间
- **云端同步**: 支持服务器存储和多设备同步，确保数据安全

## 🔧 自定义配置

可以通过修改 `src/style.css` 文件来自定义应用的外观，包括：
- 颜色主题
- 字体样式
- 布局尺寸
- 动画效果

## 📁 数据格式

应用使用JSON格式存储数据，包含以下结构：

```json
{
  "tasks": [
    {
      "id": 1703123456789,
      "text": "任务内容",
      "projectId": "project-1",
      "type": "development",
      "completed": false,
      "priority": "high",
      "startTime": "2023-12-20T09:00",
      "endTime": "2023-12-20T11:00",
      "timerRunning": false,
      "timerStartTime": null,
      "timerDuration": null,
      "createdAt": "2023-12-20T09:00:00.000Z",
      "editing": false
    }
  ],
  "projects": [
    {
      "id": "project-1",
      "name": "项目名称",
      "createdAt": "2023-12-18T10:00:00.000Z"
    }
  ],
  "exportDate": "2023-12-20T16:30:00.000Z",
  "version": "1.0.0"
}
```

## �� 许可证

MIT License