feat(TabBar): 为首页标签添加图标和文字显示

- 将首页标签的图标和文字包裹在单独的容器中
- 添加首页文字显示并应用文本溢出样式
- 简化模板结构，移除多余换行和缩进

src/components/TabBar.vue

@@ -1,39 +1,24 @@
 <template>
   <div class="tab-bar">
-    <a-dropdown 
+    <a-dropdown v-for="tab in state.tabs" :key="tab.id" :trigger="['contextmenu']">
-      v-for="tab in state.tabs" 
+      <div :class="['tab-item', { active: tab.id === state.activeTabId }]" @click="activateTab(tab.id)" @mousedown.middle.prevent="tab.closable && closeTab(tab.id)">
-      :key="tab.id" 
+        <div class="tab-icon" v-if="tab.type === 'home'">
-      :trigger="['contextmenu']"
+          <HomeOutlined />
-    >
+          <span class="tab-home">首页</span>
-      <div 
+        </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'" />
         <span v-else class="tab-title">{{ tab.title }}</span>
-        
+
         <span v-if="tab.isDirty" class="dirty-dot">●</span>
-        
+
-        <div 
+        <div v-if="tab.closable" class="close-btn" @click.stop="closeTab(tab.id)">
-          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 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>
+          <a-menu-item key="closeAll" @click="closeAllTabs()"> 全部关闭 </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 { HomeOutlined, CloseOutlined } from "@ant-design/icons-vue";
-import { useTabs } from '../composables/useTabs';
+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;