feat:新功能

1.webshell模块:根据是否连接服务器更新tab的title及圆点颜色
fix:修改问题
1.webshell窗口最大化及最小化后获得焦点
2.webshell:浏览器改变大小,调用resize
3.下载功能可进行下载
4.xshell窗口样式修改:左边有白线、最大化后底部有白条、全屏后恢复正常大小时新增窗口,滚动条高度不对、全屏返回正常大小时滚动条高度不对、高度改变后新增窗口,滚动条高度不对
This commit is contained in:
hanyuxia
2020-03-13 11:13:30 +08:00
parent 43d3117b0a
commit 0bf7ae1fbf
3 changed files with 214 additions and 81 deletions

View File

@@ -1,6 +1,6 @@
<style scoped> <style scoped>
.console{ .console{
height:305px; height:270px;
padding:5px 5px; padding:5px 5px;
background-color: black; background-color: black;
} }
@@ -38,11 +38,21 @@ export default {
term: null, term: null,
terminalSocket: null, terminalSocket: null,
termimalRows:15, termimalRows:15,
termimalHeight:300, termimalHeight:270,
fontSize:18, minRow:0,
fontSize:15,
fontSpaceHeight:2,//一行高度=fontSize+fontSpaceHeight
obj:{ obj:{
id:2 id:2
}, },
successBackContent:'Connecting to',
failBackContent:'Sorry',
connectFailContent:'Connection failed',
welcomeBackContent:'Welcome',
psdCont:'password: ',
conFinish:false,
conSuccessNum:0,
inputSecret:false,
} }
}, },
watch:{ watch:{
@@ -61,16 +71,23 @@ export default {
prompt(term) { prompt(term) {
term.write('\r\n ');//term.write('\r\n~$ '); term.write('\r\n ');//term.write('\r\n~$ ');
}, },
resizeConsole(consoleHeigt){ resize(consoleHeigt,consoleWidth){
this.resizeConsole(consoleHeigt,consoleWidth);
this.resizeServiceConsole();
},
resizeConsole(consoleHeigt,consoleWidth){
//调整终端容器高度 //调整终端容器高度
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex); const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${consoleHeigt}px`; consoleBox.style.height = `${consoleHeigt}px`;
//调整终端高度 //调整终端高度
let rows = (consoleHeigt-30)/this.fontSize; let rows = (consoleHeigt-38)/(this.fontSize+this.fontSpaceHeight);
rows = parseInt(rows); let cols = this.term.cols;
this.term.resize(this.term.cols,rows); if(consoleWidth){//需要调整宽度???
cols = (consoleWidth-30)/(this.fontSize+this.fontSpaceHeight);
}
this.term.resize(parseInt(cols),(parseInt(rows)-this.minRow));
}, },
resizeServiceConsole(consoleHeigt){ resizeServiceConsole(){
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex); const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
let width = document.body.clientWidth;//可视宽度 let width = document.body.clientWidth;//可视宽度
let height = parseInt(consoleBox.style.height); let height = parseInt(consoleBox.style.height);
@@ -78,7 +95,7 @@ export default {
const winStyle={ const winStyle={
width:width, width:width,
height:height, height:height,
cols:this.term.cols, cols:this.term.cols,//cols和rows在resizeConsole方法已经设置
rows:this.term.rows, rows:this.term.rows,
}; };
//alert(JSON.stringify(winStyle)); //alert(JSON.stringify(winStyle));
@@ -94,21 +111,24 @@ export default {
fullScreenConsole(isFullScreen){ fullScreenConsole(isFullScreen){
this.isFullScreen = isFullScreen; this.isFullScreen = isFullScreen;
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab //this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
let height = document.body.clientHeight;//可视高度 let height = document.body.clientHeight-30;//可视高度
let width = document.body.clientWidth;//可视宽度 let width = document.body.clientWidth;//可视宽度
let rows = height/this.fontSize; let rows = height/(this.fontSize+this.fontSpaceHeight);
rows = parseInt(rows); rows = parseInt(rows);
if(isFullScreen){ if(isFullScreen){
//容器高度设置100% //容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex); const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${100}%`; consoleBox.style.height = `${height}px`;//减去菜单的高度
}else { }else {
rows = this.termimalRows; //rows = this.termimalRows-this.minRow;
height = this.termimalHeight; height = this.termimalHeight;
//容器高度设置 //容器高度设置
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex); const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${this.termimalHeight}px`; consoleBox.style.height = `${this.termimalHeight+30}px`;
rows = (height-10)/(this.fontSize+this.fontSpaceHeight);//padding 5*2
rows = parseInt(rows);
} }
this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows); this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows);
const winStyl={ const winStyl={
width:width, width:width,
@@ -126,19 +146,7 @@ export default {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
}); });
/*
import 'xterm/dist/addons/fullscreen/fullscreen.css'//如果不成功,请检查路径
import * as fullscreen from 'xterm/lib/addons/fullscreen/fullscreen';
Terminal.applyAddon(fullscreen); // Apply the `fullscreen` addon
//调用
term.toggleFullScreen();//全屏
term.toggleFullScreen();//正常
term.toggleFullScreen();//全屏
*/
//----------2
/* /*
window.addEventListener('resize',this.windowChange) window.addEventListener('resize',this.windowChange)
@@ -162,16 +170,16 @@ term.toggleFullScreen();//全屏
if(this.isFullScreen){ if(this.isFullScreen){
//容器高度设置100% //容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex); const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
let height = document.body.clientHeight;//高度
consoleBox.style.height = `${100}%`; consoleBox.style.height = `${100}%`;
let height = document.body.clientHeight;//可视高度 rows = (height-30)/(this.fontSize+this.fontSpaceHeight);
rows = height/this.fontSize;
rows = parseInt(rows); rows = parseInt(rows);
}else{ }else{
//容器高度设置100% //容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex); const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
let height = this.terminal.height;//可视高度 let height = this.terminal.height;//可视高度
consoleBox.style.height = `${height+5}px`; consoleBox.style.height = `${height}px`;
rows = (height-30)/this.fontSize; rows = (height-38)/(this.fontSize+this.fontSpaceHeight);//menu 30 ,drag 8
rows = parseInt(rows); rows = parseInt(rows);
} }
let terminalContainer = document.getElementById('terminal'+this.idIndex); let terminalContainer = document.getElementById('terminal'+this.idIndex);
@@ -181,6 +189,9 @@ term.toggleFullScreen();//全屏
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar' cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
//bellStyle:'sound', //bellStyle:'sound',
disableStdin:false,//是否应禁用输入 disableStdin:false,//是否应禁用输入
fontSize:this.fontSize,
//lineHeight:1,
//fontFamily: 'NotoSans',
//scrollback: 800, //回滚 //scrollback: 800, //回滚
//tabStopWidth: 8, //制表宽度 //tabStopWidth: 8, //制表宽度
//screenKeys: true// //screenKeys: true//
@@ -199,18 +210,94 @@ term.toggleFullScreen();//全屏
let url = baseUrl+"/terminal.ws?width="+this.terminal.width+"&height="+this.terminal.height+"&cols="+this.terminal.cols+"&rows="+this.terminal.rows+"&token="+token+"&assetId="+this.terminal.assetId+"&accountId="+this.terminal.accountId+"&uuid="+this.terminal.uuid; let url = baseUrl+"/terminal.ws?width="+this.terminal.width+"&height="+this.terminal.height+"&cols="+this.terminal.cols+"&rows="+this.terminal.rows+"&token="+token+"&assetId="+this.terminal.assetId+"&accountId="+this.terminal.accountId+"&uuid="+this.terminal.uuid;
//alert(url); //alert(url);
this.terminalSocket = new WebSocket(url); this.terminalSocket = new WebSocket(url);
/*
alert(this.term.getOption('fontSize'));
alert(this.term.getOption('lineHeight'));
alert(this.term.getOption('fontWeight'));
alert(this.term.getOption('fontFamily'));
*/
//连接成功 //连接成功
this.terminalSocket.onopen = () =>{ this.terminalSocket.onopen = () =>{
//alert('open'); //alert('open');
//this.term.write("22222*444555*************"+this.terminal.assetId); //this.term.write("22222*444555*************"+this.terminal.assetId);
}; };
//登录后,你输入的内容从后台服务返回
this.term.on("data", function(data) {
//alert("data="+data);
//alert("data"+ data.charCodeAt(0)+"==");
let code = data.charCodeAt(0);
if(code==13){
//that.term.clear();
//alert("data="+data);
//that.prompt(that.term);
}else {
//that.term.write(data);
}
//this.terminalSocket.send(new TextEncoder().encode("\x00" + data));
});
//返回 //返回
this.terminalSocket.onmessage = function(evt) { this.terminalSocket.onmessage = function(evt) {
//alert('socketmessage='+evt.data); //let successBackContent = 'Connecting to';
//alert('back='+evt.data); let backContent = evt.data;
//let str = new TextDecoder().decode(evt.data); //alert(backContent+ backContent.charCodeAt(0)+"==");
/*
if(that.inputSecret){//当前为密码输入状态
}
if(backContent.length>1){
let pwdInput = backContent.endsWith(that.psdCont);
if(pwdInput){//输入密码
that.inputSecret = true;
}
}*/
let welComIndex = backContent.indexOf(that.welcomeBackContent);
if(welComIndex>-1){//无服务器信息只与nezha进行了连接
const connectResult = {
title:'',
color:1,
};
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
}else {
let successContentIndex = backContent.indexOf(that.successBackContent);
if(successContentIndex>-1 ){
//that.conFinish = true;
let startIndex = successContentIndex+that.successBackContent.length+1;
backContent = backContent.substring(startIndex);
let endIndex = backContent.indexOf('\r\n');
let title = backContent.substring(0,endIndex);
const connectResult = {
title:title,
color:2,
};
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
}else {//失败
let failContentIndex = backContent.indexOf(that.failBackContent);
let connectFailIndex = backContent.indexOf(that.connectFailContent);
if(failContentIndex>-1 ){
//that.conFinish = true;
const connectResult = {
title:'',
color:3,
};
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
}else if(connectFailIndex>-1){
let startIndex = successContentIndex+that.successBackContent.length+1;
backContent = backContent.substring(startIndex);
let endIndex = backContent.indexOf('\r\n');
let title = backContent.substring(0,endIndex);
const connectResult = {
title:'',
color:3,
};
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
}
}
}
//alert('socketmessage='+evt.data);
//let str = new TextDecoder().decode(evt.data);
//let str = new TextDecoder().decode(evt.data); //let str = new TextDecoder().decode(evt.data);
//this.term.write(evt.data); //this.term.write(evt.data);
//that.term.write("666622222*444555*************"+evt.data); //that.term.write("666622222*444555*************"+evt.data);
@@ -230,9 +317,9 @@ term.toggleFullScreen();//全屏
}; };
//选中 复制 //选中 复制
this.term.on("selection", function() { this.term.on("selection", function() {
if (this.term.hasSelection()) { //if (this.term.hasSelection()) {
//this.copy = this.term.getSelection(); //this.copy = this.term.getSelection();
} //}
}); });
this.term.attachCustomKeyEventHandler(function(ev) { this.term.attachCustomKeyEventHandler(function(ev) {
//粘贴 ctrl+v //粘贴 ctrl+v
@@ -251,19 +338,7 @@ term.toggleFullScreen();//全屏
this.term.onData = (data) =>{ this.term.onData = (data) =>{
//alert('data:'+data); //alert('data:'+data);
};*/ };*/
//登录后,你输入的内容从后台服务返回容
this.term.on("data", function(data) {
//alert("data"+ data.charCodeAt(0)+"==");
let code = data.charCodeAt(0);
if(code==13){
//that.prompt(that.term);
}else {
//that.term.write(data);
}
//this.terminalSocket.send(new TextEncoder().encode("\x00" + data));
});
//this.term.on('key', function(key, ev) { //this.term.on('key', function(key, ev) {
//alert("key=========="+key); //alert("key=========="+key);
//this.term.write(key)//输入 //this.term.write(key)//输入
@@ -304,6 +379,7 @@ term.toggleFullScreen();//全屏
if(consoleBox){ if(consoleBox){
consoleBox.style.height = `${this.termimalHeight}px`; consoleBox.style.height = `${this.termimalHeight}px`;
} }
this.conFinish = false;
}, },
}, },
mounted () { mounted () {

View File

@@ -7,6 +7,7 @@
background: #fff; background: #fff;
z-index: 2000; z-index: 2000;
height: 300px; height: 300px;
#shell-service-resize-mask { #shell-service-resize-mask {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -129,6 +130,7 @@
position: fixed !important; position: fixed !important;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: black !important;
} }
/*-------*/ /*-------*/

View File

@@ -5,7 +5,7 @@
<div id="shell-service" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen}" v-show="consoleShow"> <div id="shell-service" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen}" v-show="consoleShow">
<div id="shell-service-resize-mask"></div> <div id="shell-service-resize-mask"></div>
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen"></div> <div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen"></div>
<div style='position: relative;border:solid 0px red;'> <div style='position: relative;'>
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'> <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;"> <el-submenu index="1" style="width:40px;">
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 4px;"></i></template> <template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 4px;"></i></template>
@@ -37,7 +37,7 @@
@tab-click="handleClick" @tab-click="handleClick"
@tab-remove="removeTab" @tab-remove="removeTab"
:before-leave="beforeLeave" :before-leave="beforeLeave"
style='width:100%;' style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
type="border-card" > type="border-card" >
<el-tab-pane v-for="(item, index) in editableTabs" <el-tab-pane v-for="(item, index) in editableTabs"
:key="item.name" :key="item.name"
@@ -45,11 +45,14 @@
:name="item.name" :name="item.name"
closable closable
> >
<!-- tab显示的内容 <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div>--> <!-- tab显示的内容 1 grey,2 green, 3 red-->
<span slot="label" style=""> <span slot="label" style="">
<div class="active-icon grey" style="margin-top: 0px;"></div>{{item.title}} <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}}
</span> </span>
<my-console :terminal="item.terminal" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen"></my-console>
<my-console :terminal="item.terminal" @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen"></my-console>
</el-tab-pane> </el-tab-pane>
<el-tab-pane key="add" name="add"> <el-tab-pane key="add" name="add">
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span> <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
@@ -150,7 +153,7 @@
consoleShow:false, consoleShow:false,
isFullScreen:false, isFullScreen:false,
initConsoleHeight:300,//只读,初始化高度 initConsoleHeight:300,//只读,初始化高度
consoleHeight:300, consoleHeight:300,//console高度
currentTransform:0, currentTransform:0,
editableTabsValue: '-1',//当前显示的console editableTabsValue: '-1',//当前显示的console
currentIndex:'-1', currentIndex:'-1',
@@ -195,6 +198,7 @@
const console = { const console = {
title:title, title:title,
name:newTabName, name:newTabName,
circleColor:1,//1 grey,2 green, 3 red
terminal: { terminal: {
name:newTabName, name:newTabName,
cols: 225, cols: 225,
@@ -221,6 +225,7 @@
},10) },10)
//this.$store.commit('addConsole'); //this.$store.commit('addConsole');
}, },
show(id,host,accountId,port){ show(id,host,accountId,port){
this.addConsole(id,host,accountId,port); this.addConsole(id,host,accountId,port);
@@ -251,6 +256,18 @@
}, },
handleClick(){ handleClick(){
},
refreshTabTitle(connectResult){
if (this.editableTabs && this.editableTabs.length > 0) {
this.editableTabs.forEach((tab, index) => {
if (tab.name === this.editableTabsValue) {
if(connectResult.title && connectResult.title!=''){
tab.title = connectResult.title;
}
tab.circleColor = connectResult.color;
}
});
}
}, },
removeTab(targetName) { removeTab(targetName) {
let tabs = this.editableTabs; let tabs = this.editableTabs;
@@ -342,11 +359,11 @@
}, },
*/ */
handleChange:function(file,fileList){ handleChange:function(file,fileList){
//if (fileList.length > 0) { if (fileList.length > 0) {
//this.uploadFileList = [fileList[fileList.length - 1]] this.uploadFileList = [fileList[fileList.length - 1]]
//} }
//this.uploadFile.file = this.uploadFileList[0]; this.uploadFile.file = this.uploadFileList[0];
this.uploadFile.file = file; //this.uploadFile.file = file;
}, },
upload() { upload() {
//if(this.uploadFile && this.uploadFile.file.raw){ //if(this.uploadFile && this.uploadFile.file.raw){
@@ -370,14 +387,13 @@
download(){ download(){
this.downloadFile.uuid = this.currentUuid; this.downloadFile.uuid = this.currentUuid;
this.$post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => { this.$post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => {
let fileName= this.downloadFile.path.substring(this.downloadFile.path.indexOf('/')+1); let fileName= this.downloadFile.path.substring(this.downloadFile.path.lastIndexOf('/')+1);
if(res.code == 200 ){
if(window.navigator.msSaveOrOpenBlob){ if(window.navigator.msSaveOrOpenBlob){
// 兼容ie11 // 兼容ie11
let blobObject = new Blob([res.data]); let blobObject = new Blob([res]);
window.navigator.msSaveOrOpenBlob(blobObject, fileName); window.navigator.msSaveOrOpenBlob(blobObject, fileName);
}else{ }else{
let url = URL.createObjectURL(new Blob([res.data])); let url = URL.createObjectURL(new Blob([res]));
let a = document.createElement('a'); let a = document.createElement('a');
document.body.appendChild(a); //此处增加了将创建的添加到body当中 document.body.appendChild(a); //此处增加了将创建的添加到body当中
a.href = url; a.href = url;
@@ -387,9 +403,12 @@
a.remove(); //将a标签移除 a.remove(); //将a标签移除
} }
this.closeDownloadDialog(); this.closeDownloadDialog();
/*
if(res.code == 200 ){
}else{ }else{
this.$message.error(res.msg); this.$message.error(res.msg);
} }*/
}) })
}, },
/*upload--download end*/ /*upload--download end*/
@@ -399,7 +418,7 @@
this.consoleShow = false; this.consoleShow = false;
this.$store.commit('minConsole'); this.$store.commit('minConsole');
}, },
fullScreen(){ fullScreen(isChange){
//dialog全屏 //dialog全屏
this.isFullScreen = !this.isFullScreen; this.isFullScreen = !this.isFullScreen;
@@ -411,6 +430,20 @@
if(!this.isFullScreen){ if(!this.isFullScreen){
let targetDiv= document.getElementById('shell-service'); let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.initConsoleHeight+'px'; targetDiv.style.height=this.initConsoleHeight+'px';
this.consoleHeight=this.initConsoleHeight;
}else {
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=`${100}%`;
let height = document.body.clientHeight;//可视高度
this.consoleHeight=height;
}
if (this.editableTabs && this.editableTabs.length > 0) {
this.editableTabs.forEach((tab, index) => {
if (tab.name === this.editableTabsValue) {
this.$refs['console' + index][0].focusConsole();
}
});
} }
//const dailog = document.getElementById("consoleDailog"); //const dailog = document.getElementById("consoleDailog");
@@ -454,13 +487,25 @@
document.onmouseup=function(){ document.onmouseup=function(){
document.onmousemove=null; document.onmousemove=null;
_this.editableTabs.forEach((tab, index) => { _this.editableTabs.forEach((tab, index) => {
_this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height)); // _this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height));
_this.$refs['console'+index][0].resizeServiceConsole();
}); });
_this.consoleHeight = parseInt(targetDiv.style.height); _this.consoleHeight = parseInt(targetDiv.style.height);
if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;} if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
} }
}, },
windowChange(){
//alert('winChange');
if(this.editableTabs&&this.editableTabs.length>0){
let width = document.body.clientWidth;//可视宽度
var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
var targetDivHeight=targetDiv.offsetHeight;
this.editableTabs.forEach((tab, index) => {
this.$refs['console'+index][0].resize(targetDivHeight,width);
});
}
}
}, },
watch: { watch: {
'$store.state.consoleShow':function(val){ '$store.state.consoleShow':function(val){
@@ -473,13 +518,23 @@
this.show(id,host,accountId,port); this.show(id,host,accountId,port);
}else { }else {
this.consoleShow = true; this.consoleShow = true;
//min后从header区域打开获得焦点
this.$nextTick(() => {
if (this.editableTabs && this.editableTabs.length > 0) {
this.editableTabs.forEach((tab, index) => {
if (tab.name === this.editableTabsValue ) {
this.$refs['console' + index][0].focusConsole();
}
});
}
});
} }
this.$store.state.consoleShow = false; this.$store.state.consoleShow = false;
} }
} }
}, },
created() { created() {
window.addEventListener('resize',this.windowChange);
}, },
mounted() { mounted() {