monorepo packages (#344)

This commit is contained in:
Archer
2023-09-24 18:02:09 +08:00
committed by GitHub
parent a4ff5a3f73
commit 3d7178d06f
535 changed files with 12048 additions and 227 deletions

View File

@@ -0,0 +1,47 @@
import React from 'react';
import { useRouter } from 'next/router';
import { useToast } from '@chakra-ui/react';
import { useUserStore } from '@/store/user';
import { useQuery } from '@tanstack/react-query';
const unAuthPage: { [key: string]: boolean } = {
'/': true,
'/login': true,
'/login/provider': true,
'/appStore': true,
'/chat/share': true
};
const Auth = ({ children }: { children: JSX.Element }) => {
const router = useRouter();
const toast = useToast({
title: '请先登录',
position: 'top',
status: 'warning'
});
const { userInfo, initUserInfo } = useUserStore();
useQuery(
[router.pathname],
() => {
if (unAuthPage[router.pathname] === true || userInfo) {
return null;
} else {
return initUserInfo();
}
},
{
onError(error) {
console.log('error->', error);
router.replace(
`/login?lastRoute=${encodeURIComponent(location.pathname + location.search)}`
);
toast();
}
}
);
return userInfo || unAuthPage[router.pathname] === true ? children : null;
};
export default Auth;

View File

@@ -0,0 +1,110 @@
import React, { useEffect, useMemo } from 'react';
import { Box, useColorMode, Flex } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import { useLoading } from '@/hooks/useLoading';
import { useGlobalStore } from '@/store/global';
import { throttle } from 'lodash';
import Auth from './auth';
import Navbar from './navbar';
import NavbarPhone from './navbarPhone';
import { useQuery } from '@tanstack/react-query';
import { useUserStore } from '@/store/user';
import { getUnreadCount } from '@/api/user';
const pcUnShowLayoutRoute: Record<string, boolean> = {
'/': true,
'/login': true,
'/login/provider': true,
'/chat/share': true,
'/app/edit': true,
'/chat': true
};
const phoneUnShowLayoutRoute: Record<string, boolean> = {
'/': true,
'/login': true,
'/login/provider': true,
'/chat/share': true
};
const Layout = ({ children }: { children: JSX.Element }) => {
const router = useRouter();
const { colorMode, setColorMode } = useColorMode();
const { Loading } = useLoading();
const { loading, setScreenWidth, isPc, loadGitStar } = useGlobalStore();
const { userInfo } = useUserStore();
const isChatPage = useMemo(
() => router.pathname === '/chat' && Object.values(router.query).join('').length !== 0,
[router.pathname, router.query]
);
useEffect(() => {
if (colorMode === 'dark' && router.pathname !== '/chat') {
setColorMode('light');
}
}, [colorMode, router.pathname, setColorMode]);
useEffect(() => {
const resize = throttle(() => {
setScreenWidth(document.documentElement.clientWidth);
}, 300);
window.addEventListener('resize', resize);
resize();
loadGitStar();
return () => {
window.removeEventListener('resize', resize);
};
}, [loadGitStar, setScreenWidth]);
const { data: unread = 0 } = useQuery(['getUnreadCount'], getUnreadCount, {
enabled: !!userInfo,
refetchInterval: 10000
});
return (
<>
<Box h={'100%'} bg={'myWhite.600'}>
{isPc === true && (
<>
{pcUnShowLayoutRoute[router.pathname] ? (
<Auth>{children}</Auth>
) : (
<>
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'70px'}>
<Navbar unread={unread} />
</Box>
<Box h={'100%'} ml={'70px'} overflow={'overlay'}>
<Auth>{children}</Auth>
</Box>
</>
)}
</>
)}
{isPc === false && (
<>
<Box h={'100%'} display={['block', 'none']}>
{phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
<Auth>{children}</Auth>
) : (
<Flex h={'100%'} flexDirection={'column'}>
<Box flex={'1 0 0'} h={0}>
<Auth>{children}</Auth>
</Box>
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
<NavbarPhone unread={unread} />
</Box>
</Flex>
)}
</Box>
</>
)}
</Box>
<Loading loading={loading} />
</>
);
};
export default Layout;

View File

@@ -0,0 +1,202 @@
import React, { useMemo } from 'react';
import { Box, Flex, Link } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import { useUserStore } from '@/store/user';
import { useChatStore } from '@/store/chat';
import { HUMAN_ICON } from '@/constants/chat';
import { feConfigs } from '@/store/static';
import NextLink from 'next/link';
import Badge from '../Badge';
import Avatar from '../Avatar';
import MyIcon from '../Icon';
import { useTranslation } from 'next-i18next';
import { useGlobalStore } from '@/store/global';
import MyTooltip from '../MyTooltip';
export enum NavbarTypeEnum {
normal = 'normal',
small = 'small'
}
const Navbar = ({ unread }: { unread: number }) => {
const { t } = useTranslation();
const router = useRouter();
const { userInfo } = useUserStore();
const { gitStar } = useGlobalStore();
const { lastChatAppId, lastChatId } = useChatStore();
const navbarList = useMemo(
() => [
{
label: t('navbar.Chat'),
icon: 'chat',
activeIcon: 'chatFill',
link: `/chat?appId=${lastChatAppId}&chatId=${lastChatId}`,
activeLink: ['/chat']
},
{
label: t('navbar.Apps'),
icon: 'appLight',
activeIcon: 'appFill',
link: `/app/list`,
activeLink: ['/app/list', '/app/detail']
},
{
label: t('navbar.Datasets'),
icon: 'dbLight',
activeIcon: 'dbFill',
link: `/kb/list`,
activeLink: ['/kb/list', '/kb/detail']
},
...(feConfigs?.show_appStore
? [
{
label: t('navbar.Store'),
icon: 'appStoreLight',
activeIcon: 'appStoreFill',
link: '/appStore',
activeLink: ['/appStore']
}
]
: []),
{
label: t('navbar.Account'),
icon: 'meLight',
activeIcon: 'meFill',
link: '/account',
activeLink: ['/account']
}
],
[lastChatAppId, lastChatId, t]
);
const itemStyles: any = {
my: 3,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
w: '54px',
h: '54px',
borderRadius: 'md',
_hover: {
bg: 'myWhite.600'
}
};
return (
<Flex
flexDirection={'column'}
alignItems={'center'}
pt={6}
bg={'white'}
h={'100%'}
w={'100%'}
boxShadow={'2px 0px 8px 0px rgba(0,0,0,0.1)'}
userSelect={'none'}
>
{/* logo */}
<Box
flex={'0 0 auto'}
mb={5}
border={'2px solid #fff'}
borderRadius={'50%'}
overflow={'hidden'}
cursor={'pointer'}
onClick={() => router.push('/account')}
>
<Avatar
w={'36px'}
h={'36px'}
borderRadius={'50%'}
src={userInfo?.avatar}
fallbackSrc={HUMAN_ICON}
/>
</Box>
{/* 导航列表 */}
<Box flex={1}>
{navbarList.map((item) => (
<Box
key={item.link}
{...itemStyles}
{...(item.activeLink.includes(router.pathname)
? {
color: 'myBlue.700',
bg: 'white !important',
boxShadow: '1px 1px 10px rgba(0,0,0,0.2)'
}
: {
color: 'myGray.500',
backgroundColor: 'transparent'
})}
{...(item.link !== router.asPath
? {
onClick: () => router.push(item.link)
}
: {})}
>
<MyIcon
name={
item.activeLink.includes(router.pathname)
? (item.activeIcon as any)
: (item.icon as any)
}
width={'20px'}
height={'20px'}
/>
<Box fontSize={'12px'} transform={'scale(0.9)'} mt={'5px'} lineHeight={1}>
{item.label}
</Box>
</Box>
))}
</Box>
{unread > 0 && (
<Box>
<Link
as={NextLink}
{...itemStyles}
prefetch
href={`/account?currentTab=inform`}
mb={0}
color={'#9096a5'}
>
<Badge count={unread}>
<MyIcon name={'inform'} width={'22px'} height={'22px'} />
</Badge>
</Link>
</Box>
)}
{feConfigs?.show_doc && (
<MyTooltip label={t('home.Docs')} placement={'right-end'}>
<Box
{...itemStyles}
mb={0}
color={'#9096a5'}
onClick={() => {
window.open(`https://doc.fastgpt.run/docs/intro`);
}}
>
<MyIcon name={'courseLight'} width={'26px'} height={'26px'} />
</Box>
</MyTooltip>
)}
{feConfigs?.show_git && (
<MyTooltip label={`Git Star: ${gitStar}`} placement={'right-end'}>
<Link
as={NextLink}
href="https://github.com/labring/FastGPT"
target={'_blank'}
{...itemStyles}
mt={0}
color={'#9096a5'}
>
<MyIcon name={'git'} width={'22px'} height={'22px'} />
</Link>
</MyTooltip>
)}
</Flex>
);
};
export default Navbar;

View File

@@ -0,0 +1,109 @@
import React, { useMemo } from 'react';
import { useRouter } from 'next/router';
import { Flex, Box } from '@chakra-ui/react';
import { useChatStore } from '@/store/chat';
import { useTranslation } from 'react-i18next';
import Badge from '../Badge';
import MyIcon from '../Icon';
const NavbarPhone = ({ unread }: { unread: number }) => {
const router = useRouter();
const { t } = useTranslation();
const { lastChatAppId, lastChatId } = useChatStore();
const navbarList = useMemo(
() => [
{
label: t('navbar.Chat'),
icon: 'chat',
link: `/chat?appId=${lastChatAppId}&chatId=${lastChatId}`,
activeLink: ['/chat'],
unread: 0
},
{
label: t('navbar.Apps'),
icon: 'tabbarModel',
link: `/app/list`,
activeLink: ['/app/list', '/app/detail'],
unread: 0
},
{
label: t('navbar.Tools'),
icon: 'tabbarMore',
link: '/tools',
activeLink: ['/tools'],
unread: 0
},
{
label: t('navbar.Account'),
icon: 'tabbarMe',
link: '/account',
activeLink: ['/account'],
unread
}
],
[t, lastChatAppId, lastChatId, unread]
);
return (
<>
<Flex
alignItems={'center'}
h={'100%'}
justifyContent={'space-between'}
backgroundColor={'white'}
position={'relative'}
px={10}
>
{navbarList.map((item) => (
<Flex
position={'relative'}
key={item.link}
cursor={'pointer'}
borderRadius={'md'}
textAlign={'center'}
alignItems={'center'}
h={'100%'}
pt={1}
px={3}
transform={'scale(0.9)'}
{...(item.activeLink.includes(router.pathname)
? {
color: '#7089f1'
}
: {
color: 'myGray.500'
})}
_after={
item.activeLink.includes(router.pathname)
? {
content: '""',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
borderRadius: '50%',
w: '18px',
h: '18px',
bg: ' #6782f1',
filter: 'blur(10px)',
boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.25)'
}
: {}
}
onClick={() => {
if (item.link === router.asPath) return;
router.push(item.link);
}}
>
<Badge isDot count={item.unread}>
<MyIcon name={item.icon as any} width={'20px'} height={'20px'} />
<Box fontSize={'12px'}>{item.label}</Box>
</Badge>
</Flex>
))}
</Flex>
</>
);
};
export default NavbarPhone;

View File

@@ -0,0 +1,6 @@
.informIcon {
svg {
cursor: pointer;
margin: 0;
}
}