From 955ff9356bab9c6c6ebf8a60cbd46f27b2ed9ad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E8=83=9C=E4=BB=81?= Date: Tue, 22 Apr 2025 09:56:25 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E7=BE=A4=E5=AE=89=E8=A3=85=E9=83=A8?= =?UTF-8?q?=E7=BD=B2=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E5=B0=BA=E5=AF=B8?= =?UTF-8?q?=E5=8F=98=E5=8C=96=E6=97=B6=E5=91=BD=E4=BB=A4=E8=A1=8C=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E8=87=AA=E9=80=82=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/enterprise/ExeInstall.vue | 24 ++++++++++++ .../components/hostTerminal/HostTerminal.vue | 18 ++++++++- .../components/lightweight/ExeInstall.vue | 24 ++++++++++++ .../components/openLookeng/ExeInstall.vue | 13 +++++++ .../install/components/simple/ExeInstall.vue | 39 +++++++++++++++---- .../src/views/ops/simpleInstall/index.vue | 24 ++++++++++++ 6 files changed, 133 insertions(+), 9 deletions(-) diff --git a/plugins/base-ops/web-ui/src/views/ops/install/components/enterprise/ExeInstall.vue b/plugins/base-ops/web-ui/src/views/ops/install/components/enterprise/ExeInstall.vue index 8db105a07..640a9e11b 100644 --- a/plugins/base-ops/web-ui/src/views/ops/install/components/enterprise/ExeInstall.vue +++ b/plugins/base-ops/web-ui/src/views/ops/install/components/enterprise/ExeInstall.vue @@ -181,6 +181,8 @@ const termTerminal = ref() const loadingFunc = inject('loading') const logs = ref('') +const fitAddonTerm = ref(null) +const fitAddonTermLog = ref(null) onMounted(() => { loadingFunc.setNextBtnShow(false) hosts.value = [] @@ -203,6 +205,8 @@ onBeforeUnmount(() => { terminalWs.value?.destroy() termLog.value?.dispose() termTerminal.value?.dispose() + window.removeEventListener('resize', resizeScreenTermLog) + window.removeEventListener('resize', resizeScreenTerm) }) const retryInstall = () => { @@ -350,15 +354,33 @@ const syncStepNumber = (messageData: string) => { } } +const resizeScreenTermLog = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTermLog.value?.fit() + } catch (e) { + console.log("e", e) + } +} + const initTermLog = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const fitAddon = new FitAddon() + fitAddonTermLog.value = fitAddon term.loadAddon(fitAddon) term.open(document.getElementById('xtermLog') as HTMLElement) fitAddon.fit() term.clear() term.focus() termLog.value = term + window.addEventListener("resize", resizeScreenTermLog) + } +} + +const resizeScreenTerm = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTerm.value?.fit() + } catch (e) { + console.log("e", e) } } @@ -366,6 +388,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const attachAddon = new AttachAddon(ws) const fitAddon = new FitAddon() + fitAddonTerm.value = fitAddon term.loadAddon(attachAddon) term.loadAddon(fitAddon) term.open(document.getElementById('xterm') as HTMLElement) @@ -374,6 +397,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { term.focus() term.write('\r\n\x1b[33m$\x1b[0m ') termTerminal.value = term + window.addEventListener("resize", resizeScreenTerm) } } diff --git a/plugins/base-ops/web-ui/src/views/ops/install/components/hostTerminal/HostTerminal.vue b/plugins/base-ops/web-ui/src/views/ops/install/components/hostTerminal/HostTerminal.vue index 2356c70a5..ec8fe9bf5 100644 --- a/plugins/base-ops/web-ui/src/views/ops/install/components/hostTerminal/HostTerminal.vue +++ b/plugins/base-ops/web-ui/src/views/ops/install/components/hostTerminal/HostTerminal.vue @@ -31,7 +31,7 @@ import { KeyValue } from '@/types/global' import Socket from '@/utils/websocket' -import { reactive, ref, nextTick } from 'vue' +import { reactive, ref, nextTick, onBeforeUnmount } from 'vue' import { openSSH } from '@/api/ops' import { WsConnectType } from '@/types/ops/install' import { Terminal } from 'xterm' @@ -97,10 +97,25 @@ const openSocket = () => { let fitAddon = ref() +const fitAddonTerm = ref(null) + +onBeforeUnmount(() => { + window.removeEventListener('resize', resizeScreenTerm) +}) + +const resizeScreenTerm = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTerm.value?.fit() + } catch (e) { + console.log("e", e) + } +} + const initTerm = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const attachAddon = new AttachAddon(ws) fitAddon.value = new FitAddon() + fitAddonTerm.value = fitAddon term.loadAddon(attachAddon) term.loadAddon(fitAddon.value) term.open(document.getElementById('xterm') as HTMLElement) @@ -109,6 +124,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { term.focus() term.write('\r\n\x1b[33m$\x1b[0m ') termTerminal.value = term + window.addEventListener("resize", resizeScreenTerm) } } diff --git a/plugins/base-ops/web-ui/src/views/ops/install/components/lightweight/ExeInstall.vue b/plugins/base-ops/web-ui/src/views/ops/install/components/lightweight/ExeInstall.vue index c3c12350e..f740ecbca 100644 --- a/plugins/base-ops/web-ui/src/views/ops/install/components/lightweight/ExeInstall.vue +++ b/plugins/base-ops/web-ui/src/views/ops/install/components/lightweight/ExeInstall.vue @@ -195,6 +195,8 @@ const termTerminal = ref() const loadingFunc = inject('loading') +const fitAddonTerm = ref(null) +const fitAddonTermLog = ref(null) onMounted(() => { loadingFunc.setNextBtnShow(false) hosts.value = [] @@ -217,6 +219,8 @@ onBeforeUnmount(() => { terminalWs.value?.destroy() termLog.value?.dispose() termTerminal.value?.dispose() + window.removeEventListener('resize', resizeScreenTermLog) + window.removeEventListener('resize', resizeScreenTerm) }) const retryInstall = () => { @@ -406,15 +410,33 @@ const syncStepNumberCluster = (messageData: string) => { } } +const resizeScreenTermLog = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTermLog.value?.fit() + } catch (e) { + console.log("e", e) + } +} + const initTermLog = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const fitAddon = new FitAddon() + fitAddonTermLog.value = fitAddon term.loadAddon(fitAddon) term.open(document.getElementById('xtermLog') as HTMLElement) fitAddon.fit() term.clear() term.focus() termLog.value = term + window.addEventListener("resize", resizeScreenTermLog) + } +} + +const resizeScreenTerm = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTerm.value?.fit() + } catch (e) { + console.log("e", e) } } @@ -422,6 +444,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const attachAddon = new AttachAddon(ws) const fitAddon = new FitAddon() + fitAddonTerm.value = fitAddon term.loadAddon(attachAddon) term.loadAddon(fitAddon) term.open(document.getElementById('xterm') as HTMLElement) @@ -430,6 +453,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { term.focus() term.write('\r\n\x1b[33m$\x1b[0m ') termTerminal.value = term + window.addEventListener("resize", resizeScreenTerm) } } diff --git a/plugins/base-ops/web-ui/src/views/ops/install/components/openLookeng/ExeInstall.vue b/plugins/base-ops/web-ui/src/views/ops/install/components/openLookeng/ExeInstall.vue index 8490f4dcd..36064b7cc 100644 --- a/plugins/base-ops/web-ui/src/views/ops/install/components/openLookeng/ExeInstall.vue +++ b/plugins/base-ops/web-ui/src/views/ops/install/components/openLookeng/ExeInstall.vue @@ -94,6 +94,8 @@ const data = reactive({ serviceStatus: 'wait' }) +const fitAddonTerm = ref(null) + const getTermObj = (): Terminal => { return new Terminal({ fontSize: 14, @@ -109,14 +111,24 @@ const getTermObj = (): Terminal => { }) } +const resizeScreenTerm = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTerm.value?.fit() + } catch (e) { + console.log("e", e) + } +} + const initTerm = (term: Terminal, ws: WebSocket | undefined) => { const fitAddon = new FitAddon() + fitAddonTerm.value = fitAddon term.loadAddon(fitAddon) term.open(document.getElementById('xterm') as HTMLElement) fitAddon.fit() term.clear() term.focus() termTerminal.value = term + window.addEventListener("resize", resizeScreenTerm) } const goHome = () => { @@ -226,6 +238,7 @@ onMounted(() => { onBeforeUnmount(() => { terminalLogWs.value?.destroy() termTerminal.value?.dispose() + window.removeEventListener('resize', resizeScreenTerm) }) const goManage = () => { diff --git a/plugins/base-ops/web-ui/src/views/ops/install/components/simple/ExeInstall.vue b/plugins/base-ops/web-ui/src/views/ops/install/components/simple/ExeInstall.vue index d39d8f4ca..fadd95aa0 100644 --- a/plugins/base-ops/web-ui/src/views/ops/install/components/simple/ExeInstall.vue +++ b/plugins/base-ops/web-ui/src/views/ops/install/components/simple/ExeInstall.vue @@ -39,15 +39,15 @@ class="mr" @click="goHome" >{{ - $t('simple.ExeInstall.5mpmsp16pp80') - }} + $t('simple.ExeInstall.5mpmsp16pp80') + }} {{ - $t('simple.ExeInstall.5mpmsp16pxs0') - }} + $t('simple.ExeInstall.5mpmsp16pxs0') + }} @@ -117,13 +117,13 @@ @click="retryInstall" class="mr-s" >{{ $t('simple.ExeInstall.5mpmsp16qzc0') - }} + }} {{ - $t('components.openLooKeng.5mpiji1qpcc65') - }} + $t('components.openLooKeng.5mpiji1qpcc65') + }} @@ -179,7 +179,8 @@ const termTerminal = ref() const loadingFunc = inject('loading') const logs = ref('') - +const fitAddonTerm = ref(null) +const fitAddonTermLog = ref(null) onMounted(() => { loadingFunc.setNextBtnShow(false) hosts.value = [] @@ -202,6 +203,8 @@ onBeforeUnmount(() => { terminalWs.value?.destroy() termLog.value?.dispose() termTerminal.value?.dispose() + window.removeEventListener('resize', resizeScreenTermLog) + window.removeEventListener('resize', resizeScreenTerm) }) const retryInstall = () => { @@ -345,15 +348,33 @@ const syncStepNumber = (messageData: string) => { } } +const resizeScreenTermLog = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTermLog.value?.fit() + } catch (e) { + console.log("e", e) + } +} + const initTermLog = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const fitAddon = new FitAddon() + fitAddonTermLog.value = fitAddon; term.loadAddon(fitAddon) term.open(document.getElementById('xtermLog') as HTMLElement) fitAddon.fit() term.clear() term.focus() termLog.value = term + window.addEventListener("resize", resizeScreenTermLog) + } +} + +const resizeScreenTerm = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTerm.value?.fit() + } catch (e) { + console.log("e", e) } } @@ -361,6 +382,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const attachAddon = new AttachAddon(ws) const fitAddon = new FitAddon() + fitAddonTerm.value = fitAddon term.loadAddon(attachAddon) term.loadAddon(fitAddon) term.open(document.getElementById('xterm') as HTMLElement) @@ -369,6 +391,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { term.focus() term.write('\r\n\x1b[33m$\x1b[0m ') termTerminal.value = term + window.addEventListener("resize", resizeScreenTerm) } } diff --git a/plugins/base-ops/web-ui/src/views/ops/simpleInstall/index.vue b/plugins/base-ops/web-ui/src/views/ops/simpleInstall/index.vue index 7419964e2..d1e727c1d 100644 --- a/plugins/base-ops/web-ui/src/views/ops/simpleInstall/index.vue +++ b/plugins/base-ops/web-ui/src/views/ops/simpleInstall/index.vue @@ -213,6 +213,8 @@ const termTerminal = ref() const logs = ref('') const loadingFunc = inject('loading') +const fitAddonTerm = ref(null) +const fitAddonTermLog = ref(null) const formRules = computed(() => { return { hostId: [{ required: true, 'validate-trigger': 'change', message: t('simpleInstall.index.5mpn813gwbk0') }], @@ -275,6 +277,8 @@ onBeforeUnmount(() => { terminalWs.value?.destroy() termLog.value?.dispose() termTerminal.value?.dispose() + window.removeEventListener('resize', resizeScreenTermLog) + window.removeEventListener('resize', resizeScreenTerm) }) const formRef = ref() @@ -537,15 +541,33 @@ const getTermObj = (): Terminal => { }) } +const resizeScreenTermLog = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTermLog.value?.fit() + } catch (e) { + console.log("e", e) + } +} + const initTermLog = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const fitAddon = new FitAddon() + fitAddonTermLog.value = fitAddon term.loadAddon(fitAddon) term.open(document.getElementById('xtermLog') as HTMLElement) fitAddon.fit() term.clear() term.focus() termLog.value = term + window.addEventListener("resize", resizeScreenTermLog) + } +} + +const resizeScreenTerm = () => { + try { // When the window size changes, trigger the xterm resize method to make it adaptive. + fitAddonTerm.value?.fit() + } catch (e) { + console.log("e", e) } } @@ -553,6 +575,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { if (ws) { const attachAddon = new AttachAddon(ws) const fitAddon = new FitAddon() + fitAddonTerm.value = fitAddon term.loadAddon(attachAddon) term.loadAddon(fitAddon) term.open(document.getElementById('xterm') as HTMLElement) @@ -561,6 +584,7 @@ const initTerm = (term: Terminal, ws: WebSocket | undefined) => { term.focus() term.write('\r\n\x1b[33m$\x1b[0m ') termTerminal.value = term + window.addEventListener("resize", resizeScreenTerm) } } -- Gitee