@windrun-huaiin/third-ui 7.3.9 → 7.3.11

package/dist/main/faq.js

@@ -14,13 +14,8 @@ var faqInteractive = require('./faq-interactive.js');
 require('next/navigation');
 require('@clerk/nextjs');
 require('../clerk/fingerprint/fingerprint-provider.js');
-require('next-themes');
-require('fumadocs-core/framework');
-require('next/link');
-require('fumadocs-ui/utils/use-copy-button');
-require('fumadocs-core/link');
-require('fumadocs-ui/components/ui/collapsible');
-require('../fuma/mdx/banner.js');
+require('react-dom');
+require('@windrun-huaiin/third-ui/fuma/mdx');
 require('./money-price/money-price-types.js');
 
 function FAQ(_a) {

package/dist/main/faq.mjs

@@ -12,13 +12,8 @@ import { FAQInteractive } from './faq-interactive.mjs';
 import 'next/navigation';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
-import 'next-themes';
-import 'fumadocs-core/framework';
-import 'next/link';
-import 'fumadocs-ui/utils/use-copy-button';
-import 'fumadocs-core/link';
-import 'fumadocs-ui/components/ui/collapsible';
-import '../fuma/mdx/banner.mjs';
+import 'react-dom';
+import '@windrun-huaiin/third-ui/fuma/mdx';
 import './money-price/money-price-types.mjs';
 
 function FAQ(_a) {

package/dist/main/gallery.js

@@ -14,13 +14,8 @@ require('next/navigation');
 var galleryInteractive = require('./gallery-interactive.js');
 require('@clerk/nextjs');
 require('../clerk/fingerprint/fingerprint-provider.js');
-require('next-themes');
-require('fumadocs-core/framework');
-require('next/link');
-require('fumadocs-ui/utils/use-copy-button');
-require('fumadocs-core/link');
-require('fumadocs-ui/components/ui/collapsible');
-require('../fuma/mdx/banner.js');
+require('react-dom');
+require('@windrun-huaiin/third-ui/fuma/mdx');
 require('./money-price/money-price-types.js');
 
 function Gallery(_a) {

package/dist/main/gallery.mjs

@@ -12,13 +12,8 @@ import 'next/navigation';
 import { GalleryInteractive } from './gallery-interactive.mjs';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
-import 'next-themes';
-import 'fumadocs-core/framework';
-import 'next/link';
-import 'fumadocs-ui/utils/use-copy-button';
-import 'fumadocs-core/link';
-import 'fumadocs-ui/components/ui/collapsible';
-import '../fuma/mdx/banner.mjs';
+import 'react-dom';
+import '@windrun-huaiin/third-ui/fuma/mdx';
 import './money-price/money-price-types.mjs';
 
 function Gallery(_a) {

package/dist/main/money-price/money-price-button.js

@@ -2,20 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.js');
+var mdx = require('@windrun-huaiin/third-ui/fuma/mdx');
 var server = require('@windrun-huaiin/base-ui/components/server');
-require('next-themes');
-require('react');
-require('fumadocs-core/framework');
-require('@windrun-huaiin/lib/utils');
-require('next/link');
-var gradientButton = require('../../fuma/mdx/gradient-button.js');
-require('next/navigation');
-require('fumadocs-ui/utils/use-copy-button');
-require('fumadocs-core/link');
-require('@windrun-huaiin/base-ui/ui');
-require('fumadocs-ui/components/ui/collapsible');
-require('../../fuma/mdx/banner.js');
 var moneyPriceTypes = require('./money-price-types.js');
 
 function capitalize(str) {
@@ -89,7 +77,7 @@ function MoneyPriceButton({ planKey, userContext, billingType, onLogin, onUpgrad
     const config = getButtonConfig();
     if (config.hidden)
         return null;
-    return (jsxRuntime.jsx(gradientButton.GradientButton, { title: config.text, icon: config.icon, onClick: config.onClick, disabled: config.disabled || isProcessing, align: "center", className: "w-full", preventDoubleClick: true, loadingText: "Processing..." }));
+    return (jsxRuntime.jsx(mdx.GradientButton, { title: config.text, icon: config.icon, onClick: config.onClick, disabled: config.disabled || isProcessing, align: "center", className: "w-full", preventDoubleClick: true, loadingText: "Processing..." }));
 }
 
 exports.MoneyPriceButton = MoneyPriceButton;

package/dist/main/money-price/money-price-button.mjs

@@ -1,19 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.mjs';
+import { GradientButton } from '@windrun-huaiin/third-ui/fuma/mdx';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
-import 'next-themes';
-import 'react';
-import 'fumadocs-core/framework';
-import '@windrun-huaiin/lib/utils';
-import 'next/link';
-import { GradientButton } from '../../fuma/mdx/gradient-button.mjs';
-import 'next/navigation';
-import 'fumadocs-ui/utils/use-copy-button';
-import 'fumadocs-core/link';
-import '@windrun-huaiin/base-ui/ui';
-import 'fumadocs-ui/components/ui/collapsible';
-import '../../fuma/mdx/banner.mjs';
 import { UserState } from './money-price-types.mjs';
 
 function capitalize(str) {

package/dist/main/money-price/money-price-interactive.js

@@ -8,6 +8,7 @@ var React = require('react');
 var fingerprintProvider = require('../../clerk/fingerprint/fingerprint-provider.js');
 var utils = require('@windrun-huaiin/lib/utils');
 var navigation = require('next/navigation');
+var ReactDOM = require('react-dom');
 var moneyPriceButton = require('./money-price-button.js');
 var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceTypes = require('./money-price-types.js');
@@ -131,55 +132,47 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 if (priceDiscountElement)
                     priceDiscountElement.style.display = 'none';
             }
-            const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`);
-            if (priceSubtitleElement && plan.showBillingSubTitle !== false) {
-                const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-                priceSubtitleElement.textContent = (billingOption === null || billingOption === void 0 ? void 0 : billingOption.subTitle) || '';
-            }
         });
     }, [config, data]);
-    // 更新按钮样式
-    const updateButtonStyles = React.useCallback((newBillingType) => {
-        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-        const activeClasses = 'text-white 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 rounded-full shadow-sm';
-        const inactiveClasses = 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
-        if (monthlyButton && yearlyButton) {
-            if (newBillingType === 'monthly') {
-                monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
-                yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
-            }
-            else {
-                monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
-                yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
-            }
-        }
-    }, []);
     // 更新折扣信息
     const updateDiscountInfo = React.useCallback((newBillingType) => {
         const discountInfoElement = document.querySelector('[data-discount-info]');
-        if (!discountInfoElement)
-            return;
-        const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-        const providerConfig = moneyPriceConfigUtil.getActiveProviderConfig(config);
-        let hasDiscount = false;
-        let discountPercent = 0;
-        ['pro', 'ultra'].forEach(planKey => {
-            const product = providerConfig.products[planKey];
-            const pricing = product.plans[newBillingType];
-            if (pricing.discountPercent) {
-                hasDiscount = true;
-                discountPercent = pricing.discountPercent;
+        if (discountInfoElement) {
+            const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
+            let hasDiscount = false;
+            let discountPercent = 0;
+            const providerConfig = moneyPriceConfigUtil.getActiveProviderConfig(config);
+            ['pro', 'ultra'].forEach(planKey => {
+                const pricing = providerConfig.products[planKey].plans[newBillingType];
+                if (pricing.discountPercent) {
+                    hasDiscount = true;
+                    discountPercent = pricing.discountPercent;
+                }
+            });
+            discountInfoElement.innerHTML = '';
+            if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
+                const discountBadge = document.createElement('span');
+                discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
+                discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
+                discountInfoElement.appendChild(discountBadge);
             }
-        });
-        discountInfoElement.innerHTML = '';
-        if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
-            const discountBadge = document.createElement('span');
-            discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
-            discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
-            discountInfoElement.appendChild(discountBadge);
         }
     }, [config, data]);
+    // 更新按钮样式
+    const updateButtonStyles = React.useCallback((newBillingType) => {
+        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
+        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
+        if (monthlyButton) {
+            monthlyButton.className = newBillingType === 'monthly'
+                ? utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white 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 rounded-full shadow-sm')
+                : utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+        }
+        if (yearlyButton) {
+            yearlyButton.className = newBillingType === 'yearly'
+                ? utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white 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 rounded-full shadow-sm')
+                : utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+        }
+    }, []);
     // 处理月付/年付切换和 tooltip 功能
     React.useEffect(() => {
         const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
@@ -233,9 +226,18 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 }
             });
         });
+        // Inject buttons into placeholders using createPortal
+        data.plans.forEach((plan) => {
+            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
+            if (placeholder) {
+                console.log('MoneyPriceButton', `[data-button-placeholder="${plan.key}"]`);
+                ReactDOM.createPortal(jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }), placeholder);
+            }
+        });
+        // Initial updates
         updatePriceDisplay(billingType);
         updateDiscountInfo(billingType);
-        data.plans.map((plan) => (jsxRuntime.jsx("div", { "data-button-placeholder": plan.key, children: jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }) }, plan.key)));
+        updateButtonStyles(billingType);
         return () => {
             if (monthlyButton) {
                 monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -249,7 +251,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 element.removeEventListener('mouseleave', handlers.mouseleave);
             });
         };
-    }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
+    }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo, userContext, handleLogin, handleUpgrade, isProcessing]);
     // Tooltip 组件
     const Tooltip = ({ show, content, x, y }) => {
         if (!show)

package/dist/main/money-price/money-price-interactive.mjs

@@ -6,6 +6,7 @@ import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useFingerprintContextSafe } from '../../clerk/fingerprint/fingerprint-provider.mjs';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useRouter } from 'next/navigation';
+import { createPortal } from 'react-dom';
 import { MoneyPriceButton } from './money-price-button.mjs';
 import { getActiveProviderConfig, getProductPricing } from './money-price-config-util.mjs';
 import { UserState } from './money-price-types.mjs';
@@ -129,55 +130,47 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 if (priceDiscountElement)
                     priceDiscountElement.style.display = 'none';
             }
-            const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`);
-            if (priceSubtitleElement && plan.showBillingSubTitle !== false) {
-                const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-                priceSubtitleElement.textContent = (billingOption === null || billingOption === void 0 ? void 0 : billingOption.subTitle) || '';
-            }
         });
     }, [config, data]);
-    // 更新按钮样式
-    const updateButtonStyles = useCallback((newBillingType) => {
-        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-        const activeClasses = 'text-white 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 rounded-full shadow-sm';
-        const inactiveClasses = 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
-        if (monthlyButton && yearlyButton) {
-            if (newBillingType === 'monthly') {
-                monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
-                yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
-            }
-            else {
-                monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
-                yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
-            }
-        }
-    }, []);
     // 更新折扣信息
     const updateDiscountInfo = useCallback((newBillingType) => {
         const discountInfoElement = document.querySelector('[data-discount-info]');
-        if (!discountInfoElement)
-            return;
-        const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-        const providerConfig = getActiveProviderConfig(config);
-        let hasDiscount = false;
-        let discountPercent = 0;
-        ['pro', 'ultra'].forEach(planKey => {
-            const product = providerConfig.products[planKey];
-            const pricing = product.plans[newBillingType];
-            if (pricing.discountPercent) {
-                hasDiscount = true;
-                discountPercent = pricing.discountPercent;
+        if (discountInfoElement) {
+            const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
+            let hasDiscount = false;
+            let discountPercent = 0;
+            const providerConfig = getActiveProviderConfig(config);
+            ['pro', 'ultra'].forEach(planKey => {
+                const pricing = providerConfig.products[planKey].plans[newBillingType];
+                if (pricing.discountPercent) {
+                    hasDiscount = true;
+                    discountPercent = pricing.discountPercent;
+                }
+            });
+            discountInfoElement.innerHTML = '';
+            if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
+                const discountBadge = document.createElement('span');
+                discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
+                discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
+                discountInfoElement.appendChild(discountBadge);
             }
-        });
-        discountInfoElement.innerHTML = '';
-        if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
-            const discountBadge = document.createElement('span');
-            discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
-            discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
-            discountInfoElement.appendChild(discountBadge);
         }
     }, [config, data]);
+    // 更新按钮样式
+    const updateButtonStyles = useCallback((newBillingType) => {
+        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
+        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
+        if (monthlyButton) {
+            monthlyButton.className = newBillingType === 'monthly'
+                ? cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white 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 rounded-full shadow-sm')
+                : cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+        }
+        if (yearlyButton) {
+            yearlyButton.className = newBillingType === 'yearly'
+                ? cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white 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 rounded-full shadow-sm')
+                : cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+        }
+    }, []);
     // 处理月付/年付切换和 tooltip 功能
     useEffect(() => {
         const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
@@ -231,9 +224,18 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 }
             });
         });
+        // Inject buttons into placeholders using createPortal
+        data.plans.forEach((plan) => {
+            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
+            if (placeholder) {
+                console.log('MoneyPriceButton', `[data-button-placeholder="${plan.key}"]`);
+                createPortal(jsx(MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }), placeholder);
+            }
+        });
+        // Initial updates
         updatePriceDisplay(billingType);
         updateDiscountInfo(billingType);
-        data.plans.map((plan) => (jsx("div", { "data-button-placeholder": plan.key, children: jsx(MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }) }, plan.key)));
+        updateButtonStyles(billingType);
         return () => {
             if (monthlyButton) {
                 monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -247,7 +249,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 element.removeEventListener('mouseleave', handlers.mouseleave);
             });
         };
-    }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
+    }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo, userContext, handleLogin, handleUpgrade, isProcessing]);
     // Tooltip 组件
     const Tooltip = ({ show, content, x, y }) => {
         if (!show)

package/dist/main/money-price/money-price.js

@@ -6,6 +6,18 @@ var utils = require('@windrun-huaiin/lib/utils');
 var server = require('next-intl/server');
 var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceInteractive = require('./money-price-interactive.js');
+require('@windrun-huaiin/base-ui/components/server');
+require('next-themes');
+require('react');
+require('fumadocs-core/framework');
+require('next/link');
+var gradientButton = require('../../fuma/mdx/gradient-button.js');
+require('next/navigation');
+require('fumadocs-ui/utils/use-copy-button');
+require('fumadocs-core/link');
+require('@windrun-huaiin/base-ui/ui');
+require('fumadocs-ui/components/ui/collapsible');
+require('../../fuma/mdx/banner.js');
 
 function MoneyPrice(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, config, upgradeApiEndpoint, signInPath, sectionClassName }) {
@@ -67,7 +79,7 @@ function MoneyPrice(_a) {
                                     return null;
                                 return (jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace('{percent}', String(discountPercent)) }));
                             })() })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: data.plans.map((plan, _idx) => (jsxRuntime.jsxs("div", { "data-price-plan": plan.key, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 w-full h-full shadow-sm dark:shadow-none', // 添加 w-full
-                        'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), renderPrice(plan), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [feature ? (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsxRuntime.jsx("span", { children: feature.icon }) : jsxRuntime.jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsxRuntime.jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxRuntime.jsxs("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsxRuntime.jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx("div", { "data-button-placeholder": plan.key, className: "w-full" })] }, plan.key))) }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, upgradeApiEndpoint: upgradeApiEndpoint, signInPath: signInPath })] }));
+                        'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), renderPrice(plan), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [feature ? (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsxRuntime.jsx("span", { children: feature.icon }) : jsxRuntime.jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsxRuntime.jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxRuntime.jsxs("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsxRuntime.jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx("div", { "data-button-placeholder": plan.key, children: jsxRuntime.jsx(gradientButton.GradientButton, { title: data.buttonTexts.getStarted, disabled: true, align: "center", className: "w-full" }) })] }, plan.key))) }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, upgradeApiEndpoint: upgradeApiEndpoint, signInPath: signInPath })] }));
     });
 }
 

package/dist/main/money-price/money-price.mjs

@@ -4,6 +4,18 @@ import { cn } from '@windrun-huaiin/lib/utils';
 import { getTranslations } from 'next-intl/server';
 import { getActiveProviderConfig } from './money-price-config-util.mjs';
 import { MoneyPriceInteractive } from './money-price-interactive.mjs';
+import '@windrun-huaiin/base-ui/components/server';
+import 'next-themes';
+import 'react';
+import 'fumadocs-core/framework';
+import 'next/link';
+import { GradientButton } from '../../fuma/mdx/gradient-button.mjs';
+import 'next/navigation';
+import 'fumadocs-ui/utils/use-copy-button';
+import 'fumadocs-core/link';
+import '@windrun-huaiin/base-ui/ui';
+import 'fumadocs-ui/components/ui/collapsible';
+import '../../fuma/mdx/banner.mjs';
 
 function MoneyPrice(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, config, upgradeApiEndpoint, signInPath, sectionClassName }) {
@@ -65,7 +77,7 @@ function MoneyPrice(_a) {
                                     return null;
                                 return (jsx("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace('{percent}', String(discountPercent)) }));
                             })() })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: data.plans.map((plan, _idx) => (jsxs("div", { "data-price-plan": plan.key, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 w-full h-full shadow-sm dark:shadow-none', // 添加 w-full
-                        'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), renderPrice(plan), jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [feature ? (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsx("span", { children: feature.icon }) : jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxs("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx("div", { "data-button-placeholder": plan.key, className: "w-full" })] }, plan.key))) }), jsx(MoneyPriceInteractive, { data: data, config: config, upgradeApiEndpoint: upgradeApiEndpoint, signInPath: signInPath })] }));
+                        'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), renderPrice(plan), jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [feature ? (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsx("span", { children: feature.icon }) : jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxs("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx("div", { "data-button-placeholder": plan.key, children: jsx(GradientButton, { title: data.buttonTexts.getStarted, disabled: true, align: "center", className: "w-full" }) })] }, plan.key))) }), jsx(MoneyPriceInteractive, { data: data, config: config, upgradeApiEndpoint: upgradeApiEndpoint, signInPath: signInPath })] }));
     });
 }
 

package/dist/main/price-plan.js

@@ -14,13 +14,8 @@ var pricePlanInteractive = require('./price-plan-interactive.js');
 require('@clerk/nextjs');
 require('../clerk/fingerprint/fingerprint-provider.js');
 require('next/navigation');
-require('next-themes');
-require('fumadocs-core/framework');
-require('next/link');
-require('fumadocs-ui/utils/use-copy-button');
-require('fumadocs-core/link');
-require('fumadocs-ui/components/ui/collapsible');
-require('../fuma/mdx/banner.js');
+require('react-dom');
+require('@windrun-huaiin/third-ui/fuma/mdx');
 require('./money-price/money-price-types.js');
 
 function PricePlan(_a) {

package/dist/main/price-plan.mjs

@@ -12,13 +12,8 @@ import { PricePlanInteractive } from './price-plan-interactive.mjs';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
 import 'next/navigation';
-import 'next-themes';
-import 'fumadocs-core/framework';
-import 'next/link';
-import 'fumadocs-ui/utils/use-copy-button';
-import 'fumadocs-core/link';
-import 'fumadocs-ui/components/ui/collapsible';
-import '../fuma/mdx/banner.mjs';
+import 'react-dom';
+import '@windrun-huaiin/third-ui/fuma/mdx';
 import './money-price/money-price-types.mjs';
 
 function PricePlan(_a) {

package/dist/node_modules/.pnpm/cose-base@1.0.3/node_modules/cose-base/cose-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var coseBase$1 = require('../../../../../_virtual/cose-base.js');
+var coseBase$1 = require('../../../../../_virtual/cose-base2.js');
 var layoutBase = require('../../../layout-base@1.0.2/node_modules/layout-base/layout-base.js');
 
 var coseBase = coseBase$1.__module.exports;

package/dist/node_modules/.pnpm/cose-base@1.0.3/node_modules/cose-base/cose-base.mjs

@@ -1,4 +1,4 @@
-import { __module as coseBase$1 } from '../../../../../_virtual/cose-base2.mjs';
+import { __module as coseBase$1 } from '../../../../../_virtual/cose-base.mjs';
 import { __require as requireLayoutBase } from '../../../layout-base@1.0.2/node_modules/layout-base/layout-base.mjs';
 
 var coseBase = coseBase$1.exports;

package/dist/node_modules/.pnpm/cose-base@2.2.0/node_modules/cose-base/cose-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var coseBase$1 = require('../../../../../_virtual/cose-base2.js');
+var coseBase$1 = require('../../../../../_virtual/cose-base.js');
 var layoutBase = require('../../../layout-base@2.0.1/node_modules/layout-base/layout-base.js');
 
 var coseBase = coseBase$1.__module.exports;

package/dist/node_modules/.pnpm/cose-base@2.2.0/node_modules/cose-base/cose-base.mjs

@@ -1,4 +1,4 @@
-import { __module as coseBase$1 } from '../../../../../_virtual/cose-base.mjs';
+import { __module as coseBase$1 } from '../../../../../_virtual/cose-base2.mjs';
 import { __require as requireLayoutBase } from '../../../layout-base@2.0.1/node_modules/layout-base/layout-base.mjs';
 
 var coseBase = coseBase$1.exports;

package/dist/node_modules/.pnpm/layout-base@1.0.2/node_modules/layout-base/layout-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutBase$1 = require('../../../../../_virtual/layout-base.js');
+var layoutBase$1 = require('../../../../../_virtual/layout-base2.js');
 
 var layoutBase = layoutBase$1.__module.exports;
 

package/dist/node_modules/.pnpm/layout-base@1.0.2/node_modules/layout-base/layout-base.mjs

@@ -1,4 +1,4 @@
-import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base2.mjs';
+import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base.mjs';
 
 var layoutBase = layoutBase$1.exports;
 

package/dist/node_modules/.pnpm/layout-base@2.0.1/node_modules/layout-base/layout-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutBase$1 = require('../../../../../_virtual/layout-base2.js');
+var layoutBase$1 = require('../../../../../_virtual/layout-base.js');
 
 var layoutBase = layoutBase$1.__module.exports;
 

package/dist/node_modules/.pnpm/layout-base@2.0.1/node_modules/layout-base/layout-base.mjs

@@ -1,4 +1,4 @@
-import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base.mjs';
+import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base2.mjs';
 
 var layoutBase = layoutBase$1.exports;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "7.3.9",
+  "version": "7.3.11",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -75,8 +75,8 @@
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",
     "zod": "^3.22.4",
-    "@windrun-huaiin/base-ui": "^8.1.2",
-    "@windrun-huaiin/lib": "^7.1.2"
+    "@windrun-huaiin/lib": "^7.1.2",
+    "@windrun-huaiin/base-ui": "^8.1.2"
   },
   "peerDependencies": {
     "react": "19.1.0",

package/src/main/money-price/money-price-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { GradientButton } from '@third-ui/fuma/mdx';
+import { GradientButton } from '@windrun-huaiin/third-ui/fuma/mdx';
 import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
 import { UserState, type MoneyPriceButtonProps } from './money-price-types';
 

package/src/main/money-price/money-price-interactive.tsx

@@ -5,6 +5,7 @@ import { useFingerprintContextSafe } from '@third-ui/clerk/fingerprint';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { MoneyPriceButton } from './money-price-button';
 import { getActiveProviderConfig, getProductPricing } from './money-price-config-util';
 import {
@@ -130,7 +131,6 @@ export function MoneyPriceInteractive({
       
       const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`) as HTMLElement;
       const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`) as HTMLElement;
-      
       if (pricing.originalAmount && pricing.discountPercent) {
         if (priceOriginalElement) {
           priceOriginalElement.style.display = 'inline';
@@ -140,74 +140,57 @@ export function MoneyPriceInteractive({
           priceDiscountElement.style.display = 'inline';
           const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
           if (billingOption?.discountText) {
-            priceDiscountElement.textContent = billingOption.discountText.replace(
-              '{percent}',
-              String(pricing.discountPercent)
-            );
+            priceDiscountElement.textContent = billingOption.discountText.replace('{percent}', String(pricing.discountPercent));
           }
         }
       } else {
         if (priceOriginalElement) priceOriginalElement.style.display = 'none';
         if (priceDiscountElement) priceDiscountElement.style.display = 'none';
       }
-      
-      const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`) as HTMLElement;
-      if (priceSubtitleElement && plan.showBillingSubTitle !== false) {
-        const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-        priceSubtitleElement.textContent = billingOption?.subTitle || '';
-      }
     });
   }, [config, data]);
 
-  // 更新按钮样式
-  const updateButtonStyles = useCallback((newBillingType: string) => {
-    const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;
-    const yearlyButton = document.querySelector('[data-billing-button="yearly"]') as HTMLButtonElement;
-    
-    const activeClasses = 'text-white 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 rounded-full shadow-sm';
-    const inactiveClasses = 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
-    
-    if (monthlyButton && yearlyButton) {
-      if (newBillingType === 'monthly') {
-        monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
-        yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
-      } else {
-        monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
-        yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
-      }
-    }
-  }, []);
-
   // 更新折扣信息
   const updateDiscountInfo = useCallback((newBillingType: string) => {
     const discountInfoElement = document.querySelector('[data-discount-info]') as HTMLElement;
-    if (!discountInfoElement) return;
-    
-    const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-    const providerConfig = getActiveProviderConfig(config);
-    
-    let hasDiscount = false;
-    let discountPercent = 0;
-    
-    ['pro', 'ultra'].forEach(planKey => {
-      const product = providerConfig.products[planKey as 'pro' | 'ultra'];
-      const pricing = product.plans[newBillingType as 'monthly' | 'yearly'];
-      if (pricing.discountPercent) {
-        hasDiscount = true;
-        discountPercent = pricing.discountPercent;
+    if (discountInfoElement) {
+      const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
+      let hasDiscount = false;
+      let discountPercent = 0;
+      const providerConfig = getActiveProviderConfig(config);
+      ['pro', 'ultra'].forEach(planKey => {
+        const pricing = providerConfig.products[planKey as 'pro' | 'ultra'].plans[newBillingType as 'monthly' | 'yearly'];
+        if (pricing.discountPercent) {
+          hasDiscount = true;
+          discountPercent = pricing.discountPercent;
+        }
+      });
+      discountInfoElement.innerHTML = '';
+      if (hasDiscount && billingOption?.discountText) {
+        const discountBadge = document.createElement('span');
+        discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
+        discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
+        discountInfoElement.appendChild(discountBadge);
       }
-    });
-    
-    discountInfoElement.innerHTML = '';
-    
-    if (hasDiscount && billingOption?.discountText) {
-      const discountBadge = document.createElement('span');
-      discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
-      discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
-      discountInfoElement.appendChild(discountBadge);
     }
   }, [config, data]);
 
+  // 更新按钮样式
+  const updateButtonStyles = useCallback((newBillingType: string) => {
+    const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLElement;
+    const yearlyButton = document.querySelector('[data-billing-button="yearly"]') as HTMLElement;
+    if (monthlyButton) {
+      monthlyButton.className = newBillingType === 'monthly' 
+        ? cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white 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 rounded-full shadow-sm')
+        : cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+    }
+    if (yearlyButton) {
+      yearlyButton.className = newBillingType === 'yearly' 
+        ? cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white 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 rounded-full shadow-sm')
+        : cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+    }
+  }, []);
+
   // 处理月付/年付切换和 tooltip 功能
   useEffect(() => {
     const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;
@@ -275,23 +258,31 @@ export function MoneyPriceInteractive({
       });
     });
     
+    // Inject buttons into placeholders using createPortal
+    data.plans.forEach((plan: any) => {
+      const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`) as HTMLElement;
+      if (placeholder) {
+        console.log('MoneyPriceButton', `[data-button-placeholder="${plan.key}"]`)
+        createPortal(
+          <MoneyPriceButton
+            planKey={plan.key}
+            userContext={userContext}
+            billingType={billingType}
+            onLogin={handleLogin}
+            onUpgrade={handleUpgrade}
+            texts={data.buttonTexts}
+            isProcessing={isProcessing}
+          />,
+          placeholder
+        );
+      }
+    });
+
+    // Initial updates
     updatePriceDisplay(billingType);
     updateDiscountInfo(billingType);
+    updateButtonStyles(billingType);
 
-    data.plans.map((plan: any) => (
-      <div key={plan.key} data-button-placeholder={plan.key}>
-        <MoneyPriceButton
-          planKey={plan.key}
-          userContext={userContext}
-          billingType={billingType}
-          onLogin={handleLogin}
-          onUpgrade={handleUpgrade}
-          texts={data.buttonTexts}
-          isProcessing={isProcessing}
-        />
-      </div>
-    ))
-    
     return () => {
       if (monthlyButton) {
         monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -306,7 +297,7 @@ export function MoneyPriceInteractive({
         element.removeEventListener('mouseleave', handlers.mouseleave);
       });
     };
-  }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
+  }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo, userContext, handleLogin, handleUpgrade, isProcessing]);
 
   // Tooltip 组件
   const Tooltip = ({ show, content, x, y }: typeof tooltip) => {
@@ -331,5 +322,5 @@ export function MoneyPriceInteractive({
     );
   };
 
-  return <Tooltip {...tooltip} />
+  return <Tooltip {...tooltip} />;
 }

package/src/main/money-price/money-price.tsx

@@ -4,6 +4,7 @@ import { getTranslations } from 'next-intl/server';
 import { getActiveProviderConfig } from './money-price-config-util';
 import { MoneyPriceInteractive } from './money-price-interactive';
 import type { MoneyPriceProps, MoneyPriceData } from './money-price-types';
+import { GradientButton } from '@third-ui/fuma/mdx';
 
 export async function MoneyPrice({ 
   locale, 
@@ -262,8 +263,13 @@ export async function MoneyPrice({
             
             <div className="flex-1" />
             
-            <div data-button-placeholder={plan.key} className="w-full">
-              {/* MoneyPriceInteractive will render the button here */}
+            <div data-button-placeholder={plan.key}>
+              <GradientButton
+                title={data.buttonTexts.getStarted}
+                disabled={true}
+                align="center"
+                className="w-full"
+              />
             </div>
           </div>
         ))}