@windrun-huaiin/third-ui 30.0.0 → 31.0.0

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

@@ -1,27 +1,27 @@
 /**
  * Money Price Configuration
- * 价格组件配置文件
+ * Pricing component configuration.
  */
 
 import type { MoneyPriceConfig, PaymentProviderConfig, EnhancePricePlan } from './money-price-types';
 
 /**
- * 获取当前激活的支付供应商配置
+ * 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.
  */
 export function getActiveProviderConfigUtil(config: MoneyPriceConfig): PaymentProviderConfig {
   const provider = config.activeProvider;
   return config.paymentProviders[provider];
 }
 
-// 辅助函数：获取特定产品的价格信息
+// Helper: get pricing information for a specific product.
 export function getProductPricing(
   productKey: 'F1' | 'P2' | 'U3',
   billingType: string,
@@ -30,10 +30,10 @@ export function getProductPricing(
 ): EnhancePricePlan {
   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 {
@@ -45,7 +45,7 @@ export function getProductPricing(
     }
   }
 
-  // 否则从订阅产品中获取
+  // 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];
@@ -54,19 +54,19 @@ export function getProductPricing(
   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.
  */
 export function getCreditsFromPriceIdUtil(
   priceId: string | undefined,
@@ -76,9 +76,9 @@ export function getCreditsFromPriceIdUtil(
     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
     ) as Record<string, any>;
@@ -96,7 +96,7 @@ export function getCreditsFromPriceIdUtil(
       }
     }
 
-    // 遍历积分包产品
+    // Iterate through credit pack products.
     const creditPacks = provider.creditPackProducts as Record<string, any>;
     if (creditPacks) {
       for (const pack of Object.values(creditPacks)) {
@@ -112,23 +112,23 @@ export function getCreditsFromPriceIdUtil(
 }
 
 /**
- * 根据查询参数获取价格配置
+ * 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.
  */
 export function getPriceConfigUtil(
   priceId: string | undefined,
@@ -136,9 +136,9 @@ export function getPriceConfigUtil(
   billingType: string | undefined,
   config: MoneyPriceConfig
 ): (EnhancePricePlan & { priceName: string; description: string; interval?: string }) | null {
-  // 遍历所有支付提供商
+  // Iterate through all payment providers.
   for (const provider of Object.values(config.paymentProviders)) {
-    // 遍历订阅产品
+    // Iterate through subscription products.
     const subscriptionProducts = (
       provider.subscriptionProducts || provider.products
     ) as Record<string, any>;
@@ -149,8 +149,8 @@ export function getPriceConfigUtil(
           for (const [billingKey, planConfig] of Object.entries(product.plans)) {
             const plan_config = planConfig as any;
 
-            // 匹配逻辑：按优先级尝试
-            // 1. 按priceId精确匹配（优先级最高）
+            // Matching order by priority.
+            // 1. Exact priceId match with highest priority.
             if (priceId && plan_config.priceId === priceId) {
               return {
                 ...plan_config,
@@ -160,7 +160,7 @@ export function getPriceConfigUtil(
               };
             }
 
-            // 2. 按plan和billingType同时匹配
+            // 2. Match by both plan and billingType.
             if (!priceId && plan && billingType) {
               if (productKey === plan && billingKey === billingType) {
                 return {
@@ -172,7 +172,7 @@ export function getPriceConfigUtil(
               }
             }
 
-            // 3. 按plan匹配（billingType为空时）
+            // 3. Match by plan when billingType is empty.
             if (!priceId && !billingType && plan && productKey === plan) {
               return {
                 ...plan_config,
@@ -186,13 +186,13 @@ export function getPriceConfigUtil(
       }
     }
 
-    // 遍历积分包产品
+    // Iterate through credit pack products.
     const creditPacks = provider.creditPackProducts as Record<string, any>;
     if (creditPacks) {
       for (const [packKey, pack] of Object.entries(creditPacks)) {
         const pack_typed = pack as any;
 
-        // 积分包匹配
+        // Credit pack match.
         if (priceId && pack_typed.priceId === priceId) {
           return {
             priceId: pack_typed.priceId,
@@ -205,7 +205,7 @@ export function getPriceConfigUtil(
           };
         }
 
-        // 按plan和onetime匹配
+        // Match by plan and one-time billing.
         if (!priceId && plan && billingType === 'onetime') {
           if (packKey === plan) {
             return {
@@ -220,7 +220,7 @@ export function getPriceConfigUtil(
           }
         }
 
-        // 按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,
@@ -237,4 +237,4 @@ export function getPriceConfigUtil(
   }
 
   return null;
-}
+}

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

@@ -19,6 +19,7 @@ import {
 } from './money-price-types';
 import { redirectToCustomerPortal } from './customer-portal';
 import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { AnimeBeamFrame } from '../anime';
 
 type BillingType = string;
 type ProcessingTarget = {
@@ -56,12 +57,12 @@ export function MoneyPriceInteractive({
   const billingOptions = useMemo(() => {
     const options = data.billingSwitch.options as BillingOption[];
 
-    // 如果配置了 enabledBillingTypes，只显示配置的类型
+    // If enabledBillingTypes is configured, show only those billing types.
     if (enabledBillingTypes?.length) {
       return options.filter(option => enabledBillingTypes.includes(option.key));
     }
 
-    // 否则显示所有配置的选项
+    // Otherwise show all configured options.
     return options;
   }, [data.billingSwitch.options, enabledBillingTypes]);
   const billingOptionMap = useMemo(() => {
@@ -73,12 +74,12 @@ export function MoneyPriceInteractive({
   const defaultBilling = useMemo<BillingType>(() => {
     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 billingOptions[0]?.key || 'monthly';
   }, [data.billingSwitch.defaultKey, billingOptions]);
 
@@ -95,18 +96,18 @@ export function MoneyPriceInteractive({
   const priceIdsByCycle = useMemo(() => {
     const priceIds: Record<string, string[]> = {};
 
-    // 为每个可用的计费类型创建价格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: any) => {
           priceIds[option.key].push(pack.priceId);
         });
       } else {
-        // 处理订阅产品
+        // Handle subscription products.
         const products = providerConfig.subscriptionProducts || providerConfig.products || {};
         PLAN_KEYS.forEach(planKey => {
           const product = (products as any)[planKey];
@@ -341,7 +342,7 @@ export function MoneyPriceInteractive({
     enableSubscriptionUpgrade
   ]);
 
-  // 根据当前计费类型动态选择要显示的 plans
+  // Select visible plans dynamically based on the current billing type.
   const currentPlans = useMemo(() => {
     if (billingType === 'onetime') {
       return data.creditsPlans || [];
@@ -374,12 +375,12 @@ export function MoneyPriceInteractive({
   const discountBadgeText = useMemo(() => {
     if (!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: number | null = null;
     const products = providerConfig.subscriptionProducts || providerConfig.products || {};
 
@@ -394,7 +395,7 @@ export function MoneyPriceInteractive({
     return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
   }, [selectedBillingOption, providerConfig, billingType]);
 
-  // 配置移动端BillingTypeButton悬浮样式
+  // Configure the mobile floating style for BillingTypeButton.
   return (
     <>
       <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">
@@ -442,18 +443,36 @@ export function MoneyPriceInteractive({
 
           const showBillingSubtitle = plan.showBillingSubTitle !== false;
           const hasDiscount = !!pricing.discountPercent && !!pricing.originalAmount;
+          const hasStrictDiffAnime = Object.prototype.hasOwnProperty.call(
+            plan.strictDiffAnime ?? {},
+            billingType
+          );
+          const animeTone = hasStrictDiffAnime
+            ? plan.strictDiffAnime?.[billingType]
+            : plan.animeTone;
+          const hasAnimeTone = !!animeTone;
 
-          // 移动端宽度样式
           return (
+            <AnimeBeamFrame
+              key={`${billingType}-${plan.key}-${animeTone ?? 'none'}`}
+              active={false}
+              interactive={hasAnimeTone}
+              tone={animeTone ?? 'theme'}
+              radius={16}
+              className={cn(
+                'h-full w-[85vw] max-w-[360px]',
+                'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0',
+              )}
+            >
             <div
-              key={plan.key}
               data-price-plan={planKey}
               className={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',
-                themeIconColor
+                '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',
+                  themeIconColor,
+                ]
               )}
               style={{ minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }}
             >
@@ -498,7 +517,7 @@ export function MoneyPriceInteractive({
                     data-price-subtitle={planKey}
                   >
                     {showBillingSubtitle && billingType === 'onetime' ? (
-                      // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
+                      // Special one-time mode rendering: plain text plus styled product subtitle.
                       <>
                         {selectedBillingOption?.subTitle && (
                           <span className="text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium">
@@ -512,7 +531,7 @@ export function MoneyPriceInteractive({
                         )}
                       </>
                     ) : (
-                      // 其他模式下保持原逻辑
+                      // Keep the original rendering for other modes.
                       showBillingSubtitle && (
                         <span className="text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium">
                           {selectedBillingOption?.subTitle || ''}
@@ -570,6 +589,7 @@ export function MoneyPriceInteractive({
                 enableSubscriptionUpgrade={enableSubscriptionUpgrade}
               />
             </div>
+            </AnimeBeamFrame>
           );
         })}
         </div>

package/src/main/money-price/money-price-types.ts

@@ -2,10 +2,10 @@ import type { XCredit, XSubscription, XUser } from '../../clerk/fingerprint/type
 
 /**
  * Money Price Component Types
- * 价格组件类型定义
+ * Pricing component type definitions.
  */
 
-// 用户状态枚举
+// User status enum.
 export enum UserState {
   Anonymous = 'anonymous',
   FreeUser = 'free',
@@ -13,7 +13,7 @@ export enum UserState {
   UltraUser = 'ultra'
 }
 
-// 用户上下文
+// User context.
 export interface UserContext {
   isAuthenticated: boolean;
   subscriptionStatus: UserState;
@@ -29,10 +29,10 @@ export interface InitUserContext {
   isClerkAuthenticated?: boolean;
 }
 
-// 支付供应商类型
+// Payment provider type.
 export type PaymentProvider = 'stripe' | 'apple' | 'paypal' | 'wechat' | 'alipay'  ;
 
-// 价格计划
+// Price plan.
 export interface EnhancePricePlan {
   priceId: string;
   amount: number;
@@ -42,13 +42,13 @@ export interface EnhancePricePlan {
   credits?: number;
 }
 
-// 订阅产品配置
+// Subscription product configuration.
 export interface SubscriptionProductConfig {
   key: string;
   plans: Record<string, EnhancePricePlan>;
 }
 
-// 积分包产品配置
+// Credit pack product configuration.
 export interface CreditPackProductConfig {
   key: string;
   priceId: string;
@@ -57,7 +57,7 @@ export interface CreditPackProductConfig {
   credits: number;
 }
 
-// 支付供应商配置
+// Payment provider configuration.
 export interface PaymentProviderConfig {
   provider: PaymentProvider;
   enabled: boolean;
@@ -71,7 +71,7 @@ export interface PaymentProviderConfig {
     P2: CreditPackProductConfig;
     U3: CreditPackProductConfig;
   };
-  // 兼容旧结构
+  // Backward-compatible legacy shape.
   products?: {
     F1: SubscriptionProductConfig;
     P2: SubscriptionProductConfig;
@@ -79,7 +79,7 @@ export interface PaymentProviderConfig {
   };
 }
 
-// 主配置
+// Main configuration.
 export interface MoneyPriceConfig {
   paymentProviders: {
     [provider: string]: PaymentProviderConfig;
@@ -92,7 +92,7 @@ export interface MoneyPriceConfig {
   };
 }
 
-// 组件属性
+// Component props.
 export interface MoneyPriceProps {
   locale: string;
   config: MoneyPriceConfig;
@@ -107,7 +107,7 @@ export interface MoneyPriceProps {
   initialBillingType?: string;
 }
 
-// 交互组件属性
+// Interactive component props.
 export interface MoneyPriceInteractiveProps {
   data: MoneyPriceData;
   config: MoneyPriceConfig;
@@ -122,7 +122,7 @@ export interface MoneyPriceInteractiveProps {
   isInitLoading?: boolean;
 }
 
-// 按钮组件属性
+// Button component props.
 export interface MoneyPriceButtonProps {
   planKey: 'F1' | 'P2' | 'U3';
   userContext: UserContext;
@@ -143,7 +143,10 @@ export interface MoneyPriceButtonProps {
   enableSubscriptionUpgrade?: boolean;
 }
 
-// 数据结构
+export type MoneyPriceAnimeTone = 'theme' | 'rainbow' | 'mono' | 'warm' | 'cool';
+export type MoneyPriceStrictDiffAnime = Record<string, MoneyPriceAnimeTone | null | undefined>;
+
+// Data structures.
 export interface MoneyPriceData {
   title: string;
   subtitle: string;
@@ -160,6 +163,8 @@ export interface MoneyPriceData {
   subscriptionPlans: Array<{
     key: string;
     title: string;
+    animeTone?: MoneyPriceAnimeTone;
+    strictDiffAnime?: MoneyPriceStrictDiffAnime;
     showBillingSubTitle?: boolean;
     titleTags?: string[];
     features?: Array<{
@@ -173,6 +178,8 @@ export interface MoneyPriceData {
     key: string;
     title: string;
     subtitle?: string;
+    animeTone?: MoneyPriceAnimeTone;
+    strictDiffAnime?: MoneyPriceStrictDiffAnime;
     showBillingSubTitle?: boolean;
     titleTags?: string[];
     features?: Array<{

package/src/main/money-price/server.ts

@@ -11,6 +11,8 @@ export type {
   MoneyPriceInteractiveProps,
   MoneyPriceButtonProps,
   MoneyPriceData,
+  MoneyPriceAnimeTone,
+  MoneyPriceStrictDiffAnime,
   InitUserContext,
   PaymentProvider,
   PaymentProviderConfig,

package/src/main/pill-select/x-pill-select.tsx

@@ -82,7 +82,7 @@ export function XPillSelect(props: XPillSelectProps) {
     props.mode === 'multiple' &&
     allOptionValues.length > 0 &&
     allOptionValues.every((value) => selectedValues.includes(value));
-  const aggregatedSelectedLabel = isAllSelected ? allSelectedLabel?.trim() || '全部' : null;
+  const aggregatedSelectedLabel = isAllSelected ? allSelectedLabel?.trim() || 'All' : null;
   const hasVisiblePillLimit = props.mode === 'multiple' && typeof maxVisiblePills === 'number' && maxVisiblePills >= 0;
   const visibleSelectedValues =
     aggregatedSelectedLabel || !hasVisiblePillLimit
@@ -272,7 +272,7 @@ export function XPillSelect(props: XPillSelectProps) {
                       compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs',
                       'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'
                     )}
-                    title={`还有 ${hiddenSelectedCount} 项未展开`}
+                    title={`${hiddenSelectedCount} items remain unexpanded`}
                   >
                     +{hiddenSelectedCount}
                   </span>

package/src/main/server.ts

@@ -32,6 +32,8 @@ export type {
   MoneyPriceInteractiveProps,
   MoneyPriceButtonProps,
   MoneyPriceData,
+  MoneyPriceAnimeTone,
+  MoneyPriceStrictDiffAnime,
   InitUserContext,
   PaymentProvider,
   PaymentProviderConfig,
@@ -41,4 +43,4 @@ export type {
   UserContext
 } from './money-price/money-price-types';
 
-export { UserState } from './money-price/money-price-types';
+export { UserState } from './money-price/money-price-types';

package/src/styles/third-ui.css

@@ -76,3 +76,11 @@ body {
   background: var(--gallery-swiper-bullet-active-color, #AC62FD) !important;
   transform: scale(1.5);
 }
+
+.cl-modalBackdrop {
+  background-color: rgb(0 0 0 / 0.8) !important;
+}
+
+.dark .cl-modalBackdrop {
+  background-color: rgb(0 0 0 / 0.8) !important;
+}