mirror of
https://github.com/labring/FastGPT.git
synced 2025-08-02 20:58:12 +00:00
new framwork
This commit is contained in:
46
client/src/components/Layout/auth.tsx
Normal file
46
client/src/components/Layout/auth.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
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,
|
||||
'/model/share': 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;
|
98
client/src/components/Layout/index.tsx
Normal file
98
client/src/components/Layout/index.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
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,
|
||||
'/chat/share': true
|
||||
};
|
||||
const phoneUnShowLayoutRoute: Record<string, boolean> = {
|
||||
'/': true,
|
||||
'/login': true,
|
||||
'/chat/share': true
|
||||
};
|
||||
|
||||
const Layout = ({ children }: { children: JSX.Element }) => {
|
||||
const router = useRouter();
|
||||
const { colorMode, setColorMode } = useColorMode();
|
||||
const { Loading } = useLoading();
|
||||
const { loading, setScreenWidth, isPc } = 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);
|
||||
resize();
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', resize);
|
||||
};
|
||||
}, [setScreenWidth]);
|
||||
|
||||
const { data: unread = 0 } = useQuery(['getUnreadCount'], getUnreadCount, {
|
||||
enabled: !!userInfo,
|
||||
refetchInterval: 5000
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
h={'100%'}
|
||||
bgGradient={'linear(to-t,rgba(173, 206, 255, 0.05) 0%, rgba(173, 206, 255, 0.12) 100%)'}
|
||||
>
|
||||
{isPc ? (
|
||||
pcUnShowLayoutRoute[router.pathname] ? (
|
||||
<Auth>{children}</Auth>
|
||||
) : (
|
||||
<>
|
||||
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'60px'}>
|
||||
<Navbar unread={unread} />
|
||||
</Box>
|
||||
<Box h={'100%'} ml={'60px'} overflow={'overlay'}>
|
||||
<Auth>{children}</Auth>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
) : phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
|
||||
<Auth>{children}</Auth>
|
||||
) : (
|
||||
<Flex h={'100%'} flexDirection={'column'}>
|
||||
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
|
||||
<Auth>{children}</Auth>
|
||||
</Box>
|
||||
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
|
||||
<NavbarPhone unread={unread} />
|
||||
</Box>
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
<Loading loading={loading} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
152
client/src/components/Layout/navbar.tsx
Normal file
152
client/src/components/Layout/navbar.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Box, Flex, Tooltip, Link } from '@chakra-ui/react';
|
||||
import { useRouter } from 'next/router';
|
||||
import MyIcon from '../Icon';
|
||||
import { useUserStore } from '@/store/user';
|
||||
import { useChatStore } from '@/store/chat';
|
||||
import Avatar from '../Avatar';
|
||||
import { HUMAN_ICON } from '@/constants/chat';
|
||||
import NextLink from 'next/link';
|
||||
import Badge from '../Badge';
|
||||
|
||||
export enum NavbarTypeEnum {
|
||||
normal = 'normal',
|
||||
small = 'small'
|
||||
}
|
||||
|
||||
const Navbar = ({ unread }: { unread: number }) => {
|
||||
const router = useRouter();
|
||||
const { userInfo, lastModelId } = useUserStore();
|
||||
const { lastChatModelId, lastChatId } = useChatStore();
|
||||
const navbarList = useMemo(
|
||||
() => [
|
||||
{
|
||||
label: '聊天',
|
||||
icon: 'chat',
|
||||
link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
|
||||
activeLink: ['/chat']
|
||||
},
|
||||
{
|
||||
label: '我的应用',
|
||||
icon: 'model',
|
||||
link: `/model?modelId=${lastModelId}`,
|
||||
activeLink: ['/model']
|
||||
},
|
||||
{
|
||||
label: '知识库',
|
||||
icon: 'kb',
|
||||
link: `/kb`,
|
||||
activeLink: ['/kb']
|
||||
},
|
||||
{
|
||||
label: '应用市场',
|
||||
icon: 'appStore',
|
||||
link: '/model/share',
|
||||
activeLink: ['/model/share']
|
||||
},
|
||||
{
|
||||
label: '开发',
|
||||
icon: 'develop',
|
||||
link: '/openapi',
|
||||
activeLink: ['/openapi']
|
||||
},
|
||||
{
|
||||
label: '账号',
|
||||
icon: 'user',
|
||||
link: '/number',
|
||||
activeLink: ['/number']
|
||||
}
|
||||
],
|
||||
[lastChatId, lastChatModelId, lastModelId]
|
||||
);
|
||||
|
||||
const itemStyles: any = {
|
||||
mb: 3,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
w: '60px',
|
||||
h: '45px',
|
||||
_hover: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
pt={6}
|
||||
backgroundColor={'#465069'}
|
||||
h={'100%'}
|
||||
w={'100%'}
|
||||
boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
|
||||
userSelect={'none'}
|
||||
>
|
||||
{/* logo */}
|
||||
<Box
|
||||
mb={5}
|
||||
border={'2px solid #fff'}
|
||||
borderRadius={'36px'}
|
||||
overflow={'hidden'}
|
||||
cursor={'pointer'}
|
||||
onClick={() => router.push('/number')}
|
||||
>
|
||||
<Avatar w={'36px'} h={'36px'} src={userInfo?.avatar} fallbackSrc={HUMAN_ICON} />
|
||||
</Box>
|
||||
{/* 导航列表 */}
|
||||
<Box flex={1}>
|
||||
{navbarList.map((item) => (
|
||||
<Tooltip
|
||||
label={item.label}
|
||||
key={item.label}
|
||||
placement={'right'}
|
||||
openDelay={100}
|
||||
gutter={-10}
|
||||
>
|
||||
<Link
|
||||
as={NextLink}
|
||||
href={item.link}
|
||||
{...itemStyles}
|
||||
{...(item.activeLink.includes(router.pathname)
|
||||
? {
|
||||
color: '#ffffff ',
|
||||
backgroundImage: 'linear-gradient(270deg,#4e83fd,#3370ff)'
|
||||
}
|
||||
: {
|
||||
color: '#9096a5',
|
||||
backgroundColor: 'transparent'
|
||||
})}
|
||||
>
|
||||
<MyIcon name={item.icon as any} width={'22px'} height={'22px'} />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Box>
|
||||
{unread > 0 && (
|
||||
<Box>
|
||||
<Link as={NextLink} {...itemStyles} href={`/number?type=inform`} mb={0} color={'#9096a5'}>
|
||||
<Badge count={unread}>
|
||||
<MyIcon name={'inform'} width={'22px'} height={'22px'} />
|
||||
</Badge>
|
||||
</Link>
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<Link
|
||||
as={NextLink}
|
||||
href="https://github.com/c121914yu/FastGPT"
|
||||
target={'_blank'}
|
||||
{...itemStyles}
|
||||
color={'#9096a5'}
|
||||
>
|
||||
<MyIcon name={'git'} width={'22px'} height={'22px'} />
|
||||
</Link>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
100
client/src/components/Layout/navbarPhone.tsx
Normal file
100
client/src/components/Layout/navbarPhone.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import MyIcon from '../Icon';
|
||||
import { Flex } from '@chakra-ui/react';
|
||||
import { useChatStore } from '@/store/chat';
|
||||
import Badge from '../Badge';
|
||||
|
||||
const NavbarPhone = ({ unread }: { unread: number }) => {
|
||||
const router = useRouter();
|
||||
const { lastChatModelId, lastChatId } = useChatStore();
|
||||
const navbarList = useMemo(
|
||||
() => [
|
||||
{
|
||||
icon: 'tabbarChat',
|
||||
link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
|
||||
activeLink: ['/chat'],
|
||||
unread: 0
|
||||
},
|
||||
{
|
||||
icon: 'tabbarModel',
|
||||
link: `/model`,
|
||||
activeLink: ['/model'],
|
||||
unread: 0
|
||||
},
|
||||
{
|
||||
icon: 'tabbarMore',
|
||||
link: '/tools',
|
||||
activeLink: ['/tools'],
|
||||
unread: 0
|
||||
},
|
||||
{
|
||||
icon: 'tabbarMe',
|
||||
link: '/number',
|
||||
activeLink: ['/number'],
|
||||
unread
|
||||
}
|
||||
],
|
||||
[lastChatId, lastChatModelId, 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%'}
|
||||
px={3}
|
||||
{...(item.activeLink.includes(router.asPath)
|
||||
? {
|
||||
color: '#7089f1'
|
||||
}
|
||||
: {
|
||||
color: 'myGray.500'
|
||||
})}
|
||||
_after={
|
||||
item.activeLink.includes(router.asPath)
|
||||
? {
|
||||
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'} />
|
||||
</Badge>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarPhone;
|
6
client/src/components/Layout/style.module.scss
Normal file
6
client/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