🐛 Fixed tab switch issue

2025-10-04 14:31:06 +08:00
parent 45968cd353
commit c22e349181
4 changed files with 195 additions and 12 deletions
--- 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%;
--- 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;
--- 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';
--- 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);
+        }
    };

    /**