---初始化后台管理web页面项目

src/layouts/page/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <keep-alive v-if="openCache" :include="getCaches">
+        <component :is="wrap(route.name, Component)" :key="route.fullPath" />
+      </keep-alive>
+      <component v-else :is="Component" :key="route.fullPath" />
+    </template>
+  </RouterView>
+  <FrameLayout v-if="getCanEmbedIFramePage" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, unref, h } from 'vue';
+
+  import FrameLayout from '/@/layouts/iframe/index.vue';
+
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { getTransitionName } from './transition';
+
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useFrameKeepAlive } from '../iframe/useFrameKeepAlive';
+
+  export default defineComponent({
+    name: 'PageLayout',
+    components: { FrameLayout },
+    setup() {
+      const { getShowMultipleTab } = useMultipleTabSetting();
+      const tabStore = useMultipleTabStore();
+
+      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+
+      const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+
+      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+
+      const getCaches = computed((): string[] => {
+        if (!unref(getOpenKeepAlive)) {
+          return [];
+        }
+        return tabStore.getCachedTabList;
+      });
+
+      const { hasRenderFrame } = useFrameKeepAlive();
+
+      const wrapperMap = new Map();
+
+      const wrap = (name, component) => {
+        let wrapper;
+
+        const wrapperName = name;
+
+        if (wrapperMap.has(wrapperName)) {
+          wrapper = wrapperMap.get(wrapperName);
+        } else {
+          wrapper = {
+            name: wrapperName,
+
+            render() {
+              return h(
+                'div',
+                {
+                  className:
+                    'vaf-page-wrapper ' +
+                    (hasRenderFrame(name) ? '' : 'h-full') +
+                    ' overflow-hidden',
+                },
+                component,
+              );
+            },
+          };
+
+          wrapperMap.set(wrapperName, wrapper);
+        }
+
+        return h(wrapper);
+      };
+
+      return {
+        getTransitionName,
+        openCache,
+        getEnableTransition,
+        getBasicTransition,
+        getCaches,
+        getCanEmbedIFramePage,
+        wrap,
+      };
+    },
+  });
+</script>

src/layouts/page/transition.ts

@@ -0,0 +1,33 @@
+import type { FunctionalComponent } from 'vue';
+import type { RouteLocation } from 'vue-router';
+
+export interface DefaultContext {
+  Component: FunctionalComponent & { type: Recordable };
+  route: RouteLocation;
+}
+
+export function getTransitionName({
+  route,
+  openCache,
+  cacheTabs,
+  enableTransition,
+  def,
+}: Pick<DefaultContext, 'route'> & {
+  enableTransition: boolean;
+  openCache: boolean;
+  def: string;
+  cacheTabs: string[];
+}): string | undefined {
+  if (!enableTransition) {
+    return undefined;
+  }
+
+  const isInCache = cacheTabs.includes(route.name as string);
+  const transitionName = 'fade-slide';
+  let name: string | undefined = transitionName;
+
+  if (openCache) {
+    name = isInCache && route.meta.loaded ? transitionName : undefined;
+  }
+  return name || (route.meta.transitionName as string) || def;
+}