Merge pull request #2878 from QuantumNous/feat/hide-subscription-card-when-no-plans

✨ refactor(wallet): Top-up layout to embed subscription plans into the recharge card tabs

web/src/components/topup/RechargeCard.jsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Typography,
@@ -32,6 +32,8 @@ import {
   Col,
   Spin,
   Tooltip,
+  Tabs,
+  TabPane,
 } from '@douyinfe/semi-ui';
 import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
 import {
@@ -41,10 +43,12 @@ import {
   BarChart2,
   TrendingUp,
   Receipt,
+  Sparkles,
 } from 'lucide-react';
 import { IconGift } from '@douyinfe/semi-icons';
 import { useMinimumLoadingTime } from '../../hooks/common/useMinimumLoadingTime';
 import { getCurrencyConfig } from '../../helpers/render';
+import SubscriptionPlansCard from './SubscriptionPlansCard';
 
 const { Text } = Typography;
 
@@ -83,40 +87,35 @@ const RechargeCard = ({
   statusLoading,
   topupInfo,
   onOpenHistory,
+  subscriptionLoading = false,
+  subscriptionPlans = [],
+  billingPreference,
+  onChangeBillingPreference,
+  activeSubscriptions = [],
+  allSubscriptions = [],
+  reloadSubscriptionSelf,
 }) => {
   const onlineFormApiRef = useRef(null);
   const redeemFormApiRef = useRef(null);
+  const initialTabSetRef = useRef(false);
   const showAmountSkeleton = useMinimumLoadingTime(amountLoading);
-  console.log(
-    ' enabled screem ?',
-    enableCreemTopUp,
-    ' products ?',
-    creemProducts,
-  );
-  return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
-      {/* 卡片头部 */}
-      <div className='flex items-center justify-between mb-4'>
-        <div className='flex items-center'>
-          <Avatar size='small' color='blue' className='mr-3 shadow-md'>
-            <CreditCard size={16} />
-          </Avatar>
-          <div>
-            <Typography.Text className='text-lg font-medium'>
-              {t('账户充值')}
-            </Typography.Text>
-            <div className='text-xs'>{t('多种充值方式，安全便捷')}</div>
-          </div>
-        </div>
-        <Button
-          icon={<Receipt size={16} />}
-          theme='solid'
-          onClick={onOpenHistory}
-        >
-          {t('账单')}
-        </Button>
-      </div>
+  const [activeTab, setActiveTab] = useState('topup');
+  const shouldShowSubscription =
+    !subscriptionLoading && subscriptionPlans.length > 0;
 
+  useEffect(() => {
+    if (initialTabSetRef.current) return;
+    if (subscriptionLoading) return;
+    setActiveTab(shouldShowSubscription ? 'subscription' : 'topup');
+    initialTabSetRef.current = true;
+  }, [shouldShowSubscription, subscriptionLoading]);
+
+  useEffect(() => {
+    if (!shouldShowSubscription && activeTab !== 'topup') {
+      setActiveTab('topup');
+    }
+  }, [shouldShowSubscription, activeTab]);
+  const topupContent = (
     <Space vertical style={{ width: '100%' }}>
       {/* 统计数据 */}
       <Card
@@ -294,8 +293,7 @@ const RechargeCard = ({
                       {payMethods && payMethods.length > 0 ? (
                         <Space wrap>
                           {payMethods.map((payMethod) => {
-                              const minTopupVal =
-                                Number(payMethod.min_topup) || 0;
+                            const minTopupVal = Number(payMethod.min_topup) || 0;
                             const isStripe = payMethod.type === 'stripe';
                             const disabled =
                               (!enableOnlineTopUp && !isStripe) ||
@@ -391,9 +389,7 @@ const RechargeCard = ({
                   <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2'>
                     {presetAmounts.map((preset, index) => {
                       const discount =
-                          preset.discount ||
-                          topupInfo?.discount?.[preset.value] ||
-                          1.0;
+                        preset.discount || topupInfo?.discount?.[preset.value] || 1.0;
                       const originalPrice = preset.value * priceRatio;
                       const discountedPrice = originalPrice * discount;
                       const hasDiscount = discount < 1.0;
@@ -460,10 +456,7 @@ const RechargeCard = ({
                               {hasDiscount && (
                                 <Tag style={{ marginLeft: 4 }} color='green'>
                                   {t('折').includes('off')
-                                      ? (
-                                          (1 - parseFloat(discount)) *
-                                          100
-                                        ).toFixed(1)
+                                    ? ((1 - parseFloat(discount)) * 100).toFixed(1)
                                     : (discount * 10).toFixed(1)}
                                   {t('折')}
                                 </Tag>
@@ -583,6 +576,76 @@ const RechargeCard = ({
         </Form>
       </Card>
     </Space>
+  );
+
+  return (
+    <Card className='!rounded-2xl shadow-sm border-0'>
+      {/* 卡片头部 */}
+      <div className='flex items-center justify-between mb-4'>
+        <div className='flex items-center'>
+          <Avatar size='small' color='blue' className='mr-3 shadow-md'>
+            <CreditCard size={16} />
+          </Avatar>
+          <div>
+            <Typography.Text className='text-lg font-medium'>
+              {t('账户充值')}
+            </Typography.Text>
+            <div className='text-xs'>{t('多种充值方式，安全便捷')}</div>
+          </div>
+        </div>
+        <Button
+          icon={<Receipt size={16} />}
+          theme='solid'
+          onClick={onOpenHistory}
+        >
+          {t('账单')}
+        </Button>
+      </div>
+
+      {shouldShowSubscription ? (
+        <Tabs type='card' activeKey={activeTab} onChange={setActiveTab}>
+          <TabPane
+            tab={
+              <div className='flex items-center gap-2'>
+                <Sparkles size={16} />
+                {t('订阅套餐')}
+              </div>
+            }
+            itemKey='subscription'
+          >
+            <div className='py-2'>
+              <SubscriptionPlansCard
+                t={t}
+                loading={subscriptionLoading}
+                plans={subscriptionPlans}
+                payMethods={payMethods}
+                enableOnlineTopUp={enableOnlineTopUp}
+                enableStripeTopUp={enableStripeTopUp}
+                enableCreemTopUp={enableCreemTopUp}
+                billingPreference={billingPreference}
+                onChangeBillingPreference={onChangeBillingPreference}
+                activeSubscriptions={activeSubscriptions}
+                allSubscriptions={allSubscriptions}
+                reloadSubscriptionSelf={reloadSubscriptionSelf}
+                withCard={false}
+              />
+            </div>
+          </TabPane>
+          <TabPane
+            tab={
+              <div className='flex items-center gap-2'>
+                <Wallet size={16} />
+                {t('额度充值')}
+              </div>
+            }
+            itemKey='topup'
+          >
+            <div className='py-2'>{topupContent}</div>
+          </TabPane>
+        </Tabs>
+      ) : (
+        topupContent
+      )}
     </Card>
   );
 };

web/src/components/topup/SubscriptionPlansCard.jsx

@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useMemo, useState } from 'react';
 import {
-  Avatar,
   Badge,
   Button,
   Card,
@@ -33,7 +32,7 @@ import {
 } from '@douyinfe/semi-ui';
 import { API, showError, showSuccess, renderQuota } from '../../helpers';
 import { getCurrencyConfig } from '../../helpers/render';
-import { Crown, RefreshCw, Sparkles } from 'lucide-react';
+import { RefreshCw, Sparkles } from 'lucide-react';
 import SubscriptionPurchaseModal from './modals/SubscriptionPurchaseModal';
 import {
   formatSubscriptionDuration,
@@ -83,6 +82,7 @@ const SubscriptionPlansCard = ({
   activeSubscriptions = [],
   allSubscriptions = [],
   reloadSubscriptionSelf,
+  withCard = true,
 }) => {
   const [open, setOpen] = useState(false);
   const [selectedPlan, setSelectedPlan] = useState(null);
@@ -241,33 +241,9 @@ const SubscriptionPlansCard = ({
     return Math.round((used / total) * 100);
   };
 
-  return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
+  const cardContent = (
+    <>
       {/* 卡片头部 */}
-      <div className='flex items-center justify-between mb-3'>
-        <div className='flex items-center'>
-          <Avatar size='small' color='violet' className='mr-3 shadow-md'>
-            <Crown size={16} />
-          </Avatar>
-          <div>
-            <Text className='text-lg font-medium'>{t('订阅套餐')}</Text>
-            <div className='text-xs'>{t('购买订阅获得模型额度/次数')}</div>
-          </div>
-        </div>
-        {/* 扣费策略 - 右上角 */}
-        <Select
-          value={billingPreference}
-          onChange={onChangeBillingPreference}
-          size='small'
-          optionList={[
-            { value: 'subscription_first', label: t('优先订阅') },
-            { value: 'wallet_first', label: t('优先钱包') },
-            { value: 'subscription_only', label: t('仅用订阅') },
-            { value: 'wallet_only', label: t('仅用钱包') },
-          ]}
-        />
-      </div>
-
       {loading ? (
         <div className='space-y-4'>
           {/* 我的订阅骨架屏 */}
@@ -281,7 +257,7 @@ const SubscriptionPlansCard = ({
             </div>
           </Card>
           {/* 套餐列表骨架屏 */}
-          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 w-full'>
+          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 w-full px-1'>
             {[1, 2, 3].map((i) => (
               <Card
                 key={i}
@@ -317,8 +293,8 @@ const SubscriptionPlansCard = ({
         <Space vertical style={{ width: '100%' }} spacing={8}>
           {/* 当前订阅状态 */}
           <Card className='!rounded-xl w-full' bodyStyle={{ padding: '12px' }}>
-            <div className='flex items-center justify-between mb-2'>
-              <div className='flex items-center gap-2'>
+            <div className='flex items-center justify-between mb-2 gap-3'>
+              <div className='flex items-center gap-2 flex-1 min-w-0'>
                 <Text strong>{t('我的订阅')}</Text>
                 {hasActiveSubscription ? (
                   <Tag
@@ -341,6 +317,18 @@ const SubscriptionPlansCard = ({
                   </Tag>
                 )}
               </div>
+              <div className='flex items-center gap-2'>
+                <Select
+                  value={billingPreference}
+                  onChange={onChangeBillingPreference}
+                  size='small'
+                  optionList={[
+                    { value: 'subscription_first', label: t('优先订阅') },
+                    { value: 'wallet_first', label: t('优先钱包') },
+                    { value: 'subscription_only', label: t('仅用订阅') },
+                    { value: 'wallet_only', label: t('仅用钱包') },
+                  ]}
+                />
                 <Button
                   size='small'
                   theme='light'
@@ -355,6 +343,7 @@ const SubscriptionPlansCard = ({
                   loading={refreshing}
                 />
               </div>
+            </div>
 
             {hasAnySubscription ? (
               <>
@@ -451,7 +440,7 @@ const SubscriptionPlansCard = ({
 
           {/* 可购买套餐 - 标准定价卡片 */}
           {plans.length > 0 ? (
-            <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 w-full'>
+            <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 w-full px-1'>
               {plans.map((p, index) => {
                 const plan = p?.plan;
                 const totalAmount = Number(plan?.total_amount || 0);
@@ -493,8 +482,7 @@ const SubscriptionPlansCard = ({
                 return (
                   <Card
                     key={plan?.id}
-                    className={`!rounded-xl transition-all hover:shadow-lg w-full h-full ${
-                      isPopular ? 'ring-2 ring-purple-500' : ''
+                    className={`!rounded-xl transition-all hover:shadow-lg w-full h-full ${isPopular ? 'ring-2 ring-purple-500' : ''
                       }`}
                     bodyStyle={{ padding: 0 }}
                   >
@@ -583,7 +571,7 @@ const SubscriptionPlansCard = ({
                           const buttonEl = (
                             <Button
                               theme='outline'
-                              type='tertiary'
+                              type='primary'
                               block
                               disabled={reached}
                               onClick={() => {
@@ -614,6 +602,16 @@ const SubscriptionPlansCard = ({
           )}
         </Space>
       )}
+    </>
+  );
+
+  return (
+    <>
+      {withCard ? (
+        <Card className='!rounded-2xl shadow-sm border-0'>{cardContent}</Card>
+      ) : (
+        <div className='space-y-3'>{cardContent}</div>
+      )}
 
       {/* 购买确认弹窗 */}
       <SubscriptionPurchaseModal
@@ -640,7 +638,7 @@ const SubscriptionPlansCard = ({
         onPayCreem={payCreem}
         onPayEpay={payEpay}
       />
-    </Card>
+    </>
   );
 };
 

web/src/components/topup/index.jsx

@@ -35,7 +35,6 @@ import { StatusContext } from '../../context/Status';
 
 import RechargeCard from './RechargeCard';
 import InvitationCard from './InvitationCard';
-import SubscriptionPlansCard from './SubscriptionPlansCard';
 import TransferModal from './modals/TransferModal';
 import PaymentConfirmModal from './modals/PaymentConfirmModal';
 import TopupHistoryModal from './modals/TopupHistoryModal';
@@ -733,27 +732,7 @@ const TopUp = () => {
       </Modal>
 
       {/* 主布局区域 */}
-      <div className='grid grid-cols-1 lg:grid-cols-12 gap-6'>
-        {/* 左侧 - 订阅套餐 */}
-        <div className='lg:col-span-7'>
-          <SubscriptionPlansCard
-            t={t}
-            loading={subscriptionLoading}
-            plans={subscriptionPlans}
-            payMethods={payMethods}
-            enableOnlineTopUp={enableOnlineTopUp}
-            enableStripeTopUp={enableStripeTopUp}
-            enableCreemTopUp={enableCreemTopUp}
-            billingPreference={billingPreference}
-            onChangeBillingPreference={updateBillingPreference}
-            activeSubscriptions={activeSubscriptions}
-            allSubscriptions={allSubscriptions}
-            reloadSubscriptionSelf={getSubscriptionSelf}
-          />
-        </div>
-
-        {/* 右侧 - 账户充值 + 邀请奖励 */}
-        <div className='lg:col-span-5 flex flex-col gap-6'>
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
         <RechargeCard
           t={t}
           enableOnlineTopUp={enableOnlineTopUp}
@@ -789,6 +768,13 @@ const TopUp = () => {
           statusLoading={statusLoading}
           topupInfo={topupInfo}
           onOpenHistory={handleOpenHistory}
+          subscriptionLoading={subscriptionLoading}
+          subscriptionPlans={subscriptionPlans}
+          billingPreference={billingPreference}
+          onChangeBillingPreference={updateBillingPreference}
+          activeSubscriptions={activeSubscriptions}
+          allSubscriptions={allSubscriptions}
+          reloadSubscriptionSelf={getSubscriptionSelf}
         />
         <InvitationCard
           t={t}
@@ -800,7 +786,6 @@ const TopUp = () => {
         />
       </div>
     </div>
-    </div>
   );
 };
 

web/src/i18n/locales/en.json

@@ -2721,7 +2721,7 @@
     "绑定订阅套餐": "Bind Subscription Plan",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "After binding, a user subscription is created immediately (no payment required); validity follows the plan configuration.",
     "订阅套餐": "Subscription Plans",
-    "购买订阅获得模型额度/次数": "Purchase a subscription to get model quota/usage",
+    "额度充值": "Quota Top-up",
     "优先订阅": "Subscription first",
     "优先钱包": "Wallet first",
     "仅用订阅": "Subscription only",

web/src/i18n/locales/fr.json

@@ -2684,7 +2684,7 @@
     "绑定订阅套餐": "Lier un plan d'abonnement",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "Après liaison, un abonnement utilisateur est créé immédiatement (sans paiement) ; la validité suit la configuration du plan.",
     "订阅套餐": "Plans d'abonnement",
-    "购买订阅获得模型额度/次数": "Acheter un abonnement pour obtenir des quotas/usages de modèles",
+    "额度充值": "Recharge de quota",
     "优先订阅": "Abonnement en priorité",
     "优先钱包": "Portefeuille en priorité",
     "仅用订阅": "Abonnement uniquement",

web/src/i18n/locales/ja.json

@@ -2667,7 +2667,7 @@
     "绑定订阅套餐": "サブスクリプションプランを紐付け",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "紐付け後、ユーザーサブスクリプションが即時に作成されます（支払い不要）。有効期限はプラン設定に従います。",
     "订阅套餐": "サブスクリプションプラン",
-    "购买订阅获得模型额度/次数": "サブスクリプション購入でモデルのクォータ/回数を取得",
+    "额度充值": "クォータ補充",
     "优先订阅": "サブスクリプション優先",
     "优先钱包": "ウォレット優先",
     "仅用订阅": "サブスクリプションのみ",

web/src/i18n/locales/ru.json

@@ -2697,7 +2697,7 @@
     "绑定订阅套餐": "Привязать план подписки",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "После привязки подписка будет создана сразу (без оплаты); срок действия рассчитывается по настройкам плана.",
     "订阅套餐": "Планы подписки",
-    "购买订阅获得模型额度/次数": "Купите подписку, чтобы получить лимит/количество использования моделей",
+    "额度充值": "Пополнение квоты",
     "优先订阅": "Сначала подписка",
     "优先钱包": "Сначала кошелек",
     "仅用订阅": "Только подписка",

web/src/i18n/locales/vi.json

@@ -3246,7 +3246,7 @@
     "绑定订阅套餐": "Liên kết gói đăng ký",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "Sau khi liên kết, sẽ tạo đăng ký cho người dùng ngay (không cần thanh toán); thời hạn theo cấu hình gói.",
     "订阅套餐": "Gói đăng ký",
-    "购买订阅获得模型额度/次数": "Mua đăng ký để nhận hạn mức/lượt dùng mô hình",
+    "额度充值": "Nạp hạn mức",
     "优先订阅": "Ưu tiên đăng ký",
     "优先钱包": "Ưu tiên ví",
     "仅用订阅": "Chỉ dùng đăng ký",

web/src/i18n/locales/zh.json

@@ -2706,7 +2706,7 @@
     "绑定订阅套餐": "绑定订阅套餐",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。",
     "订阅套餐": "订阅套餐",
-    "购买订阅获得模型额度/次数": "购买订阅获得模型额度/次数",
+    "额度充值": "额度充值",
     "优先订阅": "优先订阅",
     "优先钱包": "优先钱包",
     "仅用订阅": "仅用订阅",