feat: 添加路由动效，抽离Breadcrumb组件

Author: sunss

src/components/Breadcrumb/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <a-card>
+    <a-breadcrumb :routes="breadcrumb">
+      <template #itemRender="{ route }">
+        <span class="font14 color-666">
+          {{ route.breadcrumbName }}
+        </span>
+      </template>
+    </a-breadcrumb>
+    <h2 class="font18 marT13 rowSC link" @click="handleBreadcrumb">
+      <LeftOutlined />
+      <span class="marL10">{{ title }}</span>
+    </h2>
+  </a-card>
+</template>
+<script setup lang="ts">
+  import { LeftOutlined } from '@ant-design/icons-vue';
+  import { Route } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
+  import { useBreadcrumbTitle } from '/@/hooks/useBreadcrumbTitle';
+
+  const { title } = useBreadcrumbTitle();
+  const router = useRouter();
+
+  const emits = defineEmits(['handleClick']);
+
+  const breadcrumb = computed(
+    () =>
+      router.currentRoute.value.matched
+        .filter((n) => !['/', '/app'].includes(n.path))
+        .map((item) => {
+          return {
+            path: item.path,
+            breadcrumbName: item.meta.title || '',
+          };
+        }) as Route[],
+  );
+
+  const handleBreadcrumb = () => {
+    emits('handleClick', breadcrumb.value);
+  };
+</script>
+<style scoped>
+  .link {
+    text-decoration: none;
+  }
+</style>

src/layouts/BasicLayout/index.vue

@@ -5,19 +5,7 @@
       <SideMenu v-bind="layoutConf" />
       <a-layout class="basicLayout-content">
         <!-- breadcrumb -->
-        <a-card v-if="routeMeta.breadcrumb">
-          <a-breadcrumb :routes="breadcrumb">
-            <template #itemRender="{ route }">
-              <span class="font14 color-666">
-                {{ route.breadcrumbName }}
-              </span>
-            </template>
-          </a-breadcrumb>
-          <h2 class="font18 marT13 rowSC link" @click="handleBreadcrumb">
-            <LeftOutlined />
-            <span class="marL10">{{ title }}</span>
-          </h2>
-        </a-card>
+        <Breadcrumb v-if="routeMeta.breadcrumb" @handleClick="handleBreadcrumb" />
 
         <!-- content -->
         <a-layout-content>
@@ -26,14 +14,23 @@
           <!-- router-view -->
           <template v-if="routeMeta.hiddenWrap">
             <!-- <router-view /> -->
-            <router-view v-slot="{ Component }">
-              <component :is="Component" />
+            <router-view v-slot="{ Component, route }">
+              <transition name="fade-slide" mode="out-in" appear>
+                <!-- https://www.jianshu.com/p/399667ec9ef8 -->
+                <div :key="route.name">
+                  <component :is="Component" />
+                </div>
+              </transition>
             </router-view>
           </template>
           <a-card v-else>
             <!-- <router-view /> -->
-            <router-view v-slot="{ Component }">
-              <component :is="Component" />
+            <router-view v-slot="{ Component, route }">
+              <transition name="fade-slide" mode="out-in" appear>
+                <div :key="route.name">
+                  <component :is="Component" />
+                </div>
+              </transition>
             </router-view>
           </a-card>
         </a-layout-content>
@@ -42,15 +39,12 @@
   </a-layout>
 </template>
 <script setup lang="ts">
-  import { LeftOutlined } from '@ant-design/icons-vue';
   import { Route } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
   import Header from './components/Header.vue';
   import SideMenu from './components/SideMenu';
-  import { useBreadcrumbTitle } from '/@/hooks/useBreadcrumbTitle';
   import { clearMenuItem, filterRoutes } from './utils';
 
   const router = useRouter();
-  const { title } = useBreadcrumbTitle();
 
   const menuData = filterRoutes(
     clearMenuItem(router.getRoutes()).filter((n) => n.path.startsWith('/app/')),

src/styles/index.less

@@ -1,3 +1,4 @@
+@import './transition.less';
 @import './variables.less';
 @import './common.less';
 @import './public.less';

src/styles/transition.less

@@ -0,0 +1,82 @@
+// 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
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.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);
+}
+
+// ///////////////////////////////////////////////
+// Fade Top
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-top-enter-active,
+.fade-top-leave-active {
+  transition: opacity 0.2s, transform 0.25s;
+}
+
+.fade-top-enter-from {
+  opacity: 0;
+  transform: translateY(8%);
+}
+
+.fade-top-leave-to {
+  opacity: 0;
+  transform: translateY(-8%);
+}