资产管理页面调整

src/view/Manage/AssetBrowse/index.jsx

 import React, { useState } from 'react';
+import classNames from 'classnames';
+import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+
 import AssetTable from "../AssetManage/Component/AssetTable";
 import AssetTree from '../AssetManage/Component/AssetTree';
 
@@ -7,16 +10,30 @@ import '../AssetManage/index.less';
 const AssetBrowse = (props) => {
 
   const [ nodeId, setNodeId ] = useState(''); 
+  const [ expandTree, setExpandTree ] = useState(true);
 
   const onTreeSelect = (value) => {
     setNodeId(value||'');
   }
 
+  const treeToggleClick = () => {
+    setExpandTree(!expandTree);
+  }
+
+  const classes = classNames('asset-manage', {
+    'asset-manage-collapse': !expandTree
+  });  
+
   return (
-    <div className='asset-manage'>
+    <div className={classes}>
       <div className='left'>
         <AssetTree onSelect={onTreeSelect} readOnly {...props} />
       </div>
+      <div className='tree-toggle-wrap'>
+        <div className='tree-toggle' onClick={treeToggleClick}>
+        { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+        </div>
+      </div>
       <div className='right'>
         <AssetTable nodeId={nodeId} readOnly {...props} />
       </div>

src/view/Manage/AssetManage/index.jsx

 import React, { useState } from 'react';
+import classNames from 'classnames';
+import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
 import AssetTable from './Component/AssetTable';
 import AssetTree from './Component/AssetTree';
@@ -8,16 +10,30 @@ import './index.less';
 const AssetManage = (props) => {
 
   const [ nodeId, setNodeId ] = useState(''); 
+  const [ expandTree, setExpandTree ] = useState(true);
 
   const onTreeSelect = (value) => {
     setNodeId(value||'');
   }
 
+  const treeToggleClick = () => {
+    setExpandTree(!expandTree);
+  }
+
+  const classes = classNames('asset-manage', {
+    'asset-manage-collapse': !expandTree
+  });  
+
   return (
-    <div className='asset-manage'>
+    <div className={classes}>
       <div className='left'>
         <AssetTree onSelect={onTreeSelect} {...props} />
       </div>
+      <div className='tree-toggle-wrap'>
+        <div className='tree-toggle' onClick={treeToggleClick}>
+        { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+        </div>
+      </div>
       <div className='right'>
         <AssetTable nodeId={nodeId} {...props} />
       </div>

src/view/Manage/AssetManage/index.less

 .asset-manage {
   display: flex;
-  background-color: #F0F2F5;
+  background-color: #fff;
+  height: 100%;
 
   .left {
     width: 230px;
-    background-color: #fff;
-    margin-right: 10px; 
+    border-right: 1px solid #EFEFEF;
+    overflow: hidden;
+  }
+
+  .tree-toggle-wrap {
+    position: relative;
+    width: 20px;
+    height: calc(100vh - 94px);
+  
+    .tree-toggle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 0;
+      right: 0;
+      background: #f2f5fc;
+      position: absolute;
+      top: calc(50% - 40px);
+      width: 12px;
+      height: 80px;
+      border-radius: 0 12px 12px 0;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
   }
 
   .right {
-    width:calc(100% - 240px);
-    background-color: #fff;
+    width: calc(100% - 250px);
+  }
+}
+
+.asset-manage-collapse {
+  .left {
+    width: 0;
+  }
+
+  .right {
+    width: calc(100% - 20px);
   }
 }
\ No newline at end of file