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

feat:新功能

Browse Source 
1.webshell模块：xterm替换滚动条，统一系统样式
2.webshell模块：tab增加激活样式
3.webshell模块：quit命令后关闭当前窗口
4.暂时隐藏字体及字体大小设置
fix：修改问题
1.字体模糊
This commit is contained in:
hanyuxia
2020-03-13 19:17:19 +08:00
parent b94d644581
commit 1a59bce56b
4 changed files with 44 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
</style>
<template>
<div class="console" :id="'ternimalContainer'+idIndex">
<div :id="'terminal'+idIndex" ></div>
<div :id="'terminal'+idIndex" v-scrollBar:xterm></div>
</div>
</template>
<script>
@@ -15,15 +15,7 @@ import Terminal from '../common/js/Xterm'
export default {
name: 'console',
props:{
terminal:{/*
cols: 400,
rows: 400,
width:'',
height:'',
assetId:0,
accountId:0,
uuid:'aaadwdwd',*/
},
terminal:{ },
idIndex:{
type: Number,
default: 0,
@@ -39,7 +31,9 @@ export default {
terminalSocket: null,
termimalRows:15,
termimalHeight:270,
minRow:0,
topMenuHeight:30,
dragHeigh:8,
minRow:1,
fontSize:15,
fontSpaceHeight:2,//一行高度=fontSize+fontSpaceHeight
obj:{
@@ -56,16 +50,6 @@ export default {
}
},
watch:{
/*
token: {
immediate:true,
handler(val){
if(val){
this.create()
}
}
},
*/
},
methods: {
prompt(term) {
@@ -80,10 +64,10 @@ export default {
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${consoleHeigt}px`;
//调整终端高度
let rows = (consoleHeigt-38)/(this.fontSize+this.fontSpaceHeight);
let rows = (consoleHeigt-this.topMenuHeight-this.dragHeigh)/(this.fontSize+this.fontSpaceHeight);
let cols = this.term.cols;
if(consoleWidth){//需要调整宽度???
cols = (consoleWidth-30)/(this.fontSize+this.fontSpaceHeight);
cols = consoleWidth/11;//目前字体，一个字母宽11
}
this.term.resize(parseInt(cols),(parseInt(rows)-this.minRow));
},
@@ -99,9 +83,9 @@ export default {
rows:this.term.rows,
};
//alert(JSON.stringify(winStyle));
this.$post('/terminal/resize?',winStyle).then(response => {
this.$post('terminal/resize',winStyle).then(response => {
if (response.code === 200) {
//this.term.fit();
this.term.fit();
//this.term.scrollToBottom();
} else {
this.$message.error(response.msg);
@@ -111,7 +95,7 @@ export default {
fullScreenConsole(isFullScreen){
this.isFullScreen = isFullScreen;
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
let height = document.body.clientHeight-30;//可视高度
let height = document.body.clientHeight-this.topMenuHeight;//可视高度
let width = document.body.clientWidth;//可视宽度
let rows = height/(this.fontSize+this.fontSpaceHeight);
rows = parseInt(rows);
@@ -124,7 +108,7 @@ export default {
height = this.termimalHeight;
//容器高度设置
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${this.termimalHeight+30}px`;
consoleBox.style.height = `${this.termimalHeight+this.topMenuHeight}px`;
rows = (height-10)/(this.fontSize+this.fontSpaceHeight);//padding 5*2
rows = parseInt(rows);
}
@@ -136,9 +120,7 @@ export default {
cols:this.term.cols,
rows:parseInt(rows),
};
//alert("full="+JSON.stringify(winStyl));
this.$post('/terminal/resize?',winStyl).then(response => {
//alert(JSON.stringify(response));
this.$post('terminal/resize',winStyl).then(response => {
if (response.code === 200) {
//this.term.fit();
//this.term.scrollToBottom();
@@ -172,14 +154,14 @@ export default {
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
let height = document.body.clientHeight;//高度
consoleBox.style.height = `${100}%`;
rows = (height-30)/(this.fontSize+this.fontSpaceHeight);
rows = (height-this.topMenuHeight)/(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}px`;
rows = (height-38)/(this.fontSize+this.fontSpaceHeight);//menu 30 ,drag 8
rows = (height-this.topMenuHeight-this.dragHeigh)/(this.fontSize+this.fontSpaceHeight);//menu 30 ,drag 8
rows = parseInt(rows);
}
let terminalContainer = document.getElementById('terminal'+this.idIndex);
@@ -203,46 +185,27 @@ export default {
}*/
});
this.term.open(terminalContainer);
//this.term.write("**************"+this.terminal.assetId);
this.term.focus();
let token = sessionStorage.getItem('nz-token');
let baseUrl = this.$axios.defaults.baseURL.replace('http','ws');
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) {
//let successBackContent = 'Connecting to';
let backContent = evt.data;
//alert(backContent+ backContent.charCodeAt(0)+"==");
/*
if(that.inputSecret){//当前为密码输入状态
}
@@ -296,75 +259,23 @@ export default {
}
}
}
//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);
};
//关闭
this.terminalSocket.onclose = () =>{
//alert('closeSocket');
//this.$emit.closeSocket();
//????????????报错sorry的，还没来得及看信息就给关闭了？？？？？？？？？？？？？？？？？？？？？？？
//this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
//报错sorry的，还没来得及看信息就关闭
this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
};
//错误
this.terminalSocket.onerror = (e) =>{
//alert('error'+e);
};
this.terminalSocket.onerror = (e) =>{};
//选中 复制
this.term.on("selection", function() {
//if (this.term.hasSelection()) {
//this.copy = this.term.getSelection();
//}
});
this.term.attachCustomKeyEventHandler(function(ev) {
//粘贴 ctrl+v
//if (ev.keyCode == 86 && ev.ctrlKey) {
//this.terminalSocket.send(new TextEncoder().encode("\x00" + this.copy));
//}
});
this.term.on("selection", function() {});
this.term.attachCustomKeyEventHandler(function(ev) { });
this.term.attach(this.terminalSocket);
this.term._initialized = true;
this.term.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
//输入
/*
this.term.onData = (data) =>{
//alert('data:'+data);
};*/
//this.term.on('key', function(key, ev) {
//alert("key=========="+key);
//this.term.write(key)//输入
//this.term.write("**************"+this.terminal.assetId);
//term.writeln(key)//输入并换行
//});
/*
this.term.prompt = () => {
this.term.write('\r\n$ ');
};
this.term.onKey(e => {
const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
if (e.domEvent.keyCode === 13) {
this.prompt(term);
} else if (e.domEvent.keyCode === 8) {
// Do not delete the prompt
if (this.term._core.buffer.x > 2) {
this.term.write('\b \b');
}
} else if (printable) {
this.term.write(e.key);
}
});*/
},
closeSocket(){
@@ -393,8 +304,6 @@ export default {
},
beforeDestroy () {
this.closeSocket();
//this.terminalSocket.close()
//this.term.destroy()
}
}
</script>