src/assets/styles/index.less

@@ -114,3 +114,32 @@ a {
 .ant-tag {
   margin-right: 0;
 }
+
+// ===== 页面切换动画（KeepAlive + RouterView） =====
+
+.page-fade-slide-enter-active,
+.page-fade-slide-leave-active {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  transition:
+    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.page-fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+.page-fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+
+.page-fade-slide-leave-active {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  overflow: hidden;
+}

src/layouts/BasicLayout.module.less

@@ -103,6 +103,15 @@
     overflow: hidden;
   }
 
+  .pageView {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
   .main {
     flex: 1;
     min-height: 0;

src/layouts/BasicLayout.tsx

@@ -1,6 +1,5 @@
-import { computed, defineComponent, h, ref } from 'vue';
+import { computed, defineComponent, h, ref, Transition, KeepAlive } from 'vue';
 import type { CSSProperties } from 'vue';
-import { KeepAlive } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -263,15 +262,19 @@ export default defineComponent({
             include 是组件 name 列表,所以页面组件需要在 defineComponent 中显式给出 name
           */}
           <Content class={styles.content}>
-            <RouterView
-              v-slots={{
-                default: ({ Component }: any) => (
-                  <KeepAlive include={cachedViews.value}>
-                    <Component />
-                  </KeepAlive>
-                ),
-              }}
-            />
+            <div class={styles.pageView}>
+              <RouterView
+                v-slots={{
+                  default: ({ Component, route }: any) => (
+                    <KeepAlive include={cachedViews.value}>
+                      <Transition name="page-fade-slide" mode="out-in">
+                        {Component ? h(Component, { key: route.path }) : null}
+                      </Transition>
+                    </KeepAlive>
+                  ),
+                }}
+              />
+            </div>
           </Content>
 
           <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>