feat: 完成代码编写

apps/user/components/affiliate/components/AffiliateDialog.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Empty } from '@/components/empty';
+import { queryUserAffiliateList } from '@/services/user/user';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/airo-ui/components/dialog';
+import { ProList } from '@workspace/ui/custom-components/pro-list/pro-list';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useImperativeHandle, useState } from 'react';
+
+export interface AffiliateDialogRef {
+  open: () => void;
+  close: () => void;
+}
+
+interface AffiliateDialogProps {
+  ref?: React.Ref<AffiliateDialogRef>;
+}
+
+export const AffiliateDialog = ({ ref }: AffiliateDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [sum, setSum] = useState<number>();
+  const t = useTranslations('affiliate');
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
+    },
+    close: () => {
+      setOpen(false);
+    },
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className='overflow-y-auto sm:max-w-[800px]'>
+        <DialogHeader>
+          <DialogTitle className='text-left text-2xl sm:text-4xl'>{t('inviteRecords')}</DialogTitle>
+        </DialogHeader>
+
+        <div className='mt-6'>
+          <ProList<API.UserAffiliate, Record<string, unknown>>
+            request={async (pagination, filter) => {
+              const response = await queryUserAffiliateList({ ...pagination, ...filter });
+              setSum(response.data.data?.sum);
+              return {
+                list: response.data.data?.list || [],
+                total: response.data.data?.total || 0,
+              };
+            }}
+            renderItem={(invite) => {
+              return (
+                <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
+                  <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>
+              );
+            }}
+            empty={<Empty />}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/user/components/affiliate/index.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+import {
+  AffiliateDialog,
+  AffiliateDialogRef,
+} from '@/components/affiliate/components/AffiliateDialog';
 import { Display } from '@/components/display';
 import { Empty } from '@/components/empty';
 import useGlobalStore from '@/config/use-global';
@@ -10,7 +14,7 @@ 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';
+import { useRef, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast } from 'sonner';
 
@@ -36,32 +40,50 @@ export default function Affiliate() {
       return response.data.data?.list || [];
     },
   });
-
+  const dialogRef = useRef<AffiliateDialogRef>(null);
   return (
-    <div className='grid grid-cols-2 gap-4'>
+    <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
       <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 className={'sm:mb-6'}>
+            <div className={'font-bold sm:text-xl'}>{t('totalCommission')}</div>
+            <div className={'text-xs font-light sm:text-[15px]'}>
+              佣金金额，邀请成功后自动转入钱包余额
+            </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]'>
+          <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='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'>
                 <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>
+            <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'));
+                      }
+                    }}
+                  >
+                    <Button variant='secondary' size='sm' className='px-0 sm:hidden'>
+                      <Copy className='h-4 w-4' />
+                    </Button>
+                  </CopyToClipboard>
+                </span>
               </p>
-              <p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
+              <p className='flex justify-between text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <span> {user?.refer_code}</span>
                 <CopyToClipboard
                   text={`${location?.origin}/?invite=${user?.refer_code}`}
@@ -71,7 +93,7 @@ export default function Affiliate() {
                     }
                   }}
                 >
-                  <Button variant='secondary' size='sm' className='gap-2'>
+                  <Button variant='secondary' size='sm' className='hidden gap-2 sm:block'>
                     <Copy className='h-4 w-4' />
                   </Button>
                 </CopyToClipboard>
@@ -82,11 +104,13 @@ export default function Affiliate() {
       </Card>
       <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>
+          <h3 className='font-medium text-[#666666] sm:text-xl'>邀请记录</h3>
+          <span className='text-sm text-[#225BA9]' onClick={() => dialogRef.current.open()}>
+            更多
+          </span>
         </div>
 
-        <div className='space-y-4'>
+        <div className='space-y-2 sm:space-y-4'>
           {inviteList?.length ? (
             <div className='relative space-y-3'>
               <div
@@ -96,7 +120,7 @@ export default function Affiliate() {
               ></div>
               {inviteList?.map((invite) => {
                 return (
-                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2'>
+                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
                     <div>
                       <div className={'text-[#225BA9]'}>用户识别代码</div>
                       <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
@@ -116,38 +140,7 @@ export default function Affiliate() {
           )}
         </div>
       </Card>
-      {/*<ProList<API.UserAffiliate, Record<string, unknown>>
-        request={async (pagination, filter) => {
-          const response = await queryUserAffiliateList({ ...pagination, ...filter });
-          setSum(response.data.data?.sum);
-          return {
-            list: response.data.data?.list || [],
-            total: response.data.data?.total || 0,
-          };
-        }}
-        header={{
-          title: t('inviteRecords'),
-        }}
-        renderItem={(item) => {
-          return (
-            <Card className='overflow-hidden'>
-              <CardContent className='p-3 text-sm'>
-                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col'>
-                  <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('userIdentifier')}</span>
-                    <span>{item.identifier}</span>
-                  </li>
-                  <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('registrationTime')}</span>
-                    <time>{formatDate(item.registered_at)}</time>
-                  </li>
-                </ul>
-              </CardContent>
-            </Card>
-          );
-        }}
-        empty={<Empty />}
-      />*/}
+      <AffiliateDialog ref={dialogRef} />
     </div>
   );
 }