fix(frontend): 简易模式下禁用新手引导并优化显示逻辑

修复 Gemini 审查发现的潜在问题,并增强新手引导功能:

1. 简易模式下完全禁用新手引导
   - useOnboardingTour: 添加 isSimpleMode 判断,简易模式下不自动启动
   - 只在标准模式的管理员第一次加载时自动弹出

2. 动态过滤简易模式相关步骤
   - steps.ts: getAdminSteps 添加 isSimpleMode 参数
   - 简易模式下自动过滤分组管理和账号分组选择步骤
   - 避免引导找不到被隐藏的元素

3. 优化引导按钮显示条件
   - AppHeader: 添加 showOnboardingButton computed
   - 只在标准模式的管理员下显示"重新开始引导"按钮
   - 非管理员或简易模式下不显示按钮

4. 确保引导只在首次自动弹出
   - 关闭后不再自动出现
   - 只能从右上角手动重新打开
This commit is contained in:
IanShaw027
2025-12-29 15:36:04 +08:00
parent dd247e55e9
commit 337d9ad755
3 changed files with 46 additions and 4 deletions

View File

@@ -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
}
/**
* 普通用户引导流程

View File

@@ -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

View File

@@ -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()