Updae theme and fix some bug (#1711)

docSite/content/zh-cn/docs/development/upgrading/484.md

@@ -0,0 +1,22 @@
+---
+title: 'V4.8.4(进行中)'
+description: 'FastGPT V4.8.4 更新说明'
+icon: 'upgrade'
+draft: false
+toc: true
+weight: 821
+---
+
+<!-- ## 升级指南
+
+- fastgpt 镜像 tag 修改成 v4.8.4
+- fastgpt-sandbox 镜像 tag 修改成 v4.8.4 (选择性，无变更)
+- 商业版镜像 tag 修改成 v4.8.4 -->
+
+## V4.8.4 更新说明
+
+1. 新增 - 应用使用新权限系统。
+2. 优化 - 文本分割增加连续换行、制表符清除，避免大文本性能问题。
+3. 修复 - Debug 模式下，相同 source 和 target 内容，导致连线显示异常。
+4. 修复 - 定时执行初始化错误。
+5. 调整组件库全局theme。

packages/global/common/string/textSplitter.ts

@@ -102,6 +102,8 @@ const commonSplit = (props: SplitProps): SplitResponse => {
   text = text.replace(/(```[\s\S]*?```|~~~[\s\S]*?~~~)/g, function (match) {
     return match.replace(/\n/g, codeBlockMarker);
   });
+  // replace invalid \n
+  text = text.replace(/(\r?\n|\r){3,}/g, '\n\n\n');
 
   // The larger maxLen is, the next sentence is less likely to trigger splitting
   const stepReges: { reg: RegExp; maxLen: number }[] = [
@@ -338,7 +340,7 @@ const commonSplit = (props: SplitProps): SplitResponse => {
  */
 export const splitText2Chunks = (props: SplitProps): SplitResponse => {
   let { text = '' } = props;
-
+  const start = Date.now();
   const splitWithCustomSign = text.split(CUSTOM_SPLIT_SIGN);
 
   const splitResult = splitWithCustomSign.map((item) => {
@@ -348,7 +350,7 @@ export const splitText2Chunks = (props: SplitProps): SplitResponse => {
 
     return commonSplit(props);
   });
-
+  console.log(Date.now() - start);
   return {
     chunks: splitResult.map((item) => item.chunks).flat(),
     chars: splitResult.reduce((sum, item) => sum + item.chars, 0)

packages/global/core/workflow/template/system/systemConfig.ts

@@ -1,6 +1,6 @@
 import { FlowNodeTypeEnum } from '../../node/constant';
 import { FlowNodeTemplateType } from '../../type/index.d';
-import { FlowNodeTemplateTypeEnum, WorkflowIOValueTypeEnum } from '../../constants';
+import { FlowNodeTemplateTypeEnum } from '../../constants';
 import { getHandleConfig } from '../utils';
 
 export const SystemConfigNode: FlowNodeTemplateType = {

packages/service/common/file/gridfs/controller.ts

@@ -8,7 +8,7 @@ import { detectFileEncoding } from '@fastgpt/global/common/file/tools';
 import { CommonErrEnum } from '@fastgpt/global/common/error/code/common';
 import { MongoRawTextBuffer } from '../../buffer/rawText/schema';
 import { readRawContentByFileBuffer } from '../read/utils';
-import { PassThrough } from 'stream';
+import { gridFsStream2Buffer } from './utils';
 
 export function getGFSCollection(bucket: `${BucketNameEnum}`) {
   MongoFileSchema;
@@ -113,35 +113,16 @@ export async function getDownloadStream({
   fileId: string;
 }) {
   const bucket = getGridBucket(bucketName);
-  const stream = bucket.openDownloadStream(new Types.ObjectId(fileId));
-  const copyStream = stream.pipe(new PassThrough());
+  const encodeStream = bucket.openDownloadStream(new Types.ObjectId(fileId), { end: 100 });
+  const rawStream = bucket.openDownloadStream(new Types.ObjectId(fileId));
 
   /* get encoding */
-  const buffer = await (() => {
-    return new Promise<Buffer>((resolve, reject) => {
-      let tmpBuffer: Buffer = Buffer.from([]);
-
-      stream.on('data', (chunk) => {
-        if (tmpBuffer.length < 20) {
-          tmpBuffer = Buffer.concat([tmpBuffer, chunk]);
-        }
-        if (tmpBuffer.length >= 20) {
-          resolve(tmpBuffer);
-        }
-      });
-      stream.on('end', () => {
-        resolve(tmpBuffer);
-      });
-      stream.on('error', (err) => {
-        reject(err);
-      });
-    });
-  })();
+  const buffer = await gridFsStream2Buffer(encodeStream);
 
   const encoding = detectFileEncoding(buffer);
 
   return {
-    fileStream: copyStream,
+    fileStream: rawStream,
     encoding
     // encoding: 'utf-8'
   };
@@ -169,32 +150,21 @@ export const readFileContentFromMongo = async ({
       filename: fileBuffer.metadata?.filename || ''
     };
   }
+  const start = Date.now();
 
   const [file, { encoding, fileStream }] = await Promise.all([
     getFileById({ bucketName, fileId }),
     getDownloadStream({ bucketName, fileId })
   ]);
-
+  // console.log('get file stream', Date.now() - start);
   if (!file) {
     return Promise.reject(CommonErrEnum.fileNotFound);
   }
 
   const extension = file?.filename?.split('.')?.pop()?.toLowerCase() || '';
 
-  const fileBuffers = await (() => {
-    return new Promise<Buffer>((resolve, reject) => {
-      let buffer = Buffer.from([]);
-      fileStream.on('data', (chunk) => {
-        buffer = Buffer.concat([buffer, chunk]);
-      });
-      fileStream.on('end', () => {
-        resolve(buffer);
-      });
-      fileStream.on('error', (err) => {
-        reject(err);
-      });
-    });
-  })();
+  const fileBuffers = await gridFsStream2Buffer(fileStream);
+  // console.log('get file buffer', Date.now() - start);
 
   const { rawText } = await readRawContentByFileBuffer({
     extension,

packages/service/common/file/gridfs/utils.ts

@@ -0,0 +1,15 @@
+export const gridFsStream2Buffer = (stream: NodeJS.ReadableStream) => {
+  return new Promise<Buffer>((resolve, reject) => {
+    let tmpBuffer: Buffer = Buffer.from([]);
+
+    stream.on('data', (chunk) => {
+      tmpBuffer = Buffer.concat([tmpBuffer, chunk]);
+    });
+    stream.on('end', () => {
+      resolve(tmpBuffer);
+    });
+    stream.on('error', (err) => {
+      reject(err);
+    });
+  });
+};

packages/web/components/common/DateRangePicker/index.tsx

@@ -49,11 +49,13 @@ const DateRangePicker = ({
         py={1}
         borderRadius={'sm'}
         cursor={'pointer'}
-        bg={'myWhite.600'}
+        bg={'myGray.100'}
         fontSize={'sm'}
         onClick={() => setShowSelected(true)}
       >
-        <Box>{formatSelected}</Box>
+        <Box color={'myGray.600'} fontWeight={'400'}>
+          {formatSelected}
+        </Box>
         <MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
       </Flex>
       {showSelected && (

packages/web/components/common/DndDrag/DragIcon.tsx

@@ -5,7 +5,7 @@ import { DraggableProvided } from 'react-beautiful-dnd';
 
 const DragIcon = ({ provided, ...props }: { provided: DraggableProvided } & BoxProps) => {
   return (
-    <Box {...provided.dragHandleProps} {...props}>
+    <Box {...provided.dragHandleProps} {...props} lineHeight={1}>
       <DragHandleIcon color={'myGray.500'} _hover={{ color: 'primary.600' }} />
     </Box>
   );

packages/web/components/common/EmptyTip/index.tsx

@@ -12,7 +12,7 @@ const EmptyTip = ({ text, ...props }: Props) => {
   return (
     <Flex mt={5} flexDirection={'column'} alignItems={'center'} py={'10vh'} {...props}>
       <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-      <Box mt={2} color={'myGray.500'}>
+      <Box mt={2} color={'myGray.500'} fontSize={'sm'}>
         {text || t('common.empty.Common Tip')}
       </Box>
     </Flex>

packages/web/components/common/MyBox/FormLabel.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Box, BoxProps } from '@chakra-ui/react';
+
+const FormLabel = ({
+  children,
+  ...props
+}: BoxProps & {
+  children: React.ReactNode;
+}) => {
+  return (
+    <Box color={'myGray.900'} fontSize={'sm'} {...props}>
+      {children}
+    </Box>
+  );
+};
+
+export default FormLabel;

packages/web/components/common/MyDrawer/CustomRightDrawer.tsx

@@ -56,7 +56,7 @@ const CustomRightDrawer = ({
             )}
           </>
         )}
-        <Box flex={'1'} fontSize={'lg'}>
+        <Box flex={'1'} fontSize={'md'}>
           {title}
         </Box>
         <CloseButton position={'relative'} fontSize={'sm'} top={0} right={0} onClick={onClose} />

packages/web/components/common/MyDrawer/MyRightDrawer.tsx

@@ -61,7 +61,7 @@ const MyRightDrawer = ({
               )}
             </>
           )}
-          <Box flex={'1'} fontSize={'lg'}>
+          <Box flex={'1'} fontSize={'md'}>
             {title}
           </Box>
           <DrawerCloseButton position={'relative'} fontSize={'sm'} top={0} right={0} />

packages/web/components/common/MyMenu/index.tsx

@@ -9,6 +9,7 @@ import {
   MenuItemProps
 } from '@chakra-ui/react';
 import MyIcon from '../Icon';
+import MyDivider from '../MyDivider';
 
 type MenuItemType = 'primary' | 'danger';
 
@@ -18,11 +19,14 @@ export type Props = {
   Button: React.ReactNode;
   trigger?: 'hover' | 'click';
   menuList: {
-    isActive?: boolean;
-    label: string | React.ReactNode;
-    icon?: string;
-    type?: MenuItemType;
-    onClick: () => any;
+    label?: string;
+    children: {
+      isActive?: boolean;
+      type?: MenuItemType;
+      icon?: string;
+      label: string | React.ReactNode;
+      onClick: () => any;
+    }[];
   }[];
 };
 
@@ -49,9 +53,11 @@ const MyMenu = ({
   };
   const menuItemStyles: MenuItemProps = {
     borderRadius: 'sm',
-    py: 3,
+    py: 2,
+    px: 3,
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
+    fontSize: 'sm'
   };
   const ref = useRef<HTMLDivElement>(null);
   const closeTimer = useRef<any>();
@@ -109,23 +115,32 @@ const MyMenu = ({
             '0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
           }
         >
-          {menuList.map((item, i) => (
-            <MenuItem
-              key={i}
-              {...menuItemStyles}
-              {...typeMapStyle[item.type || 'primary']}
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsOpen(false);
-                item.onClick && item.onClick();
-              }}
-              color={item.isActive ? 'primary.700' : 'myGray.600'}
-              whiteSpace={'pre-wrap'}
-            >
-              {!!item.icon && <MyIcon name={item.icon as any} w={'16px'} mr={2} />}
-              {item.label}
-            </MenuItem>
-          ))}
+          {menuList.map((item, i) => {
+            return (
+              <Box key={i}>
+                {item.label && <Box fontSize={'sm'}>{item.label}</Box>}
+                {i !== 0 && <MyDivider h={'1.5px'} my={1} />}
+                {item.children.map((child, index) => (
+                  <MenuItem
+                    key={index}
+                    {...menuItemStyles}
+                    {...typeMapStyle[child.type || 'primary']}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsOpen(false);
+                      child.onClick && child.onClick();
+                    }}
+                    color={child.isActive ? 'primary.700' : 'myGray.600'}
+                    whiteSpace={'pre-wrap'}
+                    _notLast={{ mb: 0.5 }}
+                  >
+                    {!!child.icon && <MyIcon name={child.icon as any} w={'16px'} mr={2} />}
+                    <Box>{child.label}</Box>
+                  </MenuItem>
+                ))}
+              </Box>
+            );
+          })}
         </MenuList>
       </Box>
     </Menu>

packages/web/components/common/MyModal/index.tsx

@@ -64,6 +64,7 @@ const MyModal = ({
             borderBottom={'1px solid #F4F6F8'}
             roundedTop={'lg'}
             py={'10px'}
+            fontSize={'md'}
           >
             {iconSrc && (
               <>

packages/web/components/common/MySelect/MultipleSelect.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, useDisclosure, useOutsideClick } from '@chakra-ui/react';
 import React, { useRef } from 'react';
 import { useTranslation } from 'next-i18next';
-import FillTag from '../Tag/index';
+import MyTag from '../Tag/index';
 import MyIcon from '../Icon';
 
 export type SelectProps = {
@@ -51,7 +51,7 @@ const MultipleSelect = ({
           if (!listItem) return null;
 
           return (
-            <FillTag colorSchema="blue" p={2} cursor={'default'}>
+            <MyTag colorSchema="blue" p={2} cursor={'default'}>
               {listItem.alias || listItem.label}
               <MyIcon
                 name={'common/closeLight'}
@@ -63,7 +63,7 @@ const MultipleSelect = ({
                   onSelect(value.filter((i) => i !== item));
                 }}
               />
-            </FillTag>
+            </MyTag>
           );
         })}
         {value.length === 0 && placeholder && (

packages/web/components/common/MySelect/index.tsx

@@ -135,6 +135,7 @@ const MySelect = (
                 }
               }}
               whiteSpace={'pre-wrap'}
+              fontSize={'sm'}
             >
               {item.label}
             </MenuItem>

packages/web/components/common/MyTooltip/QuestionTip.tsx

@@ -9,7 +9,7 @@ type Props = IconProps & {
 const QuestionTip = ({ label, maxW, ...props }: Props) => {
   return (
     <MyTooltip label={label} maxW={maxW}>
-      <QuestionOutlineIcon {...props} />
+      <QuestionOutlineIcon w={'0.9rem'} {...props} />
     </MyTooltip>
   );
 };

packages/web/components/common/MyTooltip/index.tsx

@@ -17,7 +17,7 @@ const MyTooltip = ({ children, forceShow = false, shouldWrapChildren = true, ...
       })}
     >
       <Tooltip
-        className="tooltip"
+        className="chakra-tooltip"
         bg={'white'}
         arrowShadowColor={'rgba(0,0,0,0.05)'}
         hasArrow

packages/web/components/common/Radio/LeftRadio.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Box, Flex, useTheme, Grid, type GridProps } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import MyTooltip from '../MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import QuestionTip from '../MyTooltip/QuestionTip';
 
 // @ts-ignore
@@ -95,6 +94,7 @@ const LeftRadio = ({
                 color={'myGray.900'}
                 fontWeight={item.desc ? '500' : 'normal'}
                 whiteSpace={'nowrap'}
+                fontSize={'sm'}
               >
                 {typeof item.title === 'string' ? t(item.title) : item.title}
               </Box>

packages/web/components/common/Tabs/RowTabs.tsx

@@ -23,6 +23,7 @@ const RowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props }: P
       borderColor={'borderColor.base'}
       bg={'myGray.50'}
       gap={'4px'}
+      fontSize={'sm'}
       {...props}
     >
       {list.map((item) => (

packages/web/components/common/Tag/index.tsx

@@ -1,69 +1,78 @@
 import React, { useMemo } from 'react';
 import { Flex, type FlexProps } from '@chakra-ui/react';
 
+type ColorSchemaType = 'blue' | 'green' | 'red' | 'yellow' | 'gray' | 'purple' | 'adora';
+
 interface Props extends FlexProps {
   children: React.ReactNode | React.ReactNode[];
-  colorSchema?: 'blue' | 'green' | 'gray' | 'purple';
-  type?: 'fill' | 'solid';
+  colorSchema?: ColorSchemaType;
+  type?: 'fill' | 'borderFill' | 'borderSolid';
 }
 
+const colorMap: Record<
+  ColorSchemaType,
+  {
+    borderColor: string;
+    bg: string;
+    color: string;
+  }
+> = {
+  yellow: {
+    borderColor: 'yellow.200',
+    bg: 'yellow.50',
+    color: 'yellow.600'
+  },
+  green: {
+    borderColor: 'green.200',
+    bg: 'green.50',
+    color: 'green.600'
+  },
+  red: {
+    borderColor: 'red.200',
+    bg: 'red.50',
+    color: 'red.600'
+  },
+  gray: {
+    borderColor: 'myGray.200',
+    bg: 'myGray.50',
+    color: 'myGray.700'
+  },
+  blue: {
+    borderColor: 'primary.200',
+    bg: 'primary.50',
+    color: 'primary.600'
+  },
+  purple: {
+    borderColor: '#ECF',
+    bg: '#F6EEFA',
+    color: '#A558C9'
+  },
+  adora: {
+    borderColor: '#D3CAFF',
+    bg: '#F0EEFF',
+    color: '#6F5DD7'
+  }
+};
+
 const MyTag = ({ children, colorSchema = 'blue', type = 'fill', ...props }: Props) => {
   const theme = useMemo(() => {
-    const fillMap = {
-      blue: {
-        borderColor: 'primary.200',
-        bg: 'primary.50',
-        color: 'primary.700'
-      },
-      green: {
-        borderColor: 'green.200',
-        bg: 'green.50',
-        color: 'green.600'
-      },
-      purple: {
-        borderColor: '#ECF',
-        bg: '#F6EEFA',
-        color: '#A558C9'
-      },
-      gray: {
-        borderColor: 'myGray.200',
-        bg: 'myGray.50',
-        color: 'myGray.700'
-      }
-    };
-    const solidMap = {
-      blue: {
-        borderColor: 'primary.200',
-        color: 'primary.600'
-      },
-      green: {
-        borderColor: 'green.200',
-        color: 'green.600'
-      },
-      purple: {
-        borderColor: '#ECF',
-        color: '#9E53C1'
-      },
-      gray: {
-        borderColor: 'myGray.200',
-        color: 'myGray.700'
-      }
-    };
-    return type === 'fill' ? fillMap[colorSchema] : solidMap[colorSchema];
+    return colorMap[colorSchema];
   }, [colorSchema]);
 
   return (
     <Flex
-      px={2}
+      px={2.5}
       lineHeight={1}
       py={1}
       borderRadius={'sm'}
-      fontSize={'sm'}
+      fontSize={'xs'}
       alignItems={'center'}
       whiteSpace={'nowrap'}
       borderWidth={'1px'}
-      {...props}
       {...theme}
+      {...props}
+      borderColor={type !== 'fill' ? theme.borderColor : 'transparent'}
+      bg={type !== 'borderSolid' ? theme.bg : 'transparent'}
     >
       {children}
     </Flex>

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -105,7 +105,7 @@ export default function Editor({
             >
               <Box
                 color={'myGray.400'}
-                fontSize={'11px'}
+                fontSize={'mini'}
                 userSelect={'none'}
                 whiteSpace={'pre-wrap'}
                 wordBreak={'break-all'}

packages/web/components/common/Textarea/PromptEditor/index.module.scss

@@ -6,7 +6,7 @@
   border-radius: var(--chakra-radii-md);
   padding: 8px 12px;
   background: var(--chakra-colors-gray-50);
-  font-size: 14px;
+  font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
 }
 
@@ -18,7 +18,7 @@
   border-radius: var(--chakra-radii-sm);
   padding: 6px 8px;
   background: #fff;
-  font-size: 14px;
+  font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
 }
 

packages/web/components/core/workflow/NodeInputSelect.tsx

@@ -142,7 +142,7 @@ const NodeInputSelect = ({
 
   return (
     <MyMenu
-      offset={[0, -1]}
+      offset={[-0.5, -0.5]}
       Button={
         <Button
           size={'xs'}
@@ -154,7 +154,7 @@ const NodeInputSelect = ({
           <Box fontWeight={'medium'}>{renderTypeData.title}</Box>
         </Button>
       }
-      menuList={filterMenuList}
+      menuList={[{ children: filterMenuList }]}
     />
   );
 };

packages/web/hooks/useScrollPagination.tsx

@@ -115,7 +115,7 @@ export function useScrollPagination<
           <MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
             <Box ref={wrapperRef}>{children}</Box>
             {noMore.current && list.length > 0 && (
-              <Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'sm'}>
+              <Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'xs'}>
                 {t('common.No more data')}
               </Box>
             )}

packages/web/hooks/useToast.tsx

@@ -5,6 +5,9 @@ export const useToast = (props?: UseToastOptions) => {
   const toast = uToast({
     position: 'top',
     duration: 2000,
+    containerStyle: {
+      fontSize: 'sm'
+    },
     ...props
   });
 

packages/web/styles/theme.ts

@@ -4,13 +4,14 @@ import {
   switchAnatomy,
   selectAnatomy,
   numberInputAnatomy,
-  checkboxAnatomy
+  checkboxAnatomy,
+  tableAnatomy,
+  radioAnatomy
 } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
 
-const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
-  modalAnatomy.keys
-);
+const { definePartsStyle: modalPart, defineMultiStyleConfig: modalMultiStyle } =
+  createMultiStyleConfigHelpers(modalAnatomy.keys);
 const { definePartsStyle: switchPart, defineMultiStyleConfig: switchMultiStyle } =
   createMultiStyleConfigHelpers(switchAnatomy.keys);
 const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
@@ -19,6 +20,10 @@ const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiSty
   createMultiStyleConfigHelpers(numberInputAnatomy.keys);
 const { definePartsStyle: checkBoxPart, defineMultiStyleConfig: checkBoxMultiStyle } =
   createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+const { definePartsStyle: tablePart, defineMultiStyleConfig: tableMultiStyle } =
+  createMultiStyleConfigHelpers(tableAnatomy.keys);
+const { definePartsStyle: radioParts, defineMultiStyleConfig: radioStyle } =
+  createMultiStyleConfigHelpers(radioAnatomy.keys);
 
 const shadowLight = '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)';
 
@@ -65,7 +70,7 @@ const Button = defineStyleConfig({
       borderRadius: '8px'
     },
     md: {
-      fontSize: 'md',
+      fontSize: 'sm',
       px: '20px',
       py: 0,
       h: '36px',
@@ -73,7 +78,7 @@ const Button = defineStyleConfig({
       borderRadius: '8px'
     },
     mdSquare: {
-      fontSize: 'md',
+      fontSize: 'sm',
       px: '0',
       py: 0,
       h: '36px',
@@ -267,9 +272,6 @@ const Button = defineStyleConfig({
 });
 
 const Input: ComponentStyleConfig = {
-  baseStyle: {
-    fontsize: '1rem'
-  },
   sizes: {
     sm: defineStyle({
       field: {
@@ -312,13 +314,15 @@ const NumberInput = numInputMultiStyle({
     sm: defineStyle({
       field: {
         h: '32px',
-        borderRadius: 'md'
+        borderRadius: 'md',
+        fontsize: 'sm'
       }
     }),
     md: defineStyle({
       field: {
         h: '40px',
-        borderRadius: 'md'
+        borderRadius: 'md',
+        fontsize: 'sm'
       }
     })
   },
@@ -359,6 +363,7 @@ const Textarea: ComponentStyleConfig = {
       border: '1px solid',
       borderRadius: 'md',
       borderColor: 'myGray.200',
+      fontSize: 'sm',
       _hover: {
         borderColor: ''
       },
@@ -406,12 +411,34 @@ const Select = selectMultiStyle({
   }
 });
 
+const Radio = radioStyle({
+  baseStyle: radioParts({
+    control: {
+      _hover: {
+        borderColor: 'primary.300',
+        bg: 'primary.50'
+      },
+      _checked: {
+        borderColor: 'primary.600',
+        bg: 'primary.50',
+        boxShadow: shadowLight,
+        _before: {
+          bg: 'primary.600'
+        },
+        _hover: {
+          bg: 'primary.50'
+        }
+      }
+    }
+  })
+});
 const Checkbox = checkBoxMultiStyle({
   baseStyle: checkBoxPart({
     label: {
       fontFamily: 'mono' // change the font family of the label
     },
     control: {
+      borderRadius: 'xs',
       bg: 'none',
       _checked: {
         bg: 'primary.50',
@@ -429,10 +456,10 @@ const Checkbox = checkBoxMultiStyle({
   })
 });
 
-const Modal = defineMultiStyleConfig({
-  baseStyle: definePartsStyle({
+const Modal = modalMultiStyle({
+  baseStyle: modalPart({
     body: {
-      py: [3, 5],
+      py: [2, 4],
       px: [5, 7]
     },
     footer: {
@@ -441,20 +468,62 @@ const Modal = defineMultiStyleConfig({
   })
 });
 
+const Table = tableMultiStyle({
+  sizes: {
+    md: defineStyle({
+      table: {
+        fontsize: 'sm'
+      },
+      thead: {
+        tr: {
+          bg: 'myGray.100',
+          fontSize: 'sm',
+          th: {
+            borderBottom: 'none',
+            overflow: 'hidden',
+            '&:first-of-type': {
+              borderLeftRadius: 'md'
+            },
+            '&:last-of-type': {
+              borderRightRadius: 'md'
+            }
+          }
+        }
+      },
+      tbody: {
+        tr: {
+          td: {
+            overflow: 'hidden',
+            '&:first-of-type': {
+              borderLeftRadius: 'md'
+            },
+            '&:last-of-type': {
+              borderRightRadius: 'md'
+            }
+          }
+        }
+      }
+    })
+  },
+  defaultProps: {
+    size: 'md'
+  }
+});
+
 // 全局主题
 export const theme = extendTheme({
   styles: {
     global: {
       'html, body': {
-        fontSize: '14px',
-        color: 'myGray.900',
-        fontWeight: 400,
+        color: 'myGray.600',
+        fontWeight: 'normal',
         height: '100%',
         overflow: 'hidden'
       },
       a: {
         color: 'primary.600'
       },
+
       '*': {
         _focusVisible: {
           boxShadow: 'none'
@@ -586,16 +655,17 @@ export const theme = extendTheme({
     body: 'PingFang,Noto Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
   },
   fontSizes: {
+    mini: '0.75rem',
     xs: '0.8rem',
-    sm: '0.93rem',
+    sm: '0.875rem',
     md: '1rem',
-    lg: '1.15rem',
-    xl: '1.3rem',
-    '2xl': '1.45rem',
-    '3xl': '1.6rem',
-    '4xl': '1.75rem',
-    '5xl': '1.9rem',
-    '6xl': '2.05rem'
+    lg: '1.25rem',
+    xl: '1.5rem',
+    '2xl': '1.75rem',
+    '3xl': '2rem',
+    '4xl': '2.25rem',
+    '5xl': '2.8rem',
+    '6xl': '3.6rem'
   },
   borders: {
     sm: '1px solid #E8EBF0',
@@ -644,6 +714,8 @@ export const theme = extendTheme({
     Select,
     NumberInput,
     Checkbox,
-    Modal
+    Modal,
+    Table,
+    Radio
   }
 });

projects/app/i18n/zh/common.json

@@ -532,6 +532,7 @@
       "Go Dataset": "前往知识库",
       "Intro Placeholder": "这个知识库还没有介绍~",
       "Manual collection": "手动数据集",
+      "externalFile": "外部文件库",
       "My Dataset": "我的知识库",
       "Name": "知识库名称",
       "Query extension intro": "开启问题优化功能，可以提高提高连续对话时，知识库搜索的精度。开启该功能后，在进行知识库搜索时，会根据对话记录，利用 AI 补全问题缺失的信息。",
@@ -585,8 +586,7 @@
             "success": "开始同步"
           }
         },
-        "training": {
-        }
+        "training": {}
       },
       "data": {
         "Auxiliary Data": "辅助数据",

projects/app/src/components/ChatBox/Input/ChatInput.tsx

@@ -3,7 +3,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { Box, Flex, Image, Spinner, Textarea } from '@chakra-ui/react';
 import React, { useRef, useEffect, useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
-import MyTooltip from '../../MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { compressImgFileAndUpload } from '@/web/common/file/controller';

projects/app/src/components/ChatBox/components/ResponseTags.tsx

@@ -7,7 +7,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
 import type { SearchDataResponseItemType } from '@fastgpt/global/core/dataset/type';
 import dynamic from 'next/dynamic';
 import MyTag from '@fastgpt/web/components/common/Tag/index';
-import MyTooltip from '../../MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
 import { getSourceNameIcon } from '@fastgpt/global/core/dataset/utils';
 import ChatBoxDivider from '@/components/core/chat/Divider';
@@ -108,9 +108,9 @@ const ResponseTags = ({
               <MyTooltip key={item.collectionId} label={t('core.chat.quote.Read Quote')}>
                 <Flex
                   alignItems={'center'}
-                  fontSize={'sm'}
+                  fontSize={'xs'}
                   border={theme.borders.sm}
-                  py={1}
+                  py={1.5}
                   px={2}
                   borderRadius={'sm'}
                   _hover={{
@@ -149,7 +149,7 @@ const ResponseTags = ({
             <MyTooltip label="查看引用">
               <MyTag
                 colorSchema="blue"
-                type="solid"
+                type="borderSolid"
                 cursor={'pointer'}
                 onClick={() => setQuoteModalData({ rawSearch: quoteList })}
               >
@@ -164,7 +164,7 @@ const ResponseTags = ({
                   <MyTag
                     colorSchema="green"
                     cursor={'pointer'}
-                    type="solid"
+                    type="borderSolid"
                     onClick={() => setContextModalData(historyPreview)}
                   >
                     {historyPreview.length}条上下文
@@ -174,20 +174,25 @@ const ResponseTags = ({
             </>
           )}
           {llmModuleAccount > 1 && (
-            <MyTag type="solid" colorSchema="blue">
+            <MyTag type="borderSolid" colorSchema="blue">
               多组 AI 对话
             </MyTag>
           )}
 
           {isPc && runningTime > 0 && (
             <MyTooltip label={'模块运行时间和'}>
-              <MyTag colorSchema="purple" type="solid" cursor={'default'}>
+              <MyTag colorSchema="purple" type="borderSolid" cursor={'default'}>
                 {runningTime}s
               </MyTag>
             </MyTooltip>
           )}
           <MyTooltip label={t('core.chat.response.Read complete response tips')}>
-            <MyTag colorSchema="gray" type="solid" cursor={'pointer'} onClick={onOpenWholeModal}>
+            <MyTag
+              colorSchema="gray"
+              type="borderSolid"
+              cursor={'pointer'}
+              onClick={onOpenWholeModal}
+            >
               {t('core.chat.response.Read complete response')}
             </MyTag>
           </MyTooltip>

projects/app/src/components/ChatBox/components/SelectMarkCollection.tsx

@@ -8,6 +8,7 @@ import DatasetSelectModal, { useDatasetSelect } from '@/components/core/dataset/
 import dynamic from 'next/dynamic';
 import { AdminFbkType } from '@fastgpt/global/core/chat/type.d';
 import SelectCollections from '@/web/core/dataset/components/SelectCollections';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 
 const InputDataModal = dynamic(() => import('@/pages/dataset/detail/components/InputDataModal'));
 
@@ -76,7 +77,7 @@ const SelectMarkCollection = ({
                     >
                       <Flex alignItems={'center'} h={'38px'}>
                         <Avatar src={item.avatar} w={['24px', '28px', '32px']}></Avatar>
-                        <Box ml={3} fontWeight={'bold'} fontSize={['md', 'lg', 'xl']}>
+                        <Box ml={3} fontWeight={'bold'} fontSize={['md', 'lg']}>
                           {item.name}
                         </Box>
                       </Flex>
@@ -89,14 +90,7 @@ const SelectMarkCollection = ({
                 })()
               )}
             </Grid>
-            {datasets.length === 0 && (
-              <Flex mt={'10vh'} flexDirection={'column'} alignItems={'center'}>
-                <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-                <Box mt={2} color={'myGray.500'}>
-                  这个目录已经没东西可选了~
-                </Box>
-              </Flex>
-            )}
+            {datasets.length === 0 && <EmptyTip text={'这个目录已经没东西可选了~'}></EmptyTip>}
           </ModalBody>
         </DatasetSelectModal>
       )}

projects/app/src/components/ChatBox/components/WholeResponseModal.tsx

@@ -6,13 +6,13 @@ import { moduleTemplatesFlat } from '@fastgpt/global/core/workflow/template/cons
 
 import Tabs from '../../Tabs';
 import MyModal from '@fastgpt/web/components/common/MyModal';
-import MyTooltip from '../../MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import Markdown from '../../Markdown';
 import { QuoteList } from './QuoteModal';
 import { DatasetSearchModeMap } from '@fastgpt/global/core/dataset/constants';
 import { formatNumber } from '@fastgpt/global/common/math/tools';
 import { useI18n } from '@/web/context/I18n';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 function RowRender({
   children,
@@ -22,10 +22,10 @@ function RowRender({
 }: { children: React.ReactNode; label: string } & BoxProps) {
   return (
     <Box mb={3}>
-      <Box fontSize={['sm', 'md']} mb={mb} flex={'0 0 90px'}>
+      <Box fontSize={'sm'} mb={mb} flex={'0 0 90px'}>
         {label}:
       </Box>
-      <Box borderRadius={'sm'} fontSize={'sm'} bg={'myGray.50'} {...props}>
+      <Box borderRadius={'sm'} fontSize={['xs', 'sm']} bg={'myGray.50'} {...props}>
         {children}
       </Box>
     </Box>
@@ -98,9 +98,7 @@ const WholeResponseModal = ({
       title={
         <Flex alignItems={'center'}>
           {t('core.chat.response.Complete Response')}
-          <MyTooltip label={'从左往右，为各个模块的响应顺序'}>
-            <QuestionOutlineIcon ml={2} />
-          </MyTooltip>
+          <QuestionTip ml={2} label={'从左往右，为各个模块的响应顺序'}></QuestionTip>
         </Flex>
       }
     >

projects/app/src/components/ChatBox/index.tsx

@@ -32,7 +32,7 @@ import {
 } from '@/web/core/chat/api';
 import type { AdminMarkType } from './components/SelectMarkCollection';
 
-import MyTooltip from '../MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 
 import { postQuestionGuide } from '@/web/core/ai/api';
 import type {

projects/app/src/components/Layout/navbar.tsx

@@ -10,7 +10,7 @@ import Avatar from '../Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
-import MyTooltip from '../MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { getDocPath } from '@/web/common/system/doc';
 
 export enum NavbarTypeEnum {

projects/app/src/components/Markdown/chat/QuestionGuide.tsx

@@ -4,7 +4,7 @@ import 'katex/dist/katex.min.css';
 import ChatBoxDivider from '@/components/core/chat/Divider';
 import { useTranslation } from 'next-i18next';
 import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 
 const QuestionGuide = ({ text }: { text: string }) => {
@@ -31,7 +31,7 @@ const QuestionGuide = ({ text }: { text: string }) => {
             key={text}
             alignItems={'center'}
             flexWrap={'wrap'}
-            fontSize={'sm'}
+            fontSize={'xs'}
             border={theme.borders.sm}
             py={'1px'}
             px={3}

projects/app/src/components/Markdown/index.module.scss

@@ -105,16 +105,16 @@
   font-size: inherit;
 }
 .markdown h1 {
-  font-size: 28px;
+  font-size: var(--chakra-fontSizes-2xl);
 }
 .markdown h2 {
-  font-size: 24px;
+  font-size: var(--chakra-fontSizes-xl);
 }
 .markdown h3 {
-  font-size: 18px;
+  font-size: var(--chakra-fontSizes-lg);
 }
 .markdown h4 {
-  font-size: 16px;
+  font-size: var(--chakra-fontSizes-md);
 }
 .markdown h5 {
   font-size: 14px;
@@ -346,6 +346,7 @@
   tab-size: 4;
   word-spacing: normal;
   width: 100%;
+  font-size: var(--chakra-fontSizes-sm);
 
   * {
     word-break: break-word;

projects/app/src/components/Markdown/index.tsx

@@ -10,7 +10,7 @@ import styles from './index.module.scss';
 import dynamic from 'next/dynamic';
 
 import { Link, Button } from '@chakra-ui/react';
-import MyTooltip from '../MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useTranslation } from 'next-i18next';
 import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
 import MyIcon from '@fastgpt/web/components/common/Icon';

projects/app/src/components/MyTooltip/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Tooltip, TooltipProps } from '@chakra-ui/react';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
-
-interface Props extends TooltipProps {
-  forceShow?: boolean;
-}
-
-const MyTooltip = ({ children, forceShow = false, shouldWrapChildren = true, ...props }: Props) => {
-  const { isPc } = useSystemStore();
-  return isPc || forceShow ? (
-    <Tooltip
-      className="tooltip"
-      bg={'white'}
-      arrowShadowColor={' rgba(0,0,0,0.05)'}
-      hasArrow
-      arrowSize={12}
-      offset={[-15, 15]}
-      color={'myGray.800'}
-      px={4}
-      py={2}
-      borderRadius={'8px'}
-      whiteSpace={'pre-wrap'}
-      boxShadow={'1px 1px 10px rgba(0,0,0,0.2)'}
-      shouldWrapChildren={shouldWrapChildren}
-      {...props}
-    >
-      {children}
-    </Tooltip>
-  ) : (
-    <>{children}</>
-  );
-};
-
-export default MyTooltip;

projects/app/src/components/PromptTemplate/index.tsx

@@ -37,9 +37,9 @@ const PromptTemplate = ({
                 : {})}
               onClick={() => setSelectTemplateTitle(item)}
             >
-              <Box>{item.title}</Box>
+              <Box color={'myGray.900'}>{item.title}</Box>
 
-              <Box color={'myGray.600'} fontSize={'sm'} whiteSpace={'pre-wrap'}>
+              <Box color={'myGray.500'} fontSize={'xs'} whiteSpace={'pre-wrap'}>
                 {item.desc}
               </Box>
             </Box>

projects/app/src/components/SideTabs/index.tsx

@@ -17,17 +17,17 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
     switch (size) {
       case 'sm':
         return {
-          fontSize: 'sm',
+          fontSize: 'xs',
           inlineP: 1
         };
       case 'md':
         return {
-          fontSize: 'md',
+          fontSize: 'sm',
           inlineP: 2
         };
       case 'lg':
         return {
-          fontSize: 'lg',
+          fontSize: 'md',
           inlineP: 3
         };
     }
@@ -55,7 +55,8 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
                 color: 'myGray.600'
               })}
           _hover={{
-            bg: 'myGray.05'
+            color: 'primary.600',
+            bg: 'myGray.100'
           }}
           onClick={() => {
             if (activeId === item.id) return;

projects/app/src/components/Slider/index.tsx

@@ -47,7 +47,6 @@ const MySlider = ({
         max={max}
         min={min}
         step={step}
-        size={'lg'}
         value={value}
         width={width}
         onChange={onChange}

projects/app/src/components/Tabs/index.tsx

@@ -18,19 +18,19 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
     switch (size) {
       case 'sm':
         return {
-          fontSize: 'sm',
+          fontSize: 'xs',
           outP: '3px',
           inlineP: 1
         };
       case 'md':
         return {
-          fontSize: ['sm', 'md'],
+          fontSize: 'sm',
           outP: '4px',
           inlineP: 1
         };
       case 'lg':
         return {
-          fontSize: ['md', 'lg'],
+          fontSize: ['sm', 'md'],
           outP: '5px',
           inlineP: 2
         };

projects/app/src/components/common/MyRadio/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Flex, useTheme, Grid, type GridProps, theme, Image } from '@chakra-ui/react';
+import { Box, Flex, useTheme, Grid, type GridProps, theme, Image, Radio } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -36,7 +36,7 @@ const MyRadio = ({
   const { toast } = useToast();
 
   return (
-    <Grid gridGap={[3, 5]} fontSize={['sm', 'md']} {...props}>
+    <Grid gridGap={[3, 5]} {...props}>
       {list.map((item) => (
         <Flex
           key={item.value}
@@ -44,8 +44,7 @@ const MyRadio = ({
           cursor={'pointer'}
           userSelect={'none'}
           py={3}
-          pl={'14px'}
-          pr={hiddenCircle ? '14px' : '36px'}
+          px={'4'}
           p={p !== undefined ? `${p} !important` : undefined}
           border={theme.borders.sm}
           borderWidth={'1.5px'}
@@ -62,27 +61,6 @@ const MyRadio = ({
                   borderColor: 'primary.400'
                 }
               })}
-          _after={{
-            content: '""',
-            display: hiddenCircle ? 'none' : 'block',
-            position: 'absolute',
-            right: '14px',
-            w: '16px',
-            h: '16px',
-            mr: 1,
-            borderRadius: '16px',
-            transition: '0.2s',
-            boxSizing: 'border-box',
-            ...(value === item.value
-              ? {
-                  border: '5px solid',
-                  borderColor: 'primary.600'
-                }
-              : {
-                  border: '2px solid',
-                  borderColor: 'myGray.200'
-                })
-          }}
           onClick={() => {
             if (item.forbidTip) {
               toast({
@@ -103,14 +81,17 @@ const MyRadio = ({
               )}
             </>
           )}
-          <Box pr={hiddenCircle ? 0 : 2} color={'myGray.800'}>
-            <Box>{typeof item.title === 'string' ? t(item.title) : item.title}</Box>
+          <Box pr={hiddenCircle ? 0 : 2} flex={'1 0 0'}>
+            <Box fontSize={'sm'} color={'myGray.800'}>
+              {typeof item.title === 'string' ? t(item.title) : item.title}
+            </Box>
             {!!item.desc && (
-              <Box fontSize={'xs'} color={'myGray.500'} lineHeight={1.2}>
+              <Box fontSize={'mini'} color={'myGray.500'} lineHeight={1.2}>
                 {t(item.desc)}
               </Box>
             )}
           </Box>
+          <Radio isChecked={value === item.value} />
         </Flex>
       ))}
     </Grid>

projects/app/src/components/common/ParentPaths/index.tsx

@@ -37,7 +37,7 @@ const ParentPaths = (props: {
       {concatPaths.map((item, i) => (
         <Flex key={item.parentId || i} alignItems={'center'}>
           <Box
-            fontSize={['sm', fontSize || 'lg']}
+            fontSize={['sm', fontSize || 'md']}
             py={1}
             px={[1, 2]}
             borderRadius={'md'}

projects/app/src/components/common/Rowtabs/index.tsx

@@ -38,7 +38,7 @@ const RowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props }: P
               })}
         >
           {item.icon && <MyIcon name={item.icon as any} mr={1} w={'14px'} />}
-          <Box>{item.label}</Box>
+          <Box fontSize={'sm'}>{item.label}</Box>
         </Flex>
       ))}
     </Box>

projects/app/src/components/common/Textarea/MyTextarea/index.tsx

@@ -9,7 +9,7 @@ import {
   TextareaProps,
   useDisclosure
 } from '@chakra-ui/react';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyModal from '@fastgpt/web/components/common/MyModal';

projects/app/src/components/core/ai/AISettingModal/index.tsx

@@ -19,8 +19,6 @@ import type { SettingAIDataType } from '@fastgpt/global/core/app/type.d';
 import { getDocPath } from '@/web/common/system/doc';
 import AIModelSelector from '@/components/Select/AIModelSelector';
 import { LLMModelItemType } from '@fastgpt/global/core/ai/model.d';
-import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 const AIChatSettingsModal = ({
@@ -65,7 +63,8 @@ const AIChatSettingsModal = ({
   const LabelStyles: BoxProps = {
     display: 'flex',
     alignItems: 'center',
-    fontSize: ['sm', 'md'],
+    fontSize: 'sm',
+    color: 'myGray.900',
     width: ['80px', '90px']
   };
 
@@ -209,14 +208,14 @@ const AIChatSettingsModal = ({
           <Flex mt={8} alignItems={'center'}>
             <Box {...LabelStyles}>
               {t('core.app.Ai response')}
-              <MyTooltip label={t('core.module.template.AI response switch tip')}>
-                <QuestionOutlineIcon ml={1} />
-              </MyTooltip>
+              <QuestionTip
+                ml={1}
+                label={t('core.module.template.AI response switch tip')}
+              ></QuestionTip>
             </Box>
             <Box flex={1} ml={'10px'}>
               <Switch
                 isChecked={getValues(NodeInputKeyEnum.aiChatIsResponseText)}
-                size={'lg'}
                 onChange={(e) => {
                   const value = e.target.checked;
                   setValue(NodeInputKeyEnum.aiChatIsResponseText, value);

projects/app/src/components/core/app/DatasetParamsModal.tsx

@@ -12,9 +12,8 @@ import {
   useTheme
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import MySlider from '@/components/Slider';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { DatasetSearchModeEnum } from '@fastgpt/global/core/dataset/constants';
 import { useTranslation } from 'next-i18next';
@@ -29,6 +28,8 @@ import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import SelectAiModel from '@/components/Select/AIModelSelector';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 export type DatasetParamsProps = {
   searchMode: `${DatasetSearchModeEnum}`;
@@ -158,8 +159,7 @@ const DatasetParamsModal = ({
                 cursor={'pointer'}
                 userSelect={'none'}
                 py={3}
-                pl={'14px'}
-                pr={'16px'}
+                px={4}
                 border={theme.borders.sm}
                 borderWidth={'1.5px'}
                 borderRadius={'md'}
@@ -191,8 +191,8 @@ const DatasetParamsModal = ({
               >
                 <MyIcon name="core/dataset/rerank" w={'18px'} mr={'14px'} />
                 <Box pr={2} color={'myGray.800'} flex={'1 0 0'}>
-                  <Box>{t('core.dataset.search.ReRank')}</Box>
-                  <Box fontSize={['xs', 'sm']} color={'myGray.500'}>
+                  <Box fontSize={'sm'}>{t('core.dataset.search.ReRank')}</Box>
+                  <Box fontSize={'xs'} color={'myGray.500'}>
                     {t('core.dataset.search.ReRank desc')}
                   </Box>
                 </Box>
@@ -208,12 +208,13 @@ const DatasetParamsModal = ({
           <Box pt={5}>
             {limit !== undefined && (
               <Box display={['block', 'flex']}>
-                <Box flex={'0 0 120px'} mb={[8, 0]}>
-                  {t('core.dataset.search.Max Tokens')}
-                  <MyTooltip label={t('core.dataset.search.Max Tokens Tips')} forceShow>
-                    <QuestionOutlineIcon ml={1} />
-                  </MyTooltip>
-                </Box>
+                <Flex flex={'0 0 120px'} mb={[8, 0]}>
+                  <FormLabel>{t('core.dataset.search.Max Tokens')}</FormLabel>
+                  <QuestionTip
+                    ml={1}
+                    label={t('core.dataset.search.Max Tokens Tips')}
+                  ></QuestionTip>
+                </Flex>
                 <Box flex={1} mx={4}>
                   <MySlider
                     markList={[
@@ -233,12 +234,13 @@ const DatasetParamsModal = ({
               </Box>
             )}
             <Box display={['block', 'flex']} mt={10}>
-              <Box flex={'0 0 120px'} mb={[8, 0]}>
-                {t('core.dataset.search.Min Similarity')}
-                <MyTooltip label={t('core.dataset.search.Min Similarity Tips')} forceShow>
-                  <QuestionOutlineIcon ml={1} />
-                </MyTooltip>
-              </Box>
+              <Flex flex={'0 0 120px'} mb={[8, 0]}>
+                <FormLabel>{t('core.dataset.search.Min Similarity')}</FormLabel>
+                <QuestionTip
+                  ml={1}
+                  label={t('core.dataset.search.Min Similarity Tips')}
+                ></QuestionTip>
+              </Flex>
               <Box flex={1} mx={4}>
                 {showSimilarity ? (
                   <MySlider
@@ -264,7 +266,7 @@ const DatasetParamsModal = ({
         )}
         {currentTabType === SearchSettingTabEnum.queryExtension && (
           <Box>
-            <Box fontSize={'xs'} color={'myGray.500'}>
+            <Box transform={'translateY(-5px)'} fontSize={'xs'} color={'myGray.500'}>
               {t('core.dataset.Query extension intro')}
             </Box>
             <Flex mt={3} alignItems={'center'}>
@@ -274,8 +276,8 @@ const DatasetParamsModal = ({
             {datasetSearchUsingCfrForm === true && (
               <>
                 <Flex mt={4} alignItems={'center'}>
-                  <Box flex={'0 0 100px'}>{t('core.ai.Model')}</Box>
-                  <Box flex={'1 0 0'}>
+                  <FormLabel flex={['0 0 80px', '1 0 0']}>{t('core.ai.Model')}</FormLabel>
+                  <Box flex={['1 0 0', '0 0 300px']}>
                     <SelectAiModel
                       width={'100%'}
                       value={queryExtensionModel}
@@ -288,10 +290,11 @@ const DatasetParamsModal = ({
                 </Flex>
                 <Box mt={3}>
                   <Flex alignItems={'center'}>
-                    {t('core.app.edit.Query extension background prompt')}
-                    <MyTooltip label={t('core.app.edit.Query extension background tip')} forceShow>
-                      <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
-                    </MyTooltip>
+                    <FormLabel>{t('core.app.edit.Query extension background prompt')}</FormLabel>
+                    <QuestionTip
+                      ml={1}
+                      label={t('core.app.edit.Query extension background tip')}
+                    ></QuestionTip>
                   </Flex>
                   <Box mt={1}>
                     <PromptEditor

projects/app/src/components/core/app/DatasetSelectModal.tsx

@@ -13,7 +13,7 @@ import {
 import Avatar from '@/components/Avatar';
 import type { SelectedDatasetType } from '@fastgpt/global/core/workflow/api.d';
 import { useToast } from '@fastgpt/web/hooks/useToast';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
 import { useTranslation } from 'next-i18next';
@@ -163,7 +163,7 @@ export const DatasetSelectModal = ({
                           className="textEllipsis"
                           ml={3}
                           fontWeight={'bold'}
-                          fontSize={['md', 'lg', 'xl']}
+                          fontSize={['md', 'lg']}
                         >
                           {item.name}
                         </Box>

projects/app/src/components/core/app/InputGuideConfig.tsx

@@ -1,5 +1,5 @@
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import {
   Box,
   Button,
@@ -34,10 +34,10 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { readCsvRawText } from '@fastgpt/web/common/file/utils';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
-import { useRequest } from 'ahooks';
 import HighlightText from '@fastgpt/web/components/common/String/HighlightText';
 import { defaultChatInputGuideConfig } from '@fastgpt/global/core/app/constants';
 import ChatFunctionTip from './Tip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const csvTemplate = `"第一列内容"
 "只会将第一列内容导入，其余列会被忽略"
@@ -85,10 +85,10 @@ const InputGuideConfig = ({
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/inputGuides'} mr={2} w={'20px'} />
-      <HStack>
-        <Box>{chatT('Input guide')}</Box>
+      <Flex alignItems={'center'}>
+        <FormLabel>{chatT('Input guide')}</FormLabel>
         <ChatFunctionTip type={'inputGuide'} />
-      </HStack>
+      </Flex>
       <Box flex={1} />
       <MyTooltip label={chatT('Config input guide')}>
         <Button
@@ -109,10 +109,9 @@ const InputGuideConfig = ({
       >
         <ModalBody px={[5, 16]} py={[4, 8]} w={'500px'}>
           <Flex justifyContent={'space-between'} alignItems={'center'}>
-            {t('Is open')}
+            <FormLabel>{t('Is open')}</FormLabel>
             <Switch
               isChecked={isOpenQuestionGuide}
-              size={'lg'}
               onChange={(e) => {
                 onChange({
                   ...value,
@@ -124,7 +123,7 @@ const InputGuideConfig = ({
           {isOpenQuestionGuide && (
             <>
               <Flex mt={8} alignItems={'center'}>
-                {chatT('Input guide lexicon')}
+                <FormLabel>{chatT('Input guide lexicon')}</FormLabel>
                 <Box fontSize={'xs'} px={2} bg={'myGray.100'} ml={1} rounded={'full'}>
                   {total}
                 </Box>
@@ -142,7 +141,7 @@ const InputGuideConfig = ({
               </Flex>
               <>
                 <Flex mt={8} alignItems={'center'}>
-                  {chatT('Custom input guide url')}
+                  <FormLabel>{chatT('Custom input guide url')}</FormLabel>
                   <Flex
                     onClick={() => window.open(getDocPath('/docs/course/chat_input_guide'))}
                     color={'primary.700'}
@@ -203,7 +202,7 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
     refreshDeps: [searchKey],
     debounceWait: 300,
 
-    itemHeight: 46,
+    itemHeight: 48,
     overscan: 20,
 
     pageSize: 20,
@@ -381,6 +380,7 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
       <ScrollList
         px={8}
         flex={'1 0 0'}
+        fontSize={'sm'}
         EmptyChildren={<EmptyTip text={chatT('Chat input guide lexicon is empty')} />}
       >
         {list.map((data, index) => {
@@ -394,7 +394,7 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
               key={index}
               alignItems={'center'}
               h={10}
-              mt={3}
+              mt={2}
               _hover={{
                 '& .icon-list': {
                   display: 'flex'
@@ -402,7 +402,6 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
               }}
             >
               <Checkbox
-                size={'lg'}
                 mr={2}
                 isChecked={selected}
                 onChange={(e) => {

projects/app/src/components/core/app/QGSwitch.tsx

@@ -3,6 +3,7 @@ import { Box, Flex, Switch, type SwitchProps } from '@chakra-ui/react';
 import React from 'react';
 import { useTranslation } from 'next-i18next';
 import ChatFunctionTip from './Tip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 // question generator switch
 const QGSwitch = (props: SwitchProps) => {
@@ -10,7 +11,7 @@ const QGSwitch = (props: SwitchProps) => {
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/chat/QGFill'} mr={2} w={'20px'} />
-      <Box fontWeight={'medium'}>{t('core.app.Question Guide')}</Box>
+      <FormLabel>{t('core.app.Question Guide')}</FormLabel>
       <ChatFunctionTip type={'nextQuestion'} />
       <Box flex={1} />
       <Switch {...props} />

projects/app/src/components/core/app/ScheduledTriggerConfig.tsx

@@ -1,4 +1,13 @@
-import { Box, Button, Flex, ModalBody, useDisclosure, Switch, Textarea } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  ModalBody,
+  useDisclosure,
+  Switch,
+  Textarea,
+  HStack
+} from '@chakra-ui/react';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
@@ -10,6 +19,7 @@ import dynamic from 'next/dynamic';
 import type { MultipleSelectProps } from '@fastgpt/web/components/common/MySelect/type.d';
 import { cronParser2Fields } from '@fastgpt/global/common/string/time';
 import TimezoneSelect from '@fastgpt/web/components/common/MySelect/TimezoneSelect';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const MultipleRowSelect = dynamic(
   () => import('@fastgpt/web/components/common/MySelect/MultipleRowSelect')
@@ -135,7 +145,7 @@ const ScheduledTriggerConfig = ({
       defaultPrompt?: string;
     }) => {
       onChange({
-        cronString: cronString ?? value?.cronString ?? '0 0 * * *',
+        cronString: cronString ?? value?.cronString ?? '',
         timezone: timezone ?? value?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
         defaultPrompt: defaultPrompt ?? value?.defaultPrompt ?? ''
       });
@@ -243,10 +253,10 @@ const ScheduledTriggerConfig = ({
       <>
         <Flex alignItems={'center'}>
           <MyIcon name={'core/app/schedulePlan'} w={'20px'} />
-          <Flex alignItems={'center'} ml={2} flex={1}>
-            {t('core.app.Interval timer run')}
-            <QuestionTip ml={1} label={t('core.app.Interval timer tip')} />
-          </Flex>
+          <HStack ml={2} flex={1} spacing={1}>
+            <FormLabel>{t('core.app.Interval timer run')}</FormLabel>
+            <QuestionTip label={t('core.app.Interval timer tip')} />
+          </HStack>
           <MyTooltip label={t('core.app.Config schedule plan')}>
             <Button
               variant={'transparentBase'}
@@ -269,9 +279,8 @@ const ScheduledTriggerConfig = ({
         >
           <ModalBody>
             <Flex justifyContent={'space-between'} alignItems={'center'}>
-              <Box flex={'0 0 80px'}> {t('core.app.schedule.Open schedule')}</Box>
+              <FormLabel flex={'0 0 80px'}> {t('core.app.schedule.Open schedule')}</FormLabel>
               <Switch
-                size={'lg'}
                 isChecked={isOpenSchedule}
                 onChange={(e) => {
                   if (e.target.checked) {
@@ -285,7 +294,7 @@ const ScheduledTriggerConfig = ({
             {isOpenSchedule && (
               <>
                 <Flex alignItems={'center'} mt={5}>
-                  <Box flex={'0 0 80px'}>执行时机</Box>
+                  <FormLabel flex={'0 0 80px'}>执行时间</FormLabel>
                   <Box flex={'1 0 0'}>
                     <MultipleRowSelect
                       label={formatLabel}
@@ -298,7 +307,7 @@ const ScheduledTriggerConfig = ({
                   </Box>
                 </Flex>
                 <Flex alignItems={'center'} mt={5}>
-                  <Box flex={'0 0 80px'}>时区</Box>
+                  <FormLabel flex={'0 0 80px'}>时区</FormLabel>
                   <Box flex={'1 0 0'}>
                     <TimezoneSelect
                       value={timezone}
@@ -309,7 +318,7 @@ const ScheduledTriggerConfig = ({
                   </Box>
                 </Flex>
                 <Box mt={5}>
-                  <Box mb={1}>{t('core.app.schedule.Default prompt')}</Box>
+                  <FormLabel mb={1}>{t('core.app.schedule.Default prompt')}</FormLabel>
                   <Textarea
                     value={defaultPrompt}
                     rows={8}

projects/app/src/components/core/app/TTSSelect.tsx

@@ -1,5 +1,5 @@
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { Box, Button, Flex, ModalBody, useDisclosure, Image } from '@chakra-ui/react';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'next-i18next';
@@ -12,6 +12,7 @@ import MySlider from '@/components/Slider';
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import { defaultTTSConfig } from '@fastgpt/global/core/app/constants';
 import ChatFunctionTip from './Tip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const TTSSelect = ({
   value = defaultTTSConfig,
@@ -81,7 +82,7 @@ const TTSSelect = ({
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/simpleMode/tts'} mr={2} w={'20px'} />
-      <Box fontWeight={'medium'}>{t('core.app.TTS')}</Box>
+      <FormLabel>{t('core.app.TTS')}</FormLabel>
       <ChatFunctionTip type={'tts'} />
       <Box flex={1} />
       <MyTooltip label={t('core.app.Select TTS')}>
@@ -108,11 +109,11 @@ const TTSSelect = ({
       >
         <ModalBody px={[5, 16]} py={[4, 8]}>
           <Flex justifyContent={'space-between'} alignItems={'center'}>
-            {t('core.app.tts.Speech model')}
+            <FormLabel>{t('core.app.tts.Speech model')}</FormLabel>
             <MySelect w={'220px'} value={formatValue} list={list} onchange={onclickChange} />
           </Flex>
           <Flex mt={8} justifyContent={'space-between'}>
-            {t('core.app.tts.Speech speed')}
+            <FormLabel>{t('core.app.tts.Speech speed')}</FormLabel>
             <MySlider
               markList={[
                 { label: '0.3', value: 0.3 },

projects/app/src/components/core/app/Tip.tsx

@@ -65,7 +65,7 @@ const ChatFunctionTip = ({ type }: { type: `${FnTypeEnum}` }) => {
               </Box>
             </Box>
           </Flex>
-          <Image src={data.imgUrl} w={'100%'} minH={['auto', '200px']} mt={2} alt={''} />
+          <Image src={data.imgUrl} w={'100%'} minH={['auto', '250px']} mt={2} alt={''} />
         </Box>
       }
     />

projects/app/src/components/core/app/VariableEdit.tsx

@@ -22,7 +22,7 @@ import {
   TableContainer,
   useDisclosure
 } from '@chakra-ui/react';
-import { QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';
+import { SmallAddIcon } from '@chakra-ui/icons';
 import { VariableInputEnum, variableMap } from '@fastgpt/global/core/workflow/constants';
 import type { VariableItemType } from '@fastgpt/global/core/app/type.d';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -31,12 +31,12 @@ import { useFieldArray } from 'react-hook-form';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
 import MyModal from '@fastgpt/web/components/common/MyModal';
-import MyTooltip from '@/components/MyTooltip';
 import { useTranslation } from 'next-i18next';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import MyRadio from '@/components/common/MyRadio';
 import { formatEditorVariablePickerIcon } from '@fastgpt/global/core/workflow/utils';
 import ChatFunctionTip from './Tip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const VariableEdit = ({
   variables = [],
@@ -96,9 +96,9 @@ const VariableEdit = ({
     <Box>
       <Flex alignItems={'center'}>
         <MyIcon name={'core/app/simpleMode/variable'} w={'20px'} />
-        <Box ml={2} fontWeight={'medium'}>
+        <FormLabel ml={2} fontWeight={'medium'}>
           {t('core.module.Variable')}
-        </Box>
+        </FormLabel>
         <ChatFunctionTip type={'variable'} />
         <Box flex={1} />
         <Button
@@ -118,14 +118,19 @@ const VariableEdit = ({
       {formatVariables.length > 0 && (
         <Box mt={2} borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom="none">
           <TableContainer>
-            <Table bg={'white'}>
+            <Table>
               <Thead>
-                <Tr bg={'myGray.50'}>
-                  <Th w={'18px !important'} p={0} />
-                  <Th>{t('core.module.variable.variable name')}</Th>
-                  <Th>{t('core.module.variable.key')}</Th>
-                  <Th>{t('common.Require Input')}</Th>
-                  <Th></Th>
+                <Tr>
+                  <Th
+                    fontSize={'mini'}
+                    borderRadius={'none !important'}
+                    w={'18px !important'}
+                    p={0}
+                  />
+                  <Th fontSize={'mini'}>{t('core.module.variable.variable name')}</Th>
+                  <Th fontSize={'mini'}>{t('core.module.variable.key')}</Th>
+                  <Th fontSize={'mini'}>{t('common.Require Input')}</Th>
+                  <Th fontSize={'mini'} borderRadius={'none !important'}></Th>
                 </Tr>
               </Thead>
               <Tbody>
@@ -174,12 +179,12 @@ const VariableEdit = ({
         <ModalBody>
           {variableType !== VariableInputEnum.custom && (
             <Flex alignItems={'center'}>
-              <Box w={'70px'}>{t('common.Require Input')}</Box>
+              <FormLabel w={'70px'}>{t('common.Require Input')}</FormLabel>
               <Switch {...registerEdit('variable.required')} />
             </Flex>
           )}
           <Flex mt={5} alignItems={'center'}>
-            <Box w={'80px'}>{t('core.module.variable.variable name')}</Box>
+            <FormLabel w={'80px'}>{t('core.module.variable.variable name')}</FormLabel>
             <Input
               {...registerEdit('variable.label', {
                 required: t('core.module.variable.variable name is required')
@@ -187,7 +192,7 @@ const VariableEdit = ({
             />
           </Flex>
           <Flex mt={5} alignItems={'center'}>
-            <Box w={'80px'}>{t('core.module.variable.key')}</Box>
+            <FormLabel w={'80px'}>{t('core.module.variable.key')}</FormLabel>
             <Input
               {...registerEdit('variable.key', {
                 required: t('core.module.variable.key is required')
@@ -195,9 +200,9 @@ const VariableEdit = ({
             />
           </Flex>
 
-          <Box mt={5} mb={2}>
+          <FormLabel mt={5} mb={2}>
             {t('core.workflow.Variable.Variable type')}
-          </Box>
+          </FormLabel>
           <MyRadio
             gridGap={4}
             gridTemplateColumns={'repeat(2,1fr)'}
@@ -220,9 +225,9 @@ const VariableEdit = ({
 
           {variableType === VariableInputEnum.input && (
             <>
-              <Box mt={5} mb={2}>
+              <FormLabel mt={5} mb={2}>
                 {t('core.module.variable.text max length')}
-              </Box>
+              </FormLabel>
               <Box>
                 <NumberInput max={500} min={1} step={1} position={'relative'}>
                   <NumberInputField

projects/app/src/components/core/app/WelcomeTextConfig.tsx

@@ -4,6 +4,7 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import ChatFunctionTip from './Tip';
 import MyTextarea from '@/components/common/Textarea/MyTextarea';
 import { useTranslation } from 'next-i18next';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const WelcomeTextConfig = (props: TextareaProps) => {
   const { t } = useTranslation();
@@ -11,7 +12,7 @@ const WelcomeTextConfig = (props: TextareaProps) => {
     <>
       <Flex alignItems={'center'}>
         <MyIcon name={'core/app/simpleMode/chat'} w={'20px'} />
-        <Box ml={2}>{t('core.app.Welcome Text')}</Box>
+        <FormLabel ml={2}>{t('core.app.Welcome Text')}</FormLabel>
         <ChatFunctionTip type={'welcome'} />
       </Flex>
       <MyTextarea

projects/app/src/components/core/app/WhisperConfig.tsx

@@ -1,5 +1,5 @@
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { Box, Button, Flex, ModalBody, useDisclosure, Switch } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'next-i18next';
@@ -7,6 +7,7 @@ import type { AppWhisperConfigType } from '@fastgpt/global/core/app/type.d';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import { defaultWhisperConfig } from '@fastgpt/global/core/app/constants';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const WhisperConfig = ({
   isOpenAudio,
@@ -33,7 +34,7 @@ const WhisperConfig = ({
   return (
     <Flex alignItems={'center'}>
       <MyIcon name={'core/app/simpleMode/whisper'} mr={2} w={'20px'} />
-      <Box fontWeight={'medium'}>{t('core.app.Whisper')}</Box>
+      <FormLabel>{t('core.app.Whisper')}</FormLabel>
       <Box flex={1} />
       <MyTooltip label={t('core.app.Config whisper')}>
         <Button
@@ -54,10 +55,9 @@ const WhisperConfig = ({
       >
         <ModalBody px={[5, 16]} py={[4, 8]}>
           <Flex justifyContent={'space-between'} alignItems={'center'}>
-            {t('core.app.whisper.Switch')}
+            <FormLabel>{t('core.app.whisper.Switch')}</FormLabel>
             <Switch
               isChecked={isOpenWhisper}
-              size={'lg'}
               onChange={(e) => {
                 onChange({
                   ...value,
@@ -68,12 +68,11 @@ const WhisperConfig = ({
           </Flex>
           {isOpenWhisper && (
             <Flex mt={8} alignItems={'center'}>
-              {t('core.app.whisper.Auto send')}
+              <FormLabel>{t('core.app.whisper.Auto send')}</FormLabel>
               <QuestionTip label={t('core.app.whisper.Auto send tip')} />
               <Box flex={'1 0 0'} />
               <Switch
                 isChecked={value.autoSend}
-                size={'lg'}
                 onChange={(e) => {
                   onChange({
                     ...value,
@@ -86,12 +85,11 @@ const WhisperConfig = ({
           {isOpenWhisper && isAutoSend && (
             <>
               <Flex mt={8} alignItems={'center'}>
-                {t('core.app.whisper.Auto tts response')}
+                <FormLabel>{t('core.app.whisper.Auto tts response')}</FormLabel>
                 <QuestionTip label={t('core.app.whisper.Auto tts response tip')} />
                 <Box flex={'1 0 0'} />
                 <Switch
                   isChecked={value.autoTTSResponse}
-                  size={'lg'}
                   onChange={(e) => {
                     onChange({
                       ...value,

projects/app/src/components/core/dataset/QuoteItem.tsx

@@ -5,7 +5,7 @@ import type { SearchDataResponseItemType } from '@fastgpt/global/core/dataset/ty
 import NextLink from 'next/link';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import dynamic from 'next/dynamic';
 import MyBox from '@fastgpt/web/components/common/MyBox';
 import { SearchScoreTypeEnum, SearchScoreTypeMap } from '@fastgpt/global/core/dataset/constants';

projects/app/src/components/core/dataset/RawSourceBox.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useTranslation } from 'next-i18next';
 import { getCollectionSourceAndOpen } from '@/web/core/dataset/hooks/readCollectionSource';
 import { getSourceNameIcon } from '@fastgpt/global/core/dataset/utils';

projects/app/src/components/core/dataset/SearchParamsTip.tsx

@@ -39,13 +39,15 @@ const SearchParamsTip = ({
     >
       <Table fontSize={'xs'} overflow={'overlay'}>
         <Thead>
-          <Tr color={'myGray.600'}>
-            <Th>{t('core.dataset.search.search mode')}</Th>
-            <Th>{t('core.dataset.search.Max Tokens')}</Th>
-            <Th>{t('core.dataset.search.Min Similarity')}</Th>
-            {hasReRankModel && <Th>{t('core.dataset.search.ReRank')}</Th>}
-            <Th>{t('core.module.template.Query extension')}</Th>
-            {hasEmptyResponseMode && <Th>{t('core.dataset.search.Empty result response')}</Th>}
+          <Tr bg={'transparent !important'}>
+            <Th fontSize={'mini'}>{t('core.dataset.search.search mode')}</Th>
+            <Th fontSize={'mini'}>{t('core.dataset.search.Max Tokens')}</Th>
+            <Th fontSize={'mini'}>{t('core.dataset.search.Min Similarity')}</Th>
+            {hasReRankModel && <Th fontSize={'mini'}>{t('core.dataset.search.ReRank')}</Th>}
+            <Th fontSize={'mini'}>{t('core.module.template.Query extension')}</Th>
+            {hasEmptyResponseMode && (
+              <Th fontSize={'mini'}>{t('core.dataset.search.Empty result response')}</Th>
+            )}
           </Tr>
         </Thead>
         <Tbody>

projects/app/src/components/core/workflow/Flow/ChatTest.tsx

@@ -12,7 +12,7 @@ import { SmallCloseIcon } from '@chakra-ui/icons';
 import { Box, Flex, IconButton } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { streamFetch } from '@/web/common/api/fetch';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import ChatBox from '@/components/ChatBox';
 import type { ComponentRef, StartChatFnProps } from '@/components/ChatBox/type.d';
@@ -107,7 +107,7 @@ const ChatTest = (
         transition={'.2s ease'}
       >
         <Flex py={4} px={5} whiteSpace={'nowrap'}>
-          <Box fontSize={'xl'} fontWeight={'bold'} flex={1}>
+          <Box fontSize={'lg'} fontWeight={'bold'} flex={1}>
             {t('core.chat.Debug test')}
           </Box>
           <MyTooltip label={t('core.chat.Restart')}>

projects/app/src/components/core/workflow/Flow/NodeTemplatesModal.tsx

@@ -47,7 +47,7 @@ enum TemplateTypeEnum {
   'teamPlugin' = 'teamPlugin'
 }
 
-const sliderWidth = 380;
+const sliderWidth = 390;
 
 const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
   const { t } = useTranslation();
@@ -138,6 +138,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
         bottom={0}
         w={`${sliderWidth}px`}
         onClick={onClose}
+        fontSize={'sm'}
       />
       <Flex
         zIndex={3}
@@ -184,8 +185,6 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
             <IconButton
               size={'sm'}
               icon={<MyIcon name={'common/backFill'} w={'14px'} color={'myGray.700'} />}
-              w={'26px'}
-              h={'26px'}
               borderColor={'myGray.300'}
               variant={'grayBase'}
               aria-label={''}
@@ -212,6 +211,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
                 _hover={{
                   color: 'primary.600'
                 }}
+                fontSize={'sm'}
                 onClick={() => router.push('/plugin/list')}
               >
                 <Box>去创建</Box>
@@ -341,7 +341,7 @@ const RenderList = React.memo(function RenderList({
             >
               {item.label && (
                 <Flex>
-                  <Box fontWeight={'bold'} flex={1}>
+                  <Box fontSize={'sm'} fontWeight={'bold'} flex={1}>
                     {t(item.label)}
                   </Box>
                 </Flex>
@@ -405,11 +405,11 @@ const RenderList = React.memo(function RenderList({
                     >
                       <Avatar
                         src={template.avatar}
-                        w={'30px'}
+                        w={'1.7rem'}
                         objectFit={'contain'}
                         borderRadius={'0'}
                       />
-                      <Box color={'black'} ml={5} flex={'1 0 0'}>
+                      <Box color={'black'} fontSize={'sm'} ml={5} flex={'1 0 0'}>
                         {t(template.name)}
                       </Box>
                     </Flex>
@@ -421,7 +421,7 @@ const RenderList = React.memo(function RenderList({
         </Box>
       </Box>
     );
-  }, [formatTemplates, isPc, onAddNode, onClose, setCurrentParent, t, templates.length]);
+  }, [appT, formatTemplates, isPc, onAddNode, onClose, setCurrentParent, t, templates.length]);
 
   return Render;
 });

projects/app/src/components/core/workflow/Flow/SelectAppModal.tsx

@@ -74,7 +74,7 @@ const SelectAppModal = ({
                 })}
           >
             <Avatar src={app.avatar} w={['16px', '22px']} />
-            <Box fontWeight={'bold'} ml={1}>
+            <Box fontSize={'sm'} color={'myGray.900'} ml={1}>
               {app.name}
             </Box>
           </Flex>

projects/app/src/components/core/workflow/Flow/components/ButtonEdge.tsx

@@ -21,9 +21,10 @@ const ButtonEdge = (props: EdgeProps) => {
     sourcePosition,
     targetPosition,
     selected,
-    sourceHandleId,
     source,
+    sourceHandleId,
     target,
+    targetHandleId,
     style
   } = props;
 
@@ -86,12 +87,13 @@ const ButtonEdge = (props: EdgeProps) => {
 
   const edgeColor = useMemo(() => {
     const targetEdge = workflowDebugData?.runtimeEdges.find(
-      (edge) => edge.source === source && edge.target === target
+      (edge) => edge.sourceHandle === sourceHandleId && edge.targetHandle === targetHandleId
     );
     if (!targetEdge) {
       if (highlightEdge) return '#3370ff';
       return '#94B5FF';
     }
+    console.log(targetEdge);
     // debug mode
     const colorMap = {
       [RuntimeEdgeStatusEnum.active]: '#39CC83',
@@ -99,7 +101,7 @@ const ButtonEdge = (props: EdgeProps) => {
       [RuntimeEdgeStatusEnum.skipped]: '#8A95A7'
     };
     return colorMap[targetEdge.status];
-  }, [highlightEdge, source, target, workflowDebugData?.runtimeEdges]);
+  }, [highlightEdge, sourceHandleId, targetHandleId, workflowDebugData?.runtimeEdges]);
 
   const memoEdgeLabel = useMemo(() => {
     const arrowTransform = (() => {

projects/app/src/components/core/workflow/Flow/hooks/useDebug.tsx

@@ -219,7 +219,7 @@ export const useDebug = () => {
               if (input.valueType === WorkflowIOValueTypeEnum.boolean) {
                 return (
                   <Box>
-                    <Switch size={'lg'} {...register(input.key)} />
+                    <Switch {...register(input.key)} />
                   </Box>
                 );
               }

projects/app/src/components/core/workflow/Flow/index.tsx

@@ -28,7 +28,7 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useTranslation } from 'next-i18next';
 import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { connectionLineStyle, defaultEdgeOptions } from '../constants';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { useKeyboard } from './hooks/useKeyboard';

projects/app/src/components/core/workflow/Flow/nodes/NodeCQNode.tsx

@@ -9,7 +9,7 @@ import type { ClassifyQuestionAgentItemType } from '@fastgpt/global/core/workflo
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
 import { useTranslation } from 'next-i18next';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
 import { SourceHandle } from './render/Handle';

projects/app/src/components/core/workflow/Flow/nodes/NodeExtract/ExtractFieldModal.tsx

@@ -13,10 +13,11 @@ import type { ContextExtractAgentItemType } from '@fastgpt/global/core/workflow/
 import { useForm } from 'react-hook-form';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
-import MyTooltip from '@/components/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import { fnValueTypeSelect } from '@/web/core/workflow/constants/dataType';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 export const defaultField: ContextExtractAgentItemType = {
   valueType: 'string',
@@ -53,17 +54,15 @@ const ExtractFieldModal = ({
     >
       <ModalBody>
         <Flex mt={2} alignItems={'center'}>
-          <Flex alignItems={'center'} flex={['0 0 80px', '0 0 100px']}>
-            {t('core.module.extract.Required')}
-            <MyTooltip label={t('core.module.extract.Required Description')} forceShow>
-              <QuestionOutlineIcon ml={1} />
-            </MyTooltip>
+          <Flex alignItems={'center'} flex={['1 0 80px', '1 0 100px']}>
+            <FormLabel>{t('core.module.extract.Required')}</FormLabel>
+            <QuestionTip ml={1} label={t('core.module.extract.Required Description')}></QuestionTip>
           </Flex>
           <Switch {...register('required')} />
         </Flex>
         {required && (
           <Flex mt={5} alignItems={'center'}>
-            <Box flex={['0 0 80px', '0 0 100px']}>{t('core.module.Default value')}</Box>
+            <FormLabel flex={['0 0 80px', '0 0 100px']}>{t('core.module.Default value')}</FormLabel>
             <Input
               bg={'myGray.50'}
               placeholder={t('core.module.Default value placeholder')}
@@ -73,7 +72,7 @@ const ExtractFieldModal = ({
         )}
 
         <Flex alignItems={'center'} mt={5}>
-          <Box flex={['0 0 80px', '0 0 100px']}>{t('core.module.Data Type')}</Box>
+          <FormLabel flex={['0 0 80px', '0 0 100px']}>{t('core.module.Data Type')}</FormLabel>
           <Box flex={'1 0 0'}>
             <MySelect
               list={fnValueTypeSelect}
@@ -86,7 +85,7 @@ const ExtractFieldModal = ({
         </Flex>
 
         <Flex mt={5} alignItems={'center'}>
-          <Box flex={['0 0 80px', '0 0 100px']}>{t('Field name')}</Box>
+          <FormLabel flex={['0 0 80px', '0 0 100px']}>{t('Field name')}</FormLabel>
           <Input
             bg={'myGray.50'}
             placeholder="name/age/sql"
@@ -94,7 +93,9 @@ const ExtractFieldModal = ({
           />
         </Flex>
         <Flex mt={5} alignItems={'center'}>
-          <Box flex={['0 0 80px', '0 0 100px']}>{t('core.module.Field Description')}</Box>
+          <FormLabel flex={['0 0 80px', '0 0 100px']}>
+            {t('core.module.Field Description')}
+          </FormLabel>
           <Input
             bg={'myGray.50'}
             placeholder={t('core.module.extract.Field Description Placeholder')}
@@ -104,10 +105,10 @@ const ExtractFieldModal = ({
         {(valueType === 'string' || valueType === 'number') && (
           <Box mt={5}>
             <Flex alignItems={'center'}>
-              {t('core.module.extract.Enum Value')}({t('common.choosable')})
-              <MyTooltip label={t('core.module.extract.Enum Description')} forceShow>
-                <QuestionOutlineIcon ml={1} />
-              </MyTooltip>
+              <FormLabel>
+                {t('core.module.extract.Enum Value')}({t('common.choosable')})
+              </FormLabel>
+              <QuestionTip ml={1} label={t('core.module.extract.Enum Description')}></QuestionTip>
             </Flex>
 
             <Textarea

projects/app/src/components/core/workflow/Flow/nodes/NodeExtract/index.tsx

@@ -78,10 +78,12 @@ const NodeExtract = ({ data }: NodeProps<FlowNodeItemType>) => {
               <Table bg={'white'}>
                 <Thead>
                   <Tr>
-                    <Th bg={'myGray.50'}>字段名</Th>
+                    <Th bg={'myGray.50'} borderRadius={'none !important'}>
+                      字段名
+                    </Th>
                     <Th bg={'myGray.50'}>字段描述</Th>
                     <Th bg={'myGray.50'}>必须</Th>
-                    <Th bg={'myGray.50'}></Th>
+                    <Th bg={'myGray.50'} borderRadius={'none !important'}></Th>
                   </Tr>
                 </Thead>
                 <Tbody>

projects/app/src/components/core/workflow/Flow/nodes/NodeHttp/index.tsx

@@ -26,7 +26,6 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import JSONEditor from '@fastgpt/web/components/common/Textarea/JsonEditor';
 import { formatEditorVariablePickerIcon } from '@fastgpt/global/core/workflow/utils';
 import { EditorVariablePickerType } from '@fastgpt/web/components/common/Textarea/PromptEditor/type';
@@ -40,6 +39,7 @@ import { WorkflowContext } from '../../../context';
 import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
 import { useMemoizedFn } from 'ahooks';
 import { AppContext } from '@/web/core/app/context/appContext';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 const CurlImportModal = dynamic(() => import('./CurlImportModal'));
 
 export const HttpHeaders = [
@@ -305,9 +305,10 @@ export function RenderHttpProps({
       <Box>
         <Flex alignItems={'center'} mb={2} fontWeight={'medium'} color={'myGray.600'}>
           {t('core.module.Http request props')}
-          <MyTooltip label={t('core.module.http.Props tip', { variable: variableText })}>
-            <QuestionOutlineIcon ml={1} />
-          </MyTooltip>
+          <QuestionTip
+            ml={1}
+            label={t('core.module.http.Props tip', { variable: variableText })}
+          ></QuestionTip>
         </Flex>
         <Tabs
           list={[
@@ -468,89 +469,97 @@ const RenderForm = ({
 
   const Render = useMemo(() => {
     return (
-      <TableContainer overflowY={'visible'} overflowX={'unset'}>
-        <Table>
-          <Thead>
-            <Tr>
-              <Th px={2}>{t('core.module.http.Props name')}</Th>
-              <Th px={2}>{t('core.module.http.Props value')}</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {list.map((item, index) => (
-              <Tr key={`${input.key}${index}`}>
+      <Box mt={2} borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom={'none'}>
+        <TableContainer overflowY={'visible'} overflowX={'unset'}>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th px={2} borderBottomLeftRadius={'none !important'}>
+                  {t('core.module.http.Props name')}
+                </Th>
+                <Th px={2} borderBottomRadius={'none !important'}>
+                  {t('core.module.http.Props value')}
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {list.map((item, index) => (
+                <Tr key={`${input.key}${index}`}>
+                  <Td p={0} w={'150px'}>
+                    <HttpInput
+                      hasVariablePlugin={false}
+                      hasDropDownPlugin={tabType === TabEnum.headers}
+                      setDropdownValue={(value) => {
+                        handleKeyChange(index, value);
+                        setUpdateTrigger((prev) => !prev);
+                      }}
+                      placeholder={t('core.module.http.Props name')}
+                      value={item.key}
+                      variables={leftVariables}
+                      onBlur={(val) => {
+                        handleKeyChange(index, val);
+                      }}
+                      updateTrigger={updateTrigger}
+                    />
+                  </Td>
+                  <Td p={0}>
+                    <Box display={'flex'} alignItems={'center'}>
+                      <HttpInput
+                        placeholder={t('core.module.http.Props value')}
+                        value={item.value}
+                        variables={variables}
+                        onBlur={(val) => {
+                          setList((prevList) =>
+                            prevList.map((item, i) =>
+                              i === index ? { ...item, value: val } : item
+                            )
+                          );
+                          setShouldUpdateNode(true);
+                        }}
+                      />
+                      <MyIcon
+                        name={'delete'}
+                        cursor={'pointer'}
+                        _hover={{ color: 'red.600' }}
+                        w={'14px'}
+                        onClick={() => {
+                          setList((prevlist) => prevlist.filter((val) => val.key !== item.key));
+                          setShouldUpdateNode(true);
+                        }}
+                      />
+                    </Box>
+                  </Td>
+                </Tr>
+              ))}
+              <Tr>
                 <Td p={0} w={'150px'}>
                   <HttpInput
                     hasVariablePlugin={false}
                     hasDropDownPlugin={tabType === TabEnum.headers}
-                    setDropdownValue={(value) => {
-                      handleKeyChange(index, value);
+                    setDropdownValue={(val) => {
+                      handleAddNewProps(val);
                       setUpdateTrigger((prev) => !prev);
                     }}
-                    placeholder={t('core.module.http.Props name')}
-                    value={item.key}
+                    placeholder={t('core.module.http.Add props')}
+                    value={''}
                     variables={leftVariables}
-                    onBlur={(val) => {
-                      handleKeyChange(index, val);
-                    }}
                     updateTrigger={updateTrigger}
+                    onBlur={(val) => {
+                      handleAddNewProps(val);
+                      setUpdateTrigger((prev) => !prev);
+                    }}
                   />
                 </Td>
                 <Td p={0}>
                   <Box display={'flex'} alignItems={'center'}>
-                    <HttpInput
-                      placeholder={t('core.module.http.Props value')}
-                      value={item.value}
-                      variables={variables}
-                      onBlur={(val) => {
-                        setList((prevList) =>
-                          prevList.map((item, i) => (i === index ? { ...item, value: val } : item))
-                        );
-                        setShouldUpdateNode(true);
-                      }}
-                    />
-                    <MyIcon
-                      name={'delete'}
-                      cursor={'pointer'}
-                      _hover={{ color: 'red.600' }}
-                      w={'14px'}
-                      onClick={() => {
-                        setList((prevlist) => prevlist.filter((val) => val.key !== item.key));
-                        setShouldUpdateNode(true);
-                      }}
-                    />
+                    <HttpInput />
                   </Box>
                 </Td>
               </Tr>
-            ))}
-            <Tr>
-              <Td p={0} w={'150px'}>
-                <HttpInput
-                  hasVariablePlugin={false}
-                  hasDropDownPlugin={tabType === TabEnum.headers}
-                  setDropdownValue={(val) => {
-                    handleAddNewProps(val);
-                    setUpdateTrigger((prev) => !prev);
-                  }}
-                  placeholder={t('core.module.http.Add props')}
-                  value={''}
-                  variables={leftVariables}
-                  updateTrigger={updateTrigger}
-                  onBlur={(val) => {
-                    handleAddNewProps(val);
-                    setUpdateTrigger((prev) => !prev);
-                  }}
-                />
-              </Td>
-              <Td p={0}>
-                <Box display={'flex'} alignItems={'center'}>
-                  <HttpInput />
-                </Box>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </TableContainer>
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Box>
     );
   }, [
     handleAddNewProps,

projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse/ListItem.tsx

@@ -65,11 +65,8 @@ const ListItem = ({
       >
         <Container w={snapshot.isDragging ? '' : 'full'} className="nodrag">
           <Flex mb={4} alignItems={'center'}>
-            <DragIcon
-              visibility={ifElseList.length > 1 ? 'visible' : 'hidden'}
-              provided={provided}
-            />
-            <Box color={'black'} fontSize={'lg'} ml={2}>
+            {ifElseList.length > 1 && <DragIcon provided={provided} />}
+            <Box color={'black'} fontSize={'md'} ml={2}>
               {getElseIFLabel(conditionIndex)}
             </Box>
             {conditionItem.list?.length > 1 && (

projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse/index.tsx

@@ -91,7 +91,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
 
         <Container position={'relative'}>
           <Flex alignItems={'center'}>
-            <Box color={'black'} fontSize={'lg'} ml={2}>
+            <Box color={'black'} fontSize={'md'} ml={2}>
               {IfElseResultEnum.ELSE}
             </Box>
             <SourceHandle

projects/app/src/components/core/workflow/Flow/nodes/NodeSystemConfig.tsx

@@ -129,7 +129,6 @@ function QuestionGuide({ chatConfig: { questionGuide = false }, setAppDetail }:
   return (
     <QGSwitch
       isChecked={questionGuide}
-      size={'md'}
       onChange={(e) => {
         const value = e.target.checked;
         setAppDetail((state) => ({

projects/app/src/components/core/workflow/Flow/nodes/NodeVariableUpdate.tsx

@@ -224,7 +224,6 @@ const NodeVariableUpdate = ({ data, selected }: NodeProps<FlowNodeItemType>) =>
                   if (valueType === WorkflowIOValueTypeEnum.boolean) {
                     return (
                       <Switch
-                        size="lg"
                         defaultChecked={updateItem.value?.[1] === 'true'}
                         onChange={(e) => handleUpdate(String(e.target.checked))}
                       />

projects/app/src/components/core/workflow/Flow/nodes/render/FieldEditModal.tsx

@@ -26,6 +26,7 @@ import { NodeInputKeyEnum, WorkflowIOValueTypeEnum } from '@fastgpt/global/core/
 import dynamic from 'next/dynamic';
 import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput/index';
 import { useI18n } from '@/web/context/I18n';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const JsonEditor = dynamic(() => import('@fastgpt/web/components/common/Textarea/JsonEditor'));
 const EmptyTip = dynamic(() => import('@fastgpt/web/components/common/EmptyTip'));
@@ -304,7 +305,7 @@ const FieldEditModal = ({
           <Stack flex={1} gap={5}>
             {showInputTypeSelect && (
               <Flex alignItems={'center'}>
-                <Box flex={'0 0 70px'}>{t('core.module.Input Type')}</Box>
+                <FormLabel flex={'0 0 70px'}>{t('core.module.Input Type')}</FormLabel>
                 <Box flex={1}>
                   <MySelect
                     list={inputTypeList}
@@ -320,7 +321,7 @@ const FieldEditModal = ({
             )}
             {showValueTypeSelect && !showInputTypeSelect && (
               <Flex alignItems={'center'}>
-                <Box flex={'0 0 70px'}>{t('core.module.Data Type')}</Box>
+                <FormLabel flex={'0 0 70px'}>{t('core.module.Data Type')}</FormLabel>
                 <Box flex={1}>
                   <MySelect
                     w={'full'}
@@ -336,7 +337,7 @@ const FieldEditModal = ({
             )}
             {showKeyInput && (
               <Flex alignItems={'center'}>
-                <Box flex={'0 0 70px'}>{t('core.module.Field Name')}</Box>
+                <FormLabel flex={'0 0 70px'}>{t('core.module.Field Name')}</FormLabel>
                 <Input
                   bg={'myGray.50'}
                   placeholder="appointment/sql"
@@ -348,9 +349,9 @@ const FieldEditModal = ({
             )}
             {showDescriptionInput && (
               <Box alignItems={'flex-start'}>
-                <Box flex={'0 0 70px'} mb={'1px'}>
+                <FormLabel flex={'0 0 70px'} mb={'1px'}>
                   {t('core.module.Field Description')}
-                </Box>
+                </FormLabel>
                 <Textarea
                   bg={'myGray.50'}
                   placeholder={
@@ -366,18 +367,18 @@ const FieldEditModal = ({
           {showInputTypeSelect && (
             <Stack flex={1} gap={5}>
               <Flex alignItems={'center'}>
-                <Box flex={'0 0 70px'}>{workflowT('Field required')}</Box>
+                <FormLabel flex={'0 0 70px'}>{workflowT('Field required')}</FormLabel>
                 <Switch {...register('required')} />
               </Flex>
               {showToolInput && (
                 <Flex alignItems={'center'}>
-                  <Box flex={'0 0 70px'}>工具参数</Box>
+                  <FormLabel flex={'0 0 70px'}>工具参数</FormLabel>
                   <Switch {...register('isToolInput')} />
                 </Flex>
               )}
               {showValueTypeSelect && (
                 <Flex alignItems={'center'}>
-                  <Box flex={'0 0 70px'}>{t('core.module.Data Type')}</Box>
+                  <FormLabel flex={'0 0 70px'}>{t('core.module.Data Type')}</FormLabel>
                   <Box flex={1}>
                     <MySelect
                       w={'full'}
@@ -393,7 +394,7 @@ const FieldEditModal = ({
               )}
               {showDefaultValue && (
                 <Flex alignItems={'center'}>
-                  <Box flex={'0 0 70px'}>{t('core.module.Default Value')}</Box>
+                  <FormLabel flex={'0 0 70px'}>{t('core.module.Default Value')}</FormLabel>
                   {inputType === FlowNodeInputTypeEnum.numberInput && (
                     <Input
                       bg={'myGray.50'}
@@ -430,7 +431,7 @@ const FieldEditModal = ({
               )}
               {showMaxLenInput && (
                 <Flex alignItems={'center'}>
-                  <Box flex={'0 0 70px'}>{t('core.module.Max Length')}</Box>
+                  <FormLabel flex={'0 0 70px'}>{t('core.module.Max Length')}</FormLabel>
                   <MyNumberInput
                     flex={'1 0 0'}
                     bg={'myGray.50'}
@@ -447,7 +448,7 @@ const FieldEditModal = ({
               {showMinMaxInput && (
                 <>
                   <Flex alignItems={'center'}>
-                    <Box flex={'0 0 70px'}>{t('core.module.Max Value')}</Box>
+                    <FormLabel flex={'0 0 70px'}>{t('core.module.Max Value')}</FormLabel>
                     <MyNumberInput
                       flex={'1 0 0'}
                       bg={'myGray.50'}
@@ -459,7 +460,7 @@ const FieldEditModal = ({
                     />
                   </Flex>
                   <Flex alignItems={'center'}>
-                    <Box flex={'0 0 70px'}>{t('core.module.Min Value')}</Box>
+                    <FormLabel flex={'0 0 70px'}>{t('core.module.Min Value')}</FormLabel>
                     <MyNumberInput
                       flex={'1 0 0'}
                       bg={'myGray.50'}
@@ -475,13 +476,13 @@ const FieldEditModal = ({
               {showDynamicInput && (
                 <Stack gap={5}>
                   <Flex alignItems={'center'}>
-                    <Box flex={'0 0 70px'}>{t('core.module.Input Type')}</Box>
+                    <FormLabel flex={'0 0 70px'}>{t('core.module.Input Type')}</FormLabel>
                     <Box flex={1} fontWeight={'bold'}>
                       {t('core.workflow.inputType.Reference')}
                     </Box>
                   </Flex>
                   <Flex alignItems={'center'}>
-                    <Box flex={'0 0 70px'}>{t('core.module.Data Type')}</Box>
+                    <FormLabel flex={'0 0 70px'}>{t('core.module.Data Type')}</FormLabel>
                     <Box flex={1}>
                       <MySelect
                         list={dataTypeSelectList}
@@ -496,7 +497,7 @@ const FieldEditModal = ({
                     </Box>
                   </Flex>
                   <Flex alignItems={'center'}>
-                    <Box flex={'0 0 70px'}>{t('core.workflow.inputType.Required')}</Box>
+                    <FormLabel flex={'0 0 70px'}>{t('core.workflow.inputType.Required')}</FormLabel>
                     <Box flex={1}>
                       <Switch {...register('dynamicParamDefaultValue.required')} />
                     </Box>

projects/app/src/components/core/workflow/Flow/nodes/render/Handle/ToolHandle.tsx

@@ -1,4 +1,4 @@
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
 import { useTranslation } from 'next-i18next';

projects/app/src/components/core/workflow/Flow/nodes/render/NodeCard.tsx

@@ -23,7 +23,7 @@ import { WorkflowContext } from '../../../context';
 import { useI18n } from '@/web/context/I18n';
 import { moduleTemplatesFlat } from '@fastgpt/global/core/workflow/template/constants';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 
 type Props = FlowNodeItemType & {
@@ -140,7 +140,7 @@ const NodeCard = (props: Props) => {
           {/* avatar and name */}
           <Flex alignItems={'center'}>
             <Avatar src={avatar} borderRadius={'0'} objectFit={'contain'} w={'30px'} h={'30px'} />
-            <Box ml={3} fontSize={'lg'} fontWeight={'medium'}>
+            <Box ml={3} fontSize={'md'} fontWeight={'medium'}>
               {t(name)}
             </Box>
             {!menuForbid?.rename && (

projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/Label.tsx

@@ -2,8 +2,7 @@ import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, Flex } from '@chakra-ui/react';
-import MyTooltip from '@/components/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 
 import NodeInputSelect from '@fastgpt/web/components/core/workflow/NodeInputSelect';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -14,6 +13,7 @@ import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/consta
 import ValueTypeLabel from '../ValueTypeLabel';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '@/components/core/workflow/context';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 const FieldEditModal = dynamic(() => import('../FieldEditModal'));
 
 type Props = {
@@ -62,19 +62,20 @@ const InputLabel = ({ nodeId, input }: Props) => {
 
     return (
       <Flex className="nodrag" cursor={'default'} alignItems={'center'} position={'relative'}>
-        <Box position={'relative'} fontWeight={'medium'} color={'myGray.600'}>
+        <Flex
+          alignItems={'center'}
+          position={'relative'}
+          fontWeight={'medium'}
+          color={'myGray.600'}
+        >
           {required && (
             <Box position={'absolute'} left={-2} top={-1} color={'red.600'}>
               *
             </Box>
           )}
           {t(label)}
-          {description && (
-            <MyTooltip label={t(description)} forceShow>
-              <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
-            </MyTooltip>
-          )}
-        </Box>
+          {description && <QuestionTip ml={1} label={t(description)}></QuestionTip>}
+        </Flex>
         {/* value type */}
         {renderType === FlowNodeInputTypeEnum.reference && <ValueTypeLabel valueType={valueType} />}
         {/* edit config */}

projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SelectDataset.tsx

@@ -85,7 +85,7 @@ const SelectDatasetRender = ({ inputs = [], item, nodeId }: RenderInputProps) =>
                 w={0}
                 className="textEllipsis"
                 fontWeight={'bold'}
-                fontSize={['md', 'lg', 'xl']}
+                fontSize={['md', 'lg']}
               >
                 {item.name}
               </Box>

projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SettingQuotePrompt.tsx

@@ -6,12 +6,11 @@ import { useForm } from 'react-hook-form';
 import { PromptTemplateItem } from '@fastgpt/global/core/ai/type';
 import { useTranslation } from 'next-i18next';
 import { ModalBody } from '@chakra-ui/react';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import {
   Prompt_QuotePromptList,
   Prompt_QuoteTemplateList
 } from '@fastgpt/global/core/ai/prompt/AIChat';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
 import PromptTemplate from '@/components/PromptTemplate';
 import { NodeInputKeyEnum, WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
@@ -23,6 +22,8 @@ import { WorkflowContext } from '@/components/core/workflow/context';
 import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
 import { useCreation } from 'ahooks';
 import { AppContext } from '@/web/core/app/context/appContext';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const LabelStyles: BoxProps = {
   fontSize: ['sm', 'md']
@@ -178,18 +179,17 @@ const SettingQuotePrompt = (props: RenderInputProps) => {
           <ModalBody>
             <Box>
               <Flex {...LabelStyles} mb={1}>
-                {t('core.app.Quote templates')}
-                <MyTooltip
+                <FormLabel>{t('core.app.Quote templates')}</FormLabel>
+                <QuestionTip
+                  ml={1}
                   label={t('template.Quote Content Tip', {
                     default: Prompt_QuoteTemplateList[0].value
                   })}
-                  forceShow
-                >
-                  <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
-                </MyTooltip>
+                ></QuestionTip>
                 <Box flex={1} />
                 <Box
                   {...selectTemplateBtn}
+                  fontSize={'sm'}
                   onClick={() =>
                     setSelectTemplateData({
                       title: t('core.app.Select quote template'),
@@ -216,15 +216,13 @@ const SettingQuotePrompt = (props: RenderInputProps) => {
             </Box>
             <Box mt={4}>
               <Flex {...LabelStyles} mb={1}>
-                {t('core.app.Quote prompt')}
-                <MyTooltip
+                <FormLabel>{t('core.app.Quote prompt')}</FormLabel>
+                <QuestionTip
+                  ml={1}
                   label={t('template.Quote Prompt Tip', {
                     default: Prompt_QuotePromptList[0].value
                   })}
-                  forceShow
-                >
-                  <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
-                </MyTooltip>
+                ></QuestionTip>
               </Flex>
               <PromptEditor
                 variables={quotePromptVariables}

projects/app/src/components/core/workflow/Flow/nodes/render/VariableTable.tsx

@@ -51,15 +51,17 @@ const VariableTable = ({
         borderRadius={'md'}
         overflow={'hidden'}
         borderWidth={'1px'}
-        borderBottom="none"
+        borderBottom={'none'}
       >
         <TableContainer>
           <Table bg={'white'}>
             <Thead>
               <Tr>
-                <Th>{t('core.module.variable.variable name')}</Th>
+                <Th borderBottomLeftRadius={'none !important'}>
+                  {t('core.module.variable.variable name')}
+                </Th>
                 <Th>{t('core.workflow.Value type')}</Th>
-                <Th></Th>
+                <Th borderBottomRightRadius={'none !important'}></Th>
               </Tr>
             </Thead>
             <Tbody>

projects/app/src/components/core/workflow/components/PublishHistoriesSlider.tsx

@@ -105,7 +105,7 @@ const PublishHistoriesSlider = () => {
         <Button
           mx={'20px'}
           variant={'whitePrimary'}
-          mb={1}
+          mb={2}
           isDisabled={!selectedHistoryId}
           onClick={() => {
             setSelectedHistoryId(undefined);
@@ -125,7 +125,7 @@ const PublishHistoriesSlider = () => {
               <Flex
                 key={data.index}
                 alignItems={'center'}
-                py={4}
+                py={3}
                 px={3}
                 borderRadius={'md'}
                 cursor={'pointer'}

projects/app/src/components/support/apikey/Table.tsx

@@ -15,10 +15,6 @@ import {
   useTheme,
   Link,
   Input,
-  MenuList,
-  MenuItem,
-  MenuButton,
-  Menu,
   IconButton
 } from '@chakra-ui/react';
 import {
@@ -31,7 +27,7 @@ import type { EditApiKeyProps } from '@/global/support/openapi/api.d';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
 import dayjs from 'dayjs';
-import { AddIcon, QuestionOutlineIcon } from '@chakra-ui/icons';
+import { AddIcon } from '@chakra-ui/icons';
 import { useCopyData } from '@/web/common/hooks/useCopyData';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useTranslation } from 'next-i18next';
@@ -39,11 +35,12 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useForm } from 'react-hook-form';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
-import MyTooltip from '@/components/MyTooltip';
 import { getDocPath } from '@/web/common/system/doc';
 import MyMenu from '@fastgpt/web/components/common/MyMenu';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { useI18n } from '@/web/context/I18n';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 type EditProps = EditApiKeyProps & { _id?: string };
 const defaultEditData: EditProps = {
@@ -91,7 +88,7 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
       <Box display={['block', 'flex']} py={[0, 3]} px={5} alignItems={'center'}>
         <Box flex={1}>
           <Flex alignItems={'flex-end'}>
-            <Box fontSize={['md', 'xl']} fontWeight={'bold'}>
+            <Box color={'myGray.900'} fontSize={'lg'}>
               {t('support.openapi.Api manager')}
             </Box>
             {feConfigs?.docUrl && (
@@ -100,18 +97,19 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
                 target={'_blank'}
                 ml={1}
                 color={'primary.500'}
+                fontSize={'sm'}
               >
                 {t('common.Read document')}
               </Link>
             )}
           </Flex>
-          <Box fontSize={'sm'} color={'myGray.600'}>
+          <Box fontSize={'xs'} color={'myGray.600'}>
             {tips}
           </Box>
         </Box>
         <Flex
           mt={[2, 0]}
-          bg={'myWhite.600'}
+          bg={'myGray.100'}
           py={2}
           px={4}
           borderRadius={'md'}
@@ -119,10 +117,10 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
           userSelect={'none'}
           onClick={() => copyData(baseUrl, t('support.openapi.Copy success'))}
         >
-          <Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'sm'}>
+          <Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'xs'}>
             {t('support.openapi.Api baseurl')}
           </Box>
-          <Box ml={2} color={'myGray.900'} fontSize={['sm', 'md']}>
+          <Box ml={2} fontSize={'sm'}>
             {baseUrl}
           </Box>
         </Flex>
@@ -200,21 +198,25 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
                     }
                     menuList={[
                       {
-                        label: t('common.Edit'),
-                        icon: 'edit',
-                        onClick: () =>
-                          setEditData({
-                            _id,
-                            name,
-                            limit,
-                            appId
-                          })
-                      },
-                      {
-                        label: t('common.Delete'),
-                        icon: 'delete',
-                        type: 'danger',
-                        onClick: () => openConfirm(() => onclickRemove(_id))()
+                        children: [
+                          {
+                            label: t('common.Edit'),
+                            icon: 'edit',
+                            onClick: () =>
+                              setEditData({
+                                _id,
+                                name,
+                                limit,
+                                appId
+                              })
+                          },
+                          {
+                            label: t('common.Delete'),
+                            icon: 'delete',
+                            type: 'danger',
+                            onClick: () => openConfirm(() => onclickRemove(_id))()
+                          }
+                        ]
                       }
                     ]}
                   />
@@ -248,10 +250,8 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
         iconSrc="/imgs/modal/key.svg"
         title={
           <Box>
-            <Box fontWeight={'bold'} fontSize={'xl'}>
-              {t('support.openapi.New api key')}
-            </Box>
-            <Box fontSize={'sm'} color={'myGray.600'}>
+            <Box fontWeight={'bold'}>{t('support.openapi.New api key')}</Box>
+            <Box fontSize={'xs'} color={'myGray.600'}>
               {t('support.openapi.New api key tip')}
             </Box>
           </Box>
@@ -332,7 +332,7 @@ function EditKeyModal({
     >
       <ModalBody>
         <Flex alignItems={'center'}>
-          <Box flex={'0 0 90px'}>{t('Name')}:</Box>
+          <FormLabel flex={'0 0 90px'}>{t('Name')}</FormLabel>
           <Input
             placeholder={publishT('key alias') || 'key alias'}
             maxLength={20}
@@ -344,12 +344,10 @@ function EditKeyModal({
         {feConfigs?.isPlus && (
           <>
             <Flex alignItems={'center'} mt={4}>
-              <Flex flex={'0 0 90px'} alignItems={'center'}>
-                {t('support.outlink.Max usage points')}:
-                <MyTooltip label={t('support.outlink.Max usage points tip')}>
-                  <QuestionOutlineIcon ml={1} />
-                </MyTooltip>
-              </Flex>
+              <FormLabel display={'flex'} flex={'0 0 90px'} alignItems={'center'}>
+                {t('support.outlink.Max usage points')}
+                <QuestionTip ml={1} label={t('support.outlink.Max usage points tip')}></QuestionTip>
+              </FormLabel>
               <Input
                 {...register('limit.maxUsagePoints', {
                   min: -1,
@@ -360,9 +358,7 @@ function EditKeyModal({
               />
             </Flex>
             <Flex alignItems={'center'} mt={4}>
-              <Flex flex={'0 0 90px'} alignItems={'center'}>
-                {t('common.Expired Time')}:
-              </Flex>
+              <FormLabel flex={'0 0 90px'}>{t('common.Expired Time')}</FormLabel>
               <Input
                 type="datetime-local"
                 defaultValue={

projects/app/src/components/support/permission/IconText/index.tsx

@@ -9,6 +9,8 @@ import { Permission } from '@fastgpt/global/support/permission/controller';
 const PermissionIconText = ({
   permission,
   defaultPermission,
+  w = '1rem',
+  fontSize = 'mini',
   ...props
 }: {
   permission?: `${PermissionTypeEnum}`;
@@ -25,9 +27,9 @@ const PermissionIconText = ({
   }, [defaultPermission, permission]);
 
   return PermissionTypeMap[per] ? (
-    <Flex alignItems={'center'} {...props}>
-      <MyIcon name={PermissionTypeMap[per]?.iconLight as any} w={'14px'} />
-      <Box ml={'2px'} lineHeight={1}>
+    <Flex alignItems={'center'} fontSize={fontSize} {...props}>
+      <MyIcon name={PermissionTypeMap[per]?.iconLight as any} w={w} />
+      <Box ml={'2px'} lineHeight={1} fontSize={'xs'}>
         {t(PermissionTypeMap[per]?.label)}
       </Box>
     </Flex>

projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx

@@ -93,13 +93,12 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
             p="4"
             minH="200px"
           >
-            <InputGroup alignItems="center" h="32px" my="2" py="1">
+            <InputGroup alignItems="center" size="sm">
               <InputLeftElement>
                 <MyIcon name="common/searchLight" w="16px" color={'myGray.500'} />
               </InputLeftElement>
               <Input
                 placeholder="搜索用户名"
-                fontSize="lg"
                 bgColor="myGray.50"
                 onChange={(e) => setSearchText(e.target.value)}
               />
@@ -128,7 +127,6 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
                     }}
                   >
                     <Checkbox
-                      size="lg"
                       mr="3"
                       isChecked={selectedMemberIdList.includes(member.tmbId)}
                       onChange={onChange}
@@ -167,9 +165,7 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
                     _notLast={{ mb: 2 }}
                   >
                     <Avatar src={member.avatar} w="24px" />
-                    <Box w="full" fontSize="lg">
-                      {member.memberName}
-                    </Box>
+                    <Box w="full">{member.memberName}</Box>
                     <MyIcon
                       name="common/closeLight"
                       w="16px"
@@ -202,7 +198,7 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
               h={'32px'}
             >
               {perLabel}
-              <ChevronDownIcon fontSize={'lg'} />
+              <ChevronDownIcon fontSize={'md'} />
             </Flex>
           }
           onChange={(v) => setSelectedPermission(v)}

projects/app/src/components/support/permission/MemberManager/ManageModal.tsx

@@ -64,10 +64,13 @@ function ManageModal({ onClose }: ManageModalProps) {
               <Tr>
                 <Th border="none">名称</Th>
                 <Th border="none">权限</Th>
-                <Th border="none">操作</Th>
+                <Th border="none" w={'40px'}>
+                  操作
+                </Th>
               </Tr>
             </Thead>
             <Tbody>
+              <Tr h={'10px'} />
               {collaboratorList?.map((item) => {
                 return (
                   <Tr

projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx

@@ -143,6 +143,7 @@ function PermissionSelect({
           }
           zIndex={99}
           overflowY={'auto'}
+          whiteSpace={'pre-wrap'}
         >
           {/* The list of single select permissions */}
           {permissionSelectList.singleCheckBoxList.map((item) => {
@@ -164,12 +165,14 @@ function PermissionSelect({
                   : {})}
                 {...MenuStyle}
                 onClick={change}
-                maxW={['70vw', '300px']}
+                maxW={['70vw', '260px']}
               >
-                <Radio size="lg" isChecked={selectedSingleValue === item.value} />
+                <Radio isChecked={selectedSingleValue === item.value} />
                 <Box ml={4}>
                   <Box>{item.name}</Box>
-                  <Box color={'myGray.500'}>{item.description}</Box>
+                  <Box color={'myGray.500'} fontSize={'mini'}>
+                    {item.description}
+                  </Box>
                 </Box>
               </Flex>
             );

projects/app/src/components/support/permission/MemberManager/index.tsx

@@ -34,7 +34,7 @@ function MemberManger() {
   return (
     <>
       <Flex alignItems="center" flexDirection="row" justifyContent="space-between" w="full">
-        <Box>协作者</Box>
+        <Box fontSize={'sm'}>协作者</Box>
         <Flex flexDirection="row" gap="2">
           <Button
             size="sm"

projects/app/src/components/support/user/team/TeamManageModal/TeamCard.tsx

@@ -97,9 +97,9 @@ function TeamCard() {
         py={4}
         borderBottom={'1.5px solid'}
         borderBottomColor={'myGray.100'}
-        mb={3}
+        mb={2}
       >
-        <Box fontSize={['lg', 'xl']} fontWeight={'bold'} alignItems={'center'}>
+        <Box fontSize={['sm', 'md']} fontWeight={'bold'} alignItems={'center'}>
           {userInfo?.team.teamName}
         </Box>
         {userInfo?.team.role === TeamMemberRoleEnum.owner && (

projects/app/src/components/support/user/team/TeamManageModal/TeamList.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, IconButton } from '@chakra-ui/react';
+import { Box, Button, Flex, IconButton, Text } from '@chakra-ui/react';
 import Avatar from '@/components/Avatar';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -28,7 +28,7 @@ function TeamList() {
         h={'40px'}
         borderBottom={'1.5px solid rgba(0, 0, 0, 0.05)'}
       >
-        <Box flex={['0 0 auto', 1]} fontWeight={'bold'} fontSize={['md', 'lg']}>
+        <Box flex={['0 0 auto', 1]} fontSize={['sm', 'md']}>
           {t('common.Team')}
         </Box>
         {/* if there is no team */}
@@ -73,6 +73,7 @@ function TeamList() {
             <Box
               flex={'1 0 0'}
               w={0}
+              fontSize={'sm'}
               {...(team.role === TeamMemberRoleEnum.owner
                 ? {
                     fontWeight: 'bold'

projects/app/src/components/support/user/team/TeamManageModal/components/EditInfoModal.tsx

@@ -8,7 +8,7 @@ import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import Avatar from '@/components/Avatar';
 import { postCreateTeam, putUpdateTeam } from '@/web/support/user/team/api';
 import { CreateTeamProps } from '@fastgpt/global/support/user/team/controller.d';

projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx

@@ -21,7 +21,9 @@ function MemberTable() {
   const { t } = useTranslation();
   const { members, refetchMembers } = useContextSelector(TeamModalContext, (v) => v);
 
-  const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({});
+  const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
+    type: 'delete'
+  });
 
   const { mutate: onRemoveMember, isLoading: isRemovingMember } = useRequest({
     mutationFn: delRemoveMember,
@@ -34,14 +36,14 @@ function MemberTable() {
 
   return (
     <MyBox isLoading={isRemovingMember}>
-      <TableContainer overflow={'unset'}>
+      <TableContainer overflow={'unset'} fontSize={'sm'}>
         <Table overflow={'unset'}>
           <Thead bg={'myWhite.400'}>
             <Tr>
-              <Th>{t('common.Username')}</Th>
+              <Th borderRadius={'none !important'}>{t('common.Username')}</Th>
               <Th>{t('user.team.Role')}</Th>
               <Th>{t('common.Status')}</Th>
-              <Th>{t('common.Action')}</Th>
+              <Th borderRadius={'none !important'}>{t('common.Action')}</Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -67,36 +69,35 @@ function MemberTable() {
                         Button={
                           <MenuButton
                             _hover={{
-                              bg: 'myWhite.600'
+                              color: 'primary.600'
                             }}
                             borderRadius={'md'}
                             px={2}
                             py={1}
                             lineHeight={1}
                           >
-                            <MyIcon
-                              name={'edit'}
-                              cursor={'pointer'}
-                              w="14px"
-                              _hover={{ color: 'primary.500' }}
-                            />
+                            <MyIcon name={'edit'} cursor={'pointer'} w="1rem" />
                           </MenuButton>
                         }
                         menuList={[
                           {
-                            label: t('user.team.Remove Member Tip'),
-                            onClick: () =>
-                              openRemoveMember(
-                                () =>
-                                  onRemoveMember({
-                                    teamId: item.teamId,
-                                    memberId: item.tmbId
-                                  }),
-                                undefined,
-                                t('user.team.Remove Member Confirm Tip', {
-                                  username: item.memberName
-                                })
-                              )()
+                            children: [
+                              {
+                                label: t('user.team.Remove Member Tip'),
+                                onClick: () =>
+                                  openRemoveMember(
+                                    () =>
+                                      onRemoveMember({
+                                        teamId: item.teamId,
+                                        memberId: item.tmbId
+                                      }),
+                                    undefined,
+                                    t('user.team.Remove Member Confirm Tip', {
+                                      username: item.memberName
+                                    })
+                                  )()
+                              }
+                            ]
                           }
                         ]}
                       />

projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx

@@ -78,13 +78,13 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
           borderColor="myGray.200"
         >
           <Flex flexDirection="column" p="4">
-            <InputGroup alignItems="center" h="32px" my="2" py="1">
+            <InputGroup alignItems="center" size={'sm'}>
               <InputLeftElement>
                 <MyIcon name="common/searchLight" w="16px" color={'myGray.500'} />
               </InputLeftElement>
               <Input
                 placeholder="搜索用户名"
-                fontSize="lg"
+                fontSize="sm"
                 bg={'myGray.50'}
                 onChange={(e) => {
                   setSearchKey(e.target.value);
@@ -98,7 +98,6 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
                     py="2"
                     px={3}
                     borderRadius={'md'}
-                    fontSize="lg"
                     alignItems="center"
                     key={member.tmbId}
                     cursor={'pointer'}
@@ -112,8 +111,8 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
                       }
                     }}
                   >
-                    <Checkbox isChecked={selected.includes(member)} size="lg" />
-                    <Avatar src={member.avatar} w="24px" />
+                    <Checkbox isChecked={selected.includes(member)} />
+                    <Avatar ml={2} src={member.avatar} w="1.5rem" />
                     {member.memberName}
                   </Flex>
                 );
@@ -135,11 +134,13 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
                     _hover={{ bg: 'myGray.50' }}
                     _notLast={{ mb: 2 }}
                   >
-                    <Avatar src={member.avatar} w="24px" />
-                    <Box w="full" fontSize="lg">
-                      {member.memberName}
-                    </Box>
-                    <CloseButton
+                    <Avatar src={member.avatar} w="1.5rem" />
+                    <Box w="full">{member.memberName}</Box>
+                    <MyIcon
+                      name={'common/closeLight'}
+                      w={'1rem'}
+                      cursor={'pointer'}
+                      _hover={{ color: 'red.600' }}
                       onClick={() =>
                         setSelected([...selected.filter((item) => item.tmbId != member.tmbId)])
                       }

projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx

@@ -47,7 +47,7 @@ function PermissionManage() {
         justifyContent={'space-between'}
       >
         <Flex>
-          <Box fontSize={['md', 'lg']} fontWeight={'bold'} alignItems={'center'}>
+          <Box fontSize={['sm', 'md']} fontWeight={'bold'} alignItems={'center'}>
             {t('user.team.role.Admin')}
           </Box>
           <Box

projects/app/src/components/support/user/team/TeamMenu/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, Button, Flex, Image, useDisclosure } from '@chakra-ui/react';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useTranslation } from 'next-i18next';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import dynamic from 'next/dynamic';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useToast } from '@fastgpt/web/hooks/useToast';

projects/app/src/components/support/wallet/StandardPlanContentList.tsx

@@ -6,9 +6,9 @@ import { Box, Flex, Grid } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import { useRouter } from 'next/router';
 import { AI_POINT_USAGE_CARD_ROUTE } from '@/web/support/wallet/sub/constants';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 const StandardPlanContentList = ({
   level,
@@ -43,7 +43,7 @@ const StandardPlanContentList = ({
   }, [subPlans?.standard, level, mode]);
 
   return planContent ? (
-    <Grid gap={4}>
+    <Grid gap={4} fontSize={'sm'}>
       <Flex alignItems={'center'}>
         <MyIcon name={'price/right'} w={'16px'} mr={3} />
         <Box color={'myGray.600'}>
@@ -92,14 +92,13 @@ const StandardPlanContentList = ({
               amount: planContent.totalPoints
             })}
           </Box>
-          <MyTooltip label={t('support.wallet.subscription.AI points click to read tip')}>
-            <QuestionOutlineIcon
-              ml={'2px'}
-              onClick={() => {
-                router.push(AI_POINT_USAGE_CARD_ROUTE);
-              }}
-            />
-          </MyTooltip>
+          <QuestionTip
+            ml={1}
+            label={t('support.wallet.subscription.AI points click to read tip')}
+            onClick={() => {
+              router.push(AI_POINT_USAGE_CARD_ROUTE);
+            }}
+          ></QuestionTip>
         </Flex>
       </Flex>
       <Flex alignItems={'center'}>

projects/app/src/pages/account/components/BillTable.tsx

@@ -32,6 +32,7 @@ import { standardSubLevelMap, subModeMap } from '@fastgpt/global/support/wallet/
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 
 const BillTable = () => {
   const { t } = useTranslation();
@@ -187,58 +188,68 @@ function BillDetailModal({ bill, onClose }: { bill: BillSchemaType; onClose: ()
     >
       <ModalBody>
         <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Number')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.Number')}:</FormLabel>
           <Box>{bill.orderId}</Box>
         </Flex>
         <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.usage.Time')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.usage.Time')}:</FormLabel>
           <Box>{dayjs(bill.createTime).format('YYYY/MM/DD HH:mm:ss')}</Box>
         </Flex>
         <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Status')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.Status')}:</FormLabel>
           <Box>{t(billStatusMap[bill.status]?.label)}</Box>
         </Flex>
         {!!bill.metadata?.payWay && (
           <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.bill.payWay.Way')}:</Box>
+            <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.payWay.Way')}:</FormLabel>
             <Box>{t(billPayWayMap[bill.metadata.payWay]?.label)}</Box>
           </Flex>
         )}
         <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.Amount')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.Amount')}:</FormLabel>
           <Box>{formatStorePrice2Read(bill.price)}元</Box>
         </Flex>
         <Flex alignItems={'center'} pb={4}>
-          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Type')}:</Box>
+          <FormLabel flex={'0 0 120px'}>{t('support.wallet.bill.Type')}:</FormLabel>
           <Box>{t(billTypeMap[bill.type]?.label)}</Box>
         </Flex>
         {!!bill.metadata?.subMode && (
           <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.mode.Period')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.mode.Period')}:
+            </FormLabel>
             <Box>{t(subModeMap[bill.metadata.subMode]?.label)}</Box>
           </Flex>
         )}
         {!!bill.metadata?.standSubLevel && (
           <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Stand plan level')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Stand plan level')}:
+            </FormLabel>
             <Box>{t(standardSubLevelMap[bill.metadata.standSubLevel]?.label)}</Box>
           </Flex>
         )}
         {bill.metadata?.month !== undefined && (
           <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Month amount')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Month amount')}:
+            </FormLabel>
             <Box>{bill.metadata?.month}</Box>
           </Flex>
         )}
         {bill.metadata?.datasetSize !== undefined && (
           <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Extra dataset size')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Extra dataset size')}:
+            </FormLabel>
             <Box>{bill.metadata?.datasetSize}</Box>
           </Flex>
         )}
         {bill.metadata?.extraPoints !== undefined && (
           <Flex alignItems={'center'} pb={4}>
-            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Extra ai points')}:</Box>
+            <FormLabel flex={'0 0 120px'}>
+              {t('support.wallet.subscription.Extra ai points')}:
+            </FormLabel>
             <Box>{bill.metadata.extraPoints}</Box>
           </Flex>
         )}

projects/app/src/pages/account/components/Individuation.tsx

@@ -38,12 +38,12 @@ const Individuation = () => {
 
   return (
     <Box py={[3, '28px']} px={['5vw', '64px']}>
-      <Flex alignItems={'center'} fontSize={'xl'} h={'30px'}>
+      <Flex alignItems={'center'} fontSize={'lg'} h={'30px'}>
         <MyIcon mr={2} name={'support/user/individuation'} w={'20px'} />
         {t('support.account.Individuation')}
       </Flex>
 
-      <Card mt={6} px={[3, 10]} py={[3, 7]}>
+      <Card mt={6} px={[3, 10]} py={[3, 7]} fontSize={'sm'}>
         <Flex alignItems={'center'} w={['85%', '350px']}>
           <Box flex={'0 0 80px'}>{t('user.Language')}:&nbsp;</Box>
           <Box flex={'1 0 0'}>

projects/app/src/pages/account/components/Info.tsx

@@ -9,7 +9,8 @@ import {
   Link,
   Progress,
   Grid,
-  Image
+  Image,
+  BoxProps
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
@@ -17,7 +18,6 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import type { UserType } from '@fastgpt/global/support/user/type.d';
 import { useQuery } from '@tanstack/react-query';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import dynamic from 'next/dynamic';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { compressImgFileAndUpload } from '@/web/common/file/controller';
@@ -25,7 +25,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useTranslation } from 'next-i18next';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyTooltip from '@/components/MyTooltip';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useRouter } from 'next/router';
 import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
 import { putUpdateMemberName } from '@/web/support/user/team/api';
@@ -43,6 +43,7 @@ import {
 
 import StandardPlanContentList from '@/components/support/wallet/StandardPlanContentList';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 
 const StandDetailModal = dynamic(() => import('./standardDetailModal'));
 const TeamMenu = dynamic(() => import('@/components/support/user/team/TeamMenu'));
@@ -158,20 +159,26 @@ const MyInfo = () => {
     [onclickSave, t, toast, userInfo]
   );
 
+  const labelStyles: BoxProps = {
+    flex: '0 0 80px',
+    fontSize: 'sm',
+    color: 'myGray.900'
+  };
+
   return (
     <Box>
       {/* user info */}
       {isPc && (
-        <Flex alignItems={'center'} fontSize={'xl'} h={'30px'}>
-          <MyIcon mr={2} name={'support/user/userLight'} w={'20px'} />
+        <Flex alignItems={'center'} fontSize={'md'} h={'30px'}>
+          <MyIcon mr={2} name={'support/user/userLight'} w={'1.25rem'} />
           {t('support.user.User self info')}
         </Flex>
       )}
 
-      <Box mt={[0, 6]}>
+      <Box mt={[0, 6]} fontSize={'sm'}>
         {isPc ? (
           <Flex alignItems={'center'} cursor={'pointer'}>
-            <Box flex={'0 0 80px'}>{t('support.user.Avatar')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('support.user.Avatar')}:&nbsp;</Box>
 
             <MyTooltip label={t('common.avatar.Select Avatar')}>
               <Box
@@ -219,7 +226,7 @@ const MyInfo = () => {
         )}
         {feConfigs.isPlus && (
           <Flex mt={[0, 4]} alignItems={'center'}>
-            <Box flex={'0 0 80px'}>{t('user.Member Name')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('user.Member Name')}:&nbsp;</Box>
             <Input
               flex={'1 0 0'}
               defaultValue={userInfo?.team?.memberName || 'Member'}
@@ -238,12 +245,12 @@ const MyInfo = () => {
           </Flex>
         )}
         <Flex alignItems={'center'} mt={6}>
-          <Box flex={'0 0 80px'}>{t('user.Account')}:&nbsp;</Box>
+          <Box {...labelStyles}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
         {feConfigs.isPlus && (
           <Flex mt={6} alignItems={'center'}>
-            <Box flex={'0 0 80px'}>{t('user.Password')}:&nbsp;</Box>
+            <Box {...labelStyles}>{t('user.Password')}:&nbsp;</Box>
             <Box flex={1}>*****</Box>
             <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdatePsw}>
               {t('user.Change')}
@@ -251,7 +258,7 @@ const MyInfo = () => {
           </Flex>
         )}
         <Flex mt={6} alignItems={'center'}>
-          <Box flex={'0 0 80px'}>{t('user.Team')}:&nbsp;</Box>
+          <Box {...labelStyles}>{t('user.Team')}:&nbsp;</Box>
           <Box flex={1}>
             <TeamMenu />
           </Box>
@@ -259,9 +266,7 @@ const MyInfo = () => {
         {feConfigs.isPlus && (
           <Box mt={6} whiteSpace={'nowrap'}>
             <Flex alignItems={'center'}>
-              <Box flex={'0 0 80px'} fontSize={'md'}>
-                {t('user.team.Balance')}:&nbsp;
-              </Box>
+              <Box {...labelStyles}>{t('user.team.Balance')}:&nbsp;</Box>
               <Box flex={1}>
                 <strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong> 元
               </Box>
@@ -373,7 +378,7 @@ const PlanUsage = () => {
 
   return standardPlan ? (
     <Box mt={[6, 0]}>
-      <Flex fontSize={'xl'} h={'30px'}>
+      <Flex fontSize={'lg'} h={'30px'}>
         <Flex alignItems={'center'}>
           <MyIcon mr={2} name={'support/account/plans'} w={'20px'} />
           {t('support.wallet.subscription.Team plan and usage')}
@@ -392,12 +397,12 @@ const PlanUsage = () => {
         borderColor={'borderColor.low'}
         borderRadius={'md'}
       >
-        <Flex px={[5, 10]} py={[3, 6]}>
+        <Flex px={[5, 7]} py={[3, 6]}>
           <Box flex={'1 0 0'}>
             <Box color={'myGray.600'} fontSize="sm">
               {t('support.wallet.subscription.Current plan')}
             </Box>
-            <Box fontWeight={'bold'} fontSize="xl">
+            <Box fontWeight={'bold'} fontSize="lg">
               {t(planName)}
             </Box>
 
@@ -412,18 +417,18 @@ const PlanUsage = () => {
                 </Box>
               </>
             ) : (
-              <Flex mt="2" color={'#485264'} fontSize="sm">
+              <Flex mt="2" color={'#485264'} fontSize="xs">
                 <Box>{t('support.wallet.Plan expired time')}:</Box>
                 <Box ml={2}>{formatTime2YMD(standardPlan?.expiredTime)}</Box>
               </Flex>
             )}
           </Box>
-          <Button onClick={() => router.push('/price')}>
+          <Button onClick={() => router.push('/price')} w={'8rem'} size="sm">
             {t('support.wallet.subscription.Upgrade plan')}
           </Button>
         </Flex>
         <Box py={3} borderTopWidth={'1px'} borderTopColor={'borderColor.base'}>
-          <Box py={[0, 3]} px={[5, 10]} overflow={'auto'}>
+          <Box py={[0, 3]} px={[5, 7]} overflow={'auto'}>
             <StandardPlanContentList
               level={standardPlan?.currentSubLevel}
               mode={standardPlan.currentMode}
@@ -443,8 +448,8 @@ const PlanUsage = () => {
       >
         <Flex>
           <Flex flex={'1 0 0'} alignItems={'flex-end'}>
-            <Box fontSize={'xl'}>资源用量</Box>
-            <Box fontSize={'sm'} color={'myGray.500'}>
+            <Box fontSize={'md'}>资源用量</Box>
+            <Box fontSize={'xs'} color={'myGray.500'}>
               (包含标准套餐与额外资源包)
             </Box>
           </Flex>
@@ -455,15 +460,18 @@ const PlanUsage = () => {
             alignItems={'center'}
             color={'primary.600'}
             cursor={'pointer'}
+            fontSize={'sm'}
           >
             购买额外套餐
             <MyIcon ml={1} name={'common/rightArrowLight'} w={'12px'} />
           </Link>
         </Flex>
-        <Box width={'100%'} mt={5}>
+        <Box width={'100%'} mt={5} fontSize={'sm'}>
           <Flex alignItems={'center'}>
             <Flex alignItems={'center'}>
-              <Box fontWeight={'bold'}>{t('support.user.team.Dataset usage')}</Box>
+              <Box fontWeight={'bold'} color={'myGray.900'}>
+                {t('support.user.team.Dataset usage')}
+              </Box>
               <Box color={'myGray.600'} ml={2}>
                 {datasetUsageMap.usedSize}/{datasetUsageMap.maxSize}
               </Box>
@@ -482,13 +490,16 @@ const PlanUsage = () => {
             />
           </Box>
         </Box>
-        <Box mt="9" width={'100%'}>
+        <Box mt="9" width={'100%'} fontSize={'sm'}>
           <Flex alignItems={'center'}>
             <Flex alignItems={'center'}>
-              <Box fontWeight={'bold'}>{t('support.wallet.subscription.AI points usage')}</Box>
-              <MyTooltip label={t('support.wallet.subscription.AI points usage tip')}>
-                <QuestionOutlineIcon ml={'2px'} />
-              </MyTooltip>
+              <Box fontWeight={'bold'} color={'myGray.900'}>
+                {t('support.wallet.subscription.AI points usage')}
+              </Box>
+              <QuestionTip
+                ml={1}
+                label={t('support.wallet.subscription.AI points usage tip')}
+              ></QuestionTip>
               <Box color={'myGray.600'} ml={2}>
                 {aiPointsUsageMap.used}/{aiPointsUsageMap.max}
               </Box>
@@ -557,6 +568,7 @@ const Other = () => {
             alignItems={'center'}
             userSelect={'none'}
             textDecoration={'none !important'}
+            fontSize={'sm'}
           >
             <MyIcon name={'common/courseLight'} w={'18px'} color={'myGray.600'} />
             <Box ml={2} flex={1}>
@@ -578,6 +590,7 @@ const Other = () => {
             alignItems={'center'}
             userSelect={'none'}
             textDecoration={'none !important'}
+            fontSize={'sm'}
           >
             <MyIcon name={'core/app/aiLight'} w={'18px'} />
             <Box ml={2} flex={1}>
@@ -589,7 +602,7 @@ const Other = () => {
         {feConfigs?.lafEnv && userInfo?.team.role === TeamMemberRoleEnum.owner && (
           <Flex
             bg={'white'}
-            py={4}
+            py={3}
             px={6}
             border={theme.borders.sm}
             borderWidth={'1.5px'}
@@ -598,6 +611,7 @@ const Other = () => {
             cursor={'pointer'}
             userSelect={'none'}
             onClick={onOpenLaf}
+            fontSize={'sm'}
           >
             <Image src="/imgs/workflow/laf.png" w={'18px'} alt="laf" />
             <Box ml={2} flex={1}>
@@ -615,7 +629,7 @@ const Other = () => {
         {feConfigs?.show_openai_account && (
           <Flex
             bg={'white'}
-            py={4}
+            py={3}
             px={6}
             border={theme.borders.sm}
             borderWidth={'1.5px'}
@@ -624,6 +638,7 @@ const Other = () => {
             cursor={'pointer'}
             userSelect={'none'}
             onClick={onOpenOpenai}
+            fontSize={'sm'}
           >
             <MyIcon name={'common/openai'} w={'18px'} color={'myGray.600'} />
             <Box ml={2} flex={1}>
@@ -644,6 +659,7 @@ const Other = () => {
             leftIcon={<MyIcon name={'modal/concat'} w={'18px'} color={'myGray.600'} />}
             onClick={onOpenConcat}
             h={'48px'}
+            fontSize={'sm'}
           >
             联系我们
           </Button>

projects/app/src/pages/account/components/InformTable.tsx

@@ -8,6 +8,7 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
 import { useTranslation } from 'next-i18next';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 
 const InformTable = () => {
   const { t } = useTranslation();
@@ -78,14 +79,7 @@ const InformTable = () => {
             )}
           </Box>
         ))}
-        {!isLoading && informs.length === 0 && (
-          <Flex flex={'1 0 0'} flexDirection={'column'} alignItems={'center'} pt={'10vh'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              暂无通知~
-            </Box>
-          </Flex>
-        )}
+        {!isLoading && informs.length === 0 && <EmptyTip text={'暂无通知~'}></EmptyTip>}
       </Box>
 
       {total > pageSize && (

projects/app/src/pages/account/components/Promotion.tsx

@@ -19,14 +19,15 @@ import { useQuery } from '@tanstack/react-query';
 import { getPromotionInitData, getPromotionRecords } from '@/web/support/activity/promotion/api';
 import { useUserStore } from '@/web/support/user/useUserStore';
 
-import MyTooltip from '@/components/MyTooltip';
-import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useCopyData } from '@/web/common/hooks/useCopyData';
 import type { PromotionRecordType } from '@/global/support/api/userRes.d';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import dayjs from 'dayjs';
 import { usePagination } from '@fastgpt/web/hooks/usePagination';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 
 const Promotion = () => {
   const { t } = useTranslation();
@@ -55,7 +56,7 @@ const Promotion = () => {
     p: [4, 5],
     border: theme.borders.base,
     textAlign: 'center',
-    fontSize: ['md', 'xl'],
+    fontSize: ['md', 'lg'],
     borderRadius: 'md'
   };
   const titleStyles: BoxProps = {
@@ -78,18 +79,14 @@ const Promotion = () => {
         <Box {...statisticsStyles}>
           <Flex alignItems={'center'} justifyContent={'center'}>
             <Box>{t('user.Promotion Rate')}</Box>
-            <MyTooltip label={t('user.Promotion rate tip')}>
-              <QuestionOutlineIcon ml={1} />
-            </MyTooltip>
+            <QuestionTip ml={1} label={t('user.Promotion rate tip')}></QuestionTip>
           </Flex>
           <Box {...titleStyles}>{userInfo?.promotionRate || 15}%</Box>
         </Box>
         <Box {...statisticsStyles}>
           <Flex alignItems={'center'} justifyContent={'center'}>
             <Box>{t('user.Invite Url')}</Box>
-            <MyTooltip label={t('user.Invite url tip')}>
-              <QuestionOutlineIcon ml={1} />
-            </MyTooltip>
+            <QuestionTip ml={1} label={t('user.Invite url tip')}></QuestionTip>
           </Flex>
           <Button
             mt={4}
@@ -127,14 +124,7 @@ const Promotion = () => {
           </Table>
         </TableContainer>
 
-        {!isLoading && promotionRecords.length === 0 && (
-          <Flex mt={'10vh'} flexDirection={'column'} alignItems={'center'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              无邀请记录~
-            </Box>
-          </Flex>
-        )}
+        {!isLoading && promotionRecords.length === 0 && <EmptyTip text="无邀请记录~"></EmptyTip>}
         {total > pageSize && (
           <Flex mt={4} justifyContent={'flex-end'}>
             <Pagination />