# Proposal: integrate-agreement-api

## Summary
实现首页调解协议 Tab 页面的 API 对接，包括协议内容展示、确认协议、下载协议、重新生成、修改协议等功能。

## Background
当前调解协议 Tab 页面（`AgreementSection` 组件）使用硬编码的静态内容展示。需要对接后端 API 实现动态数据加载和交互操作。

## Goals
1. 页面首次加载时自动生成并展示调解协议内容
2. 实现"确认协议"、"下载协议"、"重新生成"、"修改协议"四个操作按钮功能
3. 新增"修改调解协议书内容"弹窗，按原型 `doc_edit.html` 设计

## Non-Goals
- 不涉及协议的 PDF 生成逻辑（由后端处理）
- 不涉及用户权限校验

## Design

### API 调用流程

| 场景 | API | 说明 |
|------|-----|------|
| 首次加载 | `MediationAgreementAPIService.generateAgreement(caseId)` | 生成协议并获取内容展示 |
| 确认协议 | `MediationAgreementAPIService.confirmAgreement(caseId, userType)` | userType 固定为 'mediator' |
| 下载协议 | `MediationAgreementAPIService.downloadAgreement(caseId)` | 触发协议下载 |
| 重新生成 | `MediationAgreementAPIService.generateAgreement(caseId)` | 重新生成协议并刷新展示 |
| 修改弹窗-加载 | `MediationAgreementAPIService.getAgreementDetail(caseId)` | 获取当前协议内容 |
| 修改弹窗-保存 | `MediationAgreementAPIService.updateAgreement(caseId, agreeContent)` | 保存修改内容 |
| 修改弹窗-保存后刷新 | `MediationAgreementAPIService.generateAgreement(caseId)` | 刷新父页面协议内容 |

### 协议内容展示格式
- API 返回的 `agreeContent` 为 Markdown 格式文本
- 采用纯文本展示方式：处理 `\n` 为换行，Markdown 符号（如 `**`）简单过滤或原样显示

### UI 组件结构

```
AgreementSection (改造)
├── 协议内容展示区域 (动态渲染 agreeContent)
├── 操作按钮组
│   ├── 确认协议 (绿色)
│   ├── 修改协议 (黄色) → 打开修改弹窗
│   ├── 下载协议 (蓝色)
│   └── 重新生成 (青色)
└── 修改调解协议书弹窗 (Modal)
    ├── 编辑提示说明
    ├── 协议内容可编辑区域 (contenteditable)
    └── 保存修改按钮
```

### 修改协议弹窗设计
参照原型 `doc_edit.html`：
- 顶部提示：说明可编辑区域
- 编辑区域：使用 `contenteditable` 实现内容编辑
- 底部按钮：保存修改

## Risks & Mitigations
| 风险 | 缓解措施 |
|------|---------|
| API 调用失败 | 添加 loading 状态和错误提示 |
| 协议内容过长 | 保持现有 max-height + overflow-y: auto 滚动设计 |

## Dependencies
- `MediationAgreementAPIService` 已实现（web-app/src/services/MediationAgreementAPIService.js）
- 原型文件 `doc_edit.html` 作为 UI 参考

## Affected Components
- `web-app/src/components/dashboard/TabContainer.jsx` - AgreementSection 组件改造