ccdi/docs/reports/implementation/2026-07-13-frontend-layout-polish.md

# 前端页面布局小优化实施记录

## 修改背景

对近期涉及的前端页面进行风格检查后，发现部分后台表格和筛选区存在列顺序不顺、下拉框宽度偏窄、窄屏挤压和长文本撑开表格的问题。本次只做页面展示层小优化，不调整接口和业务逻辑。

## 修改内容

1. 流水明细查询
   - 将“交易金额”列移动到“异常标签”列前面。
   - 将“交易金额”列控制为 120px，“异常标签”列控制为 220px，避免列宽虚高。
   - 长账号、长摘要和长名称允许在单元格内断行，避免撑开表格。
   - 单个超长异常标签限制在列内省略展示，避免撑开表格。

2. 风险明细-涉疑交易明细
   - 将“命中模型”和“预警类型”筛选框统一调整为 240px。
   - 查询按钮设置最小宽度，避免筛选栏视觉抖动。
   - 将“交易金额”列移动到“异常标签”列前面，与流水明细查询保持一致。
   - 将“交易金额”列控制为 120px，“异常标签”列控制为 220px，避免列宽虚高。
   - 长账号、长摘要和长名称允许在单元格内断行。
   - 单个超长异常标签限制在列内省略展示。

3. 风险模型
   - 保留“模型预警统计”“命中模型涉及人员”两个区块标题。
   - “模型预警统计”说明文案缩短为“点击筛选”，“命中模型涉及人员”标题下不再展示说明文案。

4. 账户库
   - 列表列顺序调整为“所属人类型”在前，“员工姓名”在后，便于先判断账户归属分类。
   - 查询区改为响应式列宽：手机一列、平板两列、中等屏三列、大屏四列。
   - 账户库编辑/详情弹窗改为 92% 自适应宽度，并限制最大宽度 1160px。
   - 员工姓名、账户姓名、账户号码增加溢出提示，避免长文本撑开表格。

## 影响范围

- 影响项目详情中的“流水明细查询”展示。
- 影响项目详情中的“风险明细-涉疑交易明细”筛选区和表格文本展示。
- 影响项目详情中的“风险模型”区块标题展示。
- 影响账户库列表查询区、表格长文本展示和编辑/详情弹窗宽度。
- 不改接口、不改后端、不改数据结构。

## 验证情况

- 已补充前端源码结构单测，覆盖流水明细查询/涉疑交易明细金额列顺序、涉疑交易筛选框宽度、账户库列表列顺序和账户库布局优化。
- 已执行前端结构单测：
  - `node tests/unit/detail-query-hit-tags-list.test.js`
  - `node tests/unit/risk-detail-suspicious-transaction-layout.test.js`
  - `node tests/unit/account-info-layout-polish.test.js`
- 已执行 `npm run build:prod`，构建通过；存在既有资源体积告警，且当前工作区未跟踪的 `0uS5znL.docx` 会被构建扫描到，不属于本次代码改动。
- 本次构建使用 Node 22.22.3 + npm 10.9.8；本机 `.nvmrc` 指向的 Node 14.21.3 缺少 npm，未继续使用该不完整环境。
- 已复查流水明细查询和涉疑交易明细列顺序与列宽：交易金额列位于异常标签列前，金额列宽为 120px，异常标签列宽为 220px；摘要/交易类型列收窄并允许长文本断行，单个超长异常标签在列内省略，避免长文本遮挡后续列。
- 已启动真实后端和前端开发服务检查页面：
  - 账户库列表、查询区、详情弹窗可正常渲染。
  - 账户库列表列头已确认调整为“所属人类型”在“员工姓名”前。
  - 账户库窄屏查询区无页面级横向溢出。
  - 项目详情“流水明细查询”中“交易金额”列已在“异常标签”列前。
  - 项目详情“结果总览-涉疑交易明细”中“交易金额”列已在“异常标签”列前。
  - 项目详情“流水明细查询”和“结果总览-涉疑交易明细”均已临时注入超长金额、超长异常标签做极限宽度验收；交易金额列保持 120px，异常标签列保持 220px，页面无横向溢出。
  - “模型预警统计”标题保留并仅显示“点击筛选”，“命中模型涉及人员”标题保留且不再显示“查看明细”。