ServicePilot/docs/05_工单管理模块PRD.md

工单管理模块 PRD

1. 模块目标

工单管理模块是 ServicePilot 的核心业务模块，负责客户问题从提交、分派、处理、确认到关闭的完整生命周期管理。该模块需要体现明确的业务状态流转、角色协作和过程留痕。

2. 用户角色

1. 企业客户：创建工单、补充信息、确认解决、评价。
2. 客服专员：查看新工单、分派工单、回复客户。
3. 技术支持：处理被分派工单、提交解决方案。
4. 管理员：查看全部工单和操作记录。

3. 工单状态

状态	说明
待分派	客户已提交，客服尚未分派
处理中	已分派给技术支持
待客户确认	技术支持已提交解决方案
已解决	客户确认解决
已关闭	工单归档
已取消	客户或管理员取消
已超时	超过 SLA 时限

状态流转：

待分派 -> 处理中 -> 待客户确认 -> 已解决 -> 已关闭
待分派 -> 已取消
处理中 -> 待客户确认
处理中 -> 已取消
待客户确认 -> 处理中
任意未关闭状态 -> 已超时

4. 页面清单

4.1 工单列表页

页面路径：/tickets

页面目标：展示当前用户可见的工单列表。

列表字段：

字段	说明
工单编号	系统生成
标题	工单标题
企业	所属客户企业
分类	软件问题/账号问题/数据问题/其他
优先级	低/中/高/紧急
状态	当前工单状态
负责人	当前处理人
SLA 剩余时间	距离超时的剩余时间
创建时间	提交时间

筛选条件：

1. 关键词。
2. 工单状态。
3. 优先级。
4. 工单分类。
5. 负责人。
6. 创建时间范围。
7. 是否超时。

操作按钮：

按钮	行为
创建工单	跳转创建工单页
查看详情	进入详情页
分派	客服分派工单
处理	技术支持处理工单
取消	客户取消未处理工单

4.2 创建工单页

页面路径：/tickets/create

页面目标：企业客户提交新的问题工单。

表单字段：

字段	类型	必填	规则
工单标题	输入框	是	5 到 80 个字符
问题分类	下拉框	是	软件问题/账号问题/数据问题/其他
优先级	单选	是	低/中/高/紧急
问题描述	文本域	是	10 到 1000 字
影响范围	下拉框	是	单个用户/部门/全公司
附件	文件上传	否	jpg/png/pdf/docx，小于 10MB

页面按钮：

按钮	行为
提交工单	创建工单
保存草稿	暂存本地或数据库
取消	返回列表页

4.3 工单详情页

页面路径：/tickets/:id

页面目标：展示工单完整信息、沟通记录、附件、状态流转和操作区。

页面区域：

1. 工单基础信息。
2. SLA 状态卡片。
3. 状态流转时间线。
4. 沟通记录。
5. 附件列表。
6. 解决方案。
7. 操作按钮区。

页面操作：

操作	角色	行为
分派工单	客服	选择技术支持
添加回复	客户/客服/技术支持	新增沟通记录
上传附件	客户/客服/技术支持	新增附件
提交解决方案	技术支持	状态变为待客户确认
退回处理	客户	状态变回处理中
确认解决	客户	状态变为已解决
关闭工单	管理员/客服	状态变为已关闭

前端技术实现要求：

1. 页面使用 Angular 组件实现，建议组件名为 TicketDetailComponent。
2. 工单基础信息、SLA 卡片、沟通记录和附件列表拆分为 Angular 子组件。
3. 状态流转时间线必须使用 GSAP 实现入场动画和状态节点高亮动画。
4. 点击“处理”“分派”“确认解决”等操作后，状态时间线需要通过 GSAP 播放一次节点更新动画。
5. 附件图片预览区域调用 React 图片预览组件，由 Angular Wrapper 挂载。

4.4 我的待办页

页面路径：/tickets/todo

页面目标：展示当前用户需要处理的工单。

待办规则：

1. 客服专员看到待分派工单。
2. 技术支持看到分派给自己的处理中工单。
3. 企业客户看到待确认工单。
4. 管理员看到超时未处理工单。

4.5 工单处理页

页面路径：/tickets/:id/process

页面目标：技术支持填写处理结果并提交解决方案。

表单字段：

字段	类型	必填	规则
问题原因	文本域	是	不少于 10 字
解决方案	文本域	是	不少于 10 字
引用知识库	选择器	否	可选择多篇文章
处理附件	文件上传	否	jpg/png/pdf/docx

前端技术实现要求：

1. 页面使用 Angular Reactive Forms 编写表单校验。
2. 引用知识库选择器使用 Angular 下拉搜索组件实现。
3. 处理附件上传复用附件管理模块的 Angular 上传组件。
4. 提交成功后返回工单详情页，并触发工单详情页状态时间线 GSAP 动画。

5. 接口清单

方法	路径	说明
POST	/api/tickets	创建工单
GET	/api/tickets	工单列表
GET	/api/tickets/:id	工单详情
PUT	/api/tickets/:id	编辑工单
POST	/api/tickets/:id/assign	分派工单
POST	/api/tickets/:id/comments	新增沟通记录
POST	/api/tickets/:id/attachments	上传附件
POST	/api/tickets/:id/solution	提交解决方案
PATCH	/api/tickets/:id/status	更新状态
GET	/api/tickets/todo	我的待办
GET	/api/tickets/:id/logs	状态流转记录

6. 权限规则

功能	企业客户	客服专员	技术支持	管理员
创建工单	是	否	否	是
查看工单	自己企业	全部	分派给自己	全部
分派工单	否	是	否	是
处理工单	否	否	分派给自己	是
确认解决	工单创建人	否	否	是
关闭工单	否	是	否	是
查看状态日志	相关用户	是	相关工单	是

7. 异常场景

1. 工单标题为空。
2. 描述字数不足。
3. 企业已停用时创建工单失败。
4. 非客服分派工单。
5. 技术支持处理非自己工单。
6. 已关闭工单再次处理。
7. 非法状态流转。
8. 附件上传失败。
9. 工单不存在。

8. 验收标准

1. 客户可以成功创建工单。
2. 客服可以分派待分派工单。
3. 技术支持可以提交解决方案。
4. 客户可以确认解决或退回处理。
5. 工单详情展示完整状态时间线。
6. 不同角色只能查看权限内工单。
7. 非法状态流转被系统拒绝。
8. 工单详情页状态时间线必须存在 GSAP 动画效果。
9. 工单详情页图片附件必须可以通过 React 图片预览组件打开。
10. 前端页面必须使用 Angular Router、Angular HTTP Client 和 Reactive Forms 实现。

9. 测试关注点

1. 工单完整生命周期。
2. 工单状态流转合法性。
3. 不同角色的数据权限。
4. 附件上传。
5. SLA 剩余时间展示。
6. 列表筛选、搜索、分页。
7. 并发创建工单。