4bbf71b7da
- 使用 Teleport 将 Select 下拉菜单渲染到 body，避免 driver.js 遮罩层阻挡 - 添加 pointer-events 和 @click.stop 确保下拉选项可点击 - 移除 useOnboardingTour 中无效的 Select 组件处理代码 - 清理未使用的 CSS 样式和 console 调试语句 - 简化 Select 组件在引导期间的交互逻辑
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<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>
|