From 00c2aab7dd45992975ce670397351a7bf6af4391 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Mon, 22 Apr 2024 00:14:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20tabs=E7=9A=84=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Tabs/index.vue | 65 +++++++++++++++++++++++++---
 src/router/route.ts                  |  2 +-
 src/store/route-list.ts              | 11 ++++-
 3 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 54f31b0..1886356 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -19,23 +19,23 @@
             <template #icon><icon-refresh /></template>
             <template #default>刷新</template>
           </a-doption>
-          <a-doption>
+          <a-doption @click="closeCurrent">
             <template #icon><icon-close /></template>
             <template #default>关闭当前</template>
           </a-doption>
-          <a-doption>
+          <a-doption @click="closeSides('left')">
             <template #icon><icon-left /></template>
             <template #default>关闭左侧</template>
           </a-doption>
-          <a-doption>
+          <a-doption @click="closeSides('right')">
             <template #icon><icon-right /></template>
             <template #default>关闭右侧</template>
           </a-doption>
-          <a-doption>
+          <a-doption @click="closeOther('other')">
             <template #icon><icon-close-circle /></template>
             <template #default>关闭其它</template>
           </a-doption>
-          <a-doption>
+          <a-doption @click="closeOther('all')">
             <template #icon><icon-folder-delete /></template>
             <template #default>全部关闭</template>
           </a-doption>
@@ -67,7 +67,7 @@ const onTabs = (key: string) => {
 // 删除当前标签页并跳转到最后一个标签页
 const onDelete = (key: string) => {
   routerStore.removeTabsList(key);
-  routerStore.removeRouteNames(key);
+  routerStore.removeRouteName(key);
   if (tabsList.value.length == 0) return;
   router.push(tabsList.value.at(-1).path);
 };
@@ -76,12 +76,63 @@ const onDelete = (key: string) => {
 const refresh = () => {
   const themeStore = useThemeConfig();
   themeStore.setRefreshPage(false);
-  currentRoute.value.meta.keepAlive && routerStore.removeRouteNames(currentRoute.value.name);
+  currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name);
   setTimeout(() => {
     themeStore.setRefreshPage(true);
     currentRoute.value.meta.keepAlive && routerStore.setRouteNames(currentRoute.value.name);
   }, 0);
 };
+
+// 关闭当前
+const closeCurrent = () => {
+  onDelete(currentRoute.value.name);
+};
+
+// 关闭右侧&关闭左侧
+const closeSides = (type: string) => {
+  // 获得当前index
+  let currentIndex = tabsList.value.findIndex((item: Menu.MenuOptions) => item.name === currentRoute.value.name);
+  // 过滤出两侧可关闭的 affix: false 表示可关闭
+  let rightList = tabsList.value.filter((item: Menu.MenuOptions, index: number) => {
+    if (type == "right") {
+      if (index > currentIndex && !item.meta.affix) return item;
+    } else {
+      if (index < currentIndex && !item.meta.affix) return item;
+    }
+  });
+  // 返回可关闭名称
+  let rightNames = rightList.map((item: Menu.MenuOptions) => item.name);
+  // 删除右侧
+  tabsList.value = tabsList.value.filter((item: Menu.MenuOptions) => !rightNames.includes(item.name));
+  // 删除缓存
+  routerStore.removeRouteNames(rightNames);
+};
+
+// 关闭其它&关闭全部
+const closeOther = (type: string) => {
+  // 过滤出可关闭项 affix: false 表示可关闭
+  let list = tabsList.value.filter((item: Menu.MenuOptions) => {
+    if (type == "other") {
+      if (item.name != currentRoute.value.name && !item.meta.affix) {
+        return item;
+      }
+    } else {
+      if (!item.meta.affix) {
+        return item;
+      }
+    }
+  });
+  // 返回可关闭名称
+  let rightNames = list.map((item: Menu.MenuOptions) => item.name);
+  // 删除可关闭项
+  tabsList.value = tabsList.value.filter((item: Menu.MenuOptions) => !rightNames.includes(item.name));
+  // 删除缓存
+  routerStore.removeRouteNames(rightNames);
+  // 关闭全部，跳转最后一个
+  if (tabsList.value.length != 0 && !currentRoute.value.meta.affix && type == "all") {
+    router.push(tabsList.value.at(-1).path);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/router/route.ts b/src/router/route.ts
index e43aae3..7ad21da 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -199,7 +199,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           title: "about-project",
           hide: false,
           keepAlive: true,
-          affix: false,
+          affix: true,
           link: "",
           iframe: false,
           roles: ["admin", "common"],
diff --git a/src/store/route-list.ts b/src/store/route-list.ts
index 91c2b9a..52cbdc9 100644
--- a/src/store/route-list.ts
+++ b/src/store/route-list.ts
@@ -69,13 +69,20 @@ export const useRoutesListStore = defineStore("routeList", {
       this.tabsList.splice(index, 1);
     },
     /**
-     * 删除缓存路由名，用于取消页面缓存
+     * 删除缓存路由名，用于取消页面缓存，单个删除
      * @param {string} key 路由名
      */
-    removeRouteNames(key: string) {
+    removeRouteName(key: string) {
       const index = this.cacheRoutes.findIndex((item: string) => item === key);
       if (index === -1) return;
       this.cacheRoutes.splice(index, 1);
+    },
+    /**
+     * 删除缓存路由名，用于取消页面缓存，批量删除
+     * @param {Array} list 路由名
+     */
+    removeRouteNames(list: Array<string>) {
+      this.cacheRoutes = this.cacheRoutes.filter((item: string) => !list.includes(item));
     }
   }
 });