From 9256aecc51b2237d2a70dbf7a40187324885cdf8 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 6 Apr 2022 16:56:15 +0800
Subject: [PATCH] feat: optimize tab router

---
 src/layouts/index.tsx            | 23 ++++++++++++++++++++---
 src/store/modules/tabs-router.ts |  3 +++
 src/style/layout.less            |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 610dbaf..b5cd456 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed, nextTick, onMounted, watch } from 'vue';
+import { defineComponent, computed, nextTick, onMounted, watch, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
 import { usePermissionStore, useSettingStore, useTabsRouterStore } from '@/store';
@@ -37,7 +37,6 @@ export default defineComponent({
     const headerMenu = computed(() => {
       if (settingStore.layout === 'mix') {
         if (settingStore.splitMenu) {
-          console.log(menuRouters);
           return menuRouters.value.map((menu) => ({
             ...menu,
             children: [],
@@ -70,10 +69,28 @@ export default defineComponent({
       tabsRouterStore.appendTabRouterList({ path, title: title as string, name, isAlive: true });
     };
 
+    const getTabRouterListCache = () => {
+      tabsRouterStore.initTabRouterList(JSON.parse(localStorage.getItem('tabRouterList')));
+    };
+    const setTabRouterListCache = () => {
+      const { tabRouters } = tabsRouterStore;
+      localStorage.setItem('tabRouterList', JSON.stringify(tabRouters));
+    };
+
     onMounted(() => {
       appendNewRoute();
     });
 
+    // 如果不需要持久化标签页可以注释掉以下的 onMounted 和 onBeforeUnmount 的内容
+    onMounted(() => {
+      if (localStorage.getItem('tabRouterList')) getTabRouterListCache();
+      window.addEventListener('beforeunload', setTabRouterListCache);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('beforeunload', setTabRouterListCache);
+    });
+
     watch(
       () => route.path,
       () => {
@@ -159,7 +176,7 @@ export default defineComponent({
               class={`${prefix}-layout-tabs-nav`}
               value={route.path}
               onChange={handleChangeCurrentTab}
-              style={{ maxWidth: '100%', position: 'fixed', overflow: 'visible' }}
+              style={{ width: '100%', position: 'sticky', top: 0 }}
               onRemove={handleRemove}
             >
               {tabRouters.map((router: TRouterInfo, idx: number) => (
diff --git a/src/store/modules/tabs-router.ts b/src/store/modules/tabs-router.ts
index bfb8d6b..940a968 100644
--- a/src/store/modules/tabs-router.ts
+++ b/src/store/modules/tabs-router.ts
@@ -43,6 +43,9 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
     removeTabRouterList() {
       this.tabRouterList = [];
     },
+    initTabRouterList(newRoutes: TRouterInfo[]) {
+      this.tabRouterList = newRoutes;
+    },
   },
 });
 
diff --git a/src/style/layout.less b/src/style/layout.less
index 5754eb2..bfa0cc6 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -70,7 +70,7 @@
       z-index: 999;
     }
     &-tabs-nav + .@{prefix}-content-layout {
-      padding-top: 48px + @spacer-3;
+      padding-top:  @spacer-3;
     }
   }