fix(frontend): 优化新手引导交互体验

1. 移除重复的"不再提示"按钮
   - 只保留右上角的关闭按钮(X)
   - 简化用户操作,避免混淆

2. 移除退出确认框
   - 点击关闭按钮直接退出并标记为已看过
   - ESC 键也直接退出,不再弹出确认框
   - 提升用户体验,减少打扰

3. 修复 Select 下拉菜单被遮挡问题
   - 增加被高亮元素的下拉菜单 z-index
   - 确保下拉菜单在引导 popover 之上显示
   - 解决步骤 5/21 (平台选择) 无法操作的问题
This commit is contained in:
IanShaw027
2025-12-29 15:50:07 +08:00
parent 337d9ad755
commit e847cfc8a0
9 changed files with 11 additions and 36 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

View File

@@ -138,10 +138,9 @@ export function useOnboardingTour(options: OnboardingOptions) {
driverInstance?.movePrevious()
},
onCloseClick: () => {
if (confirm(t('onboarding.confirmExit'))) {
driverInstance?.destroy()
onboardingStore.setDriverInstance(null)
}
markAsSeen()
driverInstance?.destroy()
onboardingStore.setDriverInstance(null)
},
// 渲染时重组 Footer 布局
@@ -166,34 +165,6 @@ export function useOnboardingTour(options: OnboardingOptions) {
return
}
// 1. 顶部:添加 "不再提示" 按钮
if (!titleEl.querySelector(`.${CLASS_SKIP_BTN}`)) {
const titleText = titleEl.innerText
if (!titleEl.querySelector(`.${CLASS_TITLE_TEXT}`)) {
const titleSpan = document.createElement('span')
titleSpan.className = CLASS_TITLE_TEXT
titleSpan.textContent = titleText
titleEl.textContent = ''
titleEl.appendChild(titleSpan)
}
const skipBtn = document.createElement('button')
skipBtn.className = CLASS_SKIP_BTN
skipBtn.innerText = t('onboarding.dontShowAgain')
skipBtn.title = t('onboarding.dontShowAgainTitle')
skipBtn.type = 'button'
skipBtn.setAttribute('aria-label', t('onboarding.dontShowAgain'))
skipBtn.onclick = (e) => {
e.stopPropagation()
if (confirm(t('onboarding.confirmDontShow'))) {
markAsSeen()
driverInstance?.destroy()
onboardingStore.setDriverInstance(null)
}
}
titleEl.appendChild(skipBtn)
}
// 1.5 交互式步骤提示
const currentStep = steps[state.activeIndex ?? 0]
const isInteractive = currentStep?.popover?.showButtons?.length === 1 &&
@@ -489,10 +460,9 @@ export function useOnboardingTour(options: OnboardingOptions) {
if (e.key === 'Escape') {
e.preventDefault()
e.stopPropagation()
if (confirm(t('onboarding.confirmExit'))) {
driverInstance.destroy()
onboardingStore.setDriverInstance(null)
}
markAsSeen()
driverInstance.destroy()
onboardingStore.setDriverInstance(null)
return
}

View File

@@ -245,3 +245,8 @@
.dark .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #1e293b !important; }
.dark .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #1e293b !important; }
.dark .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #1e293b !important; }
/* 确保被高亮元素的下拉菜单也有足够高的 z-index */
.driver-active-element .select-dropdown {
z-index: 100000001 !important;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 673 KiB