@windrun-huaiin/third-ui 7.3.3 → 7.3.5

package/dist/clerk/fingerprint/fingerprint-provider.js

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var useFingerprint = require('./use-fingerprint.js');
+var server = require('@windrun-huaiin/base-ui/components/server');
 
 const FingerprintContext = React.createContext(undefined);
 /**
@@ -47,9 +48,29 @@ function withFingerprint(Component, config) {
 function FingerprintStatus() {
     const { fingerprintId, xUser, xCredit, xSubscription, isLoading, isInitialized, error } = useFingerprintContext();
     const [isOpen, setIsOpen] = React.useState(false);
+    const modalRef = React.useRef(null);
     const handleToggle = () => {
         setIsOpen(!isOpen);
     };
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            setIsOpen(false);
+        }
+    };
+    // ESC键关闭弹框
+    React.useEffect(() => {
+        const handleEscKey = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscKey);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscKey);
+        };
+    }, [isOpen]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: handleToggle, style: {
                     position: 'fixed',
                     top: '10px',
@@ -65,12 +86,11 @@ function FingerprintStatus() {
                     alignItems: 'center',
                     justifyContent: 'center',
                     boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-                }, children: jsxRuntime.jsx("span", { style: {
-                        fontSize: '24px',
+                }, children: jsxRuntime.jsx(server.globalLucideIcons.BTC, { size: 24, style: {
                         color: 'white',
                         transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                         transition: 'transform 0.3s ease',
-                    }, children: "\u25BC" }) }), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: {
+                    } }) }), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, style: {
                             position: 'fixed',
                             top: 0,
                             left: 0,
@@ -78,7 +98,7 @@ function FingerprintStatus() {
                             height: '100%',
                             background: 'rgba(0, 0, 0, 0.5)',
                             zIndex: 9998,
-                        } }), jsxRuntime.jsxs("div", { style: {
+                        } }), jsxRuntime.jsxs("div", { ref: modalRef, style: {
                             position: 'fixed',
                             top: '70px',
                             left: '10px',
@@ -87,11 +107,11 @@ function FingerprintStatus() {
                             borderRadius: '5px',
                             fontSize: '12px',
                             fontFamily: 'monospace',
-                            maxWidth: '300px',
+                            maxWidth: '500px',
                             zIndex: 9999,
                             border: '1px solid #ccc',
                             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
-                        }, children: [jsxRuntime.jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "FP_ID:" }), " ", fingerprintId || 'None'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxRuntime.jsxs("div", { style: { color: 'red' }, children: [jsxRuntime.jsx("strong", { children: "Error:" }), " ", error] }), xUser && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "user_id:" }), " ", xUser.userId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "clerk_user_id:" }), " ", xUser.clerkUserId || 'None', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "email:" }), " ", xUser.email || 'None', " ", jsxRuntime.jsx("br", {})] })), xCredit && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Credits:" }), " ", xCredit.balanceFree, " Free + ", xCredit.balancePaid, " Paid = ", xCredit.totalBalance, " Total"] })), xSubscription && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "user_id:" }), " ", xSubscription.userId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "pay_subscription_id:" }), " ", xSubscription.paySubscriptionId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "price_id:" }), " ", xSubscription.priceId || 'None', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "price_name:" }), " ", xSubscription.priceName || 'None', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "status:" }), " ", xSubscription.status || 'Free', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "credits_allocated:" }), " ", xSubscription.creditsAllocated || '', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "sub_period_start:" }), " ", xSubscription.subPeriodStart || '', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "sub_period_end:" }), " ", xSubscription.subPeriodEnd || '', " ", jsxRuntime.jsx("br", {})] }))] })] }))] }));
+                        }, children: [jsxRuntime.jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "FP_ID:" }), " ", fingerprintId || 'None'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxRuntime.jsxs("div", { style: { color: 'red' }, children: [jsxRuntime.jsx("strong", { children: "Error:" }), " ", error] }), xUser && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "user_id:" }), " ", xUser.userId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "clerk_user_id:" }), " ", xUser.clerkUserId || 'None', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "email:" }), " ", xUser.email || 'None', " ", jsxRuntime.jsx("br", {})] })), xCredit && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Credits:" }), " ", xCredit.balanceFree, " Free + ", xCredit.balancePaid, " Paid = ", xCredit.totalBalance, " Total"] })), jsxRuntime.jsx("div", { children: xSubscription ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("strong", { children: "user_id:" }), " ", xSubscription.userId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "pay_subscription_id:" }), " ", xSubscription.paySubscriptionId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "price_id:" }), " ", xSubscription.priceId || 'None', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "price_name:" }), " ", xSubscription.priceName || 'None', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "status:" }), " ", xSubscription.status || 'Free', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "credits_allocated:" }), " ", xSubscription.creditsAllocated || '', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "sub_period_start:" }), " ", xSubscription.subPeriodStart || '', " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "sub_period_end:" }), " ", xSubscription.subPeriodEnd || '', " ", jsxRuntime.jsx("br", {})] })) : (jsxRuntime.jsx("strong", { children: "No Subscription, Default as Hobby Plan" })) })] })] }))] }));
 }
 
 exports.FingerprintProvider = FingerprintProvider;

package/dist/clerk/fingerprint/fingerprint-provider.mjs

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
 import { useFingerprint } from './use-fingerprint.mjs';
+import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 
 const FingerprintContext = createContext(undefined);
 /**
@@ -45,9 +46,29 @@ function withFingerprint(Component, config) {
 function FingerprintStatus() {
     const { fingerprintId, xUser, xCredit, xSubscription, isLoading, isInitialized, error } = useFingerprintContext();
     const [isOpen, setIsOpen] = useState(false);
+    const modalRef = useRef(null);
     const handleToggle = () => {
         setIsOpen(!isOpen);
     };
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            setIsOpen(false);
+        }
+    };
+    // ESC键关闭弹框
+    useEffect(() => {
+        const handleEscKey = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscKey);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscKey);
+        };
+    }, [isOpen]);
     return (jsxs(Fragment, { children: [jsx("button", { onClick: handleToggle, style: {
                     position: 'fixed',
                     top: '10px',
@@ -63,12 +84,11 @@ function FingerprintStatus() {
                     alignItems: 'center',
                     justifyContent: 'center',
                     boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-                }, children: jsx("span", { style: {
-                        fontSize: '24px',
+                }, children: jsx(globalLucideIcons.BTC, { size: 24, style: {
                         color: 'white',
                         transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                         transition: 'transform 0.3s ease',
-                    }, children: "\u25BC" }) }), isOpen && (jsxs(Fragment, { children: [jsx("div", { style: {
+                    } }) }), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, style: {
                             position: 'fixed',
                             top: 0,
                             left: 0,
@@ -76,7 +96,7 @@ function FingerprintStatus() {
                             height: '100%',
                             background: 'rgba(0, 0, 0, 0.5)',
                             zIndex: 9998,
-                        } }), jsxs("div", { style: {
+                        } }), jsxs("div", { ref: modalRef, style: {
                             position: 'fixed',
                             top: '70px',
                             left: '10px',
@@ -85,11 +105,11 @@ function FingerprintStatus() {
                             borderRadius: '5px',
                             fontSize: '12px',
                             fontFamily: 'monospace',
-                            maxWidth: '300px',
+                            maxWidth: '500px',
                             zIndex: 9999,
                             border: '1px solid #ccc',
                             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
-                        }, children: [jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxs("div", { children: [jsx("strong", { children: "FP_ID:" }), " ", fingerprintId || 'None'] }), jsxs("div", { children: [jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxs("div", { children: [jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxs("div", { style: { color: 'red' }, children: [jsx("strong", { children: "Error:" }), " ", error] }), xUser && (jsxs("div", { children: [jsx("strong", { children: "user_id:" }), " ", xUser.userId, " ", jsx("br", {}), jsx("strong", { children: "clerk_user_id:" }), " ", xUser.clerkUserId || 'None', " ", jsx("br", {}), jsx("strong", { children: "email:" }), " ", xUser.email || 'None', " ", jsx("br", {})] })), xCredit && (jsxs("div", { children: [jsx("strong", { children: "Credits:" }), " ", xCredit.balanceFree, " Free + ", xCredit.balancePaid, " Paid = ", xCredit.totalBalance, " Total"] })), xSubscription && (jsxs("div", { children: [jsx("strong", { children: "user_id:" }), " ", xSubscription.userId, " ", jsx("br", {}), jsx("strong", { children: "pay_subscription_id:" }), " ", xSubscription.paySubscriptionId, " ", jsx("br", {}), jsx("strong", { children: "price_id:" }), " ", xSubscription.priceId || 'None', " ", jsx("br", {}), jsx("strong", { children: "price_name:" }), " ", xSubscription.priceName || 'None', " ", jsx("br", {}), jsx("strong", { children: "status:" }), " ", xSubscription.status || 'Free', " ", jsx("br", {}), jsx("strong", { children: "credits_allocated:" }), " ", xSubscription.creditsAllocated || '', " ", jsx("br", {}), jsx("strong", { children: "sub_period_start:" }), " ", xSubscription.subPeriodStart || '', " ", jsx("br", {}), jsx("strong", { children: "sub_period_end:" }), " ", xSubscription.subPeriodEnd || '', " ", jsx("br", {})] }))] })] }))] }));
+                        }, children: [jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxs("div", { children: [jsx("strong", { children: "FP_ID:" }), " ", fingerprintId || 'None'] }), jsxs("div", { children: [jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxs("div", { children: [jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxs("div", { style: { color: 'red' }, children: [jsx("strong", { children: "Error:" }), " ", error] }), xUser && (jsxs("div", { children: [jsx("strong", { children: "user_id:" }), " ", xUser.userId, " ", jsx("br", {}), jsx("strong", { children: "clerk_user_id:" }), " ", xUser.clerkUserId || 'None', " ", jsx("br", {}), jsx("strong", { children: "email:" }), " ", xUser.email || 'None', " ", jsx("br", {})] })), xCredit && (jsxs("div", { children: [jsx("strong", { children: "Credits:" }), " ", xCredit.balanceFree, " Free + ", xCredit.balancePaid, " Paid = ", xCredit.totalBalance, " Total"] })), jsx("div", { children: xSubscription ? (jsxs(Fragment, { children: [jsx("strong", { children: "user_id:" }), " ", xSubscription.userId, " ", jsx("br", {}), jsx("strong", { children: "pay_subscription_id:" }), " ", xSubscription.paySubscriptionId, " ", jsx("br", {}), jsx("strong", { children: "price_id:" }), " ", xSubscription.priceId || 'None', " ", jsx("br", {}), jsx("strong", { children: "price_name:" }), " ", xSubscription.priceName || 'None', " ", jsx("br", {}), jsx("strong", { children: "status:" }), " ", xSubscription.status || 'Free', " ", jsx("br", {}), jsx("strong", { children: "credits_allocated:" }), " ", xSubscription.creditsAllocated || '', " ", jsx("br", {}), jsx("strong", { children: "sub_period_start:" }), " ", xSubscription.subPeriodStart || '', " ", jsx("br", {}), jsx("strong", { children: "sub_period_end:" }), " ", xSubscription.subPeriodEnd || '', " ", jsx("br", {})] })) : (jsx("strong", { children: "No Subscription, Default as Hobby Plan" })) })] })] }))] }));
 }
 
 export { FingerprintProvider, FingerprintStatus, useFingerprintContext, useFingerprintContextSafe, withFingerprint };

package/dist/clerk/fingerprint/use-fingerprint.js

@@ -81,7 +81,7 @@ function useFingerprint(config) {
         finally {
             setIsLoading(false);
         }
-    }), [fingerprintId]);
+    }), [fingerprintId, config.apiEndpoint]);
     /**
      * 刷新用户数据
      */

package/dist/clerk/fingerprint/use-fingerprint.mjs

@@ -79,7 +79,7 @@ function useFingerprint(config) {
         finally {
             setIsLoading(false);
         }
-    }), [fingerprintId]);
+    }), [fingerprintId, config.apiEndpoint]);
     /**
      * 刷新用户数据
      */

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');
@@ -23,7 +22,6 @@ require('fumadocs-core/link');
 require('fumadocs-ui/components/ui/collapsible');
 require('../fuma/mdx/banner.js');
 require('./money-price/money-price-types.js');
-require('./money-price/money-price-config.js');
 
 function FAQ(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {

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';
@@ -21,7 +20,6 @@ import 'fumadocs-core/link';
 import 'fumadocs-ui/components/ui/collapsible';
 import '../fuma/mdx/banner.mjs';
 import './money-price/money-price-types.mjs';
-import './money-price/money-price-config.mjs';
 
 function FAQ(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {

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');
@@ -23,7 +22,6 @@ require('fumadocs-core/link');
 require('fumadocs-ui/components/ui/collapsible');
 require('../fuma/mdx/banner.js');
 require('./money-price/money-price-types.js');
-require('./money-price/money-price-config.js');
 
 function Gallery(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName, button }) {

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';
@@ -21,7 +20,6 @@ import 'fumadocs-core/link';
 import 'fumadocs-ui/components/ui/collapsible';
 import '../fuma/mdx/banner.mjs';
 import './money-price/money-price-types.mjs';
-import './money-price/money-price-config.mjs';
 
 function Gallery(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName, button }) {

package/dist/main/money-price/money-price-config-util.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Money Price Configuration
+ * 价格组件配置文件
+ */
+import type { MoneyPriceConfig, PaymentProviderConfig, EnhancePricePlan } from './money-price-types';
+export declare function getActiveProviderConfig(config: MoneyPriceConfig): PaymentProviderConfig;
+export declare function getProductPricing(productKey: 'free' | 'pro' | 'ultra', billingType: 'monthly' | 'yearly', provider: string, config: MoneyPriceConfig): EnhancePricePlan;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * Money Price Configuration
+ * 价格组件配置文件
+ */
+// 辅助函数：获取当前激活的支付供应商配置
+function getActiveProviderConfig(config) {
+    const provider = config.activeProvider;
+    return config.paymentProviders[provider];
+}
+// 辅助函数：获取特定产品的价格信息
+function getProductPricing(productKey, billingType, provider, config) {
+    const providerConfig = config.paymentProviders[provider];
+    return providerConfig.products[productKey].plans[billingType];
+}
+
+exports.getActiveProviderConfig = getActiveProviderConfig;
+exports.getProductPricing = getProductPricing;

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

@@ -0,0 +1,16 @@
+/**
+ * Money Price Configuration
+ * 价格组件配置文件
+ */
+// 辅助函数：获取当前激活的支付供应商配置
+function getActiveProviderConfig(config) {
+    const provider = config.activeProvider;
+    return config.paymentProviders[provider];
+}
+// 辅助函数：获取特定产品的价格信息
+function getProductPricing(productKey, billingType, provider, config) {
+    const providerConfig = config.paymentProviders[provider];
+    return providerConfig.products[productKey].plans[billingType];
+}
+
+export { getActiveProviderConfig, getProductPricing };

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 moneyPriceConfig = require('./money-price-config.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 = moneyPriceConfig.getProductPricing(plan, billingType, config.activeProvider, config);
-            // 调用 API 创建支付会话
+            const pricing = moneyPriceConfigUtil.getProductPricing(plan, billingType, config.activeProvider, config);
             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 providerConfig = moneyPriceConfig.getActiveProviderConfig(config);
+    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 = moneyPriceConfig.getActiveProviderConfig(config);
-        // 检查是否有折扣
+        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,17 +179,7 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
             discountInfoElement.appendChild(discountBadge);
         }
-    };
-    // 动态替换按钮
-    React.useEffect(() => {
-        data.plans.forEach((plan) => {
-            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
-            if (placeholder) {
-                const root = client.createRoot(placeholder);
-                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]);
+    }, [config, data]);
     // 处理月付/年付切换和 tooltip 功能
     React.useEffect(() => {
         const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
@@ -220,7 +202,6 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
         if (yearlyButton) {
             yearlyButton.addEventListener('click', handleYearlyClick);
         }
-        // 添加 tooltip 功能
         const tooltipHandlers = [];
         data.plans.forEach((plan) => {
             var _a;
@@ -252,10 +233,8 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
                 }
             });
         });
-        // 初始化价格显示
         updatePriceDisplay(billingType);
         updateDiscountInfo(billingType);
-        // 清理
         return () => {
             if (monthlyButton) {
                 monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -263,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)
@@ -287,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;