From b5c0fccdf6d85d731521b841e03c9bff90b4f312 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 10 Jan 2023 17:53:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9terminal=20login?=
 =?UTF-8?q?=E6=88=90=E5=8A=9F=E5=90=8E=20=E5=86=8D=E6=89=93=E5=BC=80?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/loading.scss        |  43 ++++++
 .../src/components/cli/consoleNew.vue         |  44 +-----
 .../src/components/cli/webSSHNew.vue          | 129 ++++++++++++++----
 .../common/globalSearch/globalSearch.vue      |   2 +-
 .../components/page/config/system/license.vue |   4 +
 5 files changed, 157 insertions(+), 65 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/loading.scss b/nezha-fronted/src/assets/css/common/loading.scss
index cec4152d9..20460c3b6 100644
--- a/nezha-fronted/src/assets/css/common/loading.scss
+++ b/nezha-fronted/src/assets/css/common/loading.scss
@@ -259,3 +259,46 @@ loading-hide{
   }
 }
 /** END of circle3 */
+/**===== circle3 =====*/
+.circleMin {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 50px;
+  width: 50px;
+  margin: -25px 0 0 -25px;
+  border: 4px rgba(0, 0, 0, 0.25) solid;
+  border-top: 4px black solid;
+  border-right: 4px black solid;
+  border-bottom: 4px black solid;
+  border-radius: 50%;
+  -webkit-animation: spinMin 1s infinite linear;
+  animation: spinMin 1s infinite linear;
+}
+
+@-webkit-keyframes spinMin {
+  from {
+    -webkit-transform: rotate(0deg) scale(0.4);
+    transform: rotate(0deg) scale(0.4);
+  }
+  to {
+    -webkit-transform: rotate(359deg) scale(0.4);
+    transform: rotate(359deg) scale(0.4);
+  }
+}
+@keyframes spinMin {
+  from {
+    -webkit-transform: rotate(0deg) scale(0.4);
+    transform: rotate(0deg) scale(0.4);
+    -webkit-transform: rotate(0deg) scale(0.4);
+    transform: rotate(0deg) scale(0.4);
+  }
+  to {
+    -webkit-transform: rotate(359deg) scale(0.4);
+    transform: rotate(359deg) scale(0.4);
+    -webkit-transform: rotate(359deg) scale(0.4);
+    transform: rotate(359deg) scale(0.4);
+  }
+}
+/** END of circle3 */
diff --git a/nezha-fronted/src/components/cli/consoleNew.vue b/nezha-fronted/src/components/cli/consoleNew.vue
index 78ae2a6de..bf1dfa1c0 100644
--- a/nezha-fronted/src/components/cli/consoleNew.vue
+++ b/nezha-fronted/src/components/cli/consoleNew.vue
@@ -107,42 +107,7 @@ export default {
       })
       this.term.open(terminalContainer)
       this.term.focus()
-      const params = {
-        width: this.terminal.width,
-        height: this.terminal.height,
-        cols: this.terminal.cols,
-        rows: this.terminal.rows,
-        host: this.$loadsh.get(this.terminal, 'custom.host', ''),
-        port: this.$loadsh.get(this.terminal, 'custom.port', ''),
-        assetId: this.$loadsh.get(this.terminal, 'assetId', ''),
-        accountId: this.$loadsh.get(this.terminal, 'accountId', ''),
-        authProtocol: this.$loadsh.get(this.terminal, 'custom.authProtocol', ''),
-        authProtocolPort: this.$loadsh.get(this.terminal, 'custom.authProtocolPort', ''),
-        authType: this.$loadsh.get(this.terminal, 'custom.authType', ''),
-        authUsername: this.$loadsh.get(this.terminal, 'custom.authUsername', ''),
-        authPin: this.$loadsh.get(this.terminal, 'custom.authPin', ''),
-        authPriKey: this.$loadsh.get(this.terminal, 'custom.authPriKey', ''),
-        authUserTip: this.$loadsh.get(this.terminal, 'custom.authUserTip', ''),
-        authPinTip: this.$loadsh.get(this.terminal, 'custom.authPinTip', '')
-      }
-      this.$post('/terminal/login', params).then(res => {
-        if (res.code == 200) {
-          this.terminal.uuid = res.data.uuid
-          this.$forceUpdate()
-          this.terminal.userName = res.data.authUsername + '@' + res.data.host
-          this.host = res.data.host
-          this.create()
-        } else {
-          if (res.data) {
-            this.terminal.uuid = res.data.uuid
-            this.terminal.userName = res.data.authUsername + '@' + res.data.host
-            this.host = res.data.host
-          }
-          params.name = this.terminal.name
-          this.$emit('loginFail', params)
-          this.$message.error(res.msg)
-        }
-      })
+      this.create()
     },
     create () {
       const that = this
@@ -172,6 +137,7 @@ export default {
       this.terminalSocket.onopen = () => {
         this.terminal.isLogin = true
         this.isInit = true
+        this.term.focus()
       }
       // 登录后，你输入的内容从后台服务返回
       this.term.on('data', function (data) {
@@ -288,9 +254,9 @@ export default {
     reconnect () {
       this.terminal.isLogin = false
       this.closeSocket()
-      this.term.off('selection')
-      this.term.off('data')
-      this.beforeCreate()
+      setTimeout(()=>{
+        this.beforeCreate()
+      },100)
     },
     closeFileDir () {
       this.showFileDir(false)
diff --git a/nezha-fronted/src/components/cli/webSSHNew.vue b/nezha-fronted/src/components/cli/webSSHNew.vue
index ba841e95c..aa95a10c6 100644
--- a/nezha-fronted/src/components/cli/webSSHNew.vue
+++ b/nezha-fronted/src/components/cli/webSSHNew.vue
@@ -88,7 +88,7 @@
       </el-tab-pane>
     </el-tabs>
     <!--弹窗-->
-    <el-dialog :modal-append-to-body='false' :show-close="true" :visible.sync="assetShow" @close="closeAssetCustom" class="nz-dialog webshell-selectAsset" width="620px">
+    <el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="assetShow" @close="closeAssetCustom" class="nz-dialog webshell-selectAsset" width="620px">
       <div slot="title">{{$t('webshell.selAsset')}}</div>
       <selectTable ref="selectTable" v-model="assetContent.assetId" :params="selectPageParams" :columns="columns" :tableFormat="tableFormat" api="asset/asset" value-key="id" search-key="manageIp">
         <template v-slot:searchLeft>
@@ -114,13 +114,13 @@
         <button class="footer__btn footer__btn--light" @click="assetShow=false">
           <span>{{$t('overall.cancel')}}</span>
         </button>
-        <button class="footer__btn" :class="{'webshell-btn-disable':!assetContent.assetId}" :disabled="prevent_opt.save||!assetContent.assetId" @click.prevent="connect">
+        <button class="footer__btn" :class="{'webshell-btn-disable': !assetContent.assetId}" v-my-loading:circleMin="prevent_opt.save" :disabled="prevent_opt.save||!assetContent.assetId" @click.prevent="connect">
           <span>{{$t('webshell.connect')}}</span>
         </button>
       </div>
     </el-dialog>
     <!-- 自定义连接 start -->
-    <el-dialog :modal-append-to-body='false' :show-close="true" :visible.sync="customShow" @close="closeAssetCustom" class="nz-dialog" width="620px" destroy-on-close>
+    <el-dialog :modal-append-to-body='false' :show-close="true" :z-index="1000" :visible.sync="customShow" @close="closeAssetCustom" class="nz-dialog" width="620px" destroy-on-close>
       <div slot="title">{{$t('webshell.connect')}}</div>
       <div >
         <el-form label-width="120px" size="small" :model="customConnect" label-position = "top" :rules=" customConnect.authProtocol ===2 ? rulesCustom2: rulesCustom" ref="customConnect" v-my-loading="assetLoading" class="custom">
@@ -173,7 +173,7 @@
             <button id="asset-edit-cancel" @click="customShow=false" class="footer__btn footer__btn--light" type="button">
               <span>{{$t('overall.cancel')}}</span>
             </button>
-            <button id="asset-edit-save" :disabled="prevent_opt.save" class="footer__btn" @click.prevent="connect" type="button">
+            <button id="asset-edit-save" v-my-loading:circleMin="prevent_opt.save" :disabled="prevent_opt.save" class="footer__btn" @click.prevent="connect" type="button">
               <span>{{$t('webshell.connect')}}</span>
             </button>
           </div>
@@ -188,6 +188,7 @@
 import terminal from './consoleNew'
 import selectTable from '@/components/common/selectTable'
 import { host, port } from '@/components/common/js/validate'
+import { requestsArr } from '@/http'
 export default {
   name: 'webSSH',
   components: {
@@ -357,7 +358,8 @@ export default {
       assetContent: {
         assetId: ''
       },
-      customShow: false
+      customShow: false,
+      connectLoading: false
     }
   },
   methods: {
@@ -520,16 +522,12 @@ export default {
       if (this.assetShow) {
         this.$get('asset/asset/' + this.assetContent.assetId).then(res => {
           const asset = res.data
-          this.addConsole(asset.id, asset.manageIp, '', '', 'asset')
-          this.assetShow = false
-          this.prevent_opt.save = false
+          this.addConsole(asset.id, asset.manageIp, '', '', 'asset', asset)
         })
       } else {
         this.$refs.customConnect.validate((valid) => {
           if (valid) {
             this.addConsole('', this.customConnect.host, '', this.customConnect.port, 'custom')
-            this.customShow = false
-            this.prevent_opt.save = false
           } else {
             this.prevent_opt.save = false
           }
@@ -576,8 +574,10 @@ export default {
         authProtocolPort: '',
         authProtocol: 1
       }
+      this.prevent_opt.save = false
+      requestsArr.forEach(xhr => xhr.cancel('cancel'))
     },
-    addConsole (id, host, accountId, port, type) {
+    addConsole (id, host, accountId, port, type, asset) {
       if (!id) { id = '' }
       if (!host) { host = '' }
       if (!accountId) { accountId = '' }
@@ -609,7 +609,8 @@ export default {
           uuid: uuid,
           type: type,
           username: '',
-          isLogin: false
+          isLogin: false,
+          host: ''
         }
       }
       if (type === 'custom') {
@@ -627,19 +628,58 @@ export default {
           authProtocol: encodeURIComponent(this.customConnect.authProtocol)
         }
       }
-      if (id) {
-        this.$get('/asset/asset/' + id).then(res => {
-          console.terminal.terminalType = res.data.type.authProtocol
-          console.terminal.username = ''
-          this.editableTabsValue = newTabName
-          this.editableTabs.push(console)
-        })
-      } else {
-        console.terminal.username = ''
-        console.terminal.terminalType = this.customConnect.authProtocol
-        this.editableTabsValue = newTabName
-        this.editableTabs.push(console)
+      const terminal = console.terminal
+      const params = {
+        width: terminal.width,
+        height: terminal.height,
+        cols: terminal.cols,
+        rows: terminal.rows,
+        host: this.$loadsh.get(terminal, 'custom.host', ''),
+        port: this.$loadsh.get(terminal, 'custom.port', ''),
+        assetId: this.$loadsh.get(terminal, 'assetId', ''),
+        accountId: this.$loadsh.get(terminal, 'accountId', ''),
+        authProtocol: this.$loadsh.get(terminal, 'custom.authProtocol', ''),
+        authProtocolPort: this.$loadsh.get(terminal, 'custom.authProtocolPort', ''),
+        authType: this.$loadsh.get(terminal, 'custom.authType', ''),
+        authUsername: this.$loadsh.get(terminal, 'custom.authUsername', ''),
+        authPin: this.$loadsh.get(terminal, 'custom.authPin', ''),
+        authPriKey: this.$loadsh.get(terminal, 'custom.authPriKey', ''),
+        authUserTip: this.$loadsh.get(terminal, 'custom.authUserTip', ''),
+        authPinTip: this.$loadsh.get(terminal, 'custom.authPinTip', '')
       }
+      this.$post('/terminal/login', params).then(res => {
+        if (res.code == 200) {
+          terminal.uuid = res.data.uuid
+          this.$forceUpdate()
+          terminal.userName = res.data.authUsername + '@' + res.data.host
+          terminal.host = res.data.host
+          if (id) {
+            console.terminal.terminalType = asset.type.authProtocol
+            console.terminal.username = ''
+            this.editableTabsValue = newTabName
+            this.editableTabs.push(console)
+            this.assetShow = false
+          } else {
+            console.terminal.username = ''
+            console.terminal.terminalType = this.customConnect.authProtocol
+            this.editableTabsValue = newTabName
+            this.editableTabs.push(console)
+            this.customShow = false
+          }
+          this.prevent_opt.save = false
+        } else {
+          this.prevent_opt.save = false
+          if (res === 'cancel') return
+          if (res.data) {
+            terminal.uuid = res.data.uuid
+            terminal.userName = res.data.authUsername + '@' + res.data.host
+            this.host = res.data.host
+          }
+          params.name = terminal.name
+          // this.$emit('loginFail', params)
+          this.$message.error(res.msg)
+        }
+      })
     },
     duplicate (item, index) {
       if (item.terminal.assetId) {
@@ -685,10 +725,49 @@ export default {
       }
     },
     reconnect (item, index) {
-      this.$refs['console' + index][0].reconnect()
       if (this.$refs['popover' + index] && this.$refs['popover' + index][0]) {
         this.$refs['popover' + index][0].doClose()
       }
+      const terminal = item.terminal
+      const params = {
+        width: terminal.width,
+        height: terminal.height,
+        cols: terminal.cols,
+        rows: terminal.rows,
+        host: this.$loadsh.get(terminal, 'custom.host', ''),
+        port: this.$loadsh.get(terminal, 'custom.port', ''),
+        assetId: this.$loadsh.get(terminal, 'assetId', ''),
+        accountId: this.$loadsh.get(terminal, 'accountId', ''),
+        authProtocol: this.$loadsh.get(terminal, 'custom.authProtocol', ''),
+        authProtocolPort: this.$loadsh.get(terminal, 'custom.authProtocolPort', ''),
+        authType: this.$loadsh.get(terminal, 'custom.authType', ''),
+        authUsername: this.$loadsh.get(terminal, 'custom.authUsername', ''),
+        authPin: this.$loadsh.get(terminal, 'custom.authPin', ''),
+        authPriKey: this.$loadsh.get(terminal, 'custom.authPriKey', ''),
+        authUserTip: this.$loadsh.get(terminal, 'custom.authUserTip', ''),
+        authPinTip: this.$loadsh.get(terminal, 'custom.authPinTip', '')
+      }
+      this.$post('/terminal/login', params).then(res => {
+        if (res.code == 200) {
+          terminal.uuid = res.data.uuid
+          this.$forceUpdate()
+          terminal.userName = res.data.authUsername + '@' + res.data.host
+          terminal.host = res.data.host
+          this.prevent_opt.save = false
+          this.$refs['console' + index][0].reconnect()
+        } else {
+          this.prevent_opt.save = false
+          if (res === 'cancel') return
+          if (res.data) {
+            terminal.uuid = res.data.uuid
+            terminal.userName = res.data.authUsername + '@' + res.data.host
+            this.host = res.data.host
+          }
+          params.name = terminal.name
+          // this.$emit('loginFail', params)
+          this.$message.error(res.msg)
+        }
+      })
     },
     showFileDir (item, index) {
       this.$refs['console' + index][0].showFileDir(true)
diff --git a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
index 9ce16e7f0..f05975576 100644
--- a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
+++ b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
@@ -2,7 +2,7 @@
   <div class="global-search-bac" v-if="globalShow" @click.self="close">
     <div class="global-search-box" :class="firstShow? '' : 'search-after'" @click.self="close">
       <div class="global-search-input" :class="firstShow? '' : 'search-after'">
-        <i class="nz-icon nz-icon-search" v-my-loading:circle3.scaleMin.icon="loading"></i>
+        <i class="nz-icon nz-icon-search" v-my-loading:circleMin.icon="loading"></i>
         <el-input v-model="searchStr" @input="searchAll" ref="searchStr" :placeholder="$t('globalSearch.placeholder')" @keydown.native="inputKeydown" clearable></el-input>
         <div @click="close" class="global-search-cancel">
           {{$t('overall.cancel')}}
diff --git a/nezha-fronted/src/components/page/config/system/license.vue b/nezha-fronted/src/components/page/config/system/license.vue
index 0e48d3cd9..1ecd09c7a 100644
--- a/nezha-fronted/src/components/page/config/system/license.vue
+++ b/nezha-fronted/src/components/page/config/system/license.vue
@@ -436,6 +436,10 @@ export default {
   mounted () {
     this.licenseGetData()
     this.licenseGetStatus()
+    window.addEventListener('resize', this.getLayout)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.getLayout)
   }
 }
 </script>