资产目录拉伸

src/view/Manage/AssetBrowse/index.jsx

 import React, { useState } from 'react';
 import classNames from 'classnames';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ResizableBox } from 'react-resizable';
 
 import AssetTree from '../AssetManage/Component/AssetTree';
 import AssetDirectory from '../AssetManage/Component/AssetDirectory';
@@ -60,9 +61,15 @@ const AssetBrowse = (props) => {
 
   return (
     <div className={classes}>
-      <div className='left'>
+      <ResizableBox 
+          className='left' 
+          width={230} 
+          height={Infinity}
+          axis='x'
+          minConstraints={[230, Infinity]} maxConstraints={[500, Infinity]}          
+        >
         <AssetTree centerId={centerId} onSelect={onTreeSelect} reference={reference} {...props} />
-      </div>
+      </ResizableBox>
       {
         expandTree && <Separate width={15} />
       }
@@ -82,7 +89,6 @@ const AssetBrowse = (props) => {
             <AssetTable nodeId={nodeId} nodeType={nodeParams.nodeType} reference={reference} onCountChange={onAssetCountChange} {...props} />
           </div>          
         </div>
-      </div>
         <div className='tree-toggle' onClick={treeToggleClick}>
         { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>
@@ -90,6 +96,7 @@ const AssetBrowse = (props) => {
           { expandRelation ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>
       </div>
+    </div>
   )
 }
 

src/view/Manage/AssetBrowse/index.less

@@ -5,7 +5,7 @@
   height: 100%;
 
   .left {
-    width: 230px;
+    flex: 0 0 auto;
     border-right: 1px solid #EFEFEF;
     overflow: hidden;
   }
@@ -18,7 +18,7 @@
     right: 0;
     background: #f2f5fc;
     position: absolute;
-    left: 245px;
+    left: 0px;
     top: calc(50% - 40px);
     width: 12px;
     height: 80px;
@@ -29,8 +29,10 @@
   }
 
   .right {
+    position: relative;
     display: flex;
-    width: calc(100% - 245px);
+    flex: 1;
+    overflow: hidden;
     flex-direction: column;
   }
 
@@ -40,7 +42,7 @@
     align-items: center;
     background: #f2f5fc;
     position: absolute;
-    left: calc(50% + 130px);
+    left: calc(50% + 7.5px);
     top: calc(50% - 40px);
     width: 12px;
     height: 80px;
@@ -52,24 +54,20 @@
 
   &.asset-browse-relation-collapse {
     .relation-toggle {
-      left: 245px;
+      left: 0px;
     }
   }
 }
 
 .asset-browse-tree-collapse {
   .left {
-    width: 0;
+    width: 0 !important;
   }
 
   .tree-toggle {
     left: 0;
   }
 
-  .right {
-    width: 100%;
-  }
-
   .relation-toggle {
     left: calc(50% + 7.5px);
   }

src/view/Manage/AssetManage/index.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Form } from 'antd';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ResizableBox } from 'react-resizable';
 
 import AssetTree from './Component/AssetManageTree';
 import AssetDirectory from './Component/AssetDirectory';
@@ -66,9 +67,15 @@ const AssetManage = (props) => {
 
   return (
     <div className={classes}>
-      <div className='left'>
+      <ResizableBox 
+          className='left' 
+          width={230} 
+          height={Infinity}
+          axis='x'
+          minConstraints={[230, Infinity]} maxConstraints={[500, Infinity]}          
+        >
         <AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} />
-      </div>
+      </ResizableBox>
       {
         expandTree && <Separate width={15} />
       }
@@ -76,14 +83,14 @@ const AssetManage = (props) => {
         <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
         <Separate height={15} />
         <AssetTable nodeId={nodeId} nodeType={nodeType} nodeLevel={nodeLevel} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
+        <div className='tree-toggle' onClick={treeToggleClick}>
+        { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+        </div>
       </div>
       <Separate width='15px' />
       <div className='right'>
         <AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
       </div>
-      <div className='tree-toggle' onClick={treeToggleClick}>
-      { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
-      </div>
     </div>
   )
 }

src/view/Manage/AssetManage/index.less

@@ -5,7 +5,7 @@
   height: 100%;
 
   .left {
-    width: 230px;
+    flex: 0 0 auto;
     border-right: 1px solid #EFEFEF;
     overflow: hidden;
   }
@@ -14,7 +14,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    left: 245px;
+    left: 0px;
     right: 0;
     background: #f2f5fc;
     position: absolute;
@@ -28,7 +28,9 @@
   }
 
   .middle {
-    width: calc(100% - 230px - 400px - 30px);
+    position: relative;
+    flex: 1;
+    overflow: hidden;
   }
 
   .right {
@@ -39,14 +41,10 @@
 
 .asset-manage-collapse {
   .left {
-    width: 0;
+    width: 0 !important;
   }
 
   .tree-toggle {
     left: 0;
   }
-
-  .middle {
-    width: calc(100% - 400px - 30px);
-  }
 }
\ No newline at end of file