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

♻️refactor: Completely redesign TopUp page with modern card-based UI and enhanced UX

Browse Source 
- Replace simple form layout with sophisticated card-based design system
- Implement bank card-style wallet display with gradient backgrounds and decorative elements
- Integrate real user data from UserContext (username, quota, usage stats, user role, group)
- Add personalized color schemes using stringToColor for unique user identification
- Implement comprehensive responsive design for mobile, tablet, and desktop devices
- Add skeleton loading states for all data-dependent components and API calls
- Replace basic Input with InputNumber component for amount input with built-in validation (min: 1)
- Add official brand icons for payment methods (Alipay, WeChat) using react-icons/si
- Integrate Semi UI Banner component for better warning notifications
- Implement real-time data synchronization between local state and UserContext
- Add sophisticated loading states with proper error handling and user feedback
- Clean up all code comments and remove unused imports, functions, and state variables
- Enhance visual hierarchy with proper spacing, shadows, and modern typography
- Add glass-morphism effects and backdrop filters for premium visual experience
- Improve accessibility with proper text truncation and responsive font sizing

This update transforms the TopUp page from a basic form into a professional,
modern payment interface that provides excellent user experience across all devices
while maintaining full functionality and adding comprehensive data validation.
This commit is contained in:
Apple\Apple
2025-05-23 19:31:36 +08:00
parent eba661ad1e
commit 1660c47db5
3 changed files with 367 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/package.json
View File

@@ -11,23 +11,25 @@
"@visactor/vchart": "~1.8.8",
"@visactor/vchart-semi-theme": "~1.8.8",
"axios": "^0.27.2",
"country-flag-icons": "^1.5.19",
"dayjs": "^1.11.11",
"history": "^5.3.0",
"i18next": "^23.16.8",
"i18next-browser-languagedetector": "^7.2.0",
"lucide-react": "^0.511.0",
"marked": "^4.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-fireworks": "^1.0.4",
"react-i18next": "^13.0.0",
"react-icons": "^5.5.0",
"react-router-dom": "^6.3.0",
"react-telegram-login": "^1.1.2",
"react-toastify": "^9.0.8",
"react-turnstile": "^1.0.5",
"semantic-ui-offline": "^2.5.0",
"semantic-ui-react": "^2.1.3",
"country-flag-icons": "^1.5.19",
"sse": "https://github.com/mpetazzoni/sse.js"
},
"scripts": {

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

@@ -1178,7 +1178,7 @@
"请输入新的密码，最短 8 位": "Please enter a new password, at least 8 characterss",
"添加额度": "Add quota",
"以下信息不可修改": "The following information cannot be modified",
"确定要充值吗": "Check to confirm recharge",
"充值确认": "Recharge confirmation",
"充值数量": "Recharge quantity",
"实付金额": "Actual payment amount",
"是否确认充值？": "Confirm recharge?",
@@ -1449,5 +1449,11 @@
"用户分组和额度管理": "User Group and Quota Management",
"绑定信息": "Binding Information",
"第三方账户绑定状态（只读）": "Third-party account binding status (read-only)",
"已绑定的 OIDC 账户": "Bound OIDC accounts"
"已绑定的 OIDC 账户": "Bound OIDC accounts",
"使用兑换码充值余额": "Recharge balance with redemption code",
"支持多种支付方式": "Support multiple payment methods",
"尊敬的": "Dear",
"请输入兑换码": "Please enter the redemption code",
"在线充值功能未开启": "Online recharge function is not enabled",
"管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。": "The administrator has not enabled the online recharge function, please contact the administrator to enable it or recharge with a redemption code."
}

411
web/src/pages/TopUp/index.js
View File

@@ -1,34 +1,41 @@
import React, { useEffect, useState } from 'react';
import { API, isMobile, showError, showInfo, showSuccess } from '../../helpers';
import React, { useEffect, useState, useContext } from 'react';
import { API, showError, showInfo, showSuccess } from '../../helpers';
import {
renderNumber,
renderQuota,
renderQuotaWithAmount,
stringToColor,
} from '../../helpers/render';
import {
Col,
Layout,
Row,
Typography,
Card,
Button,
Form,
Divider,
Space,
Modal,
Toast,
Input,
InputNumber,
Banner,
Skeleton,
} from '@douyinfe/semi-ui';
import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import Text from '@douyinfe/semi-ui/lib/es/typography/text';
import { Link } from 'react-router-dom';
import {
IconCreditCard,
IconGift,
IconPlus,
IconLink,
} from '@douyinfe/semi-icons';
import { SiAlipay, SiWechat } from 'react-icons/si';
import { useTranslation } from 'react-i18next';
import { UserContext } from '../../context/User';
const { Text } = Typography;
const TopUp = () => {
const { t } = useTranslation();
const [userState, userDispatch] = useContext(UserContext);
const [redemptionCode, setRedemptionCode] = useState('');
const [topUpCode, setTopUpCode] = useState('');
const [topUpCount, setTopUpCount] = useState(0);
const [minTopupCount, setMinTopUpCount] = useState(1);
const [amount, setAmount] = useState(0.0);
const [minTopUp, setMinTopUp] = useState(1);
const [topUpLink, setTopUpLink] = useState('');
@@ -37,6 +44,30 @@ const TopUp = () => {
const [isSubmitting, setIsSubmitting] = useState(false);
const [open, setOpen] = useState(false);
const [payWay, setPayWay] = useState('');
const [userDataLoading, setUserDataLoading] = useState(true);
const [amountLoading, setAmountLoading] = useState(false);
const getUsername = () => {
if (userState.user) {
return userState.user.username;
} else {
return 'null';
}
};
const getUserRole = () => {
if (!userState.user) return t('普通用户');
switch (userState.user.role) {
case 100:
return t('超级管理员');
case 10:
return t('管理员');
case 0:
default:
return t('普通用户');
}
};
const topUp = async () => {
if (redemptionCode === '') {
@@ -59,6 +90,13 @@ const TopUp = () => {
setUserQuota((quota) => {
return quota + data;
});
if (userState.user) {
const updatedUser = {
...userState.user,
quota: userState.user.quota + data
};
userDispatch({ type: 'login', payload: updatedUser });
}
setRedemptionCode('');
} else {
showError(message);
@@ -109,14 +147,12 @@ const TopUp = () => {
});
if (res !== undefined) {
const { message, data } = res.data;
// showInfo(message);
if (message === 'success') {
let params = data;
let url = res.data.url;
let form = document.createElement('form');
form.action = url;
form.method = 'POST';
// 判断是否为safari浏览器
let isSafari =
navigator.userAgent.indexOf('Safari') > -1 &&
navigator.userAgent.indexOf('Chrome') < 1;
@@ -135,26 +171,26 @@ const TopUp = () => {
document.body.removeChild(form);
} else {
showError(data);
// setTopUpCount(parseInt(res.data.count));
// setAmount(parseInt(data));
}
} else {
showError(res);
}
} catch (err) {
console.log(err);
} finally {
}
};
const getUserQuota = async () => {
setUserDataLoading(true);
let res = await API.get(`/api/user/self`);
const { success, message, data } = res.data;
if (success) {
setUserQuota(data.quota);
userDispatch({ type: 'login', payload: data });
} else {
showError(message);
}
setUserDataLoading(false);
};
useEffect(() => {
@@ -171,11 +207,16 @@ const TopUp = () => {
setEnableOnlineTopUp(status.enable_online_topup);
}
}
if (userState?.user?.id) {
setUserDataLoading(false);
setUserQuota(userState.user.quota);
} else {
getUserQuota().then();
}
}, []);
const renderAmount = () => {
// console.log(amount);
return amount + ' ' + t('元');
};
@@ -183,6 +224,7 @@ const TopUp = () => {
if (value === undefined) {
value = topUpCount;
}
setAmountLoading(true);
try {
const res = await API.post('/api/user/amount', {
amount: parseFloat(value),
@@ -190,22 +232,19 @@ const TopUp = () => {
});
if (res !== undefined) {
const { message, data } = res.data;
// showInfo(message);
if (message === 'success') {
setAmount(parseFloat(data));
} else {
setAmount(0);
Toast.error({ content: '错误：' + data, id: 'getAmount' });
// setTopUpCount(parseInt(res.data.count));
// setAmount(parseInt(data));
}
} else {
showError(res);
}
} catch (err) {
console.log(err);
} finally {
}
setAmountLoading(false);
};
const handleCancel = () => {
@@ -213,14 +252,16 @@ const TopUp = () => {
};
return (
<div>
<div className="min-h-screen bg-gray-50">
<Layout>
<Layout.Header>
<h3>{t('我的钱包')}</h3>
</Layout.Header>
<Layout.Content>
<Modal
title={t('确定要充值吗')}
title={
<div className="flex items-center">
<IconGift className="mr-2" />
{t('充值确认')}
</div>
}
visible={open}
onOk={onlineTopUp}
onCancel={handleCancel}
@@ -228,112 +269,296 @@ const TopUp = () => {
size={'small'}
centered={true}
>
<p>
{t('充值数量')}：{topUpCount}
</p>
<p>
{t('实付金额')}：{renderAmount()}
</p>
<p>{t('是否确认充值？')}</p>
<div className="space-y-3 py-4">
<div className="flex justify-between">
<Text strong>{t('充值数量')}：</Text>
<Text>{topUpCount}</Text>
</div>
<div className="flex justify-between">
<Text strong>{t('实付金额')}：</Text>
{amountLoading ? (
<Skeleton.Title style={{ width: '60px', height: '16px' }} />
) : (
<Text type="danger">{renderAmount()}</Text>
)}
</div>
</div>
</Modal>
<div
style={{ marginTop: 20, display: 'flex', justifyContent: 'center' }}
>
<Card style={{ width: '500px', padding: '20px' }}>
<Title level={3} style={{ textAlign: 'center' }}>
{t('余额')} {renderQuota(userQuota)}
</Title>
<div style={{ marginTop: 20 }}>
<Divider>{t('兑换余额')}</Divider>
<Form>
<Form.Input
field={'redemptionCode'}
label={t('兑换码')}
placeholder={t('兑换码')}
name='redemptionCode'
value={redemptionCode}
onChange={(value) => {
setRedemptionCode(value);
<div className="flex justify-center">
<div className="w-full max-w-4xl">
<Card className="!rounded-2xl shadow-lg border-0">
<Card
className="!rounded-2xl !border-0 !shadow-2xl overflow-hidden"
style={{
background: 'linear-gradient(135deg, #1e3a8a 0%, #1e40af 25%, #2563eb 50%, #3b82f6 75%, #60a5fa 100%)',
position: 'relative'
}}
bodyStyle={{ padding: 0 }}
>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-16 -left-16 w-48 h-48 bg-white opacity-3 rounded-full"></div>
<div className="absolute top-1/2 right-1/4 w-24 h-24 bg-yellow-400 opacity-10 rounded-full"></div>
</div>
<div className="relative p-4 sm:p-6 md:p-8" style={{ color: 'white' }}>
<div className="flex justify-between items-start mb-4 sm:mb-6">
<div className="flex-1 min-w-0">
{userDataLoading ? (
<Skeleton.Title style={{ width: '200px', height: '20px' }} />
) : (
<div className="text-base sm:text-lg font-semibold truncate" style={{ color: 'white' }}>
{t('尊敬的')} {getUsername()}
</div>
)}
</div>
<div
className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center shadow-lg flex-shrink-0 ml-2"
style={{
background: `linear-gradient(135deg, ${stringToColor(getUsername())} 0%, #f59e0b 100%)`
}}
>
<IconCreditCard size="default" style={{ color: 'white' }} />
</div>
</div>
<div className="mb-4 sm:mb-6">
<div className="text-xs sm:text-sm mb-1 sm:mb-2" style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
{t('当前余额')}
</div>
{userDataLoading ? (
<Skeleton.Title style={{ width: '180px', height: '32px' }} />
) : (
<div className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-wide" style={{ color: 'white' }}>
{renderQuota(userState?.user?.quota || userQuota)}
</div>
)}
</div>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-end">
<div className="grid grid-cols-3 gap-2 sm:flex sm:space-x-6 lg:space-x-8 mb-3 sm:mb-0">
<div className="text-center sm:text-left">
<div className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.6)' }}>
{t('历史消耗')}
</div>
{userDataLoading ? (
<Skeleton.Title style={{ width: '60px', height: '14px' }} />
) : (
<div className="text-xs sm:text-sm font-medium truncate" style={{ color: 'white' }}>
{renderQuota(userState?.user?.used_quota || 0)}
</div>
)}
</div>
<div className="text-center sm:text-left">
<div className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.6)' }}>
{t('用户分组')}
</div>
{userDataLoading ? (
<Skeleton.Title style={{ width: '50px', height: '14px' }} />
) : (
<div className="text-xs sm:text-sm font-medium truncate" style={{ color: 'white' }}>
{userState?.user?.group || t('默认')}
</div>
)}
</div>
<div className="text-center sm:text-left">
<div className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.6)' }}>
{t('用户角色')}
</div>
{userDataLoading ? (
<Skeleton.Title style={{ width: '60px', height: '14px' }} />
) : (
<div className="text-xs sm:text-sm font-medium truncate" style={{ color: 'white' }}>
{getUserRole()}
</div>
)}
</div>
</div>
<div className="self-end sm:self-auto">
{userDataLoading ? (
<Skeleton.Title style={{ width: '50px', height: '24px' }} />
) : (
<div
className="px-2 py-1 sm:px-3 rounded-md text-xs sm:text-sm font-medium inline-block"
style={{
backgroundColor: 'rgba(255, 255, 255, 0.2)',
color: 'white',
backdropFilter: 'blur(10px)'
}}
>
ID: {userState?.user?.id || '---'}
</div>
)}
</div>
</div>
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400" style={{ opacity: 0.6 }}></div>
</div>
</Card>
<div className="p-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<div className="flex items-center mb-6">
<div className="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mr-4">
<IconGift size="large" className="text-green-500" />
</div>
<div>
<Text className="text-xl font-semibold">{t('兑换余额')}</Text>
<div className="text-gray-500 text-sm">{t('使用兑换码充值余额')}</div>
</div>
</div>
<div className="space-y-4">
<div>
<Text strong className="block mb-2">{t('兑换码')}</Text>
<Input
placeholder={t('请输入兑换码')}
value={redemptionCode}
onChange={(value) => setRedemptionCode(value)}
size="large"
className="!rounded-lg"
prefix={<IconGift />}
/>
<Space>
{topUpLink ? (
</div>
<div className="flex flex-col sm:flex-row gap-3">
{topUpLink && (
<Button
type={'primary'}
theme={'solid'}
type="primary"
theme="solid"
onClick={openTopUpLink}
size="large"
className="!rounded-lg flex-1"
icon={<IconLink />}
>
{t('获取兑换码')}
</Button>
) : null}
)}
<Button
type={'warning'}
theme={'solid'}
type="warning"
theme="solid"
onClick={topUp}
disabled={isSubmitting}
loading={isSubmitting}
size="large"
className="!rounded-lg flex-1"
>
{isSubmitting ? t('兑换中...') : t('兑换')}
</Button>
</Space>
</Form>
</div>
<div style={{ marginTop: 20 }}>
<Divider>{t('在线充值')}</Divider>
<Form>
<Form.Input
</div>
</div>
<div>
<div className="flex items-center mb-6">
<div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mr-4">
<IconPlus size="large" className="text-blue-500" />
</div>
<div>
<Text className="text-xl font-semibold">{t('在线充值')}</Text>
<div className="text-gray-500 text-sm">{t('支持多种支付方式')}</div>
</div>
</div>
<div className="space-y-4">
<div>
<div className="flex justify-between mb-2">
<Text strong>{t('充值数量')}</Text>
{amountLoading ? (
<Skeleton.Title style={{ width: '80px', height: '14px' }} />
) : (
<Text type="tertiary">{t('实付金额：') + ' ' + renderAmount()}</Text>
)}
</div>
<InputNumber
disabled={!enableOnlineTopUp}
field={'redemptionCount'}
label={t('实付金额：') + ' ' + renderAmount()}
placeholder={
t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
}
name='redemptionCount'
type={'number'}
value={topUpCount}
min={1}
max={999999999}
step={1}
precision={0}
onChange={async (value) => {
if (value < 1) {
value = 1;
}
if (value && value >= 1) {
setTopUpCount(value);
await getAmount(value);
}
}}
onBlur={(e) => {
const value = parseInt(e.target.value);
if (!value || value < 1) {
setTopUpCount(1);
getAmount(1);
}
}}
size="large"
className="!rounded-lg w-full"
prefix={<IconCreditCard />}
formatter={(value) => value ? `${value}` : ''}
parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0}
/>
<Space>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Button
type={'primary'}
theme={'solid'}
type="primary"
theme="solid"
onClick={async () => {
preTopUp('zfb');
}}
size="large"
className="!rounded-lg !bg-blue-500 hover:!bg-blue-600 h-14"
disabled={!enableOnlineTopUp}
icon={<SiAlipay size={20} />}
>
{t('支付宝')}
<span className="ml-2">{t('支付宝')}</span>
</Button>
<Button
style={{
backgroundColor: 'rgba(var(--semi-green-5), 1)',
}}
type={'primary'}
theme={'solid'}
type="primary"
theme="solid"
onClick={async () => {
preTopUp('wx');
}}
size="large"
className="!rounded-lg !bg-green-500 hover:!bg-green-600 h-14"
disabled={!enableOnlineTopUp}
icon={<SiWechat size={20} />}
>
{t('微信')}
<span className="ml-2">{t('微信')}</span>
</Button>
</Space>
</Form>
</div>
{/*<div style={{ display: 'flex', justifyContent: 'right' }}>*/}
{/* <Text>*/}
{/* <Link onClick={*/}
{/* async () => {*/}
{/* window.location.href = '/topup/history'*/}
{/* }*/}
{/* }>充值记录</Link>*/}
{/* </Text>*/}
{/*</div>*/}
{!enableOnlineTopUp && (
<Banner
fullMode={false}
type="warning"
icon={null}
closeIcon={null}
className="!rounded-lg"
title={
<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
{t('在线充值功能未开启')}
</div>
}
description={
<div>
{t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
</div>
}
/>
)}
</div>
</div>
</div>
</div>
</Card>
</div>
</div>
</Layout.Content>
</Layout>
</div>