fix(projects): 修复页面切换时导致的溢出滚动条

src/layouts/BasicLayout/index.vue

@@ -10,6 +10,7 @@
     :sider-width="siderWidth"
     :sider-collapsed-width="siderCollapsedWidth"
     :sider-collapse="app.siderCollapse"
+    :add-main-overflow-hidden="addMainOverflowHidden"
     :fixed-footer="theme.footer.fixed"
   >
     <template #header>
@@ -21,7 +22,7 @@
     <template #sider>
       <global-sider />
     </template>
-    <global-content />
+    <global-content @hide-main-overflow="setAddMainOverflowHidden" />
     <template #footer>
       <global-footer />
     </template>
@@ -33,11 +34,14 @@
 import AdminLayout from '@soybeanjs/vue-admin-layout';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
+import { useBoolean } from '@/hooks';
 import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
 
 const app = useAppStore();
 const theme = useThemeStore();
 
 const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
+
+const { bool: addMainOverflowHidden, setBool: setAddMainOverflowHidden } = useBoolean();
 </script>
 <style scoped></style>

src/layouts/common/GlobalContent/index.vue

@@ -5,7 +5,13 @@
   >
     <router-view v-slot="{ Component, route }">
       <div class="h-full">
-        <transition :name="theme.page.animate ? theme.page.animateMode : undefined" mode="out-in" appear>
+        <transition
+          :name="theme.pageAnimateMode"
+          mode="out-in"
+          :appear="true"
+          @before-leave="handleBeforeLeave"
+          @after-enter="handleAfterEnter"
+        >
           <keep-alive :include="routeStore.cacheRoutes">
             <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
           </keep-alive>
@@ -23,12 +29,26 @@ interface Props {
   showPadding?: boolean;
 }
 
+interface Emits {
+  /** 禁止主体溢出 */
+  (e: 'hide-main-overflow', hidden: boolean): void;
+}
+
 withDefaults(defineProps<Props>(), {
   showPadding: true
 });
 
+const emit = defineEmits<Emits>();
+
 const app = useAppStore();
 const theme = useThemeStore();
 const routeStore = useRouteStore();
+
+function handleBeforeLeave() {
+  emit('hide-main-overflow', true);
+}
+function handleAfterEnter() {
+  emit('hide-main-overflow', false);
+}
 </script>
 <style scoped></style>

src/store/modules/theme/index.ts

@@ -15,6 +15,9 @@ export const useThemeStore = defineStore('theme-store', {
     /** naive-ui暗黑主题 */
     naiveTheme(state) {
       return state.darkMode ? darkTheme : undefined;
+    },
+    pageAnimateMode(state) {
+      return state.page.animate ? state.page.animateMode : undefined;
     }
   },
   actions: {