左侧tab

public/react/src/modules/developer/newOrEditTask/index.js

@@ -3,7 +3,7 @@
  * @Author: tangjiang 
  * @Date: 2019-11-15 16:38:34 
  * @Last Modified by: tangjiang
- * @Last Modified time: 2019-11-18 23:21:25
+ * @Last Modified time: 2019-11-19 09:10:45
  */
 import './index.scss';
 import React, { Component } from 'react';
@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 import SplitPane from 'react-split-pane';// import { Form } from 'antd';
 import { Button, Icon } from 'antd';
 import { Link } from 'react-router-dom';
+import LeftPane from './leftpane';
 import RightPane from './rightpane';
 class NewOrEditTask extends Component {
 
@@ -26,7 +27,9 @@ class NewOrEditTask extends Component {
         </div>
         <div className="split-pane-area">
           <SplitPane split="vertical" minSize={200} maxSize={-200} defaultSize="50%">
-            <div >You can use a div component</div>
+            <div>
+              <LeftPane />
+            </div>
             <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
               <RightPane />
               <div />

public/react/src/modules/developer/newOrEditTask/leftpane/commitTab/index.js

@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import connect from 'react-redux';
+
+class CommitTab extends PureComponent {
+
+  render () {
+    return (
+      <h2>提交页</h2>
+    )
+  }
+}
+
+// export default connect()(CommitTab);
+export default CommitTab;

public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+import connect from 'react-redux';
+
+class EditTab extends PureComponent {
+
+  componentDidMount () {}
+  render () {
+    return (
+      <h2>编辑页</h2>
+    )
+  }
+}
+
+// export default connect()(EditTab);
+export default EditTab;

public/react/src/modules/developer/newOrEditTask/leftpane/index.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import EditorTab from './editorTab';
+import PrevTab from './prevTab';
+import CommitTab from './commitTab';
+
+const { TabPane } = Tabs;
+
+const LeftPane = () => {
+
+  const [defaultActiveKey, setDefaultActiveKey] = useState('2');
+
+  const tabArrs = [
+    { title: '编辑', key: '1', content: EditorTab },
+    { title: '预览',  key: '2', content: PrevTab },
+    { title: '提交记录',  key: '3', content: CommitTab },
+  ];
+
+  const tabs = tabArrs.map((tab) => {
+    const Comp = tab.content;
+    return (
+      <TabPane tab={tab.title} key={tab.key}>
+        <Comp />
+      </TabPane>
+    )
+  });
+
+  // tab切换时
+  const handleTabChange = (key) => {
+    setDefaultActiveKey(key);
+  }
+
+  return (
+    <Tabs activeKey={defaultActiveKey} onChange={handleTabChange}>
+      { tabs }
+    </Tabs>
+  )
+}
+
+export default LeftPane;

public/react/src/modules/developer/newOrEditTask/leftpane/prevTab/index.js

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+// import connect from 'react-redux';
+
+class PrevTab extends PureComponent {
+
+  state = {}
+  render () {
+    return (
+      <h2>预览页</h2>
+    )
+  }
+}
+
+// export default connect()(PrevTab);
+export default PrevTab;

public/react/src/modules/developer/newOrEditTask/rightpane/RightPaneCode.js

@@ -3,7 +3,7 @@
  * @Author: tangjiang 
  * @Date: 2019-11-18 08:42:04 
  * @Last Modified by: tangjiang
- * @Last Modified time: 2019-11-19 08:39:28
+ * @Last Modified time: 2019-11-19 08:55:08
  */
 
 import './index.scss';
@@ -66,10 +66,7 @@ const RightPaneCode = () => {
   const editorOptions = {
     selectOnLineNumbers: true,
     automaticLayout: true,
-    fontSize: '16px',
-    revealHorizontalRightPadding: 0,
-    scrollBeyondLastLine: false,
-    smoothScrolling: true
+    fontSize: '16px'
   }
   return (
     <Fragment>