mirror of
https://github.com/Wei-Shaw/sub2api.git
synced 2026-03-30 05:24:08 +00:00
dd247e55e9
- 添加 Guide 组件和引导步骤配置 - 实现 useOnboardingTour 和 useTourStepDescription composables - 添加 onboarding store 管理引导状态 - 更新多个视图和组件以支持引导功能 - 添加国际化支持（中英文） - 删除旧的实现指南文档
57 lines
1.6 KiB
Vue
57 lines
1.6 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 { useI18n } from 'vue-i18n'
|
|
import { useAppStore } from '@/stores'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useOnboardingTour } from '@/composables/useOnboardingTour'
|
|
import { getAdminSteps, getUserSteps } from '@/components/Guide/steps'
|
|
import { useOnboardingStore } from '@/stores/onboarding'
|
|
import AppSidebar from './AppSidebar.vue'
|
|
import AppHeader from './AppHeader.vue'
|
|
|
|
const appStore = useAppStore()
|
|
const authStore = useAuthStore()
|
|
const { t } = useI18n()
|
|
const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
|
|
const isAdmin = computed(() => authStore.user?.role === 'admin')
|
|
|
|
const { replayTour } = useOnboardingTour({
|
|
steps: isAdmin.value ? getAdminSteps(t) : getUserSteps(t),
|
|
storageKey: isAdmin.value ? 'admin_guide' : 'user_guide',
|
|
autoStart: true
|
|
})
|
|
|
|
const onboardingStore = useOnboardingStore()
|
|
|
|
onMounted(() => {
|
|
onboardingStore.setReplayCallback(replayTour)
|
|
})
|
|
|
|
defineExpose({ replayTour })
|
|
</script>
|