资源管理目录

package.json

@@ -24,6 +24,7 @@
     "crypto-js": "^4.0.0",
     "echarts": "^5.3.1",
     "eslint-config-react-app": "^7.0.1",
+    "immer": "9.0.15",
     "immutability-helper": "^3.1.1",
     "insert-css": "^2.0.0",
     "less": "^4.1.1",

src/routes.js

@@ -24,6 +24,10 @@ export const routes = [
         text: '模型配置',
       },
       {
+        name: 'asset-resource-manage',
+        text: '资源管理',
+      },
+      {
         name: 'asset-manage',
         text: '资产管理',
       },

src/util/Component/Tree.jsx

+import React from "react"
+import { Tree } from "antd"
+import { Menu, Item, useContextMenu } from 'react-contexify'
+import { generateUUID } from ".."
+
+import 'react-contexify/dist/ReactContexify.css';
+
+const FC = ({ shouldRowContextMenu, menuData, onMenuItemClick, ...restProps }) => {
+  const MENU_ID = generateUUID()
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  })
+
+  const [rightClickNode, setRightClickNode] = React.useState(undefined)
+
+  const handleContextMenu = (event, node) => {
+    show(event, {
+      position: {
+        x: event.clientX + 30,
+        y: event.clientY - 10
+      }
+    })
+  }
+
+  return (
+    <div>
+      <Tree
+        onRightClick={({event, node}) => {
+          setRightClickNode(node)
+          if (shouldRowContextMenu?.(node)) {
+            handleContextMenu(event, node)
+          } 
+        }}
+        {...restProps}
+      />
+       <Menu id={MENU_ID}>
+       {
+         menuData?.map(item => <Item key={item.id} id={item.id} onClick={() => onMenuItemClick?.(item.id, rightClickNode)}>{item.title}</Item>)
+       }
+      </Menu>
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/AssetResourceManage/index.jsx

+import React from "react"
+import classNames from 'classnames'
+import { ResizableBox } from 'react-resizable'
+
+import Tree from './tree'
+import Separate from '../AssetManage/Component/Separate'
+
+import '../AssetManage/index.less'
+const FC = (props) => {
+  const [collapseTree, setCollapseTree] = React.useState(false)
+
+  const rootClasses = classNames('asset-manage', {
+    'asset-manage-collapse': collapseTree
+  })
+
+  return (
+    <div className={rootClasses}>
+      <ResizableBox 
+        className='left' 
+        width={230} 
+        height={Infinity}
+        axis='x'
+        minConstraints={[230, Infinity]} 
+        maxConstraints={[Infinity, Infinity]}          
+      >
+        <Tree />
+      </ResizableBox>
+      {
+        !collapseTree && <Separate width={15} />
+      }
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/AssetResourceManage/tree.less

+@import '../../../variables.less';
+
+.resource-manage-tree {
+  height: 100%;
+
+  .header {
+    display: flex;
+    flex: none;
+    width: 100%;
+    height: 57px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #EFEFEF;
+  }
+
+  .tree {
+    height: calc(100vh - @header-height - @breadcrumb-height - 25px - 57px - 62px);
+    overflow: auto;
+  }
+}
\ No newline at end of file

src/view/Manage/index.jsx

@@ -8,6 +8,7 @@ import { ManageLayout } from "../../layout";
 import DatasourceManage from './DatasourceManage';
 import Model from './Model';
 import ModelConfig from './ModelConfig';
+import AssetResourceManage from './AssetResourceManage';
 import AssetManage from './AssetManage';
 import AssetResourceBrowse from './AssetResourceBrowse';
 import AssetBrowse from './AssetBrowse';
@@ -32,6 +33,7 @@ class Manage extends Component {
                 <Route path={`${match.path}/datasource-manage`} component={DatasourceManage} />
                 <Route path={`${match.path}/data-model`} component={Model} />
                 <Route path={`${match.path}/model-config`} component={ModelConfig} />
+                <Route path={`${match.path}/asset-resource-manage`} component={AssetResourceManage} />
                 <Route path={`${match.path}/asset-manage`} component={AssetManage} />
                 <Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} />
                 <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />