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

perf: 优化terminal resize体验

Browse Source
This commit is contained in:
chenjinsong
2020-10-15 15:51:43 +08:00
parent 259282faa5
commit e80994e9d4
4 changed files with 152 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nezha-fronted/src/components/cli/console.vue
View File

@@ -77,11 +77,8 @@ export default {
this.setFontSize(this.fontSize);
})
},
resizeServiceConsole(){
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
resizeServiceConsole(height){
let width = document.body.clientWidth;//可视宽度
let height = parseInt(consoleBox.style.height);
if(height==null||!height){height=this.termimalHeight;}
const winStyle={
width:width,
height:height,

12
nezha-fronted/src/components/cli/webSSH.scss
View File

@@ -3,21 +3,11 @@
width: 100%;
left: 0;
position: fixed;
bottom: 50px;
bottom: 0;
background: #fff;
z-index: 2000;
height: 300px;
#shell-service-resize-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: none;
z-index: 1;
}
.shell-split {
cursor: ns-resize;
height: 8px;

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

@@ -2,10 +2,17 @@
@import './webSSH.scss';
</style>
<template>
<div id="shell-service" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" v-show="consoleShow">
<div id="shell-service-resize-mask"></div>
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
<div style='position: relative;'>
<!-- <div id="shell-service" 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">一</div>
</div>
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>-->
<div 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">一</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;'>
@@ -497,7 +504,7 @@
});
}
},
dragEagle:function(e){
/*dragEagle:function(e){
var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
//得到点击时该容器的宽高：
@@ -541,6 +548,66 @@
_this.consoleHeight = parseInt(targetDiv.style.height);
if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
}
},*/
dragEagle(e) {
//let mainListDom = document.querySelector(".main-list"); //主列表
let subBoxDom = document.querySelector(".sub-box"); //副列表
let subListDom = document.querySelector(".sub-list"); //副列表
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let resizeBarHeight = 9; //resize横条高度
let minHeight = 15; //terminal最小高度限制为15
//let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
//let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
let resizeModalDom = document.querySelector(".resize-modal"); //副列表遮罩
let resizeBarDom = document.querySelector(".sub-list-resize"); //拖动条
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//点击时俩dom的初始高度：
let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
//mainModalDom.style.display = "block";
resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
resizeBarDom.style.display = "none";
let resizeModalEndHeight;
//点击时鼠标的Y轴位置
let mouseInitialY = e.clientY;
document.onmousemove = (e) => {
window.resizing = true;
e.preventDefault();
//得到鼠标拖动的距离
let mouseMoveY = e.clientY-mouseInitialY;
resizeModalEndHeight = subInitialHeight-mouseMoveY;
resizeModalDom.style.height = `${resizeModalEndHeight}px`;
// 主、副列表最大、最小高度限制
if(resizeModalEndHeight > contentRightHeight-minHeight){
resizeModalEndHeight = contentRightHeight-minHeight;
}
if(resizeModalEndHeight < minHeight){
resizeModalEndHeight = minHeight;
}
resizeModalDom.style.height = `${resizeModalEndHeight}px`;
};
let vm = this;
document.onmouseup = () => {
window.resizing = false;
//mainListDom.style.height = `${contentRightHeight-resizeModalEndHeight}px`;
subBoxDom.style.height = `${resizeModalEndHeight}px`;
subListDom.style.height = `${resizeModalEndHeight-resizeBarHeight}px`;
resizeModalDom.style.display = "none";
//mainModalDom.style.display = "none";
resizeBarDom.style.display = "";
vm.consoleHeight = resizeModalEndHeight;
vm.editableTabs.forEach((tab, index) => {
vm.$refs['console'+index][0].resizeConsole(resizeModalEndHeight);
vm.$refs['console'+index][0].resizeServiceConsole(resizeModalEndHeight);
});
document.onmousemove = null;
document.onmouseup = null;
}
},
debounce(operate, delay) {

4
nezha-fronted/src/components/common/js/tools.js
View File

@@ -194,7 +194,7 @@ export const bottomBoxWindow = {
let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
let resizeModalDom = document.querySelector(".resize-modal"); //副列表遮罩
let resizeBarDom = document.querySelector(".sub-list-resize"); //副列表遮罩
let resizeBarDom = document.querySelector(".sub-list-resize"); //拖动条
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//点击时俩dom的初始高度：
@@ -215,7 +215,7 @@ export const bottomBoxWindow = {
resizeModalEndHeight = subInitialHeight-mouseMoveY;
resizeModalDom.style.height = `${resizeModalEndHeight}px`;
// 主、副列表最小高度限制
// 主、副列表高度限制
if(resizeModalEndHeight > contentRightHeight-minHeight){
resizeModalDom.style.height = `${contentRightHeight-minHeight}px`;
}