@windrun-huaiin/third-ui 7.3.4 → 7.3.5

package/dist/main/faq.js

@@ -14,7 +14,6 @@ var faqInteractive = require('./faq-interactive.js');
 require('next/navigation');
 require('@clerk/nextjs');
 require('../clerk/fingerprint/fingerprint-provider.js');
-require('react-dom/client');
 require('next-themes');
 require('fumadocs-core/framework');
 require('next/link');

package/dist/main/faq.mjs

@@ -12,7 +12,6 @@ import { FAQInteractive } from './faq-interactive.mjs';
 import 'next/navigation';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
-import 'react-dom/client';
 import 'next-themes';
 import 'fumadocs-core/framework';
 import 'next/link';

package/dist/main/gallery.js

@@ -14,7 +14,6 @@ require('next/navigation');
 var galleryInteractive = require('./gallery-interactive.js');
 require('@clerk/nextjs');
 require('../clerk/fingerprint/fingerprint-provider.js');
-require('react-dom/client');
 require('next-themes');
 require('fumadocs-core/framework');
 require('next/link');

package/dist/main/gallery.mjs

@@ -12,7 +12,6 @@ import 'next/navigation';
 import { GalleryInteractive } from './gallery-interactive.mjs';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
-import 'react-dom/client';
 import 'next-themes';
 import 'fumadocs-core/framework';
 import 'next/link';

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

@@ -8,13 +8,11 @@ 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 client = require('react-dom/client');
 var moneyPriceButton = require('./money-price-button.js');
 var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceTypes = require('./money-price-types.js');
 
 function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath }) {
-    var _a, _b, _c, _d;
     const fingerprintContext = fingerprintProvider.useFingerprintContextSafe();
     const { redirectToSignIn } = nextjs.useClerk();
     const router = navigation.useRouter();
@@ -22,7 +20,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
     const [isProcessing, setIsProcessing] = React.useState(false);
     const [tooltip, setTooltip] = React.useState({ show: false, content: '', x: 0, y: 0 });
     // 确定用户状态
-    const getUserState = () => {
+    const getUserState = React.useCallback(() => {
         var _a, _b;
         if (!fingerprintContext)
             return moneyPriceTypes.UserState.Anonymous;
@@ -36,34 +34,35 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         if ((_b = xSubscription.priceName) === null || _b === void 0 ? void 0 : _b.includes('Ultra'))
             return moneyPriceTypes.UserState.UltraUser;
         return moneyPriceTypes.UserState.FreeUser;
-    };
-    const userContext = {
-        isAuthenticated: !!((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xUser) === null || _a === void 0 ? void 0 : _a.clerkUserId),
-        subscriptionStatus: getUserState(),
-        subscriptionType: ((_c = (_b = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId) === null || _c === void 0 ? void 0 : _c.includes('yearly')) ? 'yearly' : 'monthly',
-        subscriptionEndDate: (_d = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _d === void 0 ? void 0 : _d.subPeriodEnd
-    };
+    }, [fingerprintContext]);
+    // 优化 userContext 使用 useMemo
+    const userContext = React.useMemo(() => {
+        var _a, _b, _c, _d;
+        return ({
+            isAuthenticated: !!((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xUser) === null || _a === void 0 ? void 0 : _a.clerkUserId),
+            subscriptionStatus: getUserState(),
+            subscriptionType: ((_c = (_b = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId) === null || _c === void 0 ? void 0 : _c.includes('yearly')) ? 'yearly' : 'monthly',
+            subscriptionEndDate: (_d = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _d === void 0 ? void 0 : _d.subPeriodEnd
+        });
+    }, [fingerprintContext, getUserState]);
     // 处理登录
-    const handleLogin = () => {
+    const handleLogin = React.useCallback(() => {
         if (signInPath) {
             router.push(signInPath);
         }
         else {
             redirectToSignIn();
         }
-    };
+    }, [signInPath, redirectToSignIn, router]);
     // 处理升级
-    const handleUpgrade = (plan, billingType) => tslib_es6.__awaiter(this, void 0, void 0, function* () {
-        // 如果没有配置 API 端点，跳转到首页
+    const handleUpgrade = React.useCallback((plan, billingType) => tslib_es6.__awaiter(this, void 0, void 0, function* () {
         if (!upgradeApiEndpoint) {
             router.push('/');
             return;
         }
         setIsProcessing(true);
         try {
-            // 获取价格配置
             const pricing = moneyPriceConfigUtil.getProductPricing(plan, billingType, config.activeProvider, config);
-            // 调用 API 创建支付会话
             const response = yield fetch(upgradeApiEndpoint, {
                 method: 'POST',
                 headers: {
@@ -78,7 +77,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             });
             const result = yield response.json();
             if (result.success && result.checkoutUrl) {
-                // 跳转到支付页面
                 window.location.href = result.checkoutUrl;
             }
             else {
@@ -91,14 +89,13 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         finally {
             setIsProcessing(false);
         }
-    });
+    }), [upgradeApiEndpoint, config, router]);
     // 更新价格显示
-    const updatePriceDisplay = (newBillingType) => {
+    const updatePriceDisplay = React.useCallback((newBillingType) => {
         const providerConfig = moneyPriceConfigUtil.getActiveProviderConfig(config);
         data.plans.forEach((plan) => {
             const productConfig = providerConfig.products[plan.key];
             const pricing = productConfig.plans[newBillingType];
-            // 更新价格值
             const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`);
             if (priceValueElement) {
                 if (pricing.amount === 0) {
@@ -108,13 +105,11 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                     priceValueElement.textContent = `${data.currency}${pricing.amount}`;
                 }
             }
-            // 更新单位
             const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`);
             if (priceUnitElement) {
                 const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
                 priceUnitElement.textContent = (billingOption === null || billingOption === void 0 ? void 0 : billingOption.unit) || '/month';
             }
-            // 更新原价和折扣
             const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`);
             const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`);
             if (pricing.originalAmount && pricing.discountPercent) {
@@ -136,16 +131,15 @@ 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 = (newBillingType) => {
+    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';
@@ -160,15 +154,14 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
             }
         }
-    };
+    }, []);
     // 更新折扣信息
-    const updateDiscountInfo = (newBillingType) => {
+    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 => {
@@ -179,7 +172,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 discountPercent = pricing.discountPercent;
             }
         });
-        // 清空内容
         discountInfoElement.innerHTML = '';
         if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
             const discountBadge = document.createElement('span');
@@ -187,39 +179,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
             discountInfoElement.appendChild(discountBadge);
         }
-    };
-    // 使用 useRef 存储 root 实例，避免重复创建
-    const rootsRef = React.useRef(new Map());
-    // 动态替换按钮
-    React.useEffect(() => {
-        data.plans.forEach((plan) => {
-            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
-            if (placeholder) {
-                let root = rootsRef.current.get(plan.key);
-                // 如果还没有创建 root，则创建一个
-                if (!root) {
-                    root = client.createRoot(placeholder);
-                    rootsRef.current.set(plan.key, root);
-                }
-                // 渲染按钮
-                root.render(jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }));
-            }
-        });
-    }, [userContext, billingType, isProcessing, data.plans, data.buttonTexts, handleLogin, handleUpgrade]);
-    // 组件卸载时清理
-    React.useEffect(() => {
-        return () => {
-            rootsRef.current.forEach((root) => {
-                try {
-                    root.unmount();
-                }
-                catch (e) {
-                    // 忽略卸载错误
-                }
-            });
-            rootsRef.current.clear();
-        };
-    }, []);
+    }, [config, data]);
     // 处理月付/年付切换和 tooltip 功能
     React.useEffect(() => {
         const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
@@ -242,7 +202,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         if (yearlyButton) {
             yearlyButton.addEventListener('click', handleYearlyClick);
         }
-        // 添加 tooltip 功能
         const tooltipHandlers = [];
         data.plans.forEach((plan) => {
             var _a;
@@ -274,10 +233,8 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 }
             });
         });
-        // 初始化价格显示
         updatePriceDisplay(billingType);
         updateDiscountInfo(billingType);
-        // 清理
         return () => {
             if (monthlyButton) {
                 monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -285,14 +242,13 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             if (yearlyButton) {
                 yearlyButton.removeEventListener('click', handleYearlyClick);
             }
-            // 清理 tooltip 事件监听器
             tooltipHandlers.forEach(({ element, handlers }) => {
                 element.removeEventListener('mouseenter', handlers.mouseenter);
                 element.removeEventListener('mousemove', handlers.mousemove);
                 element.removeEventListener('mouseleave', handlers.mouseleave);
             });
         };
-    }, [data]);
+    }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
     // Tooltip 组件
     const Tooltip = ({ show, content, x, y }) => {
         if (!show)
@@ -309,7 +265,8 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         };
         return (jsxRuntime.jsx("div", { style: style, className: "bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm", children: content }));
     };
-    return jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip));
+    // 直接渲染按钮，确保宽度占满
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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))), jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip))] }));
 }
 
 exports.MoneyPriceInteractive = MoneyPriceInteractive;

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

@@ -1,18 +1,16 @@
 "use client";
 import { __awaiter } from '../../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 { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useClerk } from '@clerk/nextjs';
-import React, { useState, useEffect } from 'react';
+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 { createRoot } from 'react-dom/client';
 import { MoneyPriceButton } from './money-price-button.mjs';
-import { getProductPricing, getActiveProviderConfig } from './money-price-config-util.mjs';
+import { getActiveProviderConfig, getProductPricing } from './money-price-config-util.mjs';
 import { UserState } from './money-price-types.mjs';
 
 function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath }) {
-    var _a, _b, _c, _d;
     const fingerprintContext = useFingerprintContextSafe();
     const { redirectToSignIn } = useClerk();
     const router = useRouter();
@@ -20,7 +18,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
     const [isProcessing, setIsProcessing] = useState(false);
     const [tooltip, setTooltip] = useState({ show: false, content: '', x: 0, y: 0 });
     // 确定用户状态
-    const getUserState = () => {
+    const getUserState = useCallback(() => {
         var _a, _b;
         if (!fingerprintContext)
             return UserState.Anonymous;
@@ -34,34 +32,35 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         if ((_b = xSubscription.priceName) === null || _b === void 0 ? void 0 : _b.includes('Ultra'))
             return UserState.UltraUser;
         return UserState.FreeUser;
-    };
-    const userContext = {
-        isAuthenticated: !!((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xUser) === null || _a === void 0 ? void 0 : _a.clerkUserId),
-        subscriptionStatus: getUserState(),
-        subscriptionType: ((_c = (_b = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId) === null || _c === void 0 ? void 0 : _c.includes('yearly')) ? 'yearly' : 'monthly',
-        subscriptionEndDate: (_d = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _d === void 0 ? void 0 : _d.subPeriodEnd
-    };
+    }, [fingerprintContext]);
+    // 优化 userContext 使用 useMemo
+    const userContext = useMemo(() => {
+        var _a, _b, _c, _d;
+        return ({
+            isAuthenticated: !!((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xUser) === null || _a === void 0 ? void 0 : _a.clerkUserId),
+            subscriptionStatus: getUserState(),
+            subscriptionType: ((_c = (_b = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId) === null || _c === void 0 ? void 0 : _c.includes('yearly')) ? 'yearly' : 'monthly',
+            subscriptionEndDate: (_d = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _d === void 0 ? void 0 : _d.subPeriodEnd
+        });
+    }, [fingerprintContext, getUserState]);
     // 处理登录
-    const handleLogin = () => {
+    const handleLogin = useCallback(() => {
         if (signInPath) {
             router.push(signInPath);
         }
         else {
             redirectToSignIn();
         }
-    };
+    }, [signInPath, redirectToSignIn, router]);
     // 处理升级
-    const handleUpgrade = (plan, billingType) => __awaiter(this, void 0, void 0, function* () {
-        // 如果没有配置 API 端点，跳转到首页
+    const handleUpgrade = useCallback((plan, billingType) => __awaiter(this, void 0, void 0, function* () {
         if (!upgradeApiEndpoint) {
             router.push('/');
             return;
         }
         setIsProcessing(true);
         try {
-            // 获取价格配置
             const pricing = getProductPricing(plan, billingType, config.activeProvider, config);
-            // 调用 API 创建支付会话
             const response = yield fetch(upgradeApiEndpoint, {
                 method: 'POST',
                 headers: {
@@ -76,7 +75,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             });
             const result = yield response.json();
             if (result.success && result.checkoutUrl) {
-                // 跳转到支付页面
                 window.location.href = result.checkoutUrl;
             }
             else {
@@ -89,14 +87,13 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         finally {
             setIsProcessing(false);
         }
-    });
+    }), [upgradeApiEndpoint, config, router]);
     // 更新价格显示
-    const updatePriceDisplay = (newBillingType) => {
+    const updatePriceDisplay = useCallback((newBillingType) => {
         const providerConfig = getActiveProviderConfig(config);
         data.plans.forEach((plan) => {
             const productConfig = providerConfig.products[plan.key];
             const pricing = productConfig.plans[newBillingType];
-            // 更新价格值
             const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`);
             if (priceValueElement) {
                 if (pricing.amount === 0) {
@@ -106,13 +103,11 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                     priceValueElement.textContent = `${data.currency}${pricing.amount}`;
                 }
             }
-            // 更新单位
             const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`);
             if (priceUnitElement) {
                 const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
                 priceUnitElement.textContent = (billingOption === null || billingOption === void 0 ? void 0 : billingOption.unit) || '/month';
             }
-            // 更新原价和折扣
             const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`);
             const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`);
             if (pricing.originalAmount && pricing.discountPercent) {
@@ -134,16 +129,15 @@ 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 = (newBillingType) => {
+    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';
@@ -158,15 +152,14 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
             }
         }
-    };
+    }, []);
     // 更新折扣信息
-    const updateDiscountInfo = (newBillingType) => {
+    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 => {
@@ -177,7 +170,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 discountPercent = pricing.discountPercent;
             }
         });
-        // 清空内容
         discountInfoElement.innerHTML = '';
         if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
             const discountBadge = document.createElement('span');
@@ -185,39 +177,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
             discountInfoElement.appendChild(discountBadge);
         }
-    };
-    // 使用 useRef 存储 root 实例，避免重复创建
-    const rootsRef = React.useRef(new Map());
-    // 动态替换按钮
-    useEffect(() => {
-        data.plans.forEach((plan) => {
-            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
-            if (placeholder) {
-                let root = rootsRef.current.get(plan.key);
-                // 如果还没有创建 root，则创建一个
-                if (!root) {
-                    root = createRoot(placeholder);
-                    rootsRef.current.set(plan.key, root);
-                }
-                // 渲染按钮
-                root.render(jsx(MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }));
-            }
-        });
-    }, [userContext, billingType, isProcessing, data.plans, data.buttonTexts, handleLogin, handleUpgrade]);
-    // 组件卸载时清理
-    useEffect(() => {
-        return () => {
-            rootsRef.current.forEach((root) => {
-                try {
-                    root.unmount();
-                }
-                catch (e) {
-                    // 忽略卸载错误
-                }
-            });
-            rootsRef.current.clear();
-        };
-    }, []);
+    }, [config, data]);
     // 处理月付/年付切换和 tooltip 功能
     useEffect(() => {
         const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
@@ -240,7 +200,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         if (yearlyButton) {
             yearlyButton.addEventListener('click', handleYearlyClick);
         }
-        // 添加 tooltip 功能
         const tooltipHandlers = [];
         data.plans.forEach((plan) => {
             var _a;
@@ -272,10 +231,8 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 }
             });
         });
-        // 初始化价格显示
         updatePriceDisplay(billingType);
         updateDiscountInfo(billingType);
-        // 清理
         return () => {
             if (monthlyButton) {
                 monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -283,14 +240,13 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             if (yearlyButton) {
                 yearlyButton.removeEventListener('click', handleYearlyClick);
             }
-            // 清理 tooltip 事件监听器
             tooltipHandlers.forEach(({ element, handlers }) => {
                 element.removeEventListener('mouseenter', handlers.mouseenter);
                 element.removeEventListener('mousemove', handlers.mousemove);
                 element.removeEventListener('mouseleave', handlers.mouseleave);
             });
         };
-    }, [data]);
+    }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
     // Tooltip 组件
     const Tooltip = ({ show, content, x, y }) => {
         if (!show)
@@ -307,7 +263,8 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         };
         return (jsx("div", { style: style, className: "bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm", children: content }));
     };
-    return jsx(Tooltip, Object.assign({}, tooltip));
+    // 直接渲染按钮，确保宽度占满
+    return (jsxs(Fragment, { children: [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))), jsx(Tooltip, Object.assign({}, tooltip))] }));
 }
 
 export { MoneyPriceInteractive };

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

@@ -2,19 +2,7 @@
 
 var tslib_es6 = 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 jsxRuntime = require('react/jsx-runtime');
-require('@windrun-huaiin/base-ui/components/server');
-require('next-themes');
-require('react');
-require('fumadocs-core/framework');
 var utils = 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 server = require('next-intl/server');
 var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceInteractive = require('./money-price-interactive.js');
@@ -31,15 +19,11 @@ function MoneyPrice(_a) {
             buttonTexts: t.raw('buttonTexts'),
             currency: config.display.currency
         };
-        // 获取激活的支付供应商配置
         const providerConfig = moneyPriceConfigUtil.getActiveProviderConfig(config);
         const minPlanFeaturesCount = config.display.minFeaturesCount;
-        // 使用默认计费类型进行静态渲染
         const defaultBilling = data.billingSwitch.defaultKey;
         const defaultBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === defaultBilling) || data.billingSwitch.options[0];
-        // 计算特性数量
         const maxFeaturesCount = Math.max(...data.plans.map((plan) => { var _a; return ((_a = plan.features) === null || _a === void 0 ? void 0 : _a.length) || 0; }), minPlanFeaturesCount || 0);
-        // 处理卡片高度对齐
         const getFeatureRows = (plan) => {
             const features = plan.features || [];
             const filled = [...features];
@@ -47,17 +31,14 @@ function MoneyPrice(_a) {
                 filled.push(null);
             return filled;
         };
-        // 静态价格渲染逻辑
         function renderPrice(plan, billingKey = data.billingSwitch.defaultKey) {
             const productConfig = providerConfig.products[plan.key];
             const pricing = productConfig.plans[billingKey];
             const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === billingKey) || defaultBillingDisplay;
             const billingSubTitle = (currentBillingDisplay === null || currentBillingDisplay === void 0 ? void 0 : currentBillingDisplay.subTitle) || '';
-            // 免费计划
             if (pricing.amount === 0) {
                 return (jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsxRuntime.jsx("div", { className: "flex items-end gap-2", children: jsxRuntime.jsx("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: "Free" }) }), jsxRuntime.jsx("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: jsxRuntime.jsx("span", { className: utils.cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle }) })] }));
             }
-            // 付费计划
             const hasDiscount = pricing.discountPercent && pricing.discountPercent > 0;
             const unit = currentBillingDisplay.unit || '';
             let discountText = '';
@@ -72,7 +53,6 @@ function MoneyPrice(_a) {
                                             ? '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'
                                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'), "data-billing-button": "yearly", type: "button", children: ((_c = data.billingSwitch.options.find((opt) => opt.key === 'yearly')) === null || _c === void 0 ? void 0 : _c.name) || 'Yearly' })] }) }), jsxRuntime.jsx("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
                                 const opt = data.billingSwitch.options.find((opt) => opt.key === data.billingSwitch.defaultKey);
-                                // 检查默认计费类型是否有折扣
                                 let hasDiscount = false;
                                 let discountPercent = 0;
                                 ['pro', 'ultra'].forEach(planKey => {
@@ -86,7 +66,7 @@ function MoneyPrice(_a) {
                                 if (!(opt && hasDiscount && opt.discountText))
                                     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 h-full shadow-sm dark:shadow-none', '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 })] }));
+                            })() })] }), 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 h-full shadow-sm dark:shadow-none', '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 })] }));
     });
 }
 

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

@@ -1,18 +1,6 @@
 import { __awaiter } from '../../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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import '@windrun-huaiin/base-ui/components/server';
-import 'next-themes';
-import 'react';
-import 'fumadocs-core/framework';
 import { cn } from '@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 { getTranslations } from 'next-intl/server';
 import { getActiveProviderConfig } from './money-price-config-util.mjs';
 import { MoneyPriceInteractive } from './money-price-interactive.mjs';
@@ -29,15 +17,11 @@ function MoneyPrice(_a) {
             buttonTexts: t.raw('buttonTexts'),
             currency: config.display.currency
         };
-        // 获取激活的支付供应商配置
         const providerConfig = getActiveProviderConfig(config);
         const minPlanFeaturesCount = config.display.minFeaturesCount;
-        // 使用默认计费类型进行静态渲染
         const defaultBilling = data.billingSwitch.defaultKey;
         const defaultBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === defaultBilling) || data.billingSwitch.options[0];
-        // 计算特性数量
         const maxFeaturesCount = Math.max(...data.plans.map((plan) => { var _a; return ((_a = plan.features) === null || _a === void 0 ? void 0 : _a.length) || 0; }), minPlanFeaturesCount || 0);
-        // 处理卡片高度对齐
         const getFeatureRows = (plan) => {
             const features = plan.features || [];
             const filled = [...features];
@@ -45,17 +29,14 @@ function MoneyPrice(_a) {
                 filled.push(null);
             return filled;
         };
-        // 静态价格渲染逻辑
         function renderPrice(plan, billingKey = data.billingSwitch.defaultKey) {
             const productConfig = providerConfig.products[plan.key];
             const pricing = productConfig.plans[billingKey];
             const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === billingKey) || defaultBillingDisplay;
             const billingSubTitle = (currentBillingDisplay === null || currentBillingDisplay === void 0 ? void 0 : currentBillingDisplay.subTitle) || '';
-            // 免费计划
             if (pricing.amount === 0) {
                 return (jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsx("div", { className: "flex items-end gap-2", children: jsx("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: "Free" }) }), jsx("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: jsx("span", { className: cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle }) })] }));
             }
-            // 付费计划
             const hasDiscount = pricing.discountPercent && pricing.discountPercent > 0;
             const unit = currentBillingDisplay.unit || '';
             let discountText = '';
@@ -70,7 +51,6 @@ function MoneyPrice(_a) {
                                             ? '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'
                                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'), "data-billing-button": "yearly", type: "button", children: ((_c = data.billingSwitch.options.find((opt) => opt.key === 'yearly')) === null || _c === void 0 ? void 0 : _c.name) || 'Yearly' })] }) }), jsx("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
                                 const opt = data.billingSwitch.options.find((opt) => opt.key === data.billingSwitch.defaultKey);
-                                // 检查默认计费类型是否有折扣
                                 let hasDiscount = false;
                                 let discountPercent = 0;
                                 ['pro', 'ultra'].forEach(planKey => {
@@ -84,7 +64,7 @@ function MoneyPrice(_a) {
                                 if (!(opt && hasDiscount && opt.discountText))
                                     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 h-full shadow-sm dark:shadow-none', '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 })] }));
+                            })() })] }), 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 h-full shadow-sm dark:shadow-none', '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 })] }));
     });
 }
 

package/dist/main/price-plan.js

@@ -14,7 +14,6 @@ var pricePlanInteractive = require('./price-plan-interactive.js');
 require('@clerk/nextjs');
 require('../clerk/fingerprint/fingerprint-provider.js');
 require('next/navigation');
-require('react-dom/client');
 require('next-themes');
 require('fumadocs-core/framework');
 require('next/link');

package/dist/main/price-plan.mjs

@@ -12,7 +12,6 @@ import { PricePlanInteractive } from './price-plan-interactive.mjs';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
 import 'next/navigation';
-import 'react-dom/client';
 import 'next-themes';
 import 'fumadocs-core/framework';
 import 'next/link';

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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "7.3.4",
+  "version": "7.3.5",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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

@@ -4,8 +4,7 @@ import { useClerk } from '@clerk/nextjs';
 import { useFingerprintContextSafe } from '@third-ui/clerk/fingerprint';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { MoneyPriceButton } from './money-price-button';
 import { getActiveProviderConfig, getProductPricing } from './money-price-config-util';
 import {
@@ -33,9 +32,9 @@ export function MoneyPriceInteractive({
     x: number;
     y: number;
   }>({ show: false, content: '', x: 0, y: 0 });
-  
+
   // 确定用户状态
-  const getUserState = (): UserState => {
+  const getUserState = useCallback((): UserState => {
     if (!fingerprintContext) return UserState.Anonymous;
     const { xUser, xSubscription } = fingerprintContext;
     
@@ -44,27 +43,27 @@ export function MoneyPriceInteractive({
     if (xSubscription.priceName?.includes('Pro')) return UserState.ProUser;
     if (xSubscription.priceName?.includes('Ultra')) return UserState.UltraUser;
     return UserState.FreeUser;
-  };
-  
-  const userContext: UserContext = {
+  }, [fingerprintContext]);
+
+  // 优化 userContext 使用 useMemo
+  const userContext = useMemo<UserContext>(() => ({
     isAuthenticated: !!fingerprintContext?.xUser?.clerkUserId,
     subscriptionStatus: getUserState(),
     subscriptionType: fingerprintContext?.xSubscription?.priceId?.includes('yearly') ? 'yearly' : 'monthly',
     subscriptionEndDate: fingerprintContext?.xSubscription?.subPeriodEnd
-  };
-  
+  }), [fingerprintContext, getUserState]);
+
   // 处理登录
-  const handleLogin = () => {
+  const handleLogin = useCallback(() => {
     if (signInPath) {
       router.push(signInPath);
     } else {
       redirectToSignIn();
     }
-  };
-  
+  }, [signInPath, redirectToSignIn, router]);
+
   // 处理升级
-  const handleUpgrade = async (plan: string, billingType: string) => {
-    // 如果没有配置 API 端点，跳转到首页
+  const handleUpgrade = useCallback(async (plan: string, billingType: string) => {
     if (!upgradeApiEndpoint) {
       router.push('/');
       return;
@@ -72,7 +71,6 @@ export function MoneyPriceInteractive({
     
     setIsProcessing(true);
     try {
-      // 获取价格配置
       const pricing = getProductPricing(
         plan as 'free' | 'pro' | 'ultra',
         billingType as 'monthly' | 'yearly',
@@ -80,7 +78,6 @@ export function MoneyPriceInteractive({
         config
       );
       
-      // 调用 API 创建支付会话
       const response = await fetch(upgradeApiEndpoint, {
         method: 'POST',
         headers: {
@@ -97,7 +94,6 @@ export function MoneyPriceInteractive({
       const result = await response.json();
       
       if (result.success && result.checkoutUrl) {
-        // 跳转到支付页面
         window.location.href = result.checkoutUrl;
       } else {
         console.error('Failed to create checkout session:', result.error);
@@ -107,17 +103,16 @@ export function MoneyPriceInteractive({
     } finally {
       setIsProcessing(false);
     }
-  };
-  
+  }, [upgradeApiEndpoint, config, router]);
+
   // 更新价格显示
-  const updatePriceDisplay = (newBillingType: string) => {
+  const updatePriceDisplay = useCallback((newBillingType: string) => {
     const providerConfig = getActiveProviderConfig(config);
     
     data.plans.forEach((plan: any) => {
       const productConfig = providerConfig.products[plan.key as 'free' | 'pro' | 'ultra'];
       const pricing = productConfig.plans[newBillingType as 'monthly' | 'yearly'];
       
-      // 更新价格值
       const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`) as HTMLElement;
       if (priceValueElement) {
         if (pricing.amount === 0) {
@@ -127,14 +122,12 @@ export function MoneyPriceInteractive({
         }
       }
       
-      // 更新单位
       const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`) as HTMLElement;
       if (priceUnitElement) {
         const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
         priceUnitElement.textContent = billingOption?.unit || '/month';
       }
       
-      // 更新原价和折扣
       const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`) as HTMLElement;
       const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`) as HTMLElement;
       
@@ -158,17 +151,16 @@ export function MoneyPriceInteractive({
         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 = (newBillingType: string) => {
+  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;
     
@@ -184,17 +176,16 @@ export function MoneyPriceInteractive({
         yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
       }
     }
-  };
-  
+  }, []);
+
   // 更新折扣信息
-  const updateDiscountInfo = (newBillingType: string) => {
+  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;
     
@@ -207,7 +198,6 @@ export function MoneyPriceInteractive({
       }
     });
     
-    // 清空内容
     discountInfoElement.innerHTML = '';
     
     if (hasDiscount && billingOption?.discountText) {
@@ -216,54 +206,8 @@ export function MoneyPriceInteractive({
       discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
       discountInfoElement.appendChild(discountBadge);
     }
-  };
-  
-  // 使用 useRef 存储 root 实例，避免重复创建
-  const rootsRef = React.useRef<Map<string, any>>(new Map());
+  }, [config, data]);
 
-  // 动态替换按钮
-  useEffect(() => {
-    data.plans.forEach((plan: any) => {
-      const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
-      if (placeholder) {
-        let root = rootsRef.current.get(plan.key);
-        
-        // 如果还没有创建 root，则创建一个
-        if (!root) {
-          root = createRoot(placeholder);
-          rootsRef.current.set(plan.key, root);
-        }
-        
-        // 渲染按钮
-        root.render(
-          <MoneyPriceButton
-            planKey={plan.key}
-            userContext={userContext}
-            billingType={billingType}
-            onLogin={handleLogin}
-            onUpgrade={handleUpgrade}
-            texts={data.buttonTexts}
-            isProcessing={isProcessing}
-          />
-        );
-      }
-    });
-  }, [userContext, billingType, isProcessing, data.plans, data.buttonTexts, handleLogin, handleUpgrade]);
-  
-  // 组件卸载时清理
-  useEffect(() => {
-    return () => {
-      rootsRef.current.forEach((root) => {
-        try {
-          root.unmount();
-        } catch (e) {
-          // 忽略卸载错误
-        }
-      });
-      rootsRef.current.clear();
-    };
-  }, []);
-  
   // 处理月付/年付切换和 tooltip 功能
   useEffect(() => {
     const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;
@@ -290,7 +234,6 @@ export function MoneyPriceInteractive({
       yearlyButton.addEventListener('click', handleYearlyClick);
     }
     
-    // 添加 tooltip 功能
     const tooltipHandlers: Array<{
       element: HTMLElement;
       handlers: {
@@ -332,11 +275,9 @@ export function MoneyPriceInteractive({
       });
     });
     
-    // 初始化价格显示
     updatePriceDisplay(billingType);
     updateDiscountInfo(billingType);
     
-    // 清理
     return () => {
       if (monthlyButton) {
         monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -345,15 +286,14 @@ export function MoneyPriceInteractive({
         yearlyButton.removeEventListener('click', handleYearlyClick);
       }
       
-      // 清理 tooltip 事件监听器
       tooltipHandlers.forEach(({ element, handlers }) => {
         element.removeEventListener('mouseenter', handlers.mouseenter);
         element.removeEventListener('mousemove', handlers.mousemove);
         element.removeEventListener('mouseleave', handlers.mouseleave);
       });
     };
-  }, [data]);
-  
+  }, [data, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
+
   // Tooltip 组件
   const Tooltip = ({ show, content, x, y }: typeof tooltip) => {
     if (!show) return null;
@@ -376,6 +316,24 @@ export function MoneyPriceInteractive({
       </div>
     );
   };
-  
-  return <Tooltip {...tooltip} />;
+
+  // 直接渲染按钮，确保宽度占满
+  return (
+    <>
+      {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>
+      ))}
+      <Tooltip {...tooltip} />
+    </>
+  );
 }

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

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { GradientButton } from '@third-ui/fuma/mdx';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { getTranslations } from 'next-intl/server';
 import { getActiveProviderConfig } from './money-price-config-util';
 import { MoneyPriceInteractive } from './money-price-interactive';
-import type { MoneyPriceData, MoneyPriceProps } from './money-price-types';
+import type { MoneyPriceProps, MoneyPriceData } from './money-price-types';
 
 export async function MoneyPrice({ 
   locale, 
@@ -39,23 +38,19 @@ export async function MoneyPrice({
     currency: config.display.currency
   };
 
-  // 获取激活的支付供应商配置
   const providerConfig = getActiveProviderConfig(config);
   const minPlanFeaturesCount = config.display.minFeaturesCount;
-  
-  // 使用默认计费类型进行静态渲染
+
   const defaultBilling = data.billingSwitch.defaultKey;
   const defaultBillingDisplay = data.billingSwitch.options.find(
     (opt: any) => opt.key === defaultBilling
   ) || data.billingSwitch.options[0];
 
-  // 计算特性数量
   const maxFeaturesCount = Math.max(
     ...data.plans.map((plan: any) => plan.features?.length || 0),
     minPlanFeaturesCount || 0
   );
 
-  // 处理卡片高度对齐
   const getFeatureRows = (plan: any) => {
     const features = plan.features || [];
     const filled = [...features];
@@ -63,7 +58,6 @@ export async function MoneyPrice({
     return filled;
   };
 
-  // 静态价格渲染逻辑
   function renderPrice(plan: any, billingKey = data.billingSwitch.defaultKey) {
     const productConfig = providerConfig.products[plan.key as 'free' | 'pro' | 'ultra'];
     const pricing = productConfig.plans[billingKey as 'monthly' | 'yearly'];
@@ -72,7 +66,6 @@ export async function MoneyPrice({
     ) || defaultBillingDisplay;
     const billingSubTitle = currentBillingDisplay?.subTitle || '';
     
-    // 免费计划
     if (pricing.amount === 0) {
       return (
         <div className="flex flex-col items-start w-full" data-price-container={plan.key}>
@@ -92,7 +85,6 @@ export async function MoneyPrice({
       );
     }
     
-    // 付费计划
     const hasDiscount = pricing.discountPercent && pricing.discountPercent > 0;
     const unit = currentBillingDisplay.unit || '';
     let discountText = '';
@@ -140,7 +132,6 @@ export async function MoneyPrice({
 
   return (
     <section id="money-pricing" className={cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName)}>
-      {/* 标题和副标题 */}
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-3">
         {data.title}
       </h2>
@@ -148,7 +139,6 @@ export async function MoneyPrice({
         {data.subtitle}
       </p>
 
-      {/* 计费切换按钮 */}
       <div className="flex flex-col items-center">
         <div className="flex items-center relative mb-3">
           <div className="flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1" data-billing-switch>
@@ -179,12 +169,10 @@ export async function MoneyPrice({
           </div>
         </div>
         
-        {/* 折扣信息 - 默认计费的静态渲染 */}
         <div className="h-8 flex items-center justify-center mb-3" data-discount-info>
           {(() => {
             const opt = data.billingSwitch.options.find((opt: any) => opt.key === data.billingSwitch.defaultKey);
             
-            // 检查默认计费类型是否有折扣
             let hasDiscount = false;
             let discountPercent = 0;
             
@@ -211,7 +199,6 @@ export async function MoneyPrice({
         </div>
       </div>
 
-      {/* 价格卡片区域 */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         {data.plans.map((plan: any, _idx: number) => (
           <div
@@ -224,7 +211,6 @@ export async function MoneyPrice({
             )}
             style={{ minHeight: maxFeaturesCount*100 }}
           >
-            {/* 标题和标签 */}
             <div className="flex items-center gap-2 mb-2">
               <span className="text-xl font-bold text-gray-900 dark:text-gray-100">{plan.title}</span>
               {plan.titleTags && plan.titleTags.map((tag: string, i: number) => (
@@ -234,14 +220,11 @@ export async function MoneyPrice({
               ))}
             </div>
             
-            {/* 价格和单位/折扣 */}
             {renderPrice(plan)}
             
-            {/* 特性列表 */}
             <ul className="flex-1 mb-6 mt-4">
               {getFeatureRows(plan).map((feature: any, i: number) => (
                 <li key={i} className="flex items-center gap-2 mb-2 min-h-[28px]" data-feature-item={`${plan.key}-${i}`}>
-                  {/* 图标 */}
                   {feature ? (
                     <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">
                       {feature.icon ? <span>{feature.icon}</span> : <span className="font-bold">✓</span>}
@@ -249,13 +232,11 @@ export async function MoneyPrice({
                   ) : (
                     <span className="inline-flex items-center justify-center w-5 h-5 rounded-full mr-1">&nbsp;</span>
                   )}
-                  {/* 标签 */}
                   {feature && feature.tag && (
                     <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">
                       {feature.tag}
                     </span>
                   )}
-                  {/* 描述 + 提示 */}
                   {feature ? (
                     <span className="relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200">
                       {feature.description}
@@ -279,23 +260,15 @@ export async function MoneyPrice({
               ))}
             </ul>
             
-            {/* 占位符，确保卡片高度一致 */}
             <div className="flex-1" />
             
-            {/* 按钮占位，客户端会替换 */}
-            <div data-button-placeholder={plan.key}>
-              <GradientButton
-                title={data.buttonTexts.getStarted}
-                disabled={true}
-                align="center"
-                className="w-full"
-              />
+            <div data-button-placeholder={plan.key} className="w-full">
+              {/* MoneyPriceInteractive will render the button here */}
             </div>
           </div>
         ))}
       </div>
       
-      {/* 客户端增强组件 */}
       <MoneyPriceInteractive 
         data={data}
         config={config}