fix(web): use page scrolling for all tables

web/tests/table-fixed-header.test.cjs

@@ -1,18 +1,19 @@
 const assert = require('node:assert/strict');
 const { readFileSync } = require('node:fs');
 const { test } = require('node:test');
+const vm = require('node:vm');
 const ts = require('typescript');
 
-// 表格统一形态：固定表头（scroll.y）+ sticky 兜底 + 横向滚动 + 操作列固定右侧 + 分页。
+// 页面纵向滚动 + sticky 表头吸顶 + 横向滚动 + 固定列 + 分页。
 const files = [
-  'src/components/accounts/MonitoringAccountList.tsx',
-  'src/components/accounts/AccountManagementList.tsx',
-  'src/pages/accounts/import.tsx',
-  'src/pages/network-exits/index.tsx',
-  'src/pages/gateways/index.tsx',
+  ['src/components/accounts/MonitoringAccountList.tsx', 1100],
+  ['src/components/accounts/AccountManagementList.tsx', 'max-content'],
+  ['src/pages/accounts/import.tsx', 1000],
+  ['src/pages/network-exits/index.tsx', 1100],
+  ['src/pages/gateways/index.tsx', 960],
 ];
 
-for (const file of files) {
+for (const [file, width] of files) {
   const source = ts.createSourceFile(
     file,
     readFileSync(`${__dirname}/../${file}`, 'utf8'),
@@ -21,13 +22,74 @@ for (const file of files) {
     ts.ScriptKind.TSX,
   );
   const code = source.getFullText();
+  const tables = [];
+  function visit(node) {
+    if ((ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) && node.tagName.getText(source) === 'Table') tables.push(node);
+    ts.forEachChild(node, visit);
+  }
+  visit(source);
 
-  test(`${file} 表格使用统一固定表头与分页形态`, () => {
-    assert.match(code, /sticky/, '应开启表头吸顶兜底');
-    assert.match(code, /pagination=\{tablePagination\(\)\}/, '应恢复分页（每页 20，单页隐藏）');
-    assert.doesNotMatch(code, /pagination=\{false\}/, '不应再保留 pagination={false}');
-    assert.match(code, /\.\.\.fixedLeft</, '首列应固定在左侧');
-    assert.match(code, /\.\.\.fixedRight</, '操作列应固定在右侧');
-    assert.match(code, /useOverflowGrid\(/, '应按数据量按需开启表内滚动/横向滚动');
+  test(`${file} 保留表头吸顶、分页和固定列`, () => {
+    assert.equal(tables.length, 1);
+    const props = tables[0].attributes.properties;
+    assert.ok(props.some(prop => prop.name?.getText(source) === 'sticky'));
+    assert.match(code, /pagination=\{tablePagination\(\)\}/);
+    assert.doesNotMatch(code, /pagination=\{false\}/);
+    assert.match(code, /\.\.\.fixedLeft</);
+    assert.match(code, /\.\.\.fixedRight</);
+  });
+
+  test(`${file} 数据多或小屏时仍使用页面纵向滚动，横向滚动不变`, () => {
+    const scroll = tables[0].attributes.properties.find(prop => prop.name?.getText(source) === 'scroll');
+    assert.ok(scroll?.initializer && ts.isJsxExpression(scroll.initializer));
+    const expression = scroll.initializer.expression.getText(source);
+    for (const horizontal of [false, true]) {
+      for (const height of [480, 1080]) {
+        for (const rowCount of [0, 1, 20, 100]) {
+          const result = vm.runInNewContext(`(${expression})`, {
+            horizontal,
+            vertical: rowCount * 48 + 120 >= height - 300 || horizontal,
+            tableScroll: (x, y) => ({ x, y }),
+          });
+          assert.equal(Object.hasOwn(result, 'y'), false, `不应配置 scroll.y（行数 ${rowCount}，高度 ${height}）`);
+          assert.equal(result.x, width === 'max-content' ? width : horizontal ? width : undefined);
+        }
+      }
+    }
+    assert.doesNotMatch(code, /window\.innerHeight|useOverflowGrid|tableScroll/, '不再保留按高度和行数启用表内滚动的旧路径');
+    if (width !== 'max-content') assert.match(code, /!Grid\.useBreakpoint\(\)\.xl/, '横向断点保持 xl');
   });
 }
+
+const tableFile = `${__dirname}/../src/utils/table.ts`;
+const tableCode = ts.transpileModule(readFileSync(tableFile, 'utf8'), {
+  fileName: tableFile,
+  compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+}).outputText;
+const tableModule = { exports: {} };
+vm.runInNewContext(tableCode, { exports: tableModule.exports }, { filename: tableFile });
+const helpers = tableModule.exports;
+
+test('分页仍为每页 20 条，单页隐藏分页条', () => {
+  assert.equal(helpers.TABLE_PAGE_SIZE, 20);
+  const pagination = helpers.tablePagination();
+  assert.equal(pagination.pageSize, 20);
+  assert.equal(pagination.hideOnSinglePage, true);
+});
+
+test('固定列保留原配置且不修改输入', () => {
+  const column = { title: '账号', width: 240 };
+  for (const [helper, side] of [[helpers.fixedLeft, 'left'], [helpers.fixedRight, 'right']]) {
+    const fixed = helper(column);
+    assert.equal(fixed.fixed, side);
+    assert.equal(fixed.title, column.title);
+    assert.equal(fixed.width, column.width);
+    assert.notEqual(fixed, column);
+    assert.equal(Object.hasOwn(column, 'fixed'), false);
+  }
+});
+
+test('移除纵向滚动判断与无必要的滚动包装函数', () => {
+  assert.equal(helpers.useOverflowGrid, undefined);
+  assert.equal(helpers.tableScroll, undefined);
+});