components.d.ts

@@ -48,8 +48,6 @@ 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']
@@ -116,8 +114,6 @@ 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']

index.html

@@ -2,9 +2,9 @@
 <html lang="">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/png" href="/logo.png">
+    <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>投云科技</title>
+    <title>Vite App</title>
   </head>
   <body>
     <div id="app"></div>

src/components/ty-tabs.vue

@@ -1,22 +1,18 @@
 <template>
-  <el-tabs
+  <div v-if="tabs.length" class="ty-tabs">
-    v-if="tabs.length"
+    <div
-    :model-value="activePath"
+      v-for="tab in tabs"
-    type="card"
+      :key="tab.path"
-    class="ty-tabs"
+      class="ty-tabs__item"
-    @tab-change="onTabChange"
+      :class="{ 'is-active': tab.path === activePath }"
+      @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__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>
+    </div>
-      </template>
-    </el-tab-pane>
-  </el-tabs>
 
     <div
       v-if="menu.visible"
@@ -29,6 +25,7 @@
       <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">
@@ -55,10 +52,6 @@ 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
@@ -94,63 +87,43 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
 
 <style scoped lang="scss">
 .ty-tabs {
-  @apply px-2 bg-bg-base border-b border-solid;
+  @apply flex items-center gap-1 overflow-x-auto px-2 h-9 bg-bg-base border-b border-solid;
   border-color: var(--wm-border-color-light);
 
-  :deep(.el-tabs__header) {
+  &__item {
-    @apply m-0;
+    @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__content) {
+    &.is-active {
-    @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),
+  &__close {
-  :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 {
+  &__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 {
+  &__context-item {
     @apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
 
     &:hover {
       @apply bg-bg-page;
     }
+  }
 }
 </style>