fix(projects): 修复页面缓存

src/hooks/common/index.ts

@@ -3,7 +3,19 @@ import useContext from './useContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
+import useRouteProps from './useRouteProps';
 import useBoolean from './useBoolean';
 import useLoading from './useLoading';
+import useScrollBehavior from './useScrollBehavior';
 
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean, useLoading };
+export {
+  useAppTitle,
+  useContext,
+  useRouterChange,
+  useRouteParam,
+  useRouteQuery,
+  useRouteProps,
+  useBoolean,
+  useLoading,
+  useScrollBehavior
+};

src/hooks/common/useRouteProps.ts

@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default function useRouteProps() {
+  const route = useRoute();
+  const props = computed(() => {
+    /** 路由名称 */
+    const name = route.name as string;
+    /** 混存页面 */
+    const keepAlive = Boolean(route.meta?.keepAlive);
+    /** 视高100% */
+    const fullPage = Boolean(route.meta?.fullPage);
+
+    return {
+      name,
+      keepAlive,
+      fullPage
+    };
+  });
+
+  return props;
+}

src/hooks/common/useScrollBehavior.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+/** 滚动行为 */
+export default function useScrollBehavior() {
+  const scrollbar = ref<HTMLElement | null>(null);
+
+  /** 重置滚动条行为 */
+  function resetScrollBehavior() {
+    scrollbar.value?.scrollTo({ left: 0, top: 0 });
+  }
+
+  return {
+    scrollbar,
+    resetScrollBehavior
+  };
+}

src/hooks/index.ts

@@ -4,7 +4,9 @@ export {
   useRouterChange,
   useRouteParam,
   useRouteQuery,
+  useRouteProps,
   useBoolean,
-  useLoading
+  useLoading,
+  useScrollBehavior
 } from './common';
 export { useCountDown, useSmsCode } from './business';

src/layouts/BasicLayout/components/GlobalContent/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
+    <router-view v-slot="{ Component, route }">
+      <transition :name="theme.pageStyle.animateType" mode="out-in" appear>
+        <keep-alive :include="cacheRoutes">
+          <component :is="Component" v-if="reload" :key="route.fullPath" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </n-layout-content>
+</template>
+
+<script lang="ts" setup>
+import { NLayoutContent } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { useReloadInject } from '@/context';
+import { cacheRoutes } from '@/router';
+
+const theme = useThemeStore();
+const { reload } = useReloadInject();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/index.ts

@@ -1,7 +1,8 @@
 import GlobalSider from './GlobalSider/index.vue';
 import GlobalHeader from './GlobalHeader/index.vue';
 import GlobalTab from './GlobalTab/index.vue';
+import GlobalContent from './GlobalContent/index.vue';
 import GlobalFooter from './GlobalFooter/index.vue';
 import SettingDrawer from './SettingDrawer/index.vue';
 
-export { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer };
+export { GlobalSider, GlobalHeader, GlobalTab, GlobalContent, GlobalFooter, SettingDrawer };

src/layouts/BasicLayout/index.vue

@@ -16,14 +16,7 @@
         >
           <global-header v-if="!isHorizontalMix" :z-index="2" />
           <global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
-          <n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
-            <router-view v-slot="{ Component }">
-              <keep-alive>
-                <component :is="Component" v-if="routeProps.keepAlive && reload" :key="routeProps.name" />
-              </keep-alive>
-              <component :is="Component" v-if="!routeProps.keepAlive && reload" :key="routeProps.name" />
-            </router-view>
-          </n-layout-content>
+          <global-content />
           <global-footer />
         </div>
       </n-scrollbar>
@@ -33,17 +26,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
+import { computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { NLayout, NScrollbar } from 'naive-ui';
 import { useThemeStore } from '@/store';
-import { useReloadInject } from '@/context';
-import { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer } from './components';
-import { useRouteProps, useScrollBehavior } from '../composables';
+import { useRouteProps, useScrollBehavior } from '@/hooks';
+import { GlobalSider, GlobalHeader, GlobalTab, GlobalContent, GlobalFooter, SettingDrawer } from './components';
 
+const route = useRoute();
 const theme = useThemeStore();
-const { scrollbar } = useScrollBehavior();
+const { scrollbar, resetScrollBehavior } = useScrollBehavior();
 const routeProps = useRouteProps();
-const { reload } = useReloadInject();
 
 const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
 const headerAndMultiTabHeight = computed(() => {
@@ -53,6 +46,13 @@ const headerAndMultiTabHeight = computed(() => {
   } = theme;
   return `${hHeight + mHeight}px`;
 });
+
+watch(
+  () => route.name,
+  () => {
+    resetScrollBehavior();
+  }
+);
 </script>
 <style scoped>
 :deep(.n-scrollbar-rail) {

src/layouts/BlankLayout/index.vue

@@ -1,21 +1,38 @@
 <template>
   <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
     <div class="inline-block w-full" :class="[routeProps.fullPage ? 'h-full' : 'min-h-100vh']">
-      <router-view v-slot="{ Component }">
-        <keep-alive>
-          <component :is="Component" v-if="routeProps.keepAlive" :key="routeProps.name" />
+      <router-view v-slot="{ Component, route: itemRoute }">
+        <transition :name="theme.pageStyle.animateType" mode="out-in" appear>
+          <keep-alive :include="cacheRoutes">
+            <component :is="Component" v-if="reload" :key="itemRoute.fullPath" />
           </keep-alive>
-        <component :is="Component" v-if="!routeProps.keepAlive" :key="routeProps.name" />
+        </transition>
       </router-view>
     </div>
   </n-scrollbar>
 </template>
 
 <script lang="ts" setup>
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { NScrollbar } from 'naive-ui';
-import { useRouteProps, useScrollBehavior } from '../composables';
+import { useRouteProps, useScrollBehavior } from '@/hooks';
+import { useThemeStore } from '@/store';
+import { useReloadInject } from '@/context';
+import { cacheRoutes } from '@/router';
 
-const { scrollbar } = useScrollBehavior();
+const theme = useThemeStore();
+const { reload } = useReloadInject();
+
+const route = useRoute();
+const { scrollbar, resetScrollBehavior } = useScrollBehavior();
 const routeProps = useRouteProps();
+
+watch(
+  () => route.name,
+  () => {
+    resetScrollBehavior();
+  }
+);
 </script>
 <style scoped></style>

src/layouts/composables/index.ts

@@ -1,43 +0,0 @@
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-
-export function useRouteProps() {
-  const route = useRoute();
-  const props = computed(() => {
-    /** 路由名称 */
-    const name = route.name as string;
-    /** 混存页面 */
-    const keepAlive = Boolean(route.meta?.keepAlive);
-    /** 视高100% */
-    const fullPage = Boolean(route.meta?.fullPage);
-
-    return {
-      name,
-      keepAlive,
-      fullPage
-    };
-  });
-
-  return props;
-}
-
-/** 路由切换，重置滚动行为 */
-export function useScrollBehavior() {
-  const scrollbar = ref<HTMLElement | null>(null);
-  const route = useRoute();
-
-  function resetScrollBehavior() {
-    scrollbar.value?.scrollTo({ left: 0, top: 0 });
-  }
-
-  watch(
-    () => route.name,
-    () => {
-      resetScrollBehavior();
-    }
-  );
-
-  return {
-    scrollbar
-  };
-}

src/router/cache.ts

@@ -0,0 +1,38 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { routes } from './routes';
+
+function getCacheRoutes() {
+  const cacheNames: string[] = [];
+  routes.forEach(route => {
+    const isCache = isKeepAlive(route);
+    cacheNames.push(...getCacheName(route, isCache));
+  });
+  return cacheNames;
+}
+
+function getCacheName(route: RouteRecordRaw, isCache: boolean) {
+  const cacheNames: string[] = [];
+  const hasChild = hasChildren(route);
+  if (isCache && !hasChild) {
+    const name = route.name as string;
+    cacheNames.push(name);
+  }
+  if (hasChild) {
+    const children = route.children as RouteRecordRaw[];
+    children.forEach(item => {
+      const isChildCache = isCache || isKeepAlive(item);
+      cacheNames.push(...getCacheName(item, isChildCache));
+    });
+  }
+  return cacheNames;
+}
+
+function isKeepAlive(route: RouteRecordRaw) {
+  return Boolean(route?.meta?.keepAlive);
+}
+function hasChildren(route: RouteRecordRaw) {
+  return Boolean(route.children && route.children.length);
+}
+
+/** 被缓存的路由 */
+export const cacheRoutes = getCacheRoutes();

src/router/components.ts

@@ -0,0 +1,35 @@
+import { getRouteNameMap, setCacheName } from './helpers';
+import Login from '@/views/system/login/index.vue';
+import NoPermission from '@/views/system/exception/403.vue';
+import NotFound from '@/views/system/exception/404.vue';
+import ServiceError from '@/views/system/exception/500.vue';
+import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
+import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
+
+const Exception403 = { ...NoPermission };
+const Exception404 = { ...NotFound };
+const Exception500 = { ...ServiceError };
+
+const RouteNameMap = getRouteNameMap();
+
+setCacheName(Login, RouteNameMap.get('login'));
+setCacheName(NoPermission, RouteNameMap.get('no-permission'));
+setCacheName(NotFound, RouteNameMap.get('not-found'));
+setCacheName(ServiceError, RouteNameMap.get('service-error'));
+setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard-analysis'));
+setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard-workbench'));
+setCacheName(Exception404, RouteNameMap.get('exception-404'));
+setCacheName(Exception403, RouteNameMap.get('exception-403'));
+setCacheName(Exception500, RouteNameMap.get('exception-500'));
+
+export {
+  Login,
+  NoPermission,
+  NotFound,
+  ServiceError,
+  DashboardAnalysis,
+  DashboardWorkbench,
+  Exception403,
+  Exception404,
+  Exception500
+};

src/router/helpers.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'vue';
+import { EnumRoutePath } from '@/enum';
+import type { RoutePathKey } from '@/interface';
+
+/** 获取路由name map */
+export function getRouteNameMap() {
+  return new Map<RoutePathKey, RoutePathKey>((Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v]));
+}
+
+/** 给需要缓存的页面组件设置名称 */
+export function setCacheName(component: Component, name?: string) {
+  if (name) {
+    Object.assign(component, { name });
+  }
+}

src/router/index.ts

@@ -1,3 +1,4 @@
 export { router, setupRouter } from './setup';
 export { RouteNameMap, ROUTE_HOME, customRoutes } from './routes';
 export { menus } from './menus';
+export { cacheRoutes } from './cache';

src/router/menus.ts

@@ -1,9 +1,9 @@
 import type { Component } from 'vue';
 import { customRoutes } from './routes';
-import { CustomRoute, GlobalMenuOption } from '@/interface';
+import type { CustomRoute, GlobalMenuOption } from '@/interface';
 import { dynamicIconRender } from '@/utils';
 
-export function transformRouteToMenu(routes: CustomRoute[]) {
+function transformRouteToMenu(routes: CustomRoute[]) {
   const globalMenu: GlobalMenuOption[] = [];
   routes.forEach(route => {
     if (asMenu(route)) {

src/router/routes.ts

@@ -3,14 +3,25 @@ import { Dashboard } from '@vicons/carbon';
 import { ExceptionOutlined } from '@vicons/antd';
 import { BasicLayout, BlankLayout } from '@/layouts';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
-import type { CustomRoute, RoutePathKey, LoginModuleType } from '@/interface';
+import type { CustomRoute, LoginModuleType } from '@/interface';
 import { getLoginModuleRegExp } from '@/utils';
+import {
+  Login,
+  NoPermission,
+  NotFound,
+  ServiceError,
+  DashboardAnalysis,
+  DashboardWorkbench,
+  Exception403,
+  Exception404,
+  Exception500
+} from './components';
+import { getRouteNameMap } from './helpers';
 
 /** 路由名称 */
-export const RouteNameMap = new Map<RoutePathKey, RoutePathKey>(
-  (Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v])
-);
+export const RouteNameMap = getRouteNameMap();
 
+/** 登录模块的正则字符串 */
 const loginModuleRegExp = getLoginModuleRegExp();
 
 /**
@@ -24,6 +35,7 @@ const constantRoutes: RouteRecordRaw[] = [
     component: BlankLayout,
     redirect: { name: RouteNameMap.get('not-found') },
     meta: {
+      keepAlive: true,
       title: EnumRouteTitle.system
     },
     children: [
@@ -31,7 +43,7 @@ const constantRoutes: RouteRecordRaw[] = [
       {
         name: RouteNameMap.get('login'),
         path: `${EnumRoutePath.login}/:module(/${loginModuleRegExp}/)?`,
-        component: () => import('@/views/system/login/index.vue'),
+        component: Login,
         props: route => {
           const moduleType: LoginModuleType = (route.params.module as LoginModuleType) || 'pwd-login';
           return {
@@ -43,31 +55,31 @@ const constantRoutes: RouteRecordRaw[] = [
           fullPage: true
         }
       },
-      // 404
-      {
-        name: RouteNameMap.get('not-found'),
-        path: EnumRoutePath['not-found'],
-        component: () => import('@/views/system/exception/404.vue'),
-        meta: {
-          title: EnumRouteTitle['not-found'],
-          fullPage: true
-        }
-      },
       // 403
       {
         name: RouteNameMap.get('no-permission'),
         path: EnumRoutePath['no-permission'],
-        component: () => import('@/views/system/exception/403.vue'),
+        component: NoPermission,
         meta: {
           title: EnumRouteTitle['no-permission'],
           fullPage: true
         }
       },
+      // 404
+      {
+        name: RouteNameMap.get('not-found'),
+        path: EnumRoutePath['not-found'],
+        component: NotFound,
+        meta: {
+          title: EnumRouteTitle['not-found'],
+          fullPage: true
+        }
+      },
       // 500
       {
         name: RouteNameMap.get('service-error'),
         path: EnumRoutePath['service-error'],
-        component: () => import('@/views/system/exception/500.vue'),
+        component: ServiceError,
         meta: {
           title: EnumRouteTitle['service-error'],
           fullPage: true
@@ -86,7 +98,7 @@ const constantRoutes: RouteRecordRaw[] = [
 export const ROUTE_HOME: CustomRoute = {
   name: RouteNameMap.get('dashboard-analysis'),
   path: EnumRoutePath['dashboard-analysis'],
-  component: () => import('@/views/dashboard/analysis/index.vue'),
+  component: DashboardAnalysis,
   meta: {
     keepAlive: true,
     requiresAuth: true,
@@ -105,20 +117,7 @@ export const customRoutes: CustomRoute[] = [
     redirect: { name: ROUTE_HOME.name },
     meta: {
       isNotMenu: true
-    },
-    children: [
-      // 重载
-      {
-        name: RouteNameMap.get('reload'),
-        path: EnumRoutePath.reload,
-        component: () => import('@/views/system/reload/index.vue'),
-        meta: {
-          title: EnumRouteTitle.reload,
-          isNotMenu: true,
-          fullPage: true
     }
-      }
-    ]
   },
   {
     name: RouteNameMap.get('dashboard'),
@@ -134,8 +133,9 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('dashboard-workbench'),
         path: EnumRoutePath['dashboard-workbench'],
-        component: () => import('@/views/dashboard/workbench/index.vue'),
+        component: DashboardWorkbench,
         meta: {
+          keepAlive: true,
           requiresAuth: true,
           title: EnumRouteTitle['dashboard-workbench']
         }
@@ -155,7 +155,7 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('exception-403'),
         path: EnumRoutePath['exception-403'],
-        component: () => import('@/views/system/exception/403.vue'),
+        component: Exception403,
         meta: {
           requiresAuth: true,
           title: EnumRouteTitle['exception-403'],
@@ -165,7 +165,7 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('exception-404'),
         path: EnumRoutePath['exception-404'],
-        component: () => import('@/views/system/exception/404.vue'),
+        component: Exception404,
         meta: {
           requiresAuth: true,
           title: EnumRouteTitle['exception-404'],
@@ -175,7 +175,7 @@ export const customRoutes: CustomRoute[] = [
       {
         name: RouteNameMap.get('exception-500'),
         path: EnumRoutePath['exception-500'],
-        component: () => import('@/views/system/exception/500.vue'),
+        component: Exception500,
         meta: {
           requiresAuth: true,
           title: EnumRouteTitle['exception-500'],

src/settings/theme.ts

@@ -63,7 +63,7 @@ const themeSettings: ThemeSettings = {
   },
   pageStyle: {
     animate: true,
-    animateType: 'zoom-fade',
+    animateType: 'fade-slide',
     animateTypeList: [
       { value: 'zoom-fade', label: EnumAnimate['zoom-fade'] },
       { value: 'zoom-out', label: EnumAnimate['zoom-out'] },

src/styles/css/animation.css

@@ -1,9 +0,0 @@
-/* opacity透明过度 */
-.transition-opacity-enter-active,
-.transition-opacity-enter-active {
-  transition: opacity 0.4s ease-out;
-}
-.transition-opacity-enter-from,
-.transition-opacity-leave-to {
-  opacity: 0;
-}

src/styles/css/global.css

@@ -1,5 +1,5 @@
 @import './scrollbar.css';
-@import './animation.css';
+@import './transition.css';
 
 html,
 body,

src/styles/css/transition.css

@@ -0,0 +1,86 @@
+/* opacity透明过度 */
+.transition-opacity-enter-active,
+.transition-opacity-enter-active {
+  transition: opacity 0.4s ease-out;
+}
+.transition-opacity-enter-from,
+.transition-opacity-leave-to {
+  opacity: 0;
+}
+
+/* zoom-fade */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
+
+/* zoom-out */
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.15s ease-out;
+}
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* fade-bottom */
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+/* fade-scale */
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}

src/views/dashboard/analysis/index.vue

@@ -4,7 +4,6 @@
     <nav-card :loading="loading" />
   </div>
 </template>
-
 <script lang="ts" setup>
 import { onActivated } from 'vue';
 import { useLoading } from '@/hooks';

src/views/system/reload/index.vue

@@ -1,18 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts" setup>
-import { useRoute, useRouter } from 'vue-router';
-
-const { query } = useRoute();
-const router = useRouter();
-
-function init() {
-  const redirect = (query.redirectUrl as string) || '/';
-  router.replace(redirect);
-}
-
-init();
-</script>
-<style scoped></style>