# 结果总览弹窗资金流向逐笔流水展示实施记录 ## 修改内容 - 去除结果总览“查看详情”弹窗资金边详情中的“弹窗速览”提示。 - 结果总览弹窗“资金流向”页签启用逐笔流水表格展示。 - 保持逐笔流水按现有接口分页加载,不一次性拉取全量数据。 - 针对弹窗场景改为上方大图谱、下方逐笔流水明细布局,避免详情栏挤压图谱画布。 - 资金边金额标签改为“万/亿”短格式,选中边时高亮当前边和两端节点,其余关系降透明。 - 单边明细不再展示“返回全量”按钮,改为点击图谱画布空白区域恢复到刚进入“资金流向”页签时的全量图谱第一眼状态。 - 空白点击恢复全量时同步清除选中边、选中节点、逐笔流水数据、明细加载状态和 ECharts 内部强调状态,避免画布残留单条资金边高亮。 - 空白点击监听仅绑定资金流向图谱画布,不影响下方逐笔流水表格和分页操作。 - 逐笔流水接口增加请求序号校验,返回全量后丢弃旧选中边的异步响应,避免旧请求回写导致明细区再次出现。 - 弹窗资金流向明细隐藏累计金额、交易笔数、关系三张汇总卡片,减少重复信息占用空间。 ## 影响范围 - 前端页面:结果总览“查看详情”弹窗中的“资金流向”页签。 - 复用组件:`FundGraphSection` 新增弹窗场景可配置项,默认行为不变。 - 不影响专项排查页图谱展示,不修改后端接口和数据库。 ## 验证情况 - 前端命令执行前已尝试 `nvm use`,当前环境未识别 `nvm`;实际 Node 版本为 `v22.22.0`,npm 版本为 `10.9.4`。 - 已多次执行 `npm run build:prod`,构建通过,仅保留现有资源体积提示。 - 已使用真实页面验证 `http://localhost/ccdiProject/detail/90342?tab=overview`:在结果总览点击“查看详情”,切换“资金流向”,选中交易笔数最多的资金边。 - 多笔金额场景验证结果:当前图谱 19 条资金边,选中边为“彭静勇 → 张建强”,交易笔数 5,逐笔流水表格显示 5 条并分页显示“共 5 条”。 - 展示验证结果:旧“弹窗速览”提示和“项目分析弹窗仅展示汇总信息”说明均不再出现;金额标签压缩为 `2.22万, 5笔`;汇总卡片已隐藏;逐笔流水展示在图谱下方,未裁切图谱区域。 - 恢复全量验证结果:选中“彭静勇 → 张建强”后展示 5 条逐笔流水,其余 18 条资金边降透明;点击图谱空白区域后,旧明细请求未回写,选中边、选中节点、逐笔流水数据和明细总数均清空;图表仍展示 15 个图形节点、19 条资金边,边样式恢复为 opacity `0.9`、width `1.9`,不再残留单条高亮边。 - 页面截图已保存到 `output/browser-use/project-analysis-fund-flow-final-graph.png`、`output/browser-use/project-analysis-fund-flow-final-detail.png`、`output/browser-use/project-analysis-fund-flow-reset-all.png`、`output/browser-use/project-analysis-fund-flow-reset-first-view.png` 和 `output/browser-use/project-analysis-fund-flow-blank-click-reset.png`。