From ac8dfd95b11e237fdb9be34cfc59aaf832782277 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Thu, 5 Mar 2020 21:57:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=8A=9F=E8=83=BD=20webshell?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=201.tab=E5=A2=9E=E5=8A=A0=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=20fix:=E4=BF=AE=E6=94=B9BUG=20webshell?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=201.shell=E7=AA=97=E5=8F=A3=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E9=AB=98=E5=BA=A6=E5=90=8E=E5=85=B3=E9=97=AD=E5=86=8D?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=EF=BC=8C=E9=AB=98=E5=BA=A6=E4=B8=8D=E5=AF=B9?=
 =?UTF-8?q?=202.shell=E7=AA=97=E5=8F=A3=E6=89=93=E5=BC=80=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=EF=BC=8C=E6=8B=96=E6=8B=BD=E9=AB=98=E5=BA=A6=EF=BC=8C?=
 =?UTF-8?q?=E5=86=8D=E6=89=93=E5=BC=80=E4=B8=80=E4=B8=AA=EF=BC=8C=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E4=B8=8D=E5=AF=B9=203.=E4=BF=AE=E6=94=B9resize?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E9=97=AE=E9=A2=98=204.=E5=8E=BB=E6=8E=89shel?=
 =?UTF-8?q?l=E7=AA=97=E5=8F=A3=E9=A1=B6=E9=83=A8=E7=9A=84=E6=96=B0?=
 =?UTF-8?q?=E5=BC=80=E7=AA=97=E5=8F=A3=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/cli/console.vue  | 31 +++++--
 nezha-fronted/src/components/cli/webSSH.vue   | 92 +++++++++++++++----
 .../src/components/common/language/cn.js      |  3 +
 .../src/components/common/language/en.js      |  3 +
 4 files changed, 101 insertions(+), 28 deletions(-)

diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
index 2f23aee9d..de166f481 100644
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -38,6 +38,7 @@ export default {
       terminalSocket: null,
       termimalRows:15,
       termimalHeight:300,
+      fontSize:18,
       obj:{
         id:2
       },
@@ -64,19 +65,23 @@ export default {
       const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
       consoleBox.style.height = `${consoleHeigt}px`;
       //调整终端高度
-      let rows = (consoleHeigt-30)/18;
+      let rows = (consoleHeigt-30)/this.fontSize;
       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,
+      let width = document.body.clientWidth;//可视宽度
+      let height = parseInt(consoleBox.style.height);
+      if(height==null||!height){height=this.termimalHeight;}
+      const winStyle={
+        width:width,
+        height:height,
         cols:this.term.cols,
         rows:this.term.rows,
       };
-      this.$post('/terminal/resize?',winStyl).then(response => {
+      //alert(JSON.stringify(winStyle));
+      this.$post('/terminal/resize?',winStyle).then(response => {
         if (response.code === 200) {
           //this.term.fit();
           //this.term.scrollToBottom();
@@ -90,7 +95,7 @@ export default {
       //this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
       let height = document.body.clientHeight;//可视高度
       let width = document.body.clientWidth;//可视宽度
-      let rows = height/18;
+      let rows = height/this.fontSize;
       rows = parseInt(rows);
       if(isFullScreen){
         //容器高度设置100%
@@ -110,7 +115,7 @@ export default {
         cols:this.term.cols,
         rows:parseInt(rows),
       };
-      //alert(JSON.stringify(winStyl));
+      //alert("full="+JSON.stringify(winStyl));
       this.$post('/terminal/resize?',winStyl).then(response => {
         //alert(JSON.stringify(response));
         if (response.code === 200) {
@@ -155,7 +160,14 @@ term.toggleFullScreen();//全屏
         const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
         consoleBox.style.height = `${100}%`;
         let height = document.body.clientHeight;//可视高度
-        rows = height/18;
+        rows = height/this.fontSize;
+        rows = parseInt(rows);
+      }else{
+        //容器高度设置100%
+        const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
+        let height = this.terminal.height;//可视高度
+        consoleBox.style.height = `${height+5}px`;
+        rows = (height-30)/this.fontSize;
         rows = parseInt(rows);
       }
       let terminalContainer = document.getElementById('terminal'+this.idIndex);
@@ -283,6 +295,9 @@ term.toggleFullScreen();//全屏
       if(this.term) {
         this.term.destroy();
       }
+      //初始化console的高度
+      const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
+      consoleBox.style.height = `${this.termimalHeight}px`;
     },
   },
   mounted () {
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index c9b03e24f..060c6dcde 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -29,22 +29,35 @@
         </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
-          v-for="(item, index) in editableTabs"
+      <el-tabs v-model="editableTabsValue"
+               @tab-click="handleClick"
+               @tab-remove="removeTab"
+               :before-leave="beforeLeave"
+               style='width:100%'
+               type="border-card">
+        <el-tab-pane v-for="(item, index) in editableTabs"
           :key="item.name"
           :label="item.title"
           :name="item.name"
+           closable
         >
           <!-- tab显示的内容 -->
           <span slot="label" > <i class="el-icon-aim"></i>{{item.title}}</span>
           <my-console :terminal="item.terminal"  :ref="'console'+index"    @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen"></my-console>
         </el-tab-pane>
+        <el-tab-pane key="add" name="add">
+          <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
+        </el-tab-pane>
       </el-tabs>
+      <i style='right:70px;' @click="minScreen" class="el-icon-minus console-title-icon"></i>
+      <i style='right:38px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
+      <i style='right:8px;' @click="closeConsole" class="el-icon-close 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>
   </div>
@@ -53,7 +66,6 @@
 <script>
   import Console from './console'
   import uuidv1 from "uuid/v1";
-
   export default {
     name: 'webSSH',
     components: {
@@ -64,6 +76,9 @@
       return {
         consoleShow:false,
         isFullScreen:false,
+        initConsoleHeight:300,//只读,初始化高度
+        consoleHeight:300,
+        currentTransform:0,
         /*
         terminal: {
           //pid: 1,
@@ -76,6 +91,7 @@
         */
         //activeName:'',
         editableTabsValue: '-1',//当前显示的console
+        currentIndex:'-1',
         editableTabs: [/*
           {
           title: '用户管理',
@@ -112,6 +128,9 @@
         if(port){
           title = title+":"+port;
         }
+        if(!title){
+          title=this.$t("webshell.shellTitle");
+        }
         let width = document.body.clientWidth;//可视宽度
         const console = {
           title:title,
@@ -121,7 +140,7 @@
             cols: 225,
             rows: 200,
             width:width,
-            height:300,
+            height:this.consoleHeight,
             assetId:id,
             accountId:accountId,
             uuid:uuid,
@@ -129,6 +148,17 @@
         };
         this.editableTabsValue = newTabName;
         this.editableTabs.push(console);
+
+        setTimeout(function(){
+          let tabScroll = document.getElementsByClassName("el-tabs__nav is-top");
+          let tabViewWidth = document.getElementsByClassName("el-tabs__nav-scroll");
+          let scrollWidth = tabScroll[0].clientWidth;
+          let viewWidth = tabViewWidth[0].clientWidth;//可视宽度
+
+          if(viewWidth<scrollWidth){
+            tabScroll[0].style.transform = "translateX(" + (viewWidth-scrollWidth) + "px) ";//71(
+          }
+        },10)
       },
       show(id,host,accountId,port){
         this.addConsole(id,host,accountId,port);
@@ -154,6 +184,10 @@
 
         this.consoleShow = false;
         this.isFullScreen = false;
+
+        let targetDiv= document.getElementById('shell-service');
+        targetDiv.style.height=this.initConsoleHeight+'px';
+        this.consoleHeight = this.initConsoleHeight;
       },
       handleClick(){
 
@@ -180,6 +214,33 @@
           this.closeConsole();
         }
       },
+      /* 活动标签切换时触发 */
+      beforeLeave(currentName,oldName) {
+        var self=this;
+        //重点，如果name是add，则什么都不触发
+        if(currentName=="add"){
+          this.addTab()
+          return false
+        }else{
+          this.currentIndex=currentName;
+        }
+      },
+      addTab(targetName) {
+        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(key, keyPath);
       },
@@ -201,9 +262,9 @@
           this.$refs['console'+index][0].fullScreenConsole(this.isFullScreen);
         });
 
-        if(this.isFullScreen){
+        if(!this.isFullScreen){
           let targetDiv= document.getElementById('shell-service');
-          targetDiv.style.height='300px';
+          targetDiv.style.height=this.initConsoleHeight+'px';
         }
 
         //const dailog = document.getElementById("consoleDailog");
@@ -238,6 +299,7 @@
             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));
             });
@@ -248,21 +310,11 @@
             _this.editableTabs.forEach((tab, index) => {
               _this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height));
             });
+
+            _this.consoleHeight = parseInt(targetDiv.style.height);
+            if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
           }
         },
-      /*
-      addTab(targetName) {
-        let newTabName = ++this.tabIndex + '';
-        this.editableTabs.push({
-          title: 'New Tab',
-          name: newTabName,
-          content: 'New Tab content'
-        });
-        this.editableTabsValue = newTabName;
-      },
-      */
-
-
     },
     watch: {
 
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 66ee1e99b..048e472c7 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -37,6 +37,9 @@ const cn = {
     createPrometheusServer:'新增 prometheus server',
     createDatacenter:'新增DC'
   },
+  webshell:{
+    shellTitle:'本地 Shell',
+  },
   dashboard:{
     title:'仪表盘',
     panel:{
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index f721c87ea..65d279007 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -62,6 +62,9 @@ const en = {
       failedDetail:'Failed Detail'
     }
   },
+  webshell:{
+    shellTitle:'Local Shell',
+  },
   dashboard:{
     title:'Dashboard',
     panel:{