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: {
|
||||
@@ -221,7 +224,24 @@ export const getAdminSteps = (t: (key: string) => string): DriveStep[] => [
|
||||
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 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">
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
@@ -208,6 +208,9 @@
|
||||
</svg>
|
||||
{{ $t('onboarding.restartTour') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-100 py-1 dark:border-dark-700">
|
||||
<button
|
||||
@click="handleLogout"
|
||||
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 contactInfo = computed(() => appStore.contactInfo)
|
||||
|
||||
// 只在标准模式的管理员下显示新手引导按钮
|
||||
const showOnboardingButton = computed(() => {
|
||||
return !authStore.isSimpleMode && user.value?.role === 'admin'
|
||||
})
|
||||
|
||||
const userInitials = computed(() => {
|
||||
if (!user.value) return ''
|
||||
// Prefer username, fallback to email
|
||||
|
||||
@@ -76,7 +76,8 @@ export function useOnboardingTour(options: OnboardingOptions) {
|
||||
const startTour = async (startIndex = 0) => {
|
||||
// 动态获取当前用户角色和步骤
|
||||
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 就绪
|
||||
await nextTick()
|
||||
@@ -608,6 +609,19 @@ export function useOnboardingTour(options: OnboardingOptions) {
|
||||
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
|
||||
autoStartTimer = setTimeout(() => {
|
||||
void startTour()
|
||||
|
||||
Reference in New Issue
Block a user