feat: 加上切换动画

src/app.ts

@@ -2,9 +2,11 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import { event, mitter } from './event';
 import layoutMenuItem from '@/layout/components/menu/components/menuItem.vue';
+import KeepAlive from '@/components/meKeepAlive';
 export const app = createApp(App);
 export async function bootscrapt() {
   app.component('LayoutMenuItem', layoutMenuItem);
+  app.component('KeepAlive', KeepAlive);
   await Promise.allSettled(mitter.emit(event.START, app));
   mitter.emit(event.READY, app);
   app.mount('#app');

src/components/meComponent.ts

@@ -0,0 +1,56 @@
+import { PropType, Ref, Transition, TransitionProps, VNode } from 'vue';
+import { MeKeepAliveProps, default as MeKeepAlive } from './meKeepAlive';
+import { useLoadMessages } from '@/locales/i18n';
+import { done } from '@/utils/nProgress';
+import { localeConfig } from '@/config';
+export default defineComponent({
+  props: {
+    is: {
+      type: [String, Object],
+    },
+    keepAlive: Object as PropType<MeKeepAliveProps>,
+    componentKey: [Number, String, Symbol],
+    doneProgress: Boolean,
+    transition: Object as PropType<TransitionProps>,
+  },
+  setup(props, { attrs }) {
+    const loadMessages = useLoadMessages();
+    const componentIs: Ref<any> = ref(undefined);
+    const key = ref(props.componentKey);
+    const _attrs = ref(attrs);
+    watch(
+      () => props.is,
+      async (is) => {
+        if (is) {
+          localeConfig.loadMessageConfig.componentLoad && (await Promise.allSettled(loadMessages(is as any, false))); // 自动加载语言包
+          componentIs.value = is;
+          key.value = props.componentKey;
+          _attrs.value = attrs;
+          if (props.doneProgress) {
+            done();
+          }
+        }
+      },
+      { immediate: true },
+    );
+
+    return () => {
+      const components = [] as VNode[];
+      components.push(
+        h(componentIs.value || 'div', {
+          key: key.value,
+          ..._attrs.value,
+        }),
+      );
+      if (props.keepAlive) {
+        const index = components.length - 1;
+        components.push(h(MeKeepAlive, props.keepAlive, [components[index]]));
+      }
+      if (props.transition) {
+        const index = components.length - 1;
+        components.push(h(Transition, props.transition, { default: () => components[index] }));
+      }
+      return components[components.length - 1];
+    };
+  },
+});

src/components/meKeepAlive/index.ts

@@ -51,7 +51,7 @@ export interface KeepAliveContext extends ComponentRenderContext {
 }
 
 const KeepAliveImpl: ComponentOptions = {
-  name: `meKeepAlive`,
+  name: `MeKeepAlive`,
 
   // Marker for special handling inside the renderer. We are not using a ===
   // check directly on KeepAlive in the renderer, because importing it directly

src/layout/components/header/components/topBar/components/left.vue

@@ -12,7 +12,7 @@
       <el-breadcrumb separator="/">
         <el-breadcrumb-item
           v-for="(item, index) in breadcrumbList"
-          :key="index"
+          :key="item.path"
           :to="index === breadcrumbList.length - 1 || !item.redirect ? undefined : item"
           >{{ $t(item.meta!.title!) }}</el-breadcrumb-item
         >

src/layout/components/page.vue

@@ -1,6 +1,12 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <me-component :is="Component" :keep-alive="keepAliveProps" :component-key="route.fullPath" done-progress>
+    <me-component
+      :transition="{ name: 'fade-transform', mode: 'out-in' }"
+      :is="Component"
+      :keep-alive="keepAliveProps"
+      :component-key="route.fullPath"
+      done-progress
+    >
     </me-component>
   </router-view>
 </template>

src/styles/transition.scss

@@ -3,10 +3,10 @@
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all 0.5s;
+  transition: all 0.3s;
 }
 
-.fade-transform-enter {
+.fade-transform-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
@@ -15,3 +15,19 @@
   opacity: 0;
   transform: translateX(30px);
 }
+
+/* fade-transform-top */
+.fade-transform-top-leave-active,
+.fade-transform-top-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-top-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.fade-transform-top-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}

vite.config.ts

@@ -112,7 +112,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
         },
         {
           // auto import components
-          pattern: ['*.vue', '**/index.{vue,ts}'],
+          pattern: ['*.{vue,ts}', '**/index.{vue,ts}'],
           dir: 'src/components',
           toFile: 'types/components.d.ts',
           template: fs.readFileSync('./template/components.d.ts', 'utf-8'),