From 98b00ae86da90f978d85552e4a31d35c7cc79bbb Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Tue, 3 Jun 2025 22:53:42 +0800
Subject: [PATCH] perf: multiple menu

---
 .../zh-cn/docs/development/upgrading/4911.md  |   1 +
 packages/global/core/dataset/constants.ts     |   9 +
 .../MyMenu/{secondary.tsx => Multiple.tsx}    | 161 ++++++++----------
 .../web/components/common/MyMenu/index.tsx    |  28 +--
 .../web/components/common/MyPopover/index.tsx |   4 +-
 .../dataset/list/CreateModal.tsx              |   4 +-
 projects/app/src/pages/dataset/list/index.tsx |  13 +-
 7 files changed, 103 insertions(+), 117 deletions(-)
 rename packages/web/components/common/MyMenu/{secondary.tsx => Multiple.tsx} (63%)

diff --git a/docSite/content/zh-cn/docs/development/upgrading/4911.md b/docSite/content/zh-cn/docs/development/upgrading/4911.md
index d68dc3063..e59b7a128 100644
--- a/docSite/content/zh-cn/docs/development/upgrading/4911.md
+++ b/docSite/content/zh-cn/docs/development/upgrading/4911.md
@@ -28,6 +28,7 @@ curl --location --request POST 'https://{{host}}/api/admin/initv4911' \
 1. 商业版支持图片知识库。
 2. 工作流中增加节点搜索功能。
 3. 工作流中，子流程版本控制，可选择“保持最新版本”，无需手动更新。
+4. 增加更多审计操作日志。
 
 ## ⚙️ 优化
 
diff --git a/packages/global/core/dataset/constants.ts b/packages/global/core/dataset/constants.ts
index 090f6117e..9c552213b 100644
--- a/packages/global/core/dataset/constants.ts
+++ b/packages/global/core/dataset/constants.ts
@@ -17,6 +17,7 @@ export const ApiDatasetTypeMap: Record<
   `${DatasetTypeEnum}`,
   {
     icon: string;
+    avatar: string;
     label: any;
     collectionLabel: string;
     courseUrl?: string;
@@ -24,18 +25,21 @@ export const ApiDatasetTypeMap: Record<
 > = {
   [DatasetTypeEnum.apiDataset]: {
     icon: 'core/dataset/externalDatasetOutline',
+    avatar: 'core/dataset/externalDatasetColor',
     label: i18nT('dataset:api_file'),
     collectionLabel: i18nT('common:File'),
     courseUrl: '/docs/guide/knowledge_base/api_dataset/'
   },
   [DatasetTypeEnum.feishu]: {
     icon: 'core/dataset/feishuDatasetOutline',
+    avatar: 'core/dataset/feishuDatasetColor',
     label: i18nT('dataset:feishu_dataset'),
     collectionLabel: i18nT('common:File'),
     courseUrl: '/docs/guide/knowledge_base/lark_dataset/'
   },
   [DatasetTypeEnum.yuque]: {
     icon: 'core/dataset/yuqueDatasetOutline',
+    avatar: 'core/dataset/yuqueDatasetColor',
     label: i18nT('dataset:yuque_dataset'),
     collectionLabel: i18nT('common:File'),
     courseUrl: '/docs/guide/knowledge_base/yuque_dataset/'
@@ -45,6 +49,7 @@ export const DatasetTypeMap: Record<
   `${DatasetTypeEnum}`,
   {
     icon: string;
+    avatar: string;
     label: any;
     collectionLabel: string;
     courseUrl?: string;
@@ -53,22 +58,26 @@ export const DatasetTypeMap: Record<
   ...ApiDatasetTypeMap,
   [DatasetTypeEnum.folder]: {
     icon: 'common/folderFill',
+    avatar: 'common/folderFill',
     label: i18nT('dataset:folder_dataset'),
     collectionLabel: i18nT('common:Folder')
   },
   [DatasetTypeEnum.dataset]: {
     icon: 'core/dataset/commonDatasetOutline',
+    avatar: 'core/dataset/commonDatasetColor',
     label: i18nT('dataset:common_dataset'),
     collectionLabel: i18nT('common:File')
   },
   [DatasetTypeEnum.websiteDataset]: {
     icon: 'core/dataset/websiteDatasetOutline',
+    avatar: 'core/dataset/websiteDatasetColor',
     label: i18nT('dataset:website_dataset'),
     collectionLabel: i18nT('common:Website'),
     courseUrl: '/docs/guide/knowledge_base/websync/'
   },
   [DatasetTypeEnum.externalFile]: {
     icon: 'core/dataset/externalDatasetOutline',
+    avatar: 'core/dataset/externalDatasetColor',
     label: i18nT('dataset:external_file'),
     collectionLabel: i18nT('common:File')
   }
diff --git a/packages/web/components/common/MyMenu/secondary.tsx b/packages/web/components/common/MyMenu/Multiple.tsx
similarity index 63%
rename from packages/web/components/common/MyMenu/secondary.tsx
rename to packages/web/components/common/MyMenu/Multiple.tsx
index 2883627c8..60b7b0a31 100644
--- a/packages/web/components/common/MyMenu/secondary.tsx
+++ b/packages/web/components/common/MyMenu/Multiple.tsx
@@ -36,10 +36,12 @@ export type Props = {
   label?: string;
   width?: number | string;
   offset?: [number, number];
-  Button: React.ReactNode;
+  Trigger: React.ReactNode;
   trigger?: 'hover' | 'click';
   size?: MenuSizeType;
   placement?: PlacementWithLogical;
+  hasArrow?: boolean;
+  onClose?: () => void;
   menuList: MenuItemData[];
 };
 
@@ -189,32 +191,32 @@ const sizeMapStyle: Record<
   }
 };
 
-const MenuItem = React.forwardRef<
-  HTMLDivElement,
-  {
-    item: MenuItemData['children'][number];
-    size: MenuSizeType;
-    onClose: () => void;
-  }
->((props, ref) => {
-  const { item, size, onClose } = props;
-
+const MenuItem = ({
+  item,
+  size,
+  onClose
+}: {
+  item: MenuItemData['children'][number];
+  size: MenuSizeType;
+  onClose: () => void;
+}) => {
   return (
     <Box
-      ref={ref}
       px={3}
       py={2}
       cursor="pointer"
+      borderRadius="md"
       _hover={{
         bg: 'primary.50',
         color: 'primary.600'
       }}
       onClick={(e) => {
-        e.stopPropagation();
-        if (item.onClick && !item.menuList) {
-          onClose();
+        if (item.onClick) {
           item.onClick();
         }
+        if (!item.menuList) {
+          onClose();
+        }
       }}
     >
       <Flex alignItems="center" w="100%">
@@ -242,41 +244,53 @@ const MenuItem = React.forwardRef<
       </Flex>
     </Box>
   );
-});
+};
 
-MenuItem.displayName = 'MenuItem';
+const MultipleMenu = (props: Props) => {
+  const {
+    width = 'auto',
+    trigger = 'hover',
+    size = 'sm',
+    offset,
+    Trigger,
+    menuList,
+    hasArrow = false,
+    placement = 'bottom-start'
+  } = props;
 
-const MyMenu = ({
-  width = 'auto',
-  trigger = 'hover',
-  size = 'sm',
-  offset,
-  Button,
-  menuList,
-  placement = 'bottom-start'
-}: Props) => {
   const { isPc } = useSystem();
-  const ref = useRef<HTMLDivElement>(null);
   const formatTrigger = !isPc ? 'click' : trigger;
 
   return (
-    <Box ref={ref} display="inline-block">
-      <MyPopover
-        placement={placement}
-        offset={offset || [0, 5]}
-        hasArrow
-        trigger={formatTrigger}
-        w={width}
-        zIndex={999}
-        closeOnBlur={false}
-        autoFocus={false}
-        Trigger={Button}
-      >
-        {({ onClose }) => (
-          <Box bg="white" minW="150px" maxW="300px" p="6px" borderRadius="md" boxShadow="md">
+    <MyPopover
+      placement={placement}
+      offset={offset}
+      hasArrow={hasArrow}
+      trigger={formatTrigger}
+      w={width}
+      zIndex={999}
+      closeOnBlur={false}
+      autoFocus={false}
+      Trigger={Trigger}
+    >
+      {({ onClose }) => {
+        const onCloseFn = () => {
+          onClose();
+          props?.onClose?.();
+        };
+
+        return (
+          <Box
+            bg="white"
+            maxW="300px"
+            p="6px"
+            border={'1px solid #fff'}
+            boxShadow={'3'}
+            borderRadius={'md'}
+          >
             {menuList.map((group, i) => (
               <Box key={i}>
-                {i !== 0 && <MyDivider {...sizeMapStyle[size].dividerStyle} />}
+                {i !== 0 && <MyDivider h={'1.5px'} {...sizeMapStyle[size].dividerStyle} />}
                 {group.label && (
                   <Box fontSize="sm" px={3} py={1} color="myGray.500">
                     {group.label}
@@ -286,54 +300,21 @@ const MyMenu = ({
                   return (
                     <Box key={index}>
                       {item.menuList ? (
-                        <MyPopover
-                          placement="right-start"
-                          offset={[10, 10]}
-                          hasArrow
-                          trigger={formatTrigger}
-                          w={'auto'}
-                          zIndex={1000}
-                          closeOnBlur={false}
-                          autoFocus={false}
+                        <MultipleMenu
+                          {...props}
+                          placement={'left'}
+                          trigger={'hover'}
+                          menuList={item.menuList}
+                          onClose={onCloseFn}
                           Trigger={
-                            <Box position="relative">
-                              <MenuItem item={item} size={size} onClose={onClose} />
+                            <Box>
+                              <MenuItem item={item} size={size} onClose={onCloseFn} />
                             </Box>
                           }
-                        >
-                          {({ onClose: onCloseSubmenu }) => {
-                            return (
-                              <Box
-                                bg="white"
-                                minW="150px"
-                                maxW="300px"
-                                p="6px"
-                                borderRadius="md"
-                                boxShadow="md"
-                                position="relative"
-                                zIndex={1001}
-                              >
-                                {item.menuList?.map((subGroup, subI) => (
-                                  <Box key={subI}>
-                                    {subGroup.children.map((subItem, subIndex) => (
-                                      <MenuItem
-                                        key={subIndex}
-                                        item={subItem}
-                                        size={size}
-                                        onClose={() => {
-                                          onClose();
-                                          onCloseSubmenu();
-                                        }}
-                                      />
-                                    ))}
-                                  </Box>
-                                ))}
-                              </Box>
-                            );
-                          }}
-                        </MyPopover>
+                          hasArrow
+                        />
                       ) : (
-                        <MenuItem item={item} size={size} onClose={onClose} />
+                        <MenuItem item={item} size={size} onClose={onCloseFn} />
                       )}
                     </Box>
                   );
@@ -341,10 +322,10 @@ const MyMenu = ({
               </Box>
             ))}
           </Box>
-        )}
-      </MyPopover>
-    </Box>
+        );
+      }}
+    </MyPopover>
   );
 };
 
-export default React.memo(MyMenu);
+export default React.memo(MultipleMenu);
diff --git a/packages/web/components/common/MyMenu/index.tsx b/packages/web/components/common/MyMenu/index.tsx
index 49e07cace..4f67dcca0 100644
--- a/packages/web/components/common/MyMenu/index.tsx
+++ b/packages/web/components/common/MyMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   Menu,
   MenuList,
@@ -18,9 +18,20 @@ import { useSystem } from '../../../hooks/useSystem';
 import Avatar from '../Avatar';
 
 export type MenuItemType = 'primary' | 'danger' | 'gray' | 'grayBg';
-
 export type MenuSizeType = 'sm' | 'md' | 'xs' | 'mini';
 
+export type MenuItemData = {
+  label?: string;
+  children: Array<{
+    isActive?: boolean;
+    type?: MenuItemType;
+    icon?: IconNameType | string;
+    label: string | React.ReactNode;
+    description?: string;
+    onClick?: () => any;
+    menuItemStyles?: MenuItemProps;
+  }>;
+};
 export type Props = {
   width?: number | string;
   offset?: [number, number];
@@ -29,18 +40,7 @@ export type Props = {
   size?: MenuSizeType;
 
   placement?: PlacementWithLogical;
-  menuList: {
-    label?: string;
-    children: {
-      isActive?: boolean;
-      type?: MenuItemType;
-      icon?: IconNameType | string;
-      label: string | React.ReactNode;
-      description?: string;
-      onClick?: () => any;
-      menuItemStyles?: MenuItemProps;
-    }[];
-  }[];
+  menuList: MenuItemData[];
 };
 
 const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: string }> = {
diff --git a/packages/web/components/common/MyPopover/index.tsx b/packages/web/components/common/MyPopover/index.tsx
index ccc2bfd3b..3d80893a8 100644
--- a/packages/web/components/common/MyPopover/index.tsx
+++ b/packages/web/components/common/MyPopover/index.tsx
@@ -43,11 +43,11 @@ const MyPopover = ({
       initialFocusRef={firstFieldRef}
       onOpen={() => {
         onOpen();
-        onOpenFunc && onOpenFunc();
+        onOpenFunc?.();
       }}
       onClose={() => {
         onClose();
-        onCloseFunc && onCloseFunc();
+        onCloseFunc?.();
       }}
       placement={placement}
       offset={offset}
diff --git a/projects/app/src/pageComponents/dataset/list/CreateModal.tsx b/projects/app/src/pageComponents/dataset/list/CreateModal.tsx
index bd26513e7..d70443ef1 100644
--- a/projects/app/src/pageComponents/dataset/list/CreateModal.tsx
+++ b/projects/app/src/pageComponents/dataset/list/CreateModal.tsx
@@ -50,7 +50,7 @@ const CreateModal = ({
     defaultValues: {
       parentId,
       type: type || DatasetTypeEnum.dataset,
-      avatar: DatasetTypeMap[type].icon,
+      avatar: DatasetTypeMap[type].avatar,
       name: '',
       intro: '',
       vectorModel:
@@ -95,7 +95,7 @@ const CreateModal = ({
             w={'20px'}
             h={'20px'}
             borderRadius={'xs'}
-            src={DatasetTypeMap[type].icon}
+            src={DatasetTypeMap[type].avatar}
             pr={'10px'}
           />
           {t('common:core.dataset.Create dataset', { name: t(DatasetTypeMap[type].label) })}
diff --git a/projects/app/src/pages/dataset/list/index.tsx b/projects/app/src/pages/dataset/list/index.tsx
index 0187ddeaa..2684c85c3 100644
--- a/projects/app/src/pages/dataset/list/index.tsx
+++ b/projects/app/src/pages/dataset/list/index.tsx
@@ -9,7 +9,7 @@ import List from '@/pageComponents/dataset/list/List';
 import { DatasetsContext } from './context';
 import DatasetContextProvider from './context';
 import { useContextSelector } from 'use-context-selector';
-import MyMenu from '@fastgpt/web/components/common/MyMenu/secondary';
+import MultipleMenu from '@fastgpt/web/components/common/MyMenu/Multiple';
 import { AddIcon } from '@chakra-ui/icons';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -138,10 +138,9 @@ const Dataset = () => {
               ? folderDetail.permission.hasWritePer
               : userInfo?.team?.permission.hasDatasetCreatePer) && (
               <Box pl={[0, 4]}>
-                <MyMenu
+                <MultipleMenu
                   size="md"
-                  offset={[0, 10]}
-                  Button={
+                  Trigger={
                     <Button variant={'primary'} px="0">
                       <Flex alignItems={'center'} px={5}>
                         <AddIcon mr={2} />
@@ -163,11 +162,7 @@ const Dataset = () => {
                           label: t('dataset:website_dataset'),
                           description: t('dataset:website_dataset_desc'),
                           onClick: () => onSelectDatasetType(DatasetTypeEnum.websiteDataset)
-                        }
-                      ]
-                    },
-                    {
-                      children: [
+                        },
                         {
                           icon: 'core/dataset/otherDataset',
                           label: t('dataset:other_dataset'),