# Tasks: integrate-agreement-api

## 实施任务清单

### Phase 1: 基础架构准备

- [x] **T1**: 在 `AgreementSection` 组件中添加状态管理
  - 添加 `agreementContent`、`loading`、`error` 状态
  - 添加 `editModalVisible`、`editContent` 弹窗状态
  - 从 `CaseDataContext` 获取 `caseId`

### Phase 2: 协议内容加载与展示

- [x] **T2**: 实现首次加载协议内容
  - 组件挂载时调用 `MediationAgreementAPIService.generateAgreement(caseId)`
  - 将返回的 `agreeContent` 存入状态并展示
  - 处理 loading 和 error 状态

- [x] **T3**: 实现协议内容渲染
  - 创建 `renderAgreementContent` 函数
  - 处理 `\n` 换行符转换为 `<br/>` 或段落
  - 简单过滤或保留 Markdown 符号（如 `**`）

### Phase 3: 操作按钮功能实现

- [x] **T4**: 添加四个操作按钮 UI
  - 按原型样式添加：确认协议(绿)、修改协议(黄)、下载协议(蓝)、重新生成(青)
  - 按钮样式参照原型 `index.html` 中 `.agreement-btn-*` 类

- [x] **T5**: 实现"确认协议"功能
  - 调用 `MediationAgreementAPIService.confirmAgreement(caseId, 'mediator')`
  - 成功后显示友好消息提示

- [x] **T6**: 实现"下载协议"功能
  - 调用 `MediationAgreementAPIService.downloadAgreement(caseId)`
  - 成功后显示友好消息提示

- [x] **T7**: 实现"重新生成"功能
  - 调用 `MediationAgreementAPIService.generateAgreement(caseId)`
  - 成功后刷新协议内容展示并显示友好消息提示

### Phase 4: 修改协议弹窗

- [x] **T8**: 创建修改协议弹窗 UI
  - 使用 Ant Design Modal 组件
  - 参照原型 `doc_edit.html` 设计弹窗样式
  - 包含：编辑提示、可编辑内容区域、保存按钮

- [x] **T9**: 实现弹窗数据加载
  - 点击"修改协议"按钮打开弹窗
  - 调用 `MediationAgreementAPIService.getAgreementDetail(caseId)` 获取内容
  - 将内容展示在可编辑区域

- [x] **T10**: 实现保存修改功能
  - 点击"保存修改"按钮
  - 调用 `MediationAgreementAPIService.updateAgreement(caseId, editedContent)`
  - 成功后显示消息提示并关闭弹窗
  - 调用 `MediationAgreementAPIService.generateAgreement(caseId)` 刷新父页面

### Phase 5: 验证与完善

- [x] **T11**: 功能验证
  - 验证首次加载协议内容正确展示
  - 验证四个操作按钮功能正常
  - 验证修改弹窗打开、编辑、保存流程
  - 验证各操作的消息提示

- [x] **T12**: 错误处理完善
  - 添加 API 调用失败的错误提示
  - 添加 loading 状态展示

## 依赖关系
```
T1 → T2 → T3
T1 → T4 → T5, T6, T7
T1 → T8 → T9 → T10
T3, T7, T10 → T11 → T12
```

## 验收标准
1. 页面加载后自动展示调解协议内容
2. 四个操作按钮功能正常，有友好消息提示
3. 修改协议弹窗样式与原型 `doc_edit.html` 一致
4. 所有 API 调用有 loading 状态和错误处理

## 实施状态: ✅ 已完成 (2026-02-06)