feat:新增功能

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

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

@@ -2,36 +2,32 @@
   @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-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">
-              <template slot="title">文字大小</template>
-              <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-3">中</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-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">
+            <template slot="title">文字大小</template>
+            <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-3">中</el-menu-item>
+            <el-menu-item index="1-1-4">大</el-menu-item>
           </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 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-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>
-<!--
-      <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 + '';