From e26a0f949d42214cb232ba9be482636374d954fd Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 21 Nov 2021 11:00:13 +0800
Subject: [PATCH] perf: tag

---
 src/layout/components/appMain.vue          |  2 +-
 src/layout/components/screenfull/index.vue |  2 +-
 src/layout/components/tag/index.scss       | 51 ++++++++++++++++------
 src/layout/components/tag/index.vue        | 14 ++++--
 src/layout/index.vue                       | 28 +++++++-----
 src/store/modules/settings.ts              |  7 ++-
 src/style/sidebar.scss                     | 15 ++++---
 7 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 7533c16e9..d1ee6053d 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -74,7 +74,7 @@ const transitionMain = defineComponent({
     :style="[
       hideTabs && layout ? 'padding-top: 48px;' : '',
       !hideTabs && layout ? 'padding-top: 85px;' : '',
-      hideTabs && !layout ? 'padding-top: 62px' : '',
+      hideTabs && !layout ? 'padding-top: 48px' : '',
       !hideTabs && !layout ? 'padding-top: 98px;' : ''
     ]"
   >
diff --git a/src/layout/components/screenfull/index.vue b/src/layout/components/screenfull/index.vue
index b3f153578..80b3e0656 100644
--- a/src/layout/components/screenfull/index.vue
+++ b/src/layout/components/screenfull/index.vue
@@ -23,7 +23,7 @@ const { isFullscreen, toggle } = useFullscreen();
 <style lang="scss" scoped>
 .screen-full {
   width: 36px;
-  height: 62px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: space-around;
diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss
index adfacb987..97ae3b2e1 100644
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -58,41 +58,64 @@
   }
 }
 
+@keyframes close {
+  from {
+    transform: translate(-50%, -50%);
+  }
+
+  to {
+    transform: translate(0, -50%);
+  }
+}
+
 .tags-view {
   width: 100%;
   font-size: 14px;
   display: flex;
   align-items: center;
-  box-shadow: 0 0 1px #888;
   color: var(--el-text-color-regular);
   background: #fff;
+  position: relative;
+  box-shadow: 0 0 1px #888;
 
   .scroll-item {
     border-radius: 3px 3px 0 0;
-    padding: 2px 6px;
-    display: inline-block;
+    padding: 0 6px 0 6px;
+    box-shadow: 0 0 1px #888;
     position: relative;
     margin-right: 4px;
     height: 28px;
-    line-height: 25px;
+    display: inline-block;
+    line-height: 28px;
     transition: all 0.4s;
+    cursor: pointer;
 
     .el-icon-close {
       font-size: 10px;
       color: #1890ff;
       cursor: pointer;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: font-size 0.2s;
 
       &:hover {
         border-radius: 50%;
         color: #fff;
         background: #b4bccc;
-        font-size: 14px;
+        font-size: 13px;
       }
     }
 
     &.is-closable:not(:first-child) {
       &:hover {
-        padding-right: 8px;
+        padding-right: 18px;
+
+        &:not(.is-active) {
+          .el-icon-close {
+            animation: close 200ms ease-in forwards;
+          }
+        }
       }
     }
   }
@@ -213,11 +236,19 @@
   cursor: not-allowed;
 }
 
-.is-active {
+.scroll-item.is-active {
   background-color: #eaf4fe;
   position: relative;
   color: #fff;
 
+  &:not(:first-child) {
+    padding-right: 18px;
+  }
+
+  .el-icon-close {
+    transform: translate(0, -50%);
+  }
+
   a {
     color: #1890ff;
   }
@@ -252,14 +283,8 @@
   }
 }
 
-/* 卡片模式 */
-.card-active {
-  border: 1px solid #1890ff;
-}
-
 /* 卡片模式下鼠标移入显示蓝色边框 */
 .card-in {
-  border: 1px solid #1890ff;
   color: #1890ff;
 
   a {
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 111eb2a3e..a2fe1789b 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -38,6 +38,7 @@ import { transformI18n } from "/@/utils/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
 import { handleAliveRoute, delAliveRoutes } from "/@/router";
+import { useSettingStoreHook } from "/@/store/modules/settings";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
@@ -49,6 +50,7 @@ const activeIndex = ref<number>(-1);
 let refreshButton = "refresh-button";
 const instance = getCurrentInstance();
 let relativeStorage: relativeStorageType;
+const pureSetting = useSettingStoreHook();
 const showTags = ref(storageLocal.getItem("tagsVal") || false);
 const tabDom = templateRef<HTMLElement | null>("tabDom", null);
 const containerDom = templateRef<HTMLElement | null>("containerDom", null);
@@ -471,7 +473,9 @@ function openMenu(tag, e) {
   } else {
     buttonLeft.value = left;
   }
-  buttonTop.value = e.clientY + 10;
+  pureSetting.hiddenSideBar
+    ? (buttonTop.value = e.clientY)
+    : (buttonTop.value = e.clientY - 40);
   setTimeout(() => {
     visible.value = true;
   }, 10);
@@ -479,7 +483,10 @@ function openMenu(tag, e) {
 
 // 触发tags标签切换
 function tagOnClick(item) {
-  showMenuModel(item.path);
+  router.push({
+    path: item?.path
+  });
+  showMenuModel(item?.path);
 }
 
 // 鼠标移入
@@ -573,8 +580,9 @@ onBeforeMount(() => {
           @contextmenu.prevent="openMenu(item, $event)"
           @mouseenter.prevent="onMouseenter(item, index)"
           @mouseleave.prevent="onMouseleave(item, index)"
+          @click="tagOnClick(item)"
         >
-          <router-link :to="item.path" @click="tagOnClick(item)">{{
+          <router-link :to="item.path">{{
             transformI18n(item.meta.title, item.meta.i18n)
           }}</router-link>
           <el-icon
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 46822c83a..0d8d7cdde 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import {
   h,
-  ref,
-  unref,
   reactive,
   computed,
   onMounted,
@@ -29,9 +27,8 @@ import setting from "./components/setting/index.vue";
 import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 
-const instance = getCurrentInstance().appContext.app.config.globalProperties;
-const hiddenSideBar = ref(instance.$config?.HiddenSideBar);
 const pureSetting = useSettingStoreHook();
+const instance = getCurrentInstance().appContext.app.config.globalProperties;
 
 // 清空缓存后从serverConfig.json读取默认配置并赋值到storage中
 const layout = computed(() => {
@@ -136,9 +133,9 @@ const $_resizeHandler = () => {
 };
 
 function onFullScreen() {
-  unref(hiddenSideBar)
-    ? (hiddenSideBar.value = false)
-    : (hiddenSideBar.value = true);
+  pureSetting.hiddenSideBar
+    ? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
+    : pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
 }
 
 onMounted(() => {
@@ -167,10 +164,10 @@ const layoutHeader = defineComponent({
       },
       {
         default: () => [
-          !hiddenSideBar.value && layout.value.includes("vertical")
+          !pureSetting.hiddenSideBar && layout.value.includes("vertical")
             ? h(navbar)
             : h("div"),
-          !hiddenSideBar.value && layout.value.includes("horizontal")
+          !pureSetting.hiddenSideBar && layout.value.includes("horizontal")
             ? h(Horizontal)
             : h("div"),
           h(
@@ -183,7 +180,7 @@ const layoutHeader = defineComponent({
                   { onClick: onFullScreen },
                   {
                     default: () => [
-                      !hiddenSideBar.value ? h(fullScreen) : h(exitScreen)
+                      !pureSetting.hiddenSideBar ? h(fullScreen) : h(exitScreen)
                     ]
                   }
                 )
@@ -208,8 +205,15 @@ const layoutHeader = defineComponent({
       class="drawer-bg"
       @click="handleClickOutside(false)"
     />
-    <Vertical v-show="!hiddenSideBar && layout.includes('vertical')" />
-    <div :class="['main-container', hiddenSideBar ? 'main-hidden' : '']">
+    <Vertical
+      v-show="!pureSetting.hiddenSideBar && layout.includes('vertical')"
+    />
+    <div
+      :class="[
+        'main-container',
+        pureSetting.hiddenSideBar ? 'main-hidden' : ''
+      ]"
+    >
       <div v-if="set.fixedHeader">
         <layout-header />
         <!-- 主体内容 -->
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 2b1fad1d8..35eea646f 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -5,13 +5,15 @@ import { getConfig } from "/@/config";
 interface SettingState {
   title: string;
   fixedHeader: boolean;
+  hiddenSideBar: boolean;
 }
 
 export const useSettingStore = defineStore({
   id: "pure-setting",
   state: (): SettingState => ({
     title: getConfig().Title,
-    fixedHeader: getConfig().FixedHeader
+    fixedHeader: getConfig().FixedHeader,
+    hiddenSideBar: getConfig().HiddenSideBar
   }),
   getters: {
     getTitle() {
@@ -19,6 +21,9 @@ export const useSettingStore = defineStore({
     },
     getFixedHeader() {
       return this.fixedHeader;
+    },
+    getHiddenSideBar() {
+      return this.HiddenSideBar;
     }
   },
   actions: {
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 2363e1691..87574b502 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -170,7 +170,7 @@
     justify-content: space-around;
     background: $menuBg;
     width: 100%;
-    height: 62px;
+    height: 48px;
     align-items: center;
 
     .horizontal-header-left {
@@ -212,7 +212,7 @@
       justify-content: flex-end;
 
       .dropdown-badge {
-        height: 62px;
+        height: 48px;
         color: $subMenuActiveText;
 
         &:hover {
@@ -229,7 +229,7 @@
       }
 
       .globalization {
-        height: 62px;
+        height: 48px;
         width: 40px;
         padding: 11px;
         cursor: pointer;
@@ -242,7 +242,7 @@
 
       .el-dropdown-link {
         width: 100px;
-        height: 62px;
+        height: 48px;
         padding: 10px;
         display: flex;
         align-items: center;
@@ -266,7 +266,7 @@
       }
 
       .el-icon-setting {
-        height: 62px;
+        height: 48px;
         width: 40px;
         padding: 12px;
         display: flex;
@@ -297,7 +297,8 @@
 
     .submenu-title-noDropdown,
     .el-sub-menu__title {
-      height: 60px;
+      height: 48px;
+      line-height: 48px;
       background: $menuBg;
     }
 
@@ -363,6 +364,8 @@
 
     .el-menu-item,
     .el-sub-menu__title {
+      height: 50px;
+      line-height: 50px;
       color: $menuText;
       background-color: $subMenuBg;