新增前端vue

web-vue/packages/core/layouts/page/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <transition
+        :name="
+          getTransitionName({
+            route,
+            openCache,
+            enableTransition: getEnableTransition,
+            cacheTabs: getCaches,
+            def: getBasicTransition,
+          })
+        "
+        mode="out-in"
+        appear
+      >
+        <keep-alive v-if="openCache" :include="getCaches">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+        <component v-else :is="Component" :key="route.fullPath" />
+      </transition>
+    </template>
+  </RouterView>
+  <FrameLayout v-if="getCanEmbedIFramePage" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, unref } from 'vue';
+
+  import FrameLayout from '@jeesite/core/layouts/iframe/index.vue';
+
+  import { useRootSetting } from '@jeesite/core/hooks/setting/useRootSetting';
+
+  import { useTransitionSetting } from '@jeesite/core/hooks/setting/useTransitionSetting';
+  import { useMultipleTabSetting } from '@jeesite/core/hooks/setting/useMultipleTabSetting';
+  import { getTransitionName } from './transition';
+
+  import { useMultipleTabStore } from '@jeesite/core/store/modules/multipleTab';
+
+  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;
+      });
+
+      return {
+        getTransitionName,
+        openCache,
+        getEnableTransition,
+        getBasicTransition,
+        getCaches,
+        getCanEmbedIFramePage,
+      };
+    },
+  });
+</script>

web-vue/packages/core/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;
+}