Task-Doc Web UI

基于 React 18 + TypeScript + Ant Design 5 的管理后台，提供任务文档系统的可视化操作界面。

技术栈

| 技术 | 版本 | |------|------| | React | 18 | | TypeScript | 5 | | Vite | 5 | | Ant Design | 5 | | React Router | 6 | | Axios | 1.x | | Zustand | 4 | | dayjs | 1.x | | @uiw/react-markdown-editor | 6 |

开发

npm run dev

默认启动在 http://localhost:5173，Vite 开发服务器自动将 /api 请求代理到 http://localhost:3000。

构建

npm run build

产物输出到 dist/。

页面列表

仪表盘 /

全局概览页，展示各模块统计数据和近期动态：

• 统计卡片：总需求、评审记录、项目数、版本数（含逾期提示）、文档统计、GitLab 任务
• 最近需求：最近 5 条需求列表
• 即将上线版本：按计划上线日期排序的版本列表
• 逾期版本：超过计划上线日期的版本
• 最近文档：最近 5 篇创建文档
• 最近 GitLab 任务：最近 5 条任务

需求管理 /requirements

需求列表的增删改查，支持：

• 按状态、优先级筛选
• 关联/取消关联项目
• 关联/取消关联评审

评审管理 /reviews

评审记录的增删改查：

• 字段：标题、日期、参与人（逗号分隔）、状态（草稿/已完成）、结论
• 参与人以 Tag 展示

项目管理 /projects

项目的增删改查：

• 字段：名称、本地路径、Git 仓库地址、默认分支、描述
• 操作为项目创建 Git 分支

版本管理 /versions

版本列表查看与详情：

• 列表字段：版本号、标题、描述、计划上线日期、实际上线日期、状态
• 查看详情：侧边抽屉展示版本信息和需求统计（进度条），关联需求列表

文档管理 /documents

文档列表与 Markdown 编辑器：

• 列表支持按类型、状态筛选
• 筛选重置自动清除过滤参数，避免请求带过期条件
• 支持 inline 布局的标题/类型/状态编辑表单
• 文档编辑器 (/documents/:id/edit 或 /documents/new)：使用 @uiw/react-markdown-editor 进行 Markdown 编辑，内置全屏模式

GitLab 任务 /gitlab

GitLab 自动化任务队列管理：

• 列表显示：任务类型（拉取代码/提交代码/创建分支/创建 MR）、状态、优先级、PID、执行时间
• 支持提交 GitLab 任务，根据任务类型动态展示表单字段

路由

| 路径 | 组件 | 说明 | |------|------|------| | / | Dashboard | 仪表盘 | | /requirements | RequirementList | 需求管理 | | /reviews | ReviewList | 评审管理 | | /projects | ProjectList | 项目管理 | | /versions | VersionList | 版本管理 | | /documents | DocumentList | 文档列表 | | /documents/new | DocumentEditor | 新建文档 | | /documents/:id/edit | DocumentEditor | 编辑文档 | | /gitlab | GitLabTaskList | GitLab 任务 |

项目结构

src/
├── api/          # API 请求封装（axios 实例 + 各模块接口）
├── components/   # 通用布局组件（MainLayout）
├── stores/       # 状态管理（zustand）
├── styles/       # 全局样式
└── views/        # 页面组件

API 代理

Vite 配置了 /api 代理到 http://localhost:3000，开发时无需配置 CORS。后端需同时启动 server 包。

与后端配合

本 UI 需要配合后端 packages/server 运行，API 响应格式约定：

{
  "code": 0,
  "message": "success",
  "data": {},
  "timestamp": 1700000000000
}