模型目录拖动

src/view/Manage/Model/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, Space, Spin, Input, Select, Tooltip } from 'antd';
 import copy from "copy-to-clipboard";  
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ResizableBox } from 'react-resizable';
 import classNames from 'classnames';
 
 import ModelTree from './Component/ModelTree';
@@ -452,9 +453,15 @@ class Model extends React.Component {
       <AppContext.Consumer>
       {
         value => <div className={classes}>
-        <div className='left'>
+        <ResizableBox 
+          className='left' 
+          width={230} 
+          height={Infinity}
+          axis='x'
+          minConstraints={[230, Infinity]} maxConstraints={[500, Infinity]}          
+        >
           <ModelTree onViewChange={this.onViewChange} onSelect={this.onTreeSelect} importStockModel={this.importStockModel} keyword={keyword} {...this.props} />
-        </div> 
+        </ResizableBox>
         <div className='tree-toggle-wrap'>
           <div className='tree-toggle' onClick={this.treeToggleClick}>
           { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }

src/view/Manage/Model/index.less

 .data-model {
   display: flex;
   background-color: #fff;
+  width: 100%;
   height: 100%;
 
   .left {
-    width: 230px;
+    flex: 0 0 auto;
     border-right: 1px solid #EFEFEF;
     overflow: hidden;
   }
@@ -12,7 +13,7 @@
   .tree-toggle-wrap {
     position: relative;
     width: 20px;
-    height: '100%';
+    height: 100%;
   
     .tree-toggle {
       display: flex;
@@ -33,16 +34,13 @@
   }
 
   .right {
-    width: calc(100% - 250px);
+    flex: 1;
+    overflow: hidden;
   }
 }
 
 .data-model-collapse {
   .left {
-    width: 0;
-  }
-
-  .right {
-    width: calc(100% - 20px);
+    width: 0 !important;
   }
 }
\ No newline at end of file