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,30 +1,33 @@
 <template>
-  <div v-if="tabs.length" class="ty-tabs">
+  <el-tabs
-    <div
+    v-if="tabs.length"
-      v-for="tab in tabs"
+    :model-value="activePath"
-      :key="tab.path"
+    type="card"
-      class="ty-tabs__item"
+    class="ty-tabs"
-      :class="{ 'is-active': tab.path === activePath }"
+    @tab-change="onTabChange"
-      @click="emit('click', tab.path)"
+  >
-      @contextmenu.prevent="openMenu($event, tab)"
+    <el-tab-pane v-for="tab in tabs" :key="tab.path" :name="tab.path">
-    >
+      <template #label>
-      <span class="ty-tabs__title">{{ tab.title }}</span>
+        <span class="ty-tabs__label" @contextmenu.prevent="openMenu($event, tab)">
-      <span v-if="tab.closable" class="ty-tabs__close" @click.stop="emit('remove', tab.path)">
+          <span class="ty-tabs__title">{{ tab.title }}</span>
-        <icon type="iconify" icon="mdi:close" />
+          <span v-if="tab.closable" class="ty-tabs__close" @click.stop="emit('remove', tab.path)">
-      </span>
+            <icon type="iconify" icon="mdi:close" />
-    </div>
+          </span>
+        </span>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
 
-    <div
+  <div
-      v-if="menu.visible"
+    v-if="menu.visible"
-      class="ty-tabs__context-menu"
+    class="ty-tabs__context-menu"
-      :style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
+    :style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
-      @click.stop
+    @click.stop
-    >
+  >
-      <div class="ty-tabs__context-item" @click="onMenu('close-others')">关闭其他</div>
+    <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-left')">关闭左侧</div>
-      <div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
+    <div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
-      <div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
+    <div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
-    </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 {
+  :deep(.el-tabs__header) {
-    @apply flex flex-shrink-0 cursor-pointer items-center gap-1 h-7 px-2.5 rounded-base text-sm text-text-regular;
+    @apply m-0;
-
-    &:hover {
-      @apply bg-bg-page;
-    }
-
-    &.is-active {
-      color: var(--el-color-primary);
-      background: var(--el-color-primary-light-9);
-    }
   }
 
-  &__close {
+  :deep(.el-tabs__content) {
-    @apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
+    @apply hidden;
-
-    &:hover {
-      @apply text-white;
-      background: var(--wm-color-text-placeholder);
-    }
   }
 
-  &__context-menu {
+  :deep(.el-tabs__nav) {
-    @apply fixed z-50 min-w-[110px] py-1 bg-bg-base rounded-base border border-solid;
+    @apply border-none;
-    border-color: var(--wm-border-color-light);
-    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
   }
 
-  &__context-item {
+  :deep(.el-tabs__item) {
-    @apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
+    @apply h-8 text-sm text-text-regular;
+  }
 
-    &:hover {
+  :deep(.el-tabs__item.is-active) {
-      @apply bg-bg-page;
+    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>