feat(projects): 添加页面缓存、记录在tab中的缓存页面的滚动条位置

src/components/custom/ButtonTab/index.vue

@@ -51,7 +51,7 @@ const { bool: isHover, setTrue, setFalse } = useBoolean();
 const isIconActive = computed(() => props.isActive || isHover.value);
 
 const buttonStyle = computed(() => {
-  const style: { [key: string]: string } = {};
+  const style: Record<string, string> = {};
   if (isIconActive.value) {
     style.color = props.primaryColor;
     style.borderColor = addColorAlpha(props.primaryColor, 0.3);

src/enum/common/system.ts

@@ -1,3 +1,9 @@
+/** 布局组件的名称 */
+export enum EnumLayoutComponentName {
+  basic = 'basic-layout',
+  blank = 'blank-layout'
+}
+
 /** 登录模块 */
 export enum EnumLoginModule {
   'pwd-login' = '账密登录',

src/interface/enum.ts

@@ -1,4 +1,5 @@
 import {
+  EnumLayoutComponentName,
   EnumThemeLayoutMode,
   EnumThemeTabMode,
   EnumThemeHorizontalMenuPosition,
@@ -6,6 +7,9 @@ import {
   EnumLoginModule
 } from '@/enum';
 
+/** 布局组件名称 */
+export type LayoutComponentName = keyof typeof EnumLayoutComponentName;
+
 /** 布局模式 */
 export type ThemeLayoutMode = keyof typeof EnumThemeLayoutMode;
 

src/interface/system.ts

@@ -23,4 +23,10 @@ export type GlobalBreadcrumb = DropdownOption & {
 };
 
 /** 多页签Tab的路由 */
-export type GlobalTabRoute = Pick<RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'>;
+export interface GlobalTabRoute extends Pick<RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'> {
+  /** 滚动的位置 */
+  scrollPosition: {
+    left: number;
+    top: number;
+  };
+}

src/layouts/common/GlobalContent/index.vue

@@ -3,16 +3,18 @@
     :class="{ 'p-16px': showPadding }"
     class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
   >
-    <router-view v-slot="{ Component }">
+    <router-view v-slot="{ Component, route }">
       <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" v-if="app.reloadFlag" />
+        <keep-alive :include="routeStore.cacheRoutes">
+          <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
+        </keep-alive>
       </transition>
     </router-view>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from '@/store';
+import { useAppStore, useRouteStore } from '@/store';
 
 interface Props {
   /** 显示padding */
@@ -24,5 +26,6 @@ withDefaults(defineProps<Props>(), {
 });
 
 const app = useAppStore();
+const routeStore = useRouteStore();
 </script>
 <style scoped></style>

src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue

@@ -33,13 +33,14 @@ interface Props {
 
 const props = defineProps<Props>();
 
-type LayoutConfig = {
-  [key in ThemeLayoutMode]: {
+type LayoutConfig = Record<
+  ThemeLayoutMode,
+  {
     placement: FollowerPlacement;
     menuClass: string;
     mainClass: string;
-  };
-};
+  }
+>;
 
 const layoutConfig: LayoutConfig = {
   vertical: {

src/router/helpers/index.ts

@@ -0,0 +1 @@
+export * from './scroll';

src/router/helpers/scroll.ts

@@ -0,0 +1,33 @@
+import type { RouterScrollBehavior } from 'vue-router';
+import { useTabStore } from '@/store';
+
+export const scrollBehavior: RouterScrollBehavior = (to, from) => {
+  return new Promise(resolve => {
+    const tab = useTabStore();
+
+    if (to.hash) {
+      resolve({
+        el: to.hash,
+        behavior: 'smooth'
+      });
+    }
+
+    const { left, top } = tab.getTabScrollPosition(to.path);
+    const scrollPosition = {
+      left,
+      top
+    };
+    const { scrollLeft, scrollTop } = document.documentElement;
+
+    const isFromCached = Boolean(from.meta.keepAlive);
+    if (isFromCached) {
+      tab.recordTabScrollPosition(from.path, { left: scrollLeft, top: scrollTop });
+    }
+
+    const duration = !scrollPosition.left && !scrollPosition.top ? 0 : 350;
+
+    setTimeout(() => {
+      resolve(scrollPosition);
+    }, duration);
+  });
+};

src/router/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
 import { transformAuthRoutesToVueRoutes } from '@/utils';
 import { constantRoutes } from './routes';
+import { scrollBehavior } from './helpers';
 import { createRouterGuard } from './guard';
 
 const createHistoryFunc = import.meta.env.VITE_IS_VERCEL === '1' ? createWebHashHistory : createWebHistory;
@@ -9,7 +10,7 @@ const createHistoryFunc = import.meta.env.VITE_IS_VERCEL === '1' ? createWebHash
 export const router = createRouter({
   history: createHistoryFunc(import.meta.env.BASE_URL),
   routes: transformAuthRoutesToVueRoutes(constantRoutes),
-  scrollBehavior: () => ({ left: 0, top: 0 })
+  scrollBehavior
 });
 
 export async function setupRouter(app: App) {

src/store/modules/app/index.ts

@@ -34,6 +34,9 @@ export const useAppStore = defineStore('app-store', {
       } else {
         this.reloadFlag = true;
       }
+      setTimeout(() => {
+        document.documentElement.scrollTo({ left: 0, top: 0 });
+      }, 100);
     },
     /** 打开设置抽屉 */
     openSettingDrawer() {

src/store/modules/route/index.ts

@@ -1,7 +1,7 @@
 import type { Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { fetchUserRoutes } from '@/service';
-import { transformAuthRouteToMenu, transformAuthRoutesToVueRoutes } from '@/utils';
+import { transformAuthRouteToMenu, transformAuthRoutesToVueRoutes, getCacheRoutes } from '@/utils';
 import type { GlobalMenuOption } from '@/interface';
 import { useTabStore } from '../tab';
 
@@ -12,13 +12,16 @@ interface RouteState {
   routeHomeName: AuthRoute.RouteKey;
   /** 菜单 */
   menus: GlobalMenuOption[];
+  /** 缓存的路由名称 */
+  cacheRoutes: string[];
 }
 
 export const useRouteStore = defineStore('route-store', {
   state: (): RouteState => ({
     isAddedDynamicRoute: false,
     routeHomeName: 'dashboard_analysis',
-    menus: []
+    menus: [],
+    cacheRoutes: []
   }),
   actions: {
     /**
@@ -38,6 +41,8 @@ export const useRouteStore = defineStore('route-store', {
           router.addRoute(route);
         });
 
+        this.cacheRoutes = getCacheRoutes(vueRoutes);
+
         initHomeTab(data.home, router);
         this.isAddedDynamicRoute = true;
       }

src/store/modules/tab/helpers.ts

@@ -9,7 +9,11 @@ export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocati
   const tabRoute: GlobalTabRoute = {
     name: route.name,
     path: route.path,
-    meta: route.meta
+    meta: route.meta,
+    scrollPosition: {
+      left: 0,
+      top: 0
+    }
   };
   return tabRoute;
 }

src/store/modules/tab/index.ts

@@ -23,6 +23,10 @@ export const useTabStore = defineStore('tab-store', {
       path: '/',
       meta: {
         title: 'root'
+      },
+      scrollPosition: {
+        left: 0,
+        top: 0
       }
     },
     activeTab: ''
@@ -132,6 +136,32 @@ export const useTabStore = defineStore('tab-store', {
         routerPush(path);
       }
     },
+    /**
+     * 记录tab滚动位置
+     * @param path - 路由path
+     * @param position - tab当前页的滚动位置
+     */
+    recordTabScrollPosition(path: string, position: { left: number; top: number }) {
+      const index = getIndexInTabRoutes(this.tabs, path);
+      if (index > -1) {
+        this.tabs[index].scrollPosition = position;
+      }
+    },
+    /**
+     * 获取tab滚动位置
+     * @param path - 路由path
+     */
+    getTabScrollPosition(path: string) {
+      const position = {
+        left: 0,
+        top: 0
+      };
+      const index = getIndexInTabRoutes(this.tabs, path);
+      if (index > -1) {
+        Object.assign(position, this.tabs[index].scrollPosition);
+      }
+      return position;
+    },
     /** 初始化Tab状态 */
     iniTabStore(currentRoute: RouteLocationNormalizedLoaded) {
       const theme = useThemeStore();

src/store/modules/theme/helpers.ts

@@ -37,7 +37,7 @@ function getThemeColors(colors: [ColorType, string][]) {
 }
 
 /** 获取naive的主题颜色 */
-export function getNaiveThemeOverrides(colors: { [key in ColorType]: string }): GlobalThemeOverrides {
+export function getNaiveThemeOverrides(colors: Record<ColorType, string>): GlobalThemeOverrides {
   const { primary, info, success, warning, error } = colors;
   const themeColors = getThemeColors([
     ['primary', primary],

src/utils/common/object.ts

@@ -1,4 +1,4 @@
 /** 设置对象数据 */
-export function objectAssign<T extends { [key: string]: any }>(target: T, source: Partial<T>) {
+export function objectAssign<T extends Record<string, any>>(target: T, source: Partial<T>) {
   Object.assign(target, source);
 }

src/utils/router/cache.ts

@@ -0,0 +1,35 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+/**
+ * 获取缓存的路由对应组件的名称
+ * @param routes - 转换后的vue路由
+ */
+export function getCacheRoutes(routes: RouteRecordRaw[]) {
+  const cacheNames: string[] = [];
+  routes.forEach(route => {
+    // 只需要获取二级路由的缓存的组件名
+    if (hasChildren(route)) {
+      route.children!.forEach(item => {
+        if (isKeepAlive(item)) {
+          cacheNames.push(item.name as string);
+        }
+      });
+    }
+  });
+  return cacheNames;
+}
+
+/**
+ * 路由是否缓存
+ * @param route
+ */
+function isKeepAlive(route: RouteRecordRaw) {
+  return Boolean(route?.meta?.keepAlive);
+}
+/**
+ * 是否有二级路由
+ * @param route
+ */
+function hasChildren(route: RouteRecordRaw) {
+  return Boolean(route.children && route.children.length);
+}

src/utils/router/component.ts

@@ -1,4 +1,6 @@
 import type { Component } from 'vue';
+import { EnumLayoutComponentName } from '@/enum';
+import { BasicLayout, BlankLayout } from '@/layouts';
 import {
   Login,
   NoPermission,
@@ -14,6 +16,21 @@ import {
   MultiMenuFirstSecond,
   MultiMenuFirstSecondNewThird
 } from '@/views';
+import type { LayoutComponentName } from '@/interface';
+
+type LayoutComponent = Record<LayoutComponentName, () => Promise<Component>>;
+
+/**
+ * 获取页面导入的vue文件(懒加载的方式)
+ * @param layoutType - 布局类型
+ */
+export function getLayoutComponent(layoutType: LayoutComponentName) {
+  const layoutComponent: LayoutComponent = {
+    basic: BasicLayout,
+    blank: BlankLayout
+  };
+  return () => setViewComponentName(layoutComponent[layoutType], EnumLayoutComponentName[layoutType]);
+}
 
 /** 需要用到自身vue组件的页面 */
 type ViewComponentKey = Exclude<
@@ -28,12 +45,11 @@ type ViewComponentKey = Exclude<
   | 'exception'
 >;
 
-type ViewComponent = {
-  [key in ViewComponentKey]: () => Promise<Component>;
-};
+type ViewComponent = Record<ViewComponentKey, () => Promise<Component>>;
 
 /**
  * 获取页面导入的vue文件(懒加载的方式)
+ * @param routeKey - 路由key
  */
 export function getViewComponent(routeKey: AuthRoute.RouteKey) {
   const keys: ViewComponentKey[] = [

src/utils/router/helpers.ts

@@ -1,15 +1,13 @@
 import type { RouteRecordRaw } from 'vue-router';
-import { BasicLayout, BlankLayout } from '@/layouts';
 import { consoleError } from '../common';
-import { getViewComponent } from './component';
+import { getLayoutComponent, getViewComponent } from './component';
 
-type ComponentAction = {
-  [key in AuthRoute.RouteComponent]: () => void;
-};
+type ComponentAction = Record<AuthRoute.RouteComponent, () => void>;
 
 /**
  * 将权限路由转换成vue路由
  * @param routes - 权限路由
+ * @description 所有多级路由都会被转换成二级路由
  */
 export function transformAuthRoutesToVueRoutes(routes: AuthRoute.Route[]) {
   return routes.map(route => transformAuthRouteToVueRoute(route)).flat(1);
@@ -38,10 +36,10 @@ function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
   if (hasComponent(item)) {
     const action: ComponentAction = {
       basic() {
-        itemRoute.component = BasicLayout;
+        itemRoute.component = getLayoutComponent('basic');
       },
       blank() {
-        itemRoute.component = BlankLayout;
+        itemRoute.component = getLayoutComponent('blank');
       },
       multi() {
         // 多级路由一定有子路由
@@ -81,7 +79,7 @@ function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
     } else {
       const parentPath = `${itemRoute.path}-parent` as AuthRoute.SingleRouteParentPath;
 
-      const layout = item.meta.singleLayout === 'basic' ? BasicLayout : BlankLayout;
+      const layout = item.meta.singleLayout === 'basic' ? getLayoutComponent('basic') : getLayoutComponent('blank');
 
       const parentRoute: RouteRecordRaw = {
         path: parentPath,
@@ -120,22 +118,42 @@ function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
   return resultRoute;
 }
 
+/**
+ * 是否有外链
+ * @param item - 权限路由
+ */
 function hasHref(item: AuthRoute.Route) {
   return Boolean(item.meta.href);
 }
 
+/**
+ * 是否有动态路由path
+ * @param item - 权限路由
+ */
 function hasDynamicPath(item: AuthRoute.Route) {
   return Boolean(item.meta.dynamicPath);
 }
 
+/**
+ * 是否有路由组件
+ * @param item - 权限路由
+ */
 function hasComponent(item: AuthRoute.Route) {
   return Boolean(item.component);
 }
 
+/**
+ * 是否有子路由
+ * @param item - 权限路由
+ */
 function hasChildren(item: AuthRoute.Route) {
   return Boolean(item.children && item.children.length);
 }
 
+/**
+ * 是否是单层级路由
+ * @param item - 权限路由
+ */
 function isSingleRoute(item: AuthRoute.Route) {
   return Boolean(item.meta.singleLayout);
 }

src/utils/router/index.ts

@@ -1,4 +1,5 @@
 export * from './helpers';
+export * from './cache';
 export * from './menu';
 export * from './breadcrumb';
 export * from './tab';

src/utils/router/tab.ts

@@ -12,7 +12,14 @@ export function getTabRoutes() {
   const routes: GlobalTabRoute[] = [];
   const data = getLocal<GlobalTabRoute[]>(EnumStorageKey['tab-routes']);
   if (data) {
-    routes.push(...data);
+    const defaultTabRoutes = data.map(item => ({
+      ...item,
+      scrollPosition: {
+        left: 0,
+        top: 0
+      }
+    }));
+    routes.push(...defaultTabRoutes);
   }
   return routes;
 }

src/views/about/model.ts

@@ -9,12 +9,8 @@ export interface PkgVersionInfo {
 interface Package {
   name: string;
   version: string;
-  dependencies: {
-    [key: string]: string;
-  };
-  devDependencies: {
-    [key: string]: string;
-  };
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
   [key: string]: any;
 }
 

src/views/system/exception/components/ExceptionBase.vue

@@ -23,9 +23,7 @@ interface Props {
   type: ExceptionType;
 }
 
-type ExceptionComponent = {
-  [key in ExceptionType]: Component;
-};
+type ExceptionComponent = Record<ExceptionType, Component>;
 
 const props = defineProps<Props>();