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

feat:新增功能

Browse Source 
webshell模块
1.拖拽调整高度功能
2.全屏功能
3.最小化功能
4.调整样式为固定到界面底部（参考阿里云实现）
This commit is contained in:
hanyuxia
2020-03-04 22:01:06 +08:00
parent e8b960e92b
commit 6d255e1631
3 changed files with 352 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
<style scoped>
.console{
height:405px;
height:305px;
background-color: black;
}
</style>
<template>
<div class="console" >
<div class="console" :id="'ternimalContainer'+idIndex">
<div :id="'terminal'+idIndex"></div>
</div>
</template>
@@ -23,16 +23,21 @@ export default {
accountId:0,
uuid:'aaadwdwd',*/
},
idIndex:{
type: Number,
default: 0,
},
isFullScreen:{
type: Boolean,
default: false,
},
},
data () {
return {
term: null,
terminalSocket: null,
termimalRows:15,
termimalHeight:300,
obj:{
id:2
},
@@ -51,42 +56,224 @@ export default {
*/
},
methods: {
prompt(term) {
term.write('\r\n ');//term.write('\r\n~$ ');
},
resizeConsole(consoleHeigt){
//调整终端容器高度
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${consoleHeigt}px`;
//调整终端高度
let rows = (consoleHeigt-30)/18;
rows = parseInt(rows);
this.term.resize(this.term.cols,rows);
},
resizeServiceConsole(consoleHeigt){
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
const winStyl={
width:consoleBox.style.width,
height:consoleBox.style.height,
cols:this.term.cols,
rows:this.term.rows,
};
this.$post('/terminal/resize?',winStyl).then(response => {
if (response.code === 200) {
//this.term.fit();
//this.term.scrollToBottom();
} else {
this.$message.error(response.msg);
}
});
},
fullScreenConsole(isFullScreen){
this.isFullScreen = isFullScreen;
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
let height = document.body.clientHeight;//可视高度
let width = document.body.clientWidth;//可视宽度
let rows = height/18;
rows = parseInt(rows);
if(isFullScreen){
//容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${100}%`;
}else {
rows = this.termimalRows;
height = this.termimalHeight;
//容器高度设置
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${this.termimalHeight}px`;
}
this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows);
const winStyl={
width:width,
height:height,
cols:this.term.cols,
rows:parseInt(rows),
};
//alert(JSON.stringify(winStyl));
this.$post('/terminal/resize?',winStyl).then(response => {
//alert(JSON.stringify(response));
if (response.code === 200) {
//this.term.fit();
//this.term.scrollToBottom();
} else {
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)
windowChange(){
this.term.fit();
this.term.scrollToBottom();
}
// 关闭时,取消监听
websocket.onclose = function(evt) {
console.log("close", evt);
window.removeEventListener('resize',this.windowChange)
}; */
},
create(){
let that = this;
let rows = this.termimalRows;
if(this.isFullScreen){
//容器高度设置100%
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
consoleBox.style.height = `${100}%`;
let height = document.body.clientHeight;//可视高度
rows = height/18;
rows = parseInt(rows);
}
let terminalContainer = document.getElementById('terminal'+this.idIndex);
//alert('id='+'terminal'+this.idIndex);
//alert('==='+JSON.stringify(terminalContainer));
this.term = new Terminal(
/*{
width:500,
height:400,
cols:225,
rows:200
}*/);
this.term = new Terminal({
rows:rows,//15行大概300px高，无法设置heigh，只能设置rows
//cursorBlink:true,//光标闪烁
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
//bellStyle:'sound',
disableStdin:false,//是否应禁用输入
//scrollback: 800, //回滚
//tabStopWidth: 8, //制表宽度
//screenKeys: true//
/*
theme:{
foreground:'yellow',//字体
background:'#060101',//背景色
cursor:'help',//鼠标
}*/
});
this.term.open(terminalContainer);
//this.term.write("**************"+this.terminal.assetId);
//this.term.focus();
this.term.focus();
let token = sessionStorage.getItem('nz-token');
let url = "ws://192.168.40.247:8080/nz-admin/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 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);
// this.terminalSocket = new WebSocket("ws://192.168.41.101:8088/nz-admin/terminal.ws?width=1600&height=1005&cols=225&rows=58&token="+this.token);
//连接成功
this.terminalSocket.onopen = () =>{
//alert('open');
//this.term.write("22222*444555*************"+this.terminal.assetId);
};
//返回
this.terminalSocket.onmessage = function(evt) {
//alert('socketmessage='+evt.data);
//alert('back='+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);//应该调用父窗口
};
this.terminalSocket.ondata = (data) =>{
//alert('data:'+data);
};
//错误
this.terminalSocket.onerror = (e) =>{
//alert('error'+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.attach(this.terminalSocket);
this.term._initialized = true;
this.term.fit();
this.term.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
//输入
/*
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)//输入
//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(){

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

@@ -1,5 +1,60 @@
#shell-service {
border-top: 1px solid #aaa;
width: 100%;
left: 0;
position: fixed;
bottom: 0;
background: #fff;
z-index: 1050;
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;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
justify-content: center;
background-color: #eaeaea;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
position: relative;
z-index: 2;
font-size: 20px;
line-height: 8px;
color: #5f6368;
}
.shell-iconfont {
font-family: "cloudshell-scripts-iconfont";
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.shell-service-max {
height: 100% !important;
position: fixed !important;
top: 0;
bottom: 0;
}
/*-------*/
.console-dialog {
.menu {
}
@@ -20,6 +75,7 @@
.el-dialog {
.el-dialog__body{
padding: 0px !important;
overflow-x:hidden !important;/*防止console窗口x轴出现滚动条*/
}
.el-dialog__header{
padding: 0px !important;
@@ -55,8 +111,6 @@
background-color:#FFF !important;
}
}
.dailog-custom{
width:100%;
}

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

@@ -2,15 +2,11 @@
@import './webSSH.scss';
</style>
<template>
<el-dialog class="console-dialog"
:visible.sync="consoleShow"
width="70%"
:customClass="{'dailog-custom' :isFullScreen == true}"
@close="closeDailog"
@opened="initDialog">
<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;'>
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;'>
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border: 1px solid #DCDFE6;'>
<el-submenu index="1" style="width:40px;">
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 9px;"></i></template>
<el-submenu index="1-1">
@@ -42,22 +38,16 @@
>
<!-- tab显示的内容 -->
<span slot="label" > <i class="el-icon-aim"></i>{{item.title}}</span>
<my-console :terminal="item.terminal" :ref="'console'+index" :idIndex="index"></my-console>
<my-console :terminal="item.terminal" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen"></my-console>
</el-tab-pane>
</el-tabs>
<!--
<el-button size='mini' style='position: absolute;right:50px;top:5px;'>设置</el-button>
<button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
-->
<i style='right:103px;' class="el-icon-minus console-title-icon"></i>
<i style='right:103px;' @click="minScreen" class="el-icon-minus console-title-icon"></i>
<i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
<i style='right:8px;' @click="closeConsole" class="el-icon-close console-title-icon"></i>
<!--el-icon-setting el-icon-minus el-icon-full-screen el-icon-copy-document-->
</div>
</el-dialog>
</div>
</template>
<script>
@@ -122,14 +112,16 @@
if(port){
title = title+":"+port;
}
let width = document.body.clientWidth;//可视宽度
const console = {
title:title,
name:newTabName,
terminal: {
cols: 825,
rows: 800,
width:500,
height:400,
name:newTabName,
cols: 225,
rows: 200,
width:width,
height:300,
assetId:id,
accountId:accountId,
uuid:uuid,
@@ -161,6 +153,7 @@
this.tabIndex = -1
this.consoleShow = false;
this.isFullScreen = false;
},
handleClick(){
@@ -196,12 +189,67 @@
upload(){
//alert('upload');
},
minScreen(){
this.consoleShow = false;
},
fullScreen(){
isFullScreen = true;
//dialog全屏
this.isFullScreen = !this.isFullScreen;
//所有的console全屏
this.editableTabs.forEach((tab, index) => {
this.$refs['console'+index][0].fullScreenConsole(this.isFullScreen);
});
if(this.isFullScreen){
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height='300px';
}
//const dailog = document.getElementById("consoleDailog");
//dailog.style.width = `${100}%`;
},
dragEagle:function(e){
var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
//得到点击时该容器的宽高：
var targetDivHeight=targetDiv.offsetHeight;
var startY=e.clientY;
var _this=this;
document.onmousemove=function(e){
e.preventDefault();
//得到鼠标拖动的宽高距离：取绝对值
var distY=Math.abs(e.clientY-startY);
//往上方拖动：
if( e.clientY < startY){
targetDiv.style.height=targetDivHeight+distY+'px';
}
//往下方拖动：
if (e.clientY > startY) {
targetDiv.style.height=(targetDivHeight-distY)+'px';
}
let height = document.body.clientHeight;//可视高度
if(parseInt(targetDiv.style.height)>=height){
targetDiv.style.height=height+'px';
}
if(parseInt(targetDiv.style.height)<=10){
targetDiv.style.height=10+'px';
}
_this.editableTabs.forEach((tab, index) => {
_this.$refs['console'+index][0].resizeConsole(parseInt(targetDiv.style.height));
});
}
document.onmouseup=function(){
document.onmousemove=null;
_this.editableTabs.forEach((tab, index) => {
_this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height));
});
}
},
/*
addTab(targetName) {
let newTabName = ++this.tabIndex + '';