fix: fix some bug

src/layout/components/tag/index.vue

@@ -10,7 +10,32 @@
         <span v-if="index !== 0 " class="el-icon-close" @click="deleteMenu(item)"></span>
       </div>
     </el-scrollbar>
-    <slot></slot>
+    <!-- 右侧功能按钮 -->
+    <ul class="right-func">
+      <li>
+        <i :title="$t('refreshRoute')" class="el-icon-refresh-right rotate" @click="onFresh"></i>
+      </li>
+      <li>
+        <el-dropdown trigger="click" placement="bottom-end">
+          <i class="el-icon-arrow-down"></i>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="(item,key) in tagsViews"
+                :key="key"
+                :icon="item.icon"
+                :divided="item.divided"
+                :disabled="item.disabled"
+                @click="onClickDrop(key, item)"
+              >{{item.text}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </li>
+      <li>
+        <slot></slot>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -20,21 +45,52 @@ import { useRoute, useRouter } from "vue-router"
 import { ref, watchEffect, onBeforeMount, unref } from "vue"
 import { storageLocal } from "/@/utils/storage"
 import { emitter } from "/@/utils/mitt"
+import { toggleClass, removeClass } from "/@/utils/operate"
+import { nextTick } from 'vue'
+let refreshDiv = "refresh-div"
 
 export default {
   setup() {
+    const { deleteDynamicTag, dynamicRouteTags, dRoutes, routesLength } = useDynamicRoutesHook()
     const route = useRoute()
     const router = useRouter()
     const showTags = ref(storageLocal.getItem("tagsVal") || false)
 
-    const { deleteDynamicTag, dRoutes } = ref(useDynamicRoutesHook()).value
+    const tagsViews = ref([
+      {
+        icon: "el-icon-refresh-right",
+        text: "重新加载",
+        divided: false,
+        disabled: false
+      },
+      {
+        icon: "el-icon-close",
+        text: "关闭当前标签页",
+        divided: false,
+        disabled: unref(routesLength) > 1 ? false : true
+      },
+      {
+        icon: "el-icon-more",
+        text: "关闭其他标签页",
+        divided: true,
+        disabled: false
+      },
+      {
+        icon: "el-icon-minus",
+        text: "关闭全部标签页",
+        divided: false,
+        disabled: false
+      },
+    ])
 
     function deleteMenu(item) {
+      let tagslen = storageLocal.getItem("routesInStorage").length - 1
+      if (tagslen === 1) {
+        tagsViews.value[1].disabled = true
+      }
       deleteDynamicTag(item, route.path)
     }
 
-    const { dynamicRouteTags } = useDynamicRoutesHook()
-
     // 初始化页面刷新保证当前路由tabview存在
     let stop = watchEffect(() => {
       let parentPath = route.path.slice(0, route.path.lastIndexOf("/"))
@@ -46,6 +102,49 @@ export default {
       stop()
     })
 
+    function onFresh() {
+      toggleClass(true, refreshDiv, document.querySelector(".rotate"))
+      const { path, fullPath } = unref(route)
+      router.replace({
+        path: "/redirect" + fullPath
+      })
+      setTimeout(() => {
+        removeClass(document.querySelector(".rotate"), refreshDiv)
+      }, 600)
+    }
+
+    function onClickDrop(key, item) {
+      if (item.disabled) return
+      switch (key) {
+        case 0:
+          // 重新加载
+          onFresh()
+          break
+        case 1:
+          // 关闭当前标签页
+          deleteMenu({ meta: route.meta, path: route.path })
+          break
+        case 2:
+          // 关闭其他标签页
+          break
+        case 3:
+          // 关闭全部标签页
+          dRoutes.value = [{
+            path: "/welcome",
+            meta: {
+              title: "home",
+              icon: "el-icon-s-home",
+              showLink: true,
+              savedPosition: false,
+            },
+          }]
+          storageLocal.setItem("routesInStorage", dRoutes.value)
+          router.push("/welcome")
+          tagsViews.value[1].disabled = true
+          break
+      }
+    }
+
     onBeforeMount(() => {
       emitter.on("tagViewsChange", (key) => {
         if (unref(showTags) === key) return
@@ -56,7 +155,10 @@ export default {
     return {
       dynamicTagList: dRoutes,
       deleteMenu,
-      showTags
+      showTags,
+      onFresh,
+      tagsViews,
+      onClickDrop
     }
   },
 };
@@ -118,4 +220,78 @@ export default {
 :deep(.el-scrollbar__wrap) {
   height: 100vh;
 }
+
+.right-func {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
+  font-size: 16px;
+  li {
+    width: 40px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    border-right: 1px solid #ccc;
+    cursor: pointer;
+  }
+}
+
+.refresh-div {
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 600ms;
+  -moz-transition-property: -moz-transform;
+  -moz-transition-duration: 600ms;
+  -webkit-animation: rotate 600ms linear infinite;
+  -moz-animation: rotate 600ms linear infinite;
+  -o-animation: rotate 600ms linear infinite;
+  animation: rotate 600ms linear infinite;
+}
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-o-keyframes rotate {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.el-dropdown-menu {
+  padding: 0;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+.el-dropdown-menu__item,
+.el-menu-item {
+  padding: 0 14px;
+  overflow: hidden;
+}
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
 </style>

src/layout/components/tag/tagsHook.ts

@@ -1,4 +1,4 @@
-import { reactive, toRefs, nextTick } from "vue";
+import { reactive, toRefs, nextTick, computed } from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { useRouter } from "vue-router";
 
@@ -39,7 +39,6 @@ export function useDynamicRoutesHook() {
           let pathConcat = parentPath + "/" + arrItem.path;
           if (arrItem.path === value || pathConcat === value) {
             dynamic.dRoutes.push({ path: value, meta: arrItem.meta });
-            // console.log(dynamic.dRoutes)
           } else {
             if (arrItem.children && arrItem.children.length > 0) {
               concatPath(arrItem.children, value, parentPath);
@@ -49,14 +48,12 @@ export function useDynamicRoutesHook() {
       }
     }
     concatPath(router.options.routes, value, parentPath);
-
     // if (storageLocal.getItem("routesInStorage") && storageLocal.getItem("routesInStorage").length > 2) {
     //   let lens = storageLocal.getItem("routesInStorage").length
     //   let itemss = storageLocal.getItem("routesInStorage")[lens - 1]
     //   dynamic.dRoutes.push({ path: itemss.path, meta: itemss.meta })
     // }
-
-    // storageLocal.setItem("routesInStorage", dynamic.dRoutes)
+    storageLocal.setItem("routesInStorage", dynamic.dRoutes);
   };
   /**
    * @param value any 当前删除tag路由
@@ -68,7 +65,7 @@ export function useDynamicRoutesHook() {
     });
     // 从当前匹配到的路径中删除
     await dynamic.dRoutes.splice(valueIndex, 1);
-    // storageLocal.setItem("routesInStorage", dynamic.dRoutes)
+    storageLocal.setItem("routesInStorage", dynamic.dRoutes);
     if (current === obj.path) {
       // 如果删除当前激活tag就自动切换到最后一个tag
       let newRoute: any = dynamic.dRoutes.slice(-1);
@@ -79,10 +76,14 @@ export function useDynamicRoutesHook() {
       });
     }
   };
+  const routesLength = computed(() => {
+    return storageLocal.getItem("routesInStorage").length;
+  });
 
   return {
     ...toRefs(dynamic),
     dynamicRouteTags,
     deleteDynamicTag,
+    routesLength,
   };
 }