💳 feat(TopUp): unify payment cards, add header stats, brand icons, and mobile refinements [[memory:5659506]]

- Add RightStatsCard and place it in RechargeCard header
  - Shows current balance, historical spend, and request count
  - Mobile: stacks under title; three metrics split equally (flex-1); vertical dividers hidden on small screens
  - Remove extra margins; small card styling

- RechargeCard
  - Replace redeem code Input icon with Semi UI IconGift
  - Style “Payable amount” number in red and bold; keep same style in confirm modal
  - Always render payment methods as Cards (remove Button variant) with adaptive grid
  - Use brand color icons: SiAlipay (#1677FF), SiWechat (#07C160), SiStripe (#635BFF)
  - Replace Stripe icon with SiStripe
  - Integrate RightStatsCard props; adjust header to flex-col on mobile and flex-row on desktop
  - Hide Banner close button when online top-up is disabled (closeIcon={null})

- InvitationCard
  - Simplify to match RechargeCard’s minimalist slate style
  - Use Card title for “Rewards” and place content directly in body
  - Improve link input and copy button; use Badge dots for bullet points

- TopUp index
  - Remove separate right-column stats card; pass userState and renderQuota to RechargeCard

- Cleanup
  - Lint passes; no functional changes to APIs or business logic

web/src/components/topup/modals/PaymentConfirmModal.jsx

@@ -0,0 +1,133 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Modal,
+  Typography,
+  Card,
+  Skeleton,
+} from '@douyinfe/semi-ui';
+import { SiAlipay, SiWechat } from 'react-icons/si';
+import { CreditCard } from 'lucide-react';
+
+const { Text } = Typography;
+
+const PaymentConfirmModal = ({
+  t,
+  open,
+  onlineTopUp,
+  handleCancel,
+  confirmLoading,
+  topUpCount,
+  renderQuotaWithAmount,
+  amountLoading,
+  renderAmount,
+  payWay,
+  payMethods,
+}) => {
+  return (
+    <Modal
+      title={
+        <div className='flex items-center'>
+          <CreditCard className='mr-2' size={18} />
+          {t('充值确认')}
+        </div>
+      }
+      visible={open}
+      onOk={onlineTopUp}
+      onCancel={handleCancel}
+      maskClosable={false}
+      size='small'
+      centered
+      confirmLoading={confirmLoading}
+    >
+      <div className='space-y-4'>
+        <Card className='!rounded-xl !border-0 bg-slate-50 dark:bg-slate-800'>
+          <div className='space-y-3'>
+            <div className='flex justify-between items-center'>
+              <Text strong className='text-slate-700 dark:text-slate-200'>{t('充值数量')}：</Text>
+              <Text className='text-slate-900 dark:text-slate-100'>{renderQuotaWithAmount(topUpCount)}</Text>
+            </div>
+            <div className='flex justify-between items-center'>
+              <Text strong className='text-slate-700 dark:text-slate-200'>{t('实付金额')}：</Text>
+              {amountLoading ? (
+                <Skeleton.Title style={{ width: '60px', height: '16px' }} />
+              ) : (
+                <Text strong className='font-bold' style={{ color: 'red' }}>
+                  {renderAmount()}
+                </Text>
+              )}
+            </div>
+            <div className='flex justify-between items-center'>
+              <Text strong className='text-slate-700 dark:text-slate-200'>{t('支付方式')}：</Text>
+              <div className='flex items-center'>
+                {(() => {
+                  const payMethod = payMethods.find(
+                    (method) => method.type === payWay,
+                  );
+                  if (payMethod) {
+                    return (
+                      <>
+                        {payMethod.type === 'zfb' ? (
+                          <SiAlipay className='mr-2' size={16} />
+                        ) : payMethod.type === 'wx' ? (
+                          <SiWechat className='mr-2' size={16} />
+                        ) : (
+                          <CreditCard className='mr-2' size={16} />
+                        )}
+                        <Text className='text-slate-900 dark:text-slate-100'>{payMethod.name}</Text>
+                      </>
+                    );
+                  } else {
+                    // 默认充值方式
+                    if (payWay === 'zfb') {
+                      return (
+                        <>
+                          <SiAlipay className='mr-2' size={16} />
+                          <Text className='text-slate-900 dark:text-slate-100'>{t('支付宝')}</Text>
+                        </>
+                      );
+                    } else if (payWay === 'stripe') {
+                      return (
+                        <>
+                          <CreditCard className='mr-2' size={16} />
+                          <Text className='text-slate-900 dark:text-slate-100'>Stripe</Text>
+                        </>
+                      );
+                    } else {
+                      return (
+                        <>
+                          <SiWechat className='mr-2' size={16} />
+                          <Text className='text-slate-900 dark:text-slate-100'>{t('微信')}</Text>
+                        </>
+                      );
+                    }
+                  }
+                })()}
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </Modal>
+  );
+};
+
+export default PaymentConfirmModal;