@meta-1/design 0.0.171 → 0.0.173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.171",
+  "version": "0.0.173",
   "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/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/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/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,10 +55,16 @@ 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={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",
+        });
       },
     };
   }, []);