@meta-1/design 0.0.169 → 0.0.171

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.169",
+  "version": "0.0.171",
   "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 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 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 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"
@@ -61,7 +61,7 @@ function DialogContent({
         {children}
         {showClose ? (
           <DialogPrimitive.Close
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 z-10"
             onClick={onCloseClick}
           >
             <XIcon />
@@ -76,7 +76,7 @@ function DialogContent({
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left flex-shrink-0 p-6 pb-0", className)}
       data-slot="dialog-header"
       {...props}
     />
@@ -86,7 +86,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end flex-shrink-0 p-6 pt-0", className)}
       data-slot="dialog-footer"
       {...props}
     />

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

@@ -28,6 +28,7 @@ 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";
 
@@ -68,6 +69,8 @@ export interface DataTableProps<TData> {
   empty?: string;
   showHeader?: boolean;
   onRowClick?: (row: Row<TData>) => void;
+  /** 表格最大高度，设置后内容区将滚动，表头固定。支持 CSS 单位如 '500px', '50vh' 等 */
+  maxHeight?: string | number;
 }
 
 // 本地存储相关函数
@@ -173,6 +176,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     showHeader = true,
     autoHidePagination = true,
     inCard = false,
+    maxHeight,
   } = props;
 
   const config = useContext(UIXContext);
@@ -363,6 +367,108 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     return pagination;
   }, [pagination, autoHidePagination]);
 
+  // 渲染表头的通用函数
+  const renderTableHeader = (options: { fixedHeader?: boolean } = {}) => {
+    const { fixedHeader = false } = options;
+    return (
+      <TableHeader className={cn(!showHeader && "hidden", fixedHeader && "sticky top-0 z-20 bg-background")}>
+        {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: fixedHeader ? 30 : 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 +490,23 @@ 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 ? (
+          // 有高度限制时，使用 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>
+          </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/dialog/index.tsx

@@ -9,6 +9,7 @@ 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";
 
@@ -51,13 +52,11 @@ export const Dialog: FC<DialogProps> = (props) => {
         onOverlayClick={maskClosable ? onCancel : () => {}}
         showClose={closable}
       >
-        {title || description ? (
-          <DialogHeader>
-            {title ? <DialogTitle>{title}</DialogTitle> : null}
-            {description ? <DialogDescription>{description}</DialogDescription> : null}
-          </DialogHeader>
-        ) : null}
-        <div className="my-2">{props.children}</div>
+        <DialogHeader className={cn(!title && !description && "sr-only")}>
+          <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>
         {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")}>

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

@@ -21,6 +21,14 @@ export interface PaginationProps {
   onChange?: (page: number) => void;
   onSizeChange?: (size: number) => void;
   sizeOptions?: number[];
+  /** 简单模式：只显示上一页、当前页、下一页 */
+  simple?: boolean;
+  /** 是否显示总数信息 */
+  showTotal?: boolean;
+  /** 是否显示页面大小选择器 */
+  showSizeChanger?: boolean;
+  /** 是否显示快速跳转 */
+  showQuickJumper?: boolean;
 }
 
 export const SIZE_OPTIONS = [10, 20, 50, 100];
@@ -66,7 +74,18 @@ const generatePageNumbers = (currentPage: number, totalPages: number) => {
 };
 
 export const Pagination: FC<PaginationProps> = (props) => {
-  const { total = 0, page = 1, size = 20, sizeOptions = SIZE_OPTIONS, onChange, onSizeChange } = props;
+  const {
+    total = 0,
+    page = 1,
+    size = 20,
+    sizeOptions = SIZE_OPTIONS,
+    onChange,
+    onSizeChange,
+    simple = false,
+    showTotal = true,
+    showSizeChanger = true,
+    showQuickJumper = true,
+  } = props;
 
   const config = useContext(UIXContext);
   const totalPageText = get(config.locale, "Pagination.totalPage");
@@ -101,14 +120,53 @@ export const Pagination: FC<PaginationProps> = (props) => {
 
   const pageNumbers = generatePageNumbers(page, totalPage);
 
+  if (simple) {
+    // 简单模式渲染
+    return (
+      <div className="flex items-center justify-center">
+        <ShadcnPagination>
+          <PaginationContent>
+            {/* 上一页 */}
+            <PaginationItem>
+              <PaginationPrevious
+                className={page === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                onClick={page === 1 ? undefined : () => onChange?.(page - 1)}
+                size="default"
+              />
+            </PaginationItem>
+
+            {/* 当前页 */}
+            <PaginationItem>
+              <PaginationLink isActive size="default">
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+
+            {/* 下一页 */}
+            <PaginationItem>
+              <PaginationNext
+                className={page === totalPage ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                onClick={page === totalPage ? undefined : () => onChange?.(page + 1)}
+                size="default"
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </ShadcnPagination>
+      </div>
+    );
+  }
+
+  // 标准模式渲染
   return (
     <div className="flex items-center justify-center space-x-6">
       <ShadcnPagination>
         {/* 总数信息 */}
-        <div className="flex items-center space-x-2 text-muted-foreground text-sm">
-          <span>{totalPageText?.replace("%total", `${total}`)}</span>
-          <span>{totalText?.replace("%page", `${totalPage}`)}</span>
-        </div>
+        {showTotal ? (
+          <div className="flex items-center space-x-2 text-muted-foreground text-sm">
+            <span>{totalPageText?.replace("%total", `${total}`)}</span>
+            <span>{totalText?.replace("%page", `${totalPage}`)}</span>
+          </div>
+        ) : null}
         {/* 分页导航 */}
         <PaginationContent>
           {/* 上一页 */}
@@ -148,32 +206,38 @@ export const Pagination: FC<PaginationProps> = (props) => {
           </PaginationItem>
         </PaginationContent>
         {/* 控制区域 */}
-        <div className="flex items-center space-x-3">
-          {/* 页面大小选择 */}
-          <Select
-            className="w-auto"
-            onChange={(v) => onSizeChange?.(Number(v))}
-            options={sizeOptions.map((v) => ({ label: sizeText?.replace("%size", `${v}`) || "", value: `${v}` }))}
-            value={`${size}`}
-          />
-
-          {/* 跳转输入框 */}
-          <div className="flex items-center space-x-1 text-sm">
-            <span>{go}</span>
-            <Input
-              className="h-9 w-12 rounded px-2 text-center"
-              onChange={handleChange}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  onChange?.(Number(pageValue));
-                }
-              }}
-              type="text"
-              value={pageValue}
-            />
-            <span>{goSuffix}</span>
+        {showSizeChanger || showQuickJumper ? (
+          <div className="flex items-center space-x-3">
+            {/* 页面大小选择 */}
+            {showSizeChanger ? (
+              <Select
+                className="w-auto"
+                onChange={(v) => onSizeChange?.(Number(v))}
+                options={sizeOptions.map((v) => ({ label: sizeText?.replace("%size", `${v}`) || "", value: `${v}` }))}
+                value={`${size}`}
+              />
+            ) : null}
+
+            {/* 跳转输入框 */}
+            {showQuickJumper ? (
+              <div className="flex items-center space-x-1 text-sm">
+                <span>{go}</span>
+                <Input
+                  className="h-9 w-12 rounded px-2 text-center"
+                  onChange={handleChange}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      onChange?.(Number(pageValue));
+                    }
+                  }}
+                  type="text"
+                  value={pageValue}
+                />
+                <span>{goSuffix}</span>
+              </div>
+            ) : null}
           </div>
-        </div>
+        ) : null}
       </ShadcnPagination>
     </div>
   );