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

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

✨ 功能特性

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

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

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

构建生产版本

npm run build

预览生产版本

npm run preview

🛠️ 技术栈

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

🚀 快速部署

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

生产部署

# 使用部署脚本（推荐）
./deploy.sh

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

Docker 部署

# 使用 Docker Compose
docker-compose up -d

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

详细部署说明请参考 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格式存储数据，包含以下结构：

{
  "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"
}

<EFBFBD><EFBFBD> 许可证

MIT License