4.1 KiB
4.1 KiB
前端页面布局小优化实施记录
修改背景
对近期涉及的前端页面进行风格检查后，发现部分后台表格和筛选区存在列顺序不顺、下拉框宽度偏窄、窄屏挤压和长文本撑开表格的问题。本次只做页面展示层小优化，不调整接口和业务逻辑。
修改内容
-
流水明细查询
- 将“交易金额”列移动到“异常标签”列前面。
- 将“交易金额”列控制为 120px，“异常标签”列控制为 220px，避免列宽虚高。
- 长账号、长摘要和长名称允许在单元格内断行，避免撑开表格。
- 单个超长异常标签限制在列内省略展示，避免撑开表格。
-
风险明细-涉疑交易明细
- 将“命中模型”和“预警类型”筛选框统一调整为 240px。
- 查询按钮设置最小宽度，避免筛选栏视觉抖动。
- 将“交易金额”列移动到“异常标签”列前面，与流水明细查询保持一致。
- 将“交易金额”列控制为 120px，“异常标签”列控制为 220px，避免列宽虚高。
- 长账号、长摘要和长名称允许在单元格内断行。
- 单个超长异常标签限制在列内省略展示。
-
风险模型
- 保留“模型预警统计”“命中模型涉及人员”两个区块标题。
- “模型预警统计”说明文案缩短为“点击筛选”，“命中模型涉及人员”标题下不再展示说明文案。
-
账户库
- 列表列顺序调整为“所属人类型”在前，“员工姓名”在后，便于先判断账户归属分类。
- 查询区改为响应式列宽：手机一列、平板两列、中等屏三列、大屏四列。
- 账户库编辑/详情弹窗改为 92% 自适应宽度，并限制最大宽度 1160px。
- 员工姓名、账户姓名、账户号码增加溢出提示，避免长文本撑开表格。
影响范围
- 影响项目详情中的“流水明细查询”展示。
- 影响项目详情中的“风险明细-涉疑交易明细”筛选区和表格文本展示。
- 影响项目详情中的“风险模型”区块标题展示。
- 影响账户库列表查询区、表格长文本展示和编辑/详情弹窗宽度。
- 不改接口、不改后端、不改数据结构。
验证情况
- 已补充前端源码结构单测，覆盖流水明细查询/涉疑交易明细金额列顺序、涉疑交易筛选框宽度、账户库列表列顺序和账户库布局优化。
- 已执行前端结构单测：
node tests/unit/detail-query-hit-tags-list.test.jsnode tests/unit/risk-detail-suspicious-transaction-layout.test.jsnode 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，页面无横向溢出。
- “模型预警统计”标题保留并仅显示“点击筛选”，“命中模型涉及人员”标题保留且不再显示“查看明细”。