From e3773fd8b57db912f98731938972d34845123f5f Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Fri, 3 May 2024 18:27:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20tabs=E4=B8=8D=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=E7=9A=84=E8=B7=AF=E7=94=B1=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E5=92=8C=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/system-settings/index.vue       | 18 +++++++++++++++++-
 src/router/index.ts                            |  4 ++--
 src/router/route-output.ts                     | 10 +++++-----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/layout/components/Header/components/system-settings/index.vue b/src/layout/components/Header/components/system-settings/index.vue
index 7b6f58e..f659c72 100644
--- a/src/layout/components/Header/components/system-settings/index.vue
+++ b/src/layout/components/Header/components/system-settings/index.vue
@@ -14,7 +14,7 @@
         </div>
         <div class="flex-row">
           <div>标签栏</div>
-          <a-switch v-model="isTabs" />
+          <a-switch v-model="isTabs" @change="tabsChange" />
         </div>
         <div class="flex-row">
           <div>底部栏</div>
@@ -50,15 +50,31 @@
 
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
+import { useRoutesListStore } from "@/store/modules/route-list";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { currentlyRoute } from "@/router/route-output";
 const themeStore = useThemeConfig();
+const routerStore = useRoutesListStore();
 const { collapsed, isBreadcrumb, isTabs, isFooter } = storeToRefs(themeStore);
+const { tabsList, cacheRoutes } = storeToRefs(routerStore);
+const route = useRoute();
 const props = defineProps({
   systemOpen: {
     type: Boolean,
     default: false
   }
 });
+// 是否关闭tabs栏
+// 如果关闭，那么所有tabs全部取消、所有页面缓存全部取消
+// 如果开启，那么添加当前路由到tabs
+const tabsChange = (e: Boolean) => {
+  if (!e) {
+    tabsList.value = [];
+    cacheRoutes.value = [];
+  } else {
+    currentlyRoute(route.name as string);
+  }
+};
 const emits = defineEmits(["systemCancel"]);
 const handleOk = () => {
   emits("systemCancel");
diff --git a/src/router/index.ts b/src/router/index.ts
index 2d7fc2a..b7ed302 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -50,7 +50,7 @@ router.beforeEach(async (to, from, next) => {
     // 3、去登录页，有token，直接重定向到home页
     next("/home");
     // 项目内的跳转，处理跳转路由高亮
-    currentlyRoute(to);
+    currentlyRoute(to.name as string);
   } else {
     // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
     const routeStore = useRoutesListStore(pinia);
@@ -65,7 +65,7 @@ router.beforeEach(async (to, from, next) => {
       // 动态路由添加过走这里，直接放行
       next();
       // 项目内的跳转，处理跳转路由高亮
-      currentlyRoute(to);
+      currentlyRoute(to.name as string);
     }
   }
 });
diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index 0113ad3..fd4f3f8 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -86,9 +86,9 @@ export const roleBase = (roles: Array<string>) => {
  * 统一处理所有的路由跳转：当前路由高亮、tabs栏数据
  * 处理项目内跳转，存入当前跳转路由和tabs标签栏数据
  * menu和tabs以及手动刷新浏览器等功能只需要跳转即可，缓存和高亮的逻辑这边负责
- * @param {object} to 需要跳转的路由
+ * @param {object} name 需要跳转的路由
  */
-export const currentlyRoute = (to: any) => {
+export const currentlyRoute = (name: string) => {
   const themeStore = useThemeConfig();
   const { isTabs } = storeToRefs(themeStore);
   const store = useRoutesListStore(pinia);
@@ -99,13 +99,13 @@ export const currentlyRoute = (to: any) => {
   }
   // 跳转路由是有权限的，缓存跳转路由
   const { findLinearArray } = useRoutingMethod();
-  const find = findLinearArray(to.name);
+  const find = findLinearArray(name);
   if (find === undefined) return;
   // 存入当前路由-高亮
   store.setCurrentRoute(find);
   // 存入tabs栏数据：如果系统配置里允许展示标签栏则存入
   if (isTabs.value) store.setTabs(find);
-  // 是否缓存路由
-  if (!find.meta.keepAlive) return;
+  // 是否缓存路由 || 是否渲染tabs，符合任意条件则不缓存路由
+  if (!find.meta.keepAlive || !isTabs.value) return;
   store.setRouteNames(find.name); // 缓存路由name
 };