@meta-1/design 0.0.173 → 0.0.175

package/package.json

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

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

@@ -0,0 +1,42 @@
+import type * as React from "react";
+
+import { Badge as UIBadge } from "@meta-1/design/components/ui/badge";
+import { cn } from "@meta-1/design/lib";
+
+export type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "error"
+  | "warning"
+  | "info";
+
+export type BadgeProps = Omit<React.ComponentProps<typeof UIBadge>, "variant"> & {
+  variant?: BadgeVariant;
+};
+
+export const Badge = ({ variant = "default", className, ...props }: BadgeProps) => {
+  // 扩展的场景色样式
+  const variantStyles: Partial<Record<BadgeVariant, string>> = {
+    success: "border-transparent bg-success text-success-foreground",
+    error: "border-transparent bg-error text-error-foreground",
+    warning: "border-transparent bg-warning text-warning-foreground",
+    info: "border-transparent bg-info text-info-foreground",
+  };
+
+  // 扩展场景使用 default variant，并添加自定义样式
+  if (variant && ["success", "error", "warning", "info"].includes(variant)) {
+    return <UIBadge {...props} className={cn(variantStyles[variant], className)} variant="default" />;
+  }
+
+  // 原生 variant 直接传递
+  return (
+    <UIBadge
+      {...props}
+      className={className}
+      variant={variant as "default" | "secondary" | "destructive" | "outline"}
+    />
+  );
+};

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

@@ -514,8 +514,8 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
             {renderTableBody()}
           </Table>
         )}
-        <div className={cn("py-4", !mounted && "invisible")}>
-          {showPagination && (
+        {showPagination ? (
+          <div className={cn("py-4", !mounted && "invisible")}>
             <Pagination
               {...(pagination as PaginationProps)}
               onChange={(page: number) => {
@@ -525,8 +525,8 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                 load?.({ size, page: 1 });
               }}
             />
-          )}
-        </div>
+          </div>
+        ) : null}
         {loading || !mounted ? (
           <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-white/50">
             <Spin />

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

@@ -120,46 +120,84 @@ 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>
+    <div className="flex items-center justify-center">
+      <ShadcnPagination className="flex items-center justify-center gap-md">
         {/* 总数信息 */}
         {showTotal ? (
           <div className="flex items-center space-x-2 text-muted-foreground text-sm">
@@ -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">

package/src/index.ts

@@ -8,7 +8,6 @@ export {
   InputOTPSeparator,
   InputOTPSlot,
 } from "@meta-1/design/components/ui/input-otp";
-export { Badge } from "./components/ui/badge";
 export {
   Breadcrumb,
   BreadcrumbItem,
@@ -104,6 +103,8 @@ export type { ConfirmProps } from "./components/uix/alert-dialog";
 export { useAlert } from "./components/uix/alert-dialog";
 export type { AvatarProps } from "./components/uix/avatar";
 export { Avatar } from "./components/uix/avatar";
+export type { BadgeProps } from "./components/uix/badge";
+export { Badge } from "./components/uix/badge";
 export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./components/uix/breadcrumbs";
 export { Breadcrumbs, BreadcrumbsItem } from "./components/uix/breadcrumbs";
 export type { BroadcastChannelProviderProps } from "./components/uix/broadcast-channel-context";