style(frontend): 表格首列左对齐其余列居中

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

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

@@ -4,6 +4,7 @@ type Column<RecordType extends object> = TableColumnsType<RecordType>[number]
 
 type WidthContext<RecordType extends object> = {
   leafPercent: WeakMap<Column<RecordType>, number>
+  firstLeaf: Column<RecordType> | undefined
 }
 
 /**
@@ -36,7 +37,7 @@ export function normalizePercentColumns<RecordType extends object>(
     leafPercent.set(column, (weight / totalWeight) * budgetPercent)
   }
 
-  return applyPercentWidths(columns, { leafPercent })
+  return applyPercentWidths(columns, { leafPercent, firstLeaf: leaves[0] })
 }
 
 function applyPercentWidths<RecordType extends object>(
@@ -59,7 +60,10 @@ function applyPercentWidths<RecordType extends object>(
     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<RecordType extends object>(column: Column<RecordType>)
   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') {

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('百分比表格：没有列宽时平均分配', () => {