表格与页面样式调整

src/components/data-table/component.tsx

@@ -10,11 +10,11 @@ import { Loader } from "lucide-react"
 import type { CSSProperties } from "react"
 import { Pagination, type PaginationProps } from "@/components/ui/pagination"
 import {
+  Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
-  Table as TableRoot,
   TableRow,
 } from "@/components/ui/table"
 import { cn } from "@/lib/utils"
@@ -75,31 +75,32 @@ export function DataTable<T extends Record<string, unknown>>(
     },
   })
 
-  const pinStyle = (column: Column<T>) => {
+  const pinStyle = (column: Column<T>, header?: boolean) => {
     const pinned = column.getIsPinned()
     if (!pinned) return {}
     return {
-      position: pinned ? ("sticky" as const) : undefined,
-      backgroundColor: "white",
-      zIndex: 1,
-      ...{
-        left: {
-          left: column.getStart(pinned),
-          boxShadow: "inset 1px 0 var(--border)",
-        },
-        right: {
-          right: column.getAfter(pinned),
-          boxShadow: "inset 1px 0 var(--border)",
-        },
-      }[pinned],
-    } as CSSProperties
+      left: {
+        left: column.getStart(pinned),
+        boxShadow: header
+          ? "inset -1px -1px var(--border)"
+          : "inset -1px 0 var(--border)",
+      } as CSSProperties,
+      right: {
+        right: column.getAfter(pinned),
+        boxShadow: header
+          ? "inset 1px -1px var(--border)"
+          : "inset 1px 0 var(--border)",
+      } as CSSProperties,
+    }[pinned]
   }
 
   return (
-    <div className={cn("flex flex-col gap-3", props.classNames?.root)}>
+    <div
+      className={cn("flex-auto flex flex-col gap-3", props.classNames?.root)}
+    >
       {/* 数据表 */}
-      <div className="rounded-md relative bg-card">
-        <TableRoot>
+      <div className="flex-auto overflow-hidden relative">
+        <Table className="max-w-full max-h-full">
           <TableHeader>
             {table.getHeaderGroups().map(group => (
               <TableRow key={group.id}>
@@ -107,7 +108,8 @@ export function DataTable<T extends Record<string, unknown>>(
                   <TableHead
                     key={header.id}
                     colSpan={header.colSpan}
-                    style={pinStyle(header.column)}
+                    className="sticky top-0 bg-card z-20 shadow-[inset_0_-1px_var(--border)]"
+                    style={pinStyle(header.column, true)}
                   >
                     {header.isPlaceholder
                       ? null
@@ -147,7 +149,11 @@ export function DataTable<T extends Record<string, unknown>>(
                   className={cn("h-14", props.classNames?.dataRow)}
                 >
                   {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id} style={pinStyle(cell.column)}>
+                    <TableCell
+                      key={cell.id}
+                      className="sticky bg-card z-10"
+                      style={pinStyle(cell.column)}
+                    >
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),
@@ -158,9 +164,9 @@ export function DataTable<T extends Record<string, unknown>>(
               ))
             )}
           </TableBody>
-        </TableRoot>
+        </Table>
         {props.status === "load" && (
-          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
+          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition z-50">
             <Loader className="animate-spin" />
             <span>加载中</span>
           </div>
@@ -168,7 +174,9 @@ export function DataTable<T extends Record<string, unknown>>(
       </div>
 
       {/* 分页器 */}
-      {props.pagination && <Pagination {...props.pagination} />}
+      {props.pagination && (
+        <Pagination {...props.pagination} className="flex-none self-center" />
+      )}
     </div>
   )
 }