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

pull/161/head
vapao 2020-07-30 18:36:49 +08:00
parent c88074959a
commit 7eafdf1f61
5 changed files with 30 additions and 6 deletions

View File

@ -15,7 +15,6 @@ export default function (props) {
<Editor
wrapEnabled
theme="tomorrow"
enableLiveAutocompletion={true}
enableBasicAutocompletion={true}
enableSnippets={true}
{...props}

View File

@ -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}

View File

@ -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>

View File

@ -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;
}

View File

@ -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;