From 8478738f3b8076e99c742dda77fa24ba9e3ecc58 Mon Sep 17 00:00:00 2001
From: liuyun <liuyun@192.168.1.39>
Date: Fri, 16 Oct 2026 11:16:37 +0800
Subject: [PATCH] =?UTF-8?q?style(layout):=20=E9=A1=B5=E7=AD=BE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E4=B8=8B=E5=88=92=E7=BA=BF=E5=BC=8F=EF=BC=8C=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=9B=BE=E6=A0=87=E4=BB=85=E5=BD=93=E5=89=8D=E9=A1=B5?=
 =?UTF-8?q?=E7=AD=BE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ty-tabs.vue | 39 +++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/ty-tabs.vue b/src/components/ty-tabs.vue
index eba8df5..94c94d8 100644
--- a/src/components/ty-tabs.vue
+++ b/src/components/ty-tabs.vue
@@ -2,7 +2,6 @@
   <el-tabs
     v-if="tabs.length"
     :model-value="activePath"
-    type="card"
     class="ty-tabs"
     @tab-change="onTabChange"
   >
@@ -10,7 +9,11 @@
       <template #label>
         <span class="ty-tabs__label" @contextmenu.prevent="openMenu($event, tab)">
           <span class="ty-tabs__title">{{ tab.title }}</span>
-          <span v-if="tab.closable" class="ty-tabs__close" @click.stop="emit('remove', tab.path)">
+          <span
+            v-if="tab.closable && tab.path === activePath"
+            class="ty-tabs__close"
+            @click.stop="emit('remove', tab.path)"
+          >
             <icon type="iconify" icon="mdi:close" />
           </span>
         </span>
@@ -94,52 +97,50 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
 
 <style scoped lang="scss">
 .ty-tabs {
-  @apply px-2 bg-bg-base border-b border-solid;
-  border-color: var(--wm-border-color-light);
+  @apply bg-bg-base;
 
   :deep(.el-tabs__header) {
-    @apply m-0;
+    @apply m-0 px-2;
   }
 
   :deep(.el-tabs__content) {
     @apply hidden;
   }
 
-  :deep(.el-tabs__nav) {
-    @apply border-none;
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+    background: var(--wm-border-color-light);
   }
 
   :deep(.el-tabs__item) {
-    @apply h-8 text-sm text-text-regular;
-    border: 1px solid var(--wm-border-color-light);
-    border-top: none;
+    @apply h-9 px-3 text-sm text-text-regular;
+  }
+
+  :deep(.el-tabs__item:hover) {
+    color: var(--el-color-primary);
   }
 
   :deep(.el-tabs__item.is-active) {
     color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
   }
 
   :deep(.el-tabs__nav-prev),
   :deep(.el-tabs__nav-next) {
-    @apply h-8 text-text-regular;
+    @apply h-9 text-text-regular;
   }
 }
 
 .ty-tabs__label {
-  @apply inline-flex items-center gap-1;
-}
-
-.ty-tabs__title {
-  @apply truncate;
+  @apply inline-flex items-center gap-1.5;
 }
 
 .ty-tabs__close {
   @apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
+  color: var(--wm-color-text-placeholder);
 
   &:hover {
-    @apply text-white;
-    background: var(--wm-color-text-placeholder);
+    color: var(--el-color-danger);
+    @apply bg-bg-page;
   }
 }