fix(frontend): 简易模式下禁用新手引导并优化显示逻辑
修复 Gemini 审查发现的潜在问题,并增强新手引导功能: 1. 简易模式下完全禁用新手引导 - useOnboardingTour: 添加 isSimpleMode 判断,简易模式下不自动启动 - 只在标准模式的管理员第一次加载时自动弹出 2. 动态过滤简易模式相关步骤 - steps.ts: getAdminSteps 添加 isSimpleMode 参数 - 简易模式下自动过滤分组管理和账号分组选择步骤 - 避免引导找不到被隐藏的元素 3. 优化引导按钮显示条件 - AppHeader: 添加 showOnboardingButton computed - 只在标准模式的管理员下显示"重新开始引导"按钮 - 非管理员或简易模式下不显示按钮 4. 确保引导只在首次自动弹出 - 关闭后不再自动出现 - 只能从右上角手动重新打开
This commit is contained in:
@@ -3,8 +3,11 @@ import { DriveStep } from 'driver.js'
|
|||||||
/**
|
/**
|
||||||
* 管理员完整引导流程
|
* 管理员完整引导流程
|
||||||
* 交互式引导:指引用户实际操作
|
* 交互式引导:指引用户实际操作
|
||||||
|
* @param t 国际化函数
|
||||||
|
* @param isSimpleMode 是否为简易模式(简易模式下会过滤分组相关步骤)
|
||||||
*/
|
*/
|
||||||
export const getAdminSteps = (t: (key: string) => string): DriveStep[] => [
|
export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false): DriveStep[] => {
|
||||||
|
const allSteps: DriveStep[] = [
|
||||||
// ========== 欢迎介绍 ==========
|
// ========== 欢迎介绍 ==========
|
||||||
{
|
{
|
||||||
popover: {
|
popover: {
|
||||||
@@ -221,7 +224,24 @@ export const getAdminSteps = (t: (key: string) => string): DriveStep[] => [
|
|||||||
showButtons: ['close']
|
showButtons: ['close']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// 简易模式下过滤分组相关步骤
|
||||||
|
if (isSimpleMode) {
|
||||||
|
return allSteps.filter(step => {
|
||||||
|
const element = step.element as string | undefined
|
||||||
|
// 过滤掉分组管理和账号分组选择相关步骤
|
||||||
|
return !element || (
|
||||||
|
!element.includes('sidebar-group-manage') &&
|
||||||
|
!element.includes('groups-create-btn') &&
|
||||||
|
!element.includes('group-form-') &&
|
||||||
|
!element.includes('account-form-groups')
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return allSteps
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 普通用户引导流程
|
* 普通用户引导流程
|
||||||
|
|||||||
@@ -199,7 +199,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border-t border-gray-100 py-1 dark:border-dark-700">
|
<div v-if="showOnboardingButton" class="border-t border-gray-100 py-1 dark:border-dark-700">
|
||||||
<button @click="handleReplayGuide" class="dropdown-item w-full">
|
<button @click="handleReplayGuide" class="dropdown-item w-full">
|
||||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
@@ -208,6 +208,9 @@
|
|||||||
</svg>
|
</svg>
|
||||||
{{ $t('onboarding.restartTour') }}
|
{{ $t('onboarding.restartTour') }}
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-gray-100 py-1 dark:border-dark-700">
|
||||||
<button
|
<button
|
||||||
@click="handleLogout"
|
@click="handleLogout"
|
||||||
class="dropdown-item w-full text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
|
class="dropdown-item w-full text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
|
||||||
@@ -256,6 +259,11 @@ const dropdownOpen = ref(false)
|
|||||||
const dropdownRef = ref<HTMLElement | null>(null)
|
const dropdownRef = ref<HTMLElement | null>(null)
|
||||||
const contactInfo = computed(() => appStore.contactInfo)
|
const contactInfo = computed(() => appStore.contactInfo)
|
||||||
|
|
||||||
|
// 只在标准模式的管理员下显示新手引导按钮
|
||||||
|
const showOnboardingButton = computed(() => {
|
||||||
|
return !authStore.isSimpleMode && user.value?.role === 'admin'
|
||||||
|
})
|
||||||
|
|
||||||
const userInitials = computed(() => {
|
const userInitials = computed(() => {
|
||||||
if (!user.value) return ''
|
if (!user.value) return ''
|
||||||
// Prefer username, fallback to email
|
// Prefer username, fallback to email
|
||||||
|
|||||||
@@ -76,7 +76,8 @@ export function useOnboardingTour(options: OnboardingOptions) {
|
|||||||
const startTour = async (startIndex = 0) => {
|
const startTour = async (startIndex = 0) => {
|
||||||
// 动态获取当前用户角色和步骤
|
// 动态获取当前用户角色和步骤
|
||||||
const isAdmin = userStore.user?.role === 'admin'
|
const isAdmin = userStore.user?.role === 'admin'
|
||||||
const steps = isAdmin ? getAdminSteps(t) : getUserSteps(t)
|
const isSimpleMode = userStore.isSimpleMode
|
||||||
|
const steps = isAdmin ? getAdminSteps(t, isSimpleMode) : getUserSteps(t)
|
||||||
|
|
||||||
// 确保 DOM 就绪
|
// 确保 DOM 就绪
|
||||||
await nextTick()
|
await nextTick()
|
||||||
@@ -608,6 +609,19 @@ export function useOnboardingTour(options: OnboardingOptions) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 简易模式下禁用新手引导
|
||||||
|
if (userStore.isSimpleMode) {
|
||||||
|
console.log('Simple mode detected, skipping onboarding tour')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 只在管理员+标准模式下自动启动
|
||||||
|
const isAdmin = userStore.user?.role === 'admin'
|
||||||
|
if (!isAdmin) {
|
||||||
|
console.log('Non-admin user, skipping auto-start')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (!options.autoStart || hasSeen()) return
|
if (!options.autoStart || hasSeen()) return
|
||||||
autoStartTimer = setTimeout(() => {
|
autoStartTimer = setTimeout(() => {
|
||||||
void startTour()
|
void startTour()
|
||||||
|
|||||||
Reference in New Issue
Block a user