fixed: Fixed issues with termianl not adapting

jumpserver · Oct 16, 2024 · 26af068 · 26af068
1 parent 9a6dade
commit 26af068
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 22 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -14,6 +14,7 @@
     "@vueuse/core": "^10.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-search": "^0.15.0",
+    "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "alova": "^3.0.2",
     "clipboard-polyfill": "^4.1.0",

diff --git a/ui/src/hooks/helper/index.ts b/ui/src/hooks/helper/index.ts
@@ -106,6 +106,8 @@ export const handleTerminalResize = (
         };
     }
 
+    data = resizeData;
+
     socket.send(formatMessage(terminalId, eventType, data));
 };
 

diff --git a/ui/src/hooks/useTerminal.ts b/ui/src/hooks/useTerminal.ts
@@ -2,14 +2,15 @@
 import xtermTheme from 'xterm-theme';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
+// import { WebglAddon } from '@xterm/addon-webgl';
 import { ISearchOptions, SearchAddon } from '@xterm/addon-search';
 import { Sentry } from 'nora-zmodemjs/src/zmodem_browser';
 import { defaultTheme } from '@/config';
 
 // hook
 import { createDiscreteApi } from 'naive-ui';
 import { useSentry } from '@/hooks/useZsentry.ts';
-import { useDebounceFn, useWebSocket } from '@vueuse/core';
+import { useWebSocket } from '@vueuse/core';
 
 // store
 import { storeToRefs } from 'pinia';
@@ -98,6 +99,7 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
 
         switch (msg.type) {
             case 'CONNECT': {
+                fitAddon.fit();
                 terminalId.value = msg.id;
 
                 const terminalData = {
@@ -246,7 +248,6 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
                     }
                     console.log(e);
                 }
-
             } else {
                 writeBufferToTerminal(enableZmodem.value, zmodemStatus.value, terminal!, event.data);
             }
@@ -443,7 +444,13 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
             }
         });
 
-        window.addEventListener('resize', () => useDebounceFn(() => fitAddon.fit(), 500), false);
+        window.addEventListener(
+            'resize',
+            () => {
+                fitAddon.fit();
+            },
+            false
+        );
 
         if (option.type === 'k8s') {
             window.addEventListener('keydown', (event: KeyboardEvent) => {
@@ -473,6 +480,7 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
         if (terminal) {
             terminal.loadAddon(fitAddon);
             terminal.loadAddon(searchAddon);
+            // terminal.loadAddon(new WebglAddon());
 
             terminal.open(el);
             terminal.focus();
@@ -489,7 +497,8 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
                 handleTerminalOnData(data, type, terminalId.value, lunaConfig, socket);
             });
             terminal.onResize(({ cols, rows }) => {
-                useDebounceFn(() => handleTerminalResize(cols, rows, type, terminalId.value, socket), 500);
+                fitAddon.fit();
+                handleTerminalResize(cols, rows, type, terminalId.value, socket);
             });
         }
     };

diff --git a/ui/src/hooks/useZsentry.ts b/ui/src/hooks/useZsentry.ts
@@ -209,7 +209,7 @@ export const useSentry = (lastSendTime?: Ref<Date>, t?: any): IUseSentry => {
 
                     terminal.write('\r\n');
 
-                    if (zmodeSession.value){
+                    if (zmodeSession.value) {
                         zmodeSession.value.abort();
                     }
                 })

diff --git a/ui/src/style/reset.scss b/ui/src/style/reset.scss
@@ -26,7 +26,7 @@ body,
     height: 100%;
     padding: 0;
     margin: 0;
-    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 #app {

diff --git a/ui/src/views/Connection/index.vue b/ui/src/views/Connection/index.vue
@@ -22,7 +22,7 @@ import { Terminal } from '@xterm/xterm';
 
 import { storeToRefs } from 'pinia';
 import { NMessageProvider } from 'naive-ui';
-import {computed, h, markRaw, nextTick, onUnmounted, reactive, Ref, ref} from 'vue';
+import { computed, h, markRaw, nextTick, onUnmounted, reactive, Ref, ref } from 'vue';
 
 import xtermTheme from 'xterm-theme';
 import mittBus from '@/utils/mittBus.ts';
@@ -69,7 +69,7 @@ const warningIntervalId = ref<number>(0);
 const onlineUsersMap = reactive<{ [key: string]: any }>({});
 
 onUnmounted(() => {
-  clearInterval(warningIntervalId.value);
+    clearInterval(warningIntervalId.value);
 });
 
 const settings = computed((): ISettingProp[] => {
@@ -371,20 +371,20 @@ const onSocketData = (msgType: string, msg: any, terminal: Terminal) => {
             message.info(`${data.user} ${t('ResumeSession')}`);
             break;
         }
-      case 'TERMINAL_PERM_VALID': {
-        clearInterval(warningIntervalId.value);
-        message.info(`${t('PermissionValid')}`);
-        break;
-      }
-      case 'TERMINAL_PERM_EXPIRED': {
-        const data = JSON.parse(msg.data);
-        const warningMsg = `${t('PermissionExpired')}: ${data.detail}`;
-        message.warning(warningMsg);
-        warningIntervalId.value = setInterval(() => {
-          message.warning(warningMsg);
-        }, 1000 * 60);
-        break;
-      }
+        case 'TERMINAL_PERM_VALID': {
+            clearInterval(warningIntervalId.value);
+            message.info(`${t('PermissionValid')}`);
+            break;
+        }
+        case 'TERMINAL_PERM_EXPIRED': {
+            const data = JSON.parse(msg.data);
+            const warningMsg = `${t('PermissionExpired')}: ${data.detail}`;
+            message.warning(warningMsg);
+            warningIntervalId.value = setInterval(() => {
+                message.warning(warningMsg);
+            }, 1000 * 60);
+            break;
+        }
         case 'CLOSE': {
             enableShare.value = false;
 

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -616,6 +616,11 @@
   resolved "https://registry.yarnpkg.com/@xterm/addon-search/-/addon-search-0.15.0.tgz#5c772d5f14c26546c4bfbeb0c3d4b3333057411f"
   integrity sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==
 
+"@xterm/addon-webgl@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-webgl/-/addon-webgl-0.18.0.tgz#9e927cee10af971595fb2a72fd4c3bc2819f0096"
+  integrity sha512-xCnfMBTI+/HKPdRnSOHaJDRqEpq2Ugy8LEj9GiY4J3zJObo3joylIFaMvzBwbYRg8zLtkO0KQaStCeSfoaI2/w==
+
 "@xterm/xterm@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.5.0.tgz#275fb8f6e14afa6e8a0c05d4ebc94523ff775396"
-Original file line number
+Diff line change
@@ Expand Up / @@ -106,6 +106,8 @@ export const handleTerminalResize = ( @@
             };
         }
+        data = resizeData;
         socket.send(formatMessage(terminalId, eventType, data));
     };
@@ Expand Down @@