@meta-1/design 0.0.170 → 0.0.172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.170",
+  "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

@@ -68,6 +68,8 @@ export interface DataTableProps<TData> {
   empty?: string;
   showHeader?: boolean;
   onRowClick?: (row: Row<TData>) => void;
+  /** 表格最大高度，设置后内容区将滚动，表头固定。支持 CSS 单位如 '500px', '50vh' 等 */
+  maxHeight?: string | number;
 }
 
 // 本地存储相关函数
@@ -173,6 +175,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     showHeader = true,
     autoHidePagination = true,
     inCard = false,
+    maxHeight,
   } = props;
 
   const config = useContext(UIXContext);
@@ -363,6 +366,107 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     return pagination;
   }, [pagination, autoHidePagination]);
 
+  // 渲染表头的通用函数
+  const renderTableHeader = () => {
+    return (
+      <TableHeader className={cn(!showHeader && "hidden")}>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              const sticky = mounted
+                ? getSticky(header.column.id, leftStickyColumns, rightStickyColumns)
+                : { enable: false };
+              const content = header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext());
+              return (
+                <TableHead
+                  className={cn(
+                    sticky.enable ? "table-sticky-col sticky" : null,
+                    sticky.last ? "table-sticky-col-last" : null,
+                    sticky.first ? "table-sticky-col-first" : null,
+                    // biome-ignore lint/suspicious/noExplicitAny: <className>
+                    (header.column.columnDef as any).className,
+                  )}
+                  key={header.id}
+                  style={
+                    sticky.enable
+                      ? {
+                          zIndex: 10,
+                          minWidth: sticky.width,
+                          [sticky.position as string]: sticky.offset,
+                        }
+                      : undefined
+                  }
+                >
+                  {sticky.enable ? <div className="inner flex h-10 items-center px-2">{content}</div> : content}
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+    );
+  };
+
+  // 渲染表体的通用函数
+  const renderTableBody = () => {
+    return (
+      <TableBody>
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map((row) => (
+            <TableRow
+              data-state={row.getIsSelected() && "selected"}
+              key={row.id}
+              onClick={() => props.onRowClick?.(row)}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const sticky = mounted
+                  ? getSticky(cell.column.id, leftStickyColumns, rightStickyColumns)
+                  : { enable: false };
+                const ctx = cell.getContext();
+                const render = ctx.renderValue;
+                // biome-ignore lint/suspicious/noExplicitAny: <formatters>
+                const formatters = (cell.column.columnDef as any).formatters || [];
+                ctx.renderValue = () => {
+                  return formatValue(render(), formatters, cellHandles);
+                };
+                const content = flexRender(cell.column.columnDef.cell, ctx);
+                return (
+                  <TableCell
+                    className={cn(
+                      sticky.enable ? "table-sticky-col sticky" : null,
+                      sticky.last ? "table-sticky-col-last" : null,
+                      sticky.first ? "table-sticky-col-first" : null,
+                    )}
+                    key={cell.id}
+                    style={
+                      sticky.enable
+                        ? {
+                            zIndex: 10,
+                            minWidth: sticky.width,
+                            [sticky.position as string]: sticky.offset,
+                          }
+                        : undefined
+                    }
+                  >
+                    {sticky.enable ? <div className="inner flex h-10 items-center px-2">{content}</div> : content}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell className="h-24 text-center" colSpan={tableColumns.length}>
+              {empty}
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    );
+  };
+
   return (
     <>
       {showToolbar ? (
@@ -384,99 +488,32 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
         </div>
       ) : null}
       <div className={cn("relative")}>
-        <Table className={classNames("data-table", inCard ? "in-card" : null, !mounted && "invisible")}>
-          <TableHeader className={cn(!showHeader && "hidden")}>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  // 在未挂载时禁用粘性列功能，避免 SSR 水合错误
-                  const sticky = mounted
-                    ? getSticky(header.column.id, leftStickyColumns, rightStickyColumns)
-                    : { enable: false };
-                  const content = header.isPlaceholder
-                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext());
-                  return (
-                    <TableHead
-                      className={cn(
-                        sticky.enable ? "table-sticky-col sticky" : null,
-                        sticky.last ? "table-sticky-col-last" : null,
-                        sticky.first ? "table-sticky-col-first" : null,
-                        // biome-ignore lint/suspicious/noExplicitAny: <className>
-                        (header.column.columnDef as any).className,
-                      )}
-                      key={header.id}
-                      style={
-                        sticky.enable
-                          ? {
-                              zIndex: 10,
-                              minWidth: sticky.width,
-                              [sticky.position as string]: sticky.offset,
-                            }
-                          : undefined
-                      }
-                    >
-                      {sticky.enable ? <div className="inner flex h-10 items-center px-2">{content}</div> : content}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  data-state={row.getIsSelected() && "selected"}
-                  key={row.id}
-                  onClick={() => props.onRowClick?.(row)}
-                >
-                  {row.getVisibleCells().map((cell) => {
-                    // 在未挂载时禁用粘性列功能，避免 SSR 水合错误
-                    const sticky = mounted
-                      ? getSticky(cell.column.id, leftStickyColumns, rightStickyColumns)
-                      : { enable: false };
-                    const ctx = cell.getContext();
-                    const render = ctx.renderValue;
-                    // biome-ignore lint/suspicious/noExplicitAny: <formatters>
-                    const formatters = (cell.column.columnDef as any).formatters || [];
-                    ctx.renderValue = () => {
-                      return formatValue(render(), formatters, cellHandles);
-                    };
-                    const content = flexRender(cell.column.columnDef.cell, ctx);
-                    return (
-                      <TableCell
-                        className={cn(
-                          sticky.enable ? "table-sticky-col sticky" : null,
-                          sticky.last ? "table-sticky-col-last" : null,
-                          sticky.first ? "table-sticky-col-first" : null,
-                        )}
-                        key={cell.id}
-                        style={
-                          sticky.enable
-                            ? {
-                                zIndex: 10,
-                                minWidth: sticky.width,
-                                [sticky.position as string]: sticky.offset,
-                              }
-                            : undefined
-                        }
-                      >
-                        {sticky.enable ? <div className="inner flex h-10 items-center px-2">{content}</div> : content}
-                      </TableCell>
-                    );
-                  })}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell className="h-24 text-center" colSpan={tableColumns.length}>
-                  {empty}
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
+        {maxHeight ? (
+          // 有高度限制时：直接渲染 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>
+        ) : (
+          // 无高度限制时，使用原有布局
+          <Table className={classNames("data-table", inCard ? "in-card" : null, !mounted && "invisible")}>
+            {renderTableHeader()}
+            {renderTableBody()}
+          </Table>
+        )}
         <div className={cn("py-4", !mounted && "invisible")}>
           {showPagination && (
             <Pagination

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

@@ -55,7 +55,7 @@ export const Dialog: FC<DialogProps> = (props) => {
           <DialogTitle className={cn(!title && "sr-only")}>{title || "Dialog"}</DialogTitle>
           {description ? <DialogDescription>{description}</DialogDescription> : null}
         </DialogHeader>
-        <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto px-6 py-4">{props.children}</div>
+        <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")}>