feat(projects): 新增多页签缓存功能

src/store/modules/app/helpers.ts

@@ -1,4 +1,7 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { ROUTE_HOME } from '@/router';
 import { brightenColor, darkenColor } from '@/utils';
+import type { MultiTabRoute } from '@/interface';
 
 export function getHoverAndPressedColor(color: string) {
   return {
@@ -6,3 +9,37 @@ export function getHoverAndPressedColor(color: string) {
     pressed: darkenColor(color)
   };
 }
+
+/** 获取路由首页信息 */
+export function getHomeTabRoute(route: RouteLocationNormalizedLoaded) {
+  const { name, path, meta } = ROUTE_HOME;
+  const isHome = route.name === ROUTE_HOME.name;
+  const home: MultiTabRoute = {
+    name,
+    path,
+    fullPath: path,
+    meta
+  };
+  if (isHome) {
+    Object.assign(home, route);
+  }
+  return home;
+}
+
+/**
+ * 获取该页签在多页签数据中的索引
+ * @param routes - 多页签数据
+ * @param fullPath - 该页签的路径
+ */
+export function getIndexInTabRoutes(routes: MultiTabRoute[], fullPath: string) {
+  return routes.findIndex(route => route.fullPath === fullPath);
+}
+
+/**
+ * 判断该页签是否在多页签数据中
+ * @param routes - 多页签数据
+ * @param fullPath - 该页签的路径
+ */
+export function isInTabRoutes(routes: MultiTabRoute[], fullPath: string) {
+  return getIndexInTabRoutes(routes, fullPath) > -1;
+}

src/store/modules/app/index.ts

@@ -2,8 +2,11 @@ import { nextTick } from 'vue';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import type { ScrollbarInst } from 'naive-ui';
 import { defineStore } from 'pinia';
-import { store } from '@/store';
 import { router, ROUTE_HOME } from '@/router';
+import { store, useThemeStore } from '@/store';
+import { getTabRouteStorage } from '@/utils';
+import type { MultiTab, MultiTabRoute } from '@/interface';
+import { getHomeTabRoute, isInTabRoutes } from './helpers';
 
 /** app状态 */
 interface AppState {
@@ -28,16 +31,6 @@ interface MenuState {
   fixedMix: boolean;
 }
 
-/** 多页签 */
-interface MultiTab {
-  routes: MultiTabRoute[];
-  activeRoute: string;
-}
-type MultiTabRoute = Partial<RouteLocationNormalizedLoaded> & {
-  path: string;
-  fullPath: string;
-};
-
 /** 项目配置抽屉的状态 */
 interface SettingDrawer {
   /** 设置抽屉可见性 */
@@ -74,9 +67,7 @@ const appStore = defineStore({
     setScrollbarInstance(scrollbar: ScrollbarInst) {
       this.layout.scrollbar = scrollbar;
     },
-    /**
-     * 重置滚动条行为
-     */
+    /** 重置滚动条行为 */
     resetScrollBehavior() {
       const { scrollbar } = this.layout;
       setTimeout(() => {
@@ -95,14 +86,10 @@ const appStore = defineStore({
     toggleMenu() {
       this.menu.collapsed = !this.menu.collapsed;
     },
-    /** 判断页签路由是否存在某个路由 */
-    getIndexInTabRoutes(fullPath: string) {
-      return this.multiTab.routes.findIndex(item => item.fullPath === fullPath);
-    },
     /** 添加多页签的数据 */
     addMultiTab(route: RouteLocationNormalizedLoaded) {
       const { fullPath } = route;
-      const isExist = this.getIndexInTabRoutes(fullPath) > -1;
+      const isExist = isInTabRoutes(this.multiTab.routes, fullPath);
       if (!isExist) {
         this.multiTab.routes.push({ ...route });
       }
@@ -174,28 +161,19 @@ const appStore = defineStore({
     setActiveMultiTab(fullPath: string) {
       this.multiTab.activeRoute = fullPath;
     },
-    /** 获取路由首页信息 */
-    getHomeTabRoute(route: RouteLocationNormalizedLoaded) {
-      const { name, path, meta } = ROUTE_HOME;
-      const isHome = route.name === ROUTE_HOME.name;
-      const home: MultiTabRoute = {
-        name,
-        path,
-        fullPath: path,
-        meta
-      };
-      if (isHome) {
-        Object.assign(home, route);
-      }
-      return home;
-    },
     /** 初始化多页签数据 */
     initMultiTab() {
+      const theme = useThemeStore();
       const { currentRoute } = router;
       const isHome = currentRoute.value.name === ROUTE_HOME.name;
-      const home = this.getHomeTabRoute(currentRoute.value);
-      const routes = [home];
-      if (!isHome) {
+      const home = getHomeTabRoute(currentRoute.value);
+      const routes: MultiTabRoute[] = theme.multiTabStyle.isCache ? getTabRouteStorage() : [];
+      const hasHome = isInTabRoutes(routes, home.fullPath);
+      const hasCurrent = isInTabRoutes(routes, currentRoute.value.fullPath);
+      if (!hasHome) {
+        routes.unshift(home);
+      }
+      if (!isHome && !hasCurrent) {
         routes.push(currentRoute.value);
       }
       this.multiTab.routes = routes;

src/store/modules/theme/index.ts

@@ -104,6 +104,10 @@ const themeStore = defineStore({
     handleMultiTabMode(mode: MultiTabMode) {
       this.multiTabStyle.mode = mode;
     },
+    /** 设置多页签缓存 */
+    handleSetMultiTabCache(isCache: boolean) {
+      this.multiTabStyle.isCache = isCache;
+    },
     /** 设置面包屑的显示 */
     handleCrumbsVisible(visible: boolean) {
       this.crumbsStyle.visible = visible;