feat: new ui

src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Box, useColorMode, Flex } from '@chakra-ui/react';
 import Navbar from './navbar';
 import NavbarPhone from './navbarPhone';
@@ -8,53 +8,12 @@ import { useLoading } from '@/hooks/useLoading';
 import Auth from './auth';
 import { useGlobalStore } from '@/store/global';
 
-const unShowLayoutRoute: { [key: string]: boolean } = {
-  '/login': true,
-  '/chat': true
+const pcUnShowLayoutRoute: Record<string, boolean> = {
+  '/login': true
 };
 
-const navbarList = [
-  {
-    label: '介绍',
-    icon: 'board',
-    link: '/',
-    activeLink: ['/']
-  },
-  {
-    label: '共享',
-    icon: 'shareMarket',
-    link: '/model/share',
-    activeLink: ['/model/share']
-  },
-  {
-    label: '模型',
-    icon: 'model',
-    link: '/model/list',
-    activeLink: ['/model/list', '/model/detail']
-  },
-
-  {
-    label: '账号',
-    icon: 'user',
-    link: '/number/setting',
-    activeLink: ['/number/setting']
-  },
-  {
-    label: '邀请',
-    icon: 'promotion',
-    link: '/promotion',
-    activeLink: ['/promotion']
-  },
-  {
-    label: '开发',
-    icon: 'develop',
-    link: '/openapi',
-    activeLink: ['/openapi']
-  }
-];
-
-const Layout = ({ children }: { children: JSX.Element }) => {
-  const { isPc } = useScreen();
+const Layout = ({ children, isPcDevice }: { children: JSX.Element; isPcDevice: boolean }) => {
+  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
   const router = useRouter();
   const { colorMode, setColorMode } = useColorMode();
   const { Loading } = useLoading({ defaultLoading: true });
@@ -66,40 +25,60 @@ const Layout = ({ children }: { children: JSX.Element }) => {
     }
   }, [colorMode, router.pathname, setColorMode]);
 
+  const RenderPc = useCallback(
+    () =>
+      pcUnShowLayoutRoute[router.pathname] ? (
+        <Auth>{children}</Auth>
+      ) : (
+        <>
+          <Box h={'100%'} position={'fixed'} left={0} top={0} w={'60px'}>
+            <Navbar />
+          </Box>
+          <Box h={'100%'} ml={'60px'} overflow={'overlay'}>
+            <Auth>{children}</Auth>
+          </Box>
+        </>
+      ),
+    [children, router.pathname]
+  );
+
+  const RenderPhone = useCallback(() => {
+    const phoneUnShowLayoutRoute: Record<string, boolean> = {
+      '/login': true
+    };
+
+    const isChatPage =
+      router.pathname === '/chat' && Object.values(router.query).join('').length !== 0;
+
+    if (phoneUnShowLayoutRoute[router.pathname] || isChatPage) {
+      return <Auth>{children}</Auth>;
+    }
+    return (
+      <Flex h={'100%'} flexDirection={'column'}>
+        <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+          <Auth>{children}</Auth>
+        </Box>
+        <Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
+          <NavbarPhone />
+        </Box>
+      </Flex>
+    );
+  }, [children, router]);
+
   return (
     <>
-      {!unShowLayoutRoute[router.pathname] ? (
-        <Box h={'100%'} backgroundColor={'gray.100'} overflow={'auto'}>
-          {isPc ? (
-            <>
-              <Box h={'100%'} position={'fixed'} left={0} top={0} w={'80px'}>
-                <Navbar navbarList={navbarList} />
-              </Box>
-              <Box h={'100%'} ml={'80px'}>
-                <Box h={'100%'} py={7} px={'5vw'} m={'auto'} overflowY={'auto'}>
-                  <Auth>{children}</Auth>
-                </Box>
-              </Box>
-            </>
-          ) : (
-            <Flex h={'100%'} flexDirection={'column'}>
-              <Box h={'60px'} borderBottom={'1px solid rgba(0,0,0,0.1)'}>
-                <NavbarPhone navbarList={navbarList} />
-              </Box>
-              <Box flex={'1 0 0'} h={0} py={3} px={4} overflowY={'auto'}>
-                <Auth>{children}</Auth>
-              </Box>
-            </Flex>
-          )}
-        </Box>
-      ) : (
-        <Auth>
-          <>{children}</>
-        </Auth>
-      )}
+      <Box h={'100%'} overflow={'overlay'} bg={'gray.100'}>
+        {isPc ? <RenderPc /> : <RenderPhone />}
+      </Box>
       {loading && <Loading />}
     </>
   );
 };
 
 export default Layout;
+
+Layout.getInitialProps = ({ req }: any) => {
+  return {
+    isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
+  };
+};