@windrun-huaiin/third-ui 7.3.3 → 7.3.5

package/src/main/money-price/money-price-config-util.ts

@@ -0,0 +1,23 @@
+/**
+ * Money Price Configuration
+ * 价格组件配置文件
+ */
+
+import type { MoneyPriceConfig, PaymentProviderConfig, EnhancePricePlan } from './money-price-types';
+
+// 辅助函数：获取当前激活的支付供应商配置
+export function getActiveProviderConfig(config: MoneyPriceConfig): PaymentProviderConfig {
+  const provider = config.activeProvider;
+  return config.paymentProviders[provider];
+}
+
+// 辅助函数：获取特定产品的价格信息
+export function getProductPricing(
+  productKey: 'free' | 'pro' | 'ultra',
+  billingType: 'monthly' | 'yearly',
+  provider: string,
+  config: MoneyPriceConfig
+): EnhancePricePlan {
+  const providerConfig = config.paymentProviders[provider];
+  return providerConfig.products[productKey].plans[billingType];
+}

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

@@ -4,10 +4,9 @@ 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';
+import { getActiveProviderConfig, getProductPricing } from './money-price-config-util';
 import {
   UserState,
   type MoneyPriceInteractiveProps,
@@ -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,29 +206,8 @@ export function MoneyPriceInteractive({
       discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
       discountInfoElement.appendChild(discountBadge);
     }
-  };
-  
-  // 动态替换按钮
-  useEffect(() => {
-    data.plans.forEach((plan: any) => {
-      const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
-      if (placeholder) {
-        const root = createRoot(placeholder);
-        root.render(
-          <MoneyPriceButton
-            planKey={plan.key}
-            userContext={userContext}
-            billingType={billingType}
-            onLogin={handleLogin}
-            onUpgrade={handleUpgrade}
-            texts={data.buttonTexts}
-            isProcessing={isProcessing}
-          />
-        );
-      }
-    });
-  }, [userContext, billingType, isProcessing]);
-  
+  }, [config, data]);
+
   // 处理月付/年付切换和 tooltip 功能
   useEffect(() => {
     const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;
@@ -265,7 +234,6 @@ export function MoneyPriceInteractive({
       yearlyButton.addEventListener('click', handleYearlyClick);
     }
     
-    // 添加 tooltip 功能
     const tooltipHandlers: Array<{
       element: HTMLElement;
       handlers: {
@@ -307,11 +275,9 @@ export function MoneyPriceInteractive({
       });
     });
     
-    // 初始化价格显示
     updatePriceDisplay(billingType);
     updateDiscountInfo(billingType);
     
-    // 清理
     return () => {
       if (monthlyButton) {
         monthlyButton.removeEventListener('click', handleMonthlyClick);
@@ -320,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;
@@ -351,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-types.ts

@@ -20,7 +20,7 @@ export interface UserContext {
 }
 
 // 支付供应商类型
-export type PaymentProvider = 'stripe' | 'alipay' | 'wechat' | 'paypal';
+export type PaymentProvider = 'stripe' | 'apple' | 'paypal' | 'wechat' | 'alipay'  ;
 
 // 价格计划
 export interface EnhancePricePlan {

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';
+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}

package/src/main/server.ts

@@ -12,10 +12,9 @@ export * from './price-plan';
 // Money Price Server Component and Types
 export { MoneyPrice } from './money-price/money-price';
 export {
-  moneyPriceConfig,
   getActiveProviderConfig,
   getProductPricing
-} from './money-price/money-price-config';
+} from './money-price/money-price-config-util';
 
 // Money Price Types (shared between server and client)
 export type {