# 任务跟踪系统

# 任务跟踪系统

## 项目简介

基于 Vue3 + Element Plus + Go (Gin) + GORM + MySQL 的任务跟踪系统，支持多级机构管理和任务全生命周期管理。

## ✅ 已完成功能

- **用户管理**：用户注册、登录、权限管理
- **机构管理**：多级机构结构，支持组织层级管理
- **任务管理**：
  - ✅ 任务创建、分配、状态更新、评论等
  - ✅ 任务附件上传、下载、删除
  - ✅ 支持多种格式附件（Office文档、PDF、图片等）
  - ✅ 任务列表搜索、筛选、分页
  - ✅ 任务看板视图
- **附件管理**：
  - ✅ 文件上传接口
  - ✅ 附件与任务关联
  - ✅ 附件下载和删除
  - ✅ 文件大小限制和格式验证
- **统计分析**：任务统计、用户工作量统计
- **API 设计**：RESTful API，仅支持 GET 和 POST 方法
- **数据库**：GORM 自动迁移，MySQL 数据库
- **前端测试页面**：完整的 API 测试界面

## 技术栈

### 前端
- Vue 3.x + TypeScript
- Element Plus UI 框架
- Vue Router + Vuex
- Vite 构建工具
- Axios HTTP 客户端

### 后端
- Go 1.19+ + Gin Framework
- GORM ORM + MySQL 8.0+
- JWT 认证 + CORS 支持
- 结构化日志 + 配置管理

## 项目结构

```
task_track/
├── frontend/                    # 前端项目
│   ├── src/
│   │   ├── views/
│   │   │   ├── ApiTest.vue     # ✅ API 测试页面
│   │   │   ├── Task/           # 任务相关页面
│   │   │   ├── Statistics/     # 统计页面
│   │   │   └── Profile/        # 个人中心
│   │   ├── router/             # 路由配置
│   │   └── store/              # 状态管理
│   └── package.json
├── backend/                     # 后端项目
│   ├── internal/
│   │   ├── handler/            # ✅ 完整业务逻辑
│   │   │   ├── handlers.go     # 用户/机构/任务/统计
│   │   │   └── auth.go         # 认证处理
│   │   ├── middleware/         # 中间件
│   │   ├── router/             # ✅ 路由配置(仅GET/POST)
│   │   └── config/             # 配置管理
│   ├── model/                  # ✅ 完整数据模型
│   ├── pkg/database/           # ✅ 数据库自动迁移
│   ├── main.go                 # 程序入口
│   └── config.yaml             # 配置文件
├── database/init.sql           # 数据库初始化脚本
├── api_test.http              # ✅ REST Client 测试文件
└── README.md
```

## 新功能说明

### 任务创建与附件管理

1. **创建任务**：
   - 在任务管理页面点击"创建任务"按钮
   - 填写任务基本信息（标题、描述、类型、优先级等）
   - 选择执行者和时间安排
   
2. **上传附件**：
   - 在任务创建对话框中，使用拖拽上传组件
   - 支持多文件上传，格式包括：
     - Office文档：.doc, .docx, .xls, .xlsx, .ppt, .pptx
     - PDF文档：.pdf
     - 图片文件：.png, .jpg, .jpeg, .gif
     - 文本文件：.txt
   - 文件大小限制：10MB以内
   
3. **管理附件**：
   - 在任务列表中点击"附件"列查看任务附件
   - 支持附件下载和删除操作
   - 实时显示附件数量

### API端点

新增的附件管理API：

```
POST   /api/upload                    # 上传文件
GET    /api/tasks/:id/attachments     # 获取任务附件列表
POST   /api/tasks/:id/attachments     # 添加任务附件关联
DELETE /api/attachments/:id           # 删除附件
GET    /api/download/:id              # 下载附件
```

任务管理API增强：
```
GET    /api/tasks                     # 支持标题搜索、状态/优先级筛选
POST   /api/tasks                     # 创建任务（支持附件关联）
```

## 快速开始

### 环境要求
- Node.js 16+, Go 1.19+, MySQL 8.0+

### 1. 数据库配置
```bash
mysql -u root -p
CREATE DATABASE task_track CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

### 2. 启动后端 (端口 8080)
```bash
cd backend
go mod tidy
# 编辑 config.yaml 配置数据库连接
go run main.go
```

### 3. 启动前端 (端口 5174)
```bash
cd frontend
npm install
npm run dev
```

### 4. 访问应用
- **API 测试页面**: http://localhost:5174/api-test
- **前端应用**: http://localhost:5174/
- **后端API**: http://localhost:8080/api/

## API 接口

### 🔐 认证接口
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录  
- `POST /api/auth/logout` - 用户登出
- `GET /api/auth/me` - 获取当前用户

### 👥 用户管理
- `GET /api/users` - 获取用户列表
- `GET /api/users/:id` - 获取用户详情
- `POST /api/users/update/:id` - 更新用户信息
- `POST /api/users/delete/:id` - 删除用户

### 🏢 机构管理  
- `GET /api/organizations` - 获取机构列表
- `POST /api/organizations` - 创建机构
- `GET /api/organizations/:id` - 获取机构详情
- `POST /api/organizations/update/:id` - 更新机构
- `POST /api/organizations/delete/:id` - 删除机构

### 📋 任务管理
- `GET /api/tasks` - 获取任务列表
- `POST /api/tasks` - 创建任务
- `GET /api/tasks/:id` - 获取任务详情
- `POST /api/tasks/update/:id` - 更新任务
- `POST /api/tasks/delete/:id` - 删除任务
- `POST /api/tasks/status/:id` - 更新任务状态
- `GET /api/tasks/:id/comments` - 获取任务评论
- `POST /api/tasks/:id/comments` - 创建任务评论

### 📊 统计接口
- `GET /api/statistics/overview` - 获取统计概览
- `GET /api/statistics/tasks` - 获取任务统计
- `GET /api/statistics/users` - 获取用户统计

## ⚙️ API 设计原则

1. **仅支持 GET 和 POST 方法** - 所有更新删除操作使用 POST
2. **统一响应格式**:
   ```json
   {
     "code": 200,
     "message": "Success", 
     "data": {}
   }
   ```
3. **GORM 自动迁移** - 数据库表结构自动创建和更新
4. **软删除支持** - 数据逻辑删除，可恢复
5. **分页查询** - 支持 page/limit 参数

## 🧪 测试

### API 测试方法

1. **网页测试界面**: 访问 http://localhost:5174/api-test
2. **REST Client**: 使用 `api_test.http` 文件（需要 VS Code REST Client 插件）
3. **Postman/Insomnia**: 导入 API 文档进行测试

### 测试步骤
1. 点击"测试连接"验证后端服务  
2. 注册用户账号
3. 登录获取 Token
4. 测试各个功能模块的 API

## 📈 开发状态

- ✅ **后端服务**: 完全实现，运行在端口 8080
- ✅ **数据库**: GORM 自动迁移，所有表结构完成
- ✅ **API 接口**: 所有接口已实现业务逻辑
- ✅ **前端框架**: Vue3 + Element Plus 基础架构
- ✅ **API 测试**: 完整的测试页面和工具
- 🚧 **前端页面**: 主要业务页面开发中
- 🚧 **权限控制**: 细粒度权限系统
- 🚧 **文件上传**: 任务附件功能

## 📋 下一步计划

1. 完善前端主要业务页面
2. 实现用户权限和角色管理
3. 添加任务看板拖拽功能
4. 实现文件上传和附件管理
5. 完善单元测试和集成测试
6. 部署文档和Docker支持

## 📄 许可证

MIT License

## 📁 项目结构

```
task_track/
├── frontend/                # 🎨 前端项目
│   ├── src/
│   │   ├── components/     # 🧩 可复用组件
│   │   ├── views/          # 📄 页面组件
│   │   │   ├── Login/      # 登录页面
│   │   │   ├── Dashboard/  # 仪表盘
│   │   │   ├── Task/       # 任务管理
│   │   │   └── Organization/ # 机构管理
│   │   ├── router/         # 🛣️ 路由配置
│   │   ├── store/          # 🗄️ 状态管理
│   │   └── api/            # 📡 API接口
│   ├── package.json        # 📦 依赖配置
│   └── vite.config.ts      # ⚙️ 构建配置
├── backend/                 # ⚙️ 后端项目
│   ├── internal/
│   │   ├── config/         # 📋 配置管理
│   │   ├── handler/        # 🎯 请求处理器
│   │   ├── middleware/     # 🔒 中间件
│   │   └── router/         # 🛣️ 路由配置
│   ├── model/              # 🗃️ 数据模型
│   ├── pkg/                # 📚 公共包
│   │   ├── auth/           # 🔐 认证相关
│   │   ├── database/       # 💾 数据库相关
│   │   └── logger/         # 📝 日志相关
│   ├── go.mod              # 📦 Go模块
│   └── main.go             # 🚀 程序入口
├── database/               # 💾 数据库文件
│   └── init.sql            # 📊 初始化脚本
├── .vscode/                # 🔧 VS Code配置
│   └── tasks.json          # ⚡ 任务配置
├── todo/                   # 📋 项目文档
│   └── todo1.md            # 项目规划
├── README.md               # 📖 项目说明
├── DEVELOPMENT.md          # 👨‍💻 开发指南
├── install.sh              # 🐧 Linux安装脚本
└── install.bat             # 🪟 Windows安装脚本
```

## 🚀 快速开始

### 📋 环境要求
- **Node.js** >= 16.0
- **Go** >= 1.21
- **MySQL** >= 8.0

### ⚡ 一键安装

**Windows用户:**
```bash
.\install.bat
```

**Linux/macOS用户:**
```bash
chmod +x install.sh
./install.sh
```

### 📊 数据库配置

1. **创建数据库:**
```sql
CREATE DATABASE task_track CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. **导入初始数据:**
```bash
mysql -u root -p task_track < database/init.sql
```

3. **修改配置文件** `backend/config.yaml`:
```yaml
database:
  host: "localhost"
  port: "3306"
  username: "your_username"
  password: "your_password"
  database: "task_track"
```

### 🎯 启动服务

**方法一：使用VS Code任务（推荐）**
1. 打开VS Code
2. 按 `Ctrl+Shift+P` 打开命令面板
3. 输入 `Tasks: Run Task`
4. 选择 `启动完整应用`

**方法二：手动启动**

启动后端：
```bash
cd backend
go run main.go
```

启动前端：
```bash
cd frontend  
npm run dev
```

### 🌐 访问应用
- **前端应用**: http://localhost:5173
- **后端API**: http://localhost:8080
- **默认账号**: admin / 123456

## � API文档

### � 认证接口

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/api/auth/login` | 用户登录 |
| POST | `/api/auth/register` | 用户注册 |
| POST | `/api/auth/logout` | 用户登出 |
| GET | `/api/auth/me` | 获取当前用户 |

### 👥 用户管理

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/users` | 获取用户列表 |
| GET | `/api/users/:id` | 获取用户详情 |
| PUT | `/api/users/:id` | 更新用户信息 |
| DELETE | `/api/users/:id` | 删除用户 |

### 🏢 机构管理

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/organizations` | 获取机构列表 |
| POST | `/api/organizations` | 创建机构 |
| PUT | `/api/organizations/:id` | 更新机构 |
| DELETE | `/api/organizations/:id` | 删除机构 |

### 📋 任务管理

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/tasks` | 获取任务列表 |
| POST | `/api/tasks` | 创建任务 |
| GET | `/api/tasks/:id` | 获取任务详情 |
| PUT | `/api/tasks/:id` | 更新任务 |
| DELETE | `/api/tasks/:id` | 删除任务 |
| PUT | `/api/tasks/:id/status` | 更新任务状态 |

## 🎨 界面预览

### 🏠 仪表盘
- 📊 数据统计概览
- ⚡ 快捷操作入口  
- 📝 最近任务列表
- 🎯 工作量分布图

### 📋 任务管理
- 📝 任务列表视图
- 🔍 高级搜索筛选
- 📊 看板拖拽视图
- 💬 实时评论协作

### 🏢 机构管理
- 🌳 树形结构展示
- 👥 人员归属管理
- 🔐 权限分配设置
- 📈 层级关系维护

## 🚀 部署指南

### 🛠️ 开发环境
```bash
# 前端开发服务器
npm run dev

# 后端开发服务器  
go run main.go
```

### 🌐 生产环境

**前端部署:**
```bash
npm run build
# 将 dist/ 目录部署到 Nginx
```

**后端部署:**
```bash
go build -o task-track main.go
# 使用 systemd 或 PM2 管理进程
```

### 🐳 Docker部署

```bash
# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d
```

## 🤝 贡献指南

我们欢迎所有形式的贡献！

1. 🍴 Fork 项目
2. 🌿 创建特性分支: `git checkout -b feature/amazing-feature`
3. 💍 提交更改: `git commit -m 'Add amazing feature'`
4. 📤 推送分支: `git push origin feature/amazing-feature`
5. 🎉 创建 Pull Request

### 📝 开发规范
- 遵循代码格式化标准
- 编写测试用例
- 更新相关文档
- 提交清晰的commit信息

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 🙏 致谢

感谢以下开源项目：
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [Element Plus](https://element-plus.org/) - Vue 3组件库
- [Gin](https://gin-gonic.com/) - Go Web框架
- [GORM](https://gorm.io/) - Go ORM库

## 📞 联系我们

- 📧 邮箱: support@task-track.com
- 💬 QQ群: 123456789
- 🐛 问题反馈: [GitHub Issues](https://github.com/your-repo/issues)

---

⭐ 如果这个项目对你有帮助，请给它一个星标！