feat: 完成代码编写

apps/user/components/affiliate/index.tsx

@@ -6,13 +6,13 @@ import {
 } from '@/components/affiliate/components/AffiliateDialog';
 import { Display } from '@/components/display';
 import { Empty } from '@/components/empty';
+import SvgIcon from '@/components/SvgIcon';
 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 } from '@workspace/ui/components/card';
 import { formatDate } from '@workspace/ui/utils';
-import { Copy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -58,7 +58,7 @@ export default function Affiliate() {
           <div className={'mb-3 text-xl font-bold text-[#091B33] sm:text-[32px]'}>
             历史推荐用户：7
           </div>
-          <div className={'grid grid-cols-2 gap-[10px] sm:gap-5'}>
+          <div className={'grid grid-cols-2 gap-[10px] sm:grid-cols-1 sm:gap-5 lg:grid-cols-2'}>
             <div className='rounded-[20px] bg-[#EAEAEA] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
               <p className='font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>佣金总额</p>
               <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
@@ -67,21 +67,23 @@ export default function Affiliate() {
             </div>
             <div className='rounded-[20px] border-2 border-[#D9D9D9] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
               <p className='flex justify-between font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
-                <span className={'flex'}>
-                  返佣邀请码
-                  <CopyToClipboard
-                    text={`${location?.origin}/?invite=${user?.refer_code}`}
-                    onCopy={(text, result) => {
-                      if (result) {
-                        toast.success(t('copySuccess'));
-                      }
-                    }}
+                返佣邀请码
+                <CopyToClipboard
+                  text={`${location?.origin}/?invite=${user?.refer_code}`}
+                  onCopy={(text, result) => {
+                    if (result) {
+                      toast.success(t('copySuccess'));
+                    }
+                  }}
+                >
+                  <Button
+                    variant='link'
+                    size='sm'
+                    className='h-auto p-0 px-0 sm:hidden [&_svg]:size-5'
                   >
-                    <Button variant='secondary' size='sm' className='px-0 sm:hidden'>
-                      <Copy className='h-4 w-4' />
-                    </Button>
-                  </CopyToClipboard>
-                </span>
+                    <SvgIcon name={'copy'}></SvgIcon>
+                  </Button>
+                </CopyToClipboard>
               </p>
               <p className='flex justify-between text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <span> {user?.refer_code}</span>
@@ -93,8 +95,12 @@ export default function Affiliate() {
                     }
                   }}
                 >
-                  <Button variant='secondary' size='sm' className='hidden gap-2 sm:block'>
-                    <Copy className='h-4 w-4' />
+                  <Button
+                    variant='link'
+                    size='sm'
+                    className='hidden gap-2 p-0 sm:block [&_svg]:size-5'
+                  >
+                    <SvgIcon name={'copy'}></SvgIcon>
                   </Button>
                 </CopyToClipboard>
               </p>
@@ -105,7 +111,10 @@ export default function Affiliate() {
       <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='font-medium text-[#666666] sm:text-xl'>邀请记录</h3>
-          <span className='text-sm text-[#225BA9]' onClick={() => dialogRef.current.open()}>
+          <span
+            className='cursor-pointer text-sm text-[#225BA9]'
+            onClick={() => dialogRef.current.open()}
+          >
             更多
           </span>
         </div>