13 KiB

Raw Blame History

任务跟踪系统

项目简介

基于 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

新功能说明

任务创建与附件管理

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

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. 数据库配置

mysql -u root -p
CREATE DATABASE task_track CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. 启动后端 (端口 8080)

cd backend
go mod tidy
# 编辑 config.yaml 配置数据库连接
go run main.go

3. 启动前端 (端口 5174)

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 设计原则

仅支持 GET 和 POST 方法 - 所有更新删除操作使用 POST

统一响应格式:

{
  "code": 200,
  "message": "Success", 
  "data": {}
}

GORM 自动迁移 - 数据库表结构自动创建和更新
软删除支持 - 数据逻辑删除，可恢复
分页查询 - 支持 page/limit 参数

🧪 测试

API 测试方法

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

测试步骤

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

📈 开发状态

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

📋 下一步计划

完善前端主要业务页面
实现用户权限和角色管理
添加任务看板拖拽功能
实现文件上传和附件管理
完善单元测试和集成测试
部署文档和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用户:

.\install.bat

Linux/macOS用户:

chmod +x install.sh
./install.sh

📊 数据库配置

创建数据库:

CREATE DATABASE task_track CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

导入初始数据:

mysql -u root -p task_track < database/init.sql

修改配置文件 backend/config.yaml:

database:
  host: "localhost"
  port: "3306"
  username: "your_username"
  password: "your_password"
  database: "task_track"

🎯 启动服务

方法一：使用VS Code任务（推荐）

打开VS Code
按 Ctrl+Shift+P 打开命令面板
输入 Tasks: Run Task
选择 启动完整应用

方法二：手动启动

启动后端：

cd backend
go run main.go

启动前端：

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`	更新任务状态

🎨 界面预览

🏠 仪表盘

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

📋 任务管理

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

🏢 机构管理

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

🚀 部署指南

🛠️ 开发环境

# 前端开发服务器
npm run dev

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

🌐 生产环境

前端部署:

npm run build
# 将 dist/ 目录部署到 Nginx

后端部署:

go build -o task-track main.go
# 使用 systemd 或 PM2 管理进程

🐳 Docker部署

# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d

🤝 贡献指南

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

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

📝 开发规范

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

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🙏 致谢

感谢以下开源项目：

Vue.js - 渐进式JavaScript框架
Element Plus - Vue 3组件库
Gin - Go Web框架
GORM - Go ORM库

📞 联系我们

📧 邮箱: support@task-track.com
💬 QQ群: 123456789
🐛 问题反馈: GitHub Issues

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

13 KiB Raw Blame History

任务跟踪系统

任务跟踪系统

项目简介

✅ 已完成功能

技术栈

前端

后端

项目结构

新功能说明

任务创建与附件管理

API端点

快速开始

环境要求

1. 数据库配置

2. 启动后端 (端口 8080)

3. 启动前端 (端口 5174)

4. 访问应用

API 接口

🔐 认证接口

👥 用户管理

🏢 机构管理

📋 任务管理

📊 统计接口

⚙️ API 设计原则

🧪 测试

API 测试方法

测试步骤

📈 开发状态

📋 下一步计划

📄 许可证

📁 项目结构

🚀 快速开始

📋 环境要求

⚡ 一键安装

📊 数据库配置

🎯 启动服务

🌐 访问应用

� API文档

� 认证接口

👥 用户管理

🏢 机构管理

📋 任务管理

🎨 界面预览

🏠 仪表盘

📋 任务管理

🏢 机构管理

🚀 部署指南

🛠️ 开发环境

🌐 生产环境

🐳 Docker部署

🤝 贡献指南

📝 开发规范

📄 许可证

🙏 致谢

📞 联系我们

13 KiB

Raw Blame History