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,
   };
 }

src/layout/index.vue

@@ -13,21 +13,10 @@
         <navbar v-if="!containerHiddenSideBar" />
         <!-- tabs标签页 -->
         <tag>
-          <!-- 右侧功能按钮 -->
-          <ul class="right-func">
-            <li>
-              <i :title="$t('refreshRoute')" class="el-icon-refresh-right rotate" @click="onFresh"></i>
-            </li>
-            <li>
-              <i class="el-icon-arrow-down"></i>
-            </li>
-            <li>
-              <i
-                :class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'"
-                @click="onFullScreen"
-              ></i>
-            </li>
-          </ul>
+          <i
+            :class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'"
+            @click="onFullScreen"
+          ></i>
         </tag>
       </div>
       <!-- 主体内容 -->
@@ -57,7 +46,6 @@ import { useStore } from "vuex";
 import { useEventListener, useFullscreen } from "@vueuse/core";
 import { toggleClass, removeClass } from "/@/utils/operate";
 let hiddenMainContainer = "hidden-main-container";
-let refreshDiv = "refresh-div";
 import options from "/@/settings";
 import { useRouter, useRoute } from "vue-router";
 
@@ -154,17 +142,6 @@ export default {
       }
     }
 
-    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);
-    }
-
     onMounted(() => {
       const isMobile = $_isMobile();
       if (isMobile) {
@@ -186,8 +163,7 @@ export default {
       ...toRefs(set),
       handleClickOutside,
       containerHiddenSideBar,
-      onFullScreen,
-      onFresh
+      onFullScreen
     };
   }
 };
@@ -240,64 +216,7 @@ $sideBarWidth: 210px;
   width: 100%;
 }
 
-.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;
-  }
-}
 .hidden-main-container {
   margin-left: 0 !important;
 }
-.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);
-  }
-}
 </style>