github/new-api
1
0
Fork 0
mirror of https://github.com/QuantumNous/new-api.git synced 2026-04-21 03:48:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Update subscription purchase modal display

Browse Source 
Show total quota as currency with tooltip for raw quota, hide reset cycle when never, and display upgrade group when configured to match card display rules.
This commit is contained in:
t0ng7u
2026-02-01 02:28:50 +08:00
parent 96caec1626
commit f0e60df96e
1 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/components/topup/modals/SubscriptionPurchaseModal.jsx
View File

@@ -26,10 +26,12 @@ import {
Button,
Select,
Divider,
Tooltip,
} from '@douyinfe/semi-ui';
import { Crown, CalendarClock, Package } from 'lucide-react';
import { SiStripe } from 'react-icons/si';
import { IconCreditCard } from '@douyinfe/semi-icons';
import { renderQuota } from '../../../helpers';
import { getCurrencyConfig } from '../../../helpers/render';
const { Text } = Typography;
@@ -145,25 +147,45 @@ const SubscriptionPurchaseModal = ({
</Text>
</div>
</div>
<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'>
{formatResetPeriod(plan, t)}
</Text>
</div>
{formatResetPeriod(plan, t) !== t('不重置') && (
<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'>
{formatResetPeriod(plan, t)}
</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'>
<Package size={14} className='mr-1 text-slate-500' />
<Text className='text-slate-900 dark:text-slate-100'>
{totalAmount > 0 ? totalAmount : t('不限')}
</Text>
{totalAmount > 0 ? (
<Tooltip content={`${t('原生额度')}：${totalAmount}`}>
<Text className='text-slate-900 dark:text-slate-100'>
{renderQuota(totalAmount)}
</Text>
</Tooltip>
) : (
<Text className='text-slate-900 dark:text-slate-100'>
{t('不限')}
</Text>
)}
</div>
</div>
{plan?.upgrade_group ? (
<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'>
{plan.upgrade_group}
</Text>
</div>
) : null}
<Divider margin={8} />
<div className='flex justify-between items-center'>
<Text strong className='text-slate-700 dark:text-slate-200'>