fix(frontend): 修复新手引导中Select下拉框无法点击的问题
- 使用 Teleport 将 Select 下拉菜单渲染到 body,避免 driver.js 遮罩层阻挡 - 添加 pointer-events 和 @click.stop 确保下拉选项可点击 - 移除 useOnboardingTour 中无效的 Select 组件处理代码 - 清理未使用的 CSS 样式和 console 调试语句 - 简化 Select 组件在引导期间的交互逻辑
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user