style(frontend): 全项目表格统一百分比布局并居中

2026-10-24 14:49:23 +08:00
parent a96229a106
commit ce8efa6bad
52 changed files with 346 additions and 145 deletions
@@ -0,0 +1,32 @@
+import { Table as AntTable } from 'antd'
+import type { TableProps } from 'antd'
+
+import { normalizePercentColumns } from '@/utils/percent-table-layout'
+
+/**
+ * 全项目统一表格：列宽转百分比、表头与内容居中。
+ *
+ * 业务表格仍按原列宽数值表达相对比例，由这里统一归一化为 100%。
+ * rowSelection / expandable 会额外占用 AntD 内置列，因此预留少量百分比。
+ */
+export default function PercentTable<RecordType extends object = Record<string, unknown>>(
+  props: TableProps<RecordType>,
+) {
+  const { columns, scroll, tableLayout: _tableLayout, ...rest } = props
+  const reservedPercent =
+    (props.rowSelection ? 4 : 0) +
+    (props.expandable && typeof props.expandable === 'object' ? 4 : 0)
+  const normalizedColumns = columns
+    ? normalizePercentColumns(columns, { reservedPercent })
+    : columns
+  const scrollConfig = typeof scroll === 'object' && scroll ? scroll : {}
+
+  return (
+    <AntTable<RecordType>
+      {...rest}
+      columns={normalizedColumns}
+      tableLayout="fixed"
+      scroll={{ ...scrollConfig, x: '100%' }}
+    />
+  )
+}