# 审批流程时间线展示 - 业务分析

> 创建日期：2026-01-06  
> 参考：钉钉、飞书、企业微信审批流程展示规范

---

## 📊 业内规范分析

### 1. 钉钉审批流程展示规范

**核心设计原则**：
- ✅ **完整流程可见性**：无论审批结果如何，都展示完整的审批流程设计
- ✅ **状态可区分性**：通过颜色、图标清晰区分不同状态
- ✅ **信息完整性**：显示审批人、时间、评论

#### 审批通过场景
```
发起人 ✅ (已完成)
  ↓
审批人A ✅ (已完成，同意)
  ↓
审批人B ✅ (已完成，同意)
  ↓
结束 ✅
```

#### 审批拒绝场景
```
发起人 ✅ (已完成)
  ↓
审批人A ✅ (已完成，同意)
  ↓
审批人B ❌ (已拒绝，原因：xxx)
  ↓
审批人C ⚪ (未执行，灰色显示)  ← ⚠️ 关键：仍然显示！
  ↓
结束 ⚪ (未执行，灰色显示)
```

**钉钉的设计逻辑**：
- **展示后续节点**：即使拒绝了，后续节点仍然显示（灰色/置灰）
- **原因**：让用户了解完整的审批流程设计，知道"如果通过会经过哪些环节"
- **视觉区分**：用颜色和图标区分（绿色✅=完成，红色❌=拒绝，灰色⚪=未执行）

---

### 2. 飞书审批流程展示规范

**核心设计原则**：
- ✅ **流程设计透明**：完整展示审批流程定义
- ✅ **执行路径高亮**：高亮已执行的路径
- ✅ **条件分支展示**：清晰展示条件分支的判断结果

#### 审批拒绝场景（与钉钉类似）
```
┌─────────────┐
│ 发起人 ✅   │
└──────┬──────┘
       ↓
┌─────────────┐
│ 审批人A ✅  │ "同意"
└──────┬──────┘
       ↓
┌─────────────┐
│ 审批人B ❌  │ "不符合要求"（拒绝原因）
└──────┬──────┘
       ↓ (虚线)
┌─────────────┐
│ 审批人C ⚪  │ 未执行（灰色）
└──────┬──────┘
       ↓ (虚线)
┌─────────────┐
│ 结束 ⚪     │
└─────────────┘
```

**飞书的增强设计**：
- **虚线连接**：拒绝后的节点用虚线连接，表示"这是原定流程但未执行"
- **悬浮提示**：鼠标悬浮在灰色节点上，提示"因上一环节拒绝，此节点未执行"
- **流程定义查看**：单独提供"查看流程定义"功能，可以看到完整的流程设计图

---

### 3. 企业微信审批规范

**核心设计原则**：
- ✅ **简洁优先**：只显示已执行的节点
- ❌ **不显示未执行节点**：拒绝后不展示后续节点

#### 审批拒绝场景
```
发起人 ✅
  ↓
审批人A ✅
  ↓
审批人B ❌ (已拒绝)
  
(后续节点不显示)
```

**企业微信的设计逻辑**：
- **只显示执行路径**：只展示实际走过的路径
- **原因**：避免信息过载，聚焦于已发生的事实
- **缺点**：用户无法从审批详情中了解完整的流程设计

---

## 🔍 当前实现的问题分析

### 问题1：流程不完整（中等严重）
**现象**：
- 只显示已执行节点，不显示未执行节点
- 用户无法看到完整的流程设计

**影响**：
- ❌ 用户不知道完整的流程设计
- ❌ 发起人不知道"如果通过会经过哪些环节"
- ❌ 对于多级审批，无法预判时间成本

### 问题2：缺少"未执行"状态的视觉表达（轻微）
**现象**：
- 当前只有三种状态：completed（绿色✅）、rejected（红色❌）、active（蓝色进行中）
- 缺少 "pending/未执行" 状态的展示

**影响**：
- ❌ 无法展示后续节点
- ❌ 用户无法了解流程全貌

### 问题3：拒绝后的流程终止不明确（轻微）
**现象**：
- 拒绝后，流程就结束了，但没有明确的"流程已终止"标识
- 没有"结束"节点的状态展示

**影响**：
- ❌ 用户不确定流程是否真的结束
- ❌ 可能产生"是不是还在处理"的疑惑

---

## 💡 方案对比

### 方案A：遵循钉钉/飞书规范（推荐）⭐⭐⭐⭐⭐

**核心改进**：
1. 显示完整流程（包括未执行节点）
2. 增加未执行状态（灰色）
3. 视觉区分（虚线连接）

**优势**：
- ✅ 符合业内规范（钉钉、飞书）
- ✅ 信息完整，用户体验好
- ✅ 流程透明，减少疑惑
- ✅ 适用于复杂流程（多级审批、条件分支）

**工作量**：
- 📝 前端：需要修改数据获取逻辑（补充流程定义）
- 📝 前端：增加未执行状态的渲染逻辑
- 📝 前端：调整 LarkProcessPreview 组件
- 🎨 设计：虚线样式、灰色节点样式
- ⏱️ 预计：4-6小时

---

### 方案B：保持现状（不推荐）⭐⭐

**优势**：
- ✅ 无需改动
- ✅ 简洁，只显示已发生的事实

**劣势**：
- ❌ 不符合业内主流规范
- ❌ 用户无法了解完整流程
- ❌ 对于复杂流程，体验差

---

### 方案C：折中方案（备选）⭐⭐⭐

**核心改进**：
1. 默认只显示已执行节点（保持现状）
2. 增加"查看完整流程"按钮
3. 点击后展示完整的流程定义图

**优势**：
- ✅ 默认简洁
- ✅ 需要时可查看完整流程
- ✅ 改动较小

**劣势**：
- ❌ 需要额外操作
- ❌ 不如方案A直观

---

## 🎯 最终决策

### ✅ 采用方案A（遵循钉钉/飞书规范）

**决策理由**：
1. **业内标准**：钉钉、飞书都采用这种方式，已被广泛验证
2. **用户体验好**：一眼看清完整流程，减少疑惑
3. **适应性强**：适用于简单和复杂流程
4. **技术债务小**：一次性做对，避免反复修改

**用户价值**：
- 用户能够清楚地看到完整的审批流程设计
- 拒绝/撤回后，明确知道哪些环节未执行
- 减少用户咨询和疑惑，提升满意度

---

## 📋 设计要求

### 核心要求
1. ✅ 显示完整的审批流程（包括未执行节点）
2. ✅ 清晰区分节点状态（已执行 vs 未执行）
3. ✅ 提供悬浮提示，说明节点状态
4. ✅ 保持与现有设计系统的一致性

### 用户体验目标
- 用户能一眼看到完整的审批流程设计
- 拒绝/撤回后，清楚知道哪些节点未执行
- 视觉层次清晰，主次分明

---

## 🔗 相关文档

- [逻辑规范](./02-logic-specification.md) - 状态机制和数据流
- [UI设计方案](./03-ui-design.md) - 视觉设计和交互
- [技术实施方案](./04-implementation.md) - 实现细节
- [特性概述](./00-overview.md) - 返回概述

---

**参考资料**：
- 钉钉审批流程展示规范
- 飞书审批流程展示规范
- Material Design - Stepper Component
- Ant Design - Steps Component