feat: new ui

src/components/Layout/navbar.tsx

@@ -1,78 +1,130 @@
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import Image from 'next/image';
+import React, { useMemo } from 'react';
+import { Box, Flex, Image, Tooltip } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import MyIcon from '../Icon';
+import { useUserStore } from '@/store/user';
+import { useChatStore } from '@/store/chat';
+
 export enum NavbarTypeEnum {
   normal = 'normal',
   small = 'small'
 }
 
-const Navbar = ({
-  navbarList
-}: {
-  navbarList: {
-    label: string;
-    icon: string;
-    link: string;
-    activeLink: string[];
-  }[];
-}) => {
+const Navbar = () => {
   const router = useRouter();
+  const { userInfo, lastModelId } = useUserStore();
+  const { lastChatModelId, lastChatId } = useChatStore();
+  const navbarList = useMemo(
+    () => [
+      {
+        label: '模型',
+        icon: 'model',
+        link: `/model?modelId=${lastModelId}`,
+        activeLink: ['/model']
+      },
+      {
+        label: '聊天',
+        icon: 'chat',
+        link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
+        activeLink: ['/chat']
+      },
+
+      {
+        label: '共享',
+        icon: 'shareMarket',
+        link: '/model/share',
+        activeLink: ['/model/share']
+      },
+      {
+        label: '邀请',
+        icon: 'promotion',
+        link: '/promotion',
+        activeLink: ['/promotion']
+      },
+      {
+        label: '开发',
+        icon: 'develop',
+        link: '/openapi',
+        activeLink: ['/openapi']
+      },
+      {
+        label: '账号',
+        icon: 'user',
+        link: '/number',
+        activeLink: ['/number']
+      }
+    ],
+    [lastChatId, lastChatModelId, lastModelId]
+  );
 
   return (
     <Flex
       flexDirection={'column'}
       alignItems={'center'}
-      py={3}
-      backgroundColor={'white'}
+      pt={6}
+      backgroundColor={'#465069'}
       h={'100%'}
       w={'100%'}
       boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
       userSelect={'none'}
     >
       {/* logo */}
-      <Box pb={4}>
-        <Image src={'/icon/logo.png'} width={'35'} height={'35'} alt=""></Image>
+      <Box
+        mb={5}
+        border={'2px solid #fff'}
+        borderRadius={'36px'}
+        overflow={'hidden'}
+        cursor={'pointer'}
+        onClick={() => router.push('/number')}
+      >
+        <Image
+          src={userInfo?.avatar || '/icon/human.png'}
+          objectFit={'contain'}
+          w={'36px'}
+          h={'36px'}
+          alt=""
+        />
       </Box>
       {/* 导航列表 */}
       <Box flex={1}>
         {navbarList.map((item) => (
-          <Flex
+          <Tooltip
+            label={item.label}
             key={item.label}
-            mb={4}
-            flexDirection={'column'}
-            alignItems={'center'}
-            justifyContent={'center'}
-            onClick={() => {
-              if (item.link === router.pathname) return;
-              router.push(item.link, undefined, {
-                shallow: true
-              });
-            }}
-            cursor={'pointer'}
-            fontSize={'sm'}
-            w={'60px'}
-            h={'70px'}
-            borderRadius={'sm'}
-            {...(item.activeLink.includes(router.pathname)
-              ? {
-                  color: '#2B6CB0',
-                  backgroundColor: '#BEE3F8'
-                }
-              : {
-                  color: '#4A5568',
-                  backgroundColor: 'transparent'
-                })}
+            placement={'right'}
+            openDelay={100}
+            gutter={-10}
           >
-            <MyIcon
-              name={item.icon as any}
-              width={'24px'}
-              height={'24px'}
-              fill={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
-            />
-            <Box mt={1}>{item.label}</Box>
-          </Flex>
+            <Flex
+              mb={3}
+              flexDirection={'column'}
+              alignItems={'center'}
+              justifyContent={'center'}
+              onClick={() => {
+                if (item.link === router.asPath) return;
+                router.push(item.link, undefined, {
+                  shallow: true
+                });
+              }}
+              cursor={'pointer'}
+              w={'60px'}
+              h={'45px'}
+              _hover={{
+                color: '#ffffff'
+              }}
+              {...(item.activeLink.includes(router.pathname)
+                ? {
+                    color: '#ffffff ',
+                    backgroundImage: 'linear-gradient(270deg,#4e83fd,#3370ff)'
+                  }
+                : {
+                    color: '#9096a5',
+                    backgroundColor: 'transparent'
+                  })}
+            >
+              <MyIcon name={item.icon as any} width={'22px'} height={'22px'} />
+            </Flex>
+          </Tooltip>
         ))}
       </Box>
     </Flex>