From dd58c6203dbaa00c2458ee035c3649f41d494a4d Mon Sep 17 00:00:00 2001
From: liuyun <liuyun@192.168.1.39>
Date: Fri, 16 Oct 2026 11:11:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E5=A4=9A=E9=A1=B5=E7=AD=BE?=
 =?UTF-8?q?=E6=94=B9=E7=94=A8=20Element=20Plus=20tabs=EF=BC=88=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E7=AE=AD=E5=A4=B4=E6=9B=B4=E4=BC=98=E9=9B=85=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ty-tabs 重构为 el-tabs type=card，自带左右滚动
- 保留右键关闭其他/左侧/右侧/全部与首页不可关闭

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 components.d.ts            |   4 ++
 src/components/ty-tabs.vue | 133 ++++++++++++++++++++++---------------
 2 files changed, 84 insertions(+), 53 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index b792c67..4c5aa71 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -48,6 +48,8 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@@ -114,6 +116,8 @@ declare global {
   const ElSwitch: typeof import('element-plus/es')['ElSwitch']
   const ElTable: typeof import('element-plus/es')['ElTable']
   const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+  const ElTabPane: typeof import('element-plus/es')['ElTabPane']
+  const ElTabs: typeof import('element-plus/es')['ElTabs']
   const ElTag: typeof import('element-plus/es')['ElTag']
   const ElTree: typeof import('element-plus/es')['ElTree']
   const ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
diff --git a/src/components/ty-tabs.vue b/src/components/ty-tabs.vue
index 6ff4f89..253e9e2 100644
--- a/src/components/ty-tabs.vue
+++ b/src/components/ty-tabs.vue
@@ -1,30 +1,33 @@
 <template>
-  <div v-if="tabs.length" class="ty-tabs">
-    <div
-      v-for="tab in tabs"
-      :key="tab.path"
-      class="ty-tabs__item"
-      :class="{ 'is-active': tab.path === activePath }"
-      @click="emit('click', tab.path)"
-      @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)">
-        <icon type="iconify" icon="mdi:close" />
-      </span>
-    </div>
+  <el-tabs
+    v-if="tabs.length"
+    :model-value="activePath"
+    type="card"
+    class="ty-tabs"
+    @tab-change="onTabChange"
+  >
+    <el-tab-pane v-for="tab in tabs" :key="tab.path" :name="tab.path">
+      <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)">
+            <icon type="iconify" icon="mdi:close" />
+          </span>
+        </span>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
 
-    <div
-      v-if="menu.visible"
-      class="ty-tabs__context-menu"
-      :style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
-      @click.stop
-    >
-      <div class="ty-tabs__context-item" @click="onMenu('close-others')">关闭其他</div>
-      <div class="ty-tabs__context-item" @click="onMenu('close-left')">关闭左侧</div>
-      <div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
-      <div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
-    </div>
+  <div
+    v-if="menu.visible"
+    class="ty-tabs__context-menu"
+    :style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
+    @click.stop
+  >
+    <div class="ty-tabs__context-item" @click="onMenu('close-others')">关闭其他</div>
+    <div class="ty-tabs__context-item" @click="onMenu('close-left')">关闭左侧</div>
+    <div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
+    <div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
   </div>
 </template>
 
@@ -52,6 +55,10 @@ const emit = defineEmits<{
 
 const menu = reactive({ visible: false, x: 0, y: 0, path: '' })
 
+function onTabChange(name: string | number): void {
+  emit('click', String(name))
+}
+
 function openMenu(e: MouseEvent, tab: TabItem): void {
   menu.x = e.clientX
   menu.y = e.clientY
@@ -87,43 +94,63 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
 
 <style scoped lang="scss">
 .ty-tabs {
-  @apply flex items-center gap-1 overflow-x-auto px-2 h-9 bg-bg-base border-b border-solid;
+  @apply px-2 bg-bg-base border-b border-solid;
   border-color: var(--wm-border-color-light);
 
-  &__item {
-    @apply flex flex-shrink-0 cursor-pointer items-center gap-1 h-7 px-2.5 rounded-base text-sm text-text-regular;
-
-    &:hover {
-      @apply bg-bg-page;
-    }
-
-    &.is-active {
-      color: var(--el-color-primary);
-      background: var(--el-color-primary-light-9);
-    }
+  :deep(.el-tabs__header) {
+    @apply m-0;
   }
 
-  &__close {
-    @apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
-
-    &:hover {
-      @apply text-white;
-      background: var(--wm-color-text-placeholder);
-    }
+  :deep(.el-tabs__content) {
+    @apply hidden;
   }
 
-  &__context-menu {
-    @apply fixed z-50 min-w-[110px] py-1 bg-bg-base rounded-base border border-solid;
-    border-color: var(--wm-border-color-light);
-    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  :deep(.el-tabs__nav) {
+    @apply border-none;
   }
 
-  &__context-item {
-    @apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
+  :deep(.el-tabs__item) {
+    @apply h-8 text-sm text-text-regular;
+  }
 
-    &:hover {
-      @apply bg-bg-page;
-    }
+  :deep(.el-tabs__item.is-active) {
+    color: var(--el-color-primary);
+  }
+
+  :deep(.el-tabs__nav-prev),
+  :deep(.el-tabs__nav-next) {
+    @apply h-8 text-text-regular;
+  }
+}
+
+.ty-tabs__label {
+  @apply inline-flex items-center gap-1;
+}
+
+.ty-tabs__title {
+  @apply truncate;
+}
+
+.ty-tabs__close {
+  @apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
+
+  &:hover {
+    @apply text-white;
+    background: var(--wm-color-text-placeholder);
+  }
+}
+
+.ty-tabs__context-menu {
+  @apply fixed z-50 min-w-[110px] py-1 bg-bg-base rounded-base border border-solid;
+  border-color: var(--wm-border-color-light);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.ty-tabs__context-item {
+  @apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
+
+  &:hover {
+    @apply bg-bg-page;
   }
 }
 </style>