feat: 完成align迁移

packages/app/src/components/table/hooks.ts

@@ -4,14 +4,13 @@ import {
   getCoreRowModel,
 } from '@tanstack/react-table';
 import {ColumnType} from 'antd/es/table';
-import {useMemo, useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 
 function parseColumn<T>(columns: ColumnType<T>[]) {
   const hepler = createColumnHelper<Record<string, any>>();
 
   const tableColumns = columns.map(function (val) {
-    console.log(val);
-    const {dataIndex, title, render} = val;
+    const {dataIndex, title, render, align} = val;
     if (render) {
       return hepler.display({
         id: dataIndex?.toString() ?? 'id',
@@ -23,11 +22,15 @@ function parseColumn<T>(columns: ColumnType<T>[]) {
             props.row.index,
           );
         },
+        meta: {align},
       });
     }
+
     return hepler.accessor(dataIndex!.toString(), {
       header: title?.toString(),
       cell: props => props.getValue(),
+      minSize: 0,
+      meta: {align},
     });
   });
 

packages/app/src/components/table/index.tsx

@@ -38,24 +38,6 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
   const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
   const [isSearching] = useTableSearchState(searchContext);
   const colWidth = calcColumnsWidth(columns);
-  const scrollX = colWidth > 0 ? {x: colWidth} : void 0;
-
-  const tableColumns = useMemo(
-    function () {
-      return [
-        {
-          title: '序号',
-          width: 64,
-          render(_: any, __: any, idx: number) {
-            return idx + 1;
-          },
-          align: 'center',
-        },
-        ...columns,
-      ];
-    },
-    [columns],
-  );
 
   const {getHeaderGroups, getRowModel, getCenterTotalSize} = useTable(
     columns,
@@ -96,8 +78,20 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
               return (
                 <tr key={id}>
                   {getVisibleCells().map(function ({id, column, getContext}) {
+                    const align =
+                      (
+                        column.columnDef.meta as {
+                          align: 'left' | 'right' | 'center';
+                        }
+                      )?.align ?? 'left';
                     return (
-                      <td key={id} style={{width: column.getSize()}}>
+                      <td
+                        key={id}
+                        style={{
+                          width: column.getSize(),
+                          textAlign: align,
+                        }}
+                      >
                         {flexRender(column.columnDef.cell, getContext())}
                       </td>
                     );