145 lines
4.0 KiB
TypeScript
145 lines
4.0 KiB
TypeScript
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={'1300px'} m={'auto'} alignItems={'center'}>
|
|
<Avatar src="/icon/logo.svg" 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;
|