@windrun-huaiin/third-ui 30.1.0 → 31.0.1

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

@@ -2,30 +2,30 @@
 
 /**
  * Money Price Configuration
- * 价格组件配置文件
+ * Pricing component configuration.
  */
 /**
- * 获取当前激活的支付供应商配置
+ * Get the currently active payment provider configuration.
  *
- * 🔒 安全设计：
- * - util层负责从config中提取激活的provider配置
- * - 只返回提取的结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer extracts the active provider configuration from the config.
+ * - Only the extracted result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 当前激活的支付供应商配置
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The currently active payment provider configuration.
  */
 function getActiveProviderConfigUtil(config) {
     const provider = config.activeProvider;
     return config.paymentProviders[provider];
 }
-// 辅助函数：获取特定产品的价格信息
+// Helper: get pricing information for a specific product.
 function getProductPricing(productKey, billingType, provider, config) {
     const providerConfig = config.paymentProviders[provider];
-    // 如果是 onetime 类型，尝试从积分包中获取
+    // For one-time billing, try to resolve pricing from credit packs.
     if (billingType === 'onetime') {
         const creditPacks = providerConfig.creditPackProducts;
-        // 直接使用相同的 key：F1->F1, P2->P2, U3->U3
+        // Use the same product key directly: F1 -> F1, P2 -> P2, U3 -> U3.
         if (creditPacks && creditPacks[productKey]) {
             const pack = creditPacks[productKey];
             return {
@@ -36,33 +36,33 @@ function getProductPricing(productKey, billingType, provider, config) {
             };
         }
     }
-    // 否则从订阅产品中获取
+    // Otherwise resolve pricing from subscription products.
     const products = providerConfig.subscriptionProducts || providerConfig.products;
     if (products && products[productKey] && products[productKey].plans[billingType]) {
         return products[productKey].plans[billingType];
     }
     throw new Error(`Product pricing not found for ${productKey} ${billingType}`);
 }
-// ============ 安全的util函数 - 只接收简单的映射表参数，不暴露任何config细节 ============
+// ============ Safe utility functions: accept only simple mapping inputs and do not expose config internals ============
 /**
- * 根据 priceId 获取对应的积分数量
+ * Get the credit amount for a price ID.
  *
- * 🔒 安全设计：
- * - util层负责解析config，提取所需数据
- * - 只返回查询结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer parses the config and extracts only the required data.
+ * - Only the query result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param priceId - 查询的价格ID
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 对应的积分数量，或null
+ * @param priceId - Price ID to query.
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The matching credit amount, or null.
  */
 function getCreditsFromPriceIdUtil(priceId, config) {
     if (!priceId) {
         return null;
     }
-    // 遍历所有支付提供商
+    // Iterate through all payment providers.
     for (const provider of Object.values(config.paymentProviders)) {
-        // 遍历订阅产品
+        // Iterate through subscription products.
         const subscriptionProducts = (provider.subscriptionProducts || provider.products);
         if (subscriptionProducts) {
             for (const product of Object.values(subscriptionProducts)) {
@@ -76,7 +76,7 @@ function getCreditsFromPriceIdUtil(priceId, config) {
                 }
             }
         }
-        // 遍历积分包产品
+        // Iterate through credit pack products.
         const creditPacks = provider.creditPackProducts;
         if (creditPacks) {
             for (const pack of Object.values(creditPacks)) {
@@ -90,46 +90,46 @@ function getCreditsFromPriceIdUtil(priceId, config) {
     return null;
 }
 /**
- * 根据查询参数获取价格配置
+ * Get price configuration by query parameters.
  *
- * 支持三种查询方式：
- * 1. 按 priceId 直接查询
- * 2. 按 plan + billingType 查询
- * 3. 按 plan 查询
+ * Supported query modes:
+ * 1. Query directly by priceId.
+ * 2. Query by plan and billingType.
+ * 3. Query by plan.
  *
- * 🔒 安全设计：
- * - util层负责解析config，提取和匹配数据
- * - 只返回查询结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer parses the config and extracts only matching data.
+ * - Only the query result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param priceId - 查询的价格ID（可选）
- * @param plan - 查询的套餐名称如'P2'、'U3'（可选）
- * @param billingType - 查询的计费类型如'monthly'、'yearly'（可选）
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 匹配的价格配置，包含计算好的元数据（priceName、description、interval）
+ * @param priceId - Optional price ID to query.
+ * @param plan - Optional plan name, such as 'P2' or 'U3'.
+ * @param billingType - Optional billing type, such as 'monthly' or 'yearly'.
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The matching price config with derived metadata: priceName, description, and interval.
  */
 function getPriceConfigUtil(priceId, plan, billingType, config) {
-    // 遍历所有支付提供商
+    // Iterate through all payment providers.
     for (const provider of Object.values(config.paymentProviders)) {
-        // 遍历订阅产品
+        // Iterate through subscription products.
         const subscriptionProducts = (provider.subscriptionProducts || provider.products);
         if (subscriptionProducts) {
             for (const [productKey, product] of Object.entries(subscriptionProducts)) {
                 if (product.plans) {
                     for (const [billingKey, planConfig] of Object.entries(product.plans)) {
                         const plan_config = planConfig;
-                        // 匹配逻辑：按优先级尝试
-                        // 1. 按priceId精确匹配（优先级最高）
+                        // Matching order by priority.
+                        // 1. Exact priceId match with highest priority.
                         if (priceId && plan_config.priceId === priceId) {
                             return Object.assign(Object.assign({}, plan_config), { priceName: `${productKey} ${billingKey}`, description: `${productKey} plan - ${billingKey} billing`, interval: billingKey === 'yearly' ? 'year' : 'month' });
                         }
-                        // 2. 按plan和billingType同时匹配
+                        // 2. Match by both plan and billingType.
                         if (!priceId && plan && billingType) {
                             if (productKey === plan && billingKey === billingType) {
                                 return Object.assign(Object.assign({}, plan_config), { priceName: `${productKey} ${billingKey}`, description: `${productKey} plan - ${billingKey} billing`, interval: billingKey === 'yearly' ? 'year' : 'month' });
                             }
                         }
-                        // 3. 按plan匹配（billingType为空时）
+                        // 3. Match by plan when billingType is empty.
                         if (!priceId && !billingType && plan && productKey === plan) {
                             return Object.assign(Object.assign({}, plan_config), { priceName: `${productKey} ${billingKey}`, description: `${productKey} plan - ${billingKey} billing`, interval: billingKey === 'yearly' ? 'year' : 'month' });
                         }
@@ -137,12 +137,12 @@ function getPriceConfigUtil(priceId, plan, billingType, config) {
                 }
             }
         }
-        // 遍历积分包产品
+        // Iterate through credit pack products.
         const creditPacks = provider.creditPackProducts;
         if (creditPacks) {
             for (const [packKey, pack] of Object.entries(creditPacks)) {
                 const pack_typed = pack;
-                // 积分包匹配
+                // Credit pack match.
                 if (priceId && pack_typed.priceId === priceId) {
                     return {
                         priceId: pack_typed.priceId,
@@ -154,7 +154,7 @@ function getPriceConfigUtil(priceId, plan, billingType, config) {
                         interval: 'onetime',
                     };
                 }
-                // 按plan和onetime匹配
+                // Match by plan and one-time billing.
                 if (!priceId && plan && billingType === 'onetime') {
                     if (packKey === plan) {
                         return {
@@ -168,7 +168,7 @@ function getPriceConfigUtil(priceId, plan, billingType, config) {
                         };
                     }
                 }
-                // 按plan匹配（billingType为空时也能找到first积分包）
+                // Match by plan; also resolves the first credit pack when billingType is empty.
                 if (!priceId && !billingType && plan && packKey === plan) {
                     return {
                         priceId: pack_typed.priceId,

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

@@ -1,29 +1,29 @@
 /**
  * Money Price Configuration
- * 价格组件配置文件
+ * Pricing component configuration.
  */
 /**
- * 获取当前激活的支付供应商配置
+ * Get the currently active payment provider configuration.
  *
- * 🔒 安全设计：
- * - util层负责从config中提取激活的provider配置
- * - 只返回提取的结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer extracts the active provider configuration from the config.
+ * - Only the extracted result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 当前激活的支付供应商配置
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The currently active payment provider configuration.
  */
 function getActiveProviderConfigUtil(config) {
     const provider = config.activeProvider;
     return config.paymentProviders[provider];
 }
-// 辅助函数：获取特定产品的价格信息
+// Helper: get pricing information for a specific product.
 function getProductPricing(productKey, billingType, provider, config) {
     const providerConfig = config.paymentProviders[provider];
-    // 如果是 onetime 类型，尝试从积分包中获取
+    // For one-time billing, try to resolve pricing from credit packs.
     if (billingType === 'onetime') {
         const creditPacks = providerConfig.creditPackProducts;
-        // 直接使用相同的 key：F1->F1, P2->P2, U3->U3
+        // Use the same product key directly: F1 -> F1, P2 -> P2, U3 -> U3.
         if (creditPacks && creditPacks[productKey]) {
             const pack = creditPacks[productKey];
             return {
@@ -34,33 +34,33 @@ function getProductPricing(productKey, billingType, provider, config) {
             };
         }
     }
-    // 否则从订阅产品中获取
+    // Otherwise resolve pricing from subscription products.
     const products = providerConfig.subscriptionProducts || providerConfig.products;
     if (products && products[productKey] && products[productKey].plans[billingType]) {
         return products[productKey].plans[billingType];
     }
     throw new Error(`Product pricing not found for ${productKey} ${billingType}`);
 }
-// ============ 安全的util函数 - 只接收简单的映射表参数，不暴露任何config细节 ============
+// ============ Safe utility functions: accept only simple mapping inputs and do not expose config internals ============
 /**
- * 根据 priceId 获取对应的积分数量
+ * Get the credit amount for a price ID.
  *
- * 🔒 安全设计：
- * - util层负责解析config，提取所需数据
- * - 只返回查询结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer parses the config and extracts only the required data.
+ * - Only the query result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param priceId - 查询的价格ID
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 对应的积分数量，或null
+ * @param priceId - Price ID to query.
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The matching credit amount, or null.
  */
 function getCreditsFromPriceIdUtil(priceId, config) {
     if (!priceId) {
         return null;
     }
-    // 遍历所有支付提供商
+    // Iterate through all payment providers.
     for (const provider of Object.values(config.paymentProviders)) {
-        // 遍历订阅产品
+        // Iterate through subscription products.
         const subscriptionProducts = (provider.subscriptionProducts || provider.products);
         if (subscriptionProducts) {
             for (const product of Object.values(subscriptionProducts)) {
@@ -74,7 +74,7 @@ function getCreditsFromPriceIdUtil(priceId, config) {
                 }
             }
         }
-        // 遍历积分包产品
+        // Iterate through credit pack products.
         const creditPacks = provider.creditPackProducts;
         if (creditPacks) {
             for (const pack of Object.values(creditPacks)) {
@@ -88,46 +88,46 @@ function getCreditsFromPriceIdUtil(priceId, config) {
     return null;
 }
 /**
- * 根据查询参数获取价格配置
+ * Get price configuration by query parameters.
  *
- * 支持三种查询方式：
- * 1. 按 priceId 直接查询
- * 2. 按 plan + billingType 查询
- * 3. 按 plan 查询
+ * Supported query modes:
+ * 1. Query directly by priceId.
+ * 2. Query by plan and billingType.
+ * 3. Query by plan.
  *
- * 🔒 安全设计：
- * - util层负责解析config，提取和匹配数据
- * - 只返回查询结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer parses the config and extracts only matching data.
+ * - Only the query result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param priceId - 查询的价格ID（可选）
- * @param plan - 查询的套餐名称如'P2'、'U3'（可选）
- * @param billingType - 查询的计费类型如'monthly'、'yearly'（可选）
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 匹配的价格配置，包含计算好的元数据（priceName、description、interval）
+ * @param priceId - Optional price ID to query.
+ * @param plan - Optional plan name, such as 'P2' or 'U3'.
+ * @param billingType - Optional billing type, such as 'monthly' or 'yearly'.
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The matching price config with derived metadata: priceName, description, and interval.
  */
 function getPriceConfigUtil(priceId, plan, billingType, config) {
-    // 遍历所有支付提供商
+    // Iterate through all payment providers.
     for (const provider of Object.values(config.paymentProviders)) {
-        // 遍历订阅产品
+        // Iterate through subscription products.
         const subscriptionProducts = (provider.subscriptionProducts || provider.products);
         if (subscriptionProducts) {
             for (const [productKey, product] of Object.entries(subscriptionProducts)) {
                 if (product.plans) {
                     for (const [billingKey, planConfig] of Object.entries(product.plans)) {
                         const plan_config = planConfig;
-                        // 匹配逻辑：按优先级尝试
-                        // 1. 按priceId精确匹配（优先级最高）
+                        // Matching order by priority.
+                        // 1. Exact priceId match with highest priority.
                         if (priceId && plan_config.priceId === priceId) {
                             return Object.assign(Object.assign({}, plan_config), { priceName: `${productKey} ${billingKey}`, description: `${productKey} plan - ${billingKey} billing`, interval: billingKey === 'yearly' ? 'year' : 'month' });
                         }
-                        // 2. 按plan和billingType同时匹配
+                        // 2. Match by both plan and billingType.
                         if (!priceId && plan && billingType) {
                             if (productKey === plan && billingKey === billingType) {
                                 return Object.assign(Object.assign({}, plan_config), { priceName: `${productKey} ${billingKey}`, description: `${productKey} plan - ${billingKey} billing`, interval: billingKey === 'yearly' ? 'year' : 'month' });
                             }
                         }
-                        // 3. 按plan匹配（billingType为空时）
+                        // 3. Match by plan when billingType is empty.
                         if (!priceId && !billingType && plan && productKey === plan) {
                             return Object.assign(Object.assign({}, plan_config), { priceName: `${productKey} ${billingKey}`, description: `${productKey} plan - ${billingKey} billing`, interval: billingKey === 'yearly' ? 'year' : 'month' });
                         }
@@ -135,12 +135,12 @@ function getPriceConfigUtil(priceId, plan, billingType, config) {
                 }
             }
         }
-        // 遍历积分包产品
+        // Iterate through credit pack products.
         const creditPacks = provider.creditPackProducts;
         if (creditPacks) {
             for (const [packKey, pack] of Object.entries(creditPacks)) {
                 const pack_typed = pack;
-                // 积分包匹配
+                // Credit pack match.
                 if (priceId && pack_typed.priceId === priceId) {
                     return {
                         priceId: pack_typed.priceId,
@@ -152,7 +152,7 @@ function getPriceConfigUtil(priceId, plan, billingType, config) {
                         interval: 'onetime',
                     };
                 }
-                // 按plan和onetime匹配
+                // Match by plan and one-time billing.
                 if (!priceId && plan && billingType === 'onetime') {
                     if (packKey === plan) {
                         return {
@@ -166,7 +166,7 @@ function getPriceConfigUtil(priceId, plan, billingType, config) {
                         };
                     }
                 }
-                // 按plan匹配（billingType为空时也能找到first积分包）
+                // Match by plan; also resolves the first credit pack when billingType is empty.
                 if (!priceId && !billingType && plan && packKey === plan) {
                     return {
                         priceId: pack_typed.priceId,

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

@@ -12,6 +12,9 @@ var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceTypes = require('./money-price-types.js');
 var customerPortal = require('./customer-portal.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
+var animeBeamFrame = require('../anime/anime-beam-frame.js');
+require('animejs');
+require('../anime/anime-404-page.js');
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
 function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
@@ -21,11 +24,11 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const providerConfig = React.useMemo(() => moneyPriceConfigUtil.getActiveProviderConfigUtil(config), [config]);
     const billingOptions = React.useMemo(() => {
         const options = data.billingSwitch.options;
-        // 如果配置了 enabledBillingTypes，只显示配置的类型
+        // If enabledBillingTypes is configured, show only those billing types.
         if (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) {
             return options.filter(option => enabledBillingTypes.includes(option.key));
         }
-        // 否则显示所有配置的选项
+        // Otherwise show all configured options.
         return options;
     }, [data.billingSwitch.options, enabledBillingTypes]);
     const billingOptionMap = React.useMemo(() => {
@@ -37,11 +40,11 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const defaultBilling = React.useMemo(() => {
         var _a;
         const defaultKey = data.billingSwitch.defaultKey;
-        // 如果默认值在可用选项中，使用默认值
+        // Use the default value when it is available.
         if (billingOptions.some(opt => opt.key === defaultKey)) {
             return defaultKey;
         }
-        // 否则使用第一个可用选项
+        // Otherwise use the first available option.
         return ((_a = billingOptions[0]) === null || _a === void 0 ? void 0 : _a.key) || 'monthly';
     }, [data.billingSwitch.defaultKey, billingOptions]);
     const resolvedInitialBilling = React.useMemo(() => {
@@ -53,18 +56,18 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     }, [initialBillingType, billingOptions, defaultBilling]);
     const priceIdsByCycle = React.useMemo(() => {
         const priceIds = {};
-        // 为每个可用的计费类型创建价格ID数组
+        // Build a price ID list for each available billing type.
         billingOptions.forEach(option => {
             priceIds[option.key] = [];
             if (option.key === 'onetime') {
-                // 处理积分包产品
+                // Handle credit pack products.
                 const creditPacks = providerConfig.creditPackProducts || {};
                 Object.values(creditPacks).forEach((pack) => {
                     priceIds[option.key].push(pack.priceId);
                 });
             }
             else {
-                // 处理订阅产品
+                // Handle subscription products.
                 const products = providerConfig.subscriptionProducts || providerConfig.products || {};
                 PLAN_KEYS.forEach(planKey => {
                     const product = products[planKey];
@@ -263,7 +266,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         userContext,
         enableSubscriptionUpgrade
     ]);
-    // 根据当前计费类型动态选择要显示的 plans
+    // Select visible plans dynamically based on the current billing type.
     const currentPlans = React.useMemo(() => {
         if (billingType === 'onetime') {
             return data.creditsPlans || [];
@@ -288,11 +291,11 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const discountBadgeText = React.useMemo(() => {
         if (!(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText))
             return null;
-        // 对于 onetime 模式，直接显示 discountText，不依赖 discountPercent
+        // In one-time mode, show discountText directly without relying on discountPercent.
         if (billingType === 'onetime') {
             return selectedBillingOption.discountText;
         }
-        // 对于订阅模式，查找 discountPercent 并替换
+        // In subscription mode, find discountPercent and interpolate it.
         let discountPercent = null;
         const products = providerConfig.subscriptionProducts || providerConfig.products || {};
         PLAN_KEYS.forEach(planKey => {
@@ -306,7 +309,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return null;
         return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
     }, [selectedBillingOption, providerConfig, billingType]);
-    // 配置移动端BillingTypeButton悬浮样式
+    // Configure the mobile floating style for BillingTypeButton.
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsxRuntime.jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
@@ -315,6 +318,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                         const showBadge = option.key === billingType && !!discountBadgeText;
                         return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
                     }) }) }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        var _a, _b;
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {
                             console.warn(`Unknown plan key "${plan.key}" detected in pricing plans`);
@@ -323,13 +327,21 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                         const pricing = getPricingForPlan(planKey);
                         const showBillingSubtitle = plan.showBillingSubTitle !== false;
                         const hasDiscount = !!pricing.discountPercent && !!pricing.originalAmount;
-                        // 移动端宽度样式
-                        return (jsxRuntime.jsxs("div", { "data-price-plan": planKey, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-current', 'focus-within:border-2 focus-within:border-current', lib.themeIconColor), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-lg md: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)))] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsxRuntime.jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsxRuntime.jsx("div", { className: utils.cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
-                                                    // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
-                                                    jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsxRuntime.jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxRuntime.jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
-                                                    // 其他模式下保持原逻辑
-                                                    showBillingSubtitle && (jsxRuntime.jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) || '' }))) })] })] }), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${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("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsxRuntime.jsx("span", { children: feature.description }), feature.tooltip && (jsxRuntime.jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: planKey, userContext: userContext, billingType: billingType, onAuth: handleAuth, onAction: handleAction, texts: data.buttonTexts, isProcessing: (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.plan) === planKey &&
-                                        (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.billing) === billingType, isAnyProcessing: !!processingTarget, isInitLoading: isInitLoading, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }, plan.key));
+                        const hasStrictDiffAnime = Object.prototype.hasOwnProperty.call((_a = plan.strictDiffAnime) !== null && _a !== void 0 ? _a : {}, billingType);
+                        const animeTone = hasStrictDiffAnime
+                            ? (_b = plan.strictDiffAnime) === null || _b === void 0 ? void 0 : _b[billingType]
+                            : plan.animeTone;
+                        const hasAnimeTone = !!animeTone;
+                        return (jsxRuntime.jsx(animeBeamFrame.AnimeBeamFrame, { active: false, interactive: hasAnimeTone, tone: animeTone !== null && animeTone !== void 0 ? animeTone : 'theme', radius: 16, className: utils.cn('h-full w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0'), children: jsxRuntime.jsxs("div", { "data-price-plan": planKey, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none', !hasAnimeTone && [
+                                    'hover:border-current',
+                                    'focus-within:border-current',
+                                    lib.themeIconColor,
+                                ]), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-lg md: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)))] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsxRuntime.jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsxRuntime.jsx("div", { className: utils.cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
+                                                        // Special one-time mode rendering: plain text plus styled product subtitle.
+                                                        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsxRuntime.jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxRuntime.jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
+                                                        // Keep the original rendering for other modes.
+                                                        showBillingSubtitle && (jsxRuntime.jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) || '' }))) })] })] }), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${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("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsxRuntime.jsx("span", { children: feature.description }), feature.tooltip && (jsxRuntime.jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: planKey, userContext: userContext, billingType: billingType, onAuth: handleAuth, onAction: handleAction, texts: data.buttonTexts, isProcessing: (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.plan) === planKey &&
+                                            (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.billing) === billingType, isAnyProcessing: !!processingTarget, isInitLoading: isInitLoading, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }) }, `${billingType}-${plan.key}-${animeTone !== null && animeTone !== void 0 ? animeTone : 'none'}`));
                     }) }) })] }));
 }