From c22e34918141e2cfb072f8b47164da77aa5defb5 Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Sat, 4 Oct 2025 14:31:06 +0800
Subject: [PATCH] :bug: Fixed tab switch issue

---
 .../src/components/titlebar/LinuxTitleBar.vue | 47 +++++++++-
 .../src/components/titlebar/MacOSTitleBar.vue | 93 ++++++++++++++++++-
 .../components/titlebar/WindowsTitleBar.vue   | 23 ++++-
 frontend/src/stores/tabStore.ts               | 44 +++++++--
 4 files changed, 195 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/titlebar/LinuxTitleBar.vue b/frontend/src/components/titlebar/LinuxTitleBar.vue
index dc74f99..2b8f8b2 100644
--- a/frontend/src/components/titlebar/LinuxTitleBar.vue
+++ b/frontend/src/components/titlebar/LinuxTitleBar.vue
@@ -4,7 +4,13 @@
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div class="titlebar-title">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
+      <!-- 标签页容器区域 -->
+      <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
+        <TabContainer />
+      </div>
+      <!-- 设置页面标题 -->
+      <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
 
     <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
@@ -48,15 +54,43 @@
 <script setup lang="ts">
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
+import {useRoute} from 'vue-router';
 import * as runtime from '@wailsio/runtime';
 import {useDocumentStore} from '@/stores/documentStore';
+import TabContainer from '@/components/tabs/TabContainer.vue';
+import {useTabStore} from "@/stores/tabStore";
 
+const tabStore = useTabStore();
 const {t} = useI18n();
+const route = useRoute();
 const isMaximized = ref(false);
 const documentStore = useDocumentStore();
 
+// 判断是否在设置页面
+const isInSettings = computed(() => route.path.startsWith('/settings'));
+
 // 计算标题文本
 const titleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
+  const currentDoc = documentStore.currentDocument;
+  if (currentDoc) {
+    // 限制文档标题长度，避免标题栏换行
+    const maxTitleLength = 30;
+    const truncatedTitle = currentDoc.title.length > maxTitleLength 
+      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
+      : currentDoc.title;
+    return `voidraft - ${truncatedTitle}`;
+  }
+  return 'voidraft';
+});
+
+// 计算完整标题文本（用于tooltip）
+const fullTitleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
   const currentDoc = documentStore.currentDocument;
   return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
 });
@@ -126,6 +160,7 @@ onMounted(async () => {
   font-size: 13px;
   font-weight: 500;
   cursor: default;
+  min-width: 0; /* 允许内容收缩 */
 
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -135,6 +170,7 @@ onMounted(async () => {
 .titlebar-content .titlebar-icon {
   width: 16px;
   height: 16px;
+  flex-shrink: 0;
 
   img {
     width: 100%;
@@ -149,6 +185,15 @@ onMounted(async () => {
   font-weight: 500;
 }
 
+.titlebar-tabs {
+  flex: 1;
+  height: 100%;
+  align-items: center;
+  overflow: hidden;
+  margin-left: 8px;
+  min-width: 0;
+}
+
 .titlebar-controls {
   display: flex;
   height: 100%;
diff --git a/frontend/src/components/titlebar/MacOSTitleBar.vue b/frontend/src/components/titlebar/MacOSTitleBar.vue
index 80c02a3..2c1ce8a 100644
--- a/frontend/src/components/titlebar/MacOSTitleBar.vue
+++ b/frontend/src/components/titlebar/MacOSTitleBar.vue
@@ -43,8 +43,13 @@
       </button>
     </div>
     
-    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
-      <div class="titlebar-title">{{ titleText }}</div>
+    <!-- 标签页容器区域 -->
+    <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
+      <TabContainer />
+    </div>
+    
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent v-if="!tabStore.isTabsEnabled || isInSettings">
+      <div class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
   </div>
 </template>
@@ -52,14 +57,22 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import * as runtime from '@wailsio/runtime';
 import { useDocumentStore } from '@/stores/documentStore';
+import TabContainer from '@/components/tabs/TabContainer.vue';
+import { useTabStore } from "@/stores/tabStore";
 
+const tabStore = useTabStore();
 const { t } = useI18n();
+const route = useRoute();
 const isMaximized = ref(false);
 const showControlIcons = ref(false);
 const documentStore = useDocumentStore();
 
+// 判断是否在设置页面
+const isInSettings = computed(() => route.path.startsWith('/settings'));
+
 const minimizeWindow = async () => {
   try {
     await runtime.Window.Minimise();
@@ -95,6 +108,26 @@ const checkMaximizedState = async () => {
 
 // 计算标题文本
 const titleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
+  const currentDoc = documentStore.currentDocument;
+  if (currentDoc) {
+    // 限制文档标题长度，避免标题栏换行
+    const maxTitleLength = 30;
+    const truncatedTitle = currentDoc.title.length > maxTitleLength 
+      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
+      : currentDoc.title;
+    return `voidraft - ${truncatedTitle}`;
+  }
+  return 'voidraft';
+});
+
+// 计算完整标题文本（用于tooltip）
+const fullTitleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
+  }
   const currentDoc = documentStore.currentDocument;
   return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
 });
@@ -134,6 +167,7 @@ onMounted(async () => {
   align-items: center;
   padding-left: 8px;
   gap: 8px;
+  flex-shrink: 0;
   
   -webkit-context-menu: none;
   -moz-context-menu: none;
@@ -212,12 +246,67 @@ onMounted(async () => {
   justify-content: center;
   flex: 1;
   cursor: default;
+  min-width: 0;
   
   -webkit-context-menu: none;
   -moz-context-menu: none;
   context-menu: none;
 }
 
+.titlebar-tabs {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  margin-right: 8px;
+  min-width: 0;
+  overflow: visible; /* 允许TabContainer内部处理滚动 */
+  
+  /* 确保TabContainer能够正确处理滚动 */
+  :deep(.tab-container) {
+    width: 100%;
+    height: 100%;
+  }
+  
+  :deep(.tab-bar) {
+    width: 100%;
+    height: 100%;
+  }
+  
+  :deep(.tab-scroll-wrapper) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  
+  /* 确保底部线条能够正确显示 */
+  :deep(.tab-item) {
+    position: relative;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: var(--tab-active-line, var(--accent-color, #007acc));
+      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 10;
+    }
+
+    &.active::after {
+      width: 100%;
+    }
+  }
+}
+
 .titlebar-title {
   font-size: 13px;
   font-weight: 500;
diff --git a/frontend/src/components/titlebar/WindowsTitleBar.vue b/frontend/src/components/titlebar/WindowsTitleBar.vue
index bf216b1..d5264e3 100644
--- a/frontend/src/components/titlebar/WindowsTitleBar.vue
+++ b/frontend/src/components/titlebar/WindowsTitleBar.vue
@@ -4,13 +4,13 @@
       <div class="titlebar-icon">
         <img src="/appicon.png" alt="voidraft"/>
       </div>
-      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title">{{ titleText }}</div>
+      <div v-if="!tabStore.isTabsEnabled && !isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
       <!-- 标签页容器区域 -->
       <div class="titlebar-tabs" v-if="tabStore.isTabsEnabled && !isInSettings" style="--wails-draggable:drag">
         <TabContainer />
       </div>
       <!-- 设置页面标题 -->
-      <div v-if="isInSettings" class="titlebar-title">{{ titleText }}</div>
+      <div v-if="isInSettings" class="titlebar-title" :title="fullTitleText">{{ titleText }}</div>
     </div>
 
     <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
@@ -65,7 +65,24 @@ const isInSettings = computed(() => route.path.startsWith('/settings'));
 // 计算标题文本
 const titleText = computed(() => {
   if (isInSettings.value) {
-    return 'voidraft - settings';
+    return `voidraft - ` + t('settings.title');
+  }
+  const currentDoc = documentStore.currentDocument;
+  if (currentDoc) {
+    // 限制文档标题长度，避免标题栏换行
+    const maxTitleLength = 30;
+    const truncatedTitle = currentDoc.title.length > maxTitleLength 
+      ? currentDoc.title.substring(0, maxTitleLength) + '...' 
+      : currentDoc.title;
+    return `voidraft - ${truncatedTitle}`;
+  }
+  return 'voidraft';
+});
+
+// 计算完整标题文本（用于tooltip）
+const fullTitleText = computed(() => {
+  if (isInSettings.value) {
+    return `voidraft - ` + t('settings.title');
   }
   const currentDoc = documentStore.currentDocument;
   return currentDoc ? `voidraft - ${currentDoc.title}` : 'voidraft';
diff --git a/frontend/src/stores/tabStore.ts b/frontend/src/stores/tabStore.ts
index 93a8e9d..9c95948 100644
--- a/frontend/src/stores/tabStore.ts
+++ b/frontend/src/stores/tabStore.ts
@@ -99,6 +99,23 @@ export const useTabStore = defineStore('tab', () => {
         }
     };
 
+    /**
+     * 批量关闭标签页
+     * @param documentIds 要关闭的文档ID数组
+     */
+    const closeTabs = (documentIds: number[]) => {
+        documentIds.forEach(documentId => {
+            if (!hasTab(documentId)) return;
+
+            const tabIndex = tabOrder.value.indexOf(documentId);
+            if (tabIndex === -1) return;
+
+            // 从映射和顺序数组中移除
+            tabsMap.value.delete(documentId);
+            tabOrder.value.splice(tabIndex, 1);
+        });
+    };
+
     /**
      * 切换到指定标签页并打开对应文档
      */
@@ -156,8 +173,13 @@ export const useTabStore = defineStore('tab', () => {
         // 获取所有其他标签页的ID
         const otherTabIds = tabOrder.value.filter(id => id !== keepDocumentId);
         
-        // 关闭其他标签页
-        otherTabIds.forEach(id => closeTab(id));
+        // 批量关闭其他标签页
+        closeTabs(otherTabIds);
+        
+        // 如果当前打开的文档在被关闭的标签中，需要切换到保留的文档
+        if (otherTabIds.includes(documentStore.currentDocumentId!)) {
+            switchToTabAndDocument(keepDocumentId);
+        }
     };
 
     /**
@@ -170,8 +192,13 @@ export const useTabStore = defineStore('tab', () => {
         // 获取右侧所有标签页的ID
         const rightTabIds = tabOrder.value.slice(index + 1);
         
-        // 关闭右侧标签页
-        rightTabIds.forEach(id => closeTab(id));
+        // 批量关闭右侧标签页
+        closeTabs(rightTabIds);
+        
+        // 如果当前打开的文档在被关闭的右侧标签中，需要切换到指定的文档
+        if (rightTabIds.includes(documentStore.currentDocumentId!)) {
+            switchToTabAndDocument(documentId);
+        }
     };
 
     /**
@@ -184,8 +211,13 @@ export const useTabStore = defineStore('tab', () => {
         // 获取左侧所有标签页的ID
         const leftTabIds = tabOrder.value.slice(0, index);
         
-        // 关闭左侧标签页
-        leftTabIds.forEach(id => closeTab(id));
+        // 批量关闭左侧标签页
+        closeTabs(leftTabIds);
+        
+        // 如果当前打开的文档在被关闭的左侧标签中，需要切换到指定的文档
+        if (leftTabIds.includes(documentStore.currentDocumentId!)) {
+            switchToTabAndDocument(documentId);
+        }
     };
 
     /**