资产可收起关系图

src/view/Manage/AssetBrowse/Component/Relation.jsx

@@ -17,7 +17,7 @@ const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '#
 class Relation extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
-    const { data, expandTree, expandId, onCenterClick, onExpandClick } = this.props;
+    const { data, resize, expandId, onCenterClick, onExpandClick } = this.props;
 
     if (data) {
       if (data !== prevProps.data) {
@@ -32,7 +32,7 @@ class Relation extends React.Component {
       } 
     }
 
-    if (expandTree !== prevProps.expandTree && prevProps.expandTree!==null) {
+    if (resize !== prevProps.resize && prevProps.resize!==null) {
       if (!this.elem || !this.elem.clientWidth || !this.elem.clientHeight) return;
 
       this.graph?.changeSize(this.elem.clientWidth, this.elem.clientHeight);

src/view/Manage/AssetBrowse/Component/RelationContainer.jsx

@@ -6,7 +6,7 @@ import { AssetBrowseReference, ResourceBrowseReference } from '../../../../util/
 
 const RelationContainer = (props) => {
 
-  const { nodeParams, onChange, reference,  expandTree } = props;
+  const { nodeParams, onChange, reference,  resize } = props;
 
   const [ dirs, setDirs ] = useState([]);
   const [ nodes, setNodes ] = useState([]);
@@ -192,7 +192,7 @@ const RelationContainer = (props) => {
 
   return (
     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-      <Relation data={relationData} expandId={nodeParams?.expandId} expandTree={expandTree} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
+      <Relation data={relationData} expandId={nodeParams?.expandId} resize={resize} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
       <div className='title-text' style={{ position: 'absolute', left: 15, top: 24, fontWeight: 'bold' }} >关系图</div>
     </div>
   );

src/view/Manage/AssetBrowse/index.jsx

@@ -18,7 +18,9 @@ const AssetBrowse = (props) => {
 
   const [ nodeParams, setNodeParams ] = useState({ centerId: '', expandId: '' });
   const [ expandTree, setExpandTree ] = useState(true);
+  const [ expandRelation, setExpandRelation ] = useState(true);
   const [ assetCount, setAssetCount ] = useState(0);
+  const [ resizeRelation, setResizeRelation ] = useState(false);
 
   const { centerId, expandId } = nodeParams;
 
@@ -28,6 +30,12 @@ const AssetBrowse = (props) => {
 
   const treeToggleClick = () => {
     setExpandTree(!expandTree);
+    setResizeRelation(!resizeRelation);
+  }
+
+  const relationToggleClick = () => {
+    setExpandRelation(!expandRelation);
+    setResizeRelation(!resizeRelation);
   }
 
   const onRelationChange = (data) => {
@@ -46,7 +54,8 @@ const AssetBrowse = (props) => {
   }
 
   const classes = classNames('asset-browse', {
-    'asset-browse-collapse': !expandTree
+    'asset-browse-tree-collapse': !expandTree,
+    'asset-browse-relation-collapse': !expandRelation,
   });  
 
   return (
@@ -61,10 +70,14 @@ const AssetBrowse = (props) => {
         <AssetDirectory id={nodeId} assetCount={assetCount} reference={reference} />
         <Separate height={15} />
         <div className='flex' style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
-          <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
-            <RelationContainer reference={reference} nodeParams={nodeParams} onChange={onRelationChange} expandTree={expandTree} />
-          </div>
-          <Separate width={15} />
+          {
+            expandRelation && <React.Fragment>
+              <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
+                <RelationContainer reference={reference} nodeParams={nodeParams} onChange={onRelationChange} resize={resizeRelation} />
+              </div>
+              <Separate width={15} />
+            </React.Fragment>
+          }
           <div style={{ flex: 1, overflow: 'hidden' }}>
             <AssetTable nodeId={nodeId} reference={reference} onCountChange={onAssetCountChange} {...props} />
           </div>          
@@ -72,7 +85,10 @@ const AssetBrowse = (props) => {
       </div>
       <div className='tree-toggle' onClick={treeToggleClick}>
         { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
-        </div>
+      </div>
+      <div className='relation-toggle' onClick={relationToggleClick}>
+        { expandRelation ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+      </div>
     </div>
   )
 }

src/view/Manage/AssetBrowse/index.less

@@ -14,10 +14,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    left: 245px;
+    left: 0;
     right: 0;
     background: #f2f5fc;
     position: absolute;
+    left: 245px;
     top: calc(50% - 40px);
     width: 12px;
     height: 80px;
@@ -32,9 +33,31 @@
     width: calc(100% - 245px);
     flex-direction: column;
   }
+
+  .relation-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f2f5fc;
+    position: absolute;
+    left: calc(50% + 130px);
+    top: calc(50% - 40px);
+    width: 12px;
+    height: 80px;
+    border-radius: 0 12px 12px 0;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  &.asset-browse-relation-collapse {
+    .relation-toggle {
+      left: 245px;
+    }
+  }
 }
 
-.asset-browse-collapse {
+.asset-browse-tree-collapse {
   .left {
     width: 0;
   }
@@ -46,4 +69,14 @@
   .right {
     width: 100%;
   }
-}
\ No newline at end of file
+
+  .relation-toggle {
+    left: calc(50% + 7.5px);
+  }
+
+  &.asset-browse-relation-collapse {
+    .relation-toggle {
+      left: 0;
+    }
+  }
+}