fix(frontend): 修复新手引导中Select下拉框无法点击的问题

- 使用 Teleport 将 Select 下拉菜单渲染到 body,避免 driver.js 遮罩层阻挡
- 添加 pointer-events 和 @click.stop 确保下拉选项可点击
- 移除 useOnboardingTour 中无效的 Select 组件处理代码
- 清理未使用的 CSS 样式和 console 调试语句
- 简化 Select 组件在引导期间的交互逻辑
This commit is contained in:
shaw
2025-12-29 19:38:33 +08:00
parent ef22d6f628
commit 4bbf71b7da
5 changed files with 191 additions and 237 deletions

View File

@@ -6,6 +6,17 @@
inset: 0 !important;
z-index: 99999998 !important;
background-color: transparent !important;
/*
* 关键修复:让 overlay 不拦截点击事件
* 因为已设置 allowClose: false用户不能通过点击遮罩关闭引导
* 这样 Select 下拉菜单等脱离高亮区域的元素才能正常交互
* 视觉遮罩效果保持不变SVG 仍然渲染pointer-events 只影响交互不影响渲染)
*/
pointer-events: none !important;
}
.driver-overlay svg {
pointer-events: none !important;
}
.driver-active-element {
@@ -55,36 +66,6 @@
}
.dark .driver-popover-title-text { color: #ffffff !important; }
/* Skip Button */
.header-skip-btn {
position: absolute !important;
top: 18px !important;
right: 60px !important;
font-size: 12px !important;
color: #9ca3af !important;
background: transparent !important;
border: none !important;
padding: 4px 8px !important;
cursor: pointer !important;
border-radius: 4px !important;
transition: all 0.2s !important;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
height: 28px !important;
max-width: 120px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.header-skip-btn:hover {
background-color: rgba(239, 68, 68, 0.1) !important;
color: #ef4444 !important;
}
.dark .header-skip-btn:hover {
background-color: rgba(248, 113, 113, 0.1) !important;
color: #f87171 !important;
}
/* Close Button */
.theme-tour-popover .driver-popover-close-btn {
position: absolute !important;
@@ -245,8 +226,3 @@
.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;
}