update

2025-04-15 23:23:22 +08:00
parent 1a6ea421e6
commit 1f0200b82a
3 changed files with 88 additions and 21 deletions
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'; // 移除 nextTick
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from 'xterm-addon-web-links';
@@ -8,6 +8,7 @@ import 'xterm/css/xterm.css'; // 引入 xterm 样式
 // 定义 props 和 emits
 const props = defineProps<{
  sessionId: string; // 会话 ID
+  isActive: boolean; // 新增：标记此终端是否为活动标签页
  stream?: ReadableStream<string>; // 用于接收来自 WebSocket 的数据流 (可选)
  options?: object; // xterm 的配置选项
 }>();
@@ -22,6 +23,27 @@ const terminalRef = ref<HTMLElement | null>(null); // 终端容器的引用
 let terminal: Terminal | null = null;
 let fitAddon: FitAddon | null = null;
 let resizeObserver: ResizeObserver | null = null;
+let debounceTimer: number | null = null; // 用于防抖的计时器 ID
+
+// 防抖函数
+const debounce = (func: Function, delay: number) => {
+  return (...args: any[]) => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = window.setTimeout(() => {
+      func(...args);
+      debounceTimer = null;
+    }, delay);
+  };
+};
+
+// 防抖处理 resize 事件的函数
+const debouncedEmitResize = debounce((term: Terminal) => {
+    if (term) {
+        emit('resize', { cols: term.cols, rows: term.rows });
+    }
+}, 150); // 150ms 防抖延迟

 // 初始化终端
 onMounted(() => {
@@ -59,25 +81,34 @@ onMounted(() => {

    // 监听终端大小变化 (通过 ResizeObserver)
    if (terminalRef.value) {
+        const container = terminalRef.value; // 捕获引用
        resizeObserver = new ResizeObserver(() => {
-            try {
-                fitAddon?.fit();
-            } catch (e) {
-                console.warn("Fit addon resize failed:", e);
+            // 检查容器是否实际可见
+            if (container.offsetHeight > 0) {
+                try {
+                    fitAddon?.fit(); // 让 xterm 适应容器
+                    // 只有当终端是活动的，才触发防抖的 resize 事件发送
+                    if (props.isActive && terminal) {
+                        debouncedEmitResize(terminal);
+                    }
+                } catch (e) {
+                    console.warn("Fit addon resize failed:", e);
+                }
            }
        });
-        resizeObserver.observe(terminalRef.value);
+        resizeObserver.observe(container);
    }

-    // 监听 fitAddon 的 resize 事件，获取新的尺寸并触发 emit
-    // 注意：fitAddon 本身不直接触发 resize 事件，我们需要在 fit() 后手动获取
-    const originalFit = fitAddon.fit.bind(fitAddon);
-    fitAddon.fit = () => {
-        originalFit();
-        if (terminal) {
-            emit('resize', { cols: terminal.cols, rows: terminal.rows });
-        }
-    };
+    // 不再需要重写 fitAddon.fit 方法来 emit resize
+    // // 监听 fitAddon 的 resize 事件，获取新的尺寸并触发 emit
+    // // 注意：fitAddon 本身不直接触发 resize 事件，我们需要在 fit() 后手动获取
+    // const originalFit = fitAddon.fit.bind(fitAddon);
+    // fitAddon.fit = () => {
+    //     originalFit();
+    //     if (terminal) {
+    //         emit('resize', { cols: terminal.cols, rows: terminal.rows });
+    //     }
+    // };


    // 处理传入的数据流 (如果提供了 stream prop)
@@ -82,13 +82,48 @@ export function createSshTerminalManager(sessionId: string, wsDeps: SshTerminalD
             }
        }

-        // 尝试过滤掉非标准的 OSC 184 序列
-        // 注意：这个正则表达式可能需要根据实际序列进行调整
-        // 它尝试匹配 \x1b]184;... 直到 \x1b\\ 或 \x07
-        const osc184Regex = /\x1b]184;[^\x1b\x07]*(\x1b\\|\x07)/g;
-        if (typeof outputData === 'string') {
+        // 尝试过滤掉非标准的 OSC 184 序列 (更强的过滤)
+        if (typeof outputData === 'string' && outputData.includes('\x1b]184;')) {
            const originalLength = outputData.length;
-            outputData = outputData.replace(osc184Regex, '');
+            let cleanedData = '';
+            let currentIndex = 0;
+            let startIndex = outputData.indexOf('\x1b]184;');
+
+            while (startIndex !== -1) {
+                // 添加 OSC 序列之前的部分
+                cleanedData += outputData.substring(currentIndex, startIndex);
+
+                // 查找 OSC 序列的结束符 (BEL 或 ST)
+                const belIndex = outputData.indexOf('\x07', startIndex);
+                const stIndex = outputData.indexOf('\x1b\\', startIndex);
+
+                let endIndex = -1;
+                if (belIndex !== -1 && stIndex !== -1) {
+                    endIndex = Math.min(belIndex, stIndex);
+                } else if (belIndex !== -1) {
+                    endIndex = belIndex;
+                } else if (stIndex !== -1) {
+                    endIndex = stIndex;
+                }
+
+                if (endIndex !== -1) {
+                    // 找到结束符，跳过整个 OSC 序列
+                    currentIndex = endIndex + (outputData[endIndex] === '\x07' ? 1 : 2); // 跳过 BEL(1) 或 ST(2)
+                } else {
+                    // 未找到结束符，可能序列不完整，保留 OSC 开始之后的部分
+                    currentIndex = startIndex + 6; // 跳过 '\x1b]184;'
+                    console.warn(`[会话 ${sessionId}][SSH终端模块] 未找到 OSC 184 的结束符，可能序列不完整。`);
+                    break; // 停止处理，避免潜在问题
+                }
+
+                // 查找下一个 OSC 184 序列
+                startIndex = outputData.indexOf('\x1b]184;', currentIndex);
+            }
+
+            // 添加剩余的部分
+            cleanedData += outputData.substring(currentIndex);
+            outputData = cleanedData;
+
            if (outputData.length < originalLength) {
                 console.warn(`[会话 ${sessionId}][SSH终端模块] 过滤掉 OSC 184 序列。`);
            }
@@ -128,6 +128,7 @@ onBeforeUnmount(() => {
                <TerminalComponent
                  :key="tabInfo.sessionId"
                  :session-id="tabInfo.sessionId"
+                  :is-active="tabInfo.sessionId === activeSessionId"
                  @ready="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalReady"
                  @data="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalData"
                  @resize="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalResize"