mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-24 22:03:54 +00:00
4.8.5 perf app ui (#1845)
* list ui and layout * rename token key * app ui * ssr
This commit is contained in:
@@ -10,7 +10,6 @@ import { getUnreadCount } from '@/web/support/user/inform/api';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
import Auth from './auth';
|
||||
|
||||
const Navbar = dynamic(() => import('./navbar'));
|
||||
const NavbarPhone = dynamic(() => import('./navbarPhone'));
|
||||
const UpdateInviteModal = dynamic(() => import('@/components/support/user/team/UpdateInviteModal'));
|
||||
@@ -79,7 +78,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
|
||||
return (
|
||||
<>
|
||||
<Box h={'100%'} bg={'myGray.100'}>
|
||||
{isPc ? (
|
||||
{isPc === true && (
|
||||
<>
|
||||
{isHideNavbar ? (
|
||||
<Auth>{children}</Auth>
|
||||
@@ -94,22 +93,21 @@ const Layout = ({ children }: { children: JSX.Element }) => {
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
)}
|
||||
{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>
|
||||
{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>
|
||||
|
@@ -88,7 +88,7 @@ const Navbar = ({ unread }: { unread: number }) => {
|
||||
{/* logo */}
|
||||
<Box
|
||||
flex={'0 0 auto'}
|
||||
mb={5}
|
||||
mb={3}
|
||||
border={'2px solid #fff'}
|
||||
borderRadius={'50%'}
|
||||
overflow={'hidden'}
|
||||
|
@@ -1,6 +1,6 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { PermissionTypeEnum, PermissionTypeMap } from '@fastgpt/global/support/permission/constant';
|
||||
import { Box, Flex, FlexProps } from '@chakra-ui/react';
|
||||
import { Box, StackProps, HStack } from '@chakra-ui/react';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { PermissionValueType } from '@fastgpt/global/support/permission/type';
|
||||
@@ -15,7 +15,7 @@ const PermissionIconText = ({
|
||||
}: {
|
||||
permission?: `${PermissionTypeEnum}`;
|
||||
defaultPermission?: PermissionValueType;
|
||||
} & FlexProps) => {
|
||||
} & StackProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const per = useMemo(() => {
|
||||
@@ -30,12 +30,10 @@ const PermissionIconText = ({
|
||||
}, [defaultPermission, permission]);
|
||||
|
||||
return PermissionTypeMap[per] ? (
|
||||
<Flex alignItems={'center'} fontSize={fontSize} {...props}>
|
||||
<HStack spacing={1} fontSize={fontSize} {...props}>
|
||||
<MyIcon name={PermissionTypeMap[per]?.iconLight as any} w={w} />
|
||||
<Box ml={'2px'} lineHeight={1}>
|
||||
{t(PermissionTypeMap[per]?.label)}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box lineHeight={1}>{t(PermissionTypeMap[per]?.label)}</Box>
|
||||
</HStack>
|
||||
) : null;
|
||||
};
|
||||
|
||||
|
@@ -71,7 +71,7 @@ const AppCard = () => {
|
||||
<Box px={6} py={4} position={'relative'}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Avatar src={appDetail.avatar} borderRadius={'md'} w={'28px'} />
|
||||
<Box ml={3} fontWeight={'bold'} fontSize={'md'} flex={'1 0 0'}>
|
||||
<Box ml={3} fontWeight={'bold'} fontSize={'md'} flex={'1 0 0'} color={'myGray.900'}>
|
||||
{appDetail.name}
|
||||
</Box>
|
||||
</Flex>
|
||||
|
@@ -35,7 +35,7 @@ const ChatTest = ({ appForm }: { appForm: AppSimpleEditFormType }) => {
|
||||
return (
|
||||
<Flex position={'relative'} flexDirection={'column'} h={'100%'} py={4}>
|
||||
<Flex px={[2, 5]}>
|
||||
<Box fontSize={['md', 'lg']} fontWeight={'bold'} flex={1}>
|
||||
<Box fontSize={['md', 'lg']} fontWeight={'bold'} flex={1} color={'myGray.900'}>
|
||||
{appT('Chat Debug')}
|
||||
</Box>
|
||||
<MyTooltip label={t('core.chat.Restart')}>
|
||||
|
@@ -103,8 +103,14 @@ const ListItem = () => {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
py={[4, 6]}
|
||||
gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
|
||||
py={4}
|
||||
gridTemplateColumns={[
|
||||
'1fr',
|
||||
'repeat(2,1fr)',
|
||||
'repeat(3,1fr)',
|
||||
'repeat(3,1fr)',
|
||||
'repeat(4,1fr)'
|
||||
]}
|
||||
gridGap={5}
|
||||
alignItems={'stretch'}
|
||||
>
|
||||
@@ -126,14 +132,14 @@ const ListItem = () => {
|
||||
isLoading={loadingAppId === app._id}
|
||||
lineHeight={1.5}
|
||||
h="100%"
|
||||
pt={4}
|
||||
pt={5}
|
||||
pb={3}
|
||||
px={5}
|
||||
cursor={'pointer'}
|
||||
border={'base'}
|
||||
boxShadow={'2'}
|
||||
bg={'white'}
|
||||
borderRadius={'md'}
|
||||
borderRadius={'lg'}
|
||||
userSelect={'none'}
|
||||
position={'relative'}
|
||||
display={'flex'}
|
||||
@@ -171,24 +177,24 @@ const ListItem = () => {
|
||||
<AppTypeTag type={app.type} />
|
||||
</Box> */}
|
||||
<HStack>
|
||||
<Avatar src={app.avatar} borderRadius={'md'} w={'1.3rem'} />
|
||||
<Box flex={'1'} wordBreak={'break-all'}>
|
||||
<Avatar src={app.avatar} borderRadius={'md'} w={'1.5rem'} />
|
||||
<Box flex={'1 0 0'} fontSize={'1.125rem'}>
|
||||
{app.name}
|
||||
</Box>
|
||||
<Box alignSelf={'flex-start'} mr={'-1.25rem'}>
|
||||
<Box mr={'-1.25rem'}>
|
||||
<AppTypeTag type={app.type} />
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box
|
||||
flex={'1'}
|
||||
className={'textEllipsis3'}
|
||||
my={2}
|
||||
flex={'1 0 80px'}
|
||||
mt={3}
|
||||
pr={8}
|
||||
textAlign={'justify'}
|
||||
wordBreak={'break-all'}
|
||||
fontSize={'mini'}
|
||||
color={'myGray.600'}
|
||||
minH={'32px'}
|
||||
fontSize={'xs'}
|
||||
color={'myGray.500'}
|
||||
>
|
||||
{app.intro || '还没写介绍~'}
|
||||
<Box className={'textEllipsis2'}>{app.intro || '还没写介绍~'}</Box>
|
||||
</Box>
|
||||
<Flex
|
||||
h={'24px'}
|
||||
@@ -198,16 +204,16 @@ const ListItem = () => {
|
||||
color={'myGray.500'}
|
||||
>
|
||||
<HStack spacing={3.5}>
|
||||
{/* {owner && (
|
||||
{owner && (
|
||||
<HStack spacing={1}>
|
||||
<Avatar src={owner.avatar} w={'0.9rem'} />
|
||||
<Avatar src={owner.avatar} w={'0.875rem'} />
|
||||
<Box maxW={'150px'} className="textEllipsis">
|
||||
{owner.memberName}
|
||||
</Box>
|
||||
</HStack>
|
||||
)} */}
|
||||
)}
|
||||
|
||||
<PermissionIconText defaultPermission={app.defaultPermission} />
|
||||
<PermissionIconText defaultPermission={app.defaultPermission} w={'0.875rem'} />
|
||||
</HStack>
|
||||
|
||||
<HStack>
|
||||
@@ -222,7 +228,7 @@ const ListItem = () => {
|
||||
<IconButton
|
||||
size={'xsSquare'}
|
||||
variant={'transparentBase'}
|
||||
icon={<MyIcon name={'more'} w={'0.8rem'} />}
|
||||
icon={<MyIcon name={'more'} w={'0.875rem'} color={'myGray.500'} />}
|
||||
aria-label={''}
|
||||
/>
|
||||
}
|
||||
|
@@ -40,15 +40,15 @@ const AppTypeTag = ({ type }: { type: AppTypeEnum }) => {
|
||||
|
||||
return data ? (
|
||||
<Flex
|
||||
bg={data.bg}
|
||||
color={data.color}
|
||||
bg={'myGray.100'}
|
||||
color={'myGray.600'}
|
||||
py={0.5}
|
||||
pl={2}
|
||||
pr={2}
|
||||
pr={3}
|
||||
borderLeftRadius={'md'}
|
||||
whiteSpace={'nowrap'}
|
||||
>
|
||||
<MyIcon name={data.icon as any} w={'0.8rem'} />
|
||||
<MyIcon name={data.icon as any} w={'0.8rem'} color={'myGray.500'} />
|
||||
<Box ml={1} fontSize={'mini'}>
|
||||
{data.label}
|
||||
</Box>
|
||||
|
@@ -144,6 +144,7 @@ const MyApps = () => {
|
||||
gap={5}
|
||||
display={'flex'}
|
||||
alignItems={'center'}
|
||||
fontSize={'md'}
|
||||
onChange={(e) => {
|
||||
router.push({
|
||||
query: {
|
||||
|
@@ -12,6 +12,7 @@ import { serviceSideProps } from '@/web/common/utils/i18n';
|
||||
import { clearToken, setToken } from '@/web/support/user/auth';
|
||||
import Script from 'next/script';
|
||||
import Loading from '@fastgpt/web/components/common/MyLoading';
|
||||
import { useMount } from 'ahooks';
|
||||
|
||||
const RegisterForm = dynamic(() => import('./components/RegisterForm'));
|
||||
const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));
|
||||
@@ -61,10 +62,11 @@ const Login = () => {
|
||||
feConfigs?.oauth?.wechat ? LoginPageTypeEnum.wechat : LoginPageTypeEnum.passwordLogin
|
||||
);
|
||||
}, [feConfigs.oauth]);
|
||||
useEffect(() => {
|
||||
|
||||
useMount(() => {
|
||||
clearToken();
|
||||
router.prefetch('/app/list');
|
||||
}, []);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@@ -11,6 +11,7 @@ import Loading from '@fastgpt/web/components/common/MyLoading';
|
||||
import { serviceSideProps } from '@/web/common/utils/i18n';
|
||||
import { getErrText } from '@fastgpt/global/common/error/utils';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useMount } from 'ahooks';
|
||||
|
||||
const provider = ({ code, state, error }: { code: string; state: string; error?: string }) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -51,6 +52,7 @@ const provider = ({ code, state, error }: { code: string; state: string; error?:
|
||||
callbackUrl: `${location.origin}/login/provider`,
|
||||
inviterId: localStorage.getItem('inviterId') || undefined
|
||||
});
|
||||
|
||||
if (!res) {
|
||||
toast({
|
||||
status: 'warning',
|
||||
@@ -74,7 +76,7 @@ const provider = ({ code, state, error }: { code: string; state: string; error?:
|
||||
[loginStore, loginSuccess, router, toast]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
useMount(() => {
|
||||
clearToken();
|
||||
router.prefetch('/app/list');
|
||||
if (error) {
|
||||
@@ -98,7 +100,7 @@ const provider = ({ code, state, error }: { code: string; state: string; error?:
|
||||
return;
|
||||
}
|
||||
authCode(code);
|
||||
}, []);
|
||||
});
|
||||
|
||||
return <Loading />;
|
||||
};
|
||||
|
@@ -7,6 +7,13 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.textEllipsis2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.textEllipsis3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
|
Reference in New Issue
Block a user