doc gpt V0.2

src/components/Layout/auth.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { useToast } from '@chakra-ui/react';
+import { getTokenLogin } from '@/api/user';
+import { useUserStore } from '@/store/user';
+import { useGlobalStore } from '@/store/global';
+import { useQuery } from '@tanstack/react-query';
+
+const unAuthPage: { [key: string]: boolean } = {
+  '/login': true,
+  '/chat': true
+};
+
+const Auth = ({ children }: { children: JSX.Element }) => {
+  const router = useRouter();
+  const toast = useToast({
+    title: '请先登录',
+    position: 'top',
+    status: 'warning'
+  });
+  const { userInfo, setUserInfo } = useUserStore();
+  const { setLoading } = useGlobalStore();
+
+  useQuery(
+    [router.pathname, userInfo],
+    () => {
+      setLoading(true);
+      if (unAuthPage[router.pathname] === true || userInfo) {
+        return setLoading(false);
+      } else {
+        return getTokenLogin();
+      }
+    },
+    {
+      onSuccess(user) {
+        if (user) {
+          setUserInfo(user);
+        }
+      },
+      onError(error) {
+        console.log(error);
+        router.push('/login');
+        toast();
+      },
+      onSettled() {
+        setLoading(false);
+      }
+    }
+  );
+
+  return userInfo || unAuthPage[router.pathname] === true ? <>{children}</> : null;
+};
+
+export default Auth;

src/components/Layout/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import Navbar from './navbar';
+import NavbarPhone from './navbarPhone';
+import { useRouter } from 'next/router';
+import { useScreen } from '@/hooks/useScreen';
+import { useLoading } from '@/hooks/useLoading';
+import Auth from './auth';
+import { useGlobalStore } from '@/store/global';
+
+const unShowLayoutRoute: { [key: string]: boolean } = {
+  '/login': true,
+  '/chat': true
+};
+
+const navbarList = [
+  {
+    label: '介绍',
+    icon: 'icon-gongzuotai-01',
+    link: '/',
+    activeLink: ['/']
+  },
+  {
+    label: '模型',
+    icon: 'icon-moxing',
+    link: '/model/list',
+    activeLink: ['/model/list', '/model/detail']
+  },
+  // {
+  //   label: '数据',
+  //   icon: 'icon-datafull',
+  //   link: '/training/dataList',
+  //   activeLink: ['/training/dataList']
+  // },
+  {
+    label: '账号',
+    icon: 'icon-yonghu-yuan',
+    link: '/number/setting',
+    activeLink: ['/number/setting']
+  }
+];
+
+const Layout = ({ children }: { children: JSX.Element }) => {
+  const { isPc } = useScreen();
+  const router = useRouter();
+  const { Loading } = useLoading({
+    defaultLoading: true
+  });
+  const { loading } = useGlobalStore();
+
+  return (
+    <>
+      {!unShowLayoutRoute[router.pathname] ? (
+        <Box minHeight={'100vh'} backgroundColor={'gray.100'}>
+          {isPc ? (
+            <>
+              <Box h={'100vh'} position={'fixed'} left={0} top={0} w={'80px'}>
+                <Navbar navbarList={navbarList} />
+              </Box>
+              <Box ml={'80px'} p={7}>
+                <Box maxW={'1100px'} m={'auto'}>
+                  <Auth>{children}</Auth>
+                </Box>
+              </Box>
+            </>
+          ) : (
+            <Box pt={'60px'}>
+              <Box
+                h={'60px'}
+                position={'fixed'}
+                top={0}
+                left={0}
+                right={0}
+                zIndex={100}
+                borderBottom={'1px solid rgba(0,0,0,0.1)'}
+              >
+                <NavbarPhone navbarList={navbarList} />
+              </Box>
+              <Box py={3} px={4}>
+                <Auth>{children}</Auth>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      ) : (
+        <Auth>
+          <>{children}</>
+        </Auth>
+      )}
+      {loading && <Loading />}
+    </>
+  );
+};
+
+export default Layout;

src/components/Layout/navbar.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import Icon from '../Icon';
+import styles from './style.module.scss';
+
+export enum NavbarTypeEnum {
+  normal = 'normal',
+  small = 'small'
+}
+
+const Navbar = ({
+  navbarList
+}: {
+  navbarList: {
+    label: string;
+    icon: string;
+    link: string;
+    activeLink: string[];
+  }[];
+}) => {
+  const router = useRouter();
+
+  return (
+    <Flex
+      flexDirection={'column'}
+      alignItems={'center'}
+      py={3}
+      backgroundColor={'white'}
+      h={'100%'}
+      w={'100%'}
+      boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
+      userSelect={'none'}
+    >
+      {/* logo */}
+      <Box pb={4}>
+        <Image src={'/logo.svg'} width={50} height={100} alt=""></Image>
+      </Box>
+      {/* 导航列表 */}
+      <Box flex={1}>
+        {navbarList.map((item) => (
+          <Flex
+            key={item.label}
+            mb={4}
+            flexDirection={'column'}
+            alignItems={'center'}
+            justifyContent={'center'}
+            onClick={() =>
+              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'
+                })}
+          >
+            <Icon
+              name={item.icon}
+              width={24}
+              height={24}
+              color={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
+            />
+            <Box mt={1}>{item.label}</Box>
+          </Flex>
+        ))}
+      </Box>
+      {/* 通知 icon */}
+      {/* <Flex className={styles.informIcon} mb={5} justifyContent={'center'}>
+        <Icon name={'icon-tongzhi'} width={28} height={28} color={'#718096'}></Icon>
+      </Flex> */}
+    </Flex>
+  );
+};
+
+export default Navbar;

src/components/Layout/navbarPhone.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Icon from '../Icon';
+import {
+  Flex,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  Box,
+  useDisclosure,
+  Button,
+  Image
+} from '@chakra-ui/react';
+
+const NavbarPhone = ({
+  navbarList
+}: {
+  navbarList: {
+    label: string;
+    icon: string;
+    link: string;
+    activeLink: string[];
+  }[];
+}) => {
+  const router = useRouter();
+
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  return (
+    <>
+      <Flex
+        alignItems={'center'}
+        h={'100%'}
+        justifyContent={'space-between'}
+        backgroundColor={'white'}
+        position={'relative'}
+        px={7}
+      >
+        <Box onClick={onOpen}>
+          <Icon name="icon-caidan" width={20} height={20}></Icon>
+        </Box>
+        {/* <Icon name="icon-tongzhi" width={20} height={20}></Icon> */}
+      </Flex>
+      <Drawer isOpen={isOpen} placement="left" size={'xs'} onClose={onClose}>
+        <DrawerOverlay />
+        <DrawerContent maxWidth={'60vw'}>
+          <DrawerBody p={4}>
+            <Box pb={4}>
+              <Image src={'/logo.svg'} w={'100%'} h={'70px'} pt={2} alt=""></Image>
+            </Box>
+            {navbarList.map((item) => (
+              <Flex
+                key={item.label}
+                mb={4}
+                alignItems={'center'}
+                justifyContent={'center'}
+                onClick={() => {
+                  router.push(item.link);
+                  onClose();
+                }}
+                cursor={'pointer'}
+                fontSize={'sm'}
+                h={'65px'}
+                borderRadius={'md'}
+                {...(item.activeLink.includes(router.pathname)
+                  ? {
+                      color: '#2B6CB0',
+                      backgroundColor: '#BEE3F8'
+                    }
+                  : {
+                      color: '#4A5568',
+                      backgroundColor: 'transparent'
+                    })}
+              >
+                <Icon
+                  name={item.icon}
+                  width={24}
+                  height={24}
+                  color={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>
+    </>
+  );
+};
+
+export default NavbarPhone;

src/components/Layout/style.module.scss

@@ -0,0 +1,6 @@
+.informIcon {
+  svg {
+    cursor: pointer;
+    margin: 0;
+  }
+}