@meta-1/design 0.0.171 → 0.0.172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.171",
+  "version": "0.0.172",
   "keywords": [
     "easykit",
     "design",

package/src/components/ui/dialog.tsx

@@ -52,7 +52,7 @@ function DialogContent({
       <DialogOverlay onClick={onOverlayClick} />
       <DialogPrimitive.Content
         className={cn(
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border bg-background shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col gap-4 w-full max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border bg-background shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
           className,
         )}
         data-slot="dialog-content"

package/src/components/ui/scroll-area.tsx

@@ -5,7 +5,7 @@ import { cn } from "@meta-1/design/lib/utils";
 
 function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
   return (
-    <ScrollAreaPrimitive.Root className={cn("relative", className)} data-slot="scroll-area" {...props}>
+    <ScrollAreaPrimitive.Root className={cn("relative overflow-hidden", className)} data-slot="scroll-area" {...props}>
       <ScrollAreaPrimitive.Viewport
         className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
         data-slot="scroll-area-viewport"

package/src/components/uix/data-table/index.tsx

@@ -28,7 +28,6 @@ import {
   type PaginationProps,
   Spin,
 } from "@meta-1/design";
-import { ScrollArea } from "@meta-1/design/components/ui/scroll-area";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
 import "./style.css";
 
@@ -368,10 +367,9 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
   }, [pagination, autoHidePagination]);
 
   // 渲染表头的通用函数
-  const renderTableHeader = (options: { fixedHeader?: boolean } = {}) => {
-    const { fixedHeader = false } = options;
+  const renderTableHeader = () => {
     return (
-      <TableHeader className={cn(!showHeader && "hidden", fixedHeader && "sticky top-0 z-20 bg-background")}>
+      <TableHeader className={cn(!showHeader && "hidden")}>
         {table.getHeaderGroups().map((headerGroup) => (
           <TableRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
@@ -394,7 +392,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                   style={
                     sticky.enable
                       ? {
-                          zIndex: fixedHeader ? 30 : 10,
+                          zIndex: 10,
                           minWidth: sticky.width,
                           [sticky.position as string]: sticky.offset,
                         }
@@ -491,14 +489,23 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
       ) : null}
       <div className={cn("relative")}>
         {maxHeight ? (
-          // 有高度限制时，使用 ScrollArea 包裹 TableBody，表头固定
-          <div className={cn("rounded-md border", !mounted && "invisible")}>
-            <Table className={classNames("data-table", inCard ? "in-card" : null)}>
-              {renderTableHeader({ fixedHeader: true })}
-            </Table>
-            <ScrollArea style={{ maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }}>
-              <Table className={classNames("data-table", inCard ? "in-card" : null)}>{renderTableBody()}</Table>
-            </ScrollArea>
+          // 有高度限制时：直接渲染 table 元素，避免 Table 组件自带的 overflow-x-auto 包裹层
+          <div className={cn("overflow-x-auto", !mounted && "invisible")}>
+            <div
+              className="overflow-y-auto"
+              style={{ maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }}
+            >
+              <table
+                className={classNames(
+                  "data-table data-table-sticky-header w-full caption-bottom text-sm",
+                  inCard ? "in-card" : null,
+                )}
+                data-slot="table"
+              >
+                {renderTableHeader()}
+                {renderTableBody()}
+              </table>
+            </div>
           </div>
         ) : (
           // 无高度限制时，使用原有布局

package/src/components/uix/data-table/style.css

@@ -38,3 +38,39 @@
 .data-table tr[data-state="selected"] td.table-sticky-col .inner {
   @apply bg-[hsl(var(--muted))];
 }
+
+.data-table-sticky-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  @apply bg-background;
+}
+
+.data-table-sticky-header.in-card thead {
+  @apply bg-card;
+}
+
+.data-table-sticky-header thead th {
+  @apply bg-background;
+  z-index: 20;
+}
+
+.data-table-sticky-header.in-card thead th {
+  @apply bg-card;
+}
+
+.data-table-sticky-header thead th.table-sticky-col {
+  z-index: 30;
+}
+
+.data-table-sticky-header thead th.table-sticky-col.sticky {
+  position: sticky !important;
+}
+
+.data-table-sticky-header thead th.table-sticky-col .inner {
+  @apply bg-background;
+}
+
+.data-table-sticky-header.in-card thead th.table-sticky-col .inner {
+  @apply bg-card;
+}

package/src/components/uix/dialog/index.tsx

@@ -9,7 +9,6 @@ import {
   DialogTitle,
   Dialog as UIDialog,
 } from "@meta-1/design/components/ui/dialog";
-import { ScrollArea } from "@meta-1/design/components/ui/scroll-area";
 import { Spin } from "@meta-1/design/components/uix/spin";
 import { cn } from "@meta-1/design/lib";
 
@@ -56,7 +55,7 @@ export const Dialog: FC<DialogProps> = (props) => {
           <DialogTitle className={cn(!title && "sr-only")}>{title || "Dialog"}</DialogTitle>
           {description ? <DialogDescription>{description}</DialogDescription> : null}
         </DialogHeader>
-        <ScrollArea className="min-h-0 flex-1 px-6 py-4">{props.children}</ScrollArea>
+        <div className="min-h-0 flex-1 overflow-auto px-6">{props.children}</div>
         {footer ? <DialogFooter>{footer}</DialogFooter> : null}
         {loading ? (
           <div className={cn("absolute top-0 right-0 bottom-0 left-0 bg-white/50", "flex items-center justify-center")}>