# 审批中心 - 产品需求文档（PRD）

> **文档版本**: v1.0  
> **创建日期**: 2026-01-02  
> **最后更新**: 2026-01-02  
> **作者**: FFOA 开发团队  
> **状态**: ✅ Approved

---

## 📋 目录

- [1. 产品概述](#1-产品概述)
- [2. 用户角色与场景](#2-用户角色与场景)
- [3. 功能需求](#3-功能需求)
- [4. 非功能需求](#4-非功能需求)
- [5. UI/UX 设计原则](#5-uiux-设计原则)
- [6. 验收标准](#6-验收标准)

---

## 1. 产品概述

### 1.1 产品定位

审批中心是 FFOA 平台的**统一审批用户界面**，为所有用户提供：
- 审批提交入口
- 待办任务处理
- 流程追踪和历史查看
- 管理员审批管理

### 1.2 核心价值

| 用户群体 | 核心价值 |
|---------|---------|
| **普通员工** | 快速提交申请、实时追踪审批进度 |
| **审批人** | 高效处理待办、一键通过/拒绝 |
| **管理员** | 强制干预、流程管理、异常处理 |
| **企业** | 统一审批入口、规范审批流程、提升协作效率 |

### 1.3 产品边界

**本模块负责**:
- ✅ 前端用户界面和交互
- ✅ 审批操作的用户体验
- ✅ 列表展示和筛选
- ✅ 表单数据渲染

**不负责**:
- ❌ 审批引擎核心逻辑（由 Approval Engine 负责）
- ❌ 工作流编排（由 Temporal 负责）
- ❌ 表单设计和管理（由 Form Management 负责）
- ❌ 消息通知（由 Notification Engine 负责）

---

## 2. 用户角色与场景

### 2.1 角色定义

| 角色 | 说明 | 典型用户 |
|-----|------|---------|
| **申请人** | 发起审批申请的用户 | 所有员工 |
| **审批人** | 负责审批任务的用户 | 部门经理、HR、财务 |
| **抄送人** | 接收审批信息的用户 | 相关干系人 |
| **管理员** | 系统管理员，可强制干预 | IT Admin、HR Manager |

### 2.2 用户场景

#### 场景 1: 员工提交加班申请

**用户**: 普通员工 张三  
**目标**: 申请本周五加班 4 小时

**操作流程**:
1. 进入审批中心
2. 点击"提交请求"
3. 选择"加班申请"表单
4. 填写加班日期、时长、原因
5. 提交审批
6. 在"我提交的"查看审批进度

**预期结果**:
- ✅ 表单提交成功
- ✅ 列表中显示"审批中"状态
- ✅ 收到提交成功的 toast 通知

#### 场景 2: 经理审批加班申请

**用户**: 部门经理 李经理  
**目标**: 处理张三的加班申请

**操作流程**:
1. 进入审批中心
2. 点击"待我审批"（显示 badge 数量 `1`）
3. 点击张三的加班申请
4. 查看表单数据和审批历史
5. 填写审批意见"同意"
6. 点击"通过"按钮

**预期结果**:
- ✅ 审批操作成功
- ✅ 待办列表数量减少
- ✅ 流程流转到下一节点
- ✅ 张三收到审批通知

#### 场景 3: 员工撤回申请

**用户**: 普通员工 张三  
**目标**: 发现加班时间填错，需要撤回

**操作流程**:
1. 进入审批中心
2. 点击"我提交的"
3. 选择刚提交的加班申请
4. 点击"撤回"按钮
5. 填写撤回原因"时间填错"
6. 确认撤回

**预期结果**:
- ✅ 撤回成功
- ✅ 流程状态变为"已撤回"
- ✅ 审批人的待办列表中移除

#### 场景 4: 管理员强制终止异常流程

**用户**: IT 管理员 itadmin  
**目标**: 强制终止一个审批人离职的流程

**操作流程**:
1. 进入审批中心
2. 点击"管理员处理"
3. 找到卡住的审批流程
4. 选择"强制终止"
5. 填写终止原因"审批人离职"
6. 确认操作

**预期结果**:
- ✅ 流程强制终止
- ✅ 状态变更为"已终止"
- ✅ 记录审计日志

#### 场景 5: 管理员按表单查看运行数据并导出

**用户**: 审批管理员  
**目标**: 按表单查看提交/审批数据并导出明细

**操作流程**:
1. 进入审批中心
2. 切换到"管理员数据中心"
3. 选择表单与时间范围
4. 查看统计指标与趋势图
5. 打开明细表并导出

**预期结果**:
- ✅ 支持按表单/时间筛选
- ✅ 展示关键指标与趋势
- ✅ 明细可导出

---

## 3. 功能需求

### 3.1 提交请求（Submit Request）

#### 3.1.1 表单列表展示

**需求**:
- 展示所有可用的审批表单模板
- 支持按业务类型分类（HR、财务、采购等）
- 支持搜索表单名称

**UI 元素**:
- 表单卡片（图标 + 名称 + 描述）
- 搜索框
- 分类筛选器

#### 3.1.2 表单提交

**需求**:
- 点击表单后跳转到表单填写页面
- 路由: `/approval-center/submit/{formKey}`
- 表单填写完成后提交审批
- 提交后返回"我提交的"列表

**验收标准**:
- ✅ 表单可正常填写和提交
- ✅ 提交后能在列表中看到新记录
- ✅ 显示 toast 提示"提交成功"

---

### 3.2 待我审批（Pending Tasks）

#### 3.2.1 待办列表

**需求**:
- 展示所有分配给我的待审批任务
- 显示任务标题、提交人、提交时间、当前节点
- 选中项高亮（蓝色背景 + 左边框）
- Tab 标签显示待办数量 badge

**UI 元素**:
- 列表项（400px 宽度）
- 提交人头像
- 时间戳
- 当前节点 badge

#### 3.2.2 审批详情

**需求**:
- 右侧详情面板展示完整表单数据
- 使用 `FormRenderer` 渲染表单
- 展示审批历史时间线（`ApprovalTimeline`）
- 底部操作区：审批意见输入框 + 通过/拒绝按钮

**操作**:
- **通过**: 填写意见（可选），点击"通过"
- **拒绝**: 填写意见（必填），点击"拒绝"
- **转交**: 选择目标用户，填写原因，转交任务
- **加签**: 添加额外审批人（规划中）

**验收标准**:
- ✅ 表单数据正确渲染
- ✅ 审批历史完整展示
- ✅ 拒绝时强制填写意见
- ✅ 操作成功后列表刷新

---

### 3.3 我提交的（My Initiated）

#### 3.3.1 发起流程列表

**需求**:
- 展示我发起的所有审批流程
- 显示流程标题、状态、当前节点、提交时间
- 支持筛选状态：全部/审批中/已完成/已拒绝/已撤回

**状态映射** (基于新 `InstanceStatus` 枚举):
- `RUNNING` → "审批中" (蓝色)
- `SUSPENDED` → "已暂停" (灰色)
- `APPROVED` → "已通过" (绿色)
- `REJECTED` → "已拒绝" (红色)
- `WITHDRAWN` → "已撤回" (灰色)
- `TERMINATED` → "已终止" (红色)
- `FAILED` → "失败" (红色)

#### 3.3.2 撤回功能

**需求**:
- 仅当状态为 `RUNNING` 时显示"撤回"按钮
- 点击后弹出确认对话框
- 必须填写撤回原因
- 撤回后状态变更为 `WITHDRAWN`

**验收标准**:
- ✅ 只有审批中的流程可撤回
- ✅ 撤回原因必填
- ✅ 撤回后流程立即终止
- ✅ 审批人待办列表中移除

---

### 3.4 我审批的（My Processed）

#### 3.4.1 已处理列表

**需求**:
- 展示我已经审批过的任务
- 显示我的审批操作（通过/拒绝/转交）
- 显示审批时间和意见

**列表内容**:
- 任务标题
- 我的操作（通过/拒绝/转交）
- 审批意见
- 审批时间

#### 3.4.2 只读查看

**需求**:
- 点击已处理的任务，查看完整表单和审批历史
- 所有操作按钮不可见（只读模式）

---

### 3.5 抄送我的（CC to Me）

#### 3.5.1 抄送列表

**需求**:
- 展示抄送给我的审批流程
- 显示流程标题、发起人、当前状态
- 支持查看详情，但不可操作

#### 3.5.2 只读查看

**需求**:
- 可查看表单数据和审批历史
- 不显示任何操作按钮

---

### 3.6 管理员处理（Admin Operations）

#### 3.6.1 管理员列表

**需求**:
- 仅 `Administrator` 角色可见此 Tab
- 展示所有审批流程（不限于自己相关）
- 显示流程标题、发起人、状态、当前节点

#### 3.6.2 管理员操作

**需求**:
- **强制终止**: 立即终止流程，状态变更为 `TERMINATED`
- **代审批通过**: 代替当前审批人通过任务
- **代审批拒绝**: 代替当前审批人拒绝任务
- **重新分配**: 将任务重新分配给其他审批人

**操作权限**:
- 需要 `approval:admin` 权限
- 所有操作记录审计日志

**验收标准**:
- ✅ 管理员操作成功
- ✅ 流程状态正确更新
- ✅ 审计日志记录完整
- ✅ 操作后列表刷新

---

### 3.7 管理员数据中心（Admin Analytics）

#### 3.7.1 统计与筛选

**需求**:
- 管理员可按表单查看运行态数据（提交/审批）
- 支持筛选：表单、时间范围、状态、发起人（用户选择器）、组织/部门
- 支持区分是否需要审批（审批型/非审批型）

**核心指标**:
- 总提交数
- 通过率/拒绝率
- 平均处理时长
- 审批中积压数

#### 3.7.2 趋势与分布

**需求**:
- 提交趋势（按天/周）
- 通过/拒绝趋势
- 按表单分布

#### 3.7.3 明细与导出

**需求**:
- 展示明细列表（可跳转详情）
- 支持导出当前筛选结果（CSV/XLSX）
- 导出保留期可配置（7-365 天）

**验收标准**:
- ✅ 筛选条件生效且与导出一致
- ✅ 指标与趋势正确渲染
- ✅ 明细可分页并跳转详情

---

## 4. 非功能需求

### 4.1 性能要求

| 指标 | 目标 | 说明 |
|-----|------|------|
| 列表加载时间 | < 500ms | 首屏加载 |
| 详情加载时间 | < 300ms | 切换审批项 |
| 操作响应时间 | < 1s | 审批操作提交 |
| 刷新延迟 | 800ms | 操作后延迟刷新 |

### 4.2 兼容性要求

- **浏览器**: Chrome 90+, Edge 90+, Firefox 88+, Safari 14+
- **屏幕分辨率**: 1280x720 及以上（桌面端）
- **移动端**: 基本支持，优化待完善

### 4.3 可访问性

- 支持键盘导航
- 合理的颜色对比度
- 图标配合文字说明
- 加载状态和错误提示清晰

### 4.4 安全性

- 所有 API 调用需要 JWT 认证
- 操作权限通过后端验证
- 敏感信息脱敏展示
- 审计日志记录关键操作

---

## 5. UI/UX 设计原则

### 5.1 设计风格

**参考**: 飞书审批中心、钉钉审批

**核心原则**:
- **简洁**: 去除冗余信息，突出核心内容
- **高效**: 减少点击次数，快速完成操作
- **一致**: 交互模式、颜色、间距统一
- **反馈**: 操作后即时反馈，加载状态明确

### 5.2 布局规范

```
┌─────────────────────────────────────────────────────────┐
│  Tab 栏 (h-14)                                          │
│  ┌──────┬──────┬──────┬──────┬──────┐                  │
│  │ 提交 │ 待办 │ 我提交 │ 我审批 │ 抄送 │                  │
│  └──────┴──────┴──────┴──────┴──────┘                  │
├─────────────────────────────────────────────────────────┤
│  ┌──────────────┬──────────────────────────────────┐   │
│  │   列表区域    │        详情面板                   │   │
│  │   (400px)    │        (flex-1)                  │   │
│  │              │                                  │   │
│  │  ┌────────┐  │  标题 + 提交人 + 时间             │   │
│  │  │ 审批项1 │  │  ─────────────────────────       │   │
│  │  └────────┘  │  表单数据（FormRenderer）         │   │
│  │  ┌────────┐  │  ─────────────────────────       │   │
│  │  │ 审批项2 │  │  审批历史（ApprovalTimeline）     │   │
│  │  └────────┘  │  ─────────────────────────       │   │
│  │  ┌────────┐  │  操作区（审批意见 + 通过/拒绝）    │   │
│  │  │ 审批项3 │  │                                  │   │
│  │  └────────┘  │                                  │   │
│  └──────────────┴──────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
```

### 5.3 颜色规范

| 用途 | 颜色 | Hex |
|-----|------|-----|
| 主色（链接、按钮） | 飞书蓝 | `#3370ff` |
| 成功（通过） | 绿色 | `#00b42a` |
| 警告（待审批） | 橙色 | `#ff7d00` |
| 错误（拒绝） | 红色 | `#f53f3f` |
| 紫色（已处理） | 紫色 | `#722ed1` |
| 边框 | 浅灰 | `#e5e6eb` |
| 背景 | 浅灰 | `#f7f8fa` |

---

## 6. 验收标准

### 6.1 功能验收

| 功能 | 验收标准 | 状态 |
|-----|---------|------|
| 提交请求 | 表单列表正确展示，可搜索和筛选，提交后成功创建流程 | ✅ |
| 待我审批 | 待办列表准确，操作后列表刷新，数量 badge 正确 | ✅ |
| 我提交的 | 发起流程列表完整，撤回功能正常，状态映射正确 | ✅ |
| 我审批的 | 已处理列表准确，历史记录完整 | ✅ |
| 抄送我的 | 抄送列表正确，只读查看正常 | ✅ |
| 管理员处理 | 仅管理员可见，强制操作正常，审计日志完整 | ✅ |
| 管理员数据中心 | 统计/趋势/明细/导出可用，筛选与导出一致 | ⏳ |
| 审批历史 | 时间线展示完整，转交、管理员操作正确显示 | ✅ |
| 深度链接 | instanceId 参数可直接打开对应审批项 | ✅ |
| 旧路由兼容 | /approvals 自动转发到 /approval-center | ✅ |

### 6.2 UI/UX 验收

| 项目 | 验收标准 | 状态 |
|-----|---------|------|
| 飞书风格 | 颜色、间距、圆角符合飞书设计规范 | ✅ |
| 列表-详情布局 | 左侧列表 400px，右侧详情自适应 | ✅ |
| 加载状态 | 加载时显示 skeleton 或 loading，避免空白 | ✅ |
| 操作反馈 | 操作后显示 toast，成功/失败信息清晰 | ✅ |
| 错误处理 | 网络错误、权限错误有友好提示 | ✅ |
| 空状态 | 列表为空时显示友好提示 | ✅ |

### 6.3 性能验收

| 指标 | 目标 | 实际 | 状态 |
|-----|------|------|------|
| 列表加载 | < 500ms | ~300ms | ✅ |
| 详情加载 | < 300ms | ~200ms | ✅ |
| 操作响应 | < 1s | ~500ms | ✅ |
| 刷新延迟 | 800ms | 800ms | ✅ |

### 6.4 安全验收

| 项目 | 验收标准 | 状态 |
|-----|---------|------|
| 认证 | 未登录自动跳转登录页 | ✅ |
| 权限 | 管理员 Tab 仅管理员可见 | ✅ |
| API 权限 | 后端验证所有操作权限 | ✅ |
| 审计日志 | 管理员操作记录完整 | ✅ |

---

## 附录 A: 术语表

| 术语 | 说明 |
|-----|------|
| 审批中心 | 本前端模块，提供审批用户界面 |
| 审批引擎 | 后端核心逻辑，负责工作流编排 |
| 流程实例 | 一次审批流程的执行实例 |
| 审批任务 | 流程中的一个审批节点任务 |
| 转交 | 将审批任务转给其他人处理 |
| 加签 | 添加额外审批人 |
| 抄送 | 将审批信息通知相关人员 |
| 管理员操作 | 强制干预、代审批等管理功能 |

---

**文档结束**

**签字确认**:
- 产品经理: ________  
- 技术负责人: ________  
- UI/UX 设计师: ________  
- 日期: 2026-01-02