197 lines
6.3 KiB
Markdown
197 lines
6.3 KiB
Markdown
# 滴答清单 - 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"
|
||
}
|
||
```
|
||
|
||
## <20><> 许可证
|
||
|
||
MIT License |