feat: 页面切换动画

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}>
+            <div class={styles.pageView}>
               <RouterView
                 v-slots={{
-                default: ({ Component }: any) => (
+                  default: ({ Component, route }: any) => (
                     <KeepAlive include={cachedViews.value}>
-                    <Component />
+                      <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>