improve uc

spug_web/src/pages/deploy/request/Ext1Console.js

@@ -6,7 +6,7 @@
 import React, { useEffect } from 'react';
 import { observer, useLocalStore } from 'mobx-react';
 import { Card, Progress, Modal, Collapse, Steps } from 'antd';
-import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, } from '@ant-design/icons';
+import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined } from '@ant-design/icons';
 import OutView from './OutView';
 import { http, X_TOKEN } from 'libs';
 import styles from './index.module.less';
@@ -73,9 +73,13 @@ function Ext1Console(props) {
   }
 
   return store.tabModes[props.request.id] ? (
-    <Card className={styles.item} bodyStyle={{padding: '8px 12px'}} onClick={switchMiniMode}>
+    <Card
+      className={styles.item}
+      bodyStyle={{padding: '8px 12px'}}
+      onClick={switchMiniMode}>
       <div className={styles.header}>
         <div className={styles.title}>{props.request.name}</div>
+        <CloseOutlined onClick={() => store.showConsole(props.request, true)}/>
       </div>
       {Object.values(outputs).map(item => (
         <Progress

spug_web/src/pages/deploy/request/Table.js

@@ -9,6 +9,7 @@ import { BranchesOutlined, BuildOutlined, TagOutlined, PlusOutlined } from '@ant
 import { Radio, Modal, Popover, Tag, Popconfirm, message } from 'antd';
 import { http, hasPermission } from 'libs';
 import { Action, AuthButton, TableCard } from 'components';
+import styles from './index.module.less';
 import store from './store';
 
 @observer
@@ -97,7 +98,7 @@ class ComTable extends React.Component {
         case '-3':
           return <Action>
             <Action.Button auth="deploy.request.do" onClick={() => store.readConsole(info)}>查看</Action.Button>
-            <Popconfirm title="确认要执行该发布申请？" onConfirm={() => store.showConsole(info)}>
+            <Popconfirm title="确认要执行该发布申请？" onConfirm={e => this.handleCCC(e, info)}>
               <Action.Button auth="deploy.request.do">发布</Action.Button>
             </Popconfirm>
             <Action.Button
@@ -178,6 +179,21 @@ class ComTable extends React.Component {
     })
   };
 
+  handleCCC = (e, info) => {
+    const right = document.body.clientWidth - 25 - e.target.getBoundingClientRect().x;
+    const bottom = document.body.clientHeight - 40 - e.target.getBoundingClientRect().y;
+    store.box.setAttribute('style', `display: block; bottom: ${bottom}px; right: ${right}px;`);
+    setTimeout(() => {
+      store.box.setAttribute('class', `${styles.floatBox} ${styles.floatBoxAnimate}`)
+    }, 10);
+    setTimeout(() => {
+      store.showConsole(info);
+      store.box.setAttribute('style', 'display: none');
+      store.box.setAttribute('class', styles.floatBox)
+    }, 300)
+
+  }
+
   render() {
     let data = store.records;
     if (store.f_app_id) {

spug_web/src/pages/deploy/request/index.js

@@ -131,6 +131,7 @@ class Index extends React.Component {
             ))}
           </Row>
         )}
+        <div ref={el => store.box = el} id='floatBox' className={styles.floatBox}/>
       </AuthDiv>
     )
   }

spug_web/src/pages/deploy/request/index.module.less

@@ -97,5 +97,22 @@
 }
 
 .collapse :global(.ant-collapse-content-box) {
-    padding: 0;
+  padding: 0;
+}
+
+.floatBox {
+  display: none;
+  position: fixed;
+  width: 20px;
+  height: 10px;
+  transition: right 0.3s, width 0.3s, height0 .3s, bottom 0.3s ease-in-out;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+}
+
+.floatBoxAnimate {
+  width: 180px;
+  height: 64px;
+  bottom: 12px !important;
+  right: 24px !important;
 }

spug_web/src/pages/deploy/request/store.js

@@ -11,6 +11,7 @@ class Store {
   @observable records = [];
   @observable record = {};
   @observable counter = {};
+  @observable box = null;
   @observable tabs = [];
   @observable tabModes = {};
   @observable isFetching = false;