perf(tree): improve the beforeRightClick callback to support more configuration of the menu (#608)

src/components/Tree/src/index.vue

@@ -23,11 +23,12 @@
   import { filter } from '/@/utils/helper/treeHelper';
 
   import { useTree } from './useTree';
-  import { useContextMenu, ContextMenuItem } from '/@/hooks/web/useContextMenu';
+  import { useContextMenu } from '/@/hooks/web/useContextMenu';
   import { useExpose } from '/@/hooks/core/useExpose';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { basicProps } from './props';
+  import { CreateContextOptions } from '/@/components/ContextMenu';
 
   interface State {
     expandedKeys: Keys;
@@ -128,18 +129,20 @@
 
       async function handleRightClick({ event, node }: Recordable) {
         const { rightMenuList: menuList = [], beforeRightClick } = props;
-        let rightMenuList: ContextMenuItem[] = [];
+        let contextMenuOptions: CreateContextOptions = { event, items: [] };
 
         if (beforeRightClick && isFunction(beforeRightClick)) {
-          rightMenuList = await beforeRightClick(node);
+          let result = await beforeRightClick(node, event);
+          if (Array.isArray(result)) {
+            contextMenuOptions.items = result;
+          } else {
+            Object.assign(contextMenuOptions, result);
+          }
         } else {
-          rightMenuList = menuList;
+          contextMenuOptions.items = menuList;
         }
-        if (!rightMenuList.length) return;
+        if (!contextMenuOptions.items?.length) return;
-        createContextMenu({
+        createContextMenu(contextMenuOptions);
-          event,
-          items: rightMenuList,
-        });
       }
 
       function setExpandedKeys(keys: Keys) {

src/components/Tree/src/props.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ReplaceFields, ActionItem, Keys, CheckKeys } from './types';
+import type { ReplaceFields, ActionItem, Keys, CheckKeys, ContextMenuOptions } from './types';
 import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 import { propTypes } from '/@/utils/propTypes';
@@ -53,7 +53,7 @@ export const basicProps = {
   },
 
   beforeRightClick: {
-    type: Function as PropType<(...arg: any) => ContextMenuItem[]>,
+    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
     default: null,
   },
 

src/components/Tree/src/types.ts

@@ -1,4 +1,5 @@
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+import { ContextMenuItem } from '/@/hooks/web/useContextMenu';
 export interface ActionItem {
   render: (record: Recordable) => any;
   show?: boolean | ((record: Recordable) => boolean);
@@ -40,3 +41,9 @@ export interface InsertNodeParams {
   list?: TreeDataItem[];
   push?: 'push' | 'unshift';
 }
+
+export interface ContextMenuOptions {
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}