fix(frontend): 优化新手引导交互体验
1. 移除重复的"不再提示"按钮 - 只保留右上角的关闭按钮(X) - 简化用户操作,避免混淆 2. 移除退出确认框 - 点击关闭按钮直接退出并标记为已看过 - ESC 键也直接退出,不再弹出确认框 - 提升用户体验,减少打扰 3. 修复 Select 下拉菜单被遮挡问题 - 增加被高亮元素的下拉菜单 z-index - 确保下拉菜单在引导 popover 之上显示 - 解决步骤 5/21 (平台选择) 无法操作的问题
|
Before Width: | Height: | Size: 235 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 56 KiB |
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 673 KiB |