优化前端页面布局细节

ruoyi-ui/tests/unit/account-info-layout-polish.test.js

@@ -0,0 +1,42 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(__dirname, "../../src/views/ccdiAccountInfo/index.vue"),
+  "utf8"
+);
+
+assert(
+  source.includes(':xs="24" :sm="12" :md="8" :lg="6" :xl="6"'),
+  "账户库查询项应使用响应式列宽"
+);
+
+const ownerTypeColumnIndex = source.indexOf('label="所属人类型"');
+const staffNameColumnIndex = source.indexOf('label="员工姓名" prop="staffName"');
+assert.notStrictEqual(ownerTypeColumnIndex, -1, "账户库列表应保留所属人类型列");
+assert.notStrictEqual(staffNameColumnIndex, -1, "账户库列表应保留员工姓名列");
+assert(
+  ownerTypeColumnIndex < staffNameColumnIndex,
+  "账户库列表中所属人类型应展示在员工姓名前面"
+);
+
+["员工姓名", "账户姓名", "账户号码"].forEach((label) => {
+  const pattern = new RegExp(
+    `<el-table-column[^>]*label="${label}"[^>]*show-overflow-tooltip`,
+    "m"
+  );
+  assert(pattern.test(source), `${label}列应使用溢出提示避免撑开表格`);
+});
+
+assert(source.includes('width="92%"'), "账户库编辑弹窗应使用自适应宽度");
+assert(
+  source.includes('custom-class="account-info-dialog"'),
+  "账户库编辑弹窗应有独立样式类"
+);
+assert(
+  /::v-deep \.account-info-dialog\s*\{[\s\S]*max-width:\s*1160px;/m.test(source),
+  "账户库编辑弹窗大屏应限制最大宽度"
+);
+
+console.log("account-info-layout-polish test passed");

ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js

@@ -16,4 +16,21 @@ assert(
 );
 assert(source.includes("tag.ruleName"), "异常标签列应展示标签名称");
 
+const amountColumnIndex = source.indexOf('label="交易金额"');
+const hitTagColumnIndex = source.indexOf('label="异常标签"');
+assert.notStrictEqual(amountColumnIndex, -1, "列表应保留交易金额列");
+assert.notStrictEqual(hitTagColumnIndex, -1, "列表应保留异常标签列");
+assert(
+  amountColumnIndex < hitTagColumnIndex,
+  "流水明细查询列表中交易金额列应展示在异常标签列前面"
+);
+assert(
+  source.includes('label="摘要 / 交易类型" min-width="200"'),
+  "流水明细查询摘要列不应占用过宽"
+);
+assert(
+  source.includes('width="120"') && source.includes('label="异常标签" min-width="220"'),
+  "流水明细查询金额列和异常标签列应保持紧凑宽度"
+);
+
 console.log("detail-query-hit-tags-list test passed");

ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js

@@ -38,3 +38,30 @@ const source = fs.readFileSync(
   "label=\"关系\"",
   "prop=\"relationType\"",
 ].forEach((token) => assert(!source.includes(token), token));
+
+assert(
+  /\.suspicious-filter-select\s*\{[\s\S]*width:\s*240px;/m.test(source),
+  "命中模型筛选框宽度应能容纳较长模型名称"
+);
+assert(
+  /\.suspicious-type-select\s*\{[\s\S]*width:\s*240px;/m.test(source),
+  "预警类型筛选框宽度应能容纳外部人员可疑关系"
+);
+assert(
+  /\.suspicious-filter-form :deep\(\.el-button\)\s*\{[\s\S]*min-width:\s*88px;/m.test(source),
+  "涉疑交易查询按钮应保持稳定宽度"
+);
+
+const riskDetailAmountIndex = source.indexOf('label="交易金额"');
+const riskDetailTagIndex = source.indexOf('label="异常标签"');
+assert.notStrictEqual(riskDetailAmountIndex, -1, "涉疑交易明细应保留交易金额列");
+assert.notStrictEqual(riskDetailTagIndex, -1, "涉疑交易明细应保留异常标签列");
+assert(
+  riskDetailAmountIndex < riskDetailTagIndex,
+  "涉疑交易明细中交易金额列应展示在异常标签列前面"
+);
+assert(
+  source.includes('label="交易金额" width="120"') &&
+    source.includes('label="异常标签" min-width="220"'),
+  "涉疑交易明细金额列和异常标签列应保持紧凑宽度"
+);