tantingwu/GPU_GUARD_MONOREPO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
GPU_GUARD_MONOREPO/docs/superpowers/specs/2026-04-12-project-management-design.md
陈二狗 cc660d19d1 初始化提交
2026-05-20 21:39:12 +08:00

12 KiB
Raw Blame History

项目管理模块设计文档

日期: 2026-04-12 位置: 系统管理 → 项目管理 使用者: 管理员/项目经理

1. 概述

在系统管理菜单下新增「项目管理」模块，用于管理整个产品的研发与非研发任务进度。支持甘特图、日历、表格列表、Kanban 看板四种视图，覆盖项目 → 阶段 → 任务 → 子任务的四层结构。

核心场景：电商自动化运营 Agent 平台的全生命周期管理，包含研发任务（前端、后端、AI）和运营任务（官网、隐私条款、市场推广等）。

2. 技术选型

组件 方案 理由
甘特图 dhtmlx-gantt ^8.x (GPL) 最成熟的甘特图库，原生支持依赖箭头、拖拽、树形层级
日历 @fullcalendar/vue3 ^6.x 日历视图事实标准，月/周视图开箱即用
看板拖拽 vuedraggable ^4.x Vue 3 拖拽排序，轻量成熟
表格 cl-crud (已有) 复用现有 Cool Admin CRUD 组件

安装位置：均安装到 @neta/frontend。

3. 数据模型

3.1 project_info（项目表）

字段 类型 说明
id int, PK, auto 主键
name varchar(100) 项目名称
description text, nullable 项目描述
status tinyint 状态：0未开始 1进行中 2已完成 3已归档
startDate date, nullable 计划开始日期
endDate date, nullable 计划结束日期
progress int, default 0 进度百分比 0-100
ownerId int, nullable 项目经理（base_sys_user.id）
ownerName varchar(50), nullable 项目经理姓名（冗余）
color varchar(20), nullable 主题色（如 #409EFF）
createTime datetime 创建时间（BaseEntity）
updateTime datetime 更新时间（BaseEntity）
tenantId int 租户ID（BaseEntity）

3.2 project_phase（阶段表）

字段 类型 说明
id int, PK, auto 主键
projectId int 所属项目 ID
name varchar(100) 阶段名称
type varchar(50), nullable 分类（来自系统参数 project_task_category）
status tinyint, default 0 状态：0未开始 1进行中 2已完成
startDate date, nullable 开始日期
endDate date, nullable 结束日期
progress int, default 0 进度 0-100
sortOrder int, default 0 排序序号
createTime datetime BaseEntity
updateTime datetime BaseEntity
tenantId int BaseEntity

3.3 project_task（任务表）

字段 类型 说明
id int, PK, auto 主键
projectId int 所属项目 ID
phaseId int, nullable 所属阶段 ID
parentId int, nullable 父任务 ID（null 为顶级任务）
name varchar(200) 任务名称
description text, nullable 任务描述
status tinyint, default 0 0待办 1进行中 2已完成 3已关闭
priority tinyint, default 2 P0(0)紧急 P1(1)高 P2(2)中 P3(3)低
category varchar(50), nullable 分类（来自系统参数）
assigneeId int, nullable 负责人 ID
assigneeName varchar(50), nullable 负责人姓名（冗余）
startDate date, nullable 计划开始日期
endDate date, nullable 计划结束日期
estimatedHours decimal(8,1), default 0 预估工时（小时）
actualHours decimal(8,1), default 0 实际工时（由 time_log 汇总）
progress int, default 0 进度 0-100
sortOrder int, default 0 排序序号
color varchar(20), nullable 自定义颜色（覆盖项目色）
createTime datetime BaseEntity
updateTime datetime BaseEntity
tenantId int BaseEntity

3.4 project_task_dependency（任务依赖表）

字段 类型 说明
id int, PK, auto 主键
taskId int 当前任务 ID
dependsOnTaskId int 前置任务 ID
type tinyint, default 0 0:FS(完成后开始) 1:SS 2:FF 3:SF
createTime datetime BaseEntity
updateTime datetime BaseEntity
tenantId int BaseEntity

3.5 project_time_log（工时记录表）

字段 类型 说明
id int, PK, auto 主键
taskId int 所属任务 ID
userId int 记录人 ID
userName varchar(50) 记录人姓名（冗余）
logDate date 工作日期
hours decimal(5,1) 工时（小时）
description varchar(500), nullable 工作内容描述
createTime datetime BaseEntity
updateTime datetime BaseEntity
tenantId int BaseEntity

4. 后端模块结构

packages/backend/src/modules/project/
├── config.ts
├── entity/
│   ├── info.ts                  -- ProjectInfoEntity
│   ├── phase.ts                 -- ProjectPhaseEntity
│   ├── task.ts                  -- ProjectTaskEntity
│   ├── task_dependency.ts       -- ProjectTaskDependencyEntity
│   └── time_log.ts              -- ProjectTimeLogEntity
├── controller/admin/
│   ├── info.ts                  -- 项目 CRUD
│   ├── phase.ts                 -- 阶段 CRUD
│   ├── task.ts                  -- 任务 CRUD + 树形查询
│   ├── task_dependency.ts       -- 依赖关系管理
│   └── time_log.ts              -- 工时记录 CRUD
└── service/
    ├── info.ts                  -- 项目统计、进度汇总
    ├── task.ts                  -- 任务树构建、状态流转、进度计算
    └── gantt.ts                 -- 甘特图聚合接口

4.1 核心 API

路径 方法 用途
/admin/project/info/page GET 项目列表分页
/admin/project/info/add POST 创建项目
/admin/project/info/update POST 更新项目
/admin/project/info/delete POST 删除项目
/admin/project/phase/list GET 某项目的阶段列表
/admin/project/phase/add POST 创建阶段
/admin/project/phase/update POST 更新阶段
/admin/project/phase/delete POST 删除阶段
/admin/project/task/tree GET 任务树（含子任务层级）
/admin/project/task/page GET 任务分页列表（表格视图）
/admin/project/task/add POST 创建任务
/admin/project/task/update POST 更新任务
/admin/project/task/delete POST 删除任务
/admin/project/task/ganttData GET 甘特图数据（任务+阶段+依赖）
/admin/project/task/ganttUpdate POST 甘特图拖拽批量更新
/admin/project/task/kanban GET 看板数据（按状态分组）
/admin/project/task/kanbanSort POST 看板拖拽排序/状态变更
/admin/project/timeLog/page GET 工时记录分页
/admin/project/timeLog/add POST 添加工时
/admin/project/timeLog/delete POST 删除工时
/admin/project/taskDependency/add POST 添加依赖
/admin/project/taskDependency/delete POST 删除依赖

4.2 甘特图聚合接口 ganttData

请求：GET /admin/project/task/ganttData?projectId=1

响应格式（适配 DHTMLX Gantt）：

{
  "data": [
    { "id": "p_1", "text": "阶段一", "start_date": "2026-04-01", "end_date": "2026-05-01", "progress": 0.5, "type": "project", "open": true },
    { "id": "t_1", "text": "官网设计", "start_date": "2026-04-01", "end_date": "2026-04-15", "progress": 0.3, "parent": "p_1", "priority": 1, "assignee": "张三" },
    { "id": "t_2", "text": "设计首页", "start_date": "2026-04-01", "end_date": "2026-04-07", "progress": 0, "parent": "t_1" }
  ],
  "links": [
    { "id": 1, "source": "t_1", "target": "t_3", "type": "0" }
  ]
}

5. 前端模块结构

packages/frontend/src/modules/project/
├── views/
│   ├── list.vue                    -- 项目列表页（入口）
│   ├── detail.vue                  -- 项目详情页（四视图容器）
│   └── components/
│       ├── gantt.vue               -- 甘特图视图
│       ├── calendar.vue            -- 日历视图
│       ├── table.vue               -- 表格列表视图
│       ├── kanban.vue              -- 看板视图
│       ├── task-drawer.vue         -- 任务详情抽屉
│       ├── time-log-dialog.vue     -- 工时记录弹窗
│       └── phase-manager.vue       -- 阶段管理弹窗
└── config.ts                       -- 模块菜单配置

5.1 页面流程

系统管理 → 项目管理（list.vue）
  ├── 项目卡片列表：名称、进度条、状态、负责人、日期范围
  ├── 新建项目按钮
  └── 点击项目 → detail.vue
        ├── 顶部：项目信息栏（名称、进度条、日期范围、负责人、阶段管理按钮）
        └── Tab 切换：甘特图 | 日历 | 列表 | 看板

5.2 四种视图

甘特图（gantt.vue）：

  • DHTMLX Gantt 渲染
  • 左侧：树形任务列表（阶段 → 任务 → 子任务）
  • 右侧：时间轴条形图
  • 任务间依赖箭头连线
  • 拖拽调整开始/结束日期，拖拽完自动调用 ganttUpdate
  • 双击任务 → 打开 task-drawer

日历（calendar.vue）：

  • FullCalendar 月/周切换
  • 任务按日期范围显示为色块
  • 点击日期 → 快速创建任务
  • 点击任务 → 打开 task-drawer

表格列表（table.vue）：

  • cl-crud 标准表格
  • 筛选：状态、优先级、分类、负责人、阶段
  • 排序：优先级、日期、进度
  • 支持批量操作（删除、修改状态）

看板（kanban.vue）：

  • 四列：待办 | 进行中 | 已完成 | 已关闭
  • 任务卡片：名称、优先级标签、负责人、截止日期
  • vuedraggable 拖拽跨列 → 自动更新状态
  • 卡片点击 → 打开 task-drawer

5.3 任务详情抽屉（task-drawer.vue）

右侧滑出抽屉，包含：

  • 基本信息：名称、描述（纯文本 textarea）、状态、优先级、分类
  • 时间：开始/结束日期选择器、预估工时输入
  • 负责人：下拉选择系统用户
  • 子任务列表：展示+快速添加
  • 依赖关系：前置任务选择器（下拉搜索）
  • 工时记录 Tab：工时列表 + 添加工时按钮

5.4 数据同步策略

  • 项目详情页用 Pinia store 统一管理当前项目的任务/阶段/依赖数据
  • 进入详情页时一次性加载（ganttData 接口）
  • 切换 Tab 不重新请求，共享同一份 store 数据
  • 任何视图中的修改（拖拽、状态变更、新增/删除）同时更新 store + 调用 API

6. 进度自动计算规则

  • 子任务 → 手动更新进度，或按工时比例（actualHours / estimatedHours * 100）
  • 任务进度 = 子任务进度加权平均（权重为 estimatedHours，无预估则等权）
  • 阶段进度 = 下属任务进度加权平均
  • 项目进度 = 各阶段进度加权平均
  • 进度计算在后端 service 层实现，每次任务更新时触发向上汇总

7. 权限控制

  • 复用现有 RBAC 体系
  • 在菜单管理中添加「项目管理」菜单节点（目录 + 两个菜单页）
  • 权限点：
    • project:info:add/update/delete — 项目增删改
    • project:task:add/update/delete — 任务增删改
    • project:timeLog:add/delete — 工时记录增删
  • 仅管理员/项目经理角色可见

8. 系统参数配置

需在「系统管理 → 参数配置」中预置：

参数键 说明 默认值示例
project_task_category 任务分类选项 前端,后端,AI,设计,运营,法务,市场
project_task_priority 优先级选项（可选，也可硬编码） P0紧急,P1高,P2中,P3低

9. 明确不做的事

  • 通知/提醒系统
  • 文件附件上传
  • 评论/讨论功能
  • 自动排期算法（关键路径法）
  • 多项目资源冲突检测
  • 移动端适配
  • 成员自助端（仅管理员使用）