feat:新功能

webshell模块 1.tab增加添加按钮 fix:修改BUG webshell模块 1.shell窗口拖拽高度后关闭再打开，高度不对 2.shell窗口打开一个，拖拽高度，再打开一个，高度不对 3.修改resize参数问题 4.去掉shell窗口顶部的新开窗口按钮
2020-03-05 21:57:08 +08:00
parent 2543b2cb48
commit ac8dfd95b1
4 changed files with 101 additions and 28 deletions
--- 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 () {
--- 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: {

--- 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:{
--- 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:{