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

feat:新功能

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
<style scoped>
.console{
height:305px;
height:270px;
padding:5px 5px;
background-color: black;
}
</style>
<template>
<div class="console" :id="'ternimalContainer'+idIndex">
<div :id="'terminal'+idIndex"></div>
<div :id="'terminal'+idIndex" ></div>
</div>
</template>
<script>
@@ -38,11 +38,21 @@ export default {
term: null,
terminalSocket: null,
termimalRows:15,
termimalHeight:300,
fontSize:18,
termimalHeight:270,
minRow:0,
fontSize:15,
fontSpaceHeight:2,//一行高度=fontSize+fontSpaceHeight
obj:{
id:2
},
successBackContent:'Connecting to',
failBackContent:'Sorry',
connectFailContent:'Connection failed',
welcomeBackContent:'Welcome',
psdCont:'password: ',
conFinish:false,
conSuccessNum:0,
inputSecret:false,
}
},
watch:{
@@ -61,16 +71,23 @@ export default {
prompt(term) {
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);
consoleBox.style.height = `${consoleHeigt}px`;
//调整终端高度
let rows = (consoleHeigt-30)/this.fontSize;
rows = parseInt(rows);
this.term.resize(this.term.cols,rows);
let rows = (consoleHeigt-38)/(this.fontSize+this.fontSpaceHeight);
let cols = this.term.cols;
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);
let width = document.body.clientWidth;//可视宽度
let height = parseInt(consoleBox.style.height);
@@ -78,7 +95,7 @@ export default {
const winStyle={
width:width,
height:height,
cols:this.term.cols,
cols:this.term.cols,//cols和rows在resizeConsole方法已经设置
rows:this.term.rows,
};
//alert(JSON.stringify(winStyle));
@@ -94,21 +111,24 @@ export default {
fullScreenConsole(isFullScreen){
this.isFullScreen = isFullScreen;
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
let height = document.body.clientHeight;//可视高度
let height = document.body.clientHeight-30;//可视高度
let width = document.body.clientWidth;//可视宽度
let rows = height/this.fontSize;
let rows = height/(this.fontSize+this.fontSpaceHeight);
rows = parseInt(rows);
if(isFullScreen){
//容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${100}%`;
consoleBox.style.height = `${height}px`;//减去菜单的高度
}else {
rows = this.termimalRows;
//rows = this.termimalRows-this.minRow;
height = this.termimalHeight;
//容器高度设置
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);
const winStyl={
width:width,
@@ -126,19 +146,7 @@ export default {
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)
@@ -162,16 +170,16 @@ term.toggleFullScreen();//全屏
if(this.isFullScreen){
//容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
let height = document.body.clientHeight;//高度
consoleBox.style.height = `${100}%`;
let height = document.body.clientHeight;//可视高度
rows = height/this.fontSize;
rows = (height-30)/(this.fontSize+this.fontSpaceHeight);
rows = parseInt(rows);
}else{
//容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
let height = this.terminal.height;//可视高度
consoleBox.style.height = `${height+5}px`;
rows = (height-30)/this.fontSize;
consoleBox.style.height = `${height}px`;
rows = (height-38)/(this.fontSize+this.fontSpaceHeight);//menu 30 ,drag 8
rows = parseInt(rows);
}
let terminalContainer = document.getElementById('terminal'+this.idIndex);
@@ -181,6 +189,9 @@ term.toggleFullScreen();//全屏
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
//bellStyle:'sound',
disableStdin:false,//是否应禁用输入
fontSize:this.fontSize,
//lineHeight:1,
//fontFamily: 'NotoSans',
//scrollback: 800, //回滚
//tabStopWidth: 8, //制表宽度
//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;
//alert(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 = () =>{
//alert('open');
//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) {
//alert('socketmessage='+evt.data);
//alert('back='+evt.data);
//let str = new TextDecoder().decode(evt.data);
//let successBackContent = 'Connecting to';
let backContent = 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);
//this.term.write(evt.data);
//that.term.write("666622222*444555*************"+evt.data);
@@ -230,9 +317,9 @@ term.toggleFullScreen();//全屏
};
//选中 复制
this.term.on("selection", function() {
if (this.term.hasSelection()) {
//if (this.term.hasSelection()) {
//this.copy = this.term.getSelection();
}
//}
});
this.term.attachCustomKeyEventHandler(function(ev) {
//粘贴 ctrl+v
@@ -251,19 +338,7 @@ term.toggleFullScreen();//全屏
this.term.onData = (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) {
//alert("key=========="+key);
//this.term.write(key)//输入
@@ -304,6 +379,7 @@ term.toggleFullScreen();//全屏
if(consoleBox){
consoleBox.style.height = `${this.termimalHeight}px`;
}
this.conFinish = false;
},
},
mounted () {

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

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

95
nezha-fronted/src/components/cli/webSSH.vue
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-resize-mask"></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-submenu index="1" style="width:40px;">
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 4px;"></i></template>
@@ -37,19 +37,22 @@
@tab-click="handleClick"
@tab-remove="removeTab"
:before-leave="beforeLeave"
style='width:100%;'
type="border-card">
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显示的内容 <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="">
<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>
<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 key="add" name="add">
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
@@ -150,7 +153,7 @@
consoleShow:false,
isFullScreen:false,
initConsoleHeight:300,//只读,初始化高度
consoleHeight:300,
consoleHeight:300,//console高度
currentTransform:0,
editableTabsValue: '-1',//当前显示的console
currentIndex:'-1',
@@ -195,6 +198,7 @@
const console = {
title:title,
name:newTabName,
circleColor:1,//1 grey,2 green, 3 red
terminal: {
name:newTabName,
cols: 225,
@@ -221,6 +225,7 @@
},10)
//this.$store.commit('addConsole');
},
show(id,host,accountId,port){
this.addConsole(id,host,accountId,port);
@@ -251,6 +256,18 @@
},
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) {
let tabs = this.editableTabs;
@@ -342,11 +359,11 @@
},
*/
handleChange:function(file,fileList){
//if (fileList.length > 0) {
//this.uploadFileList = [fileList[fileList.length - 1]]
//}
//this.uploadFile.file = this.uploadFileList[0];
this.uploadFile.file = file;
if (fileList.length > 0) {
this.uploadFileList = [fileList[fileList.length - 1]]
}
this.uploadFile.file = this.uploadFileList[0];
//this.uploadFile.file = file;
},
upload() {
//if(this.uploadFile && this.uploadFile.file.raw){
@@ -370,14 +387,13 @@
download(){
this.downloadFile.uuid = this.currentUuid;
this.$post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => {
let fileName= this.downloadFile.path.substring(this.downloadFile.path.indexOf('/')+1);
if(res.code == 200 ){
let fileName= this.downloadFile.path.substring(this.downloadFile.path.lastIndexOf('/')+1);
if(window.navigator.msSaveOrOpenBlob){
// 兼容ie11
let blobObject = new Blob([res.data]);
let blobObject = new Blob([res]);
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
}else{
let url = URL.createObjectURL(new Blob([res.data]));
let url = URL.createObjectURL(new Blob([res]));
let a = document.createElement('a');
document.body.appendChild(a); //此处增加了将创建的添加到body当中
a.href = url;
@@ -387,9 +403,12 @@
a.remove(); //将a标签移除
}
this.closeDownloadDialog();
/*
if(res.code == 200 ){
}else{
this.$message.error(res.msg);
}
}*/
})
},
/*upload--download end*/
@@ -399,7 +418,7 @@
this.consoleShow = false;
this.$store.commit('minConsole');
},
fullScreen(){
fullScreen(isChange){
//dialog全屏
this.isFullScreen = !this.isFullScreen;
@@ -411,6 +430,20 @@
if(!this.isFullScreen){
let targetDiv= document.getElementById('shell-service');
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");
@@ -454,13 +487,25 @@
document.onmouseup=function(){
document.onmousemove=null;
_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);
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: {
'$store.state.consoleShow':function(val){
@@ -473,13 +518,23 @@
this.show(id,host,accountId,port);
}else {
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;
}
}
},
created() {
window.addEventListener('resize',this.windowChange);
},
mounted() {