From 8621178127ca517c9170bbb128021d1c40cea6c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Sat, 9 May 2026 14:20:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Tabs.vue | 52 ++++++++++++----------------------
 1 file changed, 18 insertions(+), 34 deletions(-)

diff --git a/src/components/layout/Tabs.vue b/src/components/layout/Tabs.vue
index bc79837..9769437 100644
--- a/src/components/layout/Tabs.vue
+++ b/src/components/layout/Tabs.vue
@@ -1,29 +1,13 @@
 <template>
   <div class="tabs-container">
-    <el-tabs
-      v-model="tabsStore.activeTab"
-      type="card"
-      closable
-      @tab-click="handleTabClick"
-      @tab-remove="handleTabRemove"
-    >
-      <el-tab-pane
-        v-for="(tab, index) in tabsStore.tabs"
-        :key="tab.path"
-        :label="tab.title"
-        :name="tab.path"
-      >
+    <el-tabs v-model="tabsStore.activeTab" type="card" closable @tab-click="handleTabClick"
+      @tab-remove="handleTabRemove">
+      <el-tab-pane v-for="(tab, index) in tabsStore.tabs" :key="tab.path" :label="tab.title" :name="tab.path">
         <template #label>
-          <div
-            class="tab-label"
-            :class="{ 'is-context-active': contextMenuPath === tab.path }"
-            draggable="true"
-            @dragstart="handleDragStart($event, index)"
-            @dragover.prevent="handleDragOver($event, index)"
-            @drop="handleDrop($event, index)"
-            @dragend="handleDragEnd"
-            @contextmenu.prevent="handleContextMenu($event, tab.path)"
-          >
+          <div class="tab-label" :class="{ 'is-context-active': contextMenuPath === tab.path }" draggable="true"
+            @dragstart="handleDragStart($event, index)" @dragover.prevent="handleDragOver($event, index)"
+            @drop="handleDrop($event, index)" @dragend="handleDragEnd"
+            @contextmenu.prevent="handleContextMenu($event, tab.path)">
             <span class="tab-text">{{ tab.title }}</span>
           </div>
         </template>
@@ -31,14 +15,8 @@
     </el-tabs>
 
     <!-- 右键菜单 -->
-    <el-dropdown
-      popper-class="el-droMenu"
-      :popper-style="style"
-      ref="contextMenuRef"
-      trigger="contextmenu"
-      @command="handleContextMenuCommand"
-      @visible-change="handleMenuVisibleChange"
-    >
+    <el-dropdown popper-class="el-droMenu" :popper-style="style" ref="contextMenuRef" trigger="contextmenu"
+      @command="handleContextMenuCommand" @visible-change="handleMenuVisibleChange">
       <span class="context-menu-trigger"></span>
       <template #dropdown>
         <el-dropdown-menu>
@@ -182,7 +160,7 @@ const handleContextMenu = (e: MouseEvent, path: string) => {
       const menu = document.querySelector('.el-droMenu')
       if (menu) {
         style.value = `position: fixed; z-index: 9999; left: ${x}px; top: ${y}px;`
-         
+
       }
     })
   }
@@ -241,6 +219,8 @@ const handleDrop = (e: DragEvent, index: number) => {
 
 <style scoped lang="scss">
 .tabs-container {
+  height: 50px;
+  box-sizing: content-box;
   background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
   border-bottom: 1px solid var(--el-border-color-light);
   padding: 8px 20px 0;
@@ -254,9 +234,13 @@ const handleDrop = (e: DragEvent, index: number) => {
       border: none;
     }
 
+    .el-tabs__nav-scroll {
+      overflow: visible !important;
+    }
+
     .el-tabs__nav {
       border: none !important;
-      gap: 8px;
+      gap: 4px;
     }
 
     .el-tabs__item {
@@ -372,7 +356,7 @@ const handleDrop = (e: DragEvent, index: number) => {
         .tab-text {
           display: inline-block;
           max-width: 150px;
-          overflow: hidden;
+          overflow: auto;
           text-overflow: ellipsis;
           white-space: nowrap;
         }