mirror of
https://github.com/labring/FastGPT.git
synced 2025-08-02 20:58:12 +00:00
monorepo packages (#344)
This commit is contained in:
47
projects/app/src/components/Layout/auth.tsx
Normal file
47
projects/app/src/components/Layout/auth.tsx
Normal 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;
|
110
projects/app/src/components/Layout/index.tsx
Normal file
110
projects/app/src/components/Layout/index.tsx
Normal 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;
|
202
projects/app/src/components/Layout/navbar.tsx
Normal file
202
projects/app/src/components/Layout/navbar.tsx
Normal 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;
|
109
projects/app/src/components/Layout/navbarPhone.tsx
Normal file
109
projects/app/src/components/Layout/navbarPhone.tsx
Normal 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;
|
6
projects/app/src/components/Layout/style.module.scss
Normal file
6
projects/app/src/components/Layout/style.module.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.informIcon {
|
||||
svg {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user