update

packages/frontend/src/components/TerminalTabBar.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { ref, computed, PropType } from 'vue'; // 导入 ref 和 computed
+import { ref, computed, PropType, onMounted, watch } from 'vue'; // 导入 ref, computed, onMounted, watch
 import { useI18n } from 'vue-i18n'; // 导入 i18n
-import { storeToRefs } from 'pinia'; // *** 重新导入 storeToRefs ***
+import { useRoute } from 'vue-router'; // 导入 useRoute
+import { storeToRefs } from 'pinia'; // 导入 storeToRefs
 import WorkspaceConnectionListComponent from './WorkspaceConnectionList.vue'; // 导入连接列表组件
 import { useSessionStore } from '../stores/session.store'; // 导入 session store
 import { useLayoutStore, type PaneName } from '../stores/layout.store'; // 导入布局 store 和类型
 // 导入会话状态类型
 import type { SessionTabInfoWithStatus } from '../stores/session.store'; // 导入更新后的类型
+// *** 假设 layoutStore 会有这些状态和方法 ***
+// import { useLayoutStore } from '../stores/layout.store';
 
 // --- Setup ---
 const { t } = useI18n(); // 初始化 i18n
 const layoutStore = useLayoutStore(); // 初始化布局 store
-// const { isLayoutVisible } = storeToRefs(layoutStore); // *** 移除 isLayoutVisible ***
-// const route = useRoute(); // *** 移除 route ***
+const { isHeaderVisible } = storeToRefs(layoutStore); // 从 layout store 获取主导航栏可见状态
+const route = useRoute(); // 获取路由实例
 
 // 定义 Props
 const props = defineProps({
@@ -75,9 +78,51 @@ const openLayoutConfigurator = () => {
   emit('open-layout-configurator'); // 发出事件
 };
 
-// --- Layout Visibility Logic ---
-// 移除布局可见性切换逻辑
-// --- End Layout Visibility Logic ---
+// --- Header Visibility Logic ---
+const isWorkspaceRoute = ref(route.path === '/workspace'); // 检查是否在 /workspace 路由
+
+// 监视路由变化
+watch(() => route.path, (newPath) => {
+  isWorkspaceRoute.value = newPath === '/workspace';
+  if (isWorkspaceRoute.value) {
+    // 进入 /workspace 时，不需要在这里加载 Header 状态，App.vue 会处理
+    console.log('[TabBar] Entered /workspace route. Header toggle button is now active.');
+  }
+});
+
+// 组件挂载时检查一次
+onMounted(() => {
+  isWorkspaceRoute.value = route.path === '/workspace';
+  if (isWorkspaceRoute.value) {
+    // 初始加载时，不需要在这里加载 Header 状态，App.vue 会处理
+     console.log('[TabBar] Mounted on /workspace route. Header toggle button is now active.');
+  }
+});
+
+// 切换主导航栏可见性 (只在 workspace 路由下生效)
+const toggleHeader = () => {
+  if (isWorkspaceRoute.value) {
+    console.log('[TabBar] Toggling header visibility');
+    // 调用 store action
+    layoutStore.toggleHeaderVisibility();
+  } else {
+    console.log('[TabBar] Not on /workspace route, toggle ignored.');
+  }
+};
+
+// 计算属性，用于确定眼睛图标的类
+const eyeIconClass = computed(() => {
+  // 默认显示眼睛图标，如果主导航栏不可见，则显示斜杠眼睛
+  // 注意：这里假设 isHeaderVisible 为 true 时是可见的
+  return isHeaderVisible.value ? 'fas fa-eye' : 'fas fa-eye-slash';
+});
+
+// 计算属性，用于按钮的 title
+const toggleButtonTitle = computed(() => {
+  // 调整 i18n key 和默认文本
+  return isHeaderVisible.value ? t('header.hide', '隐藏顶部导航') : t('header.show', '显示顶部导航');
+});
+// --- End Header Visibility Logic ---
 
 </script>
 
@@ -106,7 +151,15 @@ const openLayoutConfigurator = () => {
       </button>
     </div>
     <div class="action-buttons-container">
-        <!-- 移除布局可见性切换按钮 -->
+        <!-- Header Toggle Button (Only functional on /workspace) -->
+        <button
+          v-if="isWorkspaceRoute"
+          class="action-button header-toggle-button"
+          @click="toggleHeader"
+          :title="toggleButtonTitle"
+        >
+          <i :class="eyeIconClass"></i>
+        </button>
         <!-- Layout Configurator Button -->
         <button class="action-button layout-config-button" @click="openLayoutConfigurator" :title="t('layout.configure', '配置布局')"> <!-- 使用 t 函数 -->
           <i class="fas fa-th-large"></i> <!-- 恢复为田字格图标 -->