@windrun-huaiin/third-ui 30.1.0 → 31.0.0

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