gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: script load

Browse Source
This commit is contained in:
archer 2023-09-09 09:39:54 +08:00
parent 5e6848ce82
commit 5b9332c673
No known key found for this signature in database
GPG Key ID: 569A5660D2379E28
6 changed files with 206 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/ChatBox/index.tsx
View File

@ -55,6 +55,7 @@ const SelectDataset = dynamic(() => import('./SelectDataset'));
const InputDataModal = dynamic(() => import('@/pages/kb/detail/components/InputDataModal')); const InputDataModal = dynamic(() => import('@/pages/kb/detail/components/InputDataModal'));
import styles from './index.module.scss'; import styles from './index.module.scss';
import Script from 'next/script';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24); const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
@ -535,6 +536,8 @@ const ChatBox = (
return ( return (
<Flex flexDirection={'column'} h={'100%'}> <Flex flexDirection={'column'} h={'100%'}>
<Script src="/js/html2pdf.bundle.min.js" strategy="lazyOnload"></Script>
<Box ref={ChatBoxRef} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'} px={[4, 0]} pb={3}> <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'} px={[4, 0]} pb={3}>
<Box id="chat-container" maxW={['100%', '92%']} h={'100%'} mx={'auto'}> <Box id="chat-container" maxW={['100%', '92%']} h={'100%'} mx={'auto'}>
{showEmpty && <Empty />} {showEmpty && <Empty />}

16
client/src/pages/_app.tsx
View File

@ -41,16 +41,14 @@ function App({ Component, pageProps }: AppProps) {
const { setLastRoute } = useGlobalStore(); const { setLastRoute } = useGlobalStore();
const [scripts, setScripts] = useState<FeConfigsType['scripts']>([]); const [scripts, setScripts] = useState<FeConfigsType['scripts']>([]);
const [googleClientVerKey, setGoogleVerKey] = useState<string>();
useEffect(() => { useEffect(() => {
// get init data // get init data
(async () => { (async () => {
const { const {
feConfigs: { scripts, googleClientVerKey } feConfigs: { scripts }
} = await clientInitData(); } = await clientInitData();
setScripts(scripts || []); setScripts(scripts || []);
setGoogleVerKey(googleClientVerKey);
})(); })();
// add window error track // add window error track
window.onerror = function (msg, url) { window.onerror = function (msg, url) {
@ -94,20 +92,10 @@ function App({ Component, pageProps }: AppProps) {
/> />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<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>
{scripts?.map((item, i) => ( {scripts?.map((item, i) => (
<Script key={i} strategy="lazyOnload" {...item}></Script> <Script key={i} strategy="lazyOnload" {...item}></Script>
))} ))}
{googleClientVerKey && (
<>
<Script
src={`https://www.recaptcha.net/recaptcha/api.js?render=${googleClientVerKey}`}
strategy="lazyOnload"
></Script>
</>
)}
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} /> <ColorModeScript initialColorMode={theme.config.initialColorMode} />

92
client/src/pages/account/index.tsx
View File

@ -13,6 +13,7 @@ import UserInfo from './components/Info';
import { serviceSideProps } from '@/utils/i18n'; import { serviceSideProps } from '@/utils/i18n';
import { feConfigs } from '@/store/static'; import { feConfigs } from '@/store/static';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Script from 'next/script';
const Promotion = dynamic(() => import('./components/Promotion')); const Promotion = dynamic(() => import('./components/Promotion'));
const BillTable = dynamic(() => import('./components/BillTable')); const BillTable = dynamic(() => import('./components/BillTable'));
@ -97,51 +98,54 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
); );
return ( return (
<PageContainer> <>
<Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}> <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
{isPc ? ( <PageContainer>
<Flex <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
flexDirection={'column'} {isPc ? (
p={4} <Flex
h={'100%'} flexDirection={'column'}
flex={'0 0 200px'} p={4}
borderRight={theme.borders.base} h={'100%'}
> flex={'0 0 200px'}
<SideTabs borderRight={theme.borders.base}
flex={1} >
mx={'auto'} <SideTabs
mt={2} flex={1}
w={'100%'} mx={'auto'}
list={tabList.current} mt={2}
activeId={currentTab} w={'100%'}
onChange={setCurrentTab} list={tabList.current}
/> activeId={currentTab}
</Flex> onChange={setCurrentTab}
) : ( />
<Box mb={3}> </Flex>
<Tabs ) : (
m={'auto'} <Box mb={3}>
size={isPc ? 'md' : 'sm'} <Tabs
list={tabList.current.map((item) => ({ m={'auto'}
id: item.id, size={isPc ? 'md' : 'sm'}
label: item.label list={tabList.current.map((item) => ({
}))} id: item.id,
activeId={currentTab} label: item.label
onChange={setCurrentTab} }))}
/> activeId={currentTab}
</Box> onChange={setCurrentTab}
)} />
</Box>
)}
<Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}> <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
{currentTab === TabEnum.info && <UserInfo />} {currentTab === TabEnum.info && <UserInfo />}
{currentTab === TabEnum.promotion && <Promotion />} {currentTab === TabEnum.promotion && <Promotion />}
{currentTab === TabEnum.bill && <BillTable />} {currentTab === TabEnum.bill && <BillTable />}
{currentTab === TabEnum.pay && <PayRecordTable />} {currentTab === TabEnum.pay && <PayRecordTable />}
{currentTab === TabEnum.inform && <InformTable />} {currentTab === TabEnum.inform && <InformTable />}
</Box> </Box>
</Flex> </Flex>
<ConfirmModal /> <ConfirmModal />
</PageContainer> </PageContainer>
</>
); );
}; };

174
client/src/pages/kb/detail/index.tsx
View File

@ -23,6 +23,7 @@ import { getTrainingQueueLen } from '@/api/plugins/kb';
import MyTooltip from '@/components/MyTooltip'; import MyTooltip from '@/components/MyTooltip';
import { QuestionOutlineIcon } from '@chakra-ui/icons'; import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { feConfigs } from '@/store/static'; import { feConfigs } from '@/store/static';
import Script from 'next/script';
const ImportData = dynamic(() => import('./components/Import'), { const ImportData = dynamic(() => import('./components/Import'), {
ssr: false ssr: false
@ -89,96 +90,99 @@ const Detail = ({ kbId, currentTab }: { kbId: string; currentTab: `${TabEnum}` }
}); });
return ( return (
<PageContainer> <>
<Box display={['block', 'flex']} h={'100%'} pt={[4, 0]}> <Script src="/js/pdf.js" strategy="lazyOnload"></Script>
{isPc ? ( <PageContainer>
<Flex <Box display={['block', 'flex']} h={'100%'} pt={[4, 0]}>
flexDirection={'column'} {isPc ? (
p={4}
h={'100%'}
flex={'0 0 200px'}
borderRight={theme.borders.base}
>
<Flex mb={4} alignItems={'center'}>
<Avatar src={kbDetail.avatar} w={'34px'} borderRadius={'lg'} />
<Box ml={2} fontWeight={'bold'}>
{kbDetail.name}
</Box>
</Flex>
<SideTabs
flex={1}
mx={'auto'}
mt={2}
w={'100%'}
list={tabList.current}
activeId={currentTab}
onChange={(e: any) => {
setCurrentTab(e);
}}
/>
<Box textAlign={'center'}>
<Flex justifyContent={'center'} alignItems={'center'}>
<MyIcon mr={1} name="overviewLight" w={'16px'} color={'green.500'} />
<Box>{t('dataset.System Data Queue')}</Box>
<MyTooltip
label={t('dataset.Queue Desc', { title: feConfigs?.systemTitle })}
placement={'top'}
>
<QuestionOutlineIcon ml={1} w={'16px'} />
</MyTooltip>
</Flex>
<Box mt={1} fontWeight={'bold'}>
{trainingQueueLen}
</Box>
</Box>
<Flex <Flex
alignItems={'center'} flexDirection={'column'}
cursor={'pointer'} p={4}
py={2} h={'100%'}
px={3} flex={'0 0 200px'}
borderRadius={'md'} borderRight={theme.borders.base}
_hover={{ bg: 'myGray.100' }}
onClick={() => router.back()}
> >
<IconButton <Flex mb={4} alignItems={'center'}>
mr={3} <Avatar src={kbDetail.avatar} w={'34px'} borderRadius={'lg'} />
icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />} <Box ml={2} fontWeight={'bold'}>
bg={'white'} {kbDetail.name}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'} </Box>
h={'28px'} </Flex>
size={'sm'} <SideTabs
borderRadius={'50%'} flex={1}
aria-label={''} mx={'auto'}
mt={2}
w={'100%'}
list={tabList.current}
activeId={currentTab}
onChange={(e: any) => {
setCurrentTab(e);
}}
/> />
全部知识库 <Box textAlign={'center'}>
<Flex justifyContent={'center'} alignItems={'center'}>
<MyIcon mr={1} name="overviewLight" w={'16px'} color={'green.500'} />
<Box>{t('dataset.System Data Queue')}</Box>
<MyTooltip
label={t('dataset.Queue Desc', { title: feConfigs?.systemTitle })}
placement={'top'}
>
<QuestionOutlineIcon ml={1} w={'16px'} />
</MyTooltip>
</Flex>
<Box mt={1} fontWeight={'bold'}>
{trainingQueueLen}
</Box>
</Box>
<Flex
alignItems={'center'}
cursor={'pointer'}
py={2}
px={3}
borderRadius={'md'}
_hover={{ bg: 'myGray.100' }}
onClick={() => router.back()}
>
<IconButton
mr={3}
icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
bg={'white'}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
h={'28px'}
size={'sm'}
borderRadius={'50%'}
aria-label={''}
/>
全部知识库
</Flex>
</Flex> </Flex>
</Flex> ) : (
) : ( <Box mb={3}>
<Box mb={3}> <Tabs
<Tabs m={'auto'}
m={'auto'} w={'260px'}
w={'260px'} size={isPc ? 'md' : 'sm'}
size={isPc ? 'md' : 'sm'} list={tabList.current.map((item) => ({
list={tabList.current.map((item) => ({ id: item.id,
id: item.id, label: item.label
label: item.label }))}
}))} activeId={currentTab}
activeId={currentTab} onChange={(e: any) => setCurrentTab(e)}
onChange={(e: any) => setCurrentTab(e)} />
/> </Box>
</Box> )}
)}
{!!kbDetail._id && ( {!!kbDetail._id && (
<Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}> <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
{currentTab === TabEnum.data && <DataCard kbId={kbId} />} {currentTab === TabEnum.data && <DataCard kbId={kbId} />}
{currentTab === TabEnum.import && <ImportData kbId={kbId} />} {currentTab === TabEnum.import && <ImportData kbId={kbId} />}
{currentTab === TabEnum.test && <Test kbId={kbId} />} {currentTab === TabEnum.test && <Test kbId={kbId} />}
{currentTab === TabEnum.info && <Info ref={InfoRef} kbId={kbId} form={form} />} {currentTab === TabEnum.info && <Info ref={InfoRef} kbId={kbId} form={form} />}
</Box> </Box>
)} )}
</Box> </Box>
</PageContainer> </PageContainer>
</>
); );
}; };

120
client/src/pages/login/index.tsx
View File

@ -13,6 +13,7 @@ import { serviceSideProps } from '@/utils/i18n';
import { setToken } from '@/utils/user'; import { setToken } from '@/utils/user';
import { feConfigs } from '@/store/static'; import { feConfigs } from '@/store/static';
import CommunityModal from '@/components/CommunityModal'; import CommunityModal from '@/components/CommunityModal';
import Script from 'next/script';
const RegisterForm = dynamic(() => import('./components/RegisterForm')); const RegisterForm = dynamic(() => import('./components/RegisterForm'));
const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm')); const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));
@ -53,70 +54,77 @@ const Login = () => {
} }
return ( return (
<Flex <>
alignItems={'center'} {feConfigs.googleClientVerKey && (
justifyContent={'center'} <Script
className={styles.loginPage} src={`https://www.recaptcha.net/recaptcha/api.js?render=${feConfigs.googleClientVerKey}`}
h={'100%'} ></Script>
px={[0, '10vw']} )}
>
<Flex <Flex
height="100%"
w={'100%'}
maxW={'1240px'}
maxH={['auto', 'max(660px,80vh)']}
backgroundColor={'#fff'}
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
py={[5, 10]} className={styles.loginPage}
px={'5vw'} h={'100%'}
borderRadius={isPc ? 'md' : 'none'} px={[0, '10vw']}
gap={5}
> >
{isPc && ( <Flex
<Image height="100%"
src={'/icon/loginLeft.svg'} w={'100%'}
order={pageType === PageTypeEnum.login ? 0 : 2} maxW={'1240px'}
flex={'1 0 0'} maxH={['auto', 'max(660px,80vh)']}
w="0" backgroundColor={'#fff'}
maxW={'600px'} alignItems={'center'}
height={'100%'} justifyContent={'center'}
maxH={'450px'} py={[5, 10]}
alt="" px={'5vw'}
/>
)}
<Box
position={'relative'}
order={1}
flex={`0 0 ${isPc ? '400px' : '100%'}`}
height={'100%'}
border="1px"
borderColor="gray.200"
py={5}
px={10}
borderRadius={isPc ? 'md' : 'none'} borderRadius={isPc ? 'md' : 'none'}
gap={5}
> >
<DynamicComponent type={pageType} /> {isPc && (
<Image
{feConfigs?.show_contact && ( src={'/icon/loginLeft.svg'}
<Box order={pageType === PageTypeEnum.login ? 0 : 2}
fontSize={'sm'} flex={'1 0 0'}
color={'myGray.600'} w="0"
cursor={'pointer'} maxW={'600px'}
position={'absolute'} height={'100%'}
right={5} maxH={'450px'}
bottom={3} alt=""
onClick={onOpen} />
>
无法登录，点击联系
</Box>
)} )}
</Box>
</Flex>
{isOpen && <CommunityModal onClose={onClose} />} <Box
</Flex> position={'relative'}
order={1}
flex={`0 0 ${isPc ? '400px' : '100%'}`}
height={'100%'}
border="1px"
borderColor="gray.200"
py={5}
px={10}
borderRadius={isPc ? 'md' : 'none'}
>
<DynamicComponent type={pageType} />
{feConfigs?.show_contact && (
<Box
fontSize={'sm'}
color={'myGray.600'}
cursor={'pointer'}
position={'absolute'}
right={5}
bottom={3}
onClick={onOpen}
>
无法登录，点击联系
</Box>
)}
</Box>
</Flex>
{isOpen && <CommunityModal onClose={onClose} />}
</Flex>
</>
); );
}; };

1
client/src/types/index.d.ts vendored
View File

@ -58,7 +58,6 @@ declare global {
interface Window { interface Window {
['pdfjs-dist/build/pdf']: any; ['pdfjs-dist/build/pdf']: any;
particlesJS: any;
grecaptcha: any; grecaptcha: any;
QRCode: any; QRCode: any;
umami?: { umami?: {