new framwork

This commit is contained in:
archer
2023-06-09 12:57:42 +08:00
parent d9450bd7ee
commit ba9d9c3d5f
263 changed files with 12269 additions and 11599 deletions

View 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;

View 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;

View 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;

View 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;

View File

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