2110 lines
64 KiB
Markdown
2110 lines
64 KiB
Markdown
# ColaFlow 前端开发评估与规划报告
|
|
|
|
**报告日期**: 2025-11-05 (Day 15)
|
|
**报告人**: Product Manager Agent
|
|
**项目阶段**: M1 核心项目模块 (78% 完成)
|
|
**目标**: 评估前端开发状态,规划 M1 阶段前端开发任务
|
|
|
|
---
|
|
|
|
## 执行摘要
|
|
|
|
ColaFlow 前端开发目前处于**早期阶段**,仅完成了 Kanban Board 看板功能(15个文件,1134行代码)。基于 **Day 14-15 架构决策(采用 ProjectManagement Module)**,前端需要重新开发 Epic/Story/Task 管理界面,并与后端 ProjectManagement API 集成。
|
|
|
|
### 关键发现
|
|
|
|
1. **已完成功能**: Kanban Board (拖拽功能 + 4列工作流 + 基础 UI)
|
|
2. **技术栈**: React 18 + TypeScript + Zustand + Ant Design + React Query(推测)
|
|
3. **代码规模**: 15个文件,1134行代码
|
|
4. **关键问题**:
|
|
- 前端仅对接 Issue Management API,需要切换到 ProjectManagement API
|
|
- 缺失 Epic/Story/Task 三层层级管理 UI
|
|
- 缺失项目管理、迭代管理、用户管理等核心功能
|
|
|
|
### 重大架构决策影响
|
|
|
|
基于 Day 14-15 后端架构决策(采用 ProjectManagement Module):
|
|
- **前端需要重新开发**: Epic/Story/Task 管理 UI(预计 2-3 天)
|
|
- **Kanban Board 需要更新**: 适配 ProjectManagement API(预计 1 天)
|
|
- **新增开发任务**: 项目管理、Sprint 管理、用户管理等核心 UI
|
|
|
|
### M1 前端完成度评估
|
|
|
|
- **当前完成度**: 约 15-20% (仅 Kanban Board)
|
|
- **M1 目标完成度**: 100% (Epic/Story/Task + Project + Sprint + User Management)
|
|
- **预计剩余工作量**: 18-22 天
|
|
- **目标完成日期**: 2025-11-27 (与后端 M1 完成日期对齐)
|
|
|
|
---
|
|
|
|
## 一、当前前端状态评估
|
|
|
|
### 1.1 已完成功能清单
|
|
|
|
#### Kanban Board 看板 (Day 13) - 需要更新
|
|
|
|
**完成度**: 100% (基于 Issue Management API)
|
|
**代码规模**: 15 文件, 1,134 行代码
|
|
**技术栈**: React 18 + TypeScript + Zustand + Ant Design + @dnd-kit
|
|
|
|
**核心功能**:
|
|
- 拖拽式任务卡片 (@dnd-kit/core + @dnd-kit/sortable)
|
|
- 4列工作流: Backlog → Todo → InProgress → Done
|
|
- 任务卡片显示: Title, Type, Priority, Assignee
|
|
- 拖拽更新任务状态
|
|
- 基础 UI 交互
|
|
|
|
**API 集成状态**:
|
|
- 已对接 Issue Management API (7 个端点)
|
|
- 需要更新为 ProjectManagement API (Day 18-20)
|
|
|
|
**问题与待改进**:
|
|
- ⚠️ 当前对接 Issue Management API,需要切换到 ProjectManagement API
|
|
- ⚠️ 未显示 Epic/Story 层级关系
|
|
- ⚠️ 未显示工时信息 (EstimatedHours/ActualHours)
|
|
- ⚠️ 实时更新功能未完全集成 (SignalR 集成不完整)
|
|
|
|
**状态**: ✅ 完成 (需要更新以支持 ProjectManagement)
|
|
|
|
---
|
|
|
|
#### 认证系统 (Day 11) - 生产就绪
|
|
|
|
**完成度**: 100%
|
|
**核心功能**:
|
|
- 登录/注册页面
|
|
- JWT Token 管理
|
|
- 受保护路由 (Protected Routes)
|
|
- 用户会话管理
|
|
|
|
**状态**: ✅ 完成
|
|
|
|
---
|
|
|
|
### 1.2 代码结构分析 (推测)
|
|
|
|
基于后端文档和前端最佳实践,推测当前前端项目结构如下:
|
|
|
|
```
|
|
colaflow-frontend/
|
|
├── src/
|
|
│ ├── api/ # API Clients (推测)
|
|
│ │ ├── auth.api.ts
|
|
│ │ └── issue.api.ts # 需要替换为 ProjectManagement API
|
|
│ ├── components/ # React 组件
|
|
│ │ ├── kanban/ # Kanban Board 组件 (15 文件)
|
|
│ │ ├── auth/ # 认证相关组件
|
|
│ │ └── common/ # 通用组件
|
|
│ ├── hooks/ # React Hooks (推测)
|
|
│ │ └── useAuth.ts
|
|
│ ├── store/ # Zustand Store (推测)
|
|
│ │ └── authStore.ts
|
|
│ ├── types/ # TypeScript 类型定义
|
|
│ ├── utils/ # 工具函数
|
|
│ └── App.tsx
|
|
├── package.json
|
|
└── tsconfig.json
|
|
```
|
|
|
|
**技术栈验证**:
|
|
- React 18 (已确认)
|
|
- TypeScript (已确认)
|
|
- Zustand (状态管理,已确认)
|
|
- Ant Design (UI 组件库,已确认)
|
|
- @dnd-kit (拖拽库,已确认)
|
|
- React Query / SWR (数据获取库,推测)
|
|
- React Router (路由管理,推测)
|
|
- SignalR Client (@microsoft/signalr,推测)
|
|
|
|
---
|
|
|
|
### 1.3 技术债务识别
|
|
|
|
#### 1.3.1 架构迁移债务 (CRITICAL)
|
|
|
|
**问题**: 当前 Kanban Board 对接 Issue Management API,需要切换到 ProjectManagement API
|
|
|
|
**影响**:
|
|
- Issue API → Epic/Story/Task API 切换
|
|
- 数据结构变化 (扁平结构 → 三层层级)
|
|
- UI 需要显示层级关系
|
|
|
|
**工作量**: 6-8 小时 (Day 18-20)
|
|
|
|
---
|
|
|
|
#### 1.3.2 缺失功能债务 (HIGH)
|
|
|
|
**缺失的核心功能**:
|
|
1. Epic/Story/Task 三层层级管理 UI (项目规划核心功能)
|
|
2. 项目管理界面 (创建/编辑/列表)
|
|
3. Sprint 迭代管理界面 (Scrum 核心功能)
|
|
4. 用户管理界面 (团队协作核心功能)
|
|
5. Dashboard 仪表盘 (项目概览)
|
|
|
|
**影响**: 用户无法使用完整的项目管理功能
|
|
|
|
**工作量**: 14-18 天
|
|
|
|
---
|
|
|
|
#### 1.3.3 实时协作集成债务 (MEDIUM)
|
|
|
|
**问题**: SignalR 实时更新未完全集成
|
|
|
|
**影响**:
|
|
- 多用户协作时无法实时看到其他用户的操作
|
|
- Kanban Board 拖拽不实时同步
|
|
|
|
**工作量**: 2-3 小时 (Day 20)
|
|
|
|
---
|
|
|
|
#### 1.3.4 代码质量债务 (LOW)
|
|
|
|
**问题**:
|
|
- 缺少单元测试 (测试覆盖率未知,推测 < 20%)
|
|
- 缺少 E2E 测试
|
|
- 代码文档不足
|
|
- 可能存在重复代码
|
|
|
|
**影响**: 代码可维护性和质量保证不足
|
|
|
|
**工作量**: 2-3 天 (可延后到 M1.5)
|
|
|
|
---
|
|
|
|
## 二、M1 阶段前端待开发功能清单
|
|
|
|
### 2.1 功能优先级分级 (P0/P1/P2)
|
|
|
|
基于产品计划 (product.md) 和后端架构决策,M1 阶段前端功能优先级如下:
|
|
|
|
---
|
|
|
|
### P0 (Must Have) - M1 必须完成
|
|
|
|
#### 2.1.1 Epic/Story/Task 三层层级管理 UI (CRITICAL)
|
|
|
|
**业务价值**: 项目规划核心功能,支持 Epic 拆解为 Stories,Stories 拆解为 Tasks
|
|
|
|
**核心页面**:
|
|
1. **Epic 列表页** (`/projects/{projectId}/epics`)
|
|
- Epic 卡片列表 (网格布局)
|
|
- 显示: Epic Title, Description, Status, Story 计数, Progress
|
|
- 操作: Create Epic, Edit Epic, Delete Epic, 点击进入 Story 列表
|
|
|
|
2. **Story 列表页** (`/epics/{epicId}/stories`)
|
|
- Story 卡片列表
|
|
- 显示: Story Title, Description, Status, Task 计数, Assignee, Progress
|
|
- 操作: Create Story, Edit Story, Delete Story, 点击进入 Task 列表
|
|
- 面包屑导航: Project → Epic → Story
|
|
|
|
3. **Task 列表页** (`/stories/{storyId}/tasks`)
|
|
- Task 卡片列表或表格视图
|
|
- 显示: Task Title, Status, Priority, Assignee, EstimatedHours, ActualHours
|
|
- 操作: Create Task, Edit Task, Delete Task, Update Status
|
|
- 面包屑导航: Project → Epic → Story → Task
|
|
|
|
4. **Epic/Story/Task 创建/编辑对话框**
|
|
- Form 表单组件 (Ant Design Form)
|
|
- 字段: Title, Description, Type, Priority, Assignee, EstimatedHours, Sprint
|
|
- 验证: Required fields, format validation
|
|
|
|
**技术实现**:
|
|
- API Clients: `epic.api.ts`, `story.api.ts`, `task.api.ts`
|
|
- React Query Hooks: `useEpics`, `useStories`, `useTasks`
|
|
- Components: `EpicCard`, `StoryCard`, `TaskCard`, `CreateEpicDialog`, etc.
|
|
- 路由: React Router 路由配置
|
|
|
|
**验收标准**:
|
|
- 用户可以创建/编辑/删除 Epic/Story/Task
|
|
- 三层层级关系正确显示
|
|
- 面包屑导航正确
|
|
- API 调用正确,数据持久化
|
|
- UI 响应式设计 (Mobile + Desktop)
|
|
|
|
**工作量**: 8-12 小时 (Day 18-20)
|
|
|
|
**依赖**: ProjectManagement API 完成 (Day 15-17)
|
|
|
|
---
|
|
|
|
#### 2.1.2 Kanban Board 更新 - 支持 ProjectManagement (CRITICAL)
|
|
|
|
**业务价值**: 更新现有 Kanban Board 以支持 ProjectManagement Module
|
|
|
|
**更新内容**:
|
|
1. **API 切换**: Issue API → WorkTask API
|
|
- 更新 API Client (`task.api.ts`)
|
|
- 更新 React Query Hooks (`useTasks`)
|
|
- 更新数据结构 (Issue → WorkTask)
|
|
|
|
2. **UI 增强**: 显示层级信息
|
|
- TaskCard 显示所属 Epic/Story 信息
|
|
- TaskCard 显示工时信息 (EstimatedHours/ActualHours)
|
|
- 点击 Task 可跳转到所属 Story/Epic
|
|
|
|
3. **拖拽更新**: 适配 WorkTask 状态更新 API
|
|
- 拖拽更新 WorkTask 状态
|
|
- 拖拽时显示确认提示 (可选)
|
|
|
|
**验收标准**:
|
|
- Kanban Board 正常显示 WorkTasks
|
|
- 拖拽更新状态正常工作
|
|
- 显示 Epic/Story 层级信息
|
|
- 显示工时信息
|
|
- API 调用正确
|
|
|
|
**工作量**: 4-6 小时 (Day 19)
|
|
|
|
**依赖**: Epic/Story/Task API Clients 完成
|
|
|
|
---
|
|
|
|
#### 2.1.3 Project Management UI (项目管理界面)
|
|
|
|
**业务价值**: 用户可以创建/管理项目,是所有功能的入口
|
|
|
|
**核心页面**:
|
|
1. **项目列表页** (`/projects`)
|
|
- 项目卡片网格布局
|
|
- 显示: Project Name, Description, Team 人数, Issue 计数, Progress
|
|
- 操作: Create Project, Edit Project, Delete Project, 进入项目详情
|
|
|
|
2. **项目详情页** (`/projects/{projectId}`)
|
|
- 项目信息展示
|
|
- Tab 切换: Overview, Epics, Board, Sprints, Team, Settings
|
|
- 操作: Edit Project, Add Member, Remove Member
|
|
|
|
3. **项目创建/编辑对话框**
|
|
- Form 表单: Name, Description, Start Date, End Date
|
|
- 验证: Required fields
|
|
|
|
**技术实现**:
|
|
- API Client: `project.api.ts`
|
|
- React Query Hooks: `useProjects`, `useProject`, `useCreateProject`, etc.
|
|
- Components: `ProjectCard`, `ProjectDetail`, `CreateProjectDialog`
|
|
|
|
**验收标准**:
|
|
- 用户可以创建/编辑/删除项目
|
|
- 项目列表正确显示
|
|
- 项目详情页 Tab 切换正常
|
|
- API 调用正确
|
|
|
|
**工作量**: 6-8 小时 (Day 16-17)
|
|
|
|
**依赖**: Project API 完成 (Day 14-15 后端开发)
|
|
|
|
---
|
|
|
|
#### 2.1.4 Sprint Management UI (迭代管理界面)
|
|
|
|
**业务价值**: Scrum 敏捷开发核心功能,支持迭代规划和跟踪
|
|
|
|
**核心页面**:
|
|
1. **Sprint 列表页** (`/projects/{projectId}/sprints`)
|
|
- Sprint 卡片列表
|
|
- 显示: Sprint Name, Goal, Date Range, Status, Task 计数, Progress
|
|
- 操作: Create Sprint, Start Sprint, Complete Sprint, Close Sprint
|
|
|
|
2. **Sprint 详情页** (`/sprints/{sprintId}`)
|
|
- Sprint 信息展示
|
|
- Sprint Backlog (任务列表)
|
|
- Burndown Chart (燃尽图,基础版)
|
|
- 操作: Add Task to Sprint, Remove Task, Update Sprint
|
|
|
|
3. **Sprint 创建/编辑对话框**
|
|
- Form 表单: Name, Goal, Start Date, End Date
|
|
- 验证: Start Date < End Date
|
|
|
|
**技术实现**:
|
|
- API Client: `sprint.api.ts`
|
|
- React Query Hooks: `useSprints`, `useSprint`, `useCreateSprint`, etc.
|
|
- Components: `SprintCard`, `SprintDetail`, `CreateSprintDialog`, `BurndownChart`
|
|
|
|
**验收标准**:
|
|
- 用户可以创建/启动/完成/关闭 Sprint
|
|
- Sprint Backlog 正确显示
|
|
- 可以添加/移除 Task 到 Sprint
|
|
- Burndown Chart 基础版显示
|
|
- API 调用正确
|
|
|
|
**工作量**: 8-10 小时 (Day 21-22)
|
|
|
|
**依赖**: Sprint API 完成 (Day 31-34 后端开发)
|
|
|
|
---
|
|
|
|
#### 2.1.5 User Management UI (用户管理界面)
|
|
|
|
**业务价值**: 团队协作核心功能,管理项目成员和权限
|
|
|
|
**核心页面**:
|
|
1. **用户列表页** (`/projects/{projectId}/team`)
|
|
- 用户卡片或表格视图
|
|
- 显示: User Name, Email, Role, Assigned Tasks 计数
|
|
- 操作: Invite User, Update Role, Remove User
|
|
|
|
2. **用户邀请对话框**
|
|
- Form 表单: Email, Role (Owner/Admin/Member/Viewer/Guest)
|
|
- 验证: Email format
|
|
|
|
3. **用户详情页** (`/users/{userId}`) (可选)
|
|
- 用户信息展示
|
|
- 用户负责的任务列表
|
|
- 用户活动历史
|
|
|
|
**技术实现**:
|
|
- 复用 Identity Module API (已完成)
|
|
- API Client: `user.api.ts`, `role.api.ts`
|
|
- React Query Hooks: `useUsers`, `useInviteUser`, `useUpdateRole`
|
|
- Components: `UserCard`, `InviteUserDialog`, `UserDetail`
|
|
|
|
**验收标准**:
|
|
- 用户可以邀请新成员
|
|
- 用户可以更新成员角色
|
|
- 用户可以移除成员
|
|
- 权限控制正确 (只有 Owner/Admin 可以操作)
|
|
- API 调用正确
|
|
|
|
**工作量**: 4-6 小时 (Day 17-18)
|
|
|
|
**依赖**: Identity API (已完成)
|
|
|
|
---
|
|
|
|
#### 2.1.6 SignalR 实时更新集成 (CRITICAL)
|
|
|
|
**业务价值**: 多用户协作实时同步,提升用户体验
|
|
|
|
**实时更新场景**:
|
|
1. **Kanban Board**: 其他用户拖拽任务时实时更新
|
|
2. **Epic/Story/Task 列表**: 其他用户创建/更新/删除时实时更新
|
|
3. **Sprint Backlog**: 其他用户添加/移除任务时实时更新
|
|
4. **Project 信息**: 其他用户更新项目信息时实时更新
|
|
|
|
**技术实现**:
|
|
- SignalR Client 配置 (`@microsoft/signalr`)
|
|
- SignalR Connection 管理 (全局单例)
|
|
- Event Listeners: 监听 ProjectHub/NotificationHub 事件
|
|
- React Query Invalidation: 接收到事件时刷新数据
|
|
- Toast 通知: 显示实时操作提示
|
|
|
|
**事件监听**:
|
|
- `ProjectCreated`, `ProjectUpdated`, `ProjectDeleted`
|
|
- `EpicCreated`, `EpicUpdated`, `EpicDeleted`
|
|
- `StoryCreated`, `StoryUpdated`, `StoryDeleted`
|
|
- `TaskCreated`, `TaskStatusChanged`, `TaskDeleted`
|
|
- `SprintStarted`, `SprintCompleted`, `TaskAddedToSprint`
|
|
|
|
**验收标准**:
|
|
- SignalR 连接正常建立
|
|
- 实时事件正确接收
|
|
- UI 自动刷新 (React Query invalidation)
|
|
- Toast 通知正常显示
|
|
- 多用户测试通过 (2+ users)
|
|
|
|
**工作量**: 4-6 小时 (Day 20)
|
|
|
|
**依赖**: SignalR Infrastructure 完成 (已完成)
|
|
|
|
---
|
|
|
|
### P1 (Should Have) - M1 重要但非阻塞
|
|
|
|
#### 2.1.7 Dashboard 仪表盘 (项目概览)
|
|
|
|
**业务价值**: 项目健康度可视化,帮助团队了解项目状态
|
|
|
|
**核心内容**:
|
|
1. **项目统计卡片**
|
|
- Total Epics, Stories, Tasks
|
|
- Completed Tasks, In Progress Tasks
|
|
- Team Members 计数
|
|
|
|
2. **任务状态分布图** (饼图或柱状图)
|
|
- Backlog, Todo, InProgress, Done 数量
|
|
|
|
3. **Sprint 进度条** (当前 Sprint)
|
|
- Sprint 名称, 剩余天数
|
|
- 完成度百分比
|
|
|
|
4. **最近活动流** (Activity Stream)
|
|
- 最近创建/更新的任务
|
|
- 最近分配的任务
|
|
|
|
**技术实现**:
|
|
- Chart 库: `recharts` or `chart.js`
|
|
- API: 复用现有 API + 聚合数据
|
|
- Components: `Dashboard`, `StatCard`, `TaskChart`, `ActivityFeed`
|
|
|
|
**验收标准**:
|
|
- Dashboard 正确显示统计数据
|
|
- 图表渲染正常
|
|
- 数据自动刷新 (定时 or 实时)
|
|
|
|
**工作量**: 6-8 小时 (Day 23-24)
|
|
|
|
**依赖**: Epic/Story/Task/Sprint API 完成
|
|
|
|
---
|
|
|
|
#### 2.1.8 高级搜索与过滤
|
|
|
|
**业务价值**: 提高任务查找效率
|
|
|
|
**核心功能**:
|
|
1. **快速过滤器** (Quick Filters)
|
|
- My Tasks (我的任务)
|
|
- Unassigned (未分配)
|
|
- Overdue (逾期)
|
|
- High Priority (高优先级)
|
|
|
|
2. **高级搜索表单**
|
|
- 字段: Title, Assignee, Status, Priority, Type, Date Range
|
|
- 保存过滤条件 (可选)
|
|
|
|
3. **搜索结果页**
|
|
- 表格或卡片视图
|
|
- 分页 + 排序
|
|
|
|
**技术实现**:
|
|
- Search API: 复用 List API with filters
|
|
- Components: `SearchBar`, `AdvancedFilter`, `SearchResults`
|
|
- URL Query Params: 保存过滤条件到 URL
|
|
|
|
**验收标准**:
|
|
- 快速过滤器正常工作
|
|
- 高级搜索返回正确结果
|
|
- URL 可分享 (带过滤条件)
|
|
|
|
**工作量**: 4-6 小时 (Day 25-26)
|
|
|
|
**依赖**: Issue/Task List API with filters
|
|
|
|
---
|
|
|
|
### P2 (Nice to Have) - M1 可延后到 M1.5 或 M2
|
|
|
|
#### 2.1.9 任务详情页 (全屏模式)
|
|
|
|
**业务价值**: 深度查看和编辑任务详情
|
|
|
|
**核心内容**:
|
|
- Task 完整信息展示
|
|
- 描述 (富文本编辑器)
|
|
- 评论系统 (Comments)
|
|
- 附件上传 (Attachments)
|
|
- 活动历史 (Activity Log)
|
|
- 子任务 (Sub-tasks)
|
|
|
|
**工作量**: 8-10 小时
|
|
|
|
**优先级**: P2 (可延后到 M2)
|
|
|
|
---
|
|
|
|
#### 2.1.10 Gantt Chart 甘特图
|
|
|
|
**业务价值**: 项目时间线可视化
|
|
|
|
**核心内容**:
|
|
- 任务时间轴
|
|
- 依赖关系
|
|
- 里程碑
|
|
|
|
**工作量**: 10-12 小时
|
|
|
|
**优先级**: P2 (可延后到 M2)
|
|
|
|
---
|
|
|
|
#### 2.1.11 通知系统
|
|
|
|
**业务价值**: 及时提醒用户任务变更
|
|
|
|
**核心内容**:
|
|
- In-app Notifications
|
|
- 通知列表
|
|
- 标记为已读
|
|
|
|
**工作量**: 6-8 小时
|
|
|
|
**优先级**: P2 (可延后到 M2)
|
|
|
|
---
|
|
|
|
## 三、前端开发任务分解与工时估算
|
|
|
|
### 3.1 任务分解树 (Task Breakdown Structure)
|
|
|
|
```
|
|
M1 前端开发 (18-22 天)
|
|
├── Phase 1: ProjectManagement 前端集成 (Day 16-20, 5 天)
|
|
│ ├── 1.1 API Clients 创建 (2-3h)
|
|
│ │ ├── epic.api.ts (Create, Read, Update, Delete, List, GetWithStories)
|
|
│ │ ├── story.api.ts (Create, Read, Update, Delete, List, GetWithTasks)
|
|
│ │ └── task.api.ts (Create, Read, Update, Delete, List, UpdateStatus)
|
|
│ ├── 1.2 React Query Hooks (2-3h)
|
|
│ │ ├── useEpics, useEpic, useCreateEpic, useUpdateEpic, useDeleteEpic
|
|
│ │ ├── useStories, useStory, useCreateStory, useUpdateStory, useDeleteStory
|
|
│ │ └── useTasks, useTask, useCreateTask, useUpdateTask, useDeleteTask
|
|
│ ├── 1.3 Epic/Story/Task 管理 UI (8-12h)
|
|
│ │ ├── Epic 列表页 + EpicCard + CreateEpicDialog (3-4h)
|
|
│ │ ├── Story 列表页 + StoryCard + CreateStoryDialog (3-4h)
|
|
│ │ ├── Task 列表页 + TaskCard + CreateTaskDialog (2-4h)
|
|
│ │ └── 面包屑导航 + 路由配置 (1h)
|
|
│ ├── 1.4 Kanban Board 更新 (4-6h)
|
|
│ │ ├── API Client 切换 (Issue → WorkTask) (2h)
|
|
│ │ ├── TaskCard 增强 (显示层级 + 工时) (2h)
|
|
│ │ └── 拖拽状态更新适配 (1-2h)
|
|
│ └── 1.5 SignalR 实时更新集成 (4-6h)
|
|
│ ├── SignalR Client 配置 (1h)
|
|
│ ├── Event Listeners 实现 (2-3h)
|
|
│ └── React Query Invalidation (1-2h)
|
|
│
|
|
├── Phase 2: 项目管理与用户管理 (Day 17-18, 2 天)
|
|
│ ├── 2.1 Project Management UI (6-8h)
|
|
│ │ ├── API Client: project.api.ts (1h)
|
|
│ │ ├── React Query Hooks (1h)
|
|
│ │ ├── 项目列表页 + ProjectCard (2-3h)
|
|
│ │ ├── 项目详情页 (Tab 切换) (2-3h)
|
|
│ │ └── 创建/编辑对话框 (1h)
|
|
│ └── 2.2 User Management UI (4-6h)
|
|
│ ├── API Client: user.api.ts, role.api.ts (1h)
|
|
│ ├── React Query Hooks (1h)
|
|
│ ├── 用户列表页 + UserCard (2-3h)
|
|
│ └── 邀请用户对话框 (1h)
|
|
│
|
|
├── Phase 3: Sprint 管理与 Dashboard (Day 21-24, 4 天)
|
|
│ ├── 3.1 Sprint Management UI (8-10h)
|
|
│ │ ├── API Client: sprint.api.ts (1h)
|
|
│ │ ├── React Query Hooks (1h)
|
|
│ │ ├── Sprint 列表页 + SprintCard (2-3h)
|
|
│ │ ├── Sprint 详情页 + Backlog (3-4h)
|
|
│ │ └── Burndown Chart 基础版 (2h)
|
|
│ └── 3.2 Dashboard 仪表盘 (6-8h)
|
|
│ ├── 统计卡片 (2h)
|
|
│ ├── 任务状态分布图 (2-3h)
|
|
│ ├── Sprint 进度条 (1h)
|
|
│ └── 最近活动流 (2h)
|
|
│
|
|
├── Phase 4: 高级功能与优化 (Day 25-27, 3 天)
|
|
│ ├── 4.1 高级搜索与过滤 (4-6h)
|
|
│ │ ├── 快速过滤器 (2h)
|
|
│ │ ├── 高级搜索表单 (2h)
|
|
│ │ └── 搜索结果页 (1-2h)
|
|
│ ├── 4.2 UI/UX 优化 (4-6h)
|
|
│ │ ├── 响应式设计优化 (2h)
|
|
│ │ ├── Loading 状态优化 (1h)
|
|
│ │ ├── Error Handling 优化 (1h)
|
|
│ │ └── 动画与过渡效果 (1-2h)
|
|
│ └── 4.3 性能优化 (2-4h)
|
|
│ ├── React.memo 应用 (1h)
|
|
│ ├── 虚拟滚动 (可选) (2h)
|
|
│ └── 代码分割 (Code Splitting) (1h)
|
|
│
|
|
└── Phase 5: 测试与文档 (Day 28-30, 3 天)
|
|
├── 5.1 E2E 测试 (8-10h)
|
|
│ ├── Cypress/Playwright 配置 (2h)
|
|
│ ├── 核心流程测试 (5+ scenarios) (5-7h)
|
|
│ └── CI/CD 集成 (1h)
|
|
├── 5.2 单元测试 (可选) (4-6h)
|
|
│ ├── Component 测试 (2-3h)
|
|
│ └── Hooks 测试 (2-3h)
|
|
└── 5.3 文档编写 (2-3h)
|
|
├── 前端开发指南 (1h)
|
|
├── 组件文档 (Storybook,可选) (1h)
|
|
└── 部署指南 (1h)
|
|
```
|
|
|
|
---
|
|
|
|
### 3.2 工时估算汇总表
|
|
|
|
| Phase | 任务 | 预计工时 | 依赖 | 优先级 |
|
|
|-------|------|---------|------|--------|
|
|
| **Phase 1** | **ProjectManagement 前端集成** | **18-28h (2.5-3.5天)** | 后端 ProjectManagement API | **P0** |
|
|
| 1.1 | API Clients 创建 | 2-3h | 后端 API | P0 |
|
|
| 1.2 | React Query Hooks | 2-3h | 1.1 | P0 |
|
|
| 1.3 | Epic/Story/Task 管理 UI | 8-12h | 1.2 | P0 |
|
|
| 1.4 | Kanban Board 更新 | 4-6h | 1.3 | P0 |
|
|
| 1.5 | SignalR 实时更新集成 | 4-6h | 1.4 | P0 |
|
|
| **Phase 2** | **项目管理与用户管理** | **10-14h (1.5-2天)** | 后端 Project/User API | **P0** |
|
|
| 2.1 | Project Management UI | 6-8h | 后端 Project API | P0 |
|
|
| 2.2 | User Management UI | 4-6h | 后端 Identity API | P0 |
|
|
| **Phase 3** | **Sprint 管理与 Dashboard** | **14-18h (2-2.5天)** | 后端 Sprint API | **P0** |
|
|
| 3.1 | Sprint Management UI | 8-10h | 后端 Sprint API | P0 |
|
|
| 3.2 | Dashboard 仪表盘 | 6-8h | Phase 1-2 | P1 |
|
|
| **Phase 4** | **高级功能与优化** | **10-16h (1.5-2天)** | Phase 1-3 | **P1** |
|
|
| 4.1 | 高级搜索与过滤 | 4-6h | Phase 1 | P1 |
|
|
| 4.2 | UI/UX 优化 | 4-6h | Phase 1-3 | P1 |
|
|
| 4.3 | 性能优化 | 2-4h | Phase 1-3 | P1 |
|
|
| **Phase 5** | **测试与文档** | **14-19h (2-2.5天)** | Phase 1-4 | **P1** |
|
|
| 5.1 | E2E 测试 | 8-10h | Phase 1-3 | P1 |
|
|
| 5.2 | 单元测试 (可选) | 4-6h | Phase 1-3 | P2 |
|
|
| 5.3 | 文档编写 | 2-3h | All | P1 |
|
|
| **总计** | | **66-95h (9-13天)** | | |
|
|
|
|
**考虑缓冲时间 + Bug 修复 + 返工**: **18-22天** (每天 5-6 小时有效工作时间)
|
|
|
|
---
|
|
|
|
### 3.3 依赖关系图
|
|
|
|
```
|
|
后端 ProjectManagement API (Day 15-17) 完成
|
|
↓
|
|
前端 Phase 1: ProjectManagement 前端集成 (Day 18-20)
|
|
↓
|
|
前端 Phase 2: 项目管理与用户管理 (Day 21-22)
|
|
↓ (并行)
|
|
后端 Sprint API (Day 31-34) 完成
|
|
↓
|
|
前端 Phase 3: Sprint 管理与 Dashboard (Day 23-24)
|
|
↓
|
|
前端 Phase 4: 高级功能与优化 (Day 25-27)
|
|
↓
|
|
前端 Phase 5: 测试与文档 (Day 28-30)
|
|
```
|
|
|
|
**关键依赖**:
|
|
- ✅ 后端 Identity API - 已完成
|
|
- ✅ 后端 SignalR Infrastructure - 已完成
|
|
- ⏳ 后端 ProjectManagement API - Day 15-17 (阻塞 Phase 1)
|
|
- ⏳ 后端 Project API - Day 14-15 (阻塞 Phase 2)
|
|
- ⏳ 后端 Sprint API - Day 31-34 (阻塞 Phase 3)
|
|
|
|
---
|
|
|
|
## 四、前端技术规范与最佳实践
|
|
|
|
### 4.1 项目结构规范
|
|
|
|
```
|
|
colaflow-frontend/
|
|
├── public/ # 静态资源
|
|
├── src/
|
|
│ ├── api/ # API Clients (Axios 封装)
|
|
│ │ ├── client.ts # Axios 实例配置 (baseURL, interceptors)
|
|
│ │ ├── auth.api.ts # 认证 API
|
|
│ │ ├── project.api.ts # 项目管理 API
|
|
│ │ ├── epic.api.ts # Epic API
|
|
│ │ ├── story.api.ts # Story API
|
|
│ │ ├── task.api.ts # Task API
|
|
│ │ ├── sprint.api.ts # Sprint API
|
|
│ │ └── user.api.ts # 用户管理 API
|
|
│ ├── components/ # React 组件 (原子设计模式)
|
|
│ │ ├── atoms/ # 原子组件 (Button, Input, Card)
|
|
│ │ ├── molecules/ # 分子组件 (SearchBar, TaskCard)
|
|
│ │ ├── organisms/ # 有机组件 (Kanban, EpicList)
|
|
│ │ └── templates/ # 模板组件 (PageLayout)
|
|
│ ├── pages/ # 页面组件 (路由页面)
|
|
│ │ ├── LoginPage.tsx
|
|
│ │ ├── ProjectsPage.tsx
|
|
│ │ ├── EpicsPage.tsx
|
|
│ │ ├── KanbanPage.tsx
|
|
│ │ └── DashboardPage.tsx
|
|
│ ├── hooks/ # 自定义 Hooks
|
|
│ │ ├── useAuth.ts # 认证 Hook
|
|
│ │ ├── useProjects.ts # 项目管理 Hooks (React Query)
|
|
│ │ ├── useEpics.ts # Epic Hooks
|
|
│ │ ├── useStories.ts # Story Hooks
|
|
│ │ ├── useTasks.ts # Task Hooks
|
|
│ │ ├── useSprints.ts # Sprint Hooks
|
|
│ │ └── useSignalR.ts # SignalR Hook
|
|
│ ├── store/ # Zustand Store (全局状态)
|
|
│ │ ├── authStore.ts # 认证状态
|
|
│ │ ├── uiStore.ts # UI 状态 (sidebar, theme)
|
|
│ │ └── index.ts
|
|
│ ├── types/ # TypeScript 类型定义
|
|
│ │ ├── api.types.ts # API 请求/响应类型
|
|
│ │ ├── domain.types.ts # 领域模型类型 (Epic, Story, Task)
|
|
│ │ └── index.ts
|
|
│ ├── utils/ # 工具函数
|
|
│ │ ├── formatters.ts # 格式化函数 (date, number)
|
|
│ │ ├── validators.ts # 验证函数
|
|
│ │ └── constants.ts # 常量定义
|
|
│ ├── styles/ # 全局样式
|
|
│ │ ├── global.css # 全局 CSS
|
|
│ │ └── antd-theme.ts # Ant Design 主题配置
|
|
│ ├── App.tsx # 应用根组件
|
|
│ ├── main.tsx # 应用入口
|
|
│ └── router.tsx # 路由配置 (React Router)
|
|
├── tests/ # 测试文件
|
|
│ ├── e2e/ # E2E 测试 (Cypress/Playwright)
|
|
│ └── unit/ # 单元测试 (Vitest)
|
|
├── .env.example # 环境变量示例
|
|
├── package.json
|
|
├── tsconfig.json
|
|
└── vite.config.ts # Vite 配置
|
|
```
|
|
|
|
---
|
|
|
|
### 4.2 技术栈规范
|
|
|
|
#### 4.2.1 核心技术栈
|
|
|
|
| 技术 | 版本 | 用途 | 备注 |
|
|
|------|------|------|------|
|
|
| React | 18.x | UI 框架 | 使用 Hooks,禁用 Class Components |
|
|
| TypeScript | 5.x | 类型系统 | 严格模式 (strict: true) |
|
|
| Vite | 5.x | 构建工具 | 快速开发,HMR |
|
|
| React Router | 6.x | 路由管理 | 使用 Data Router (createBrowserRouter) |
|
|
| Ant Design | 5.x | UI 组件库 | 按需导入,自定义主题 |
|
|
| Zustand | 4.x | 状态管理 | 轻量级,替代 Redux |
|
|
| React Query | 5.x | 数据获取与缓存 | Server State 管理 |
|
|
| Axios | 1.x | HTTP Client | 统一封装,拦截器 |
|
|
| @dnd-kit | 6.x | 拖拽库 | Kanban Board 拖拽 |
|
|
| @microsoft/signalr | 8.x | SignalR Client | 实时通信 |
|
|
| Zod | 3.x | 数据验证 | API 响应验证,Form 验证 |
|
|
| date-fns | 3.x | 日期处理 | 替代 moment.js (更轻量) |
|
|
| recharts | 2.x | 图表库 | Dashboard 图表 |
|
|
|
|
#### 4.2.2 开发工具
|
|
|
|
| 工具 | 用途 |
|
|
|------|------|
|
|
| ESLint | 代码规范检查 |
|
|
| Prettier | 代码格式化 |
|
|
| Husky | Git Hooks (pre-commit, pre-push) |
|
|
| lint-staged | 只检查暂存文件 |
|
|
| Vitest | 单元测试 (Vite 原生支持) |
|
|
| Cypress/Playwright | E2E 测试 |
|
|
| Storybook (可选) | 组件文档 |
|
|
|
|
---
|
|
|
|
### 4.3 代码规范
|
|
|
|
#### 4.3.1 组件设计规范
|
|
|
|
**1. 使用函数组件 + Hooks**
|
|
```typescript
|
|
// ✅ Good
|
|
const TaskCard: React.FC<TaskCardProps> = ({ task }) => {
|
|
const { mutate } = useUpdateTask();
|
|
// ...
|
|
};
|
|
|
|
// ❌ Bad
|
|
class TaskCard extends React.Component { }
|
|
```
|
|
|
|
**2. Props 类型定义**
|
|
```typescript
|
|
interface TaskCardProps {
|
|
task: Task;
|
|
onEdit?: (task: Task) => void;
|
|
onDelete?: (taskId: string) => void;
|
|
className?: string;
|
|
}
|
|
```
|
|
|
|
**3. 组件拆分原则**
|
|
- 单一职责原则 (SRP): 一个组件只做一件事
|
|
- 组件行数 < 200 行 (超过则拆分)
|
|
- 复杂逻辑提取到自定义 Hook
|
|
|
|
**4. 命名规范**
|
|
- 组件: PascalCase (`TaskCard`, `EpicList`)
|
|
- 函数/变量: camelCase (`fetchTasks`, `isLoading`)
|
|
- 常量: UPPER_SNAKE_CASE (`API_BASE_URL`)
|
|
- 文件名: kebab-case (`task-card.tsx`, `use-tasks.ts`)
|
|
|
|
---
|
|
|
|
#### 4.3.2 状态管理规范
|
|
|
|
**1. Zustand Store (Client State)**
|
|
|
|
用途: 全局 UI 状态 (sidebar 开关, theme, 当前用户等)
|
|
|
|
```typescript
|
|
// authStore.ts
|
|
import { create } from 'zustand';
|
|
|
|
interface AuthState {
|
|
user: User | null;
|
|
token: string | null;
|
|
setUser: (user: User) => void;
|
|
logout: () => void;
|
|
}
|
|
|
|
export const useAuthStore = create<AuthState>((set) => ({
|
|
user: null,
|
|
token: null,
|
|
setUser: (user) => set({ user }),
|
|
logout: () => set({ user: null, token: null }),
|
|
}));
|
|
```
|
|
|
|
**2. React Query (Server State)**
|
|
|
|
用途: 服务端数据获取、缓存、同步
|
|
|
|
```typescript
|
|
// useTasks.ts
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { taskApi } from '@/api/task.api';
|
|
|
|
export const useTasks = (storyId: string) => {
|
|
return useQuery({
|
|
queryKey: ['tasks', storyId],
|
|
queryFn: () => taskApi.listTasks(storyId),
|
|
staleTime: 5 * 60 * 1000, // 5分钟
|
|
});
|
|
};
|
|
|
|
export const useCreateTask = () => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: taskApi.createTask,
|
|
onSuccess: (data) => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks', data.storyId] });
|
|
},
|
|
});
|
|
};
|
|
```
|
|
|
|
**3. 状态选择原则**
|
|
- Client State (Zustand): 全局 UI 状态, 用户登录状态
|
|
- Server State (React Query): API 数据, 缓存数据
|
|
- Component State (useState): 局部 UI 状态 (modal open, form input)
|
|
|
|
---
|
|
|
|
#### 4.3.3 API 调用规范
|
|
|
|
**1. Axios 实例配置**
|
|
|
|
```typescript
|
|
// api/client.ts
|
|
import axios from 'axios';
|
|
import { useAuthStore } from '@/store/authStore';
|
|
|
|
export const apiClient = axios.create({
|
|
baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api',
|
|
timeout: 10000,
|
|
});
|
|
|
|
// 请求拦截器: 添加 JWT Token
|
|
apiClient.interceptors.request.use((config) => {
|
|
const token = useAuthStore.getState().token;
|
|
if (token) {
|
|
config.headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
return config;
|
|
});
|
|
|
|
// 响应拦截器: 处理错误
|
|
apiClient.interceptors.response.use(
|
|
(response) => response.data,
|
|
(error) => {
|
|
if (error.response?.status === 401) {
|
|
useAuthStore.getState().logout();
|
|
window.location.href = '/login';
|
|
}
|
|
return Promise.reject(error);
|
|
}
|
|
);
|
|
```
|
|
|
|
**2. API Client 模块化**
|
|
|
|
```typescript
|
|
// api/task.api.ts
|
|
import { apiClient } from './client';
|
|
import type { Task, CreateTaskRequest, UpdateTaskRequest } from '@/types';
|
|
|
|
export const taskApi = {
|
|
createTask: (data: CreateTaskRequest): Promise<Task> =>
|
|
apiClient.post('/tasks', data),
|
|
|
|
getTask: (id: string): Promise<Task> =>
|
|
apiClient.get(`/tasks/${id}`),
|
|
|
|
listTasks: (storyId: string): Promise<Task[]> =>
|
|
apiClient.get('/tasks', { params: { storyId } }),
|
|
|
|
updateTask: (id: string, data: UpdateTaskRequest): Promise<Task> =>
|
|
apiClient.put(`/tasks/${id}`, data),
|
|
|
|
updateTaskStatus: (id: string, status: string): Promise<Task> =>
|
|
apiClient.patch(`/tasks/${id}/status`, { status }),
|
|
|
|
deleteTask: (id: string): Promise<void> =>
|
|
apiClient.delete(`/tasks/${id}`),
|
|
};
|
|
```
|
|
|
|
**3. TypeScript 类型定义**
|
|
|
|
```typescript
|
|
// types/domain.types.ts
|
|
export interface Task {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
status: TaskStatus;
|
|
priority: TaskPriority;
|
|
assigneeId?: string;
|
|
storyId: string;
|
|
epicId?: string;
|
|
estimatedHours?: number;
|
|
actualHours?: number;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
export enum TaskStatus {
|
|
Backlog = 'Backlog',
|
|
Todo = 'Todo',
|
|
InProgress = 'InProgress',
|
|
Done = 'Done',
|
|
}
|
|
|
|
export enum TaskPriority {
|
|
Low = 'Low',
|
|
Medium = 'Medium',
|
|
High = 'High',
|
|
Critical = 'Critical',
|
|
}
|
|
|
|
export interface CreateTaskRequest {
|
|
title: string;
|
|
description?: string;
|
|
storyId: string;
|
|
priority?: TaskPriority;
|
|
assigneeId?: string;
|
|
estimatedHours?: number;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
#### 4.3.4 路由管理规范
|
|
|
|
**1. React Router 配置 (Data Router)**
|
|
|
|
```typescript
|
|
// router.tsx
|
|
import { createBrowserRouter, Navigate } from 'react-router-dom';
|
|
import { ProtectedRoute } from '@/components/ProtectedRoute';
|
|
|
|
export const router = createBrowserRouter([
|
|
{
|
|
path: '/login',
|
|
element: <LoginPage />,
|
|
},
|
|
{
|
|
path: '/',
|
|
element: <ProtectedRoute><AppLayout /></ProtectedRoute>,
|
|
children: [
|
|
{ index: true, element: <Navigate to="/projects" replace /> },
|
|
{ path: 'projects', element: <ProjectsPage /> },
|
|
{ path: 'projects/:projectId', element: <ProjectDetailPage /> },
|
|
{ path: 'projects/:projectId/epics', element: <EpicsPage /> },
|
|
{ path: 'epics/:epicId/stories', element: <StoriesPage /> },
|
|
{ path: 'stories/:storyId/tasks', element: <TasksPage /> },
|
|
{ path: 'projects/:projectId/board', element: <KanbanPage /> },
|
|
{ path: 'projects/:projectId/sprints', element: <SprintsPage /> },
|
|
{ path: 'dashboard', element: <DashboardPage /> },
|
|
],
|
|
},
|
|
]);
|
|
```
|
|
|
|
**2. 受保护路由**
|
|
|
|
```typescript
|
|
// components/ProtectedRoute.tsx
|
|
import { Navigate } from 'react-router-dom';
|
|
import { useAuthStore } from '@/store/authStore';
|
|
|
|
export const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const token = useAuthStore((state) => state.token);
|
|
if (!token) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
return <>{children}</>;
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
#### 4.3.5 表单处理规范
|
|
|
|
**推荐使用 Ant Design Form + React Hook Form (可选)**
|
|
|
|
**1. Ant Design Form 示例**
|
|
|
|
```typescript
|
|
// CreateTaskDialog.tsx
|
|
import { Form, Input, Select, Modal } from 'antd';
|
|
import { useCreateTask } from '@/hooks/useTasks';
|
|
|
|
export const CreateTaskDialog: React.FC<Props> = ({ open, onClose, storyId }) => {
|
|
const [form] = Form.useForm();
|
|
const { mutate: createTask, isPending } = useCreateTask();
|
|
|
|
const handleSubmit = async () => {
|
|
const values = await form.validateFields();
|
|
createTask({ ...values, storyId }, {
|
|
onSuccess: () => {
|
|
form.resetFields();
|
|
onClose();
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="Create Task"
|
|
open={open}
|
|
onOk={handleSubmit}
|
|
onCancel={onClose}
|
|
confirmLoading={isPending}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="title"
|
|
label="Title"
|
|
rules={[{ required: true, message: 'Please input task title' }]}
|
|
>
|
|
<Input placeholder="Task title" />
|
|
</Form.Item>
|
|
<Form.Item name="description" label="Description">
|
|
<Input.TextArea rows={4} />
|
|
</Form.Item>
|
|
<Form.Item name="priority" label="Priority" initialValue="Medium">
|
|
<Select>
|
|
<Select.Option value="Low">Low</Select.Option>
|
|
<Select.Option value="Medium">Medium</Select.Option>
|
|
<Select.Option value="High">High</Select.Option>
|
|
<Select.Option value="Critical">Critical</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
#### 4.3.6 错误处理规范
|
|
|
|
**1. API 错误处理**
|
|
|
|
```typescript
|
|
// hooks/useTasks.ts
|
|
export const useCreateTask = () => {
|
|
return useMutation({
|
|
mutationFn: taskApi.createTask,
|
|
onError: (error: AxiosError<{ message: string }>) => {
|
|
const message = error.response?.data?.message || 'Failed to create task';
|
|
notification.error({ message: 'Error', description: message });
|
|
},
|
|
});
|
|
};
|
|
```
|
|
|
|
**2. ErrorBoundary 组件**
|
|
|
|
```typescript
|
|
// components/ErrorBoundary.tsx
|
|
import { Component, ReactNode } from 'react';
|
|
import { Result, Button } from 'antd';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error?: Error;
|
|
}
|
|
|
|
export class ErrorBoundary extends Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = { hasError: false };
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
return { hasError: true, error };
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<Result
|
|
status="500"
|
|
title="Something went wrong"
|
|
subTitle={this.state.error?.message}
|
|
extra={<Button onClick={() => window.location.reload()}>Reload</Button>}
|
|
/>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
#### 4.3.7 SignalR 集成规范
|
|
|
|
**1. SignalR Connection 管理**
|
|
|
|
```typescript
|
|
// hooks/useSignalR.ts
|
|
import { useEffect, useRef } from 'react';
|
|
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
|
|
import { useAuthStore } from '@/store/authStore';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
export const useSignalR = () => {
|
|
const connectionRef = useRef<HubConnection | null>(null);
|
|
const token = useAuthStore((state) => state.token);
|
|
const queryClient = useQueryClient();
|
|
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
|
|
const connection = new HubConnectionBuilder()
|
|
.withUrl(`${import.meta.env.VITE_API_BASE_URL}/hubs/project`, {
|
|
accessTokenFactory: () => token,
|
|
})
|
|
.withAutomaticReconnect()
|
|
.build();
|
|
|
|
connection.start().then(() => {
|
|
console.log('SignalR connected');
|
|
});
|
|
|
|
// 监听事件
|
|
connection.on('TaskStatusChanged', (taskId: string, status: string) => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
notification.info({ message: `Task ${taskId} status changed to ${status}` });
|
|
});
|
|
|
|
connection.on('EpicCreated', (epic: Epic) => {
|
|
queryClient.invalidateQueries({ queryKey: ['epics'] });
|
|
notification.success({ message: `Epic "${epic.title}" created` });
|
|
});
|
|
|
|
connectionRef.current = connection;
|
|
|
|
return () => {
|
|
connection.stop();
|
|
};
|
|
}, [token, queryClient]);
|
|
|
|
return connectionRef.current;
|
|
};
|
|
```
|
|
|
|
**2. 在 App 级别使用 SignalR Hook**
|
|
|
|
```typescript
|
|
// App.tsx
|
|
import { useSignalR } from '@/hooks/useSignalR';
|
|
|
|
export const App: React.FC = () => {
|
|
useSignalR(); // 全局启动 SignalR 连接
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ErrorBoundary>
|
|
<RouterProvider router={router} />
|
|
</ErrorBoundary>
|
|
</QueryClientProvider>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
#### 4.3.8 性能优化规范
|
|
|
|
**1. React.memo 应用**
|
|
|
|
```typescript
|
|
// TaskCard.tsx
|
|
export const TaskCard = React.memo<TaskCardProps>(({ task, onEdit, onDelete }) => {
|
|
// ...
|
|
}, (prevProps, nextProps) => {
|
|
return prevProps.task.id === nextProps.task.id &&
|
|
prevProps.task.updatedAt === nextProps.task.updatedAt;
|
|
});
|
|
```
|
|
|
|
**2. useMemo 和 useCallback**
|
|
|
|
```typescript
|
|
const TaskList: React.FC<Props> = ({ tasks, onTaskClick }) => {
|
|
const sortedTasks = useMemo(() => {
|
|
return tasks.sort((a, b) => a.priority - b.priority);
|
|
}, [tasks]);
|
|
|
|
const handleTaskClick = useCallback((taskId: string) => {
|
|
onTaskClick(taskId);
|
|
}, [onTaskClick]);
|
|
|
|
return (
|
|
<>
|
|
{sortedTasks.map(task => (
|
|
<TaskCard key={task.id} task={task} onClick={handleTaskClick} />
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
```
|
|
|
|
**3. 代码分割 (Code Splitting)**
|
|
|
|
```typescript
|
|
// Lazy load heavy components
|
|
const KanbanPage = lazy(() => import('@/pages/KanbanPage'));
|
|
const DashboardPage = lazy(() => import('@/pages/DashboardPage'));
|
|
|
|
// In router
|
|
{
|
|
path: 'board',
|
|
element: <Suspense fallback={<Spin />}><KanbanPage /></Suspense>
|
|
}
|
|
```
|
|
|
|
**4. 虚拟滚动 (可选,长列表优化)**
|
|
|
|
```typescript
|
|
import { FixedSizeList } from 'react-window';
|
|
|
|
const TaskList: React.FC<Props> = ({ tasks }) => {
|
|
return (
|
|
<FixedSizeList
|
|
height={600}
|
|
itemCount={tasks.length}
|
|
itemSize={80}
|
|
width="100%"
|
|
>
|
|
{({ index, style }) => (
|
|
<div style={style}>
|
|
<TaskCard task={tasks[index]} />
|
|
</div>
|
|
)}
|
|
</FixedSizeList>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
### 4.4 国际化 (i18n) 建议
|
|
|
|
**M1 阶段暂不实施,M2 考虑引入**
|
|
|
|
推荐技术: `react-i18next` or `next-intl`
|
|
|
|
---
|
|
|
|
## 五、前端开发时间计划 (4周内完成 M1 前端)
|
|
|
|
### 5.1 总体时间线
|
|
|
|
| 周次 | 日期 | Phase | 主要任务 | 工作量 | 状态 |
|
|
|------|------|-------|---------|--------|------|
|
|
| **Week 1** | **Day 16-20** | **Phase 1** | **ProjectManagement 前端集成** | **3.5-4天** | ⏳ 计划中 |
|
|
| Day 16 | 2025-11-08 | Phase 1.1-1.2 | API Clients + React Query Hooks | 4-6h | ⏳ |
|
|
| Day 17 | 2025-11-09 | Phase 1.3 | Epic/Story 列表页 | 6-8h | ⏳ |
|
|
| Day 18 | 2025-11-10 | Phase 1.3 | Task 列表页 + 面包屑导航 | 6-8h | ⏳ |
|
|
| Day 19 | 2025-11-11 | Phase 1.4 | Kanban Board 更新 | 4-6h | ⏳ |
|
|
| Day 20 | 2025-11-12 | Phase 1.5 | SignalR 实时更新集成 | 4-6h | ⏳ |
|
|
| **Week 2** | **Day 21-25** | **Phase 2-3** | **项目/用户/Sprint 管理** | **5天** | ⏳ 计划中 |
|
|
| Day 21 | 2025-11-13 | Phase 2.1 | Project Management UI | 6-8h | ⏳ |
|
|
| Day 22 | 2025-11-14 | Phase 2.2 | User Management UI | 4-6h | ⏳ |
|
|
| Day 23 | 2025-11-15 | Phase 3.1 | Sprint Management UI (Part 1) | 4-5h | ⏳ |
|
|
| Day 24 | 2025-11-16 | Phase 3.1 | Sprint Management UI (Part 2) + Burndown | 4-5h | ⏳ |
|
|
| Day 25 | 2025-11-17 | Phase 3.2 | Dashboard 仪表盘 | 6-8h | ⏳ |
|
|
| **Week 3** | **Day 26-30** | **Phase 4-5** | **高级功能 + 测试** | **5天** | ⏳ 计划中 |
|
|
| Day 26 | 2025-11-18 | Phase 4.1 | 高级搜索与过滤 | 4-6h | ⏳ |
|
|
| Day 27 | 2025-11-19 | Phase 4.2-4.3 | UI/UX 优化 + 性能优化 | 6-10h | ⏳ |
|
|
| Day 28 | 2025-11-20 | Phase 5.1 | E2E 测试 (Part 1) | 4-5h | ⏳ |
|
|
| Day 29 | 2025-11-21 | Phase 5.1 | E2E 测试 (Part 2) | 4-5h | ⏳ |
|
|
| Day 30 | 2025-11-22 | Phase 5.3 | 文档编写 | 2-3h | ⏳ |
|
|
| **Week 4** | **Day 31-35** | **缓冲 + 集成** | **Bug 修复 + 集成测试** | **5天** | ⏳ 计划中 |
|
|
| Day 31-35 | 2025-11-23至27 | 缓冲 | Bug 修复, 返工, 集成测试, M1 验收 | 40h | ⏳ |
|
|
|
|
**目标完成日期**: **2025-11-27** (与后端 M1 完成日期对齐)
|
|
|
|
---
|
|
|
|
### 5.2 详细每日任务分解
|
|
|
|
#### Week 1: ProjectManagement 前端集成 (Day 16-20)
|
|
|
|
**Day 16 (2025-11-08) - API Clients + React Query Hooks**
|
|
|
|
时间: 4-6 小时
|
|
|
|
- [ ] 08:00-10:00: API Clients 创建
|
|
- [ ] epic.api.ts (6个方法)
|
|
- [ ] story.api.ts (6个方法)
|
|
- [ ] task.api.ts (6个方法)
|
|
- [ ] 10:00-12:00: React Query Hooks 创建
|
|
- [ ] useEpics, useEpic, useCreateEpic, useUpdateEpic, useDeleteEpic
|
|
- [ ] useStories, useStory, useCreateStory, useUpdateStory, useDeleteStory
|
|
- [ ] useTasks, useTask, useCreateTask, useUpdateTask, useDeleteTask
|
|
- [ ] 13:00-14:00: TypeScript 类型定义
|
|
- [ ] Epic, Story, WorkTask 类型
|
|
- [ ] CreateEpicRequest, UpdateEpicRequest 等
|
|
- [ ] 14:00-15:00: API 集成测试 (手动测试 API 调用)
|
|
|
|
**交付物**:
|
|
- ✅ API Clients (epic.api.ts, story.api.ts, task.api.ts)
|
|
- ✅ React Query Hooks (useEpics, useStories, useTasks)
|
|
- ✅ TypeScript 类型定义
|
|
|
|
---
|
|
|
|
**Day 17 (2025-11-09) - Epic/Story 列表页**
|
|
|
|
时间: 6-8 小时
|
|
|
|
- [ ] 08:00-11:00: Epic 列表页
|
|
- [ ] EpicCard 组件 (显示 Epic 信息 + Story 计数)
|
|
- [ ] EpicsPage 页面布局
|
|
- [ ] CreateEpicDialog 组件
|
|
- [ ] 路由配置 (`/projects/{id}/epics`)
|
|
- [ ] 11:00-12:00: Epic CRUD 功能测试
|
|
- [ ] 13:00-16:00: Story 列表页
|
|
- [ ] StoryCard 组件 (显示 Story 信息 + Task 计数)
|
|
- [ ] StoriesPage 页面布局
|
|
- [ ] CreateStoryDialog 组件
|
|
- [ ] 路由配置 (`/epics/{id}/stories`)
|
|
- [ ] 面包屑导航 (Project → Epic → Story)
|
|
|
|
**交付物**:
|
|
- ✅ Epic 列表页 + CRUD 功能
|
|
- ✅ Story 列表页 + CRUD 功能
|
|
- ✅ 面包屑导航
|
|
|
|
---
|
|
|
|
**Day 18 (2025-11-10) - Task 列表页 + 面包屑导航**
|
|
|
|
时间: 6-8 小时
|
|
|
|
- [ ] 08:00-11:00: Task 列表页
|
|
- [ ] TaskCard 组件 (显示 Task 信息 + 状态)
|
|
- [ ] TasksPage 页面布局
|
|
- [ ] CreateTaskDialog 组件
|
|
- [ ] 路由配置 (`/stories/{id}/tasks`)
|
|
- [ ] 面包屑导航 (Project → Epic → Story → Task)
|
|
- [ ] 11:00-12:00: Task CRUD 功能测试
|
|
- [ ] 13:00-15:00: 三层层级导航优化
|
|
- [ ] 点击 Task 可跳转到所属 Story/Epic
|
|
- [ ] 显示完整层级路径
|
|
- [ ] 15:00-16:00: UI/UX 细节优化
|
|
|
|
**交付物**:
|
|
- ✅ Task 列表页 + CRUD 功能
|
|
- ✅ 完整三层层级导航
|
|
|
|
---
|
|
|
|
**Day 19 (2025-11-11) - Kanban Board 更新**
|
|
|
|
时间: 4-6 小时
|
|
|
|
- [ ] 08:00-10:00: API Client 切换
|
|
- [ ] 更新 Kanban API Client (Issue → WorkTask)
|
|
- [ ] 更新 React Query Hooks
|
|
- [ ] 更新数据结构 (Issue → WorkTask)
|
|
- [ ] 10:00-12:00: TaskCard 增强
|
|
- [ ] 显示 Epic/Story 层级信息
|
|
- [ ] 显示工时信息 (EstimatedHours/ActualHours)
|
|
- [ ] 点击 Task 跳转到所属 Story/Epic
|
|
- [ ] 13:00-14:00: 拖拽状态更新适配
|
|
- [ ] 拖拽更新 WorkTask 状态
|
|
- [ ] 拖拽时显示确认提示 (可选)
|
|
- [ ] 14:00-15:00: Kanban Board 功能测试
|
|
|
|
**交付物**:
|
|
- ✅ Kanban Board 支持 ProjectManagement
|
|
- ✅ 显示层级信息和工时信息
|
|
|
|
---
|
|
|
|
**Day 20 (2025-11-12) - SignalR 实时更新集成**
|
|
|
|
时间: 4-6 小时
|
|
|
|
- [ ] 08:00-09:00: SignalR Client 配置
|
|
- [ ] useSignalR Hook 实现
|
|
- [ ] SignalR Connection 管理
|
|
- [ ] 09:00-12:00: Event Listeners 实现
|
|
- [ ] EpicCreated, EpicUpdated, EpicDeleted
|
|
- [ ] StoryCreated, StoryUpdated, StoryDeleted
|
|
- [ ] TaskCreated, TaskStatusChanged, TaskDeleted
|
|
- [ ] SprintStarted, SprintCompleted, TaskAddedToSprint
|
|
- [ ] 13:00-15:00: React Query Invalidation
|
|
- [ ] 接收到事件时刷新对应数据
|
|
- [ ] Toast 通知显示
|
|
- [ ] 15:00-16:00: 多用户实时测试 (2+ users)
|
|
|
|
**交付物**:
|
|
- ✅ SignalR 实时更新正常工作
|
|
- ✅ 多用户协作测试通过
|
|
|
|
---
|
|
|
|
#### Week 2: 项目/用户/Sprint 管理 (Day 21-25)
|
|
|
|
**Day 21 (2025-11-13) - Project Management UI**
|
|
|
|
时间: 6-8 小时
|
|
|
|
- [ ] 08:00-10:00: API Client + Hooks
|
|
- [ ] project.api.ts
|
|
- [ ] useProjects, useProject, useCreateProject, etc.
|
|
- [ ] 10:00-12:00: 项目列表页
|
|
- [ ] ProjectCard 组件
|
|
- [ ] ProjectsPage 页面布局
|
|
- [ ] 路由配置 (`/projects`)
|
|
- [ ] 13:00-16:00: 项目详情页
|
|
- [ ] ProjectDetail 组件
|
|
- [ ] Tab 切换 (Overview, Epics, Board, Sprints, Team, Settings)
|
|
- [ ] CreateProjectDialog 组件
|
|
|
|
**交付物**:
|
|
- ✅ 项目列表页 + 详情页
|
|
- ✅ 项目 CRUD 功能
|
|
|
|
---
|
|
|
|
**Day 22 (2025-11-14) - User Management UI**
|
|
|
|
时间: 4-6 小时
|
|
|
|
- [ ] 08:00-09:00: API Client + Hooks
|
|
- [ ] user.api.ts, role.api.ts
|
|
- [ ] useUsers, useInviteUser, useUpdateRole
|
|
- [ ] 09:00-12:00: 用户列表页
|
|
- [ ] UserCard 组件 (或表格视图)
|
|
- [ ] TeamPage 页面布局
|
|
- [ ] InviteUserDialog 组件
|
|
- [ ] 路由配置 (`/projects/{id}/team`)
|
|
- [ ] 13:00-14:00: 权限控制
|
|
- [ ] 只有 Owner/Admin 可以邀请/移除用户
|
|
- [ ] UI 根据用户角色显示/隐藏操作按钮
|
|
|
|
**交付物**:
|
|
- ✅ 用户列表页 + 邀请/移除功能
|
|
- ✅ 权限控制正确
|
|
|
|
---
|
|
|
|
**Day 23-24 (2025-11-15至16) - Sprint Management UI**
|
|
|
|
时间: 8-10 小时 (2天)
|
|
|
|
- [ ] Day 23 08:00-09:00: API Client + Hooks
|
|
- [ ] sprint.api.ts
|
|
- [ ] useSprints, useSprint, useCreateSprint, etc.
|
|
- [ ] Day 23 09:00-12:00: Sprint 列表页
|
|
- [ ] SprintCard 组件
|
|
- [ ] SprintsPage 页面布局
|
|
- [ ] 路由配置 (`/projects/{id}/sprints`)
|
|
- [ ] Day 23 13:00-17:00: Sprint 详情页 (Part 1)
|
|
- [ ] SprintDetail 组件
|
|
- [ ] Sprint Backlog (任务列表)
|
|
- [ ] Add/Remove Task to Sprint
|
|
- [ ] Day 24 08:00-12:00: Sprint 详情页 (Part 2)
|
|
- [ ] Sprint 状态流转 (Start/Complete/Close)
|
|
- [ ] CreateSprintDialog 组件
|
|
- [ ] Day 24 13:00-15:00: Burndown Chart 基础版
|
|
- [ ] recharts 集成
|
|
- [ ] 显示每日剩余任务数
|
|
|
|
**交付物**:
|
|
- ✅ Sprint 列表页 + 详情页
|
|
- ✅ Sprint CRUD + 状态流转
|
|
- ✅ Burndown Chart 基础版
|
|
|
|
---
|
|
|
|
**Day 25 (2025-11-17) - Dashboard 仪表盘**
|
|
|
|
时间: 6-8 小时
|
|
|
|
- [ ] 08:00-10:00: 统计卡片
|
|
- [ ] Total Epics, Stories, Tasks
|
|
- [ ] Completed Tasks, In Progress Tasks
|
|
- [ ] 10:00-12:00: 任务状态分布图
|
|
- [ ] 饼图或柱状图 (recharts)
|
|
- [ ] Backlog, Todo, InProgress, Done 数量
|
|
- [ ] 13:00-14:00: Sprint 进度条
|
|
- [ ] 当前 Sprint 名称, 剩余天数
|
|
- [ ] 完成度百分比
|
|
- [ ] 14:00-16:00: 最近活动流
|
|
- [ ] 最近创建/更新的任务
|
|
- [ ] 最近分配的任务
|
|
|
|
**交付物**:
|
|
- ✅ Dashboard 仪表盘完整功能
|
|
|
|
---
|
|
|
|
#### Week 3: 高级功能 + 测试 (Day 26-30)
|
|
|
|
**Day 26 (2025-11-18) - 高级搜索与过滤**
|
|
|
|
时间: 4-6 小时
|
|
|
|
- [ ] 08:00-10:00: 快速过滤器
|
|
- [ ] My Tasks, Unassigned, Overdue, High Priority
|
|
- [ ] 10:00-12:00: 高级搜索表单
|
|
- [ ] 字段: Title, Assignee, Status, Priority, Type, Date Range
|
|
- [ ] 13:00-14:00: 搜索结果页
|
|
- [ ] 表格或卡片视图
|
|
- [ ] 分页 + 排序
|
|
- [ ] 14:00-15:00: URL Query Params (保存过滤条件)
|
|
|
|
**交付物**:
|
|
- ✅ 高级搜索与过滤功能
|
|
|
|
---
|
|
|
|
**Day 27 (2025-11-19) - UI/UX 优化 + 性能优化**
|
|
|
|
时间: 6-10 小时
|
|
|
|
- [ ] 08:00-10:00: 响应式设计优化
|
|
- [ ] Mobile 适配 (< 768px)
|
|
- [ ] Tablet 适配 (768px - 1024px)
|
|
- [ ] 10:00-11:00: Loading 状态优化
|
|
- [ ] Skeleton Screens
|
|
- [ ] Loading Spinners
|
|
- [ ] 11:00-12:00: Error Handling 优化
|
|
- [ ] Error Messages 优化
|
|
- [ ] Retry 机制
|
|
- [ ] 13:00-15:00: 性能优化
|
|
- [ ] React.memo 应用
|
|
- [ ] useMemo, useCallback
|
|
- [ ] Code Splitting (Lazy loading)
|
|
- [ ] 15:00-16:00: 动画与过渡效果
|
|
- [ ] 页面切换动画
|
|
- [ ] 拖拽动画优化
|
|
|
|
**交付物**:
|
|
- ✅ UI/UX 优化完成
|
|
- ✅ 性能优化完成
|
|
|
|
---
|
|
|
|
**Day 28-29 (2025-11-20至21) - E2E 测试**
|
|
|
|
时间: 8-10 小时 (2天)
|
|
|
|
- [ ] Day 28 08:00-10:00: Cypress/Playwright 配置
|
|
- [ ] 安装依赖
|
|
- [ ] 配置文件
|
|
- [ ] 基础测试用例模板
|
|
- [ ] Day 28 10:00-12:00: 核心流程测试 (Part 1)
|
|
- [ ] 测试场景 1: 用户登录
|
|
- [ ] 测试场景 2: 创建项目
|
|
- [ ] 测试场景 3: 创建 Epic → Story → Task
|
|
- [ ] Day 28 13:00-17:00: 核心流程测试 (Part 2)
|
|
- [ ] 测试场景 4: Kanban Board 拖拽
|
|
- [ ] 测试场景 5: Sprint 创建 + 启动
|
|
- [ ] Day 29 08:00-12:00: 核心流程测试 (Part 3)
|
|
- [ ] 测试场景 6: 用户邀请
|
|
- [ ] 测试场景 7: Dashboard 显示
|
|
- [ ] 测试场景 8: 实时更新 (多用户)
|
|
- [ ] Day 29 13:00-15:00: Bug 修复 (测试发现的问题)
|
|
- [ ] Day 29 15:00-16:00: CI/CD 集成 (可选)
|
|
|
|
**交付物**:
|
|
- ✅ E2E 测试覆盖核心流程 (8+ scenarios)
|
|
- ✅ 测试通过率 ≥ 90%
|
|
|
|
---
|
|
|
|
**Day 30 (2025-11-22) - 文档编写**
|
|
|
|
时间: 2-3 小时
|
|
|
|
- [ ] 08:00-09:00: 前端开发指南
|
|
- [ ] 项目结构说明
|
|
- [ ] 技术栈说明
|
|
- [ ] 开发流程
|
|
- [ ] 09:00-10:00: 组件文档 (可选)
|
|
- [ ] Storybook 配置 (如果时间允许)
|
|
- [ ] 组件使用说明
|
|
- [ ] 10:00-11:00: 部署指南
|
|
- [ ] 环境变量配置
|
|
- [ ] 构建命令
|
|
- [ ] 部署步骤
|
|
|
|
**交付物**:
|
|
- ✅ 前端开发文档完整
|
|
|
|
---
|
|
|
|
#### Week 4: 缓冲 + 集成 (Day 31-35)
|
|
|
|
**Day 31-35 (2025-11-23至27) - Bug 修复 + 集成测试 + M1 验收**
|
|
|
|
时间: 40 小时 (5天)
|
|
|
|
- [ ] Bug 修复 (测试阶段发现的问题)
|
|
- [ ] 返工 (架构调整或需求变更)
|
|
- [ ] 前后端集成测试 (端到端集成验证)
|
|
- [ ] 性能优化 (压测发现的问题)
|
|
- [ ] M1 验收准备 (演示环境搭建, 演示数据准备)
|
|
- [ ] M1 验收评审 (Product Manager 验收)
|
|
|
|
**交付物**:
|
|
- ✅ M1 前端功能 100% 完成
|
|
- ✅ 所有 P0 功能验收通过
|
|
- ✅ Bug 修复完成
|
|
- ✅ M1 Release Notes (前端部分)
|
|
|
|
---
|
|
|
|
### 5.3 并行开发建议
|
|
|
|
为了加快开发速度,建议前后端并行开发:
|
|
|
|
**Week 1 (Day 16-20)**:
|
|
- 后端: ProjectManagement 安全加固 + 前端集成准备 (Day 15-20)
|
|
- 前端: API Clients + Epic/Story/Task UI + Kanban 更新 (Day 16-20)
|
|
- **并行**: 后端完成 API 后,前端立即集成
|
|
|
|
**Week 2 (Day 21-25)**:
|
|
- 后端: Audit Log MVP Phase 1-2 (Day 23-30, 不阻塞前端)
|
|
- 前端: Project/User/Sprint UI + Dashboard (Day 21-25)
|
|
- **并行**: Sprint UI 可以先基于 Mock 数据开发,后端 Sprint API 完成后再集成
|
|
|
|
**Week 3-4 (Day 26-35)**:
|
|
- 后端: Sprint Management + Audit Log 完成 (Day 31-34)
|
|
- 前端: 高级功能 + 测试 + Bug 修复 (Day 26-35)
|
|
- **并行**: 前端测试期间,后端继续完成剩余功能
|
|
|
|
---
|
|
|
|
## 六、风险识别与应对措施
|
|
|
|
### 6.1 技术风险
|
|
|
|
#### 风险 1: 后端 API 延期导致前端阻塞 (HIGH)
|
|
|
|
**风险描述**:
|
|
- 前端开发严重依赖后端 API 完成
|
|
- 如果后端 ProjectManagement API 延期 (Day 15-17),前端 Phase 1 无法启动
|
|
- 如果后端 Sprint API 延期 (Day 31-34),前端 Sprint UI 无法完成
|
|
|
|
**影响**:
|
|
- M1 前端完成时间延后
|
|
- M1 整体时间线延期
|
|
|
|
**缓解措施**:
|
|
1. **Mock 数据开发**: 前端先基于 Mock 数据开发 UI,后端 API 完成后再集成
|
|
- 使用 MSW (Mock Service Worker) 或 json-server
|
|
- 优势: 前后端完全解耦,前端不受后端影响
|
|
2. **API Contract First**: 后端先定义 API 接口文档 (OpenAPI),前端基于接口文档开发
|
|
3. **并行开发**: Sprint UI 可以先开发,后端 Sprint API 延后也不影响前端进度
|
|
4. **每日 Standup**: 前后端每日同步进度,及时发现阻塞
|
|
|
|
**责任人**: Frontend Lead + Backend Lead
|
|
|
|
---
|
|
|
|
#### 风险 2: SignalR 实时更新集成复杂度 (MEDIUM)
|
|
|
|
**风险描述**:
|
|
- SignalR 实时更新涉及多个事件监听和 React Query Invalidation
|
|
- 可能存在事件丢失、重复触发、性能问题等
|
|
|
|
**影响**:
|
|
- 多用户协作体验不佳
|
|
- 可能需要额外调试时间
|
|
|
|
**缓解措施**:
|
|
1. **分阶段集成**: 先实现基础实时更新 (TaskStatusChanged),再逐步增加其他事件
|
|
2. **降级方案**: 如果实时更新有问题,可以降级为定时轮询 (polling)
|
|
3. **充分测试**: 多用户测试 (2-4 users),验证实时更新正确性
|
|
4. **性能监控**: 监控 SignalR 连接数和消息延迟
|
|
|
|
**责任人**: Frontend Developer
|
|
|
|
---
|
|
|
|
#### 风险 3: React Query 缓存策略不当 (MEDIUM)
|
|
|
|
**风险描述**:
|
|
- React Query 缓存配置不当可能导致数据不一致 (stale data)
|
|
- Invalidation 策略不合理可能导致过多 API 调用
|
|
|
|
**影响**:
|
|
- 用户看到过期数据
|
|
- API 调用频繁,性能下降
|
|
|
|
**缓解措施**:
|
|
1. **合理的 staleTime**: 设置合理的缓存时间 (5-10分钟)
|
|
2. **精确的 Invalidation**: 只 invalidate 受影响的 queryKey,避免全局 invalidate
|
|
3. **Optimistic Updates**: 使用乐观更新,提升用户体验
|
|
4. **充分测试**: 测试数据一致性场景
|
|
|
|
**责任人**: Frontend Developer
|
|
|
|
---
|
|
|
|
### 6.2 进度风险
|
|
|
|
#### 风险 4: 工时估算不准确,实际开发时间超出预期 (HIGH)
|
|
|
|
**风险描述**:
|
|
- 当前工时估算为 18-22 天,但实际开发可能遇到意外问题
|
|
- 可能的延期因素: Bug 修复、架构调整、需求变更、测试不通过
|
|
|
|
**影响**:
|
|
- M1 前端完成时间延后至 12月初 (比目标晚 1-2 周)
|
|
- M1 整体时间线延期
|
|
|
|
**缓解措施**:
|
|
1. **预留缓冲时间**: Week 4 (Day 31-35) 预留 5天 缓冲时间
|
|
2. **每日进度跟踪**: 每日 Standup,及时发现进度偏差
|
|
3. **优先级调整**: 如果进度滞后,P1/P2 功能延后到 M1.5 或 M2
|
|
4. **加班或增加人手**: 关键时刻考虑加班或临时增加前端开发人员
|
|
|
|
**责任人**: Product Manager + Frontend Lead
|
|
|
|
---
|
|
|
|
#### 风险 5: 前端开发人员不足 (MEDIUM)
|
|
|
|
**风险描述**:
|
|
- 当前假设 1名前端开发人员,工作量 18-22 天
|
|
- 如果前端人员请假、生病或其他项目占用时间,进度受影响
|
|
|
|
**影响**:
|
|
- M1 前端完成时间延后
|
|
|
|
**缓解措施**:
|
|
1. **增加前端人手**: 考虑增加 1名前端开发人员,减少到 10-12 天完成
|
|
2. **任务并行**: 2名前端开发人员并行开发不同 Phase
|
|
3. **外包或兼职**: 考虑外包部分 P1/P2 功能 (如 Dashboard, 高级搜索)
|
|
|
|
**责任人**: Product Manager
|
|
|
|
---
|
|
|
|
### 6.3 质量风险
|
|
|
|
#### 风险 6: 测试覆盖不足,上线后 Bug 较多 (MEDIUM)
|
|
|
|
**风险描述**:
|
|
- E2E 测试覆盖有限 (8+ scenarios),可能遗漏边界情况
|
|
- 单元测试可选,代码质量保证不足
|
|
|
|
**影响**:
|
|
- 上线后用户发现 Bug,影响用户体验
|
|
- 需要紧急修复,影响 M2 开发
|
|
|
|
**缓解措施**:
|
|
1. **增加测试场景**: E2E 测试覆盖更多边界情况 (10-15 scenarios)
|
|
2. **手动测试**: QA 进行全面手动测试
|
|
3. **内部试用**: 团队内部先使用 1-2 周,发现问题
|
|
4. **快速迭代**: M1 上线后快速修复 Bug,发布 M1.1, M1.2 补丁版本
|
|
|
|
**责任人**: QA Lead + Frontend Developer
|
|
|
|
---
|
|
|
|
#### 风险 7: 响应式设计不佳,Mobile 体验差 (LOW)
|
|
|
|
**风险描述**:
|
|
- M1 阶段主要关注桌面端,Mobile 适配可能不完善
|
|
|
|
**影响**:
|
|
- Mobile 用户体验差
|
|
- 需要额外优化时间
|
|
|
|
**缓解措施**:
|
|
1. **优先桌面端**: M1 先完成桌面端,Mobile 优化延后到 M1.5 或 M2
|
|
2. **响应式框架**: 使用 Ant Design 响应式组件,减少适配工作
|
|
3. **基础适配**: M1 至少保证 Mobile 可用 (不要求完美)
|
|
|
|
**责任人**: Frontend Developer
|
|
|
|
---
|
|
|
|
### 6.4 需求风险
|
|
|
|
#### 风险 8: 需求变更或范围蔓延 (MEDIUM)
|
|
|
|
**风险描述**:
|
|
- 开发过程中可能出现新需求或需求变更
|
|
- Scope 蔓延可能导致工作量增加
|
|
|
|
**影响**:
|
|
- M1 完成时间延后
|
|
- 团队士气下降
|
|
|
|
**缓解措施**:
|
|
1. **严格控制 Scope**: M1 只做 P0 功能,P1/P2 延后到 M2
|
|
2. **变更评审**: 任何需求变更需要 Product Manager 评审,评估工作量和优先级
|
|
3. **积压管理**: 新需求加入 Backlog,不影响 M1 时间线
|
|
4. **MVP 思维**: M1 是 MVP,功能可以简化,后续迭代优化
|
|
|
|
**责任人**: Product Manager
|
|
|
|
---
|
|
|
|
## 七、验收标准
|
|
|
|
### 7.1 功能完整性验收标准
|
|
|
|
| 功能模块 | 验收标准 | 优先级 |
|
|
|---------|---------|--------|
|
|
| **Epic/Story/Task 管理** | 用户可以创建/编辑/删除 Epic/Story/Task,三层层级关系正确显示 | P0 |
|
|
| **Kanban Board** | Kanban Board 正常显示 WorkTasks,拖拽更新状态正常,显示层级和工时信息 | P0 |
|
|
| **Project Management** | 用户可以创建/编辑/删除项目,项目列表和详情页正常显示 | P0 |
|
|
| **User Management** | 用户可以邀请/移除成员,权限控制正确 | P0 |
|
|
| **Sprint Management** | 用户可以创建/启动/完成 Sprint,Sprint Backlog 正常显示,Burndown Chart 基础版显示 | P0 |
|
|
| **SignalR 实时更新** | 多用户协作时实时更新正常,Toast 通知显示 | P0 |
|
|
| **Dashboard** | Dashboard 正确显示统计数据和图表 | P1 |
|
|
| **高级搜索** | 快速过滤器和高级搜索正常工作 | P1 |
|
|
| **响应式设计** | 桌面端 (1920x1080, 1366x768) 显示正常,Mobile 基础可用 | P1 |
|
|
|
|
---
|
|
|
|
### 7.2 质量验收标准
|
|
|
|
| 质量指标 | 目标值 | 验收方法 |
|
|
|---------|--------|---------|
|
|
| **E2E 测试覆盖** | ≥ 8 scenarios | Cypress/Playwright 测试报告 |
|
|
| **E2E 测试通过率** | ≥ 90% | 测试报告 |
|
|
| **页面加载时间** | < 2s (初次加载), < 500ms (后续导航) | Chrome DevTools Performance |
|
|
| **API 调用成功率** | ≥ 99% | 手动测试 + 日志监控 |
|
|
| **UI 响应时间** | < 100ms (用户操作反馈) | 手动测试 |
|
|
| **浏览器兼容性** | Chrome 90+, Firefox 88+, Safari 14+, Edge 90+ | 手动测试 |
|
|
| **代码规范检查** | 0 ESLint errors | ESLint 报告 |
|
|
| **TypeScript 类型检查** | 0 type errors | tsc --noEmit 报告 |
|
|
| **Build 成功** | 无 build errors | npm run build 成功 |
|
|
|
|
---
|
|
|
|
### 7.3 用户体验验收标准
|
|
|
|
| UX 指标 | 验收标准 | 验收方法 |
|
|
|---------|---------|---------|
|
|
| **易用性** | 新用户 5分钟内可以创建项目并添加任务 | 用户测试 |
|
|
| **一致性** | UI 风格统一,遵循 Ant Design 设计规范 | 设计审查 |
|
|
| **可访问性** | 基础可访问性 (Keyboard Navigation, Focus Management) | 手动测试 |
|
|
| **错误提示** | 所有错误都有清晰的提示信息 | 手动测试 |
|
|
| **Loading 状态** | 所有异步操作都有 Loading 指示器 | 手动测试 |
|
|
| **实时反馈** | 用户操作后立即有视觉反馈 (Toast, Loading, etc.) | 手动测试 |
|
|
|
|
---
|
|
|
|
## 八、成功标准与关键指标
|
|
|
|
### 8.1 M1 前端完成标准
|
|
|
|
**M1 前端 100% 完成** 需要满足以下条件:
|
|
|
|
1. ✅ 所有 P0 功能开发完成 (Epic/Story/Task, Kanban, Project, User, Sprint, SignalR)
|
|
2. ✅ E2E 测试覆盖核心流程 (8+ scenarios),通过率 ≥ 90%
|
|
3. ✅ 前后端集成测试通过 (所有 API 调用成功)
|
|
4. ✅ 质量指标达标 (页面加载 < 2s, UI 响应 < 100ms, 0 ESLint errors)
|
|
5. ✅ 验收测试通过 (Product Manager 验收)
|
|
6. ✅ 文档完整 (前端开发指南, 组件文档, 部署指南)
|
|
7. ✅ 演示环境部署成功,可以对外演示
|
|
|
|
---
|
|
|
|
### 8.2 关键指标 (KPIs)
|
|
|
|
| 指标项 | 目标值 | 当前值 | 状态 |
|
|
|-------|--------|--------|------|
|
|
| **M1 前端完成度** | 100% | 15-20% | 🔄 进行中 |
|
|
| **前端代码规模** | 5,000+ 行 | 1,134 行 | 🔄 进行中 |
|
|
| **前端文件数** | 80+ 文件 | 15 文件 | 🔄 进行中 |
|
|
| **React 组件数** | 50+ 组件 | ~10 组件 | 🔄 进行中 |
|
|
| **API Clients** | 7 clients | 1 client (Issue API) | 🔄 进行中 |
|
|
| **页面数** | 15+ 页面 | ~5 页面 | 🔄 进行中 |
|
|
| **E2E 测试覆盖** | ≥ 8 scenarios | 0 | ⏳ 待开始 |
|
|
| **E2E 测试通过率** | ≥ 90% | N/A | ⏳ 待开始 |
|
|
| **页面加载时间** | < 2s | N/A | ⏳ 待测试 |
|
|
| **UI 响应时间** | < 100ms | N/A | ⏳ 待测试 |
|
|
| **浏览器兼容性** | 4+ 浏览器 | Chrome (推测) | ⏳ 待测试 |
|
|
|
|
---
|
|
|
|
## 九、资源需求
|
|
|
|
### 9.1 人力资源需求
|
|
|
|
| 角色 | 工作量 | 人数 | 备注 |
|
|
|------|--------|------|------|
|
|
| **Frontend Developer (核心)** | 18-22 天 | 1 人 | 全职开发 |
|
|
| **Frontend Developer (支持,可选)** | 10-12 天 | 1 人 | 并行开发,加速交付 |
|
|
| **UI/UX Designer (支持)** | 2-3 天 | 0.2 人 | 设计审查,UI 优化建议 |
|
|
| **QA Engineer** | 3-5 天 | 0.5 人 | E2E 测试,手动测试 |
|
|
| **Backend Developer (协作)** | N/A | N/A | 提供 API,协助前后端联调 |
|
|
|
|
**推荐配置**:
|
|
- **选项 1 (单人)**: 1 名前端开发人员,22 天完成 (风险较高)
|
|
- **选项 2 (双人,推荐)**: 2 名前端开发人员并行开发,12 天完成 (更快,风险更低)
|
|
|
|
---
|
|
|
|
### 9.2 技术资源需求
|
|
|
|
| 资源 | 需求 | 备注 |
|
|
|------|------|------|
|
|
| **开发环境** | Node.js 18+, npm/yarn, VS Code | 标准前端开发环境 |
|
|
| **测试环境** | 后端 API 可访问,SignalR 可连接 | 依赖后端环境 |
|
|
| **CI/CD 环境** | GitHub Actions / GitLab CI | 自动化测试和部署 |
|
|
| **演示环境** | Vercel / Netlify / Nginx | 部署前端应用 |
|
|
| **设计资源** | Figma / Sketch (可选) | UI 设计稿 (如果有) |
|
|
|
|
---
|
|
|
|
## 十、总结与建议
|
|
|
|
### 10.1 总结
|
|
|
|
ColaFlow 前端开发目前处于早期阶段,仅完成了 Kanban Board 看板功能 (15个文件,1134行代码)。基于 Day 14-15 后端架构决策 (采用 ProjectManagement Module),前端需要重新开发 Epic/Story/Task 三层层级管理界面,并与后端 ProjectManagement API 集成。
|
|
|
|
**M1 前端待开发功能**:
|
|
- Epic/Story/Task 三层层级管理 UI (P0)
|
|
- Kanban Board 更新 - 支持 ProjectManagement (P0)
|
|
- Project Management UI (P0)
|
|
- User Management UI (P0)
|
|
- Sprint Management UI (P0)
|
|
- SignalR 实时更新集成 (P0)
|
|
- Dashboard 仪表盘 (P1)
|
|
- 高级搜索与过滤 (P1)
|
|
|
|
**预计剩余工作量**: 18-22 天 (单人开发) 或 10-12 天 (双人并行开发)
|
|
|
|
**目标完成日期**: 2025-11-27 (与后端 M1 完成日期对齐)
|
|
|
|
---
|
|
|
|
### 10.2 关键建议
|
|
|
|
#### 建议 1: 增加前端开发人员,加速交付 (HIGH PRIORITY)
|
|
|
|
**理由**:
|
|
- 当前工作量 18-22 天,单人开发风险较高
|
|
- 增加 1 名前端开发人员,可以减少到 10-12 天,降低延期风险
|
|
|
|
**建议**:
|
|
- **方案 1**: 招聘 1 名全职前端开发人员
|
|
- **方案 2**: 临时外包或兼职 1 名前端开发人员
|
|
- **方案 3**: 从其他项目借调 1 名前端开发人员 (临时支援)
|
|
|
|
---
|
|
|
|
#### 建议 2: 前端先基于 Mock 数据开发,降低对后端的依赖 (MEDIUM PRIORITY)
|
|
|
|
**理由**:
|
|
- 后端 API 开发进度不确定,可能延期
|
|
- 前端基于 Mock 数据开发,可以完全解耦,不受后端影响
|
|
|
|
**建议**:
|
|
- 使用 MSW (Mock Service Worker) 或 json-server
|
|
- 后端先定义 API 接口文档 (OpenAPI),前端基于接口开发
|
|
- 后端 API 完成后再切换到真实 API
|
|
|
|
---
|
|
|
|
#### 建议 3: 优先完成 P0 功能,P1/P2 延后到 M1.5 或 M2 (HIGH PRIORITY)
|
|
|
|
**理由**:
|
|
- M1 时间线紧张,需要严格控制 Scope
|
|
- Dashboard 和高级搜索是 P1 功能,可以延后
|
|
|
|
**建议**:
|
|
- M1 只做 P0 功能 (Epic/Story/Task, Kanban, Project, User, Sprint, SignalR)
|
|
- Dashboard 和高级搜索延后到 M1.5 (12月初发布)
|
|
- 任务详情页、Gantt Chart、通知系统延后到 M2
|
|
|
|
---
|
|
|
|
#### 建议 4: 增加 E2E 测试覆盖,提高质量保证 (MEDIUM PRIORITY)
|
|
|
|
**理由**:
|
|
- 前端功能复杂,手动测试覆盖不全
|
|
- E2E 测试可以提高质量,减少上线后 Bug
|
|
|
|
**建议**:
|
|
- E2E 测试覆盖核心流程 (10-15 scenarios)
|
|
- 集成到 CI/CD,每次提交自动运行测试
|
|
- QA 进行全面手动测试,补充 E2E 测试未覆盖的边界情况
|
|
|
|
---
|
|
|
|
#### 建议 5: 每日 Standup + 每周 Review,确保进度可控 (HIGH PRIORITY)
|
|
|
|
**理由**:
|
|
- 前端开发周期 4 周,需要严格的进度管理
|
|
- 每日 Standup 可以及时发现阻塞和风险
|
|
|
|
**建议**:
|
|
- 每日 Standup (15分钟): 昨天完成、今天计划、遇到的问题
|
|
- 每周 Review (1小时): Demo 本周完成的功能,Product Manager 验收
|
|
- 使用看板 (Kanban Board) 跟踪任务进度
|
|
|
|
---
|
|
|
|
#### 建议 6: 预留缓冲时间,应对意外情况 (HIGH PRIORITY)
|
|
|
|
**理由**:
|
|
- 工时估算可能不准确,实际开发可能遇到意外问题
|
|
- 缓冲时间可以吸收风险,避免 M1 延期
|
|
|
|
**建议**:
|
|
- Week 4 (Day 31-35) 预留 5 天缓冲时间
|
|
- 如果进度超前,可以提前完成 P1 功能或进行优化
|
|
- 如果进度滞后,缓冲时间用于 Bug 修复和返工
|
|
|
|
---
|
|
|
|
## 十一、附录
|
|
|
|
### 11.1 参考文档
|
|
|
|
- `c:\Users\yaoji\git\ColaCoder\product-master\product.md` - 项目计划书
|
|
- `c:\Users\yaoji\git\ColaCoder\product-master\M1_REMAINING_TASKS.md` - M1 剩余任务清单
|
|
- `c:\Users\yaoji\git\ColaCoder\product-master\BACKEND_PROGRESS_REPORT.md` - 后端进度报告
|
|
|
|
---
|
|
|
|
### 11.2 联系人
|
|
|
|
- **Product Manager**: Product Manager Agent
|
|
- **Tech Lead**: Architect Agent
|
|
- **Backend Lead**: Backend Agent
|
|
- **Frontend Lead**: Frontend Agent (待指定)
|
|
- **QA Lead**: QA Agent
|
|
- **Main Coordinator**: Main Coordinator Agent
|
|
|
|
---
|
|
|
|
**报告生成时间**: 2025-11-05 (Day 15)
|
|
**下次更新**: 2025-11-12 (Day 22, Week 1 完成)
|
|
|
|
---
|
|
|
|
**END OF DOCUMENT**
|