Files
ccdi/docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md

2.4 KiB

结果总览项目分析弹窗前端实施记录

变更概述

本次在结果总览页新增统一“项目分析”弹窗,覆盖“风险人员总览”和“命中模型涉及人员列表”两个入口,不新增路由、不新增接口,由 PreliminaryCheck.vue 统一维护弹窗状态和上下文。

新增弹窗入口链路

  • PreliminaryCheck.vue
    • 新增统一弹窗状态 projectAnalysisDialogVisible
    • 新增当前人物上下文 currentProjectAnalysisPerson
    • 新增来源标记 projectAnalysisSource
    • 新增打开、关闭、重置弹窗的方法
  • RiskPeopleSection.vue
    • 操作列改为向上抛出 view-project-analysis
  • RiskModelSection.vue
    • 操作列改为向上抛出 view-project-analysis
    • 保留模型筛选联动逻辑,不在区块内自行维护弹窗状态

新增组件与职责

  • ProjectAnalysisDialog.vue
    • 负责大尺寸弹窗容器、来源强调、默认页签状态和关闭重置
  • ProjectAnalysisSidebar.vue
    • 负责左侧三组侧栏信息:
      • 人员基础信息
      • 命中模型摘要
      • 排查记录摘要
  • ProjectAnalysisAbnormalTab.vue
    • 负责“异常明细”主视图
    • 包含异常交易表格、频繁转账账户异常摘要、关联交易异常摘要
  • ProjectAnalysisPlaceholderTab.vue
    • 统一承载其余四个高保真静态页签

主视图内容与静态页签边界

  • “异常明细”页签使用当前行数据与静态模板拼装,不新增请求逻辑
  • 其余页签保持静态承载:
    • 资产分析
    • 征信摘要
    • 关系图谱
    • 资金流向
  • 当来源为“命中模型涉及人员”时:
    • 顶部增加“当前命中模型”强调
    • 侧栏同步展示当前命中模型
  • 缺失工号、部门等字段时展示 -
  • 缺失异常标签时展示“暂无异常标签”

Mock 组装调整

  • preliminaryCheck.mock.js 中新增统一的弹窗页签定义
  • 新增 buildProjectAnalysisDialogData
    • 负责拼装侧栏数据
    • 负责拼装来源强调信息
    • 负责拼装异常明细静态模板
  • 未改动结果总览原有真实接口数据映射方式

验证结果

  • 新增单测通过
  • 结果总览相关聚焦回归通过
  • 浏览器手工验证通过,前端开发进程已在验证后关闭

对应提交

  • 打通结果总览项目分析弹窗入口
  • 搭建结果总览项目分析弹窗骨架
  • 实现结果总览项目分析弹窗主视图