mirror of https://github.com/openspug/spug
A 批量执行控制台新增全屏功能
parent
c88074959a
commit
7eafdf1f61
|
@ -15,7 +15,6 @@ export default function (props) {
|
|||
<Editor
|
||||
wrapEnabled
|
||||
theme="tomorrow"
|
||||
enableLiveAutocompletion={true}
|
||||
enableBasicAutocompletion={true}
|
||||
enableSnippets={true}
|
||||
{...props}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue