@meta-1/design 0.0.172 → 0.0.174

package/package.json

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

package/src/assets/style/theme.css

@@ -29,6 +29,8 @@
   --color-error-foreground: var(--error-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -66,6 +68,8 @@
     --error-foreground: rgba(245, 63, 63, 1);
     --warning: rgba(255, 247, 232, 1);
     --warning-foreground: rgba(255, 125, 0, 1);
+    --info: rgba(232, 243, 255, 1);
+    --info-foreground: rgba(37, 99, 235, 1);
     --muted: hsl(0 0% 96.1%);
     --muted-foreground: hsl(0 0% 45.1%);
     --accent: hsl(0 0% 96.1%);
@@ -101,12 +105,14 @@
     --popover-foreground: hsl(0 0% 98%);
     --primary: rgba(68, 133, 105, 1);
     --primary-foreground: rgba(255, 255, 255, 1);
-    --success: rgba(232, 255, 234, 1);
-    --success-foreground: rgba(0, 180, 42, 1);
-    --error: rgba(255, 236, 232, 1);
-    --error-foreground: rgba(245, 63, 63, 1);
-    --warning: rgba(255, 247, 232, 1);
-    --warning-foreground: rgba(255, 125, 0, 1);
+    --success: rgba(20, 83, 45, 0.2);
+    --success-foreground: rgba(74, 222, 128, 1);
+    --error: rgba(127, 29, 29, 0.2);
+    --error-foreground: rgba(252, 165, 165, 1);
+    --warning: rgba(120, 53, 15, 0.2);
+    --warning-foreground: rgba(251, 191, 36, 1);
+    --info: rgba(30, 58, 138, 0.2);
+    --info-foreground: rgba(147, 197, 253, 1);
     --secondary: hsl(0 0% 14.9%);
     --secondary-foreground: hsl(0 0% 98%);
     --muted: hsl(0 0% 14.9%);

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

@@ -3,13 +3,16 @@ import type { ComponentProps, ReactNode } from "react";
 import { cn } from "@meta-1/design/lib";
 import { Alert as UIAlert, AlertDescription as UIAlertDescription, AlertTitle as UIAlertTitle } from "../../ui/alert";
 
-export type AlertProps = ComponentProps<typeof UIAlert> & {
+export type AlertVariant = "default" | "destructive" | "success" | "error" | "warning" | "info";
+
+export type AlertProps = Omit<ComponentProps<typeof UIAlert>, "variant"> & {
   title?: ReactNode;
   description?: ReactNode;
   icon?: ReactNode;
   children?: ReactNode;
   titleClassName?: string;
   descriptionClassName?: string;
+  variant?: AlertVariant;
 };
 
 export const Alert = (props: AlertProps) => {
@@ -20,19 +23,30 @@ export const Alert = (props: AlertProps) => {
     children: childrenProp,
     titleClassName,
     descriptionClassName,
-    variant,
+    variant = "default",
     ...rest
   } = props;
 
   let className = props.className;
   const children = childrenProp || description;
 
-  if (variant === "destructive") {
-    className = cn("border-destructive/20 bg-destructive/10 text-destructive", className);
-  }
+  // 根据 variant 设置样式
+  const variantStyles: Record<AlertVariant, string> = {
+    default: "",
+    destructive: "border-destructive/20 bg-destructive/10 text-destructive",
+    success: "border-success-foreground/20 bg-success text-success-foreground",
+    error: "border-error-foreground/20 bg-error text-error-foreground",
+    warning: "border-warning-foreground/20 bg-warning text-warning-foreground",
+    info: "border-info-foreground/20 bg-info text-info-foreground",
+  };
+
+  className = cn(variantStyles[variant], className);
+
+  // 只有 default 和 destructive 传给 UIAlert，其他的我们自己处理样式
+  const uiVariant = variant === "destructive" ? "destructive" : "default";
 
   return (
-    <UIAlert {...rest} className={cn("flex gap-2", className)} variant={variant}>
+    <UIAlert {...rest} className={cn("flex gap-2", className)} variant={uiVariant}>
       {icon}
       <div className="flex flex-1 flex-col gap-2">
         {title && <UIAlertTitle className={titleClassName}>{title}</UIAlertTitle>}

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

@@ -55,10 +55,16 @@ 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-auto px-6">{props.children}</div>
+        <div className={cn("min-h-0 flex-1 overflow-auto px-6", !footer && "pb-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")}>
+          <div
+            className={cn(
+              "absolute top-0 right-0 bottom-0 left-0 rounded-lg",
+              "bg-background/80 backdrop-blur-sm",
+              "flex items-center justify-center",
+            )}
+          >
             <Spin />
           </div>
         ) : null}

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

@@ -5,16 +5,40 @@ export const useMessage = () => {
   return useMemo(() => {
     return {
       success: (message?: ReactNode, options?: ExternalToast) => {
-        toast.success(message, options);
+        toast.success(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-success-foreground/20 bg-success/80 text-success-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
       error: (message?: ReactNode, options?: ExternalToast) => {
-        toast.error(message, options);
+        toast.error(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-error-foreground/20 bg-error/80 text-error-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
       warning: (message?: ReactNode, options?: ExternalToast) => {
-        toast.warning(message, options);
+        toast.warning(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-warning-foreground/20 bg-warning/80 text-warning-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
       info: (message?: ReactNode, options?: ExternalToast) => {
-        toast.info(message, options);
+        toast.info(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-info-foreground/20 bg-info/80 text-info-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
     };
   }, []);

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

@@ -120,43 +120,81 @@ export const Pagination: FC<PaginationProps> = (props) => {
 
   const pageNumbers = generatePageNumbers(page, totalPage);
 
-  if (simple) {
-    // 简单模式渲染
+  // 渲染简单分页导航（只有上一页、当前页、下一页）
+  const renderSimplePagination = () => {
     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>
+      <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>
+    );
+  };
 
-            {/* 下一页 */}
-            <PaginationItem>
-              <PaginationNext
-                className={page === totalPage ? "pointer-events-none opacity-50" : "cursor-pointer"}
-                onClick={page === totalPage ? undefined : () => onChange?.(page + 1)}
+  // 渲染完整分页导航（包含所有页码）
+  const renderFullPagination = () => {
+    return (
+      <PaginationContent>
+        {/* 上一页 */}
+        <PaginationItem>
+          <PaginationPrevious
+            className={page === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            onClick={page === 1 ? undefined : () => onChange?.(page - 1)}
+            size="default"
+          />
+        </PaginationItem>
+
+        {/* 页码数字 */}
+        {pageNumbers.map((pageNum, index) => (
+          <PaginationItem key={pageNum === "ellipsis" ? `ellipsis-${index}` : `page-${pageNum}`}>
+            {pageNum === "ellipsis" ? (
+              <PaginationEllipsis />
+            ) : (
+              <PaginationLink
+                className="cursor-pointer"
+                isActive={pageNum === page}
+                onClick={() => onChange?.(pageNum)}
                 size="default"
-              />
-            </PaginationItem>
-          </PaginationContent>
-        </ShadcnPagination>
-      </div>
+              >
+                {pageNum}
+              </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>
     );
-  }
+  };
 
-  // 标准模式渲染
   return (
     <div className="flex items-center justify-center space-x-6">
       <ShadcnPagination>
@@ -168,43 +206,7 @@ export const Pagination: FC<PaginationProps> = (props) => {
           </div>
         ) : null}
         {/* 分页导航 */}
-        <PaginationContent>
-          {/* 上一页 */}
-          <PaginationItem>
-            <PaginationPrevious
-              className={page === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
-              onClick={page === 1 ? undefined : () => onChange?.(page - 1)}
-              size="default"
-            />
-          </PaginationItem>
-
-          {/* 页码数字 */}
-          {pageNumbers.map((pageNum, index) => (
-            <PaginationItem key={pageNum === "ellipsis" ? `ellipsis-${index}` : `page-${pageNum}`}>
-              {pageNum === "ellipsis" ? (
-                <PaginationEllipsis />
-              ) : (
-                <PaginationLink
-                  className="cursor-pointer"
-                  isActive={pageNum === page}
-                  onClick={() => onChange?.(pageNum)}
-                  size="default"
-                >
-                  {pageNum}
-                </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>
+        {simple ? renderSimplePagination() : renderFullPagination()}
         {/* 控制区域 */}
         {showSizeChanger || showQuickJumper ? (
           <div className="flex items-center space-x-3">