在图表编辑器界面增加收起和恢复功能

src/components/chartDesigner/content.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Tabs, Switch, Button } from 'antd'
+import { Layout, Tabs, Switch, Button, Icon } from 'antd'
 import BaseConfigForm from './sections/baseConfigForm'
 import AggregateTableConfigForm from './sections/aggregateTableConfigForm'
 import DataViewConfigForm from './sections/dataViewConfigForm'
@@ -22,9 +22,15 @@ class ChartDesignerContent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            autoRefresh: true
+            autoRefresh: true,
+            collapsed: false
         }
     }
+    onCollapse = () => {
+        this.setState({
+            collapsed: !this.state.collapsed,
+        })
+    }
 
     render() {
         const { chartDesigner, dispatch } = this.props;
@@ -61,7 +67,16 @@ class ChartDesignerContent extends React.Component {
         console.log(autoRefresh);
         return (
             <Layout className='chartdesigner'>
-                <Sider className='sider-left' width={300}>
+                <Sider 
+                    className={`sider-left${this.state.collapsed ? ' sider-left-collapsed' : ''}`}>
+                    <Icon type= {`${this.state.collapsed?'right':'left'}`}
+                        style={{
+                            position: 'absolute',
+                            right: this.state.collapsed?'-20px':'10px',
+                            top: '10px',
+                            zIndex: 100
+                        }} 
+                        onClick={this.onCollapse}/>
                     <Tabs className='sider-tabs'>
                         <TabPane className='chartconfig' tab='图表设置' key='1'>
                             <BaseConfigForm formItemLayout={formItemLayout}/>

src/components/chartDesigner/content.less

@@ -1,5 +1,9 @@
 .chartdesigner {
     .sider-left {
+        flex: 0 0 300px !important;
+        max-width: 300px !important;
+        min-width: 300px !important;
+        width: 300px !important;
         .sider-tabs {
             .ant-tabs-nav .ant-tabs-tab {
                 height: 37px;
@@ -37,4 +41,14 @@
             display: none;
         }
     }
+    .ant-tabs-tab-prev { //收缩时再展开会产生该按钮，使用样式去除
+        display: none
+    }
+    .ant-tabs-tab-next {  //同上
+        display: none
+    }
+    .ant-tabs-nav-container-scrolling { //同上
+        padding-left: 0px;
+        padding-right: 0px
+    }
 }