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

- Defaulting to subscriptions when available and avoiding initial flash when no plans exist.
- Adjust the wide-screen layout to place wallet and invite sections side by side, simplify the subscription header and controls, and add padding to prevent card borders from clipping.
- Update related i18n strings by adding the new tab label and removing the obsolete subscription blurb.

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 (
+  const cardContent = (
-    <Card className='!rounded-2xl shadow-sm border-0'>
+    <>
       {/* 卡片头部 */}
-      <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 justify-between mb-2 gap-3'>
-              <div className='flex items-center gap-2'>
+              <div className='flex items-center gap-2 flex-1 min-w-0'>
                 <Text strong>{t('我的订阅')}</Text>
                 {hasActiveSubscription ? (
                   <Tag
@@ -341,19 +317,32 @@ const SubscriptionPlansCard = ({
                   </Tag>
                 )}
               </div>
-              <Button
+              <div className='flex items-center gap-2'>
-                size='small'
+                <Select
-                theme='light'
+                  value={billingPreference}
-                type='tertiary'
+                  onChange={onChangeBillingPreference}
-                icon={
+                  size='small'
-                  <RefreshCw
+                  optionList={[
-                    size={12}
+                    { value: 'subscription_first', label: t('优先订阅') },
-                    className={refreshing ? 'animate-spin' : ''}
+                    { value: 'wallet_first', label: t('优先钱包') },
-                  />
+                    { value: 'subscription_only', label: t('仅用订阅') },
-                }
+                    { value: 'wallet_only', label: t('仅用钱包') },
-                onClick={handleRefresh}
+                  ]}
-                loading={refreshing}
+                />
-              />
+                <Button
+                  size='small'
+                  theme='light'
+                  type='tertiary'
+                  icon={
+                    <RefreshCw
+                      size={12}
+                      className={refreshing ? 'animate-spin' : ''}
+                    />
+                  }
+                  onClick={handleRefresh}
+                  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);
@@ -482,9 +471,9 @@ const SubscriptionPlansCard = ({
                   resetLabel ? { label: resetLabel } : null,
                   totalAmount > 0
                     ? {
-                        label: totalLabel,
+                      label: totalLabel,
-                        tooltip: `${t('原生额度')}：${totalAmount}`,
+                      tooltip: `${t('原生额度')}：${totalAmount}`,
-                      }
+                    }
                     : { label: totalLabel },
                   limitLabel ? { label: limitLabel } : null,
                   upgradeLabel ? { label: upgradeLabel } : null,
@@ -493,9 +482,8 @@ const SubscriptionPlansCard = ({
                 return (
                   <Card
                     key={plan?.id}
-                    className={`!rounded-xl transition-all hover:shadow-lg w-full h-full ${
+                    className={`!rounded-xl transition-all hover:shadow-lg w-full h-full ${isPopular ? 'ring-2 ring-purple-500' : ''
-                      isPopular ? 'ring-2 ring-purple-500' : ''
+                      }`}
-                    }`}
                     bodyStyle={{ padding: 0 }}
                   >
                     <div className='p-4 h-full flex flex-col'>
@@ -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
@@ -631,16 +629,16 @@ const SubscriptionPlansCard = ({
         purchaseLimitInfo={
           selectedPlan?.plan?.id
             ? {
-                limit: Number(selectedPlan?.plan?.max_purchase_per_user || 0),
+              limit: Number(selectedPlan?.plan?.max_purchase_per_user || 0),
-                count: getPlanPurchaseCount(selectedPlan?.plan?.id),
+              count: getPlanPurchaseCount(selectedPlan?.plan?.id),
-              }
+            }
             : null
         }
         onPayStripe={payStripe}
         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,80 +732,58 @@ const TopUp = () => {
       </Modal>
 
       {/* 主布局区域 */}
-      <div className='grid grid-cols-1 lg:grid-cols-12 gap-6'>
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
-        {/* 左侧 - 订阅套餐（无套餐时隐藏整块卡片） */}
+        <RechargeCard
-        {(subscriptionLoading || subscriptionPlans.length > 0) && (
+          t={t}
-          <div className='lg:col-span-7'>
+          enableOnlineTopUp={enableOnlineTopUp}
-            <SubscriptionPlansCard
+          enableStripeTopUp={enableStripeTopUp}
-              t={t}
+          enableCreemTopUp={enableCreemTopUp}
-              loading={subscriptionLoading}
+          creemProducts={creemProducts}
-              plans={subscriptionPlans}
+          creemPreTopUp={creemPreTopUp}
-              payMethods={payMethods}
+          presetAmounts={presetAmounts}
-              enableOnlineTopUp={enableOnlineTopUp}
+          selectedPreset={selectedPreset}
-              enableStripeTopUp={enableStripeTopUp}
+          selectPresetAmount={selectPresetAmount}
-              enableCreemTopUp={enableCreemTopUp}
+          formatLargeNumber={formatLargeNumber}
-              billingPreference={billingPreference}
+          priceRatio={priceRatio}
-              onChangeBillingPreference={updateBillingPreference}
+          topUpCount={topUpCount}
-              activeSubscriptions={activeSubscriptions}
+          minTopUp={minTopUp}
-              allSubscriptions={allSubscriptions}
+          renderQuotaWithAmount={renderQuotaWithAmount}
-              reloadSubscriptionSelf={getSubscriptionSelf}
+          getAmount={getAmount}
-            />
+          setTopUpCount={setTopUpCount}
-          </div>
+          setSelectedPreset={setSelectedPreset}
-        )}
+          renderAmount={renderAmount}
-
+          amountLoading={amountLoading}
-        {/* 右侧 - 账户充值 + 邀请奖励 */}
+          payMethods={payMethods}
-        <div
+          preTopUp={preTopUp}
-          className={
+          paymentLoading={paymentLoading}
-            subscriptionLoading || subscriptionPlans.length > 0
+          payWay={payWay}
-              ? 'lg:col-span-5 flex flex-col gap-6'
+          redemptionCode={redemptionCode}
-              : 'lg:col-span-12 flex flex-col gap-6'
+          setRedemptionCode={setRedemptionCode}
-          }
+          topUp={topUp}
-        >
+          isSubmitting={isSubmitting}
-          <RechargeCard
+          topUpLink={topUpLink}
-            t={t}
+          openTopUpLink={openTopUpLink}
-            enableOnlineTopUp={enableOnlineTopUp}
+          userState={userState}
-            enableStripeTopUp={enableStripeTopUp}
+          renderQuota={renderQuota}
-            enableCreemTopUp={enableCreemTopUp}
+          statusLoading={statusLoading}
-            creemProducts={creemProducts}
+          topupInfo={topupInfo}
-            creemPreTopUp={creemPreTopUp}
+          onOpenHistory={handleOpenHistory}
-            presetAmounts={presetAmounts}
+          subscriptionLoading={subscriptionLoading}
-            selectedPreset={selectedPreset}
+          subscriptionPlans={subscriptionPlans}
-            selectPresetAmount={selectPresetAmount}
+          billingPreference={billingPreference}
-            formatLargeNumber={formatLargeNumber}
+          onChangeBillingPreference={updateBillingPreference}
-            priceRatio={priceRatio}
+          activeSubscriptions={activeSubscriptions}
-            topUpCount={topUpCount}
+          allSubscriptions={allSubscriptions}
-            minTopUp={minTopUp}
+          reloadSubscriptionSelf={getSubscriptionSelf}
-            renderQuotaWithAmount={renderQuotaWithAmount}
+        />
-            getAmount={getAmount}
+        <InvitationCard
-            setTopUpCount={setTopUpCount}
+          t={t}
-            setSelectedPreset={setSelectedPreset}
+          userState={userState}
-            renderAmount={renderAmount}
+          renderQuota={renderQuota}
-            amountLoading={amountLoading}
+          setOpenTransfer={setOpenTransfer}
-            payMethods={payMethods}
+          affLink={affLink}
-            preTopUp={preTopUp}
+          handleAffLinkClick={handleAffLinkClick}
-            paymentLoading={paymentLoading}
+        />
-            payWay={payWay}
-            redemptionCode={redemptionCode}
-            setRedemptionCode={setRedemptionCode}
-            topUp={topUp}
-            isSubmitting={isSubmitting}
-            topUpLink={topUpLink}
-            openTopUpLink={openTopUpLink}
-            userState={userState}
-            renderQuota={renderQuota}
-            statusLoading={statusLoading}
-            topupInfo={topupInfo}
-            onOpenHistory={handleOpenHistory}
-          />
-          <InvitationCard
-            t={t}
-            userState={userState}
-            renderQuota={renderQuota}
-            setOpenTransfer={setOpenTransfer}
-            affLink={affLink}
-            handleAffLinkClick={handleAffLinkClick}
-          />
-        </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 @@
     "绑定订阅套餐": "绑定订阅套餐",
     "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。": "绑定后会立即生成用户订阅（无需支付），有效期按套餐配置计算。",
     "订阅套餐": "订阅套餐",
-    "购买订阅获得模型额度/次数": "购买订阅获得模型额度/次数",
+    "额度充值": "额度充值",
     "优先订阅": "优先订阅",
     "优先钱包": "优先钱包",
     "仅用订阅": "仅用订阅",