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(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(); const heartbeatTimer = ref(); 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 @@ {{ $t('commons.button.conn') }} - {{ $t('commons.button.disconn') }} + {{ $t('commons.button.disconn') }} @@ -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({