feat(layout): 多页签改用 Element Plus tabs（滚动箭头更优雅）

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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']

src/components/ty-tabs.vue

@@ -1,18 +1,22 @@
 <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)"
+  <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>
-    </div>
+        </span>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
 
   <div
     v-if="menu.visible"
@@ -25,7 +29,6 @@
     <div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
     <div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -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,23 +94,44 @@ 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;
+  :deep(.el-tabs__header) {
+    @apply m-0;
   }
 
-    &.is-active {
+  :deep(.el-tabs__content) {
+    @apply hidden;
+  }
+
+  :deep(.el-tabs__nav) {
+    @apply border-none;
+  }
+
+  :deep(.el-tabs__item) {
+    @apply h-8 text-sm text-text-regular;
+  }
+
+  :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;
   }
 }
 
-  &__close {
+.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 {
@@ -112,18 +140,17 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
   }
 }
 
-  &__context-menu {
+.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%);
 }
 
-  &__context-item {
+.ty-tabs__context-item {
   @apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
 
   &:hover {
     @apply bg-bg-page;
   }
 }
-}
 </style>