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,33 +1,30 @@
 <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)"
-    <el-tab-pane v-for="tab in tabs" :key="tab.path" :name="tab.path">
+      @contextmenu.prevent="openMenu($event, tab)"
-      <template #label>
+    >
-        <span class="ty-tabs__label" @contextmenu.prevent="openMenu($event, tab)">
+      <span class="ty-tabs__title">{{ tab.title }}</span>
-          <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" class="ty-tabs__close" @click.stop="emit('remove', tab.path)">
+        <icon type="iconify" icon="mdi:close" />
-            <icon type="iconify" icon="mdi:close" />
+      </span>
-          </span>
+    </div>
-        </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>
 
@@ -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;
+    }
+
+    &.is-active {
+      color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+    }
   }
 
-  :deep(.el-tabs__content) {
+  &__close {
-    @apply hidden;
+    @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__nav) {
+  &__context-menu {
-    @apply border-none;
+    @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__item) {
+  &__context-item {
-    @apply h-8 text-sm text-text-regular;
+    @apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
-  }
 
-  :deep(.el-tabs__item.is-active) {
+    &:hover {
-    color: var(--el-color-primary);
+      @apply bg-bg-page;
-  }
+    }
-
-  :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>