diff --git a/spug_web/src/pages/deploy/request/Ext1Console.js b/spug_web/src/pages/deploy/request/Ext1Console.js index 3f8ca1b..d304d12 100644 --- a/spug_web/src/pages/deploy/request/Ext1Console.js +++ b/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] ? ( - +
{props.request.name}
+ store.showConsole(props.request, true)}/>
{Object.values(outputs).map(item => ( store.readConsole(info)}>查看 - store.showConsole(info)}> + this.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) { diff --git a/spug_web/src/pages/deploy/request/index.js b/spug_web/src/pages/deploy/request/index.js index bec183e..d9dc578 100644 --- a/spug_web/src/pages/deploy/request/index.js +++ b/spug_web/src/pages/deploy/request/index.js @@ -131,6 +131,7 @@ class Index extends React.Component { ))} )} +
store.box = el} id='floatBox' className={styles.floatBox}/> ) } diff --git a/spug_web/src/pages/deploy/request/index.module.less b/spug_web/src/pages/deploy/request/index.module.less index d5d266e..d580bb2 100644 --- a/spug_web/src/pages/deploy/request/index.module.less +++ b/spug_web/src/pages/deploy/request/index.module.less @@ -97,5 +97,22 @@ } .collapse :global(.ant-collapse-content-box) { - padding: 0; -} \ No newline at end of file + 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; +} diff --git a/spug_web/src/pages/deploy/request/store.js b/spug_web/src/pages/deploy/request/store.js index 760dff8..6cc3392 100644 --- a/spug_web/src/pages/deploy/request/store.js +++ b/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;