diff --git a/apps/frontend/src/styles/table.css b/apps/frontend/src/styles/table.css index 1819304a..c9ccca63 100644 --- a/apps/frontend/src/styles/table.css +++ b/apps/frontend/src/styles/table.css @@ -8,3 +8,19 @@ .ant-table-wrapper .ant-table-tbody > tr > td { text-align: center !important; } + +.ant-table-wrapper .ant-table-tbody > tr > td .cell-stack { + width: 100%; + justify-items: center; + text-align: center; +} + +.ant-table-wrapper .ant-table-tbody > tr > td .cell-stack > * { + max-width: 100%; + justify-self: center; + text-align: center; +} + +.ant-table-wrapper .ant-table-tbody > tr > td .cell-stack > .ant-space { + justify-content: center; +} diff --git a/apps/frontend/src/utils/percent-table-layout.ts b/apps/frontend/src/utils/percent-table-layout.ts index b7c71428..f285e864 100644 --- a/apps/frontend/src/utils/percent-table-layout.ts +++ b/apps/frontend/src/utils/percent-table-layout.ts @@ -18,21 +18,21 @@ export function normalizePercentColumns( collectLeaves(columns, leaves) const explicitWeights = leaves - .map((column) => numericWidth(column.width)) + .map((column) => columnWeight(column)) .filter((width): width is number => width !== null) const fallbackWeight = explicitWeights.length > 0 ? explicitWeights.reduce((sum, width) => sum + width, 0) / explicitWeights.length : 100 const totalWeight = leaves.reduce( - (sum, column) => sum + (numericWidth(column.width) ?? fallbackWeight), + (sum, column) => sum + (columnWeight(column) ?? fallbackWeight), 0, ) const budgetPercent = Math.max(60, 100 - Math.max(0, options.reservedPercent ?? 0)) const leafPercent = new WeakMap, number>() for (const column of leaves) { - const weight = numericWidth(column.width) ?? fallbackWeight + const weight = columnWeight(column) ?? fallbackWeight leafPercent.set(column, (weight / totalWeight) * budgetPercent) } @@ -49,7 +49,7 @@ function applyPercentWidths( const normalizedChildren = applyPercentWidths(children, context) const width = normalizedChildren.reduce((sum, child) => sum + percentOf(child.width), 0) return { - ...column, + ...withoutMinWidth(column), width: `${width.toFixed(4)}%`, align: 'center', children: normalizedChildren, @@ -57,7 +57,7 @@ function applyPercentWidths( } return { - ...column, + ...withoutMinWidth(column), width: `${(context.leafPercent.get(column) ?? 0).toFixed(4)}%`, align: 'center', } @@ -78,7 +78,16 @@ function collectLeaves( } } -function numericWidth(width: Column['width']) { +function columnWeight(column: Column) { + return numericWidth(column.width) ?? numericWidth(column.minWidth) +} + +function withoutMinWidth(column: Column) { + const { minWidth: _minWidth, ...rest } = column + return rest +} + +function numericWidth(width: unknown) { if (typeof width === 'number' && Number.isFinite(width) && width > 0) return width if (typeof width === 'string') { const parsed = Number.parseFloat(width) @@ -87,7 +96,7 @@ function numericWidth(width: Column['width']) { return null } -function percentOf(width: Column['width']) { +function percentOf(width: unknown) { if (typeof width !== 'string' || !width.endsWith('%')) return 0 const parsed = Number.parseFloat(width) return Number.isFinite(parsed) ? parsed : 0 diff --git a/apps/frontend/tests/percent-table-layout.test.ts b/apps/frontend/tests/percent-table-layout.test.ts index 69f71da0..7ebc1088 100644 --- a/apps/frontend/tests/percent-table-layout.test.ts +++ b/apps/frontend/tests/percent-table-layout.test.ts @@ -31,6 +31,19 @@ test('百分比表格:没有列宽时平均分配', () => { ) }) +test('百分比表格:minWidth 作为比例权重并移除最小宽度约束', () => { + const columns: TableColumnsType> = [ + { title: 'A', dataIndex: 'a', minWidth: 100 }, + { title: 'B', dataIndex: 'b', minWidth: 300 }, + ] + const result = normalizePercentColumns(columns) + assert.deepEqual( + result.map((column) => column.width), + ['25.0000%', '75.0000%'], + ) + assert.ok(result.every((column) => !('minWidth' in column))) +}) + test('百分比表格:选择列预留 4%', () => { const columns: TableColumnsType> = [ { title: 'A', dataIndex: 'a', width: 100 },