ccdi/docs/design/2026-03-27-results-overview-suspicious-transaction-alignment-design.md

结果总览涉疑交易明细与流水明细查询对齐设计

背景

• 结果总览页的“风险明细 > 涉疑交易明细”已接通真实接口，但当前列表列结构、详情弹窗内容和分页交互均与“流水明细查询”页面不一致。
• 用户要求以“流水明细查询”页为基准对齐交互与视觉，仅保留涉疑交易特有的“关联员工”字段，其余定制列移除。

目标

• 列表对齐“流水明细查询”页面的主表结构与样式。
• 详情弹窗对齐“流水明细查询”页面的字段布局、原始文件区域与命中异常标签区域。
• 分页固定每页 5 条，筛选切换后回到第一页。
• 保留“关联员工”列，作为涉疑交易明细相对流水明细查询的唯一额外业务列。

方案

列表

• RiskDetailSection.vue 保留“涉疑交易明细”区块与筛选下拉。
• 表格列改为：
  • 交易时间
  • 本方账户
  • 对方账户
  • 关联员工
  • 摘要 / 交易类型
  • 异常标签
  • 交易金额
  • 详情
• 保持与 DetailQuery.vue 相同的多行单元格结构、金额颜色和异常标签样式。

分页

• 组件内部新增独立分页状态：
  • suspiciousPageNum
  • suspiciousPageSize 固定为 5
  • suspiciousTotal
• 初次加载、筛选切换和翻页都通过 getOverviewSuspiciousTransactions 重新请求。
• 分页组件沿用仓库现有 Pagination，但限制 pageSizes 为 [5]，并移除 sizes 布局项。

详情弹窗

• 详情弹窗结构对齐 DetailQuery.vue：
  • 基础字段宫格
  • 原始文件信息
  • 命中异常标签
• 详情数据继续复用 getBankStatementDetail(bankStatementId)，避免新增后端接口。

异常标签

• 结果总览涉疑交易列表接口当前不直接返回 hitTags。
• 前端在列表加载完成后，按当前页流水 bankStatementId 逐条调用详情接口补齐 hitTags，仅处理当前页 5 条数据，保证逻辑闭环且不扩大后端改造范围。

影响范围

• 前端：
  • ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
  • ruoyi-ui/tests/unit/
• 文档：
  • 当前设计文档
  • 本轮实施记录

验证

• 单测验证列表列名、分页配置、详情弹窗字段与异常标签区域。
• 浏览器联调验证：
  • 初始加载为 5 条
  • 筛选切换可翻页
  • 详情弹窗样式与字段对齐
  • 导出仍可用