diff --git a/apps/frontend/src/styles/table.css b/apps/frontend/src/styles/table.css index c9ccca63..2427e08d 100644 --- a/apps/frontend/src/styles/table.css +++ b/apps/frontend/src/styles/table.css @@ -1,4 +1,4 @@ -/* 全项目表格统一规范:宽度百分比自适应,表头与内容全部居中。 */ +/* 全项目表格统一规范:宽度百分比自适应,首列左对齐,其余表头与内容居中。 */ .ant-table-wrapper .ant-table { width: 100%; table-layout: fixed; @@ -9,6 +9,11 @@ text-align: center !important; } +.ant-table-wrapper .ant-table-thead > tr > th.percent-table-first-column, +.ant-table-wrapper .ant-table-tbody > tr > td.percent-table-first-column { + text-align: left !important; +} + .ant-table-wrapper .ant-table-tbody > tr > td .cell-stack { width: 100%; justify-items: center; @@ -24,3 +29,17 @@ .ant-table-wrapper .ant-table-tbody > tr > td .cell-stack > .ant-space { justify-content: center; } + +.ant-table-wrapper .ant-table-tbody > tr > td.percent-table-first-column .cell-stack { + justify-items: start; + text-align: left; +} + +.ant-table-wrapper .ant-table-tbody > tr > td.percent-table-first-column .cell-stack > * { + justify-self: start; + text-align: left; +} + +.ant-table-wrapper .ant-table-tbody > tr > td.percent-table-first-column .cell-stack > .ant-space { + justify-content: flex-start; +} diff --git a/apps/frontend/src/utils/percent-table-layout.ts b/apps/frontend/src/utils/percent-table-layout.ts index f285e864..11e2e332 100644 --- a/apps/frontend/src/utils/percent-table-layout.ts +++ b/apps/frontend/src/utils/percent-table-layout.ts @@ -4,6 +4,7 @@ type Column = TableColumnsType[number] type WidthContext = { leafPercent: WeakMap, number> + firstLeaf: Column | undefined } /** @@ -36,7 +37,7 @@ export function normalizePercentColumns( leafPercent.set(column, (weight / totalWeight) * budgetPercent) } - return applyPercentWidths(columns, { leafPercent }) + return applyPercentWidths(columns, { leafPercent, firstLeaf: leaves[0] }) } function applyPercentWidths( @@ -59,7 +60,10 @@ function applyPercentWidths( return { ...withoutMinWidth(column), width: `${(context.leafPercent.get(column) ?? 0).toFixed(4)}%`, - align: 'center', + align: column === context.firstLeaf ? 'left' : 'center', + ...(column === context.firstLeaf + ? { className: appendClassName(column.className, 'percent-table-first-column') } + : {}), } }) } @@ -87,6 +91,10 @@ function withoutMinWidth(column: Column) return rest } +function appendClassName(className: string | undefined, next: string) { + return [className, next].filter(Boolean).join(' ') +} + function numericWidth(width: unknown) { if (typeof width === 'number' && Number.isFinite(width) && width > 0) return width if (typeof width === 'string') { diff --git a/apps/frontend/tests/percent-table-layout.test.ts b/apps/frontend/tests/percent-table-layout.test.ts index 7ebc1088..dc695c8e 100644 --- a/apps/frontend/tests/percent-table-layout.test.ts +++ b/apps/frontend/tests/percent-table-layout.test.ts @@ -17,7 +17,9 @@ test('百分比表格:按原列宽权重归一化到 100%', () => { result.map((column) => column.width), ['25.0000%', '75.0000%'], ) - assert.ok(result.every((column) => column.align === 'center')) + assert.equal(result[0]?.align, 'left') + assert.equal(result[1]?.align, 'center') + assert.match(String(result[0]?.className), /percent-table-first-column/) }) test('百分比表格:没有列宽时平均分配', () => {