oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ refactor: unify layout, adopt Semi UI Forms, dynamic presets, and fix duplicate requests

Browse Source 
- 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
2025-08-23 01:32:54 +08:00
parent d47190f1fd
commit 60dc032cb8
7 changed files with 255 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/table/mj-logs/MjLogsActions.jsx
View File

@@ -36,7 +36,7 @@ const MjLogsActions = ({
const showSkeleton = useMinimumLoadingTime(loading); const showSkeleton = useMinimumLoadingTime(loading);
const placeholder = ( const placeholder = (
<div className="flex items-center text-orange-500 mb-2 md:mb-0"> <div className="flex items-center mb-2 md:mb-0">
<IconEyeOpened className="mr-2" /> <IconEyeOpened className="mr-2" />
<Skeleton.Title style={{ width: 300, height: 21, borderRadius: 6 }} /> <Skeleton.Title style={{ width: 300, height: 21, borderRadius: 6 }} />
</div> </div>
@@ -45,7 +45,7 @@ const MjLogsActions = ({
return ( return (
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full"> <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
<Skeleton loading={showSkeleton} active placeholder={placeholder}> <Skeleton loading={showSkeleton} active placeholder={placeholder}>
<div className="flex items-center text-orange-500 mb-2 md:mb-0"> <div className="flex items-center mb-2 md:mb-0">
<IconEyeOpened className="mr-2" /> <IconEyeOpened className="mr-2" />
<Text> <Text>
{isAdminUser && showBanner {isAdminUser && showBanner

2
web/src/components/topup/InvitationCard.jsx
View File

@@ -48,7 +48,7 @@ const InvitationCard = ({
</Avatar> </Avatar>
<div> <div>
<Typography.Text className="text-lg font-medium">{t('邀请奖励')}</Typography.Text> <Typography.Text className="text-lg font-medium">{t('邀请奖励')}</Typography.Text>
<div className="text-xs text-gray-600 dark:text-gray-400">{t('邀请好友获得额外奖励')}</div> <div className="text-xs">{t('邀请好友获得额外奖励')}</div>
</div> </div>
</div> </div>

403
web/src/components/topup/RechargeCard.jsx
View File

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com For commercial licensing, please contact support@quantumnous.com
*/ */
import React from 'react'; import React, { useRef } from 'react';
import { import {
Avatar, Avatar,
Typography, Typography,
@@ -28,13 +28,17 @@ import {
Banner, Banner,
Skeleton, Skeleton,
Divider, Divider,
Tabs, Form,
TabPane, Space,
Row,
Col,
Spin,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si'; 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 { IconGift } from '@douyinfe/semi-icons';
import RightStatsCard from './RightStatsCard'; import { useMinimumLoadingTime } from '../../hooks/common/useMinimumLoadingTime';
const { Text } = Typography; const { Text } = Typography;
@@ -70,91 +74,98 @@ const RechargeCard = ({
renderQuota, renderQuota,
statusLoading, statusLoading,
}) => { }) => {
const onlineFormApiRef = useRef(null);
const redeemFormApiRef = useRef(null);
const showAmountSkeleton = useMinimumLoadingTime(amountLoading);
return ( return (
<Card className="!rounded-2xl shadow-sm border-0"> <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 mb-4">
<div className="flex items-center"> <Avatar size="small" color="blue" className="mr-3 shadow-md">
<Avatar size="small" color="blue" className="mr-3 shadow-md"> <CreditCard size={16} />
<CreditCard size={16} /> </Avatar>
</Avatar> <div>
<div> <Typography.Text className="text-lg font-medium">{t('账户充值')}</Typography.Text>
<Typography.Text className="text-lg font-medium">{t('账户充值')}</Typography.Text> <div className="text-xs">{t('多种充值方式，安全便捷')}</div>
<div className="text-xs text-gray-600 dark:text-gray-400">{t('多种充值方式，安全便捷')}</div>
</div>
</div> </div>
<RightStatsCard t={t} userState={userState} renderQuota={renderQuota} />
</div> </div>
<Tabs type="card" defaultActiveKey="online"> <Space vertical style={{ width: '100%' }}>
{/* 在线充值 Tab */} {/* 统计数据 */}
<TabPane <Card
tab={ className='!rounded-xl w-full'
<div className="flex items-center"> cover={
<CreditCard size={16} className="mr-2" /> <div
{t('在线充值')} className="relative h-30"
</div> style={{
} '--palette-primary-darkerChannel': '37 99 235',
itemKey="online" backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
> backgroundSize: 'cover',
<div className="py-4"> backgroundPosition: 'center',
{statusLoading ? ( backgroundRepeat: 'no-repeat'
<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> <div className="relative z-10 h-full flex flex-col justify-between p-4">
) : (enableOnlineTopUp || enableStripeTopUp) ? ( <div className='flex justify-between items-center'>
<div className='space-y-6'> <Text strong style={{ color: 'white', fontSize: '16px' }}>{t('账户统计')}</Text>
{/* 预设充值额度选择 */} </div>
{(enableOnlineTopUp || enableStripeTopUp) && (
<div> {/* 统计数据 */}
<Text strong className='block mb-3'> <div className='grid grid-cols-3 gap-6 mt-4'>
{t('选择充值额度')} {/* 当前余额 */}
</Text> <div className='text-center'>
<div className='grid grid-cols-2 sm:grid-cols-4 gap-3'> <div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
{presetAmounts.map((preset, index) => ( {renderQuota(userState?.user?.quota)}
<Card </div>
key={index} <div className='flex items-center justify-center text-sm'>
onClick={() => selectPresetAmount(preset)} <Wallet size={14} className="mr-1" style={{ color: 'rgba(255,255,255,0.8)' }} />
className={`cursor-pointer !rounded-xl transition-all hover:shadow-md ${selectedPreset === preset.value <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>{t('当前余额')}</Text>
? '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>
))}
</div> </div>
</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) && ( {(enableOnlineTopUp || enableStripeTopUp) && (
<div className='space-y-4'> <Row gutter={12}>
<Divider style={{ margin: '24px 0' }}> <Col xs={24} sm={24} md={24} lg={10} xl={10}>
<Text className='text-sm font-medium text-slate-600 dark:text-slate-400'> <Form.InputNumber
{t('或输入自定义金额')} field='topUpCount'
</Text> label={t('充值数量')}
</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
disabled={!enableOnlineTopUp && !enableStripeTopUp} disabled={!enableOnlineTopUp && !enableStripeTopUp}
placeholder={t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)} placeholder={t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)}
value={topUpCount} value={topUpCount}
@@ -176,126 +187,142 @@ const RechargeCard = ({
getAmount(1); getAmount(1);
} }
}} }}
className='w-full !rounded-lg'
formatter={(value) => (value ? `${value}` : '')} formatter={(value) => (value ? `${value}` : '')}
parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0} parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0}
/> extraText={
</div> <Skeleton
loading={showAmountSkeleton}
{/* 支付方式选择 */} active
<div> placeholder={<Skeleton.Title style={{ width: 120, height: 20, borderRadius: 6 }} />}
<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' }}
> >
{paymentLoading && payWay === payMethod.type ? ( <Text type="secondary" className='text-red-600'>
<div className='flex flex-col items-center justify-center'> {t('实付金额：')}<span style={{ color: 'red' }}>{renderAmount()}</span>
<div className='mb-2'> </Text>
<div className='animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500'></div> </Skeleton>
</div> }
<div className='text-xs text-slate-500 dark:text-slate-400'>{t('处理中')}</div> style={{ width: '100%' }}
</div> />
) : ( </Col>
<> <Col xs={24} sm={24} md={24} lg={14} xl={14}>
<div className='flex items-center justify-center mb-2'> <Form.Slot label={t('选择支付方式')}>
{payMethod.type === 'zfb' ? ( <Space wrap>
<SiAlipay size={24} color="#1677FF" /> {payMethods.map((payMethod) => (
) : payMethod.type === 'wx' ? ( <Button
<SiWechat size={24} color="#07C160" /> key={payMethod.type}
) : payMethod.type === 'stripe' ? ( theme='outline'
<SiStripe size={24} color="#635BFF" /> type='tertiary'
) : ( onClick={() => preTopUp(payMethod.type)}
<CreditCard size={24} color={payMethod.color || 'var(--semi-color-text-2)'} /> disabled={(!enableOnlineTopUp && payMethod.type !== 'stripe') ||
)} (!enableStripeTopUp && payMethod.type === 'stripe')}
</div> loading={paymentLoading && payWay === payMethod.type}
<div className='text-sm font-medium text-slate-700 dark:text-slate-200'>{payMethod.name}</div> icon={
</> payMethod.type === 'alipay' ? (
)} <SiAlipay size={18} color="#1677FF" />
</Card> ) : payMethod.type === 'wxpay' ? (
))} <SiWechat size={18} color="#07C160" />
</div> ) : payMethod.type === 'stripe' ? (
</div> <SiStripe size={18} color="#635BFF" />
</div> ) : (
<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> </div>
) : ( </Form>
<Banner ) : (
type='warning' <Banner
description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')} type='info'
className='!rounded-xl' description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
closeIcon={null} className='!rounded-xl'
/> closeIcon={null}
)} />
</div> )}
</TabPane> </Card>
{/* 兑换码充值 Tab */} {/* 兑换码充值 */}
<TabPane <Card
tab={ className='!rounded-xl w-full'
<div className="flex items-center"> title={
<Gift size={16} className="mr-2" /> <Text type='tertiary' strong>
{t('兑换码充值')} {t('兑换码充值')}
</div> </Text>
} }
itemKey="redeem"
> >
<div className="py-4"> <Form
<div className='space-y-4'> getFormApi={(api) => (redeemFormApiRef.current = api)}
<Input initValues={{ redemptionCode: redemptionCode }}
placeholder={t('请输入兑换码')} >
value={redemptionCode} <Form.Input
onChange={(value) => setRedemptionCode(value)} field='redemptionCode'
className='!rounded-lg' noLabel={true}
prefix={<IconGift />} placeholder={t('请输入兑换码')}
showClear value={redemptionCode}
/> onChange={(value) => setRedemptionCode(value)}
prefix={<IconGift />}
<div className='flex flex-col sm:flex-row gap-2'> suffix={
{topUpLink && ( <div className='flex items-center gap-2'>
<Button <Button
type='secondary' type='primary'
theme='outline' theme='solid'
onClick={openTopUpLink} onClick={topUp}
className='flex-1 !rounded-lg !border-slate-300 !text-slate-600 hover:!border-slate-400 hover:!text-slate-700' loading={isSubmitting}
icon={<LinkIcon size={16} />}
> >
{t('获取兑换码')} {t('兑换额度')}
</Button> </Button>
)} </div>
<Button }
type='primary' showClear
theme='solid' style={{ width: '100%' }}
onClick={topUp} extraText={topUpLink && (
disabled={isSubmitting || !redemptionCode} <Text type="tertiary">
loading={isSubmitting} {t('在找兑换码？')}
className='flex-1 !rounded-lg !bg-slate-600 hover:!bg-slate-700' <Text
> type="secondary"
{isSubmitting ? t('兑换中...') : t('兑换')} underline
</Button> className="cursor-pointer"
</div> onClick={openTopUpLink}
</div> >
</div> {t('购买兑换码')}
</TabPane> </Text>
</Tabs> </Text>
)}
/>
</Form>
</Card>
</Space>
</Card> </Card>
); );
}; };

60
web/src/components/topup/RightStatsCard.jsx
View File

@@ -1,60 +0,0 @@
/*
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 { Card, Typography, Divider } from '@douyinfe/semi-ui';
import { Wallet, Coins, BarChart2 } from 'lucide-react';
const { Text } = Typography;
const RightStatsCard = ({ t, userState, renderQuota }) => {
return (
<Card size="small" className="!rounded-xl shadow-sm" bodyStyle={{ padding: '8px 12px' }}>
<div className="flex items-center gap-3 lg:gap-4 w-full">
<div className="flex items-center justify-end gap-2 flex-1">
<Wallet size={16} className="text-slate-600 dark:text-slate-300" />
<div className="text-right">
<Text size="small" type="tertiary">{t('当前余额')}</Text>
<div className="text-xs sm:text-sm font-semibold text-gray-800 dark:text-gray-100">{renderQuota(userState?.user?.quota)}</div>
</div>
</div>
<Divider layout="vertical" className="hidden md:block" />
<div className="flex items-center justify-end gap-2 flex-1">
<Coins size={16} className="text-slate-600 dark:text-slate-300" />
<div className="text-right">
<Text size="small" type="tertiary">{t('历史消耗')}</Text>
<div className="text-xs sm:text-sm font-semibold text-gray-800 dark:text-gray-100">{renderQuota(userState?.user?.used_quota)}</div>
</div>
</div>
<Divider layout="vertical" className="hidden md:block" />
<div className="flex items-center justify-end gap-2 flex-1">
<BarChart2 size={16} className="text-slate-600 dark:text-slate-300" />
<div className="text-right">
<Text size="small" type="tertiary">{t('请求次数')}</Text>
<div className="text-xs sm:text-sm font-semibold text-gray-800 dark:text-gray-100">{userState?.user?.request_count || 0}</div>
</div>
</div>
</div>
</Card>
);
};
export default RightStatsCard;

66
web/src/components/topup/index.jsx
View File

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com For commercial licensing, please contact support@quantumnous.com
*/ */
import React, { useEffect, useState, useContext } from 'react'; import React, { useEffect, useState, useContext, useRef } from 'react';
import { import {
API, API,
showError, showError,
@@ -63,42 +63,25 @@ const TopUp = () => {
const [enableStripeTopUp, setEnableStripeTopUp] = useState(statusState?.status?.enable_stripe_topup || false); const [enableStripeTopUp, setEnableStripeTopUp] = useState(statusState?.status?.enable_stripe_topup || false);
const [statusLoading, setStatusLoading] = useState(true); const [statusLoading, setStatusLoading] = useState(true);
const [userQuota, setUserQuota] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [payWay, setPayWay] = useState(''); const [payWay, setPayWay] = useState('');
const [userDataLoading, setUserDataLoading] = useState(true);
const [amountLoading, setAmountLoading] = useState(false); const [amountLoading, setAmountLoading] = useState(false);
const [paymentLoading, setPaymentLoading] = useState(false); const [paymentLoading, setPaymentLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [payMethods, setPayMethods] = useState([]); const [payMethods, setPayMethods] = useState([]);
const affFetchedRef = useRef(false);
// 邀请相关状态 // 邀请相关状态
const [affLink, setAffLink] = useState(''); const [affLink, setAffLink] = useState('');
const [openTransfer, setOpenTransfer] = useState(false); const [openTransfer, setOpenTransfer] = useState(false);
const [transferAmount, setTransferAmount] = useState(0); const [transferAmount, setTransferAmount] = useState(0);
// 预设充值额度选项 // 预设充值额度选项
const [presetAmounts, setPresetAmounts] = useState([ const [presetAmounts, setPresetAmounts] = useState([]);
{ value: 5 },
{ value: 10 },
{ value: 30 },
{ value: 50 },
{ value: 100 },
{ value: 300 },
{ value: 500 },
{ value: 1000 },
]);
const [selectedPreset, setSelectedPreset] = useState(null); const [selectedPreset, setSelectedPreset] = useState(null);
const getUsername = () => {
if (userState.user) {
return userState.user.username;
} else {
return 'null';
}
};
const topUp = async () => { const topUp = async () => {
if (redemptionCode === '') { if (redemptionCode === '') {
showInfo(t('请输入兑换码！')); showInfo(t('请输入兑换码！'));
@@ -117,9 +100,6 @@ const TopUp = () => {
content: t('成功兑换额度：') + renderQuota(data), content: t('成功兑换额度：') + renderQuota(data),
centered: true, centered: true,
}); });
setUserQuota((quota) => {
return quota + data;
});
if (userState.user) { if (userState.user) {
const updatedUser = { const updatedUser = {
...userState.user, ...userState.user,
@@ -260,16 +240,13 @@ const TopUp = () => {
}; };
const getUserQuota = async () => { const getUserQuota = async () => {
setUserDataLoading(true);
let res = await API.get(`/api/user/self`); let res = await API.get(`/api/user/self`);
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
setUserQuota(data.quota);
userDispatch({ type: 'login', payload: data }); userDispatch({ type: 'login', payload: data });
} else { } else {
showError(message); showError(message);
} }
setUserDataLoading(false);
}; };
// 获取邀请链接 // 获取邀请链接
@@ -310,13 +287,9 @@ const TopUp = () => {
}; };
useEffect(() => { useEffect(() => {
if (userState?.user?.id) { if (!userState?.user?.id) {
setUserDataLoading(false);
setUserQuota(userState.user.quota);
} else {
getUserQuota().then(); getUserQuota().then();
} }
getAffLink().then();
setTransferAmount(getQuotaPerUnit()); setTransferAmount(getQuotaPerUnit());
let payMethods = localStorage.getItem('pay_methods'); let payMethods = localStorage.getItem('pay_methods');
@@ -330,9 +303,9 @@ const TopUp = () => {
// 如果没有color，则设置默认颜色 // 如果没有color，则设置默认颜色
payMethods = payMethods.map((method) => { payMethods = payMethods.map((method) => {
if (!method.color) { if (!method.color) {
if (method.type === 'zfb') { if (method.type === 'alipay') {
method.color = 'rgba(var(--semi-blue-5), 1)'; method.color = 'rgba(var(--semi-blue-5), 1)';
} else if (method.type === 'wx') { } else if (method.type === 'wxpay') {
method.color = 'rgba(var(--semi-green-5), 1)'; method.color = 'rgba(var(--semi-green-5), 1)';
} else if (method.type === 'stripe') { } else if (method.type === 'stripe') {
method.color = 'rgba(var(--semi-purple-5), 1)'; method.color = 'rgba(var(--semi-purple-5), 1)';
@@ -365,14 +338,27 @@ const TopUp = () => {
} }
}, [statusState?.status?.enable_stripe_topup]); }, [statusState?.status?.enable_stripe_topup]);
useEffect(() => {
if (affFetchedRef.current) return;
affFetchedRef.current = true;
getAffLink().then();
}, []);
useEffect(() => { useEffect(() => {
if (statusState?.status) { if (statusState?.status) {
setMinTopUp(statusState.status.min_topup || 1); const minTopUpValue = statusState.status.min_topup || 1;
setTopUpCount(statusState.status.min_topup || 1); setMinTopUp(minTopUpValue);
setTopUpCount(minTopUpValue);
setTopUpLink(statusState.status.top_up_link || ''); setTopUpLink(statusState.status.top_up_link || '');
setEnableOnlineTopUp(statusState.status.enable_online_topup || false); setEnableOnlineTopUp(statusState.status.enable_online_topup || false);
setPriceRatio(statusState.status.price || 1); setPriceRatio(statusState.status.price || 1);
setEnableStripeTopUp(statusState.status.enable_stripe_topup || false); setEnableStripeTopUp(statusState.status.enable_stripe_topup || false);
// 根据最小充值金额生成预设充值额度选项
setPresetAmounts(generatePresetAmounts(minTopUpValue));
// 初始化显示实付金额
getAmount(minTopUpValue);
setStatusLoading(false); setStatusLoading(false);
} }
}, [statusState?.status]); }, [statusState?.status]);
@@ -454,6 +440,14 @@ const TopUp = () => {
return num.toString(); return num.toString();
}; };
// 根据最小充值金额生成预设充值额度选项
const generatePresetAmounts = (minAmount) => {
const multipliers = [1, 5, 10, 30, 50, 100, 300, 500];
return multipliers.map(multiplier => ({
value: minAmount * multiplier
}));
};
return ( return (
<div className='mx-auto relative min-h-screen lg:min-h-0 mt-[60px] px-2'> <div className='mx-auto relative min-h-screen lg:min-h-0 mt-[60px] px-2'>
{/* 划转模态框 */} {/* 划转模态框 */}

6
web/src/components/topup/modals/PaymentConfirmModal.jsx
View File

@@ -85,9 +85,9 @@ const PaymentConfirmModal = ({
if (payMethod) { if (payMethod) {
return ( return (
<> <>
{payMethod.type === 'zfb' ? ( {payMethod.type === 'alipay' ? (
<SiAlipay className='mr-2' size={16} color="#1677FF" /> <SiAlipay className='mr-2' size={16} color="#1677FF" />
) : payMethod.type === 'wx' ? ( ) : payMethod.type === 'wxpay' ? (
<SiWechat className='mr-2' size={16} color="#07C160" /> <SiWechat className='mr-2' size={16} color="#07C160" />
) : payMethod.type === 'stripe' ? ( ) : payMethod.type === 'stripe' ? (
<SiStripe className='mr-2' size={16} color="#635BFF" /> <SiStripe className='mr-2' size={16} color="#635BFF" />
@@ -99,7 +99,7 @@ const PaymentConfirmModal = ({
); );
} else { } else {
// 默认充值方式 // 默认充值方式
if (payWay === 'zfb') { if (payWay === 'alipay') {
return ( return (
<> <>
<SiAlipay className='mr-2' size={16} color="#1677FF" /> <SiAlipay className='mr-2' size={16} color="#1677FF" />

8
web/src/i18n/locales/en.json
View File

@@ -159,7 +159,6 @@
"测试所有已启用通道": "Test all enabled channels", "测试所有已启用通道": "Test all enabled channels",
"更新所有已启用通道余额": "Update balance for all enabled channels", "更新所有已启用通道余额": "Update balance for all enabled channels",
"刷新": "Refresh", "刷新": "Refresh",
"处理中...": "Processing...",
"绑定成功！": "Binding successful!", "绑定成功！": "Binding successful!",
"登录成功！": "Login successful!", "登录成功！": "Login successful!",
"操作失败，重定向至登录界面中...": "Operation failed, redirecting to login page...", "操作失败，重定向至登录界面中...": "Operation failed, redirecting to login page...",
@@ -168,7 +167,7 @@
"渠道": "Channel", "渠道": "Channel",
"渠道管理": "Channels", "渠道管理": "Channels",
"令牌": "Tokens", "令牌": "Tokens",
"兑换": "Redeem", "兑换额度": "Redeem",
"充值": "Recharge", "充值": "Recharge",
"用户": "Users", "用户": "Users",
"日志": "Logs", "日志": "Logs",
@@ -846,7 +845,6 @@
"充值记录": "Recharge record", "充值记录": "Recharge record",
"返利记录": "Rebate record", "返利记录": "Rebate record",
"确定要充值 $": "Confirm to top up $", "确定要充值 $": "Confirm to top up $",
"兑换中...": "Redemming",
"微信/支付宝 实付金额：": "WeChat/Alipay actual payment amount:", "微信/支付宝 实付金额：": "WeChat/Alipay actual payment amount:",
"Stripe 实付金额：": "Stripe actual payment amount:", "Stripe 实付金额：": "Stripe actual payment amount:",
"支付中...": "Paying", "支付中...": "Paying",
@@ -857,7 +855,9 @@
"兑换码充值": "Redemption code recharge", "兑换码充值": "Redemption code recharge",
"奖励说明": "Reward description", "奖励说明": "Reward description",
"选择支付方式": "Select payment method", "选择支付方式": "Select payment method",
"处理中": "Processing", "在找兑换码？": "Looking for a redemption code? ",
"购买兑换码": "Buy redemption code",
"账户统计": "Account statistics",
"账户充值": "Account recharge", "账户充值": "Account recharge",
"多种充值方式，安全便捷": "Multiple recharge methods, safe and convenient", "多种充值方式，安全便捷": "Multiple recharge methods, safe and convenient",
"支付方式": "Payment method", "支付方式": "Payment method",