update

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);

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;