@windrun-huaiin/third-ui 7.3.9 → 7.3.10

package/dist/main/faq.js

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

package/dist/main/faq.mjs

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

package/dist/main/gallery.js

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

package/dist/main/gallery.mjs

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

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,17 @@ 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) {
+                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 +250,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,17 @@ 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) {
+                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 +248,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/price-plan.js

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

package/dist/main/price-plan.mjs

@@ -12,6 +12,7 @@ import { PricePlanInteractive } from './price-plan-interactive.mjs';
 import '@clerk/nextjs';
 import '../clerk/fingerprint/fingerprint-provider.mjs';
 import 'next/navigation';
+import 'react-dom';
 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/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.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.10",
   "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-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,30 @@ 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) {
+        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 +296,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 +321,5 @@ export function MoneyPriceInteractive({
     );
   };
 
-  return <Tooltip {...tooltip} />
+  return <Tooltip {...tooltip} />;
 }