feat: 完成代码编写

2025-08-08 23:07:54 -07:00
parent aead2ff68f
commit 2ee4121308
25 changed files with 222 additions and 70 deletions
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const SvgIcon = ({ name, ...props }) => {
+  const [Icon, setIcon] = useState(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    import(`public/svg-icon/${name}.svg`)
+      .then((module) => {
+        if (isMounted) {
+          setIcon(() => module.default);
+        }
+      })
+      .catch(() => {
+        if (isMounted) {
+          setIcon(null);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [name]);
+
+  if (!Icon) {
+    return null;
+  }
+
+  return <Icon {...props} />;
+};
+
+export default SvgIcon;
@@ -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>
@@ -1,8 +1,10 @@
 'use client';

+import SvgIcon from '@/components/SvgIcon.tsx';
 import useGlobalStore from '@/config/use-global';
 import { Logout } from '@/utils/common';
 import { useSidebar } from '@workspace/airo-ui/components/sidebar';
+import { useIsMobile } from '@workspace/airo-ui/hooks/use-mobile';
 import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
 import {
  DropdownMenu,
@@ -20,29 +22,30 @@ export function UserNav({ from = '' }: { from?: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const { toggleSidebar } = useSidebar();
+  const isMobile = useIsMobile();
  if (user) {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          {from === 'profile' ? (
            <div className='mb-3 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-1 pr-6'>
-              <Avatar className='h-[34px] w-[34px] sm:h-[52px] sm:w-[52px]'>
+              <Avatar className='h-[34px] w-[34px] md:h-[52px] md:w-[52px]'>
                <AvatarImage
                  alt={user?.avatar ?? ''}
                  src={user?.avatar ?? ''}
                  className='object-cover'
                />
-                <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold sm:text-[40px]'>
+                <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold md:text-[40px]'>
                  {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
                </AvatarFallback>
              </Avatar>
-              <div className='flex flex-1 items-center justify-between text-xs sm:text-base'>
+              <div className='flex flex-1 items-center justify-between text-xs md:text-base'>
                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
              </div>
              <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
            </div>
          ) : (
-            <Avatar className='h-14 w-14 cursor-pointer sm:h-16 sm:w-16'>
+            <Avatar className='h-14 w-14 cursor-pointer md:h-16 md:w-16'>
              <AvatarImage
                alt={user?.avatar ?? ''}
                src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
@@ -57,25 +60,28 @@ export function UserNav({ from = '' }: { from?: string }) {
        <DropdownMenuContent
          forceMount
          align='end'
-          side={from === 'profile' ? 'right' : undefined}
-          className='flex w-64 flex-col gap-1 rounded-[42px] p-3 sm:gap-3'
+          side={from === 'profile' ? (isMobile ? 'top' : 'right') : undefined}
+          className='flex w-[var(--sidebar-width)] flex-col gap-1 rounded-[42px] border-0 bg-transparent pl-[26px] pr-4 shadow-none md:w-64 md:gap-3 md:border md:bg-white md:p-3 md:shadow-md'
+          style={{
+            '--sidebar-width': '14rem',
+          }}
        >
-          <div className='flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
-            <Avatar className='h-[34px] w-[34px] sm:h-[52px] sm:w-[52px]'>
+          <div className='flex items-center justify-start gap-2 rounded-full bg-white p-1 md:bg-[#EAEAEA]'>
+            <Avatar className='h-[34px] w-[34px] md:h-[52px] md:w-[52px]'>
              <AvatarImage
                alt={user?.avatar ?? ''}
                src={user?.avatar ?? ''}
                className='object-cover'
              />
-              <AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-[18px] font-bold sm:text-2xl'>
+              <AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-[18px] font-bold md:text-2xl'>
                {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
              </AvatarFallback>
            </Avatar>
            <div className='flex flex-col space-y-0.5'>
-              <p className='text-xs font-medium leading-none sm:text-xl'>
+              <p className='text-xs font-medium leading-none md:text-xl'>
                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
              </p>
-              <p className='text-muted-foreground text-[10px] sm:text-xs'>
+              <p className='text-muted-foreground text-[10px] md:text-xs'>
                {user?.auth_methods?.[0]?.auth_identifier}
              </p>
            </div>
@@ -84,7 +90,7 @@ export function UserNav({ from = '' }: { from?: string }) {
            {
              title: 'profile',
              url: '/profile',
-              icon: 'uil:dashboard',
+              icon: 'profile',
            },
          ].map((item) => (
            <DropdownMenuItem
@@ -95,9 +101,9 @@ export function UserNav({ from = '' }: { from?: string }) {
                toggleSidebar();
                router.push(`${item.url}`);
              }}
-              className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white sm:text-xl'
+              className='flex cursor-pointer items-center gap-3 rounded-full bg-white px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white md:text-xl'
            >
-              <Icon className='!size-4 flex-none sm:!size-6' icon={item.icon!} />
+              <SvgIcon className='!size-4 flex-none md:!size-6' name={item.icon} />
              <span className='flex-grow truncate'>{t(item.title)}</span>
            </DropdownMenuItem>
          ))}
@@ -106,9 +112,14 @@ export function UserNav({ from = '' }: { from?: string }) {
              Logout();
              setUser();
            }}
-            className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white sm:text-xl'
+            className='flex cursor-pointer items-center gap-3 rounded-full bg-[#E22C2E] px-5 py-2 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-xl md:text-[#0F2C53]'
          >
-            <Icon className='!size-4 flex-none sm:!size-6' icon='uil:exit' />
+            <SvgIcon
+              className='!size-4 flex-none md:!size-6'
+              width='99'
+              height='100'
+              name={'exit'}
+            />
            <span className='flex-grow'>{t('logout')}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>