@windrun-huaiin/third-ui 5.9.4 → 5.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.9.4",
+  "version": "5.9.5",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -53,7 +53,7 @@
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",
     "zod": "^3.22.4",
-    "@windrun-huaiin/base-ui": "^5.3.2"
+    "@windrun-huaiin/base-ui": "^5.3.3"
   },
   "peerDependencies": {
     "react": "19.1.0",

package/src/fuma/mdx/gradient-button.tsx

@@ -3,21 +3,41 @@
 import { Button } from "@base-ui/ui/button";
 import { globalLucideIcons as icons } from "@base-ui/components/global-icon";
 import Link from "next/link";
-import React from 'react';
+import React, { useState } from 'react';
+
+export interface GradientButtonProps {
+  title: React.ReactNode;
+  icon?: React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  disabled?: boolean;
+  className?: string;
+  
+  // 跳转模式
+  href?: string;
+  openInNewTab?: boolean;
+  
+  // 点击模式  
+  onClick?: () => void | Promise<void>;
+  
+  // 加载状态配置
+  loadingText?: React.ReactNode;
+  preventDoubleClick?: boolean;
+}
 
 export function GradientButton({
   title,
   icon,
-  href,
   align = 'left',
+  disabled = false,
+  className = "",
+  href,
   openInNewTab = true,
-}: {
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-  href: string;
-  align?: 'left' | 'center' | 'right';
-  openInNewTab?: boolean;
-}) {
+  onClick,
+  loadingText = "Loading...",
+  preventDoubleClick = true,
+}: GradientButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
   // set justify class according to alignment
   const getAlignmentClass = () => {
     switch (align) {
@@ -30,39 +50,99 @@ export function GradientButton({
     }
   };
 
+  // 处理点击事件
+  const handleClick = async (e: React.MouseEvent) => {
+    if (disabled || isLoading) {
+      e.preventDefault();
+      return;
+    }
+
+    if (onClick) {
+      e.preventDefault();
+      
+      if (preventDoubleClick) {
+        setIsLoading(true);
+      }
+      
+      try {
+        await onClick();
+      } catch (error) {
+        console.error('GradientButton onClick error:', error);
+      } finally {
+        if (preventDoubleClick) {
+          setIsLoading(false);
+        }
+      }
+    }
+  };
+
+  // 按钮是否处于禁用状态
+  const isDisabled = disabled || isLoading;
+
+  // 显示的标题内容
+  const displayTitle = isLoading ? loadingText : title;
+
+  // 显示的图标
+  const displayIcon = isLoading ? (
+    <icons.Loader2 className="h-4 w-4 text-white animate-spin" />
+  ) : icon ? (
+    React.cloneElement(icon as React.ReactElement<{ className?: string }>, { 
+      className: "h-4 w-4 text-white" 
+    })
+  ) : (
+    <icons.ArrowRight className="h-4 w-4 text-white" />
+  );
+
+  const buttonContent = (
+    <>
+      <span>{displayTitle}</span>
+      <span className="ml-1">{displayIcon}</span>
+    </>
+  );
+
+  const buttonClassName = `
+    bg-gradient-to-r 
+    from-purple-400 to-pink-500 
+    hover:from-purple-500 hover:to-pink-600
+    dark:from-purple-500 dark:to-pink-600 
+    dark:hover:from-purple-600 dark:hover:to-pink-700
+    text-white text-base font-bold shadow-lg hover:shadow-xl
+    transition-all duration-300
+    rounded-full
+    ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}
+    ${className}
+  `;
+
   return (
     <div className={`flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`}>
-      <Button
-        asChild
-        size="lg"
-        className="
-          bg-gradient-to-r 
-          from-purple-400 to-pink-500 
-          hover:from-purple-500 hover:to-pink-600
-          dark:from-purple-500 dark:to-pink-600 
-          dark:hover:from-purple-600 dark:hover:to-pink-700
-          text-white text-base font-bold shadow-lg hover:shadow-xl
-          transition-all duration-300
-          rounded-full
-        "
-      >
-        <Link
-          href={href}
-          className="no-underline hover:no-underline"
-          {...(openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+      {onClick ? (
+        // 点击模式
+        <Button
+          size="lg"
+          className={buttonClassName}
+          onClick={handleClick}
+          disabled={isDisabled}
+        >
+          {buttonContent}
+        </Button>
+      ) : (
+        // 跳转模式
+        <Button
+          asChild
+          size="lg"
+          className={buttonClassName}
+          disabled={isDisabled}
         >
-          <span>{title}</span>
-          <span className="ml-1">
-            {icon ? 
-              React.cloneElement(icon as React.ReactElement<{ className?: string }>, { 
-                className: "h-4 w-4 text-white" 
-              }) : 
-              <icons.ArrowRight className="h-4 w-4 text-white" />
-            }
-          </span>
-        </Link>
-      </Button>
+          <Link
+            href={href || "#"}
+            className="no-underline hover:no-underline"
+            {...(openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+            onClick={isDisabled ? (e) => e.preventDefault() : undefined}
+          >
+            {buttonContent}
+          </Link>
+        </Button>
+      )}
     </div>
-    
   );
 }