53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Component } from 'vue'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
|
|
defineProps<{
|
|
activeComponent: Component | null
|
|
activeModule: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<main
|
|
class="flex-1"
|
|
:style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
|
|
>
|
|
<ScrollArea data-main-scroll class="h-full w-full">
|
|
<Transition name="fade-slide" mode="out-in">
|
|
<div
|
|
v-if="activeComponent"
|
|
:key="activeModule"
|
|
class="min-h-full w-full"
|
|
>
|
|
<component :is="activeComponent" />
|
|
</div>
|
|
<div
|
|
v-else
|
|
key="empty"
|
|
class="h-full w-full flex items-center justify-center text-muted-foreground"
|
|
>
|
|
<p>未找到模块</p>
|
|
</div>
|
|
</Transition>
|
|
</ScrollArea>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fade-slide-enter-active,
|
|
.fade-slide-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.fade-slide-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.fade-slide-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
</style>
|