# task-system-demo

**Repository Path**: jun-laner/task-system-demo

## Basic Information

- **Project Name**: task-system-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-04
- **Last Updated**: 2025-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 说明文档

## 考核相关

- 预估：1 天
- 实际：约 10 小时
- 完成情况：
  - [x] 任务看板页面
    - [x] 可视化
    - [x] 状态统计
    - [x] 任务管理页面
  - [x] 列表
    - [x] 增删改查，自动刷新
    - [x] 筛选查询
  - [x] 数据存储
  - [x] 数据测试
  - [x] 标题栏
  - [x] 可伸缩侧边栏

## 相关技术

- vue3
- vite
- vue-router
- axios
- element-plus
- pinia
- echarts
- mockjs

## 项目结构

- public
  - index.html
- src
  - api
  - assets
  - components
  - constant
  - mock
  - router
  - store
  - types
  - utils
  - views
  - App.vue
  - main.ts
  - style.css

## 项目说明

在 App 中，分两个区域，左边是可伸缩侧边栏，右边是内容区域。

内容区域用 `components/View.vue` 包裹，同时包裹了一层 `ErrorBoundary`，用于统一处理抛出的页面异常。

View 统一处理路由变化，内部再分为标题栏和主内容两部分，主内容容器自动填充满页面，内容将在这个区域里滚动而不会整个页面滚动。

**面包屑**：

标题栏中放置了面包屑导航，自定义了一个 `Breadcrumb.vue` 组件和 `useBreadcrumb` hook，hook 里维护了一个数组，存放当前路由的各级路由信息，通过 `watch` 监听路由变化，更新数组。`Breadcrumb.vue` 组件内调用 `useBreadcrumb`，将数组渲染成动态的面包屑导航。

模拟数据模块放在 `mock` 目录下，通过 `mockjs` 拦截 axios 请求返回模拟数据。因为选用了 `mockjs`, 所以模拟数据依然存在 localStorage 中不选在放在 pinia 里以避免更复杂的操作。

pinia 维护一些全局状态，如应用信息、用户信息等。本 DEMO 没有相关要求，简单存放一个 `appname` 展示在侧边栏顶部。

`api` 接口模块封装了 axios 请求，做一些基础的统一处理，如请求基址、超时设置、接口错误处理等。

### 看板

页面中分了三个大区域，放置了一张关于任务状态的概率饼图和各属性对应的任务数，其他其他模块可以展示的区域。

任务管理模块，做了二级页面，任务列表作为第一级，编辑/创建任务作为第二级。

### 列表

由上到下分成三部分：

1. 筛选查询，标题的模糊搜索，优先级的单选，状态的单选，截止时间的范围选择。
2. 列表，展示任务标题、优先级、状态（标签形式）、描述、创建时间、截止时间和行为栏，包含了跳转编辑页和删除两个行为按钮。
   - 编辑：携带 id 跳转到编辑页
   - 删除：弹出一个确认对话框，确认后请求删除，删除成功后自动重新请求并刷新列表。
3. 操作栏，添加任务的跳转按钮和分页器。

### 编辑/创建

两个页面共用一个 `TaskDetailView.vue` 组件，通过传入的 `action` prop 属性区分模式是创建还是编辑。
编辑时，通过路由的 id 查询参数请求任务详情，并填充到表单中。

点取消可以直接返回列表页。

给 el-form 添加了校验规则，表单提交时，校验必填项。校验成功并提交成功后，3 秒后自动返回任务列表页，在此期间提交按钮被禁用，防止重复提交。