feat: new ui

2023-05-04 23:30:59 +08:00
parent 4d043e0e46
commit 014fb504a4
133 changed files with 2426 additions and 1696 deletions
--- a/src/components/Layout/auth.tsx
+++ b/src/components/Layout/auth.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import { useToast } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
-import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';

 const unAuthPage: { [key: string]: boolean } = {
@@ -19,15 +18,13 @@ const Auth = ({ children }: { children: JSX.Element }) => {
    status: 'warning'
  });
  const { userInfo, initUserInfo } = useUserStore();
-  const { setLoading } = useGlobalStore();

  useQuery(
-    [router.pathname, userInfo],
+    [router.pathname],
    () => {
      if (unAuthPage[router.pathname] === true || userInfo) {
-        return setLoading(false);
+        return null;
      } else {
-        setLoading(true);
        return initUserInfo();
      }
    },
@@ -38,9 +35,6 @@ const Auth = ({ children }: { children: JSX.Element }) => {
          `/login?lastRoute=${encodeURIComponent(location.pathname + location.search)}`
        );
        toast();
-      },
-      onSettled() {
-        setLoading(false);
      }
    }
  );
--- a/src/components/Layout/index.tsx
+++ b/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)
+  };
+};
--- a/src/components/Layout/navbar.tsx
+++ b/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>
--- a/src/components/Layout/navbarPhone.tsx
+++ b/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>
    </>
  );
 };