资产管理目录增加栏目

package.json

@@ -73,7 +73,7 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://139.198.127.28:18762",
+  "proxy": "http://139.198.127.28:18189",
   "homepage": "http://myhost/data-govern",
   "devDependencies": {
     "autoprefixer": "^9.8.6",

src/App.js

@@ -26,7 +26,7 @@ const AssetDetail = loadable(()=> import('./view/Manage/AssetManage/Component/As
 const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportAction'));
 const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel'));
 const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate'));
-const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetTree'));
+const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetManageTree'));
 
 export class App extends React.Component {
 

src/model/assetmanage.js

@@ -117,6 +117,10 @@ export function* listDirectoryByName(payload) {
   return yield call(service.listDirectoryByName, payload);
 }
 
+export function* getDirectoryChild(payload) {
+  return yield call(service.getDirectoryChild, payload);
+}
+
 export function* loadDataAssets(payload) {
   return yield call(service.loadDataAssets, payload);
 }

src/service/dataassetmanager.js

@@ -144,6 +144,10 @@ export function listDirectoryByName(payload) {
   return GetJSON("/dataassetmanager/directoryApi/listDirectoryByName", payload);
 }
 
+export function getDirectoryChild(payload) {
+  return GetJSON("/dataassetmanager/directoryApi/getChildByParentId", payload);
+}
+
 export function getMetadataModelTree() {
   return GetJSON("/metadatarepo/rest/model/tree");
 }

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

+import React, { useEffect, useState, useRef } from 'react';
+import {Card, Spin, Tooltip, Tree, Dropdown, Menu, Modal, AutoComplete} from 'antd';
+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'; 
+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 { highlightSearchContentByTerms } from '../../../../util';
+
+import './AssetTree.less';
+import 'react-contexify/dist/ReactContexify.css';
+import { resolveTypeReferenceDirective } from 'typescript';
+
+const { Option } = AutoComplete;
+
+function updateTreeData(list, key, children) {
+  return list.map((node) => {
+    if (node.nodeId === key) {
+      return { ...node, children };
+    }
+
+    if (node.children) {
+      return {
+        ...node,
+        children: updateTreeData(node.children, key, children),
+      };
+    }
+
+    return node;
+  });
+}
+
+const AssetManageTree = (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);
+  const [ treeData, setTreeData ] = useState([]);
+  const [ dataList, setDataList ] = useState([]);
+  const [ groupIds, setGroupIds ] = useState([]);
+  const [ expandedKeys, setExpandedKeys ] = useState([]);
+  const [ checkedKeys, setCheckedKeys ] = useState([]);
+  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('');
+  const [ customDirectoryModalVisible, setCustomDirectoryModalVisible ] = useState(false);
+  const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
+  const [options, setOptions] = useState([]);
+
+  const [modal, contextHolder] = Modal.useModal();
+  
+  const timestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
+  const id = getQueryParam(AnchorId, props?.location?.search);
+  const did = getQueryParam(AnchorDirId, props?.location?.search);
+
+  const treeDataRef = useRef([]);
+  const dataListRef = useRef([]);
+
+  useEffect(() => {
+    window?.addEventListener("storage", storageChange);
+
+    return () => {
+      window?.removeEventListener("storage", storageChange);
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if ((did||'') !== '') {
+      getAllDirectoryAsTree(true, did);
+    } else if ((id||'') !== '') {
+      getDataAssetLocationThenGetTreeData();
+    }  else {
+      getAllDirectoryAsTree(true);
+    } 
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timestamp])
+
+  useEffect(() => {
+    if ((tableId||'') !== '') {
+      getTableDirIds();
+    } 
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableId])
+
+  useEffect(() => {
+    if ((centerId||'')!=='' && centerId!==currentDirId) {
+      treeDirectoryChanged(centerId);
+    } 
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [centerId])
+
+  const storageChange = (e) => {
+    if (e.key === 'assetDirChangeEvent') {
+      if ((e.dirId||'') !== '') {
+        treeDirectoryChanged(e.dirId);
+      }
+    } else if (e.key === 'assetRelationOnClickEvent') {
+      treeDirectoryChanged(e.relation?.dirId);
+    }
+  }
+
+  const getDataAssetLocationThenGetTreeData = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDataAssetLocation',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        getAllDirectoryAsTree(true, data.dirId||'');
+      },
+      error: () => {
+        setLoading(false);
+        getAllDirectoryAsTree(true);
+      }
+    });
+  }
+
+  const getTableDirIds = () => {
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: tableId
+      },
+      callback: data => {
+        setCheckedKeys(data.dirIds||[]);
+        setExpandedKeys(data.dirIds||[]);
+        setAutoExpandParent(true);
+        onCheck && onCheck(data.dirIds||[]);
+      },
+    })
+  }
+
+  const getAllDirectoryAsTree = (resetCurrentDirId=true, defaultSelectedId='') => {
+
+    setLoading(true);
+    if (resetCurrentDirId) {
+      onSelect && onSelect('', '');
+    }
+
+    let url = '';
+    if (reference === AssetManageReference || reference === AssetMountReference) {
+      url = 'assetmanage.queryAllDirectoryAsTree';
+    }
+    
+    dispatch({
+      type: url,
+      callback: data => {
+        setLoading(false);
+
+        let newData = [...data];
+
+        if (reference === AssetMountReference) {
+          newData = newData.filter(item => item.resourceType!=='custom');
+        }
+
+        setTreeData(newData);
+
+        const _dataList = [], _groupIds = [];
+        generateList(newData, _dataList);
+        generateGroupIds(newData, _groupIds);
+        setDataList(_dataList);
+
+        setGroupIds(_groupIds);
+
+        treeDataRef.current = newData;
+        dataListRef.current = _dataList;
+
+        let defaultItem = null;
+
+        if ((defaultSelectedId||'') === '') {
+          _dataList.forEach(item => {
+            if (item.level!==1 && (defaultSelectedId||'')==='') {
+              defaultSelectedId = item.key;
+            }
+          })
+        }
+
+        function recursion(subCatalogs) {
+
+          if ((subCatalogs||[]).length===0) return;
+
+          (subCatalogs||[]).forEach(catalog=> {
+    
+            if (catalog.nodeId === defaultSelectedId) {
+              defaultItem = catalog;
+            }
+
+            recursion(catalog.children);
+          })
+        } 
+
+        if ((defaultSelectedId||'') !== '') {
+          recursion(newData);
+        } 
+
+        if (resetCurrentDirId) {
+
+          if (defaultItem) {  
+            const expandedKeys = _dataList
+              .map(item => {
+                if (item.key.indexOf(defaultSelectedId) > -1) {
+                  return getParentKey(item.key, newData);
+                }
+                return null;
+              })
+              .filter((item, i, self) => item && self.indexOf(item) === i);
+  
+            setExpandedKeys(expandedKeys);
+            setAutoExpandParent(true);
+  
+            setCurrentDirId(defaultItem.nodeId);
+            setCurrentDirType(defaultItem.type||'');
+            onSelect && onSelect(defaultItem.nodeId, defaultItem.type||'');
+          } 
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const treeDirectoryChanged = (did) => {
+
+    let defaultItem = null;
+
+    function recursion(subCatalogs) {
+
+      if ((subCatalogs||[]).length===0) return;
+
+      (subCatalogs||[]).forEach(catalog=> {
+
+        if (catalog.nodeId === did) {
+          defaultItem = catalog;
+        }
+
+        recursion(catalog.children);
+      })
+    } 
+
+    if ((did||'') !== '') {
+      recursion(treeDataRef.current);
+    }
+
+    if (defaultItem) {  
+      const expandedKeys = (dataListRef.current||[])
+        .map(item => {
+          if (item.key.indexOf(did) > -1) {
+            return getParentKey(item.key, treeDataRef.current);
+          }
+          return null;
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i);
+
+      setExpandedKeys(expandedKeys);
+      setAutoExpandParent(true);
+
+      setCurrentDirId(defaultItem.nodeId);
+      setCurrentDirType(defaultItem.type||'');
+      onSelect && onSelect(defaultItem.nodeId, defaultItem.type||'');
+    } 
+  }
+
+  const generateList = (treeData, list, path = null) => {
+    for (let i = 0; i < treeData.length; i++) {
+
+      if (treeData[i].resourceType !== 'custom') {
+        const node = treeData[i];
+        const { nodeId, text } = node;
+
+        const currentPath = path ? `${path}/${text}` : text;
+        list.push({ key: nodeId , title: text, value: currentPath, level: node.level });
+        if (node.children) {
+          generateList(node.children, list, currentPath);
+        }
+      }
+    }
+  };
+
+  const generateGroupIds = (treeData, list) => {
+    
+    function generateGroupItem(data, list) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i];
+        list.push(node.nodeId);
+        if (node.children) {
+          generateGroupItem(node.children, list);
+        }
+      }
+    }
+   
+    for (let i = 0; i < treeData.length; i++) {
+      const node = treeData[i];
+      const { nodeId } = node;
+
+      const groupItem = [nodeId];
+      if (node.children) {
+        generateGroupItem(node.children, groupItem);
+      }
+
+      list.push(groupItem);
+    }
+
+  };
+
+  const getParentKey = (key, tree) => {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i];
+      if (node.children) {
+        if (node.children.some(item => item.nodeId === key)) {
+          parentKey = node.nodeId;
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children);
+        }
+      }
+    }
+    return parentKey;
+  };
+
+  const getCurrentType = (key, tree) => {
+    let type = '';
+
+    (tree||[]).forEach(node => {
+      if (node.nodeId === key) {
+        type = node.type||'';        
+      } else if (node.children) {
+        if (getCurrentType(key, node.children)) {
+          type = getCurrentType(key, node.children);
+        }
+      }
+    })
+    
+    return type;
+  }
+ 
+  const addDir = () => {
+    if (currentDirType==='custom') return;
+
+    setUpdateDirectoryAction('add');
+    setUpdateDirectoryModalVisible(true);
+  }
+
+  const editDir = () => {
+
+    if ((currentDirType||'') === '') {
+
+      setUpdateDirectoryAction('edit');
+      setUpdateDirectoryModalVisible(true);
+    
+    } else if (currentDirType === 'custom') {
+      
+      setCustomDirectoryAction('edit');
+      setCustomDirectoryModalVisible(true);
+    
+    }
+  }
+
+  const refreshTree = () => {
+    getAllDirectoryAsTree(false);
+  }
+
+  const importDir = () => {
+    if (currentDirType==='custom') return;
+
+    setImportDirectoryVisible(true);
+  }
+
+  const exportAllDir = () => {
+    window.open('/api/dataassetmanager/directoryApi/export');
+  }
+
+  const exportCurrentDir = () => {
+    if(currentDirId){
+      dispatch({
+        type: 'assetmanage.getDirectoryById',
+        payload: { 
+          dirId: currentDirId
+        },
+        callback: data => {
+          window.open(`/api/dataassetmanager/directoryApi/export?parentPath=${data.path}`);  
+        }
+      })
+    } else {
+      showMessage("warn","请选择目录")
+    }
+  }
+
+  const deleteDir = () => {    
+    if (currentRightClickDir.nodeId) {
+      modal.confirm({
+        title: '提示',
+        content: '节点下可能包含资产信息，删除后将把资产从该目录上移除，确定继续吗?',
+        onOk: () => {
+          dispatch({
+            type: 'assetmanage.deleteDirectory',
+            payload: {data: [ currentRightClickDir.nodeId ]},
+            callback: () => {
+              showMessage("success","删除成功");
+              getAllDirectoryAsTree(true, currentDirId);
+            }
+          })
+        }
+      })
+
+    } else {
+      showMessage('info', '请先选择目录');
+    }
+  }
+
+  const moveNode = (steps) => {
+    if ((currentRightClickDir.nodeId||'') === '') {
+      showMessage('info', '请先选择目录');
+      return;
+    }
+
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.upDownDirectory',
+      payload: {
+        params: {
+          dirId: currentRightClickDir.nodeId,
+          steps
+        }
+      },
+      callback: () => {
+        showMessage('success', (steps===1)?'上移目录成功':'下移目录成功');
+        getAllDirectoryAsTree(false);
+      }, 
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const customDir = () => {
+    setCustomDirectoryAction('add');
+    setCustomDirectoryModalVisible(true);
+  }
+
+  // const onChange = (e) => {
+
+  //   const { value } = e.target;
+
+  //   if (value === '') {
+  //     setExpandedKeys([]);
+  //     setAutoExpandParent(false);
+  //     setKeyword(value);
+  //     return;
+  //   }
+
+  //   const expandedKeys = dataList
+  //     .map(item => {
+  //       if (item.title.indexOf(value) > -1) {
+  //         return getParentKey(item.key, treeData);
+  //       }
+  //       return null;
+  //     })
+  //     .filter((item, i, self) => item && self.indexOf(item) === i);
+
+  //   setExpandedKeys(expandedKeys);
+  //   setAutoExpandParent(true);
+  //   setKeyword(value);
+  // }
+
+  const onTreeSelect = (keys, { node }) => {
+
+    if ((keys||[]).length === 0) {
+      return;
+    }
+
+    if (node.level === 1) {
+      return;
+    }
+
+    setCurrentDirId(keys[0]);
+
+    const _currentDirType = getCurrentType(keys[0], treeData);
+
+    setCurrentDirType(_currentDirType);
+    onSelect && onSelect(keys[0], _currentDirType);
+  }
+  
+  const onTreeCheck = (values, e) => {
+    //同一主题下只能挂载一个目录
+
+    if (e.node?.level === 1) {
+      showMessage('warn', '栏目不允许勾选');
+      return;
+    }
+
+    const _checkedKeysValue = [...(values.checked||[])];
+
+    if (e.checked) {
+      const _currentNodeId = e.node?.key;
+      let _groupItem = [];
+
+      groupIds.forEach(groupItem => {
+        groupItem.forEach(id => {
+          if (id === _currentNodeId) {
+            _groupItem = groupItem;
+          }
+        })
+      })
+
+      const _filterKeys = (_checkedKeysValue.filter(item => item===_currentNodeId || !(_groupItem.includes(item))));
+      
+      setCheckedKeys(_filterKeys);
+      onCheck && onCheck(_filterKeys);
+    } else {  
+      setCheckedKeys(_checkedKeysValue);
+      onCheck && onCheck(_checkedKeysValue);
+    }
+
+  }
+
+  const onExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys);
+    setAutoExpandParent(false);
+  };
+
+  const onUpdateDirectoryCancel = (refresh=false, id) => {
+    setUpdateDirectoryModalVisible(false);
+    if (refresh) {
+      if (updateDirectoryAction === 'add') {
+        getAllDirectoryAsTree(true, id);
+      } else {
+        getAllDirectoryAsTree();
+        onDirectoryChange && onDirectoryChange();
+      }
+    }
+  }
+
+  const onImportDirectoryCancel = (refresh=false, resetCurrentDirId=false) => {
+    setImportDirectoryVisible(false);
+    refresh && getAllDirectoryAsTree(resetCurrentDirId);
+  }
+
+  const onCustomDirectoryCancel = (refresh=false, id='') => {
+    setCustomDirectoryModalVisible(false);
+    if (refresh) {
+      if (customDirectoryAction === 'add') {
+        getAllDirectoryAsTree(true, id);
+      } else {
+        getAllDirectoryAsTree(false);
+      }
+    }
+  }
+
+  const displayMenu = (e) => {
+    show(e, {
+      position: {
+        x: e.clientX + 30,
+        y: e.clientY - 10
+      }
+    });
+  }
+
+  const onAutoCompleteSearch = (searchText) => {
+    setKeyword(searchText);
+    setOptions(
+      !searchText ? [] : (dataList||[]).filter(item => item.value.indexOf(searchText)!==-1),
+    );
+  };
+
+  const onAutoCompleteSelect = (value, option) => {
+    const paths = value.split('/');
+    setKeyword(paths[paths.length-1]);
+    treeDirectoryChanged(option.key);
+  };
+
+  const onLoadData = ({ key, children }) => 
+    new Promise((resolve) => {
+
+      if (children) {
+        resolve();
+        return;
+      }
+
+      dispatch({
+        type: 'assetmanage.getDirectoryChild',
+        payload: {
+          parentId: key,
+        },
+        callback: (data) => {
+          if (data && data.length>0) {
+            let newTreeData = updateTreeData(treeData, key, data);
+            setTreeData(newTreeData);
+            treeDataRef.current = newTreeData;
+          }
+      
+          resolve();
+        }, 
+        error: () => {
+          resolve();
+        }
+      });
+    });
+
+  const exportMenu = (
+    <Menu>
+      <Menu.Item>
+        <div style={{ textAlign: 'center' }} onClick={() => exportAllDir()}>
+          导出所有
+        </div>
+      </Menu.Item>
+      <Menu.Item>
+        <div style={{ textAlign: 'center' }} onClick={() => exportCurrentDir()}>
+          导出选中目录
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const loop = (data, rootResourceType = null, isRoot = true) =>
+    data.map(item => {
+
+      if (item.level === 1) {
+        rootResourceType = item.resourceType;
+      }
+
+      const title = (
+        <span
+          className={isRoot?'title-color': 'text-color'}
+        >
+          {item.text}
+          {
+            (reference===AssetManageReference && item.level!==1 ) && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
+          }
+        </span>
+      );
+
+      if (item.children && item.children.length>0) {
+        return { ...item, ...{title, key: item.nodeId, children: loop(item.children, rootResourceType, false), isRoot} };
+      }
+
+      if (rootResourceType !== 'custom') {
+        return { ...item, ...{ title, key: item.nodeId, isRoot, isLeaf: true }};
+      }
+
+      return { ...item, ...{ title, key: item.nodeId, isRoot, children: null}};
+    });
+
+  const classes = classNames('asset-tree', className, {
+    'asset-tree-read-only': (reference===AssetBrowseReference||reference===ResourceBrowseReference),
+    'asset-tree-asset-mount-reference': reference===AssetMountReference,
+  });  
+
+  return (
+    <Card
+      className={classes}
+      title={ (reference===AssetBrowseReference||reference===ResourceBrowseReference || reference===AssetMountReference) ? null : (
+        <div
+          className='flex px-2'
+          style={{
+            height: 40,
+            alignItems: 'center',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Tooltip title="新增目录">
+            <PlusOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom')?'not-allowed':'pointer' }}/>
+          </Tooltip>
+          <Tooltip title="刷新目录">
+            <ReloadOutlined className='default' onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
+          </Tooltip>
+          <Tooltip title="导入目录">
+            <ImportOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer' }} />
+          </Tooltip>
+          <Dropdown overlay={exportMenu} placement="bottomCenter" >
+            <Tooltip title="导出目录">
+              <ExportOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
+            </Tooltip>
+          </Dropdown>
+          <Tooltip title="自定义目录">
+            <SettingOutlined className='default' onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
+          </Tooltip>
+        </div>
+      )}
+      bordered={false} 
+      bodyStyle={{ padding: '10px 15px' }}
+      headStyle={{ padding: 0 }}
+      style={{ width: '100%' }} 
+    >
+      <Spin spinning={loading}>
+        <AutoComplete
+          allowClear
+          value={keyword}
+          style={{ marginBottom: 10, width: '100%' }}
+          onSelect={onAutoCompleteSelect}
+          onSearch={onAutoCompleteSearch}
+          onClear={() => { setKeyword(''); }}
+        >
+        {
+          (options||[]).map((item, index) => {
+            return (
+              <Option key={item.key} value={item.value}>
+                <div style={{ whiteSpace: 'normal' }}>
+                {highlightSearchContentByTerms(item.value, [keyword])}
+                </div>
+              </Option>
+            );
+          })
+        }
+        </AutoComplete>
+        <Tree
+          checkable={checkable}
+          showLine={true}
+          showIcon={false}
+          onExpand={onExpand}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          treeData={loop(treeData)}
+          loadData={onLoadData}
+          selectedKeys={[currentDirId||'']} 
+          onSelect={onTreeSelect} 
+          onCheck={onTreeCheck}
+          checkedKeys={checkedKeys}
+          checkStrictly
+          onRightClick={({event, node}) => {
+            if (reference === AssetManageReference) {
+              setCurrentRightClickDir(node);
+              setCurrentDirType(node.type||'');
+              displayMenu(event);
+            }
+          }}
+          />
+      </Spin>
+
+      <UpdateDirectoryModal 
+        visible={ updateDirectoryModalVisible }
+        onCancel={ onUpdateDirectoryCancel }
+        action={ updateDirectoryAction }
+        dirId={ (updateDirectoryAction==='add')?currentDirId:currentRightClickDir.nodeId }
+      />
+      <ImportDirectory 
+        visible={ importDirectoryVisible }
+        onCancel={ onImportDirectoryCancel }
+        dirId={ currentDirId }
+      />
+      <CustomDirectoryModal 
+        visible={ customDirectoryModalVisible }
+        onCancel={ onCustomDirectoryCancel }
+        action={ customDirectoryAction }
+        dirId= { currentDirId }
+      />
+      {
+        (reference!==AssetMountReference) && <RcMenu id={MENU_ID}>
+          {
+            currentRightClickDir && (currentRightClickDir.type!=='custom') && <RcItem id="edit" onClick={editDir}>
+              修改目录
+            </RcItem>
+          } 
+          <RcItem id="up" onClick={() => { moveNode(1); }}>
+            上移目录
+          </RcItem> 
+          <RcItem id="down" onClick={() => { moveNode(-1); }}>
+            下移目录
+          </RcItem>
+          {
+            currentRightClickDir && (currentRightClickDir.type!=='custom'||(currentRightClickDir.type==='custom'&&currentRightClickDir.isRoot)) && <RcItem id="delete" onClick={deleteDir}>
+              删除目录
+            </RcItem>
+          } 
+        </RcMenu> 
+      } 
+      {contextHolder}
+    </Card>
+  )
+}
+
+export default AssetManageTree;
\ No newline at end of file

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

@@ -8,6 +8,7 @@ const resourceTypes = [
   { key: 'innerSource', name: '内部资源' },
   { key: 'outerSource', name: '外部资源' },
   { key: 'dataAsset', name: '资产' },
+  { key: 'custom', name: '自定义' },
 ]
 
 const UpdateDirectoryModal = (props) => {
@@ -169,18 +170,18 @@ const UpdateDirectoryModal = (props) => {
             rules={[{ required: true, message: '必填项' }]}
           >
             <Radio.Group>
-              <Radio value='theme'>主题</Radio>
+              <Radio value='theme'>栏目</Radio>
               <Radio value='directory' disabled={ dirId===null }>目录</Radio>
             </Radio.Group>
           </Form.Item>
         }
         {
-          ((action==='add'&&isThemeAdd) || (action!=='add'&&dir?.resourceType)) && <Form.Item 
+          ((action==='add'&&isThemeAdd) || action!=='add') && <Form.Item 
             label="资产类型"
             name="resourceType"
-            rules={[{ required: true, message: '必填项' }]}
+            rules={[{ required: false }]}
           >
-            <Select>
+            <Select allowClear>
             {
               resourceTypes.map((item,index) => {
                 return <Select.Option key={item.key}>{item.name}</Select.Option>

src/view/Manage/AssetManage/index.jsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Form } from 'antd';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
-import AssetTree from './Component/AssetTree';
+import AssetTree from './Component/AssetManageTree';
 import AssetDirectory from './Component/AssetDirectory';
 import AssetTable from './Component/AssetTable';
 import AssetAction from './Component/AssetAction';

src/view/Manage/AssetRecycle/Component/AssetMount.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Modal } from "antd";
 
 import { dispatch } from '../../../../model';
-import AssetTree from '../../AssetManage/Component/AssetTree';
+import AssetTree from '../../AssetManage/Component/AssetManageTree';
 import { showMessage } from '../../../../util';
 
 import { AssetManageReference, AssetRecycleReference, AssetMountReference } from "../../../../util/constant";