✨ refactor: unify layout, adopt Semi UI Forms, dynamic presets, and fix duplicate requests
- Unify TopUp into a single-page layout and remove tabs - Replace custom inputs with Semi UI Form components (Form.Input, Form.InputNumber, Form.Slot) - Move online recharge form into the stats Card content for tighter, consistent layout - Add account stats Card with blue theme (consistent with InvitationCard style) - Remove RightStatsCard and inline the stats UI directly in RechargeCard - Change preset amount UI to horizontal quick-action Buttons; swap order with payment methods - Replace payment method Cards with Semi UI Buttons - Use Button icon prop for Alipay/WeChat/Stripe with brand colors - Use built-in Button loading; remove custom “processing...” text - Replace custom spinners with Semi UI Spin and keep Skeleton for amount loading - Wrap Redeem Code in a Card; use Typography for “Looking for a code? Buy Redeem Code” link - Show info Banner when online recharge is disabled (instead of warning) TopUp data flow and logic - Generate preset amounts from min_topup using multipliers [1,5,10,30,50,100,300,500] - Deduplicate /api/user/aff using a ref guard; fetch only once on mount - Simplify user self fetch: update context only; remove unused local states and helpers - Normalize payment method keys to alipay/wxpay/stripe and assign default colors Cleanup - Delete web/src/components/topup/RightStatsCard.jsx - Remove unused helpers and local states in index.jsx (userQuota, userDataLoading, getUsername) Dev notes - No API changes; UI/UX refactor only - Lint clean (no new linter errors) Files - web/src/components/topup/RechargeCard.jsx - web/src/components/topup/index.jsx - web/src/components/topup/InvitationCard.jsx (visual parity reference) - web/src/components/topup/RightStatsCard.jsx (removed)
This commit is contained in:
t0ng7u
@@ -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 from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
Typography,
|
||||
@@ -28,13 +28,17 @@ import {
|
||||
Banner,
|
||||
Skeleton,
|
||||
Divider,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Form,
|
||||
Space,
|
||||
Row,
|
||||
Col,
|
||||
Spin,
|
||||
} from '@douyinfe/semi-ui';
|
||||
import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
|
||||
import { CreditCard, Gift, Link as LinkIcon, Coins } from 'lucide-react';
|
||||
import { CreditCard, Gift, Link as LinkIcon, Coins, Wallet, BarChart2, TrendingUp } from 'lucide-react';
|
||||
import { IconGift } from '@douyinfe/semi-icons';
|
||||
import RightStatsCard from './RightStatsCard';
|
||||
import { useMinimumLoadingTime } from '../../hooks/common/useMinimumLoadingTime';
|
||||
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -70,91 +74,98 @@ const RechargeCard = ({
|
||||
renderQuota,
|
||||
statusLoading,
|
||||
}) => {
|
||||
const onlineFormApiRef = useRef(null);
|
||||
const redeemFormApiRef = useRef(null);
|
||||
const showAmountSkeleton = useMinimumLoadingTime(amountLoading);
|
||||
return (
|
||||
<Card className="!rounded-2xl shadow-sm border-0">
|
||||
{/* 卡片头部 */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4 gap-3">
|
||||
<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 text-gray-600 dark:text-gray-400">{t('多种充值方式，安全便捷')}</div>
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<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>
|
||||
<RightStatsCard t={t} userState={userState} renderQuota={renderQuota} />
|
||||
</div>
|
||||
|
||||
<Tabs type="card" defaultActiveKey="online">
|
||||
{/* 在线充值 Tab */}
|
||||
<TabPane
|
||||
tab={
|
||||
<div className="flex items-center">
|
||||
<CreditCard size={16} className="mr-2" />
|
||||
{t('在线充值')}
|
||||
</div>
|
||||
}
|
||||
itemKey="online"
|
||||
>
|
||||
<div className="py-4">
|
||||
{statusLoading ? (
|
||||
<div className='py-8 flex justify-center'>
|
||||
<div className='animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500'></div>
|
||||
</div>
|
||||
) : (enableOnlineTopUp || enableStripeTopUp) ? (
|
||||
<div className='space-y-6'>
|
||||
{/* 预设充值额度选择 */}
|
||||
{(enableOnlineTopUp || enableStripeTopUp) && (
|
||||
<div>
|
||||
<Text strong className='block mb-3'>
|
||||
{t('选择充值额度')}
|
||||
</Text>
|
||||
<div className='grid grid-cols-2 sm:grid-cols-4 gap-3'>
|
||||
{presetAmounts.map((preset, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
onClick={() => selectPresetAmount(preset)}
|
||||
className={`cursor-pointer !rounded-xl transition-all hover:shadow-md ${selectedPreset === preset.value
|
||||
? 'border-blue-500 shadow-md'
|
||||
: 'border-slate-200 hover:border-slate-300 dark:border-slate-600 dark:hover:border-slate-500'
|
||||
}`}
|
||||
bodyStyle={{ textAlign: 'center', padding: '12px' }}
|
||||
>
|
||||
<div className='font-medium text-lg flex items-center justify-center mb-1'>
|
||||
<Coins size={16} className='mr-1' />
|
||||
{formatLargeNumber(preset.value)}
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
{t('实付')} ￥{(preset.value * priceRatio).toFixed(2)}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
<Space vertical style={{ width: '100%' }}>
|
||||
{/* 统计数据 */}
|
||||
<Card
|
||||
className='!rounded-xl w-full'
|
||||
cover={
|
||||
<div
|
||||
className="relative h-30"
|
||||
style={{
|
||||
'--palette-primary-darkerChannel': '37 99 235',
|
||||
backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between p-4">
|
||||
<div className='flex justify-between items-center'>
|
||||
<Text strong style={{ color: 'white', fontSize: '16px' }}>{t('账户统计')}</Text>
|
||||
</div>
|
||||
|
||||
{/* 统计数据 */}
|
||||
<div className='grid grid-cols-3 gap-6 mt-4'>
|
||||
{/* 当前余额 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{renderQuota(userState?.user?.quota)}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
<Wallet size={14} className="mr-1" style={{ color: 'rgba(255,255,255,0.8)' }} />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>{t('当前余额')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 自定义充值金额 */}
|
||||
{/* 历史消耗 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{renderQuota(userState?.user?.used_quota)}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
<TrendingUp size={14} className="mr-1" style={{ color: 'rgba(255,255,255,0.8)' }} />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>{t('历史消耗')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 请求次数 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{userState?.user?.request_count || 0}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
<BarChart2 size={14} className="mr-1" style={{ color: 'rgba(255,255,255,0.8)' }} />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>{t('请求次数')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* 在线充值表单 */}
|
||||
{statusLoading ? (
|
||||
<div className='py-8 flex justify-center'>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : (enableOnlineTopUp || enableStripeTopUp) ? (
|
||||
<Form
|
||||
getFormApi={(api) => (onlineFormApiRef.current = api)}
|
||||
initValues={{ topUpCount: topUpCount }}
|
||||
>
|
||||
<div className='space-y-6'>
|
||||
{(enableOnlineTopUp || enableStripeTopUp) && (
|
||||
<div className='space-y-4'>
|
||||
<Divider style={{ margin: '24px 0' }}>
|
||||
<Text className='text-sm font-medium text-slate-600 dark:text-slate-400'>
|
||||
{t('或输入自定义金额')}
|
||||
</Text>
|
||||
</Divider>
|
||||
|
||||
<div>
|
||||
<div className='flex justify-between mb-2'>
|
||||
<Text strong className='text-slate-700 dark:text-slate-200'>{t('充值数量')}</Text>
|
||||
{amountLoading ? (
|
||||
<Skeleton.Title style={{ width: '80px', height: '16px' }} />
|
||||
) : (
|
||||
<Text className='text-red-600 font-semibold'>
|
||||
{t('实付金额：')}<span className='font-bold' style={{ color: 'red' }}>{renderAmount()}</span>
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<InputNumber
|
||||
<Row gutter={12}>
|
||||
<Col xs={24} sm={24} md={24} lg={10} xl={10}>
|
||||
<Form.InputNumber
|
||||
field='topUpCount'
|
||||
label={t('充值数量')}
|
||||
disabled={!enableOnlineTopUp && !enableStripeTopUp}
|
||||
placeholder={t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)}
|
||||
value={topUpCount}
|
||||
@@ -176,126 +187,142 @@ const RechargeCard = ({
|
||||
getAmount(1);
|
||||
}
|
||||
}}
|
||||
className='w-full !rounded-lg'
|
||||
formatter={(value) => (value ? `${value}` : '')}
|
||||
parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 支付方式选择 */}
|
||||
<div>
|
||||
<Text strong className='block mb-3 text-slate-700 dark:text-slate-200'>
|
||||
{t('选择支付方式')}
|
||||
</Text>
|
||||
<div className={`grid gap-3 ${payMethods.length <= 2
|
||||
? 'grid-cols-1 sm:grid-cols-2'
|
||||
: payMethods.length === 3
|
||||
? 'grid-cols-1 sm:grid-cols-3'
|
||||
: 'grid-cols-2 sm:grid-cols-4'
|
||||
}`}>
|
||||
{payMethods.map((payMethod) => (
|
||||
<Card
|
||||
key={payMethod.type}
|
||||
onClick={() => preTopUp(payMethod.type)}
|
||||
className={`cursor-pointer !rounded-xl transition-all hover:shadow-md ${paymentLoading && payWay === payMethod.type
|
||||
? 'border-blue-500 shadow-md'
|
||||
: 'border-slate-200 hover:border-slate-300 dark:border-slate-600 dark:hover:border-slate-500'
|
||||
} ${(!enableOnlineTopUp && payMethod.type !== 'stripe') ||
|
||||
(!enableStripeTopUp && payMethod.type === 'stripe')
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: ''
|
||||
}`}
|
||||
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
||||
extraText={
|
||||
<Skeleton
|
||||
loading={showAmountSkeleton}
|
||||
active
|
||||
placeholder={<Skeleton.Title style={{ width: 120, height: 20, borderRadius: 6 }} />}
|
||||
>
|
||||
{paymentLoading && payWay === payMethod.type ? (
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<div className='mb-2'>
|
||||
<div className='animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500'></div>
|
||||
</div>
|
||||
<div className='text-xs text-slate-500 dark:text-slate-400'>{t('处理中')}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className='flex items-center justify-center mb-2'>
|
||||
{payMethod.type === 'zfb' ? (
|
||||
<SiAlipay size={24} color="#1677FF" />
|
||||
) : payMethod.type === 'wx' ? (
|
||||
<SiWechat size={24} color="#07C160" />
|
||||
) : payMethod.type === 'stripe' ? (
|
||||
<SiStripe size={24} color="#635BFF" />
|
||||
) : (
|
||||
<CreditCard size={24} color={payMethod.color || 'var(--semi-color-text-2)'} />
|
||||
)}
|
||||
</div>
|
||||
<div className='text-sm font-medium text-slate-700 dark:text-slate-200'>{payMethod.name}</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Text type="secondary" className='text-red-600'>
|
||||
{t('实付金额：')}<span style={{ color: 'red' }}>{renderAmount()}</span>
|
||||
</Text>
|
||||
</Skeleton>
|
||||
}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={14} xl={14}>
|
||||
<Form.Slot label={t('选择支付方式')}>
|
||||
<Space wrap>
|
||||
{payMethods.map((payMethod) => (
|
||||
<Button
|
||||
key={payMethod.type}
|
||||
theme='outline'
|
||||
type='tertiary'
|
||||
onClick={() => preTopUp(payMethod.type)}
|
||||
disabled={(!enableOnlineTopUp && payMethod.type !== 'stripe') ||
|
||||
(!enableStripeTopUp && payMethod.type === 'stripe')}
|
||||
loading={paymentLoading && payWay === payMethod.type}
|
||||
icon={
|
||||
payMethod.type === 'alipay' ? (
|
||||
<SiAlipay size={18} color="#1677FF" />
|
||||
) : payMethod.type === 'wxpay' ? (
|
||||
<SiWechat size={18} color="#07C160" />
|
||||
) : payMethod.type === 'stripe' ? (
|
||||
<SiStripe size={18} color="#635BFF" />
|
||||
) : (
|
||||
<CreditCard size={18} color={payMethod.color || 'var(--semi-color-text-2)'} />
|
||||
)
|
||||
}
|
||||
>
|
||||
{payMethod.name}
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
</Form.Slot>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
{(enableOnlineTopUp || enableStripeTopUp) && (
|
||||
<Form.Slot label={t('选择充值额度')}>
|
||||
<Space wrap>
|
||||
{presetAmounts.map((preset, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
theme={selectedPreset === preset.value ? 'solid' : 'outline'}
|
||||
type={selectedPreset === preset.value ? 'primary' : 'tertiary'}
|
||||
onClick={() => {
|
||||
selectPresetAmount(preset);
|
||||
onlineFormApiRef.current?.setValue('topUpCount', preset.value);
|
||||
}}
|
||||
className='!rounded-lg !py-2 !px-3'
|
||||
>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Coins size={14} className='opacity-80' />
|
||||
<span className='font-medium'>{formatLargeNumber(preset.value)}</span>
|
||||
<span className='text-xs text-gray-500'>￥{(preset.value * priceRatio).toFixed(2)}</span>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
</Form.Slot>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Banner
|
||||
type='warning'
|
||||
description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
|
||||
className='!rounded-xl'
|
||||
closeIcon={null}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</TabPane>
|
||||
</Form>
|
||||
) : (
|
||||
<Banner
|
||||
type='info'
|
||||
description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
|
||||
className='!rounded-xl'
|
||||
closeIcon={null}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 兑换码充值 Tab */}
|
||||
<TabPane
|
||||
tab={
|
||||
<div className="flex items-center">
|
||||
<Gift size={16} className="mr-2" />
|
||||
{/* 兑换码充值 */}
|
||||
<Card
|
||||
className='!rounded-xl w-full'
|
||||
title={
|
||||
<Text type='tertiary' strong>
|
||||
{t('兑换码充值')}
|
||||
</div>
|
||||
</Text>
|
||||
}
|
||||
itemKey="redeem"
|
||||
>
|
||||
<div className="py-4">
|
||||
<div className='space-y-4'>
|
||||
<Input
|
||||
placeholder={t('请输入兑换码')}
|
||||
value={redemptionCode}
|
||||
onChange={(value) => setRedemptionCode(value)}
|
||||
className='!rounded-lg'
|
||||
prefix={<IconGift />}
|
||||
showClear
|
||||
/>
|
||||
|
||||
<div className='flex flex-col sm:flex-row gap-2'>
|
||||
{topUpLink && (
|
||||
<Form
|
||||
getFormApi={(api) => (redeemFormApiRef.current = api)}
|
||||
initValues={{ redemptionCode: redemptionCode }}
|
||||
>
|
||||
<Form.Input
|
||||
field='redemptionCode'
|
||||
noLabel={true}
|
||||
placeholder={t('请输入兑换码')}
|
||||
value={redemptionCode}
|
||||
onChange={(value) => setRedemptionCode(value)}
|
||||
prefix={<IconGift />}
|
||||
suffix={
|
||||
<div className='flex items-center gap-2'>
|
||||
<Button
|
||||
type='secondary'
|
||||
theme='outline'
|
||||
onClick={openTopUpLink}
|
||||
className='flex-1 !rounded-lg !border-slate-300 !text-slate-600 hover:!border-slate-400 hover:!text-slate-700'
|
||||
icon={<LinkIcon size={16} />}
|
||||
type='primary'
|
||||
theme='solid'
|
||||
onClick={topUp}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{t('获取兑换码')}
|
||||
{t('兑换额度')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='primary'
|
||||
theme='solid'
|
||||
onClick={topUp}
|
||||
disabled={isSubmitting || !redemptionCode}
|
||||
loading={isSubmitting}
|
||||
className='flex-1 !rounded-lg !bg-slate-600 hover:!bg-slate-700'
|
||||
>
|
||||
{isSubmitting ? t('兑换中...') : t('兑换')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
}
|
||||
showClear
|
||||
style={{ width: '100%' }}
|
||||
extraText={topUpLink && (
|
||||
<Text type="tertiary">
|
||||
{t('在找兑换码？')}
|
||||
<Text
|
||||
type="secondary"
|
||||
underline
|
||||
className="cursor-pointer"
|
||||
onClick={openTopUpLink}
|
||||
>
|
||||
{t('购买兑换码')}
|
||||
</Text>
|
||||
</Text>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Space>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user