refactor: tagsview样式优化

Former-commit-id: 7e93655ff4cda803a12cbf057b6895604b0393ee

src/assets/icons/close.svg

@@ -0,0 +1 @@
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M19.41 18l8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29l-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29l8.29 8.29a1 1 0 0 0 1.41-1.41z" fill="currentColor"></path></svg>

src/assets/icons/close_all.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M26 17H10a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2z" fill="currentColor"></path></svg>

src/assets/icons/close_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" ></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>

src/assets/icons/close_other.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z" fill="currentColor"></path></svg>

src/assets/icons/close_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="translate(24 0) scale(-1 1)"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></g></svg>

src/assets/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M400 148l-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"></path></svg>

src/layout/components/TagsView/ScrollPane.vue

@@ -67,7 +67,7 @@ function moveToTarget(currentTag: TagView) {
   } else if (lastTag === currentTag) {
     $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
   } else {
-    const tagListDom = document.getElementsByClassName("tags-view-item");
+    const tagListDom = document.getElementsByClassName("tags-view__item");
     const currentIndex = visitedViews.value.findIndex(
       (item) => item === currentTag
     );

src/layout/components/TagsView/index.vue

@@ -1,38 +1,38 @@
 <template>
-  <div id="tags-view-container" class="tags-view-container">
+  <div class="tags-view__container">
-    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
+    <scroll-pane ref="scrollPaneRef" class="tags-view__wrapper" @scroll="handleScroll">
       <router-link v-for="tag in visitedViews" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view-item"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view__item"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openMenu(tag, $event)">
         {{ generateTitle(tag.meta.title) }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)">
+        <span v-if="!isAffix(tag)" class="icon-close" @click.prevent.stop="closeSelectedTag(tag)">
-          <Close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
+          <svg-icon icon-class="close" />
         </span>
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="tags-view__menu">
       <li @click="refreshSelectedTag(selectedTag)">
-        <refresh-right style="width: 1em; height: 1em" />
+        <svg-icon icon-class="refresh" />
         刷新
       </li>
       <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <close style="width: 1em; height: 1em" />
+        <svg-icon icon-class="close" />
         关闭
       </li>
       <li @click="closeOtherTags">
-        <circle-close style="width: 1em; height: 1em" />
+        <svg-icon icon-class="close_other" />
         关闭其它
       </li>
       <li v-if="!isFirstView()" @click="closeLeftTags">
-        <back style="width: 1em; height: 1em" />
+        <svg-icon icon-class="close_left" />
         关闭左侧
       </li>
       <li v-if="!isLastView()" @click="closeRightTags">
-        <right style="width: 1em; height: 1em" />
+        <svg-icon icon-class="close_right" />
         关闭右侧
       </li>
       <li @click="closeAllTags(selectedTag)">
-        <circle-close style="width: 1em; height: 1em" />
+        <svg-icon icon-class="close_all" />
         关闭所有
       </li>
     </ul>
@@ -56,13 +56,7 @@ import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
 import { TagView } from "@/types";
 
 import ScrollPane from "./ScrollPane.vue";
-import {
+import SvgIcon from '@/components/SvgIcon/index.vue';
-  Close,
-  RefreshRight,
-  CircleClose,
-  Back,
-  Right,
-} from "@element-plus/icons-vue";
 import { generateTitle } from "@/utils/i18n";
 import useStore from "@/store";
 
@@ -281,20 +275,20 @@ function handleScroll() {
 
 onMounted(() => {
   initTags();
-   addTags();
+  addTags();
 });
 </script>
 
 <style lang='scss' scoped>
-.tags-view-container {
+.tags-view__container {
   height: 34px;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
   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__wrapper {
-    .tags-view-item {
+    .tags-view__item {
       display: inline-block;
       position: relative;
       cursor: pointer;
@@ -316,26 +310,30 @@ onMounted(() => {
         margin-right: 15px;
       }
 
-      &.active {
+      &:hover {
-        background-color: #42b983;
+        color: var(--el-color-primary);
-        color: #fff;
+      }
-        border-color: #42b983;
 
-        &::before {
+      &.active {
-          content: "";
+        background-color: var(--el-color-primary-light-9);
-          background: #fff;
+        color: var(--el-color-primary);
-          display: inline-block;
+      }
-          width: 8px;
+
-          height: 8px;
+      .icon-close {
-          border-radius: 50%;
+        border-radius: 50%;
-          position: relative;
+        text-align: center;
-          margin-right: 2px;
+
+        &:hover {
+          background-color: #ccc;
+          color: #fff;
         }
       }
     }
+
+
   }
 
-  .contextmenu {
+  .tags-view__menu {
     margin: 0;
     background: #fff;
     z-index: 3000;
@@ -359,34 +357,4 @@ onMounted(() => {
     }
   }
 }
-</style>
-
-<style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-  .tags-view-item {
-    .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 0px;
-      border-radius: 50%;
-      text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-      transform-origin: 100% 50%;
-
-      &:before {
-        transform: scale(0.6);
-        display: inline-block;
-        vertical-align: -3px;
-      }
-
-      &:hover {
-        background-color: #b4bccc;
-        color: #fff;
-        width: 12px !important;
-        height: 12px !important;
-      }
-    }
-  }
-}
 </style>