fix(frontend): 修复百分比表格列宽与单元格居中

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;
+}

apps/frontend/src/utils/percent-table-layout.ts

@@ -18,21 +18,21 @@ export function normalizePercentColumns<RecordType extends object>(
   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<Column<RecordType>, 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<RecordType extends object>(
       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<RecordType extends object>(
     }
 
     return {
-      ...column,
+      ...withoutMinWidth(column),
       width: `${(context.leafPercent.get(column) ?? 0).toFixed(4)}%`,
       align: 'center',
     }
@@ -78,7 +78,16 @@ function collectLeaves<RecordType extends object>(
   }
 }
 
-function numericWidth(width: Column<object>['width']) {
+function columnWeight<RecordType extends object>(column: Column<RecordType>) {
+  return numericWidth(column.width) ?? numericWidth(column.minWidth)
+}
+
+function withoutMinWidth<RecordType extends object>(column: Column<RecordType>) {
+  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<object>['width']) {
   return null
 }
 
-function percentOf(width: Column<object>['width']) {
+function percentOf(width: unknown) {
   if (typeof width !== 'string' || !width.endsWith('%')) return 0
   const parsed = Number.parseFloat(width)
   return Number.isFinite(parsed) ? parsed : 0

apps/frontend/tests/percent-table-layout.test.ts

@@ -31,6 +31,19 @@ test('百分比表格：没有列宽时平均分配', () => {
   )
 })
 
+test('百分比表格：minWidth 作为比例权重并移除最小宽度约束', () => {
+  const columns: TableColumnsType<Record<string, unknown>> = [
+    { 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<Record<string, unknown>> = [
     { title: 'A', dataIndex: 'a', width: 100 },