A 常规发布配置支持全屏编写命令

spug_web/src/pages/deploy/app/Ext1Setup3.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Form, Row, Col, Button, Radio, Icon, message } from "antd";
+import { LinkButton } from 'components';
 import Editor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-text';
 import 'ace-builds/src-noconflict/mode-sh';
@@ -19,7 +20,8 @@ class Ext1Setup3 extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      loading: false
+      loading: false,
+      full: ''
     }
   }
 
@@ -38,52 +40,78 @@ class Ext1Setup3 extends React.Component {
   };
 
   FilterLabel = (props) => (
-    <div style={{display: 'inline-block', height: 39}}>
-      <span>文件过滤<span style={{margin: '0 8px 0 2px'}}>:</span></span>
+    <div style={{display: 'inline-block', height: 39, width: 344}}>
+      <span style={{float: 'left'}}>文件过滤<span style={{margin: '0 8px 0 2px'}}>:</span></span>
       <Radio.Group
-        style={{marginLeft: 20}}
+        style={{marginLeft: 20, float: 'left'}}
         value={props.type}
         onChange={e => store.deploy['filter_rule']['type'] = e.target.value}>
         <Radio value="contain">包含</Radio>
         <Radio value="exclude">排除</Radio>
       </Radio.Group>
+      {this.state.full === '1' ? (
+        <LinkButton onClick={() => this.setState({full: ''})}>退出全屏</LinkButton>
+      ) : (
+        <LinkButton onClick={() => this.setState({full: '1'})}>全屏</LinkButton>
+      )}
+    </div>
+  );
+
+  NormalLabel = (props) => (
+    <div style={{display: 'inline-block', height: 39, width: 344}}>
+      <span style={{float: 'left'}}>{props.title}<span style={{margin: '0 8px 0 2px'}}>:</span></span>
+      {this.state.full ? (
+        <LinkButton onClick={() => this.setState({full: ''})}>退出全屏</LinkButton>
+      ) : (
+        <LinkButton type="link" onClick={() => this.setState({full: props.id})}>全屏</LinkButton>
+      )}
     </div>
   );
 
   render() {
     const info = store.deploy;
+    const {full} = this.state;
     return (
       <React.Fragment>
         <Row>
           <Col span={11}>
-            <Form.Item colon={false} label={<this.FilterLabel type={info['filter_rule']['type']}/>}>
+            <Form.Item
+              colon={false}
+              className={full === '1' ? styles.fullScreen : null}
+              label={<this.FilterLabel type={info['filter_rule']['type']}/>}>
               <Editor
                 mode="text"
                 theme="tomorrow"
                 width="100%"
-                height="100px"
+                height={full === '1' ? '100vh' : '100px'}
                 placeholder="每行一条规则"
                 value={info['filter_rule']['data']}
                 onChange={v => info['filter_rule']['data'] = v}
                 style={{border: '1px solid #e8e8e8'}}/>
             </Form.Item>
-            <Form.Item label="代码迁出前执行">
+            <Form.Item
+              colon={false}
+              className={full === '3' ? styles.fullScreen : null}
+              label={<this.NormalLabel title="代码迁出前执行" id="3"/>}>
               <Editor
                 mode="sh"
                 theme="tomorrow"
                 width="100%"
-                height="100px"
+                height={full === '3' ? '100vh' : '100px'}
                 placeholder="输入要执行的命令"
                 value={info['hook_pre_server']}
                 onChange={v => info['hook_pre_server'] = v}
                 style={{border: '1px solid #e8e8e8'}}/>
             </Form.Item>
-            <Form.Item label="应用发布前执行">
+            <Form.Item
+              colon={false}
+              className={full === '5' ? styles.fullScreen : null}
+              label={<this.NormalLabel title="应用发布前执行" id="5"/>}>
               <Editor
                 mode="sh"
                 theme="tomorrow"
                 width="100%"
-                height="100px"
+                height={full === '5' ? '100vh' : '100px'}
                 placeholder="输入要执行的命令"
                 value={info['hook_pre_host']}
                 onChange={v => info['hook_pre_host'] = v}
@@ -105,34 +133,43 @@ class Ext1Setup3 extends React.Component {
             </div>
           </Col>
           <Col span={11}>
-            <Form.Item label="自定义全局变量">
+            <Form.Item
+              colon={false}
+              className={full === '2' ? styles.fullScreen : null}
+              label={<this.NormalLabel title="自定义全局变量" id="2"/>}>
               <Editor
                 mode="text"
                 theme="tomorrow"
                 width="100%"
-                height="100px"
+                height={full === '2' ? '100vh' : '100px'}
                 placeholder="每行一个，例如：HOME=/data/spug"
                 value={info['custom_envs']}
                 onChange={v => info['custom_envs'] = v}
                 style={{border: '1px solid #e8e8e8'}}/>
             </Form.Item>
-            <Form.Item label="代码迁出后执行">
+            <Form.Item
+              colon={false}
+              className={full === '4' ? styles.fullScreen : null}
+              label={<this.NormalLabel title="代码迁出后执行" id="4"/>}>
               <Editor
                 mode="sh"
                 theme="tomorrow"
                 width="100%"
-                height="100px"
+                height={full === '4' ? '100vh' : '100px'}
                 placeholder="输入要执行的命令"
                 value={info['hook_post_server']}
                 onChange={v => info['hook_post_server'] = v}
                 style={{border: '1px solid #e8e8e8'}}/>
             </Form.Item>
-            <Form.Item label="应用发布后执行">
+            <Form.Item
+              colon={false}
+              className={full === '6' ? styles.fullScreen : null}
+              label={<this.NormalLabel title="应用发布后执行" id="6"/>}>
               <Editor
                 mode="sh"
                 theme="tomorrow"
                 width="100%"
-                height="100px"
+                height={full === '6' ? '100vh' : '100px'}
                 placeholder="输入要执行的命令"
                 value={info['hook_post_host']}
                 onChange={v => info['hook_post_host'] = v}

spug_web/src/pages/deploy/app/index.module.css

@@ -57,4 +57,14 @@
 .delAction:hover {
     border-color: rgb(255, 96, 59);
     color: rgb(255, 96, 59);
+}
+
+.fullScreen {
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
 }