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)