| New file |
| | |
|---|
| | | # Change: 首页布局升级优化 |
|---|
| | | |
|---|
| | | ## Why |
|---|
| | | 当前首页缺少顶部导航Header、预警提示、申请双方信息展示、协商沟通可视化和AI调解建议等关键功能模块，需要按照最新原型图进行布局升级，提升调解员工作效率和用户体验。 |
|---|
| | | |
|---|
| | | ## What Changes |
|---|
| | | - **新增**: 蓝色顶部Header组件，包含系统名称、通知图标(带消息数量气泡)、调解员信息 |
|---|
| | | - **新增**: 预警提示消息条组件(浅黄色背景)，支持多条消息查看弹窗 |
|---|
| | | - **新增**: 申请双方信息组件，展示申请人/被申请人信息及情绪标签 |
|---|
| | | - **修改**: 预计调解成功率组件，增加同比数据展示(如 +8% 较3小时前) |
|---|
| | | - **新增**: 协商沟通面板组件，点线式可视化展示沟通轮次 |
|---|
| | | - **新增**: AI调解建议面板，展示调解建议内容和详情按钮 |
|---|
| | | - **新增**: 预警消息API服务 (`/api/v1/mediation-timeline/v2/warning-notify-list/{mediation_id}`) |
|---|
| | | - **新增**: 当事人列表API服务 (`/api/v1/mediation-timeline/v2/person-list/{case_id}`) |
|---|
| | | |
|---|
| | | ## Impact |
|---|
| | | - **Affected specs**: homepage-layout |
|---|
| | | - **Affected code**: |
|---|
| | | - `web-app/src/App.js` - 添加Header组件 |
|---|
| | | - `web-app/src/App.css` - 新增Header和相关组件样式 |
|---|
| | | - `web-app/src/components/dashboard/TopSection.jsx` - 添加预警提示 |
|---|
| | | - `web-app/src/components/dashboard/TabContainer.jsx` - 修改MediationDataBoard组件 |
|---|
| | | - 新增组件: |
|---|
| | | - `web-app/src/components/common/AppHeader.jsx` - 顶部Header |
|---|
| | | - `web-app/src/components/common/WarningAlert.jsx` - 预警提示 |
|---|
| | | - `web-app/src/components/dashboard/PartyInfoCard.jsx` - 申请双方信息 |
|---|
| | | - `web-app/src/components/dashboard/NegotiationProgress.jsx` - 协商沟通 |
|---|
| | | - `web-app/src/components/dashboard/AISuggestionCard.jsx` - AI调解建议 |
|---|
| | | - `web-app/src/services/MediationTimelineAPIService.js` - 新增API服务 |
|---|
| | | |
|---|
| | | ## Data Sources |
|---|
| | | |
|---|
| | | ### 1. Header调解员信息 |
|---|
| | | 从URL请求参数获取: |
|---|
| | | - `trueName` - 姓名 |
|---|
| | | - `unit` - 地址 |
|---|
| | | - `roleName` - 角色 |
|---|
| | | - `avatar` - 头像(空则使用默认头像) |
|---|
| | | |
|---|
| | | ### 2. 预警消息API |
|---|
| | | ``` |
|---|
| | | GET /api/v1/mediation-timeline/v2/warning-notify-list/{mediation_id} |
|---|
| | | |
|---|
| | | Response: |
|---|
| | | { |
|---|
| | | "code": 200, |
|---|
| | | "data": [ |
|---|
| | | { |
|---|
| | | "id": "1", |
|---|
| | | "content": "申请人张三情绪激动...", |
|---|
| | | "create_time": "2026-12-20 12:30:15", |
|---|
| | | "level_type": "3" |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 3. 当事人列表API |
|---|
| | | ``` |
|---|
| | | GET /api/v1/mediation-timeline/v2/person-list/{case_id} |
|---|
| | | |
|---|
| | | Response: |
|---|
| | | { |
|---|
| | | "code": 200, |
|---|
| | | "data": [ |
|---|
| | | { |
|---|
| | | "id": "202602261114261001", |
|---|
| | | "per_type": "15_020008-1", |
|---|
| | | "per_type_name": "申请方当事人", |
|---|
| | | "true_name": "刘树杰", |
|---|
| | | "record_id": "1001", |
|---|
| | | "tag_name": "情绪激动", |
|---|
| | | "tag_style": "red" |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 4. 成功率同比数据 |
|---|
| | | 从 `CaseDataContext` 或 `localStorage.case_data_timeline` 获取: |
|---|
| | | - `mediation.yoy_success_rate` - 同比增长率 |
|---|
| | | - 若为空: `(mediation.success_rate - mediation.last_success_rate) * 100` |
|---|
| | | - `mediation.yoy_before_hours` - 对比时间(小时)，若为空则为0 |
|---|
| | | |
|---|
| | | ### 5. 协商沟通轮次 |
|---|
| | | - 当前轮次: `timeline.mediation?.mediation_count` |
|---|
| | | - 总次数: 默认为流程节点总数 |
|---|
| | | - 当沟通次数超过总次数且未到最后节点时: 总次数 = 沟通次数 + 1 |
|---|
