From 5e97621b182ac1ffcf15888685ea69e8878dc801 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 11 Aug 2023 10:43:55 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/cli/terminal.vue | 23 ++++++++----
 .../components/common/bottomBox/bottomBox.vue |  6 +++-
 .../bottomBox/tabs/terminalLogMonitorTab.vue  | 36 +++++++------------
 .../bottomBox/tabs/terminalLogRecordTab.vue   | 12 +++++--
 .../src/components/common/js/tools.js         |  1 -
 5 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/nezha-fronted/src/components/cli/terminal.vue b/nezha-fronted/src/components/cli/terminal.vue
index 911720836..5157ba1a9 100644
--- a/nezha-fronted/src/components/cli/terminal.vue
+++ b/nezha-fronted/src/components/cli/terminal.vue
@@ -53,40 +53,49 @@
     </div>
     <!--弹窗-->
     <el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="personalization" @close="personalization = false" class="nz-dialog webshell-selectAsset" width="650px">
-      <div slot="title">{{$t('webshell.selAsset')}}</div>
+      <div slot="title">{{$t('terminal.personal')}}</div>
       <div>
         <el-form v-model="newTerminalSetting" label-width="180px" size="small" ref="terminalForm"  :validate-on-rule-change="false">
-          <div class="system-title">{{$t('terminal.render')}}</div>
-          <el-form-item :label="$t('waterMaker')" prop="watermark">
+          <div class="system-title" style="padding-top: 15px">{{$t('terminal.render')}}</div>
+          <el-form-item :label="$t('terminal.waterMaker')" prop="watermark">
             <el-switch v-model="newTerminalSetting.watermark" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change" size="small">
             </el-switch>
+            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.waterMakerInfo')}}</div>
           </el-form-item>
           <el-form-item :label="$t('terminal.scrollbackLines')" prop="scrollbackLines">
-            <el-input-number :min="1" :precision="0" :controls="false" :placeholder="'默认25000'" v-model="newTerminalSetting.scrollbackLines" size="small"></el-input-number>
+            <el-input-number :min="1" :precision="0" :controls="false" :placeholder="'默认25000'" v-model="newTerminalSetting.scrollbackLines" size="small">
+            </el-input-number>
+            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.scrollbackLinesInfo')}}</div>
           </el-form-item>
-          <div class="system-title">{{$t('terminal.mouse')}}</div>
+          <div class="system-title system-title-border" style="width: 100%;margin-top: 50px">{{$t('terminal.mouse')}}</div>
           <el-form-item :label="$t('terminal.rightClick')" prop="rightClick">
             <el-radio-group  v-model="newTerminalSetting.rightClick" size="small">
               <el-radio-button label="none">{{$t('project.topology.none')}}</el-radio-button>
               <el-radio-button label="menu">{{$t('terminal.menu')}}</el-radio-button>
               <el-radio-button label="paste">{{$t('terminal.paste')}}</el-radio-button>
             </el-radio-group>
+<!--            <div class="el-form-item__tip" style="margin: 0">{{$t('config.system.basic.pinPolicyValue')}}</div>-->
           </el-form-item>
           <el-form-item :label="$t('terminal.wordSeparator')" prop="wordSeparator">
-            <el-input size="small" v-model="newTerminalSetting.wordSeparator"></el-input>
+            <el-input size="small" v-model="newTerminalSetting.wordSeparator">
+            </el-input>
+            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.wordSeparatorInfo')}}</div>
           </el-form-item>
-          <div class="system-title">{{$t('terminal.clipboard')}}</div>
+          <div class="system-title system-title-border" style="width: 100%;margin-top: 50px">{{$t('terminal.clipboard')}}</div>
           <el-form-item :label="$t('terminal.copySelect')" prop="copyOnSelect">
             <el-switch v-model="newTerminalSetting.copyOnSelect" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
             </el-switch>
+<!--            <div class="el-form-item__tip" style="margin: 0">{{$t('config.system.basic.pinPolicyValue')}}</div>-->
           </el-form-item>
           <el-form-item :label="$t('terminal.copyFormatting')" prop="copyWithFormatting">
             <el-switch v-model="newTerminalSetting.copyWithFormatting" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
             </el-switch>
+<!--            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.copyFormattingInfo')}}</div>-->
           </el-form-item>
           <el-form-item :label="$t('terminal.copyTrimEnd')" prop="copyTrimEnd">
             <el-switch v-model="newTerminalSetting.copyTrimEnd" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
             </el-switch>
+            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.copyTrimEndInfo')}}</div>
           </el-form-item>
         </el-form>
       </div>
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index d80a3a41d..ccd66098f 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -28,7 +28,7 @@
         <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-cmd-tab>
         <terminal-log-sftp-tab v-if="from === fromRoute.terminalLog && targetTab === 'sftpTab' && obj.protocol == 'SSH'" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-sftp-tab>
         <terminal-log-record-tab v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" ref="reminalLogRecordTab" :from="from" :obj="obj" :tabs="hasTerminalLogTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-record-tab>
-        <terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></terminal-log-monitor-tab>
+        <terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" ref="reminalLogMonitorTab" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></terminal-log-monitor-tab>
 
         <asset-tab v-if="from === fromRoute.dc && targetTab === 'asset'" :tabs="tabs.dc.asset" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></asset-tab>
 
@@ -409,6 +409,10 @@ export default {
         setTimeout(() => {
           this.$refs.reminalLogRecordTab.consoleResize()
         }, 600)
+      } else if (this.from === this.fromRoute.terminalLog && this.targetTab === 'monitorTab') {
+        setTimeout(() => {
+          this.$refs.reminalLogMonitorTab.consoleResize()
+        }, 600)
       }
       const subListDom = document.querySelector('.sub-list') // 副列表
       const height = window.innerHeight > 900 ? 505 : 250
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
index 06bf9fca3..00b178320 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -11,9 +11,9 @@
     <template v-slot:title><span :title="obj.uuid.substring(0, 8).toUpperCase()">{{obj.uuid.substring(0, 8).toUpperCase()}}</span></template>
     <template v-slot>
       <div ref="replayTab" class="replay-tab">
-        <div class="replay-container">
+        <div class="replay-container" style="height: 100%">
           <div ref="recordConsole" class="record-console">
-            <div :id="obj.uuid" class="record-terminal"></div>
+            <div :id="'record-terminal' + obj.uuid" class="record-terminal" style="height: 100%;width: 100%"></div>
           </div>
         </div>
       </div>
@@ -25,6 +25,7 @@
 import Terminal from '../../js/Xterm'
 import { AttachAddon } from 'xterm-addon-attach'
 import { FitAddon } from 'xterm-addon-fit'
+import { CanvasAddon } from 'xterm-addon-canvas'
 import bus from '../../../../libs/bus'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
@@ -80,6 +81,7 @@ export default {
   methods: {
     // 创建连接
     create () {
+      console.log('create')
       const that = this
       if (this.terminalSocket) {
         this.terminalSocket.close()
@@ -88,10 +90,7 @@ export default {
         this.terminal.dispose()
       }
       this.terminal = new Terminal({
-        rows: parseInt(this.$refs.recordConsole.offsetHeight / 18),
-        cols: parseInt(this.$refs.recordConsole.offsetWidth / 11),
         cursorStyle: 'block', // 光标样式  null | 'block' | 'underline' | 'bar'
-        // bellStyle:'sound',
         overviewRulerWidth: 8,
         lineHeight: 1.2,
         fontSize: 16,
@@ -99,8 +98,7 @@ export default {
       })
       this.termFitAddon = new FitAddon()
       this.terminal.loadAddon(this.termFitAddon)
-      this.terminal.open(document.getElementById(this.obj.uuid))
-      this.termFitAddon.fit()
+      this.terminal.loadAddon(new CanvasAddon())
       const token = localStorage.getItem('nz-token')
       let baseUrl = this.$axios.defaults.baseURL
       if (baseUrl.startsWith('/')) {
@@ -114,9 +112,6 @@ export default {
         this.terminalSocket.close()
       }
       this.terminalSocket = new WebSocket(url)
-      // 连接成功
-      this.terminalSocket.onopen = () => {
-      }
       // 返回
       this.terminalSocket.onmessage = function (evt) {
         let backContent = evt.data
@@ -172,19 +167,13 @@ export default {
           }
         }
       }
-      // 关闭
-      this.terminalSocket.onclose = () => {
-        // 报错sorry的，还没来得及看信息就关闭
-        // this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
-      }
-
-      // 错误
-      this.terminalSocket.onerror = (e) => {
-      }
       this.termAttachAddon = new AttachAddon(this.terminalSocket)
       this.terminal.loadAddon(this.termAttachAddon)
-      this.terminal._initialized = true
-      this.termFitAddon.fit()// 自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
+      this.$nextTick(() => {
+        const dom = document.getElementById('record-terminal' + this.obj.uuid)
+        this.terminal.open(dom)
+        this.termFitAddon.fit()
+      })// 自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
       // this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
       //   this.setFontSize(this.fontSize);
       // })
@@ -217,8 +206,9 @@ export default {
     },
 
     consoleResize () {
+      console.log('consoleResize')
       this.$nextTick(() => {
-        this.terminal && this.termFitAddon.fit()
+        this.termFitAddon.fit()
       })
     },
     shutdown () {
@@ -253,7 +243,7 @@ export default {
           }
           setTimeout(() => {
             this.create()
-          }, 200)
+          }, 300)
         }
       }
     },
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
index a07a19e21..a421eaa2e 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
@@ -27,7 +27,7 @@
           </div>
         </div>
         <div ref="recordConsole" class="record-console">
-          <div :id="obj.uuid" class="record-terminal"></div>
+          <div :id="obj.uuid" class="record-terminal" style="height: 100%;width: 100%"></div>
         </div>
       </div>
     </template>
@@ -38,6 +38,7 @@
 import Terminal from '../../js/Xterm'
 import { AttachAddon } from 'xterm-addon-attach'
 import { FitAddon } from 'xterm-addon-fit'
+import { CanvasAddon } from 'xterm-addon-canvas'
 import bus from '../../../../libs/bus'
 // import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
@@ -117,12 +118,17 @@ export default {
           this.termFitAddon.fit()
         } else {
           this.terminal = new Terminal({
-            rows: parseInt(this.$refs.recordConsole.offsetHeight / 18),
-            cols: parseInt(this.$refs.recordConsole.offsetWidth / 11)
+            cursorStyle: 'block', // 光标样式  null | 'block' | 'underline' | 'bar'
+            overviewRulerWidth: 8,
+            lineHeight: 1.2,
+            fontSize: 16,
+            disableStdin: true// 是否应禁用输入
           })
+          this.terminal.loadAddon(new CanvasAddon())
           this.termFitAddon = new FitAddon()
           this.terminal.loadAddon(this.termFitAddon)
           this.terminal.open(document.getElementById(this.obj.uuid))
+          this.terminal && this.termFitAddon.fit()
         }
 
         if (this.recordData.length > 0) {
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 11be33b6d..8813150ff 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -1162,7 +1162,6 @@ function addWaterMarker (parentNode, text, font, textColor, width, height, textR
   cans.textBaseline = 'middle'
   cans.fillText(text, 200, 150)
   cans.fillText(text1, 200, 170)
-  console.log(show)
   if (show) {
     parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
   } else {