S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(affiliate): Update affiliate component to display total commission and improve data fetching

Browse Source
This commit is contained in:
web@ppanel
2025-01-04 16:51:03 +07:00
parent 4aea4e811f
commit cc834caa30
56 changed files with 335 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/(user)/sidebar-right.tsx
+40 -22
View File
@@ -35,30 +35,48 @@ export function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>)
</CardContent>
</Card>
<Card>
<CardHeader className='flex flex-row items-center justify-between space-y-0 p-3 pb-2'>
<CardTitle className='text-sm font-medium'>{t('inviteCode')}</CardTitle>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<CopyToClipboard
text={`${isBrowser() && location?.origin}/auth?invite=${user?.refer_code}`}
onCopy={(text, result) => {
if (result) {
toast.success(t('copySuccess'));
}
}}
>
<Button variant='ghost' className='size-5 p-0'>
<Icon icon='mdi:content-copy' className='text-primary text-2xl' />
</Button>
</CopyToClipboard>
</TooltipTrigger>
<TooltipContent>{t('copyInviteLink')}</TooltipContent>
</Tooltip>
</TooltipProvider>
<CardHeader className='space-y-0 p-3 pb-2'>
<CardTitle className='text-sm font-medium'>{t('deductBalance')}</CardTitle>
</CardHeader>
<CardContent className='truncate p-3 font-bold'>{user?.refer_code}</CardContent>
<CardContent className='p-3 text-2xl font-bold'>
<Display type='currency' value={user?.deduction} />
</CardContent>
</Card>
<Card>
<CardHeader className='space-y-0 p-3 pb-2'>
<CardTitle className='text-sm font-medium'>{t('commission')}</CardTitle>
</CardHeader>
<CardContent className='p-3 text-2xl font-bold'>
<Display type='currency' value={user?.commission} />
</CardContent>
</Card>
{user?.refer_code && (
<Card>
<CardHeader className='flex flex-row items-center justify-between space-y-0 p-3 pb-2'>
<CardTitle className='text-sm font-medium'>{t('inviteCode')}</CardTitle>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<CopyToClipboard
text={`${isBrowser() && location?.origin}/auth?invite=${user?.refer_code}`}
onCopy={(text, result) => {
if (result) {
toast.success(t('copySuccess'));
}
}}
>
<Button variant='ghost' className='size-5 p-0'>
<Icon icon='mdi:content-copy' className='text-primary text-2xl' />
</Button>
</CopyToClipboard>
</TooltipTrigger>
<TooltipContent>{t('copyInviteLink')}</TooltipContent>
</Tooltip>
</TooltipProvider>
</CardHeader>
<CardContent className='truncate p-3 font-bold'>{user?.refer_code}</CardContent>
</Card>
)}
</SidebarContent>
</Sidebar>
);
apps/user/app/(main)/(user)/wallet/page.tsx
+39 -10
View File
@@ -4,7 +4,7 @@ import { Display } from '@/components/display';
import { ProList, ProListActions } from '@/components/pro-list';
import useGlobalStore from '@/config/use-global';
import { queryUserBalanceLog } from '@/services/user/user';
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
import { Card, CardContent } from '@workspace/ui/components/card';
import { useTranslations } from 'next-intl';
import { useRef } from 'react';
@@ -16,19 +16,48 @@ export default function Page() {
const t = useTranslations('wallet');
const { user } = useGlobalStore();
const ref = useRef<ProListActions>(null);
const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.deduction || 0);
return (
<>
<Card className='mb-4'>
<CardHeader>
<CardTitle className='font-medium'>{t('title')}</CardTitle>
</CardHeader>
<CardContent className='flex items-center justify-between'>
<div className='text-2xl font-bold'>
<Display type='currency' value={user?.balance} />
<CardContent className='p-6'>
<h2 className='text-foreground mb-4 text-2xl font-bold'>{t('totalAssets')}</h2>
<div className='mb-4'>
<div className='flex items-center justify-between'>
<div>
<p className='text-sm font-medium'>总资产</p>
<p className='text-3xl font-bold'>
<Display type='currency' value={totalAssets} />
</p>
</div>
<Recharge />
</div>
</div>
<div className='flex gap-2'>
<Recharge />
<div className='grid grid-cols-1 gap-6 md:grid-cols-3'>
<div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
<p className='text-secondary-foreground text-sm font-medium opacity-80'>
{t('balance')}
</p>
<p className='text-secondary-foreground text-2xl font-bold'>
<Display type='currency' value={user?.balance} />
</p>
</div>
<div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
<p className='text-secondary-foreground text-sm font-medium opacity-80'>
{t('deductBalance')}
</p>
<p className='text-secondary-foreground text-2xl font-bold'>
<Display type='currency' value={user?.deduction} />
</p>
</div>
<div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
<p className='text-secondary-foreground text-sm font-medium opacity-80'>
{t('commission')}
</p>
<p className='text-secondary-foreground text-2xl font-bold'>
<Display type='currency' value={user?.commission} />
</p>
</div>
</div>
</CardContent>
</Card>