mubashirflu/Task-Management-System
GitHub: mubashirflu/Task-Management-System
这是一个基于 Vue 3 和 TypeScript 的任务管理系统，帮助用户通过直观的界面高效管理日常工作任务。
Stars: 0 | Forks: 0
# 任务管理器 — Vue 3 + TypeScript
与提供设计相匹配的专业任务管理仪表板。
## 🗂 项目结构
```
task-manager/
├── db/
│ └── db.json # JSON Server mock database
├── public/
│ └── favicon.svg
├── src/
│ ├── assets/
│ │ └── css/
│ │ ├── main.css # CSS entry (imports all layers)
│ │ ├── variables.css # Design tokens / CSS variables
│ │ ├── base.css # Reset & base styles
│ │ └── utilities.css # Reusable utility classes
│ ├── components/
│ │ ├── dashboard/
│ │ │ └── StatsCard.vue # Stat summary card
│ │ ├── layout/
│ │ │ ├── AppLayout.vue # Main layout wrapper
│ │ │ ├── AppSidebar.vue # Left navigation sidebar
│ │ │ └── AppTopbar.vue # Top header bar
│ │ ├── tasks/
│ │ │ ├── TaskRow.vue # Single task list row
│ │ │ └── TaskModal.vue # Add / Edit task modal
│ │ └── ui/
│ │ ├── AppPagination.vue # Pagination controls
│ │ └── ConfirmModal.vue # Delete confirmation modal
│ ├── composables/
│ │ └── useApi.ts # Axios API service layer
│ ├── router/
│ │ └── index.ts # Vue Router config
│ ├── stores/
│ │ └── taskStore.ts # Pinia task store
│ ├── types/
│ │ └── index.ts # TypeScript interfaces
│ ├── views/
│ │ ├── DashboardView.vue # / — Main dashboard
│ │ ├── TasksView.vue # /tasks
│ │ ├── CategoriesView.vue # /categories
│ │ ├── UsersView.vue # /users
│ │ └── SettingsView.vue # /settings
│ ├── App.vue
│ └── main.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
```
## 🚀 设置与运行
```
# 1. 安装依赖项
npm install
# 2. 同时运行开发服务器 + JSON Server
npm run dev
# 应用 → http://localhost:5173
# API → http://localhost:3001
```
## 📦 技术栈
| 层 | 技术 |
|------------|----------------------|
| 框架 | Vue 3 (Composition API) |
| 语言 | TypeScript |
| 状态管理 | Pinia |
| 路由 | Vue Router 4 |
| HTTP 客户端 | Axios |
| 模拟数据库 | JSON Server |
| 构建工具 | Vite 5 |
## ✨ 功能特性
- ✅ 完整的 CRUD（创建、读取、更新、删除）任务
- ✅ 实时统计（总计 / 已完成 / 进行中 / 待处理）
- ✅ 按标题、描述或经办人搜索任务
- ✅ 按状态筛选（全部 / 已完成 / 进行中 / 待处理）
- ✅ 分页（每页 5 个任务，可在设置中配置）
- ✅ 带表单验证的添加/编辑任务模态框
- ✅ 删除确认模态框
- ✅ 完全响应式（移动端侧边栏、自适应布局）
- ✅ 流畅的 CSS 过渡和动画
- ✅ 带有活动路由高亮的专业侧边栏
- ✅ 分类、用户、设置页面
标签：Axios, JSON Server, Linux 内核安全, Pinia, TypeScript, Vue 3, Vue Router, 个人效率, 仪表板, 任务添加编辑删除, 任务管理, 任务管理系统, 任务统计, 分类管理, 分页功能, 单页应用, 响应式设计, 安全插件, 模拟数据库, 状态管理, 用户管理, 组件化开发, 项目管理