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>

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

@@ -87,9 +87,10 @@
}
.el-tabs__item {
height:30px;
margin-top: -2px !important;
margin-top: -1px !important;
line-height: 30px;
font-size:14px !important;
font-weight:normal;
}
.el-tabs__nav-prev {
@@ -98,6 +99,12 @@
.el-tabs__nav-next{
line-height: 30px;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
border-top: solid 2px $global-text-color-active;
height: 29px !important;
}
.el-menu--horizontal>.el-submenu .el-submenu__title {
height: 29px;
line-height: 29px;

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

@@ -7,6 +7,7 @@
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
<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>
<el-submenu index="1-1">
@@ -21,8 +22,8 @@
<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;">
</el-submenu>-->
<el-submenu index="2" style="width:50px;margin-left:40px;">
<template slot="title" ><i class="el-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>
@@ -140,7 +141,6 @@
<script>
import Console from './console'
import uuidv1 from "uuid/v1";
import axios from 'axios'
export default {
name: 'webSSH',
@@ -253,6 +253,8 @@
this.consoleHeight = this.initConsoleHeight;
this.$store.commit('closeConsole');
window.removeEventListener('resize',this.windowChange);
},
handleClick(){
@@ -284,9 +286,6 @@
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
//关闭此console的链接
//?????????????????
this.$store.commit('removeConsole');
if(this.editableTabs.length<=0){
@@ -318,19 +317,6 @@
addTab(targetName) {
this.$store.commit('addConsoleNum');
this.addConsole();
//<div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(-1207.78px);">
/*
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName;
this.currentIndex=newTabName;
*/
},
handleSelect(key, keyPath) {
//alert(keyPath);
@@ -351,22 +337,14 @@
},
showUploadBox(){
this.uploadBox.showUpload=true;
//this.uploadBox.width='600px';
},
/*
handleChange(file,fileList) {
this.uploadFile.file = file.raw;
},
*/
handleChange:function(file,fileList){
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){
let form = new FormData();
form.append("uuid", this.currentUuid);
form.append("file", this.uploadFile.file.raw);
@@ -379,7 +357,6 @@
this.$message.error(res.msg);
}
})
//}
},
showDownloadBox(){
this.downloadBox.showDownload=true;
@@ -403,17 +380,9 @@
a.remove(); //将a标签移除
}
this.closeDownloadDialog();
/*
if(res.code == 200 ){
}else{
this.$message.error(res.msg);
}*/
})
},
/*upload--download end*/
minScreen(){
this.consoleShow = false;
this.$store.commit('minConsole');
@@ -445,9 +414,6 @@
}
});
}
//const dailog = document.getElementById("consoleDailog");
//dailog.style.width = `${100}%`;
},
dragEagle:function(e){

11
nezha-fronted/src/main.js
View File

@@ -133,6 +133,10 @@ Vue.directive("scrollBar", {
// 启用x轴后不让原生滚动条出来作乱
vnode.context.$nextTick(() => {
if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
}
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
@@ -140,6 +144,8 @@ Vue.directive("scrollBar", {
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
//el上挂一份属性
el_scrollBar(el);
});
const rules = ["fixed", "absolute", "relative"];
@@ -150,8 +156,6 @@ Vue.directive("scrollBar", {
)}`
);
}
//el上挂一份属性
el_scrollBar(el);
},
componentUpdated(el, binding, vnode, oldVnode) {
const { arg } = binding;
@@ -161,6 +165,9 @@ Vue.directive("scrollBar", {
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
}else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
}
setTimeout(() => {
el.classList.add("ps");