From 9d9541c1b932320dbdb0f936bce6c71efc7078b6 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Sun, 8 Mar 2020 12:39:07 +0800
Subject: [PATCH] =?UTF-8?q?A=20=E5=B8=B8=E8=A7=84=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=94=AF=E6=8C=81=E5=85=A8=E5=B1=8F=E7=BC=96?=
 =?UTF-8?q?=E5=86=99=E5=91=BD=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/deploy/app/Ext1Setup3.js   | 69 ++++++++++++++-----
 .../src/pages/deploy/app/index.module.css     | 10 +++
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/spug_web/src/pages/deploy/app/Ext1Setup3.js b/spug_web/src/pages/deploy/app/Ext1Setup3.js
index 2f6abe4..f16103c 100644
--- a/spug_web/src/pages/deploy/app/Ext1Setup3.js
+++ b/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}
diff --git a/spug_web/src/pages/deploy/app/index.module.css b/spug_web/src/pages/deploy/app/index.module.css
index 58ac1a4..4424488 100644
--- a/spug_web/src/pages/deploy/app/index.module.css
+++ b/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;
 }
\ No newline at end of file