fix: pc端修改

apps/user/components/affiliate/index.tsx

@@ -2,19 +2,12 @@
 
 import { Display } from '@/components/display';
 import { Empty } from '@/components/empty';
-import { ProList } from '@/components/pro-list';
 import useGlobalStore from '@/config/use-global';
 import { queryUserAffiliate, queryUserAffiliateList } from '@/services/user/user';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@workspace/ui/components/card';
-import { formatDate, isBrowser } from '@workspace/ui/utils';
+import { Card, CardContent } from '@workspace/ui/components/card';
+import { formatDate } from '@workspace/ui/utils';
 import { Copy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -33,52 +26,97 @@ export default function Affiliate() {
     },
   });
 
+  const { data: inviteList = [] } = useQuery({
+    queryKey: ['queryUserAffiliateList'],
+    queryFn: async () => {
+      const response = await queryUserAffiliateList({
+        page: 1,
+        size: 3,
+      });
+      return response.data.data?.list || [];
+    },
+  });
+
   return (
-    <div className='flex flex-col gap-4'>
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('totalCommission')}</CardTitle>
-          <CardDescription>{t('commissionInfo')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className='flex items-baseline gap-2'>
-            <span className='text-3xl font-bold'>
-              <Display type='currency' value={data?.total_commission} />
-            </span>
-            <span className='text-muted-foreground text-sm'>
-              ({t('commissionRate')}: {common?.invite?.referral_percentage}%)
-            </span>
+    <div className='grid grid-cols-2 gap-4'>
+      <Card
+        className={
+          'rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
+        }
+      >
+        <CardContent className={'p-0 text-[#666]'}>
+          <div className={'mb-6'}>
+            <div className={'text-xl font-bold'}>{t('totalCommission')}</div>
+            <div className={'text-[15px] font-light'}>佣金金额，邀请成功后自动转入钱包余额</div>
+          </div>
+          <div className={'text-[32px] font-bold text-[#091B33]'}>历史推荐用户：7</div>
+          <div className={'grid grid-cols-2 gap-5'}>
+            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>佣金总额</p>
+              <p className='text-2xl font-bold text-[#225BA9]'>
+                <Display type='currency' value={data?.total_commission} />
+              </p>
+            </div>
+            <div className='rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
+                <span>返佣邀请码</span>
+              </p>
+              <p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
+                <span> {user?.refer_code}</span>
+                <CopyToClipboard
+                  text={`${location?.origin}/?invite=${user?.refer_code}`}
+                  onCopy={(text, result) => {
+                    if (result) {
+                      toast.success(t('copySuccess'));
+                    }
+                  }}
+                >
+                  <Button variant='secondary' size='sm' className='gap-2'>
+                    <Copy className='h-4 w-4' />
+                  </Button>
+                </CopyToClipboard>
+              </p>
+            </div>
           </div>
         </CardContent>
       </Card>
-      <Card>
-        <CardHeader className='flex flex-row items-center justify-between space-y-0'>
-          <CardTitle className='text-lg font-medium'>{t('inviteCode')}</CardTitle>
-        </CardHeader>
-        <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>
-            {isBrowser() && (
-              <CopyToClipboard
-                text={`${location?.origin}/auth?invite=${user?.refer_code}`}
-                onCopy={(text, result) => {
-                  if (result) {
-                    toast.success(t('copySuccess'));
-                  }
-                }}
-              >
-                <Button variant='secondary' size='sm' className='gap-2'>
-                  <Copy className='h-4 w-4' />
-                  {t('copyInviteLink')}
-                </Button>
-              </CopyToClipboard>
-            )}
-          </div>
-        </CardContent>
+      <Card className='rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6'>
+        <div className='mb-4 flex items-center justify-between'>
+          <h3 className='text-xl font-medium text-[#666666]'>邀请记录</h3>
+          <span className='text-sm text-[#225BA9]'>更多</span>
+        </div>
+
+        <div className='space-y-4'>
+          {inviteList?.length ? (
+            <div className='relative space-y-3'>
+              <div
+                className={
+                  'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'
+                }
+              ></div>
+              {inviteList?.map((invite) => {
+                return (
+                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2'>
+                    <div>
+                      <div className={'text-[#225BA9]'}>用户识别代码</div>
+                      <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
+                    </div>
+                    <div>
+                      <div className={'text-[#225BA9]'}>时间</div>
+                      <div className={'font-bold text-[#091B33]'}>
+                        {formatDate(invite.registered_at)}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <Empty />
+          )}
+        </div>
       </Card>
-      <ProList<API.UserAffiliate, Record<string, unknown>>
+      {/*<ProList<API.UserAffiliate, Record<string, unknown>>
         request={async (pagination, filter) => {
           const response = await queryUserAffiliateList({ ...pagination, ...filter });
           setSum(response.data.data?.sum);
@@ -109,7 +147,7 @@ export default function Affiliate() {
           );
         }}
         empty={<Empty />}
-      />
+      />*/}
     </div>
   );
 }