From c639ebb6bf2bdfc1ca44ab121803d2586fc5dd95 Mon Sep 17 00:00:00 2001
From: cfq <cfq@qq.com>
Date: Wed, 28 Jan 2026 14:48:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(TabBar):=20=E4=B8=BA=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将首页标签的图标和文字包裹在单独的容器中
- 添加首页文字显示并应用文本溢出样式
- 简化模板结构，移除多余换行和缩进
---
 src/components/TabBar.vue | 52 +++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 1994e74..125ccba 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -1,39 +1,24 @@
 <template>
   <div class="tab-bar">
-    <a-dropdown 
-      v-for="tab in state.tabs" 
-      :key="tab.id" 
-      :trigger="['contextmenu']"
-    >
-      <div 
-        :class="['tab-item', { active: tab.id === state.activeTabId }]"
-        @click="activateTab(tab.id)"
-        @mousedown.middle.prevent="tab.closable && closeTab(tab.id)"
-      >
-        <HomeOutlined v-if="tab.type === 'home'" />
+    <a-dropdown v-for="tab in state.tabs" :key="tab.id" :trigger="['contextmenu']">
+      <div :class="['tab-item', { active: tab.id === state.activeTabId }]" @click="activateTab(tab.id)" @mousedown.middle.prevent="tab.closable && closeTab(tab.id)">
+        <div class="tab-icon" v-if="tab.type === 'home'">
+          <HomeOutlined />
+          <span class="tab-home">首页</span>
+        </div>
         <span v-else class="tab-title">{{ tab.title }}</span>
-        
+
         <span v-if="tab.isDirty" class="dirty-dot">●</span>
-        
-        <div 
-          v-if="tab.closable" 
-          class="close-btn"
-          @click.stop="closeTab(tab.id)"
-        >
+
+        <div v-if="tab.closable" class="close-btn" @click.stop="closeTab(tab.id)">
           <CloseOutlined />
         </div>
       </div>
       <template #overlay>
         <a-menu>
-          <a-menu-item key="close" :disabled="!tab.closable" @click="closeTab(tab.id)">
-            关闭
-          </a-menu-item>
-          <a-menu-item key="closeOther" @click="closeOtherTabs(tab.id)">
-            保留当前关闭其他
-          </a-menu-item>
-          <a-menu-item key="closeAll" @click="closeAllTabs()">
-            全部关闭
-          </a-menu-item>
+          <a-menu-item key="close" :disabled="!tab.closable" @click="closeTab(tab.id)"> 关闭 </a-menu-item>
+          <a-menu-item key="closeOther" @click="closeOtherTabs(tab.id)"> 保留当前关闭其他 </a-menu-item>
+          <a-menu-item key="closeAll" @click="closeAllTabs()"> 全部关闭 </a-menu-item>
         </a-menu>
       </template>
     </a-dropdown>
@@ -41,11 +26,10 @@
 </template>
 
 <script setup>
-import { HomeOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import { useTabs } from '../composables/useTabs';
+import { HomeOutlined, CloseOutlined } from "@ant-design/icons-vue";
+import { useTabs } from "../composables/useTabs";
 
 const { state, activateTab, closeTab, closeOtherTabs, closeAllTabs } = useTabs();
-
 </script>
 
 <style scoped>
@@ -84,6 +68,14 @@ const { state, activateTab, closeTab, closeOtherTabs, closeAllTabs } = useTabs()
   color: var(--text-color);
 }
 
+.tab-home {
+  margin-left: 10px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tab-title {
   flex: 1;
   overflow: hidden;