feat: new ui

src/components/Layout/navbarPhone.tsx

@@ -1,32 +1,41 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import MyIcon from '../Icon';
-import {
-  Flex,
-  Drawer,
-  DrawerBody,
-  DrawerFooter,
-  DrawerOverlay,
-  DrawerContent,
-  Box,
-  useDisclosure,
-  Button,
-  Image
-} from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
+import { useChatStore } from '@/store/chat';
 
-const NavbarPhone = ({
-  navbarList
-}: {
-  navbarList: {
-    label: string;
-    icon: string;
-    link: string;
-    activeLink: string[];
-  }[];
-}) => {
+const NavbarPhone = () => {
   const router = useRouter();
-
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { lastChatModelId, lastChatId } = useChatStore();
+  const navbarList = useMemo(
+    () => [
+      {
+        label: '模型',
+        icon: 'tabbarModel',
+        link: `/model`,
+        activeLink: ['/model']
+      },
+      {
+        label: '聊天',
+        icon: 'tabbarChat',
+        link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
+        activeLink: ['/chat']
+      },
+      {
+        label: '发现',
+        icon: 'tabbarMore',
+        link: '/tools',
+        activeLink: ['/tools']
+      },
+      {
+        label: '我',
+        icon: 'tabbarMe',
+        link: '/number',
+        activeLink: ['/number']
+      }
+    ],
+    [lastChatId, lastChatModelId]
+  );
 
   return (
     <>
@@ -36,61 +45,51 @@ const NavbarPhone = ({
         justifyContent={'space-between'}
         backgroundColor={'white'}
         position={'relative'}
-        px={7}
+        px={10}
       >
-        <Box onClick={onOpen}>
-          <MyIcon name="menu" width={'20px'} height={'20px'} color={'blackAlpha.700'}></MyIcon>
-        </Box>
+        {navbarList.map((item) => (
+          <Flex
+            position={'relative'}
+            key={item.link}
+            cursor={'pointer'}
+            borderRadius={'md'}
+            textAlign={'center'}
+            alignItems={'center'}
+            h={'100%'}
+            px={3}
+            {...(item.activeLink.includes(router.asPath)
+              ? {
+                  color: '#7089f1'
+                }
+              : {
+                  color: 'myGray.500'
+                })}
+            _after={
+              item.activeLink.includes(router.asPath)
+                ? {
+                    content: '""',
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%,-50%)',
+                    borderRadius: '50%',
+                    w: '18px',
+                    h: '18px',
+                    bg: ' #6782f1',
+                    filter: 'blur(10px)',
+                    boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.25)'
+                  }
+                : {}
+            }
+            onClick={() => {
+              if (item.link === router.asPath) return;
+              router.push(item.link);
+            }}
+          >
+            <MyIcon name={item.icon as any} width={'20px'} height={'20px'} />
+          </Flex>
+        ))}
       </Flex>
-      <Drawer isOpen={isOpen} placement="left" size={'xs'} onClose={onClose}>
-        <DrawerOverlay />
-        <DrawerContent maxWidth={'50vw'}>
-          <DrawerBody p={4}>
-            <Box py={4}>
-              <Image src={'/icon/logo.png'} margin={'auto'} w={'35'} h={'35'} alt=""></Image>
-            </Box>
-            {navbarList.map((item) => (
-              <Flex
-                key={item.label}
-                mb={5}
-                alignItems={'center'}
-                justifyContent={'center'}
-                onClick={() => {
-                  if (item.link === router.pathname) return;
-                  router.push(item.link);
-                  onClose();
-                }}
-                cursor={'pointer'}
-                h={'60px'}
-                borderRadius={'md'}
-                {...(item.activeLink.includes(router.pathname)
-                  ? {
-                      color: '#2B6CB0',
-                      backgroundColor: '#BEE3F8'
-                    }
-                  : {
-                      color: '#4A5568',
-                      backgroundColor: 'transparent'
-                    })}
-              >
-                <MyIcon
-                  name={item.icon as any}
-                  width={'24px'}
-                  height={'24px'}
-                  fill={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
-                />
-                <Box ml={5}>{item.label}</Box>
-              </Flex>
-            ))}
-          </DrawerBody>
-
-          <DrawerFooter px={2}>
-            <Button variant="outline" onClick={onClose}>
-              Cancel
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
     </>
   );
 };