update
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<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 { Terminal } from 'xterm';
|
||||||
import { FitAddon } from 'xterm-addon-fit';
|
import { FitAddon } from 'xterm-addon-fit';
|
||||||
import { WebLinksAddon } from 'xterm-addon-web-links';
|
import { WebLinksAddon } from 'xterm-addon-web-links';
|
||||||
@@ -8,6 +8,7 @@ import 'xterm/css/xterm.css'; // 引入 xterm 样式
|
|||||||
// 定义 props 和 emits
|
// 定义 props 和 emits
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
sessionId: string; // 会话 ID
|
sessionId: string; // 会话 ID
|
||||||
|
isActive: boolean; // 新增:标记此终端是否为活动标签页
|
||||||
stream?: ReadableStream<string>; // 用于接收来自 WebSocket 的数据流 (可选)
|
stream?: ReadableStream<string>; // 用于接收来自 WebSocket 的数据流 (可选)
|
||||||
options?: object; // xterm 的配置选项
|
options?: object; // xterm 的配置选项
|
||||||
}>();
|
}>();
|
||||||
@@ -22,6 +23,27 @@ const terminalRef = ref<HTMLElement | null>(null); // 终端容器的引用
|
|||||||
let terminal: Terminal | null = null;
|
let terminal: Terminal | null = null;
|
||||||
let fitAddon: FitAddon | null = null;
|
let fitAddon: FitAddon | null = null;
|
||||||
let resizeObserver: ResizeObserver | 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(() => {
|
onMounted(() => {
|
||||||
@@ -59,25 +81,34 @@ onMounted(() => {
|
|||||||
|
|
||||||
// 监听终端大小变化 (通过 ResizeObserver)
|
// 监听终端大小变化 (通过 ResizeObserver)
|
||||||
if (terminalRef.value) {
|
if (terminalRef.value) {
|
||||||
|
const container = terminalRef.value; // 捕获引用
|
||||||
resizeObserver = new ResizeObserver(() => {
|
resizeObserver = new ResizeObserver(() => {
|
||||||
|
// 检查容器是否实际可见
|
||||||
|
if (container.offsetHeight > 0) {
|
||||||
try {
|
try {
|
||||||
fitAddon?.fit();
|
fitAddon?.fit(); // 让 xterm 适应容器
|
||||||
|
// 只有当终端是活动的,才触发防抖的 resize 事件发送
|
||||||
|
if (props.isActive && terminal) {
|
||||||
|
debouncedEmitResize(terminal);
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("Fit addon resize failed:", e);
|
console.warn("Fit addon resize failed:", e);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
resizeObserver.observe(terminalRef.value);
|
resizeObserver.observe(container);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听 fitAddon 的 resize 事件,获取新的尺寸并触发 emit
|
// 不再需要重写 fitAddon.fit 方法来 emit resize
|
||||||
// 注意:fitAddon 本身不直接触发 resize 事件,我们需要在 fit() 后手动获取
|
// // 监听 fitAddon 的 resize 事件,获取新的尺寸并触发 emit
|
||||||
const originalFit = fitAddon.fit.bind(fitAddon);
|
// // 注意:fitAddon 本身不直接触发 resize 事件,我们需要在 fit() 后手动获取
|
||||||
fitAddon.fit = () => {
|
// const originalFit = fitAddon.fit.bind(fitAddon);
|
||||||
originalFit();
|
// fitAddon.fit = () => {
|
||||||
if (terminal) {
|
// originalFit();
|
||||||
emit('resize', { cols: terminal.cols, rows: terminal.rows });
|
// if (terminal) {
|
||||||
}
|
// emit('resize', { cols: terminal.cols, rows: terminal.rows });
|
||||||
};
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
|
||||||
// 处理传入的数据流 (如果提供了 stream prop)
|
// 处理传入的数据流 (如果提供了 stream prop)
|
||||||
|
|||||||
@@ -82,13 +82,48 @@ export function createSshTerminalManager(sessionId: string, wsDeps: SshTerminalD
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 尝试过滤掉非标准的 OSC 184 序列
|
// 尝试过滤掉非标准的 OSC 184 序列 (更强的过滤)
|
||||||
// 注意:这个正则表达式可能需要根据实际序列进行调整
|
if (typeof outputData === 'string' && outputData.includes('\x1b]184;')) {
|
||||||
// 它尝试匹配 \x1b]184;... 直到 \x1b\\ 或 \x07
|
|
||||||
const osc184Regex = /\x1b]184;[^\x1b\x07]*(\x1b\\|\x07)/g;
|
|
||||||
if (typeof outputData === 'string') {
|
|
||||||
const originalLength = outputData.length;
|
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) {
|
if (outputData.length < originalLength) {
|
||||||
console.warn(`[会话 ${sessionId}][SSH终端模块] 过滤掉 OSC 184 序列。`);
|
console.warn(`[会话 ${sessionId}][SSH终端模块] 过滤掉 OSC 184 序列。`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -128,6 +128,7 @@ onBeforeUnmount(() => {
|
|||||||
<TerminalComponent
|
<TerminalComponent
|
||||||
:key="tabInfo.sessionId"
|
:key="tabInfo.sessionId"
|
||||||
:session-id="tabInfo.sessionId"
|
:session-id="tabInfo.sessionId"
|
||||||
|
:is-active="tabInfo.sessionId === activeSessionId"
|
||||||
@ready="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalReady"
|
@ready="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalReady"
|
||||||
@data="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalData"
|
@data="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalData"
|
||||||
@resize="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalResize"
|
@resize="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalResize"
|
||||||
|
|||||||
Reference in New Issue
Block a user