| | |
|---|
| | | |
|---|
| | | ## 1. API服务层 |
|---|
| | | |
|---|
| | | - [ ] 1.1 创建 `MediationTimelineAPIService.js` 服务文件 |
|---|
| | | - [ ] 1.2 实现 `getWarningNotifyList(mediationId)` 方法 - 获取预警消息列表 |
|---|
| | | - [ ] 1.3 实现 `getPersonList(caseId)` 方法 - 获取当事人列表 |
|---|
| | | - [x] 1.1 创建 `MediationTimelineAPIService.js` 服务文件 |
|---|
| | | - [x] 1.2 实现 `getWarningNotifyList(mediationId)` 方法 - 获取预警消息列表 |
|---|
| | | - [x] 1.3 实现 `getPersonList(caseId)` 方法 - 获取当事人列表 |
|---|
| | | |
|---|
| | | ## 2. 蓝色顶部Header组件 |
|---|
| | | |
|---|
| | | - [ ] 2.1 创建 `AppHeader.jsx` 组件 |
|---|
| | | - [ ] 2.2 实现左侧系统名称"矛盾纠纷应用"展示 |
|---|
| | | - [ ] 2.3 实现右侧通知图标 + 红色气泡消息数量 |
|---|
| | | - [ ] 2.4 实现右侧调解员信息展示(从URL参数获取trueName/unit/roleName/avatar) |
|---|
| | | - [ ] 2.5 实现通知列表弹窗(点击通知图标触发) |
|---|
| | | - [ ] 2.6 添加Header相关CSS样式(蓝色背景渐变) |
|---|
| | | - [ ] 2.7 在 `App.js` 中集成 AppHeader 组件 |
|---|
| | | - [x] 2.1 创建 `AppHeader.jsx` 组件 |
|---|
| | | - [x] 2.2 实现左侧系统名称"矛盾纠纷应用"展示 |
|---|
| | | - [x] 2.3 实现右侧通知图标 + 红色气泡消息数量 |
|---|
| | | - [x] 2.4 实现右侧调解员信息展示(从URL参数获取trueName/unit/roleName/avatar) |
|---|
| | | - [x] 2.5 实现通知列表弹窗(点击通知图标触发) |
|---|
| | | - [x] 2.6 添加Header相关CSS样式(蓝色背景渐变) |
|---|
| | | - [x] 2.7 在 `App.js` 中集成 AppHeader 组件 |
|---|
| | | |
|---|
| | | ## 3. 预警提示消息组件 |
|---|
| | | |
|---|
| | | - [ ] 3.1 创建 `WarningAlert.jsx` 组件 |
|---|
| | | - [ ] 3.2 实现浅黄色预警消息条展示(单条时直接显示) |
|---|
| | | - [ ] 3.3 实现多条消息时右侧显示数量 + "查看更多"按钮 |
|---|
| | | - [ ] 3.4 实现预警消息详情弹窗(Modal) |
|---|
| | | - [ ] 3.5 添加预警提示相关CSS样式 |
|---|
| | | - [ ] 3.6 在 `MediationProgress` 组件下方集成预警提示 |
|---|
| | | - [x] 3.1 创建 `WarningAlert.jsx` 组件 |
|---|
| | | - [x] 3.2 实现浅黄色预警消息条展示(单条时直接显示) |
|---|
| | | - [x] 3.3 实现多条消息时右侧显示数量 + "查看更多"按钮 |
|---|
| | | - [x] 3.4 实现预警消息详情弹窗(Modal) |
|---|
| | | - [x] 3.5 添加预警提示相关CSS样式 |
|---|
| | | - [x] 3.6 在 `MediationProgress` 组件下方集成预警提示 |
|---|
| | | |
|---|
| | | ## 4. 申请双方信息组件 |
|---|
| | | |
|---|
| | | - [ ] 4.1 创建 `PartyInfoCard.jsx` 组件 |
|---|
| | | - [ ] 4.2 实现申请人信息展示(头像 + 姓名 + 情绪标签) |
|---|
| | | - [ ] 4.3 实现中间VS分隔符展示 |
|---|
| | | - [ ] 4.4 实现被申请人信息展示(头像 + 公司名称 + 标签) |
|---|
| | | - [ ] 4.5 实现情绪标签样式(根据tag_style显示不同颜色) |
|---|
| | | - [ ] 4.6 添加申请双方信息相关CSS样式 |
|---|
| | | - [ ] 4.7 在 `MediationDataBoard` 右侧区域集成组件 |
|---|
| | | - [x] 4.1 创建 `PartyInfoCard.jsx` 组件 |
|---|
| | | - [x] 4.2 实现申请人信息展示(头像 + 姓名 + 情绪标签) |
|---|
| | | - [x] 4.3 实现中间VS分隔符展示 |
|---|
| | | - [x] 4.4 实现被申请人信息展示(头像 + 公司名称 + 标签) |
|---|
| | | - [x] 4.5 实现情绪标签样式(根据tag_style显示不同颜色) |
|---|
| | | - [x] 4.6 添加申请双方信息相关CSS样式 |
|---|
| | | - [x] 4.7 在 `MediationDataBoard` 右侧区域集成组件 |
|---|
| | | |
|---|
| | | ## 5. 预计调解成功率组件改进 |
|---|
| | | |
|---|
| | | - [ ] 5.1 修改 `MediationDataBoard` 中的成功率展示 |
|---|
| | | - [ ] 5.2 实现同比数据获取逻辑(yoy_success_rate或计算差值) |
|---|
| | | - [ ] 5.3 实现"较X小时前"时间展示(yoy_before_hours) |
|---|
| | | - [ ] 5.4 添加成功率同比展示样式(绿色上升箭头 + 百分比) |
|---|
| | | - [x] 5.1 修改 `MediationDataBoard` 中的成功率展示 |
|---|
| | | - [x] 5.2 实现同比数据获取逻辑(yoy_success_rate或计算差值) |
|---|
| | | - [x] 5.3 实现"较X小时前"时间展示(yoy_before_hours) |
|---|
| | | - [x] 5.4 添加成功率同比展示样式(绿色上升箭头 + 百分比) |
|---|
| | | |
|---|
| | | ## 6. 协商沟通组件 |
|---|
| | | |
|---|
| | | - [ ] 6.1 创建 `NegotiationProgress.jsx` 组件 |
|---|
| | | - [ ] 6.2 实现"协商沟通"标题展示 |
|---|
| | | - [ ] 6.3 实现"第N轮"文字展示 |
|---|
| | | - [ ] 6.4 实现点线式沟通进度(默认6个点线块) |
|---|
| | | - [ ] 6.5 实现进度着色逻辑(已完成蓝色/未完成灰色) |
|---|
| | | - [ ] 6.6 实现总次数动态计算(基于流程节点和沟通次数) |
|---|
| | | - [ ] 6.7 添加协商沟通相关CSS样式 |
|---|
| | | - [ ] 6.8 在 `MediationDataBoard` 右侧区域集成组件 |
|---|
| | | - [x] 6.1 创建 `NegotiationProgress.jsx` 组件 |
|---|
| | | - [x] 6.2 实现"协商沟通"标题展示 |
|---|
| | | - [x] 6.3 实现"第N轮"文字展示 |
|---|
| | | - [x] 6.4 实现点线式沟通进度(默认6个点线块) |
|---|
| | | - [x] 6.5 实现进度着色逻辑(已完成蓝色/未完成灰色) |
|---|
| | | - [x] 6.6 实现总次数动态计算(基于流程节点和沟通次数) |
|---|
| | | - [x] 6.7 添加协商沟通相关CSS样式 |
|---|
| | | - [x] 6.8 在 `MediationDataBoard` 右侧区域集成组件 |
|---|
| | | |
|---|
| | | ## 7. AI调解建议面板 |
|---|
| | | |
|---|
| | | - [ ] 7.1 创建 `AISuggestionCard.jsx` 组件 |
|---|
| | | - [ ] 7.2 实现AI建议内容展示(Mock数据) |
|---|
| | | - [ ] 7.3 实现"查看详细策略建议"按钮 |
|---|
| | | - [ ] 7.4 实现按钮点击提示("该功能正在升级中，敬请期待！") |
|---|
| | | - [ ] 7.5 添加AI调解建议相关CSS样式(浅蓝色背景) |
|---|
| | | - [ ] 7.6 在诉求差距分析下方集成组件 |
|---|
| | | - [x] 7.1 创建 `AISuggestionCard.jsx` 组件 |
|---|
| | | - [x] 7.2 实现AI建议内容展示(Mock数据) |
|---|
| | | - [x] 7.3 实现"查看详细策略建议"按钮 |
|---|
| | | - [x] 7.4 实现按钮点击提示("该功能正在升级中，敬请期待！") |
|---|
| | | - [x] 7.5 添加AI调解建议相关CSS样式(浅蓝色背景) |
|---|
| | | - [x] 7.6 在诉求差距分析下方集成组件 |
|---|
| | | |
|---|
| | | ## 8. 布局调整与整合 |
|---|
| | | |
|---|
| | | - [ ] 8.1 调整 `App.css` 整体布局适配新Header |
|---|
| | | - [ ] 8.2 调整 `MediationDataBoard` 布局为左右两栏 |
|---|
| | | - [ ] 8.3 确保各组件响应式适配 |
|---|
| | | - [ ] 8.4 验证1:1还原原型图效果 |
|---|
| | | - [x] 8.1 调整 `App.css` 整体布局适配新Header |
|---|
| | | - [x] 8.2 调整 `MediationDataBoard` 布局为左右两栏 |
|---|
| | | - [x] 8.3 确保各组件响应式适配 |
|---|
| | | - [x] 8.4 验证1:1还原原型图效果 |
|---|
| | | |
|---|
| | | ## 9. 验证与测试 |
|---|
| | | |
|---|
| | | - [ ] 9.1 验证Header通知功能正常 |
|---|
| | | - [ ] 9.2 验证预警消息API集成正常 |
|---|
| | | - [ ] 9.3 验证当事人列表API集成正常 |
|---|
| | | - [ ] 9.4 验证成功率同比数据计算正确 |
|---|
| | | - [ ] 9.5 验证协商沟通进度显示正确 |
|---|
| | | - [ ] 9.6 整体视觉与原型图对比验收 |
|---|
| | | - [x] 9.1 验证Header通知功能正常 |
|---|
| | | - [x] 9.2 验证预警消息API集成正常 |
|---|
| | | - [x] 9.3 验证当事人列表API集成正常 |
|---|
| | | - [x] 9.4 验证成功率同比数据计算正确 |
|---|
| | | - [x] 9.5 验证协商沟通进度显示正确 |
|---|
| | | - [x] 9.6 整体视觉与原型图对比验收 |
|---|
