A 批量执行控制台新增全屏功能

openspug · Jul 30, 2020 · 7eafdf1 · 7eafdf1
1 parent c880749
commit 7eafdf1
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/spug_web/src/components/ACEditor.js b/spug_web/src/components/ACEditor.js
@@ -15,7 +15,6 @@ export default function (props) {
     <Editor
       wrapEnabled
       theme="tomorrow"
-      enableLiveAutocompletion={true}
       enableBasicAutocompletion={true}
       enableSnippets={true}
       {...props}

diff --git a/spug_web/src/pages/exec/task/ExecConsole.js b/spug_web/src/pages/exec/task/ExecConsole.js
@@ -46,7 +46,8 @@ class ExecConsole extends React.Component {
   }
 
   componentWillUnmount() {
-    this.socket.close()
+    this.socket.close();
+    store.isFullscreen = false;
   }
 
   genExtra = (outputs) => {
@@ -72,8 +73,13 @@ class ExecConsole extends React.Component {
     return (
       <Modal
         visible
-        width={1000}
-        title="执行控制台"
+        width={store.isFullscreen ? '100%' : 1000}
+        title={[
+          <span key="1">执行控制台</span>,
+          <div key="2" className={styles.fullscreen} onClick={() => store.isFullscreen = !store.isFullscreen}>
+            <Icon type={store.isFullscreen ? 'fullscreen-exit' : 'fullscreen'}/>
+          </div>
+        ]}
         footer={null}
         onCancel={this.props.onCancel}
         onOk={this.handleSubmit}

diff --git a/spug_web/src/pages/exec/task/OutView.js b/spug_web/src/pages/exec/task/OutView.js
@@ -7,6 +7,7 @@ import React from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import styles from './index.module.css';
+import store from './store';
 
 @observer
 class OutView extends React.Component {
@@ -23,8 +24,9 @@ class OutView extends React.Component {
 
   render() {
     const outputs = toJS(this.props.outputs);
+    const maxHeight = store.isFullscreen ? 500 : 300;
     return (
-      <div ref={ref => this.el = ref} className={styles.console}>
+      <div ref={ref => this.el = ref} className={styles.console} style={{maxHeight}}>
         <pre style={{color: '#91d5ff'}}>{outputs['system']}</pre>
         <pre>{outputs['info']}</pre>
         <pre style={{color: '#ffa39e'}}>{outputs['error']}</pre>

diff --git a/spug_web/src/pages/exec/task/index.module.css b/spug_web/src/pages/exec/task/index.module.css
@@ -2,8 +2,24 @@
     padding: 0;
 }
 
+.fullscreen {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    width: 56px;
+    height: 56px;
+    line-height: 56px;
+    text-align: center;
+    cursor: pointer;
+    color: rgba(0, 0, 0, .45);
+    margin-right: 56px;
+}
+.fullscreen:hover {
+    color: #000;
+}
+
 .console {
-    max-height: 300px;
     padding: 10px 15px;
     overflow: scroll;
 }

diff --git a/spug_web/src/pages/exec/task/store.js b/spug_web/src/pages/exec/task/store.js
@@ -9,6 +9,7 @@ class Store {
   @observable outputs = {};
   @observable hosts = [];
   @observable token = null;
+  @observable isFullscreen = false;
   @observable showHost = false;
   @observable showConsole = false;
   @observable showTemplate = false;