Files
ccdi/docs/plans/frontend/2026-06-04-project-analysis-fund-flow-usability-frontend-implementation.md

1.8 KiB

结果总览弹窗资金流向可用性优化前端实施计划

目标

  • 优化结果总览“查看详情”弹窗内“资金流向”页签的图谱展示空间。
  • 降低多条资金边金额标签、节点名称在小画布中重叠的问题。
  • 在查看单个对手方资金边明细后,通过点击图谱画布空白区域恢复全量图谱状态。

实施范围

  • 仅调整结果总览“查看详情”弹窗中的资金流向图谱。
  • 不调整专项排查页资金图谱的默认尺寸和业务逻辑。
  • 不修改后端接口、数据库和资金流水分页接口。

实施方案

  1. ProjectAnalysisFundFlowTab 中扩大资金流向工作区尺寸:

    • 提高弹窗内图谱卡片高度。
    • 改为上方图谱、下方逐笔流水布局,给图谱保留更大画布空间。
    • 下方逐笔流水表格保持固定高度和分页展示,避免撑高弹窗。
  2. FundGraphSection 中增加弹窗可配置能力:

    • 增加边标签紧凑展示开关,金额使用“万/亿”等短格式展示。
    • 支持隐藏资金边汇总卡片,只保留逐笔流水明细。
    • 点击图谱画布空白区域时清空选中节点、选中边和逐笔流水明细,并重新渲染图谱。
  3. 优化选中状态表达:

    • 图谱中当前边和两端节点保持高亮,其他边降低透明度。
    • 点空白区域后恢复初始全量图谱状态,不额外增加按钮。

验证计划

  • 执行前端构建,确认无编译错误。
  • 在真实页面进入结果总览“查看详情”弹窗,切换到“资金流向”。
  • 选择包含多笔交易金额标签的资金边,验证节点名称和金额标签不再严重叠加,逐笔流水显示在图谱下方。
  • 点击图谱画布空白区域,验证逐笔流水清空,图谱恢复全量状态。