From 637fc4a6148cfcf7fbe1078752e0e8d3ca9b3d50 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Sun, 11 May 2025 21:32:19 +0800
Subject: [PATCH] =?UTF-8?q?:boom:=20feat:=20=E6=9B=B4=E6=96=B0=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                | 15 ++++++++++++++-
 src/router/modules/home.ts | 15 +++++++++++++--
 src/types/router.d.ts      | 11 +++++++++++
 src/types/router/Route.ts  | 10 +++++++++-
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/types/router.d.ts

diff --git a/src/App.vue b/src/App.vue
index cb4a71b..11b5c9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,24 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
+    <transition
+      :enter-active-class="
+        route.meta.transition?.enter
+          ? `animate__animated ${route.meta.transition.enter}`
+          : 'animate__animated animate__fadeInLeft animate__faster'
+      "
+      :leave-active-class="
+        route.meta.transition?.leave
+          ? `animate__animated ${route.meta.transition.leave}`
+          : 'animate__animated animate__fadeOutLeft animate__faster'
+      "
+      mode="out-in"
+    >
       <component :is="Component" :key="route.path" />
     </transition>
   </router-view>
 </template>
 
+<script lang="ts" setup></script>
 <style lang="scss">
 #app {
   width: 100%;
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 4b70c1e..3e6607b 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -6,7 +6,10 @@ const routes: RouteConfigsTable[] = [
     path: '/welcome',
     name: 'welcome',
     component: () => import('@/views/welcome/index.vue'),
-    meta: { transition: 'fade', title: '后台管理系统标题', headerType: HeaderTypeEnum.default },
+    meta: {
+      title: '后台管理系统标题',
+      headerType: HeaderTypeEnum.default,
+    },
   },
   {
     path: '/smart-park',
@@ -16,6 +19,10 @@ const routes: RouteConfigsTable[] = [
       title: '智慧智能监管中心',
       subtitle: '车辆监控中心',
       headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceInUp animate__faster',
+        leave: 'animate__bounceOutUp',
+      },
     },
   },
   {
@@ -24,8 +31,12 @@ const routes: RouteConfigsTable[] = [
     component: () => import('@/views/data-analyse/index.vue'),
     meta: {
       title: '数据分析',
-      subtitle: '车辆监控中心',
+      subtitle: '数据分析中心',
       headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceIn animate__faster',
+        leave: 'animate__bounceOut',
+      },
     },
   },
   {
diff --git a/src/types/router.d.ts b/src/types/router.d.ts
new file mode 100644
index 0000000..19f8153
--- /dev/null
+++ b/src/types/router.d.ts
@@ -0,0 +1,11 @@
+// types/router.d.ts
+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    transition?: {
+      enter: string;
+      leave: string;
+    };
+  }
+}
diff --git a/src/types/router/Route.ts b/src/types/router/Route.ts
index 2047997..920f655 100644
--- a/src/types/router/Route.ts
+++ b/src/types/router/Route.ts
@@ -1,12 +1,20 @@
 import type { RouteComponent } from 'vue-router';
 
+/**
+ * @description 动画入场和离场
+ */
+interface Transition {
+  enter?: string;
+  leave?: string;
+}
+
 /**
  * @description 完整子路由的`meta`配置表
  */
 interface CustomizeRouteMeta {
   title?: string;
   subtitle?: string;
-  transition?: string;
+  transition?: Transition;
   hidden?: boolean;
   /* 头部类型 */
   headerType?: any;