From 81ca5c226ed347396fec547fbf01ce651fc16801 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 16 Apr 2025 00:00:30 +0800
Subject: [PATCH] update

---
 packages/frontend/src/components/Terminal.vue | 63 ++++++++++++------
 .../src/components/TerminalTabBar.vue         | 25 ++++++--
 .../src/composables/useSshTerminal.ts         | 11 +++-
 packages/frontend/src/views/WorkspaceView.vue | 64 ++++++++-----------
 4 files changed, 99 insertions(+), 64 deletions(-)

diff --git a/packages/frontend/src/components/Terminal.vue b/packages/frontend/src/components/Terminal.vue
index a59c778..ed6742c 100644
--- a/packages/frontend/src/components/Terminal.vue
+++ b/packages/frontend/src/components/Terminal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'; // 移除 nextTick
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'; // 重新导入 nextTick
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from 'xterm-addon-web-links';
@@ -38,13 +38,30 @@ const debounce = (func: Function, delay: number) => {
   };
 };
 
-// 防抖处理 resize 事件的函数
+// 防抖处理由 ResizeObserver 触发的 resize 事件
 const debouncedEmitResize = debounce((term: Terminal) => {
-    if (term) {
-        emit('resize', { cols: term.cols, rows: term.rows });
+    if (term && props.isActive) { // 仅当标签仍处于活动状态时才发送防抖后的 resize
+        const dimensions = { cols: term.cols, rows: term.rows };
+        console.log(`[Terminal ${props.sessionId}] Debounced resize emit (from ResizeObserver):`, dimensions);
+        emit('resize', dimensions);
+    } else {
+        console.log(`[Terminal ${props.sessionId}] Debounced resize skipped (inactive).`);
     }
 }, 150); // 150ms 防抖延迟
 
+// 立即执行 Fit 并发送 Resize 的函数
+const fitAndEmitResizeNow = (term: Terminal) => {
+    if (!term) return;
+    try {
+        fitAddon?.fit();
+        const dimensions = { cols: term.cols, rows: term.rows };
+        console.log(`[Terminal ${props.sessionId}] Immediate resize emit:`, dimensions);
+        emit('resize', dimensions);
+    } catch (e) {
+        console.warn("Immediate fit/resize failed:", e);
+    }
+};
+
 // 初始化终端
 onMounted(() => {
   if (terminalRef.value) {
@@ -79,27 +96,37 @@ onMounted(() => {
       emit('data', data);
     });
 
-    // 监听终端大小变化 (通过 ResizeObserver)
+    // 监听终端大小变化 (通过 ResizeObserver) - 主要处理浏览器窗口大小变化等
     if (terminalRef.value) {
         const container = terminalRef.value; // 捕获引用
-        resizeObserver = new ResizeObserver(() => {
-            // 检查容器是否实际可见
-            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 = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            const { height } = entry.contentRect;
+            // console.log(`[Terminal ${props.sessionId}] ResizeObserver triggered. Height: ${height}, isActive: ${props.isActive}`);
+            if (height > 0 && terminal) { // 仅在可见时调整
+                 try {
+                    fitAddon?.fit(); // 视觉上适应
+                    // 触发防抖的 resize 发送，主要应对窗口 resize
+                    debouncedEmitResize(terminal);
+                 } catch (e) {
+                    console.warn("Fit addon resize failed (observer):", e);
+                 }
             }
         });
         resizeObserver.observe(container);
     }
 
-    // 不再需要重写 fitAddon.fit 方法来 emit resize
+    // 监听 isActive prop 的变化，当标签变为活动时立即 fit 并发送 resize
+    watch(() => props.isActive, (newValue) => {
+        if (newValue && terminal && terminalRef.value && terminalRef.value.offsetHeight > 0) {
+            console.log(`[Terminal ${props.sessionId}] Tab became active, performing immediate fit and resize.`);
+            // 使用 nextTick 确保 DOM 更新完成
+            nextTick(() => {
+                fitAndEmitResizeNow(terminal!);
+            });
+        }
+    });
+
     // // 监听 fitAddon 的 resize 事件，获取新的尺寸并触发 emit
     // // 注意：fitAddon 本身不直接触发 resize 事件，我们需要在 fit() 后手动获取
     // const originalFit = fitAddon.fit.bind(fitAddon);
diff --git a/packages/frontend/src/components/TerminalTabBar.vue b/packages/frontend/src/components/TerminalTabBar.vue
index 3929308..6608a29 100644
--- a/packages/frontend/src/components/TerminalTabBar.vue
+++ b/packages/frontend/src/components/TerminalTabBar.vue
@@ -63,6 +63,8 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
   overflow-x: auto; /* 如果标签过多则允许水平滚动 */
   white-space: nowrap;
   padding: 0 0.5rem; /* 左右留出一点空间 */
+  height: 2.5rem; /* 固定标签栏高度 */
+  box-sizing: border-box; /* 确保 padding 不会增加总高度 */
 }
 
 .tab-list {
@@ -75,14 +77,16 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
 .tab-item {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0.8rem;
+  padding: 0 0.8rem; /* 基础内边距 */
+  height: 100%;
   cursor: pointer;
   border-right: 1px solid #bdbdbd;
+  box-sizing: border-box;
   background-color: #f0f0f0; /* 未激活标签背景 */
   color: #616161; /* 未激活标签文字颜色 */
   transition: background-color 0.2s ease, color 0.2s ease;
   max-width: 200px; /* 限制标签最大宽度 */
-  position: relative; /* 为了关闭按钮定位 */
+  position: relative; /* 保持相对定位，以防万一需要定位子元素 */
 }
 
 .tab-item:hover {
@@ -92,19 +96,21 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
 .tab-item.active {
   background-color: #ffffff; /* 激活标签背景 */
   color: #333333; /* 激活标签文字颜色 */
-  border-bottom: 1px solid #ffffff; /* 覆盖底部边框，使其看起来与下方内容区域连接 */
+  /* 移除所有可能影响高度的边框或伪元素 */
   position: relative;
-  z-index: 1; /* 确保激活标签在上方 */
+  z-index: 1;
 }
 
 .tab-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-right: 0.8rem; /* 与关闭按钮的间距 */
+  margin-right: 1.5rem; /* 为关闭按钮留出足够空间 */
+  line-height: normal; /* 默认行高 */
 }
 
 .close-tab-button {
+  /* 恢复简单布局 */
   background: none;
   border: none;
   color: #9e9e9e;
@@ -113,7 +119,12 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
   padding: 0 0.3rem;
   line-height: 1;
   border-radius: 50%;
-  margin-left: auto; /* 将按钮推到右侧 */
+  margin-left: auto; /* 推到右侧 */
+  /* 移除绝对定位 */
+  /* position: absolute; */
+  /* top: 50%; */
+  /* right: 0.5rem; */
+  /* transform: translateY(-50%); */
 }
 
 .close-tab-button:hover {
@@ -122,7 +133,7 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
 }
 
 .tab-item.active .close-tab-button {
-    color: #757575; /* 激活标签上的关闭按钮颜色 */
+    color: #757575;
 }
 .tab-item.active .close-tab-button:hover {
     background-color: #e0e0e0;
diff --git a/packages/frontend/src/composables/useSshTerminal.ts b/packages/frontend/src/composables/useSshTerminal.ts
index bca2adb..e90fe7b 100644
--- a/packages/frontend/src/composables/useSshTerminal.ts
+++ b/packages/frontend/src/composables/useSshTerminal.ts
@@ -50,8 +50,15 @@ export function createSshTerminalManager(sessionId: string, wsDeps: SshTerminalD
     };
 
     const handleTerminalResize = (dimensions: { cols: number; rows: number }) => {
-        console.log(`[会话 ${sessionId}][SSH终端模块] 发送终端大小调整:`, dimensions);
-        sendMessage({ type: 'ssh:resize', sessionId, payload: dimensions });
+        // 添加日志，确认从 WorkspaceView 收到的尺寸
+        console.log(`[SSH ${sessionId}] handleTerminalResize called with:`, dimensions);
+        // 只有在连接状态下才发送 resize 命令给后端
+        if (isConnected.value) {
+            console.log(`[SSH ${sessionId}] Sending ssh:resize to backend:`, dimensions);
+            sendMessage({ type: 'ssh:resize', sessionId, payload: dimensions });
+        } else {
+            console.log(`[SSH ${sessionId}] WebSocket not connected, skipping ssh:resize.`);
+        }
     };
 
     // --- WebSocket 消息处理 ---
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index e7a810c..a91a2fe 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -131,7 +131,7 @@ onBeforeUnmount(() => {
                   :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"
+                  @resize="(dims) => { console.log(`[WorkspaceView ${tabInfo.sessionId}] Received resize event:`, dims); sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalResize(dims); }"
                 />
               </div>
               <div class="file-manager-wrapper">
@@ -185,7 +185,7 @@ onBeforeUnmount(() => {
 .workspace-view {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 60px - 30px - 60px - 2rem); /* 调整以适应布局 */
+  height: calc(100vh - 60px - 30px - 60px - 2rem);
   overflow: hidden;
 }
 
@@ -204,7 +204,7 @@ onBeforeUnmount(() => {
 
 .main-content-area {
     display: flex;
-    flex-grow: 1;
+    flex: 1;
     overflow: hidden;
     border-top: 1px solid #ccc;
 }
@@ -215,74 +215,64 @@ onBeforeUnmount(() => {
     height: 100%;
     border-right: 2px solid #ccc;
     overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-}
-.left-sidebar > * {
-    flex-grow: 1;
 }
 
 .main-workspace-container {
-    flex-grow: 1;
-    position: relative;
-    overflow: hidden;
+    flex: 1;
     display: flex;
+    overflow: hidden;
+    position: relative;
 }
 
 .main-workspace-area-session {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
     overflow: hidden;
 }
 
 .left-pane {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
     min-width: 300px;
+    overflow: hidden;
 }
 
 .terminal-wrapper {
-  height: 60%;
-  background-color: #1e1e1e;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.terminal-wrapper > * {
-    flex-grow: 1;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #1e1e1e;
+    overflow: hidden;
 }
 
 .file-manager-wrapper {
-    height: 40%;
-    border-top: 2px solid #ccc;
-    overflow: hidden;
+    flex: 1;
     display: flex;
     flex-direction: column;
-}
-.file-manager-wrapper > * {
-    flex-grow: 1;
+    border-top: 2px solid #ccc;
+    overflow: hidden;
 }
 
 .status-monitor-wrapper {
-    flex-basis: 250px;
+    width: 250px;
     min-width: 200px;
-    height: 100%;
     border-left: 2px solid #ccc;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }
-.status-monitor-wrapper > * {
-    flex-grow: 1;
-}
 
 .main-workspace-area.placeholder {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;