资产目录增加右键

src/index.less

@@ -300,7 +300,7 @@ tr.drop-over-upward td {
   }
 }
 
-.yy-btn, .anticon {
+.yy-btn {
    svg {
     fill: @icon-color !important;
   }
@@ -312,7 +312,20 @@ tr.drop-over-upward td {
   }
 }
 
-.anticon-disable {
+.btn-group {
+  .anticon {
+    svg {
+     fill: @icon-color !important;
+    }
+ 
+    &:hover {
+     svg {
+       fill: @icon-hover-color !important;
+     }
+   }
+ }
+
+ .anticon-disable {
     svg {
       fill: @icon-disable-color !important;
     }
@@ -322,6 +335,7 @@ tr.drop-over-upward td {
         fill: @icon-disable-color !important;
       }
     }
+  }
 }
 
 .primary-bg-container {

src/view/Manage/AssetManage/Component/AssetTree.jsx

 import React, { useEffect, useState, useRef } from 'react';
 import { useMount, useUnmount } from 'ahooks';
 import {Card, Spin, Tooltip, Tree, Input, Dropdown, Menu, Modal} from 'antd';
-import { PlusOutlined, ImportOutlined,EditOutlined,DeleteOutlined,ExportOutlined,ReloadOutlined, SettingOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import { dispatch } from '../../../../model';
 import ImportDirectory from './ImportDirectory'; 
@@ -10,10 +11,20 @@ import UpdateDirectoryModal from './UpdateDirectoryModal';
 import CustomDirectoryModal from './CustomDirectoryModal';
 import { showMessage, getQueryParam } from '../../../../util';
 import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference, AssetMountReference, AnchorDirId } from '../../../../util/constant';
+
 import './AssetTree.less';
 
+import 'react-contexify/dist/ReactContexify.css';
+
+
 const AssetTree = (props) => {
 
+  const MENU_ID = 'asset-tree';
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
   const { checkable = false, onSelect, className, onCheck, tableId, reference=AssetManageReference, onDirectoryChange, centerId } = props; 
   const [ keyword, setKeyword ] = useState('');
   const [ loading, setLoading ] = useState(false);
@@ -25,6 +36,7 @@ const AssetTree = (props) => {
   const [ autoExpandParent, setAutoExpandParent ] = useState(false);
   const [ currentDirId, setCurrentDirId ] = useState('');
   const [ currentDirType, setCurrentDirType ] = useState('');
+  const [ currentRightClickDir, setCurrentRightClickDir ] = useState({});
   const [ importDirectoryVisible, setImportDirectoryVisible ] = useState(false);
   const [ updateDirectoryModalVisible, setUpdateDirectoryModalVisible ] = useState(false);
   const [ updateDirectoryAction, setUpdateDirectoryAction ] = useState('');
@@ -365,16 +377,16 @@ const AssetTree = (props) => {
   }
 
   const deleteDir = () => {
-    if (currentDirType === 'custom') return;
+    if (currentRightClickDir.type === 'custom') return;
     
-    if (currentDirId) {
+    if (currentRightClickDir.nodeId) {
       modal.confirm({
         title: '提示',
         content: '节点下可能包含资产信息，删除后将把资产从该目录上移除，确定继续吗?',
         onOk: () => {
           dispatch({
             type: 'assetmanage.deleteDirectory',
-            payload: {data: [ currentDirId ]},
+            payload: {data: [ currentRightClickDir.nodeId ]},
             callback: () => {
               showMessage("success","删除成功");
               getAllDirectoryAsTree(true);
@@ -389,7 +401,7 @@ const AssetTree = (props) => {
   }
 
   const moveNode = (steps) => {
-    if ((currentDirId||'') === '') {
+    if ((currentRightClickDir.nodeId||'') === '') {
       showMessage('info', '请先选择目录');
       return;
     }
@@ -399,7 +411,7 @@ const AssetTree = (props) => {
       type: 'assetmanage.upDownDirectory',
       payload: {
         params: {
-          dirId: currentDirId,
+          dirId: currentRightClickDir.nodeId,
           steps
         }
       },
@@ -510,6 +522,15 @@ const AssetTree = (props) => {
     refresh && getAllDirectoryAsTree(false);
   }
 
+  const displayMenu = (e) => {
+    show(e, {
+      position: {
+        x: e.clientX + 30,
+        y: e.clientY - 10
+      }
+    });
+  }
+
   const exportMenu = (
     <Menu>
       <Menu.Item>
@@ -547,13 +568,10 @@ const AssetTree = (props) => {
           >{item.text}</span>
         );
       if (item.children) {
-        return { title, key: item.nodeId, children: loop(item.children, false) };
+        return { ...item, ...{title, key: item.nodeId, children: loop(item.children, false)} };
       }
 
-      return {
-        title,
-        key: item.nodeId
-      };
+      return { ...item, ...{ title, key: item.nodeId }};
     });
 
   const classes = classNames('asset-tree', className, {
@@ -566,19 +584,16 @@ const AssetTree = (props) => {
       className={classes}
       title={ (reference===AssetBrowseReference||reference===ResourceBrowseReference || reference===AssetMountReference) ? null : (
         <div
-          className='flex px-2'
+          className='flex px-2 btn-group'
           style={{
             height: 60,
             alignItems: 'center',
-            justifyContent: 'space-between',
+            justifyContent: 'space-around',
           }}
         >
           <Tooltip title="新增目录">
             <PlusOutlined className={(currentDirType==='custom-root'||currentDirType==='custom')?'anticon-disable': ''} onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer' }}/>
           </Tooltip>
-          <Tooltip title="修改目录">
-            <EditOutlined onClick={editDir} style={{ fontSize:16,cursor: 'pointer' }} />
-          </Tooltip>
           <Tooltip title="刷新目录">
             <ReloadOutlined onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
@@ -590,15 +605,6 @@ const AssetTree = (props) => {
               <ExportOutlined style={{ fontSize:16,cursor:'pointer' }} />
             </Tooltip>
           </Dropdown>
-          <Tooltip title="上移目录">
-            <ArrowUpOutlined onClick={() => { moveNode(1); }} style={{ fontSize:16,cursor:'pointer' }} />
-          </Tooltip>
-          <Tooltip title="下移目录">
-            <ArrowDownOutlined onClick={() => { moveNode(-1); }} style={{ fontSize:16,cursor:'pointer' }} />
-          </Tooltip>
-          <Tooltip title="删除目录">
-            <DeleteOutlined className={(currentDirType==='custom')?'#anticon-disable': ''} onClick={deleteDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer' }} />
-          </Tooltip>
           <Tooltip title="自定义目录">
             <SettingOutlined onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
@@ -628,6 +634,12 @@ const AssetTree = (props) => {
           onCheck={onTreeCheck}
           checkedKeys={checkedKeys}
           checkStrictly
+          onRightClick={({event, node}) => {
+            if (reference === AssetManageReference) {
+              setCurrentRightClickDir(node);
+              displayMenu(event);
+            }
+          }}
           />
       </Spin>
 
@@ -635,7 +647,7 @@ const AssetTree = (props) => {
         visible={ updateDirectoryModalVisible }
         onCancel={ onUpdateDirectoryCancel }
         action={ updateDirectoryAction }
-        dirId={ currentDirId }
+        dirId={ (updateDirectoryAction==='add')?currentDirId:currentRightClickDir.nodeId }
       />
       <ImportDirectory 
         visible={ importDirectoryVisible }
@@ -648,6 +660,24 @@ const AssetTree = (props) => {
         action={ customDirectoryAction }
         dirId= { currentDirId }
       />
+
+      <RcMenu id={MENU_ID}>
+        <RcItem id="edit" onClick={editDir}>
+          修改目录
+        </RcItem>
+        <RcItem id="up" onClick={() => { moveNode(1); }}>
+          上移目录
+        </RcItem> 
+        <RcItem id="down" onClick={() => { moveNode(-1); }}>
+          下移目录
+        </RcItem> 
+        {
+          (currentRightClickDir?.type!=='custom') && <RcItem id="delete" onClick={deleteDir}>
+          删除目录
+        </RcItem>
+        }
+
+      </RcMenu>  
       {contextHolder}
     </Card>
   )

src/view/Manage/Model/Component/ModelTree.jsx

@@ -429,7 +429,7 @@ const ModelTree = (props) => {
     <div className={classes}>
     {
       (refrence==='') && <div
-        className='p-3'
+        className='p-3 btn-group'
         style={{
           display: 'flex',
           borderBottom: "1px solid #EFEFEF",