mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-22 11:36:37 +08:00
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { useRouteStore } from '@/store/modules/route';
|
|
import { useTabStore } from '@/store/modules/tab';
|
|
|
|
defineOptions({
|
|
name: 'GlobalContent'
|
|
});
|
|
|
|
interface Props {
|
|
/** Show padding for content */
|
|
showPadding?: boolean;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
showPadding: true
|
|
});
|
|
|
|
const appStore = useAppStore();
|
|
const themeStore = useThemeStore();
|
|
const routeStore = useRouteStore();
|
|
const tabStore = useTabStore();
|
|
|
|
const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
|
|
|
|
function resetScroll() {
|
|
const el = document.querySelector(`#${LAYOUT_SCROLL_EL_ID}`);
|
|
|
|
el?.scrollTo({ left: 0, top: 0 });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<RouterView v-slot="{ Component, route }">
|
|
<Transition
|
|
:name="transitionName"
|
|
mode="out-in"
|
|
@before-leave="appStore.setContentXScrollable(true)"
|
|
@after-leave="resetScroll"
|
|
@after-enter="appStore.setContentXScrollable(false)"
|
|
>
|
|
<KeepAlive :include="routeStore.cacheRoutes">
|
|
<component
|
|
:is="Component"
|
|
v-if="appStore.reloadFlag"
|
|
:key="tabStore.getTabIdByRoute(route)"
|
|
:class="{ 'p-16px': showPadding }"
|
|
class="flex-grow bg-layout transition-300"
|
|
/>
|
|
</KeepAlive>
|
|
</Transition>
|
|
</RouterView>
|
|
</template>
|
|
|
|
<style></style>
|