fix(web): offset sticky table headers below layout header

This commit is contained in:
2026-10-06 14:22:47 +08:00
parent 3d668769f6
commit ca3cbb8d37
8 changed files with 68 additions and 14 deletions
@@ -34,7 +34,7 @@ function setup({ accounts = [{ id: 'account-1', name: '真实昵称', business_s
async remove(resource, id) { calls.push({ resource, id }); if (options.actionError) throw options.actionError; },
};
if (id === '@/utils/helpers') return { accountReadiness: () => ({ ready: true, label: '可运行' }), dateTime: value => value, conflictMessage: (error, fallback) => error.message || fallback };
if (id === '@/utils/table') return { fixedLeft: column => ({ ...column, fixed: 'left' }), fixedRight: column => ({ ...column, fixed: 'right' }), tablePagination: () => ({ pageSize: 20, hideOnSinglePage: true }) };
if (id === '@/utils/table') return { fixedLeft: column => ({ ...column, fixed: 'left' }), fixedRight: column => ({ ...column, fixed: 'right' }), tablePagination: () => ({ pageSize: 20, hideOnSinglePage: true }), useTableSticky: () => ({ offsetHeader: 56 }) };
if (id.startsWith('@/components/accounts/')) return { default: marker(id.split('/').at(-1)) };
return requireWeb(id);
};
@@ -72,7 +72,7 @@ for (const rowCount of [1, 20, 100]) {
const s = await ready({ accounts: Array.from({ length: rowCount }, (_, i) => ({ id: `account-${i}`, name: `账号 ${i}` })), environments: [] });
const { columns, scroll, dataSource, sticky, pagination } = s.find('Table').props;
assert.equal(dataSource.length, rowCount);
assert.equal(sticky, true);
assert.deepEqual(sticky, { offsetHeader: 56 });
assert.deepEqual(pagination, { pageSize: 20, hideOnSinglePage: true });
assert.equal(columns[0].title, '账号');
assert.equal(columns[0].fixed, 'left');
+41 -2
View File
@@ -32,7 +32,10 @@ for (const [file, width] of files) {
test(`${file} 保留表头吸顶、分页和固定列`, () => {
assert.equal(tables.length, 1);
const props = tables[0].attributes.properties;
assert.ok(props.some(prop => prop.name?.getText(source) === 'sticky'));
const sticky = props.find(prop => prop.name?.getText(source) === 'sticky');
assert.ok(sticky?.initializer && ts.isJsxExpression(sticky.initializer), '表头吸顶必须预留顶部栏高度');
assert.equal(sticky.initializer.expression.getText(source), 'sticky');
assert.match(code, /const sticky = useTableSticky\(\);/);
assert.match(code, /pagination=\{tablePagination\(\)\}/);
assert.doesNotMatch(code, /pagination=\{false\}/);
assert.match(code, /\.\.\.fixedLeft</);
@@ -67,9 +70,45 @@ const tableCode = ts.transpileModule(readFileSync(tableFile, 'utf8'), {
compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
}).outputText;
const tableModule = { exports: {} };
vm.runInNewContext(tableCode, { exports: tableModule.exports }, { filename: tableFile });
const routeContext = {}, proProvider = {};
let layout = {}, token = {};
vm.runInNewContext(tableCode, { exports: tableModule.exports, require: id => {
if (id === '@ant-design/pro-components') return { RouteContext: routeContext, ProProvider: proProvider };
if (id === 'react') return { useContext: context => context === routeContext ? layout : { token } };
throw new Error(`Unexpected import: ${id}`);
} }, { filename: tableFile });
const helpers = tableModule.exports;
test('mix 布局默认固定顶部栏,表头须避让;自定义高度随布局更新', () => {
for (const height of [56, 72, 96]) {
for (const isMobile of [false, true]) {
layout = { hasHeader: true, layout: 'mix', fixedHeader: false, isMobile };
token = { layout: { header: { heightLayoutHeader: height } } };
assert.equal(helpers.useTableSticky().offsetHeader, height);
}
}
});
test('遵循 ProLayout 默认顶部栏高度', () => {
layout = { hasHeader: true, layout: 'mix' };
token = {};
assert.equal(helpers.useTableSticky().offsetHeader, 56);
});
test('其他布局只在存在固定顶部栏时预留高度', () => {
token = { layout: { header: { heightLayoutHeader: 72 } } };
for (const kind of ['top', 'side']) {
for (const hasHeader of [false, true]) {
for (const fixedHeader of [false, true]) {
layout = { layout: kind, hasHeader, fixedHeader };
assert.equal(helpers.useTableSticky().offsetHeader, hasHeader && fixedHeader ? 72 : 0);
}
}
}
layout = { layout: 'mix', hasHeader: false, fixedHeader: true };
assert.equal(helpers.useTableSticky().offsetHeader, 0);
});
test('分页仍为每页 20 条,单页隐藏分页条', () => {
assert.equal(helpers.TABLE_PAGE_SIZE, 20);
const pagination = helpers.tablePagination();