4.8.5 perf app ui (#1845)

* list ui and layout

* rename token key

* app ui

* ssr

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