✨ feat(affiliate): Commission Rate

apps/user/app/(main)/(user)/affiliate/page.tsx

@@ -8,12 +8,13 @@ import { formatDate } from '@repo/ui/utils';
 import { Button } from '@shadcn/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@shadcn/ui/card';
 import { toast } from '@shadcn/ui/lib/sonner';
+import { Copy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
 export default function Page() {
   const t = useTranslations('affiliate');
-  const { user } = useGlobalStore();
+  const { user, common } = useGlobalStore();
   const [sum, setSum] = useState<number>();
 
   return (
@@ -23,23 +24,40 @@ export default function Page() {
           <CardTitle>{t('totalCommission')}</CardTitle>
           <CardDescription>{t('commissionInfo')}</CardDescription>
         </CardHeader>
-        <CardContent className='text-2xl font-bold'>
+        <CardContent>
-          <Display type='currency' value={sum} />
+          <div className='flex items-baseline gap-2'>
+            <span className='text-3xl font-bold'>
+              <Display type='currency' value={sum} />
+            </span>
+            <span className='text-muted-foreground text-sm'>
+              ({t('commissionRate')}: {common?.invite?.referral_percentage}%)
+            </span>
+          </div>
         </CardContent>
       </Card>
       <Card>
         <CardHeader className='flex flex-row items-center justify-between space-y-0'>
-          <CardTitle>{t('inviteCode')}</CardTitle>
+          <CardTitle className='text-lg font-medium'>{t('inviteCode')}</CardTitle>
-          <Button
-            onClick={() => {
-              navigator.clipboard.writeText(`${location.origin}/auth?invite=${user?.refer_code}`);
-              toast.success(t('copySuccess'));
-            }}
-          >
-            {t('copyInviteLink')}
-          </Button>
         </CardHeader>
-        <CardContent className='text-2xl font-bold'>{user?.refer_code}</CardContent>
+        <CardContent>
+          <div className='flex items-center justify-between'>
+            <code className='bg-muted rounded px-2 py-1 text-2xl font-bold'>
+              {user?.refer_code}
+            </code>
+            <Button
+              variant='secondary'
+              size='sm'
+              className='gap-2'
+              onClick={() => {
+                navigator.clipboard.writeText(`${location.origin}/auth?invite=${user?.refer_code}`);
+                toast.success(t('copySuccess'));
+              }}
+            >
+              <Copy className='h-4 w-4' />
+              {t('copyInviteLink')}
+            </Button>
+          </div>
+        </CardContent>
       </Card>
       <ProList<API.UserAffiliate, Record<string, unknown>>
         request={async (pagination, filter) => {

apps/user/locales/en-US/affiliate.json

@@ -1,5 +1,6 @@
 {
   "commissionInfo": "Statistics of the commission, automatically transferred to balance",
+  "commissionRate": "Commission Rate",
   "copyInviteLink": "Copy Invite Link",
   "copySuccess": "Copied Successfully",
   "inviteCode": "Invite Code",

apps/user/locales/zh-CN/affiliate.json

@@ -1,5 +1,6 @@
 {
   "commissionInfo": "统计金额，邀请佣金自动转入余额",
+  "commissionRate": "佣金比例",
   "copyInviteLink": "复制邀请链接",
   "copySuccess": "复制成功",
   "inviteCode": "邀请码",