edit | blame | history | raw

Proposal: integrate-agreement-api

Summary

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

Background

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

Goals

页面首次加载时自动生成并展示调解协议内容
实现"确认协议"、"下载协议"、"重新生成"、"修改协议"四个操作按钮功能
新增"修改调解协议书内容"弹窗，按原型 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 组件改造