4.8.5 perf app ui (#1845)

* list ui and layout

* rename token key

* app ui

* ssr
This commit is contained in:
Archer
2024-06-25 19:37:28 +08:00
committed by GitHub
parent c8bc9838e3
commit 9aa6fd4904
15 changed files with 10426 additions and 8254 deletions

View File

@@ -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>

View File

@@ -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'}

View File

@@ -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;
};

View File

@@ -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>

View File

@@ -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')}>

View File

@@ -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={''}
/>
}

View File

@@ -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>

View File

@@ -144,6 +144,7 @@ const MyApps = () => {
gap={5}
display={'flex'}
alignItems={'center'}
fontSize={'md'}
onChange={(e) => {
router.push({
query: {

View File

@@ -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 (
<>

View File

@@ -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 />;
};

View File

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