File size: 1,437 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <template>
<div class="min-h-screen bg-gray-50 dark:bg-dark-950">
<!-- Background Decoration -->
<div class="pointer-events-none fixed inset-0 bg-mesh-gradient"></div>
<!-- Sidebar -->
<AppSidebar />
<!-- Main Content Area -->
<div
class="relative min-h-screen transition-all duration-300"
:class="[sidebarCollapsed ? 'lg:ml-[72px]' : 'lg:ml-64']"
>
<!-- Header -->
<AppHeader />
<!-- Main Content -->
<main class="p-4 md:p-6 lg:p-8">
<slot />
</main>
</div>
</div>
</template>
<script setup lang="ts">
import '@/styles/onboarding.css'
import { computed, onMounted } from 'vue'
import { useAppStore } from '@/stores'
import { useAuthStore } from '@/stores/auth'
import { useOnboardingTour } from '@/composables/useOnboardingTour'
import { useOnboardingStore } from '@/stores/onboarding'
import AppSidebar from './AppSidebar.vue'
import AppHeader from './AppHeader.vue'
const appStore = useAppStore()
const authStore = useAuthStore()
const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
const isAdmin = computed(() => authStore.user?.role === 'admin')
const { replayTour } = useOnboardingTour({
storageKey: isAdmin.value ? 'admin_guide' : 'user_guide',
autoStart: true
})
const onboardingStore = useOnboardingStore()
onMounted(() => {
onboardingStore.setReplayCallback(replayTour)
})
defineExpose({ replayTour })
</script>
|