4.8.5 perf app ui (#1845)

* list ui and layout * rename token key * app ui * ssr
2025-07-24 22:03:54 +00:00 · 2024-06-25 19:37:28 +08:00
parent c8bc9838e3
commit 9aa6fd4904
15 changed files with 10426 additions and 8254 deletions
--- a/projects/app/src/components/Layout/index.tsx
+++ b/projects/app/src/components/Layout/index.tsx
@@ -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>
--- a/projects/app/src/components/Layout/navbar.tsx
+++ b/projects/app/src/components/Layout/navbar.tsx
@@ -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'}
--- a/projects/app/src/components/support/permission/IconText/index.tsx
+++ b/projects/app/src/components/support/permission/IconText/index.tsx
@@ -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;
 };

--- a/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
@@ -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>
--- a/projects/app/src/pages/app/detail/components/SimpleApp/ChatTest.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleApp/ChatTest.tsx
@@ -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')}>
--- a/projects/app/src/pages/app/list/components/List.tsx
+++ b/projects/app/src/pages/app/list/components/List.tsx
@@ -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={''}
                            />
                          }
--- a/projects/app/src/pages/app/list/components/TypeTag.tsx
+++ b/projects/app/src/pages/app/list/components/TypeTag.tsx
@@ -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>
--- a/projects/app/src/pages/app/list/index.tsx
+++ b/projects/app/src/pages/app/list/index.tsx
@@ -144,6 +144,7 @@ const MyApps = () => {
              gap={5}
              display={'flex'}
              alignItems={'center'}
+              fontSize={'md'}
              onChange={(e) => {
                router.push({
                  query: {
--- a/projects/app/src/pages/login/index.tsx
+++ b/projects/app/src/pages/login/index.tsx
@@ -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 (
    <>
--- a/projects/app/src/pages/login/provider.tsx
+++ b/projects/app/src/pages/login/provider.tsx
@@ -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 />;
 };
--- a/projects/app/src/web/styles/default.scss
+++ b/projects/app/src/web/styles/default.scss
@@ -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;