perf: style
This commit is contained in:
archer
@@ -55,6 +55,7 @@ export default function App({ Component, pageProps }: AppProps) {
|
||||
<Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
|
||||
<Script src="/js/pdf.js" strategy="lazyOnload"></Script>
|
||||
<Script src="/js/html2pdf.bundle.min.js" strategy="lazyOnload"></Script>
|
||||
<Script src="/js/particles.js" strategy="lazyOnload"></Script>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ChakraProvider theme={theme}>
|
||||
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
||||
|
||||
5
src/pages/index.module.scss
Normal file
5
src/pages/index.module.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.home {
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,19 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Card, Box, Link } from '@chakra-ui/react';
|
||||
import { Card, Box, Link, Flex, Image, Button } from '@chakra-ui/react';
|
||||
import Markdown from '@/components/Markdown';
|
||||
import { useMarkdown } from '@/hooks/useMarkdown';
|
||||
import { useRouter } from 'next/router';
|
||||
import { getFilling } from '@/api/system';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useScreen } from '@/hooks/useScreen';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import styles from './index.module.scss';
|
||||
|
||||
const Home = () => {
|
||||
const { inviterId } = useRouter().query as { inviterId: string };
|
||||
const router = useRouter();
|
||||
const { inviterId } = router.query as { inviterId: string };
|
||||
const { data } = useMarkdown({ url: '/intro.md' });
|
||||
const { isPc } = useScreen();
|
||||
|
||||
useEffect(() => {
|
||||
if (inviterId) {
|
||||
@@ -18,22 +23,167 @@ const Home = () => {
|
||||
|
||||
const { data: { beianText = '' } = {} } = useQuery(['init'], getFilling);
|
||||
|
||||
/* 加载动画 */
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
window.particlesJS?.('particles-js', {
|
||||
particles: {
|
||||
number: {
|
||||
value: 40,
|
||||
density: {
|
||||
enable: true,
|
||||
value_area: 500
|
||||
}
|
||||
},
|
||||
color: {
|
||||
value: '#4e83fd'
|
||||
},
|
||||
shape: {
|
||||
type: 'circle',
|
||||
stroke: {
|
||||
width: 0,
|
||||
color: '#000000'
|
||||
},
|
||||
polygon: {
|
||||
nb_sides: 5
|
||||
}
|
||||
},
|
||||
opacity: {
|
||||
value: 0.5,
|
||||
random: false,
|
||||
anim: {
|
||||
enable: false,
|
||||
speed: 0.1,
|
||||
opacity_min: 0.1,
|
||||
sync: false
|
||||
}
|
||||
},
|
||||
size: {
|
||||
value: 3,
|
||||
random: true,
|
||||
anim: {
|
||||
enable: false,
|
||||
speed: 10,
|
||||
size_min: 0.1,
|
||||
sync: false
|
||||
}
|
||||
},
|
||||
line_linked: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: '#adceff',
|
||||
opacity: 0.4,
|
||||
width: 1
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 2,
|
||||
direction: 'none',
|
||||
random: true,
|
||||
straight: false,
|
||||
out_mode: 'out',
|
||||
bounce: false,
|
||||
attract: {
|
||||
enable: false,
|
||||
rotateX: 600,
|
||||
rotateY: 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
interactivity: {
|
||||
detect_on: 'canvas',
|
||||
events: {
|
||||
onhover: {
|
||||
enable: true,
|
||||
mode: 'grab'
|
||||
},
|
||||
onclick: {
|
||||
enable: true,
|
||||
mode: 'push'
|
||||
},
|
||||
resize: true
|
||||
},
|
||||
modes: {
|
||||
grab: {
|
||||
distance: 140,
|
||||
line_linked: {
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
bubble: {
|
||||
distance: 400,
|
||||
size: 40,
|
||||
duration: 2,
|
||||
opacity: 8,
|
||||
speed: 3
|
||||
},
|
||||
repulse: {
|
||||
distance: 200,
|
||||
duration: 0.4
|
||||
},
|
||||
push: {
|
||||
particles_nb: 4
|
||||
},
|
||||
remove: {
|
||||
particles_nb: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
retina_detect: true
|
||||
});
|
||||
}, 1000);
|
||||
}, [isPc]);
|
||||
|
||||
return (
|
||||
<Box p={[5, 10]}>
|
||||
<Card p={5} lineHeight={2}>
|
||||
<Markdown source={data} isChatting={false} />
|
||||
</Card>
|
||||
<Flex
|
||||
className={styles.home}
|
||||
position={'relative'}
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
pt={'20vh'}
|
||||
>
|
||||
<Box id={'particles-js'} position={'absolute'} top={0} left={0} right={0} bottom={0} />
|
||||
<Image src="/icon/logo.png" w={['70px', '120px']} h={['70px', '120px']} alt={''}></Image>
|
||||
<Box
|
||||
fontWeight={'bold'}
|
||||
fontSize={['40px', '70px']}
|
||||
letterSpacing={'5px'}
|
||||
color={'myBlue.600'}
|
||||
>
|
||||
FastGpt
|
||||
</Box>
|
||||
<Box color={'myBlue.600'} fontSize={['30px', '50px']}>
|
||||
三分钟
|
||||
</Box>
|
||||
<Box color={'myBlue.600'} fontSize={['30px', '50px']}>
|
||||
搭建 AI 知识库
|
||||
</Box>
|
||||
|
||||
<Card p={5} mt={4} textAlign={'center'}>
|
||||
{beianText && (
|
||||
<Link href="https://beian.miit.gov.cn/" target="_blank">
|
||||
{beianText}
|
||||
</Link>
|
||||
)}
|
||||
<Button
|
||||
my={5}
|
||||
fontSize={['xl', '3xl']}
|
||||
h={['35px', '40px']}
|
||||
onClick={() => router.push(`/model`)}
|
||||
>
|
||||
点击开始
|
||||
</Button>
|
||||
|
||||
<Box>Made by FastGpt Team.</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
<Box mt={'20vh'} w={'100%'} p={[5, 10]}>
|
||||
<Card p={5} lineHeight={2}>
|
||||
<Markdown source={data} isChatting={false} />
|
||||
</Card>
|
||||
|
||||
<Card p={5} mt={4} textAlign={'center'}>
|
||||
{beianText && (
|
||||
<Link href="https://beian.miit.gov.cn/" target="_blank">
|
||||
{beianText}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Box>Made by FastGpt Team.</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -185,8 +185,8 @@ const SelectFileModal = ({
|
||||
<Radio
|
||||
ml={3}
|
||||
list={[
|
||||
{ label: 'QA拆分', value: 'qa' },
|
||||
{ label: '直接分段', value: 'subsection' }
|
||||
{ label: '直接分段', value: 'subsection' },
|
||||
{ label: 'QA拆分', value: 'qa' }
|
||||
]}
|
||||
value={mode}
|
||||
onChange={(e) => setMode(e as 'subsection' | 'qa')}
|
||||
|
||||
Reference in New Issue
Block a user