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

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') {