feat:新增功能

webshell模块
1.拖拽调整高度功能
2.全屏功能
3.最小化功能
4.调整样式为固定到界面底部（参考阿里云实现）

nezha-fronted/src/components/cli/console.vue

@@ -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);
+      this.term = new Terminal({
-      //alert('==='+JSON.stringify(terminalContainer));
+        rows:rows,//15行大概300px高，无法设置heigh，只能设置rows
-      this.term = new Terminal(
+        //cursorBlink:true,//光标闪烁
-        /*{
+        cursorStyle:'block', // 光标样式  null | 'block' | 'underline' | 'bar'
-        width:500,
+        //bellStyle:'sound',
-        height:400,
+        disableStdin:false,//是否应禁用输入
-        cols:225,
+        //scrollback: 800, //回滚
-        rows:200
+        //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(){

nezha-fronted/src/components/cli/webSSH.scss

@@ -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%;
 }

nezha-fronted/src/components/cli/webSSH.vue

@@ -2,36 +2,32 @@
   @import './webSSH.scss';
 </style>
 <template>
-  <el-dialog class="console-dialog"
+  <div id="shell-service"  data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen}" v-show="consoleShow">
-             :visible.sync="consoleShow"
+    <div id="shell-service-resize-mask"></div>
-             width="70%"
+    <div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
-             :customClass="{'dailog-custom' :isFullScreen == true}"
-             @close="closeDailog"
-             @opened="initDialog">
-
     <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;">
+        <el-submenu index="1"  style="width:40px;">
-            <template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 9px;"></i></template>
+          <template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 9px;"></i></template>
-            <el-submenu index="1-1">
+          <el-submenu index="1-1">
-              <template slot="title">文字大小</template>
+            <template slot="title">文字大小</template>
-              <el-menu-item index="1-1-1">最小</el-menu-item>
+            <el-menu-item index="1-1-1">最小</el-menu-item>
-              <el-menu-item index="1-1-2">小</el-menu-item>
+            <el-menu-item index="1-1-2">小</el-menu-item>
-              <el-menu-item index="1-1-3">中</el-menu-item>
+            <el-menu-item index="1-1-3">中</el-menu-item>
-              <el-menu-item index="1-1-4">大</el-menu-item>
+            <el-menu-item index="1-1-4">大</el-menu-item>
-            </el-submenu>
-            <el-submenu index="1-2" >
-              <template slot="title">字体</template>
-              <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 index="1-2" >
-            <template slot="title" ><i class="el-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 9px;"></i></template>
+            <template slot="title">字体</template>
-            <el-menu-item index="2-1" @click="download">下载</el-menu-item>
+            <el-menu-item index="1-2-1">Monosapace</el-menu-item>
-            <el-menu-item index="2-2" @click="upload">上传</el-menu-item>
+            <el-menu-item index="1-2-2">Courier New</el-menu-item>
           </el-submenu>
-       </el-menu>
+        </el-submenu>
+        <el-submenu index="2" style="width:50px;">
+          <template slot="title" ><i class="el-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 9px;"></i></template>
+          <el-menu-item index="2-1" @click="download">下载</el-menu-item>
+          <el-menu-item index="2-2" @click="upload">上传</el-menu-item>
+        </el-submenu>
+      </el-menu>
 
       <el-tabs v-model="editableTabsValue" @tab-click="handleClick" @tab-remove="removeTab"  closable style='width:100%' type="border-card">
         <el-tab-pane
@@ -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>
-<!--
+      <i style='right:103px;' @click="minScreen" class="el-icon-minus console-title-icon"></i>
-      <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: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,
+            name:newTabName,
-            rows: 800,
+            cols: 225,
-            width:500,
+            rows: 200,
-            height:400,
+            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 + '';