perf: multiple menu

2025-06-03 22:53:42 +08:00 · 2025-06-03 22:53:42 +08:00 · 98b00ae86d
commit 98b00ae86d
parent c1f8d5b032
7 changed files with 103 additions and 117 deletions
--- 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. 增加更多审计操作日志。

 ## ⚙️ 优化

--- 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')
  }
--- a/packages/web/components/common/MyMenu/secondary.tsx
+++ b/packages/web/components/common/MyMenu/secondary.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);
--- 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 }> = {
--- 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}
--- 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) })}
--- 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'),