# 增加AI调解进度流程节点数据展示

## 问题陈述

当前MediationProgress组件使用硬编码的5个固定步骤，无法根据实际案件类型动态展示不同的调解流程节点。需要集成API返回的nodes数据，实现动态的流程节点展示。

## 提议的解决方案

### 1. 数据流设计

```
API Response (getCaseProcessInfo)
    ↓
CaseDataContext (新增processNodes状态)
    ↓
MediationProgress组件 (动态渲染)
```

### 2. Context增强

在`CaseDataContext`中新增：
- `processNodes` 状态：存储流程节点数据
- 从`getCaseProcessInfo`响应中提取`nodes`数据并存储

### 3. 组件重构

**MediationProgress组件改造**：
- 删除硬编码的steps数组
- 使用`useCaseData()`获取`processNodes`
- 根据nodes数据动态生成步骤：
  - 按`order_no`排序
  - 显示`node_name`作为标签
  - 根据每个节点的`nodeState`字段判断状态：
    - `nodeState: 0或1` → active激活状态
    - `nodeState: 2` → completed完成状态
    - 其他值 → 默认未激活状态
  - 保持原有的进度线、完成/激活/未完成样式逻辑

### 4. 数据结构

**nodes数据格式**（来自API）：
```javascript
[
  { id: 1, node_name: "意愿调查", order_no: 1, nodeState: 2 },  // 已完成
  { id: 2, node_name: "材料核实", order_no: 2, nodeState: 1 },  // 进行中（激活）
  { id: 3, node_name: "事实认定", order_no: 3, nodeState: 0 },  // 未开始
  { id: 4, node_name: "达成协议", order_no: 4, nodeState: 0 },  // 未开始
  { id: 5, node_name: "履约回访", order_no: 5, nodeState: 0 }   // 未开始
]
```

**nodeState状态说明**：
- `0` 或 `1`：进行中/激活状态（active）
- `2`：已完成状态（completed）
- 其他值：默认未激活

### 5. 实现细节

#### 5.1 CaseDataContext修改
- 新增`processNodes`状态
- 在`loadCaseData`中保存`response.nodes`
- 在Context value中导出`processNodes`

#### 5.2 MediationProgress修改
- 从Context获取`processNodes`
- 对nodes按`order_no`排序
- 根据每个节点的`nodeState`判断显示状态：
  - `nodeState === 2` → 显示为完成状态（带勾图标）
  - `nodeState === 0 || nodeState === 1` → 显示为激活状态
  - 其他 → 显示为未激活状态
- 动态计算进度线宽度（根据已完成节点数量）
- 使用`node_name`渲染步骤标签

#### 5.3 容错处理
- nodes为空时显示默认提示
- nodeState字段缺失时默认为未激活状态
- order_no缺失时按数组顺序排列

## 技术决策

### ✅ 采用方案
- **数据存储**：Context + 内存（不存储到localStorage）
- **步骤生成**：动态生成，按order_no排序
- **状态判断**：通过每个节点的nodeState字段（0/1=激活，2=完成）

### ❌ 不采用方案
- ~~硬编码步骤数组~~
- ~~localStorage持久化nodes~~ （timeline已持久化，nodes可以重新获取）

## 测试计划

1. **正常流程测试**：
   - API成功返回nodes数据
   - 步骤正确渲染（数量、顺序、名称）
   - 当前节点高亮正确

2. **边界情况测试**：
   - nodes为空数组
   - nodes缺少order_no或nodeState字段
   - nodeState值异常（非0/1/2）

3. **视觉测试**：
   - 不同数量节点的布局适配（3个、5个、7个）
   - 进度线宽度计算正确

## 影响范围

**修改文件**：
- `web-app/src/contexts/CaseDataContext.jsx` - 新增processNodes状态
- `web-app/src/components/dashboard/MediationProgress.jsx` - 动态渲染逻辑

**不影响**：
- API接口调用（已存在）
- 其他组件
- 样式文件（复用现有样式）

## 验收标准

- [ ] nodes数据成功存储到Context
- [ ] MediationProgress组件根据nodes动态渲染步骤
- [ ] 节点状态根据nodeState正确显示（完成/激活/未激活）
- [ ] 进度线宽度根据已完成节点数量计算准确
- [ ] 不同案件类型显示不同的流程节点
- [ ] 代码无编译错误
- [ ] 页面正常显示，无控制台错误