gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改terminal 显示隐藏通过高度控制 添加动画

Browse Source
This commit is contained in:
zhangyu
2020-12-07 11:14:11 +08:00
parent 59ae4e3efe
commit f07b6e889e
5 changed files with 159 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
nezha-fronted/src/components/cli/webSSH.vue
View File

@@ -7,170 +7,171 @@
<div class="sub-list-resize-copy">一</div>
</div>
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>-->
<div ref="webSShBox" id="shell-service" class="sub-box" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" v-show="consoleShow">
<div class="resize-modal">
<div class="sub-list-resize-copy" style="width: 100%">一</div>
</div>
<div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
<div style='position: relative;' class="sub-list">
<!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
<input style='width: 0;height: 0;opacity: 0;display: inherit;' />
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
<el-submenu index="1" style="width:40px;" popper-class="fontSizeBox">
<template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
<!--<el-submenu index="1-1">-->
<div ref="webSShBox" id="shell-service" class="sub-box ani-webSHH-height" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" style="height: 0;background: #000">
<div class="resize-modal">
<div class="sub-list-resize-copy" style="width: 100%">一</div>
</div>
<div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
<div class="sub-list-resize" v-show="isFullScreen"></div>
<div style='position: relative;' class="sub-list">
<!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
<input style='width: 0;height: 0;opacity: 0;display: inherit;' />
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
<el-submenu index="1" style="width:40px;" popper-class="fontSizeBox">
<template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
<!--<el-submenu index="1-1">-->
<!--<template slot="title">文字大小</template>-->
<el-menu-item @click="changeFontSize(12)" :class="{fontSet:true,menuActive:fontSize==12, smallFont:true}" index="1-1">A</el-menu-item>
<el-menu-item @click="changeFontSize(15)" :class="{fontSet:true,menuActive:fontSize==15, middleFont:true}" index="1-2">A</el-menu-item>
<el-menu-item @click="changeFontSize(20)" :class="{fontSet:true,menuActive:fontSize==20, bigFont:true}" index="1-3">A</el-menu-item>
<!--<el-menu-item class="fontSet" index="1-4">大</el-menu-item>-->
<!--</el-submenu>-->
<!--<el-submenu index="1-2" >-->
<!--</el-submenu>-->
<!--<el-submenu index="1-2" >-->
<!--<template slot="title">字体</template>-->
<!--<el-menu-item index="1-2-1">Monosapace</el-menu-item>-->
<!--<el-menu-item index="1-2-2">Courier New</el-menu-item>-->
<!--</el-submenu>-->
</el-submenu>
<el-submenu index="2" style="width:50px;">
<template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
<el-menu-item index="2-1" @click="showUploadBox">
<!--</el-submenu>-->
</el-submenu>
<el-submenu index="2" style="width:50px;">
<template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
<el-menu-item index="2-1" @click="showUploadBox">
<div>{{$t('webshell.upload')}}</div>
</el-menu-item>
<el-menu-item index="2-2" @click="showDownloadBox">
<div>{{$t('webshell.download')}}</div>
</el-menu-item>
</el-submenu>
</el-menu>
</el-menu-item>
<el-menu-item index="2-2" @click="showDownloadBox">
<div>{{$t('webshell.download')}}</div>
</el-menu-item>
</el-submenu>
</el-menu>
<el-tabs v-model="editableTabsValue"
@tab-click="handleClick"
@tab-remove="removeTab"
:before-leave="beforeLeave"
style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
type="border-card" >
<el-tab-pane v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
closable
>
<!-- tab显示的内容 1 grey,2 green, 3 red-->
<span slot="label" style="">
<el-tabs v-model="editableTabsValue"
@tab-click="handleClick"
@tab-remove="removeTab"
:before-leave="beforeLeave"
style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
type="border-card" >
<el-tab-pane v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
closable
>
<!-- tab显示的内容 1 grey,2 green, 3 red-->
<span slot="label" style="">
<div :class="{'active-icon grey':item.circleColor == 1,'active-icon green':item.circleColor == 2,'active-icon red':item.circleColor == 3}"
style="margin-top: 0px;"></div>{{item.title}}
style="margin-top: 0px;"></div>{{item.title}}
</span>
<my-console :terminal="item.terminal" @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console>
<my-console :terminal="item.terminal" @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console>
</el-tab-pane>
<el-tab-pane key="add" name="add">
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
</el-tab-pane>
</el-tabs>
<i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
<i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i>
<i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
<!--
<i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
<i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
<i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
-->
<!--nz-icon-setting nz-icon nz-icon-minus el-icon-full-screen el-icon-copy-document-->
</div>
</el-tab-pane>
<el-tab-pane key="add" name="add">
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
</el-tab-pane>
</el-tabs>
<i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
<i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i>
<i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
<!--
<i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
<i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
<i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
-->
<!--nz-icon-setting nz-icon nz-icon-minus el-icon-full-screen el-icon-copy-document-->
</div>
<div >
<el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
<div >
<div class="upload-body">
<div >
<el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
<div >
<div class="upload-body">
<el-row >
<el-col :span="24">
<el-upload drag class="upload-demo"
ref="uploadFile" action=""
:file-list="uploadFileList"
:on-change="handleChange"
:auto-upload="false" >
<i class="nz-icon nz-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
<!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
</button>-->
</el-upload>
</el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-col :span="3" style="text-align:center;line-height: 24px;">
<label>{{$t('webshell.filePath')}}</label>
</el-col>
<el-col :span="21">
<el-input v-model="uploadFile.path" size="mini"></el-input>
</el-col>
</el-row>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="upload" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.uploadButtonTitle')}}</span>
</button>
<button @click="closeDialog" class="el-button el-button--default el-button--small" >
<span>{{$t('overall.cancel')}}</span>
</button>
<el-row >
<el-col :span="24">
<el-upload drag class="upload-demo"
ref="uploadFile" action=""
:file-list="uploadFileList"
:on-change="handleChange"
:auto-upload="false" >
<i class="nz-icon nz-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
<!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
</button>-->
</el-upload>
</el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-col :span="3" style="text-align:center;line-height: 24px;">
<label>{{$t('webshell.filePath')}}</label>
</el-col>
<el-col :span="21">
<el-input v-model="uploadFile.path" size="mini"></el-input>
</el-col>
</el-row>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
<div>
<div class="upload-body">
<el-row style="margin-top: 20px;">
<el-col :span="3" style="text-align:center;line-height: 24px;">
<label>{{$t('webshell.filePath')}}</label>
</el-col>
<el-col :span="21">
<el-input v-model="downloadFile.path" size="mini"></el-input>
</el-col>
</el-row>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="download" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.downloadButtonTitle')}}</span>
</button>
<button @click="closeDownloadDialog" class="el-button el-button--default el-button--small">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="closeConfirmShow" :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
<div >
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning">
</div>
<div class="el-message-box__message">
<p>{{$t('webshell.closeTip')}}</p>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="upload" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.uploadButtonTitle')}}</span>
</button>
<button @click="closeDialog" class="el-button el-button--default el-button--small" >
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
<el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
<button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right">
<span>{{$t('tip.yes')}}</span>
</button>
<button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right">
<span>{{$t('tip.no')}}</span>
</button>
</el-dialog>
<el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
<div>
<div class="upload-body">
<el-row style="margin-top: 20px;">
<el-col :span="3" style="text-align:center;line-height: 24px;">
<label>{{$t('webshell.filePath')}}</label>
</el-col>
<el-col :span="21">
<el-input v-model="downloadFile.path" size="mini"></el-input>
</el-col>
</el-row>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="download" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.downloadButtonTitle')}}</span>
</button>
<button @click="closeDownloadDialog" class="el-button el-button--default el-button--small">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div>
</div>
</div>
</el-dialog>
</el-dialog>
<el-dialog :visible.sync="closeConfirmShow" :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
<div >
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning">
</div>
<div class="el-message-box__message">
<p>{{$t('webshell.closeTip')}}</p>
</div>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
<el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
<button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right">
<span>{{$t('tip.yes')}}</span>
</button>
<button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right">
<span>{{$t('tip.no')}}</span>
</button>
</div>
</div>
</div>
</el-dialog>
</div>
</div>
</div>
</template>
<script>
@@ -212,6 +213,7 @@
downloadResult:null,
// 字体大小
fontSize:termFontSize?termFontSize:15,
webSSHHeight:'',//最小化之前的高度
}
},
methods: {
@@ -311,7 +313,7 @@
this.isFullScreen = false;
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.initConsoleHeight+'px';
targetDiv.style.height=0+'px';
this.consoleHeight = this.initConsoleHeight-50;
this.$store.commit('closeConsole');
@@ -451,6 +453,9 @@
minScreen(){
this.consoleShow = false;
this.$store.commit('minConsole');
let targetDiv= document.getElementById('shell-service');
this.webSSHHeight=targetDiv.style.height;
targetDiv.style.height=0+'px';
},
fullScreen(isChange){
this.resizeConsoleHeight = document.querySelector("#shell-service").offsetHeight; //记录全屏前主列表的高度
@@ -663,6 +668,8 @@
let host = this.$store.state.consoleParam.host;
let accountId = this.$store.state.consoleParam.accountId;
let port = this.$store.state.consoleParam.port;
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.initConsoleHeight+'px';
this.show(id,host,accountId,port);
}else {
this.consoleShow = true;
@@ -676,6 +683,8 @@
});
}
});
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.webSSHHeight;
}
this.$store.state.consoleShow = false;
}
@@ -694,5 +703,11 @@
}
</script>
<style scoped>
.ani-webSHH-height{
transition: height .25s ease-in;
}
.sub-list{
background: #E4E7ED;
}
</style>