edit | blame | history | raw

Change: 首页布局升级优化

Why

当前首页缺少顶部导航Header、预警提示、申请双方信息展示、协商沟通可视化和AI调解建议等关键功能模块,需要按照最新原型图进行布局升级,提升调解员工作效率和用户体验。

What Changes

  • 新增: 蓝色顶部Header组件,包含系统名称、通知图标(带消息数量气泡)、调解员信息
  • 新增: 预警提示消息条组件(浅黄色背景),支持多条消息查看弹窗
  • 新增: 申请双方信息组件,展示申请人/被申请人信息及情绪标签
  • 修改: 预计调解成功率组件,增加同比数据展示(如 +8% 较3小时前)
  • 新增: 协商沟通面板组件,点线式可视化展示沟通轮次
  • 新增: AI调解建议面板,展示调解建议内容和详情按钮
  • 新增: 预警消息API服务 (/api/v1/mediation-timeline/warning-notify-list/{mediation_id})
  • 新增: 当事人列表API服务 (/api/v1/mediation-timeline/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/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/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. 成功率同比数据

CaseDataContextlocalStorage.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