homepage

2023-08-08 13:24:05 +08:00
parent 37fe67dc81
commit 3cf38930eb
29 changed files with 719 additions and 258 deletions
--- a/client/src/pages/components/Navbar.tsx
+++ b/client/src/pages/components/Navbar.tsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Flex, Box, type BoxProps, Button, useDisclosure } from '@chakra-ui/react';
+import { feConfigs } from '@/store/static';
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import Avatar from '@/components/Avatar';
+import CommunityModal from '@/components/CommunityModal';
+import { useGlobalStore } from '@/store/global';
+import MyIcon from '@/components/Icon';
+
+const Navbar = () => {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [scrollTop, setScrollTop] = useState(0);
+  const {
+    isOpen: isOpenCommunity,
+    onOpen: onOpenCommunity,
+    onClose: onCloseCommunity
+  } = useDisclosure();
+  const { isOpen: isOpenMenu, onOpen: onOpenMenu, onClose: onCloseMenu } = useDisclosure();
+  const { isPc } = useGlobalStore();
+  const menuList = useMemo(
+    () => [
+      // { label: t('home.Features'), key: 'features', onClick: () => {} },
+      {
+        label: t('home.Community'),
+        key: 'community',
+        onClick: () => {
+          onOpenCommunity();
+        }
+      },
+      {
+        label: t('home.Docs'),
+        key: 'docs',
+        onClick: () => {
+          window.open('https://doc.fastgpt.run/docs/intro');
+        }
+      }
+    ],
+    [onOpenCommunity, t]
+  );
+  const bgOpacity = useMemo(() => {
+    const rate = scrollTop / 120;
+    if (rate > 0.7) {
+      return 0.7;
+    }
+    return rate;
+  }, [scrollTop]);
+
+  const menuStyles: BoxProps = {
+    mr: 4,
+    px: 5,
+    py: 2,
+    cursor: 'pointer',
+    transition: '0.5s',
+    borderRadius: 'xl',
+    fontSize: 'lg',
+    _hover: {
+      bg: 'myGray.100'
+    }
+  };
+
+  useEffect(() => {
+    const scrollListen = (e: any) => {
+      setScrollTop(e?.target?.scrollTop);
+    };
+    const dom = document.getElementById('home');
+    if (!dom) return;
+
+    dom.addEventListener('scroll', scrollListen);
+
+    return () => {
+      dom.removeEventListener('scroll', scrollListen);
+    };
+  }, []);
+
+  return (
+    <Box
+      bg={`rgba(255,255,255,${bgOpacity})`}
+      backdropFilter={'blur(24px)'}
+      py={[3, 5]}
+      px={5}
+      transition={'0.4s ease'}
+      h={isOpenMenu ? '100vh' : 'auto'}
+    >
+      <Flex maxW={'1000px'} m={'auto'} alignItems={'center'}>
+        <Avatar src="/icon/logo.png" w={['30px', '38px']} />
+        <Box
+          className="textlg"
+          fontSize={['3xl', '4xl']}
+          fontWeight={'bold'}
+          ml={3}
+          fontStyle={'italic'}
+        >
+          {feConfigs?.systemTitle}
+        </Box>
+        <Box flex={1} />
+        {isPc ? (
+          <>
+            {menuList.map((item) => (
+              <Box key={item.key} {...menuStyles} onClick={item.onClick}>
+                {item.label}
+              </Box>
+            ))}
+            <Box px={4} color={'myGray.500'}>
+              |
+            </Box>
+            <Box {...menuStyles} onClick={() => router.push('/login')}>
+              {t('home.Login')}
+            </Box>
+            <Button ml={4} h={'36px'} borderRadius={'3xl'} onClick={() => router.push('/app/list')}>
+              {t('home.Start Now')}
+            </Button>
+          </>
+        ) : (
+          <MyIcon
+            name={isOpenMenu ? 'closeLight' : 'menu'}
+            w={'20px'}
+            onClick={() => (isOpenMenu ? onCloseMenu() : onOpenMenu())}
+          />
+        )}
+      </Flex>
+      {isOpenMenu && !isPc && (
+        <Box mt={'15vh'} ml={'10vw'}>
+          {menuList.map((item) => (
+            <Box key={item.key} mb={8} onClick={item.onClick}>
+              {item.label}
+            </Box>
+          ))}
+          <Box bg={'myGray.500'} h={'1.5px'} w={'20px'} mb={8} />
+          <Box mb={10} onClick={() => router.push('/login')}>
+            {t('home.Login')}
+          </Box>
+          <Button h={'36px'} borderRadius={'3xl'} onClick={() => router.push('/app/list')}>
+            {t('home.Start Now')}
+          </Button>
+        </Box>
+      )}
+      {isOpenCommunity && <CommunityModal onClose={onCloseCommunity} />}
+    </Box>
+  );
+};
+
+export default Navbar;