From 18e8af6234af0a3f80d6880e1a015f3b6f5f10c7 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 11 Aug 2023 16:08:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=B9=E5=99=A8=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E6=96=AD=E5=BC=80=E8=BF=9E=E6=8E=A5=E6=97=B6=EF=BC=8C=E4=BF=9D?=
 =?UTF-8?q?=E6=8C=81=E6=8A=BD=E5=B1=89=E6=89=93=E5=BC=80=20(#1926)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/terminal/index.vue    | 32 +++++++++++--------
 .../container/container/terminal/index.vue    | 10 ++++--
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/terminal/index.vue b/frontend/src/components/terminal/index.vue
index 1f48ef5fc..706bab7af 100644
--- a/frontend/src/components/terminal/index.vue
+++ b/frontend/src/components/terminal/index.vue
@@ -13,20 +13,7 @@ const terminalElement = ref<HTMLDivElement | null>(null);
 const fitAddon = new FitAddon();
 const termReady = ref(false);
 const webSocketReady = ref(false);
-const term = ref(
-    new Terminal({
-        lineHeight: 1.2,
-        fontSize: 12,
-        fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
-        theme: {
-            background: '#000000',
-        },
-        cursorBlink: true,
-        cursorStyle: 'underline',
-        scrollback: 100,
-        tabStopWidth: 4,
-    }),
-);
+const term = ref();
 const terminalSocket = ref<WebSocket>();
 const heartbeatTimer = ref<number>();
 const latency = ref(0);
@@ -56,6 +43,21 @@ const acceptParams = (props: WsProps) => {
     });
 };
 
+const newTerm = () => {
+    term.value = new Terminal({
+        lineHeight: 1.2,
+        fontSize: 12,
+        fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+        theme: {
+            background: '#000000',
+        },
+        cursorBlink: true,
+        cursorStyle: 'underline',
+        scrollback: 100,
+        tabStopWidth: 4,
+    });
+};
+
 const init = (endpoint: string, args: string) => {
     if (initTerminal(true)) {
         initWebSocket(endpoint, args);
@@ -78,11 +80,13 @@ function onClose(isKeepShow: boolean = false) {
             term.value.dispose();
         } catch {}
     }
+    terminalElement.value.innerHTML = '';
 }
 
 // terminal 相关代码 start
 
 const initTerminal = (online: boolean = false): boolean => {
+    newTerm();
     if (terminalElement.value) {
         term.value.open(terminalElement.value);
         term.value.loadAddon(fitAddon);
diff --git a/frontend/src/views/container/container/terminal/index.vue b/frontend/src/views/container/container/terminal/index.vue
index 5247759fe..14f9edd66 100644
--- a/frontend/src/views/container/container/terminal/index.vue
+++ b/frontend/src/views/container/container/terminal/index.vue
@@ -43,7 +43,7 @@
             <el-button v-if="!terminalOpen" @click="initTerm(formRef)">
                 {{ $t('commons.button.conn') }}
             </el-button>
-            <el-button v-else @click="handleClose()">{{ $t('commons.button.disconn') }}</el-button>
+            <el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
             <Terminal style="height: calc(100vh - 302px)" ref="terminalRef"></Terminal>
         </el-form>
     </el-drawer>
@@ -99,10 +99,14 @@ const initTerm = (formEl: FormInstance | undefined) => {
     });
 };
 
-function handleClose() {
+const onClose = () => {
     terminalRef.value?.onClose();
-    terminalVisiable.value = false;
     terminalOpen.value = false;
+};
+
+function handleClose() {
+    onClose();
+    terminalVisiable.value = false;
 }
 
 defineExpose({