mirror of
https://github.com/labring/FastGPT.git
synced 2025-08-03 05:19:51 +00:00
monorepo packages (#344)
This commit is contained in:
Archer
102
projects/app/src/pages/components/Ability.tsx
Normal file
102
projects/app/src/pages/components/Ability.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { Box, Image, BoxProps, Grid, useTheme } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { feConfigs } from '@/store/static';
|
||||
import { MyImage } from '@/components/MyImage';
|
||||
|
||||
const Ability = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const CardStyles: BoxProps = {
|
||||
pt: 4,
|
||||
borderRadius: 'xl',
|
||||
overflow: 'hidden',
|
||||
border: theme.borders.base
|
||||
};
|
||||
const TitleStyles: BoxProps = {
|
||||
px: 4,
|
||||
fontSize: ['xl', '30px'],
|
||||
fontWeight: 'bold'
|
||||
};
|
||||
const DescStyles: BoxProps = {
|
||||
px: 4,
|
||||
mt: 2,
|
||||
mb: 5,
|
||||
fontSize: ['sm', 'lg'],
|
||||
whiteSpace: 'pre-wrap'
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
className="textlg"
|
||||
py={['30px', '60px']}
|
||||
textAlign={'center'}
|
||||
fontSize={['22px', '30px']}
|
||||
fontWeight={'bold'}
|
||||
>
|
||||
{t('home.FastGPT Ability', { title: feConfigs.systemTitle })}
|
||||
</Box>
|
||||
<Grid px={[5, 0]} minH={'400px'} gridTemplateColumns={['1fr', `500px 1fr`]} gridGap={6}>
|
||||
<Box
|
||||
{...CardStyles}
|
||||
backgroundImage={'linear-gradient(to bottom right, #00A9A6 0%, #33BABB 100%)'}
|
||||
>
|
||||
<Box {...TitleStyles} color={'white'}>
|
||||
{t('home.AI Assistant')}
|
||||
</Box>
|
||||
<Box {...DescStyles} color={'rgba(255,255,255,0.9)'}>
|
||||
{t('home.AI Assistant Desc')}
|
||||
</Box>
|
||||
<MyImage src="/imgs/home/ai_assiatant.png" alt={''} transform={'translateX(20px)'} />
|
||||
</Box>
|
||||
<Box
|
||||
{...CardStyles}
|
||||
pb={4}
|
||||
backgroundImage={'linear-gradient(120deg, #3370ff 0%, #4e83fd 100%)'}
|
||||
>
|
||||
<Box {...TitleStyles} color={'white'}>
|
||||
{t('home.Dateset')}
|
||||
</Box>
|
||||
<Box {...DescStyles} color={'rgba(255,255,255,0.9)'}>
|
||||
{t('home.Dateset Desc')}
|
||||
</Box>
|
||||
<MyImage src="/imgs/home/dataset_import.png" w={'90%'} mx={'auto'} borderRadius={'lg'} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid
|
||||
mt={6}
|
||||
px={[5, 0]}
|
||||
minH={'400px'}
|
||||
gridTemplateColumns={['1fr', `1fr 500px`]}
|
||||
gridGap={6}
|
||||
>
|
||||
<Box {...CardStyles} backgroundImage={'linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)'}>
|
||||
<Box {...TitleStyles}>{t('home.Advanced Settings')}</Box>
|
||||
<Box {...DescStyles} fontSize={['sm', 'md']}>
|
||||
{t('home.Advanced Settings Desc')}
|
||||
</Box>
|
||||
<MyImage src="/imgs/home/advanced_settings.png" alt={''} w={'100%'} />
|
||||
</Box>
|
||||
<Box
|
||||
{...CardStyles}
|
||||
pb={4}
|
||||
backgroundImage={'linear-gradient(to right, #FDCBB1 0%, #FEE5D8 100%)'}
|
||||
>
|
||||
<Box {...TitleStyles}>{t('home.OpenAPI')}</Box>
|
||||
<Box {...DescStyles}>{t('home.OpenAPI Desc')}</Box>
|
||||
<MyImage
|
||||
src="/imgs/home/openapi.png"
|
||||
alt={''}
|
||||
w={'90%'}
|
||||
mx={'auto'}
|
||||
borderRadius={'lg'}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ability;
|
||||
108
projects/app/src/pages/components/Choice.tsx
Normal file
108
projects/app/src/pages/components/Choice.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { Box, Image, Flex, Grid, useTheme } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import MyTooltip from '@/components/MyTooltip';
|
||||
import { feConfigs } from '@/store/static';
|
||||
|
||||
const Choice = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const list = [
|
||||
...(feConfigs?.show_git
|
||||
? [
|
||||
{
|
||||
icon: '/imgs/home/icon_1.svg',
|
||||
title: t('home.Choice Open'),
|
||||
desc: t('home.Choice Open Desc', { title: feConfigs?.systemTitle }),
|
||||
tooltip: '前往 GitHub',
|
||||
onClick: () => window.open('https://github.com/labring/FastGPT', '_blank')
|
||||
}
|
||||
]
|
||||
: [
|
||||
{
|
||||
icon: '/imgs/home/icon_0.svg',
|
||||
title: t('home.Choice Fast'),
|
||||
desc: t('home.Choice Fast Desc', { title: feConfigs?.systemTitle })
|
||||
}
|
||||
]),
|
||||
{
|
||||
icon: '/imgs/home/icon_2.svg',
|
||||
title: t('home.Choice QA'),
|
||||
desc: t('home.Choice QA Desc')
|
||||
},
|
||||
{
|
||||
icon: '/imgs/home/icon_3.svg',
|
||||
title: t('home.Choice Visual'),
|
||||
desc: t('home.Choice Visual Desc')
|
||||
},
|
||||
{
|
||||
icon: '/imgs/home/icon_4.svg',
|
||||
title: t('home.Choice Extension'),
|
||||
desc: t('home.Choice Extension Desc')
|
||||
},
|
||||
{
|
||||
icon: '/imgs/home/icon_5.svg',
|
||||
title: t('home.Choice Debug'),
|
||||
desc: t('home.Choice Debug Desc')
|
||||
},
|
||||
{
|
||||
icon: '/imgs/home/icon_6.svg',
|
||||
title: t('home.Choice Models'),
|
||||
desc: t('home.Choice Models Desc')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
className="textlg"
|
||||
py={['30px', '60px']}
|
||||
textAlign={'center'}
|
||||
fontSize={['22px', '30px']}
|
||||
fontWeight={'bold'}
|
||||
>
|
||||
{t('home.Why FastGPT', { title: feConfigs?.systemTitle })}
|
||||
</Box>
|
||||
<Grid px={[5, 0]} gridTemplateColumns={['1fr', `1fr 1fr`, 'repeat(3,1fr)']} gridGap={6}>
|
||||
{list.map((item) => (
|
||||
<MyTooltip key={item.title} label={item.tooltip}>
|
||||
<Flex
|
||||
alignItems={'flex-start'}
|
||||
border={theme.borders.md}
|
||||
borderRadius={'lg'}
|
||||
p={'40px'}
|
||||
transition={'0.1s'}
|
||||
cursor={'default'}
|
||||
_hover={{
|
||||
bg: 'rgba(255,255,255,0.8)'
|
||||
}}
|
||||
onClick={() => item.onClick?.()}
|
||||
>
|
||||
<Flex
|
||||
flex={'0 0 48px'}
|
||||
h={'48px'}
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
boxShadow={theme.shadows.base}
|
||||
borderRadius={'14px'}
|
||||
>
|
||||
<Image src={item.icon} w={'28px'} alt={''} loading={'lazy'} />
|
||||
</Flex>
|
||||
<Box ml={5}>
|
||||
<Box fontSize={['lg', '2xl']} fontWeight={'bold'} color={'myGray.900'}>
|
||||
{item.title}
|
||||
</Box>
|
||||
<Box mt={1} fontSize={['md', 'lg']}>
|
||||
{item.desc}
|
||||
</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
</MyTooltip>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Choice;
|
||||
123
projects/app/src/pages/components/Footer.tsx
Normal file
123
projects/app/src/pages/components/Footer.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Box, Flex, useDisclosure } from '@chakra-ui/react';
|
||||
import { feConfigs } from '@/store/static';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Avatar from '@/components/Avatar';
|
||||
import { useRouter } from 'next/router';
|
||||
import CommunityModal from '@/components/CommunityModal';
|
||||
|
||||
const Footer = () => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const list = useMemo(
|
||||
() => [
|
||||
{
|
||||
label: t('home.Footer Product'),
|
||||
child: [
|
||||
{
|
||||
label: t('home.Footer FastGPT Cloud', { title: feConfigs.systemTitle }),
|
||||
onClick: () => {
|
||||
router.push('/app/list');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Sealos',
|
||||
onClick: () => {
|
||||
window.open('https://github.com/labring/sealos', '_blank');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Laf',
|
||||
onClick: () => {
|
||||
window.open('https://github.com/labring/laf', '_blank');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: t('home.Footer Developer'),
|
||||
child: [
|
||||
{
|
||||
label: t('home.Footer Git'),
|
||||
onClick: () => {
|
||||
window.open('https://github.com/labring/FastGPT', '_blank');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('home.Footer Docs'),
|
||||
onClick: () => {
|
||||
window.open('https://doc.fastgpt.run/docs/intro', '_blank');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: t('home.Footer Support'),
|
||||
child: [
|
||||
{
|
||||
label: t('home.Footer Feedback'),
|
||||
onClick: () => {
|
||||
window.open('https://github.com/labring/FastGPT/issues', '_blank');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('home.Community'),
|
||||
onClick: () => {
|
||||
onOpen();
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
[onOpen, t]
|
||||
);
|
||||
|
||||
return (
|
||||
<Box
|
||||
display={['block', 'flex']}
|
||||
px={[5, 0]}
|
||||
maxW={'1200px'}
|
||||
m={'auto'}
|
||||
py={['30px', '60px']}
|
||||
flexWrap={'wrap'}
|
||||
>
|
||||
<Box flex={1}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Avatar src="/icon/logo.svg" w={['24px', '30px']} />
|
||||
<Box
|
||||
className="textlg"
|
||||
fontSize={['xl', '2xl']}
|
||||
fontWeight={'bold'}
|
||||
ml={3}
|
||||
fontStyle={'italic'}
|
||||
>
|
||||
{feConfigs?.systemTitle}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box mt={5} fontSize={'sm'} color={'myGray.600'} maxW={'380px'} textAlign={'justify'}>
|
||||
{t('home.FastGPT Desc', { title: feConfigs.systemTitle })}
|
||||
</Box>
|
||||
</Box>
|
||||
{list.map((item) => (
|
||||
<Box key={item.label} w={'200px'} mt={[5, 0]}>
|
||||
<Box color={'myGray.500'}>{item.label}</Box>
|
||||
{item.child.map((child) => (
|
||||
<Box
|
||||
key={child.label}
|
||||
mt={[2, 3]}
|
||||
cursor={'pointer'}
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
onClick={child.onClick}
|
||||
>
|
||||
{child.label}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
))}
|
||||
{isOpen && <CommunityModal onClose={onClose} />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
116
projects/app/src/pages/components/Hero.tsx
Normal file
116
projects/app/src/pages/components/Hero.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { Box, Flex, Button, Image } from '@chakra-ui/react';
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { feConfigs } from '@/store/static';
|
||||
import { useGlobalStore } from '@/store/global';
|
||||
import MyIcon from '@/components/Icon';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const Hero = () => {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { isPc, gitStar } = useGlobalStore();
|
||||
const [showVideo, setShowVide] = useState(false);
|
||||
|
||||
return (
|
||||
<Flex flexDirection={'column'} pt={['24px', '50px']} alignItems={'center'} userSelect={'none'}>
|
||||
<Box fontSize={['38px', '60px']} fontWeight={'bold'}>
|
||||
{t('home.slogan')}
|
||||
</Box>
|
||||
<Box fontSize={['xl', '3xl']} py={5} color={'myGray.600'} textAlign={'center'} maxW={'400px'}>
|
||||
{t('home.desc')}
|
||||
</Box>
|
||||
<Flex zIndex={1} flexDirection={['column', 'row']} mt={[5, 8]}>
|
||||
{feConfigs?.show_git && (
|
||||
<Button
|
||||
mr={[0, 5]}
|
||||
mb={[5, 0]}
|
||||
fontSize={['xl', '3xl']}
|
||||
h={'auto'}
|
||||
py={[2, 3]}
|
||||
variant={'base'}
|
||||
border={'2px solid'}
|
||||
borderColor={'myGray.800'}
|
||||
transition={'0.3s'}
|
||||
borderRadius={'xl'}
|
||||
_hover={{
|
||||
bg: 'myGray.800',
|
||||
color: 'white'
|
||||
}}
|
||||
leftIcon={<MyIcon name={'git'} w={'20px'} />}
|
||||
onClick={() => window.open('https://github.com/labring/FastGPT', '_blank')}
|
||||
>
|
||||
Stars {(gitStar / 1000).toFixed(1)}k
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
fontSize={['xl', '3xl']}
|
||||
h={['38px', 'auto']}
|
||||
borderRadius={'xl'}
|
||||
py={[2, 3]}
|
||||
w={'150px'}
|
||||
onClick={() => router.push(`/app/list`)}
|
||||
>
|
||||
{t('home.Start Now')}
|
||||
</Button>
|
||||
</Flex>
|
||||
<Box mt={['', '-50px']} position={'relative'}>
|
||||
<Image
|
||||
minH={['auto', '400px']}
|
||||
src={isPc ? '/imgs/home/videobgpc.png' : '/imgs/home/videobgphone.png'}
|
||||
mx={['-10%', 'auto']}
|
||||
maxW={['120%', '1000px']}
|
||||
alt=""
|
||||
draggable={false}
|
||||
loading={'lazy'}
|
||||
/>
|
||||
<MyIcon
|
||||
name={'playFill'}
|
||||
position={'absolute'}
|
||||
w={['30px', '40px']}
|
||||
cursor={'pointer'}
|
||||
left={'50%'}
|
||||
top={'50%'}
|
||||
color={'#363c42b8'}
|
||||
transform={['translate(-50%,5px)', 'translate(-50%,40px)']}
|
||||
onClick={() => setShowVide(true)}
|
||||
/>
|
||||
</Box>
|
||||
{showVideo && (
|
||||
<Flex
|
||||
position={'fixed'}
|
||||
zIndex={99}
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
bg={'rgba(255,255,255,0.4)'}
|
||||
onClick={() => setShowVide(false)}
|
||||
>
|
||||
<Box
|
||||
w={['100vw', '50%']}
|
||||
borderRadius={'lg'}
|
||||
overflow={'hidden'}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
<video
|
||||
style={{
|
||||
margin: 'auto'
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
src={'https://otnvvf-imgs.oss.laf.run/fastgpt.mp4'}
|
||||
controls
|
||||
autoPlay
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
148
projects/app/src/pages/components/Navbar.tsx
Normal file
148
projects/app/src/pages/components/Navbar.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
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 = [
|
||||
...(feConfigs?.show_contact
|
||||
? [
|
||||
{
|
||||
label: t('home.Community'),
|
||||
key: 'community',
|
||||
onClick: () => {
|
||||
onOpenCommunity();
|
||||
}
|
||||
}
|
||||
]
|
||||
: []),
|
||||
...(feConfigs?.show_doc
|
||||
? [
|
||||
{
|
||||
label: t('home.Docs'),
|
||||
key: 'docs',
|
||||
onClick: () => {
|
||||
window.open('https://doc.fastgpt.run/docs/intro');
|
||||
}
|
||||
}
|
||||
]
|
||||
: [])
|
||||
];
|
||||
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;
|
||||
Reference in New Issue
Block a user