This commit is contained in:
Baobhan Sith
2025-05-28 10:02:44 +08:00
parent c3dd29d8ae
commit 50f3724ef8
3 changed files with 37 additions and 17 deletions
@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ConnectionInfo } from '../stores/connections.store'; import type { ConnectionInfo } from '../stores/connections.store';
import { computed, defineAsyncComponent, type PropType, type Component, ref, watch, onMounted, nextTick, type CSSProperties } from 'vue'; // Added nextTick and CSSProperties import { computed, defineAsyncComponent, type PropType, type Component, ref, watch, onMounted, onBeforeUnmount, nextTick, type CSSProperties } from 'vue'; // Added onBeforeUnmount, nextTick and CSSProperties
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useWorkspaceEventSubscriber, useWorkspaceEventOff } from '../composables/workspaceEvents';
import '@fortawesome/fontawesome-free/css/all.min.css'; import '@fortawesome/fontawesome-free/css/all.min.css';
import { Splitpanes, Pane } from 'splitpanes'; import { Splitpanes, Pane } from 'splitpanes';
import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store'; import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
@@ -49,12 +49,13 @@ const props = defineProps({
// --- Setup ---
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
const fileEditorStore = useFileEditorStore(); // <-- Initialize FileEditorStore const fileEditorStore = useFileEditorStore();
const settingsStore = useSettingsStore(); // +++ Initialize SettingsStore +++ const settingsStore = useSettingsStore();
const { t } = useI18n(); // <-- Get translation function const { t } = useI18n();
const subscribeToWorkspaceEvent = useWorkspaceEventSubscriber();
const unsubscribeFromWorkspaceEvent = useWorkspaceEventOff();
// +++ Appearance Store Refs +++ // +++ Appearance Store Refs +++
const appearanceStore = useAppearanceStore(); const appearanceStore = useAppearanceStore();
@@ -366,6 +367,14 @@ const getIconClasses = (paneName: PaneName): string[] => {
// --- Sidebar Resize Logic --- // --- Sidebar Resize Logic ---
onMounted(() => { onMounted(() => {
const handleStabilizedTerminalResize = ({ sessionId, width, height }: { sessionId: string; width: number; height: number }) => {
if (props.layoutNode.component === 'terminal' && sessionId === props.activeSessionId && customHtmlLayerRef.value) {
customHtmlLayerRef.value.style.width = `${width}px`;
customHtmlLayerRef.value.style.height = `${height}px`;
}
};
subscribeToWorkspaceEvent('terminal:stabilizedResize', handleStabilizedTerminalResize);
// Left Sidebar Resize // Left Sidebar Resize
@@ -465,6 +474,18 @@ watch(terminalCustomHTML, (newHtmlContent, oldHtmlContent) => {
}, { immediate: true }); }, { immediate: true });
onBeforeUnmount(() => {
const handleStabilizedTerminalResizeHandler = ({ sessionId, width, height }: { sessionId: string; width: number; height: number }) => {
if (props.layoutNode.component === 'terminal' && sessionId === props.activeSessionId && customHtmlLayerRef.value) {
customHtmlLayerRef.value.style.width = `${width}px`;
customHtmlLayerRef.value.style.height = `${height}px`;
}
};
unsubscribeFromWorkspaceEvent('terminal:stabilizedResize', handleStabilizedTerminalResizeHandler); // Use the same handler reference if possible
});
</script> </script>
<template> <template>
+7 -10
View File
@@ -98,12 +98,9 @@ const debouncedEmitResize = debounce((term: Terminal) => {
// *** 尝试在发送 resize 后强制刷新终端显示 *** // *** 尝试在发送 resize 后强制刷新终端显示 ***
try { try {
term.refresh(0, term.rows - 1); // Refresh entire viewport term.refresh(0, term.rows - 1); // Refresh entire viewport
console.log(`[Terminal ${props.sessionId}] Terminal refreshed after debounced resize.`);
} catch (e) { } catch (e) {
console.warn(`[Terminal ${props.sessionId}] Terminal refresh failed:`, e); console.warn(`[Terminal ${props.sessionId}] Terminal refresh failed:`, e);
} }
} else {
console.log(`[Terminal ${props.sessionId}] Debounced resize skipped (inactive).`);
} }
}, 150); // 150ms 防抖延迟 }, 150); // 150ms 防抖延迟
@@ -116,9 +113,13 @@ const fitAndEmitResizeNow = (term: Terminal) => {
if (terminalRef.value.offsetHeight > 0 && terminalRef.value.offsetWidth > 0) { if (terminalRef.value.offsetHeight > 0 && terminalRef.value.offsetWidth > 0) {
fitAddon?.fit(); fitAddon?.fit();
const dimensions = { cols: term.cols, rows: term.rows }; const dimensions = { cols: term.cols, rows: term.rows };
console.log(`[Terminal ${props.sessionId}] Immediate resize emit:`, dimensions);
emitWorkspaceEvent('terminal:resize', { sessionId: props.sessionId, dims: dimensions }); emitWorkspaceEvent('terminal:resize', { sessionId: props.sessionId, dims: dimensions });
// 发出稳定尺寸事件
if (terminalRef.value) {
const stableWidth = terminalRef.value.offsetWidth;
const stableHeight = terminalRef.value.offsetHeight;
emitWorkspaceEvent('terminal:stabilizedResize', { sessionId: props.sessionId, width: stableWidth, height: stableHeight });
}
// 使用 nextTick 确保 fit() 的效果已反映,再触发 resize // 使用 nextTick 确保 fit() 的效果已反映,再触发 resize
@@ -316,16 +317,12 @@ onMounted(() => {
if (rectHeight > 0 && rectWidth > 0) { if (rectHeight > 0 && rectWidth > 0) {
try { try {
// console.log(`[TerminalResizeObserver sessionId=${props.sessionId}] Before fitAddon.fit(). Current xterm_cols: ${terminal.cols}, xterm_rows: ${terminal.rows}`);
fitAddon?.fit(); fitAddon?.fit();
// console.log(`[TerminalResizeObserver sessionId=${props.sessionId}] After fitAddon.fit(). New xterm_cols: ${terminal.cols}, xterm_rows: ${terminal.rows}`);
debouncedEmitResize(terminal); // This will log the cols/rows after debouncing debouncedEmitResize(terminal); // This will log the cols/rows after debouncing
emitWorkspaceEvent('terminal:stabilizedResize', { sessionId: props.sessionId, width: roundedWidth, height: roundedHeight });
} catch (e) { } catch (e) {
console.warn(`[TerminalResizeObserver sessionId=${props.sessionId}] Fit addon or debouncedEmitResize failed:`, e); console.warn(`[TerminalResizeObserver sessionId=${props.sessionId}] Fit addon or debouncedEmitResize failed:`, e);
} }
} else {
console.log(`[TerminalResizeObserver sessionId=${props.sessionId}] Skipped fit/emit due to zero height/width in contentRect. Rect: ${rectWidth.toFixed(2)}w x ${rectHeight.toFixed(2)}h`);
} }
}); });
// Observe only if initially active (or becomes active later) // Observe only if initially active (or becomes active later)
@@ -12,6 +12,8 @@ export type WorkspaceEventPayloads = {
'terminal:sendCommand': { command: string; sessionId?: string }; // sessionId 可选,用于指定目标,默认为 active 'terminal:sendCommand': { command: string; sessionId?: string }; // sessionId 可选,用于指定目标,默认为 active
'terminal:clear': void; // sessionId 可选,默认为 active 'terminal:clear': void; // sessionId 可选,默认为 active
'terminal:scrollToBottomRequest': { sessionId: string }; 'terminal:scrollToBottomRequest': { sessionId: string };
'terminal:stabilizedResize': { sessionId: string; width: number; height: number }; // 用于传递稳定后的尺寸
// Editor Events // Editor Events
'editor:closeTab': { tabId: string }; 'editor:closeTab': { tabId: string };