From d3dc081b5d8bad38ff83e5a502426ed950a99368 Mon Sep 17 00:00:00 2001
From: zhongming4762 <zhongming4762@hotmail.com>
Date: Wed, 5 Aug 2026 19:14:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=88=87=E6=8D=A2=201=E3=80=81=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=87=BA=E7=8E=B0=E5=8F=8C=E9=A1=B5=E9=9D=A2=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=202=E3=80=81=E5=88=87=E6=8D=A2=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=E6=A8=AA=E5=90=91=E5=92=8C=E7=BA=B5=E5=90=91=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../@core/base/design/src/css/transition.css  |  4 ++-
 .../layouts/src/basic/content/content.vue     | 27 ++++++++++++++++++-
 packages/stores/src/modules/tabbar.ts         |  5 ++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/@core/base/design/src/css/transition.css b/packages/@core/base/design/src/css/transition.css
index c1cb0e48..77ae0bd7 100644
--- a/packages/@core/base/design/src/css/transition.css
+++ b/packages/@core/base/design/src/css/transition.css
@@ -80,7 +80,9 @@
 
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.3s;
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
 }
 
 .fade-slide-enter-from {
diff --git a/packages/effects/layouts/src/basic/content/content.vue b/packages/effects/layouts/src/basic/content/content.vue
index f7ab347d..b6080321 100644
--- a/packages/effects/layouts/src/basic/content/content.vue
+++ b/packages/effects/layouts/src/basic/content/content.vue
@@ -31,7 +31,7 @@ const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
 </script>
 
 <template>
-  <div class="relative h-full">
+  <div class="page-route-container relative h-full">
     <IFrameRouterView />
     <RouteCachedView />
     <RouterView v-slot="{ Component, route }">
@@ -44,6 +44,7 @@ const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
         v-if="getEnabledTransition"
         :name="getTransitionName(route)"
         appear
+        :leave-active-class="`${getTransitionName(route)}-leave-active page-route-leave-active`"
       >
         <KeepAlive
           v-if="keepAlive"
@@ -85,3 +86,27 @@ const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
     </RouterView>
   </div>
 </template>
+
+<style>
+/* 优化router动画切换切换重叠问题 */
+.page-route-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+/* 移除动画切换的横向滚动条 translateX(-30px) */
+.page-route-container:has(> .fade-slide-enter-active),
+.page-route-container:has(> .fade-slide-leave-active) {
+  overflow-x: hidden;
+}
+
+/* 移除动画切换的纵向滚动条 */
+.page-route-container:has(> .fade-up-enter-active),
+.page-route-container:has(> .fade-up-leave-active),
+.page-route-container:has(> .fade-down-enter-active),
+.page-route-container:has(> .fade-down-leave-active) {
+  overflow-y: hidden;
+}
+</style>
diff --git a/packages/stores/src/modules/tabbar.ts b/packages/stores/src/modules/tabbar.ts
index e9411386..098c7f07 100644
--- a/packages/stores/src/modules/tabbar.ts
+++ b/packages/stores/src/modules/tabbar.ts
@@ -9,7 +9,7 @@ import type {
 
 import type { TabDefinition } from '@vben-core/typings';
 
-import { markRaw, toRaw } from 'vue';
+import { markRaw, nextTick, toRaw } from 'vue';
 
 import { preferences } from '@vben-core/preferences';
 import {
@@ -415,7 +415,8 @@ export const useTabbarStore = defineStore('core-tabbar', {
       this.renderRouteView = false;
       startProgress();
 
-      await new Promise((resolve) => setTimeout(resolve, 200));
+      await nextTick();
+      // await new Promise((resolve) => setTimeout(resolve, 200));
 
       this.excludeCachedTabs.delete(name as string);
       this.renderRouteView = true;