From ed74f36a7214980255fa978b01a9c6d36d87d45a Mon Sep 17 00:00:00 2001
From: pengmingdong <3393408122@qq.com>
Date: Wed, 17 Apr 2024 16:52:21 +0800
Subject: [PATCH] =?UTF-8?q?update:=20Tab=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                               |   1 +
 src/layout/components/TagsView/index.vue | 159 +++++++++++++----------
 2 files changed, 91 insertions(+), 69 deletions(-)

diff --git a/.gitignore b/.gitignore
index 40df4749..50df089f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ selenium-debug.log
 *.local
 
 package-lock.json
+pnpm-lock.yaml
 yarn.lock
 
 # 编译生成的文件
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 1df486e3..af8ca2ce 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,30 +1,31 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
-        :key="tag.path"
-        :data-path="tag.path"
-        :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
-        class="tags-view-item"
-        :style="activeStyle(tag)"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
-      >
-        {{ tag.title }}
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
-          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
-        </span>
-      </router-link>
+      <div class="tabs-wrapper">
+        <div class="tabs-nav">
+          <router-link
+            v-for="tag in visitedViews"
+            :key="tag.path"
+            :data-path="tag.path"
+            :class="{ active: isActive(tag), affix: isAffix(tag) }"
+            :to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
+            class="tags-view-item"
+            @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+            @contextmenu.prevent="openMenu(tag, $event)"
+          >
+            {{ tag.title }}
+            <el-icon v-if="!isAffix(tag)" class="close-icon" @click.prevent.stop="closeSelectedTag(tag)"><Close /></el-icon>
+          </router-link>
+        </div>
+      </div>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em;" /> 刷新页面</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" /> 关闭当前</li>
-      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em;" /> 关闭其他</li>
-      <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em;" /> 关闭左侧</li>
-      <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em;" /> 关闭右侧</li>
-      <li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em;" /> 全部关闭</li>
+      <li @click="refreshSelectedTag(selectedTag)"><refresh-right class="mr-5px" style="width: 1em; height: 1em;" /> 刷新页面</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close class="mr-5px" style="width: 1em; height: 1em;" /> 关闭当前</li>
+      <li @click="closeOthersTags"><circle-close class="mr-5px" style="width: 1em; height: 1em;" /> 关闭其他</li>
+      <li v-if="!isFirstView()" @click="closeLeftTags"><back class="mr-5px" style="width: 1em; height: 1em;" /> 关闭左侧</li>
+      <li v-if="!isLastView()" @click="closeRightTags"><right class="mr-5px" style="width: 1em; height: 1em;" /> 关闭右侧</li>
+      <li @click="closeAllTags(selectedTag)"><circle-close class="mr-5px" style="width: 1em; height: 1em;" /> 全部关闭</li>
     </ul>
   </div>
 </template>
@@ -68,13 +69,6 @@ watch(visible, (value) => {
 const isActive = (r: TagView): boolean => {
     return r.path === route.path;
 }
-const activeStyle = (tag: TagView) => {
-    if (!isActive(tag)) return {};
-    return {
-        "background-color": theme.value,
-        "border-color": theme.value
-    };
-}
 const isAffix = (tag: TagView) => {
     return tag.meta && tag.meta.affix;
 }
@@ -238,49 +232,62 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
-  width: 100%;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
+  --el-tabs-header-height: 40px;
+  .tabs-wrapper {
+    height: calc(var(--el-tabs-header-height) + 2px);
+    border-bottom: 1px solid var(--el-border-color-light);
+    .tabs-nav {
       position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 23px;
-      background-color: var(--el-bg-color);
+      float: left;
+      display: flex;
+      white-space: nowrap;
       border: 1px solid var(--el-border-color-light);
-      color: #495060;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-      &:hover {
+      border-radius: 4px 4px 0 0;
+      transition: transform var(--el-transition-duration);
+      margin-bottom: -1px;
+      scrollbar-color: var(--el-fill-color-light);
+    }
+    .tags-view-item {
+      position: relative;
+      padding: 0 20px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--el-font-size-base);
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+      white-space: nowrap;
+      border-bottom: 1px solid transparent;
+      border-left: 1px solid var(--el-border-color-light);
+      transition: color var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier),
+        padding var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+      &:hover,
+      &.active {
         color: var(--el-color-primary);
       }
-      &:first-of-type {
-        margin-left: 15px;
-      }
-      &:last-of-type {
-        margin-right: 15px;
+      &:hover:not(.affix) {
+        padding-left: 13px;
+        padding-right: 13px;
+        > .close-icon {
+          width: 14px;
+        }
       }
-      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-        &::before {
-          content: "";
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 5px;
+      &.active:not(.affix) {
+        padding-left: 20px;
+        padding-right: 20px;
+        > .close-icon {
+          width: 14px;
         }
       }
+      .close-icon {
+        position: relative;
+        right: -2px;
+        width: 0;
+        height: 14px;
+        margin-left: 5px;
+        transition: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+      }
     }
   }
   .contextmenu {
@@ -291,15 +298,29 @@ onMounted(() => {
     list-style-type: none;
     padding: 5px 0;
     border-radius: 4px;
-    font-size: 12px;
+    font-size: var(--el-font-size-base);
+    color: var(--el-text-color-regular);
     font-weight: 400;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    box-shadow: var(--el-box-shadow-light);
     li {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      list-style: none;
+      line-height: 22px;
+      padding: 5px 16px;
       margin: 0;
-      padding: 7px 16px;
+      border-top: 1px solid var(--el-border-color-lighter);
+      font-size: var(--el-font-size-base);
+      color: var(--el-text-color-regular);
       cursor: pointer;
+      outline: none;
+      &:first-child {
+        border: none;
+      }
       &:hover {
-        background: #eee;
+        background-color: #ecf5ff;
+        color: #409eff;
       }
     }
   }
-- 
Gitee