From 4bbf71b7da8e12c28c6ddaadefc0b1676e6c3ab1 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Mon, 29 Dec 2025 19:38:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=E6=96=B0?=
 =?UTF-8?q?=E6=89=8B=E5=BC=95=E5=AF=BC=E4=B8=ADSelect=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86=E6=97=A0=E6=B3=95=E7=82=B9=E5=87=BB=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 Teleport 将 Select 下拉菜单渲染到 body，避免 driver.js 遮罩层阻挡
- 添加 pointer-events 和 @click.stop 确保下拉选项可点击
- 移除 useOnboardingTour 中无效的 Select 组件处理代码
- 清理未使用的 CSS 样式和 console 调试语句
- 简化 Select 组件在引导期间的交互逻辑
---
 frontend/src/components/Guide/steps.ts        |  26 +--
 frontend/src/components/common/Select.vue     | 206 ++++++++++--------
 frontend/src/components/layout/AppLayout.vue  |   4 -
 frontend/src/composables/useOnboardingTour.ts | 146 ++++---------
 frontend/src/styles/onboarding.css            |  46 +---
 5 files changed, 191 insertions(+), 237 deletions(-)

diff --git a/frontend/src/components/Guide/steps.ts b/frontend/src/components/Guide/steps.ts
index c79db78f..aeb38ab5 100644
--- a/frontend/src/components/Guide/steps.ts
+++ b/frontend/src/components/Guide/steps.ts
@@ -47,7 +47,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.groupName.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -57,7 +57,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.groupPlatform.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -67,7 +67,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.groupMultiplier.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -77,7 +77,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.groupExclusive.description'),
       side: 'top',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -119,7 +119,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.accountName.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -129,7 +129,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.accountPlatform.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -139,7 +139,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.accountType.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -149,7 +149,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.accountPriority.description'),
       side: 'top',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -159,7 +159,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.accountGroups.description'),
       side: 'top',
       align: 'center',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -201,7 +201,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.keyName.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -211,7 +211,7 @@ export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false):
       description: t('onboarding.admin.keyGroup.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -283,7 +283,7 @@ export const getUserSteps = (t: (key: string) => string): DriveStep[] => [
       description: t('onboarding.user.keyName.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
@@ -293,7 +293,7 @@ export const getUserSteps = (t: (key: string) => string): DriveStep[] => [
       description: t('onboarding.user.keyGroup.description'),
       side: 'right',
       align: 'start',
-      showButtons: ['close']
+      showButtons: ['next', 'previous']
     }
   },
   {
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index 725aa1f3..2e06b9f9 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -29,67 +29,73 @@
       </span>
     </button>
 
-    <Transition name="select-dropdown">
-      <div
-        v-if="isOpen"
-        ref="dropdownRef"
-        :class="['select-dropdown', dropdownPosition === 'top' && 'select-dropdown-top']"
-      >
-        <!-- Search input -->
-        <div v-if="searchable" class="select-search">
-          <svg
-            class="h-4 w-4 text-gray-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    <!-- Teleport dropdown to body to escape stacking context (for driver.js overlay compatibility) -->
+    <Teleport to="body">
+      <Transition name="select-dropdown">
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="select-dropdown-portal"
+          :style="dropdownStyle"
+          @click.stop
+          @mousedown.stop
+        >
+          <!-- Search input -->
+          <div v-if="searchable" class="select-search">
+            <svg
+              class="h-4 w-4 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+              />
+            </svg>
+            <input
+              ref="searchInputRef"
+              v-model="searchQuery"
+              type="text"
+              :placeholder="searchPlaceholderText"
+              class="select-search-input"
+              @click.stop
             />
-          </svg>
-          <input
-            ref="searchInputRef"
-            v-model="searchQuery"
-            type="text"
-            :placeholder="searchPlaceholderText"
-            class="select-search-input"
-            @click.stop
-          />
-        </div>
-
-        <!-- Options list -->
-        <div class="select-options">
-          <div
-            v-for="option in filteredOptions"
-            :key="`${typeof getOptionValue(option)}:${String(getOptionValue(option) ?? '')}`"
-            @click="selectOption(option)"
-            :class="['select-option', isSelected(option) && 'select-option-selected']"
-          >
-            <slot name="option" :option="option" :selected="isSelected(option)">
-              <span class="select-option-label">{{ getOptionLabel(option) }}</span>
-              <svg
-                v-if="isSelected(option)"
-                class="h-4 w-4 text-primary-500"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-            </slot>
           </div>
 
-          <!-- Empty state -->
-          <div v-if="filteredOptions.length === 0" class="select-empty">
-            {{ emptyTextDisplay }}
+          <!-- Options list -->
+          <div class="select-options">
+            <div
+              v-for="option in filteredOptions"
+              :key="`${typeof getOptionValue(option)}:${String(getOptionValue(option) ?? '')}`"
+              @click.stop="selectOption(option)"
+              :class="['select-option', isSelected(option) && 'select-option-selected']"
+            >
+              <slot name="option" :option="option" :selected="isSelected(option)">
+                <span class="select-option-label">{{ getOptionLabel(option) }}</span>
+                <svg
+                  v-if="isSelected(option)"
+                  class="h-4 w-4 text-primary-500"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+              </slot>
+            </div>
+
+            <!-- Empty state -->
+            <div v-if="filteredOptions.length === 0" class="select-empty">
+              {{ emptyTextDisplay }}
+            </div>
           </div>
         </div>
-      </div>
-    </Transition>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -147,6 +153,28 @@ const containerRef = ref<HTMLElement | null>(null)
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const dropdownRef = ref<HTMLElement | null>(null)
 const dropdownPosition = ref<'bottom' | 'top'>('bottom')
+const triggerRect = ref<DOMRect | null>(null)
+
+// Computed style for teleported dropdown
+const dropdownStyle = computed(() => {
+  if (!triggerRect.value) return {}
+
+  const rect = triggerRect.value
+  const style: Record<string, string> = {
+    position: 'fixed',
+    left: `${rect.left}px`,
+    minWidth: `${rect.width}px`,
+    zIndex: '100000020' // Higher than driver.js overlay (99999998)
+  }
+
+  if (dropdownPosition.value === 'top') {
+    style.bottom = `${window.innerHeight - rect.top + 8}px`
+  } else {
+    style.top = `${rect.bottom + 8}px`
+  }
+
+  return style
+})
 
 const getOptionValue = (
   option: SelectOption | Record<string, unknown>
@@ -193,14 +221,17 @@ const isSelected = (option: SelectOption | Record<string, unknown>): boolean =>
 const calculateDropdownPosition = () => {
   if (!containerRef.value) return
 
+  // Update trigger rect for positioning
+  triggerRect.value = containerRef.value.getBoundingClientRect()
+
   nextTick(() => {
     if (!containerRef.value || !dropdownRef.value) return
 
-    const triggerRect = containerRef.value.getBoundingClientRect()
+    const rect = triggerRect.value!
     const dropdownHeight = dropdownRef.value.offsetHeight || 240 // Max height fallback
     const viewportHeight = window.innerHeight
-    const spaceBelow = viewportHeight - triggerRect.bottom
-    const spaceAbove = triggerRect.top
+    const spaceBelow = viewportHeight - rect.bottom
+    const spaceAbove = rect.top
 
     // If not enough space below but enough space above, show dropdown on top
     if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
@@ -233,10 +264,21 @@ const selectOption = (option: SelectOption | Record<string, unknown>) => {
 }
 
 const handleClickOutside = (event: MouseEvent) => {
-  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-    searchQuery.value = ''
+  const target = event.target as HTMLElement
+
+  // 使用 closest 检查点击是否在下拉菜单内部（更可靠，不依赖 ref）
+  if (target.closest('.select-dropdown-portal')) {
+    return // 点击在下拉菜单内，不关闭
   }
+
+  // 检查是否点击在触发器内
+  if (containerRef.value && containerRef.value.contains(target)) {
+    return // 点击在触发器内，让 toggle 处理
+  }
+
+  // 点击在外部，关闭下拉菜单
+  isOpen.value = false
+  searchQuery.value = ''
 }
 
 const handleEscape = (event: KeyboardEvent) => {
@@ -295,54 +337,57 @@ onUnmounted(() => {
 .select-icon {
   @apply flex-shrink-0 text-gray-400 dark:text-dark-400;
 }
+</style>
 
-.select-dropdown {
-  @apply absolute left-0 z-[100] mt-2 min-w-full w-max max-w-[300px];
+<!-- Global styles for teleported dropdown -->
+<style>
+.select-dropdown-portal {
+  @apply w-max max-w-[300px];
   @apply bg-white dark:bg-dark-800;
   @apply rounded-xl;
   @apply border border-gray-200 dark:border-dark-700;
   @apply shadow-lg shadow-black/10 dark:shadow-black/30;
   @apply overflow-hidden;
+  /* 确保下拉菜单在引导期间可点击（覆盖 driver.js 的 pointer-events 影响） */
+  pointer-events: auto !important;
 }
 
-.select-dropdown-top {
-  @apply bottom-full mb-2 mt-0;
-}
-
-.select-search {
+.select-dropdown-portal .select-search {
   @apply flex items-center gap-2 px-3 py-2;
   @apply border-b border-gray-100 dark:border-dark-700;
 }
 
-.select-search-input {
+.select-dropdown-portal .select-search-input {
   @apply flex-1 bg-transparent text-sm;
   @apply text-gray-900 dark:text-gray-100;
   @apply placeholder:text-gray-400 dark:placeholder:text-dark-400;
   @apply focus:outline-none;
 }
 
-.select-options {
+.select-dropdown-portal .select-options {
   @apply max-h-60 overflow-y-auto py-1;
 }
 
-.select-option {
+.select-dropdown-portal .select-option {
   @apply flex items-center justify-between gap-2;
   @apply px-4 py-2.5 text-sm;
   @apply text-gray-700 dark:text-gray-300;
   @apply cursor-pointer transition-colors duration-150;
   @apply hover:bg-gray-50 dark:hover:bg-dark-700;
+  /* 确保选项在引导期间可点击 */
+  pointer-events: auto !important;
 }
 
-.select-option-selected {
+.select-dropdown-portal .select-option-selected {
   @apply bg-primary-50 dark:bg-primary-900/20;
   @apply text-primary-700 dark:text-primary-300;
 }
 
-.select-option-label {
+.select-dropdown-portal .select-option-label {
   @apply flex-1 min-w-0 truncate text-left;
 }
 
-.select-empty {
+.select-dropdown-portal .select-empty {
   @apply px-4 py-8 text-center text-sm;
   @apply text-gray-500 dark:text-dark-400;
 }
@@ -356,17 +401,6 @@ onUnmounted(() => {
 .select-dropdown-enter-from,
 .select-dropdown-leave-to {
   opacity: 0;
-}
-
-/* Animation for dropdown opening downward (default) */
-.select-dropdown:not(.select-dropdown-top).select-dropdown-enter-from,
-.select-dropdown:not(.select-dropdown-top).select-dropdown-leave-to {
   transform: translateY(-8px);
 }
-
-/* Animation for dropdown opening upward */
-.select-dropdown-top.select-dropdown-enter-from,
-.select-dropdown-top.select-dropdown-leave-to {
-  transform: translateY(8px);
-}
 </style>
diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index bbdfc17f..4c5b0c5d 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -25,23 +25,19 @@
 <script setup lang="ts">
 import '@/styles/onboarding.css'
 import { computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores'
 import { useAuthStore } from '@/stores/auth'
 import { useOnboardingTour } from '@/composables/useOnboardingTour'
-import { getAdminSteps, getUserSteps } from '@/components/Guide/steps'
 import { useOnboardingStore } from '@/stores/onboarding'
 import AppSidebar from './AppSidebar.vue'
 import AppHeader from './AppHeader.vue'
 
 const appStore = useAppStore()
 const authStore = useAuthStore()
-const { t } = useI18n()
 const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
 const isAdmin = computed(() => authStore.user?.role === 'admin')
 
 const { replayTour } = useOnboardingTour({
-  steps: isAdmin.value ? getAdminSteps(t) : getUserSteps(t),
   storageKey: isAdmin.value ? 'admin_guide' : 'user_guide',
   autoStart: true
 })
diff --git a/frontend/src/composables/useOnboardingTour.ts b/frontend/src/composables/useOnboardingTour.ts
index b2275f63..40d841cd 100644
--- a/frontend/src/composables/useOnboardingTour.ts
+++ b/frontend/src/composables/useOnboardingTour.ts
@@ -1,4 +1,4 @@
-import { onBeforeUnmount, onMounted, onUnmounted, nextTick } from 'vue'
+import { onMounted, onUnmounted, nextTick } from 'vue'
 import { driver, type Driver, type DriveStep } from 'driver.js'
 import 'driver.js/dist/driver.css'
 import { useAuthStore as useUserStore } from '@/stores/auth'
@@ -7,10 +7,8 @@ import { useI18n } from 'vue-i18n'
 import { getAdminSteps, getUserSteps } from '@/components/Guide/steps'
 
 export interface OnboardingOptions {
-  steps: DriveStep[]
   storageKey?: string
   autoStart?: boolean
-  onComplete?: () => void
 }
 
 export function useOnboardingTour(options: OnboardingOptions) {
@@ -22,11 +20,31 @@ export function useOnboardingTour(options: OnboardingOptions) {
   // Timing constants for better maintainability
   const TIMING = {
     INTERACTIVE_WAIT_MS: 800,        // Default wait time for interactive steps
-    SELECT_WAIT_MS: 2500,            // Extended wait for Select components
     ELEMENT_TIMEOUT_MS: 8000,        // Timeout for element detection
     AUTO_START_DELAY_MS: 1000        // Delay before auto-starting tour
   } as const
 
+  // Helper: Check if a step is interactive (only close button shown)
+  const isInteractiveStep = (step: DriveStep): boolean => {
+    return step.popover?.showButtons?.length === 1 &&
+           step.popover.showButtons[0] === 'close'
+  }
+
+  // Helper: Clean up click listener
+  const cleanupClickListener = () => {
+    if (!currentClickListener) return
+    const { element: el, handler, keyHandler, originalTabIndex, eventTypes } = currentClickListener
+    if (eventTypes) {
+      eventTypes.forEach(type => el.removeEventListener(type, handler))
+    }
+    if (keyHandler) el.removeEventListener('keydown', keyHandler)
+    if (originalTabIndex !== undefined) {
+      if (originalTabIndex === null) el.removeAttribute('tabindex')
+      else el.setAttribute('tabindex', originalTabIndex)
+    }
+    currentClickListener = null
+  }
+
   // 使用 store 管理的全局 driver 实例
   let driverInstance: Driver | null = onboardingStore.getDriverInstance()
   let currentClickListener: {
@@ -115,10 +133,8 @@ export function useOnboardingTour(options: OnboardingOptions) {
           // 注意：交互式步骤通常隐藏 Next 按钮，此处逻辑为防御性编程
           const currentIndex = state.activeIndex ?? 0
           const currentStep = steps[currentIndex]
-          const isInteractiveStep = currentStep?.popover?.showButtons?.length === 1 &&
-                                     currentStep?.popover.showButtons[0] === 'close'
 
-          if (isInteractiveStep && currentStep.element) {
+          if (currentStep && isInteractiveStep(currentStep) && currentStep.element) {
             const targetElement = typeof currentStep.element === 'string'
               ? document.querySelector(currentStep.element) as HTMLElement
               : currentStep.element as HTMLElement
@@ -165,10 +181,8 @@ export function useOnboardingTour(options: OnboardingOptions) {
 
           // 1.5 交互式步骤提示
           const currentStep = steps[state.activeIndex ?? 0]
-          const isInteractive = currentStep?.popover?.showButtons?.length === 1 &&
-                               currentStep?.popover?.showButtons[0] === 'close'
 
-          if (isInteractive && popover.description) {
+          if (currentStep && isInteractiveStep(currentStep) && popover.description) {
             const hintClass = 'driver-popover-description-hint'
             if (!popover.description.querySelector(`.${hintClass}`)) {
               const hint = document.createElement('div')
@@ -258,19 +272,7 @@ export function useOnboardingTour(options: OnboardingOptions) {
       // 步骤高亮时触发
       onHighlightStarted: async (element, step) => {
         // 清理之前的监听器
-        if (currentClickListener) {
-          const { element: el, handler, keyHandler, originalTabIndex, eventTypes } = currentClickListener
-          // Remove all tracked event types
-          if (eventTypes) {
-            eventTypes.forEach(type => el.removeEventListener(type, handler))
-          }
-          if (keyHandler) el.removeEventListener('keydown', keyHandler)
-          if (originalTabIndex !== undefined) {
-             if (originalTabIndex === null) el.removeAttribute('tabindex')
-             else el.setAttribute('tabindex', originalTabIndex)
-          }
-          currentClickListener = null
-        }
+        cleanupClickListener()
 
         // 尝试等待元素
         if (!element && step.element && typeof step.element === 'string') {
@@ -282,10 +284,7 @@ export function useOnboardingTour(options: OnboardingOptions) {
            element = document.querySelector(step.element) as HTMLElement
         }
 
-        const isInteractiveStep = step.popover?.showButtons?.length === 1 &&
-                                   step.popover.showButtons[0] === 'close'
-
-        if (isInteractiveStep && element) {
+        if (isInteractiveStep(step) && element) {
           const htmlElement = element as HTMLElement
 
           // Check if this is a submit button - if so, don't bind auto-advance listeners
@@ -294,7 +293,6 @@ export function useOnboardingTour(options: OnboardingOptions) {
                                 (htmlElement.tagName === 'BUTTON' && htmlElement.closest('form'))
 
           if (isSubmitButton) {
-            console.log('Submit button detected, skipping auto-advance listener')
             return // Don't bind any click listeners for submit buttons
           }
 
@@ -307,36 +305,46 @@ export function useOnboardingTour(options: OnboardingOptions) {
           const isSelectComponent = htmlElement.querySelector('.select-trigger') !== null ||
                                     htmlElement.classList.contains('select-trigger')
 
+          // Select dropdowns are teleported to <body>, so click events on options
+          // won't bubble through this element. Skip auto-advance for Select components.
+          // Users navigate using Next/Previous buttons after making their selection.
+          if (isSelectComponent) {
+            return
+          }
+
           // Single-execution protection flag
           let hasExecuted = false
 
+          // Capture the step index when binding the handler
+          const boundStepIndex = driverInstance?.getActiveIndex() ?? 0
+
           const clickHandler = async () => {
             // Prevent duplicate execution
             if (hasExecuted) {
-              console.warn('Click handler already executed, skipping')
               return
             }
             hasExecuted = true
 
-            // For Select components, wait longer to allow user to make a selection
-            const waitTime = isSelectComponent ? TIMING.SELECT_WAIT_MS : TIMING.INTERACTIVE_WAIT_MS
-            await new Promise(resolve => setTimeout(resolve, waitTime))
+            // Wait before advancing to allow user to see the result of their action
+            await new Promise(resolve => setTimeout(resolve, TIMING.INTERACTIVE_WAIT_MS))
 
             // Verify driver is still active and not destroyed
             if (!driverInstance || !driverInstance.isActive()) {
-              console.warn('Driver instance destroyed or inactive during navigation')
               return
             }
 
+            // Check if we're still on the same step - abort if step changed during wait
             const currentIndex = driverInstance.getActiveIndex() ?? 0
+            if (currentIndex !== boundStepIndex) {
+              return
+            }
+
             const nextStep = steps[currentIndex + 1]
 
             if (nextStep?.element && typeof nextStep.element === 'string') {
-              // 增加超时时间到 8 秒，给路由导航更多时间
               const exists = await ensureElement(nextStep.element, TIMING.ELEMENT_TIMEOUT_MS)
               if (!exists) {
-                console.warn('Next step element not found after timeout, aborting auto-advance')
-                console.warn('Expected element:', nextStep.element)
+                console.warn(`Onboarding: Next step element not found: ${nextStep.element}`)
                 return
               }
             }
@@ -367,43 +375,6 @@ export function useOnboardingTour(options: OnboardingOptions) {
               originalTabIndex,
               eventTypes: ['input', 'change']
             }
-          } else if (isSelectComponent) {
-            // For Select components, listen for option selection clicks
-            const selectOptionClickHandler = (e: Event) => {
-              const target = e.target as HTMLElement
-              // Type safety: ensure target is an Element before using closest
-              if (!(target instanceof Element)) {
-                return
-              }
-              // Check if the clicked element is a select option
-              if (target.closest('.select-option')) {
-                // User selected an option, proceed to next step
-                clickHandler()
-              }
-            }
-
-            const keyHandler = (e: KeyboardEvent) => {
-               if (['Enter', ' '].includes(e.key)) {
-                  e.preventDefault()
-                  // For select components, Enter/Space should open dropdown, not advance
-                  // Only advance if an option is focused
-                  const focusedOption = htmlElement.querySelector('.select-option:focus')
-                  if (focusedOption) {
-                    clickHandler()
-                  }
-               }
-            }
-
-            htmlElement.addEventListener('click', selectOptionClickHandler)
-            htmlElement.addEventListener('keydown', keyHandler)
-
-            currentClickListener = {
-              element: htmlElement,
-              handler: selectOptionClickHandler as () => void,
-              keyHandler,
-              originalTabIndex,
-              eventTypes: ['click']
-            }
           } else {
             const keyHandler = (e: KeyboardEvent) => {
                if (['Enter', ' '].includes(e.key)) {
@@ -427,19 +398,7 @@ export function useOnboardingTour(options: OnboardingOptions) {
       },
 
       onDestroyed: () => {
-        if (currentClickListener) {
-          const { element: el, handler, keyHandler, originalTabIndex, eventTypes } = currentClickListener
-          // Remove all tracked event types
-          if (eventTypes) {
-            eventTypes.forEach(type => el.removeEventListener(type, handler))
-          }
-          if (keyHandler) el.removeEventListener('keydown', keyHandler)
-          if (originalTabIndex !== undefined) {
-             if (originalTabIndex === null) el.removeAttribute('tabindex')
-             else el.setAttribute('tabindex', originalTabIndex)
-          }
-          currentClickListener = null
-        }
+        cleanupClickListener()
         // 清理全局监听器 (由此处唯一管理)
         if (globalKeyboardHandler) {
           document.removeEventListener('keydown', globalKeyboardHandler, { capture: true })
@@ -477,10 +436,8 @@ export function useOnboardingTour(options: OnboardingOptions) {
         // 对于交互式步骤，箭头键应该触发交互而非跳过
         const currentIndex = driverInstance!.getActiveIndex() ?? 0
         const currentStep = steps[currentIndex]
-        const isInteractiveStep = currentStep?.popover?.showButtons?.length === 1 &&
-                                   currentStep?.popover.showButtons[0] === 'close'
 
-        if (isInteractiveStep && currentStep.element) {
+        if (currentStep && isInteractiveStep(currentStep) && currentStep.element) {
           const targetElement = typeof currentStep.element === 'string'
             ? document.querySelector(currentStep.element) as HTMLElement
             : currentStep.element as HTMLElement
@@ -511,10 +468,8 @@ export function useOnboardingTour(options: OnboardingOptions) {
         // 回车键处理交互式步骤
         const currentIndex = driverInstance!.getActiveIndex() ?? 0
         const currentStep = steps[currentIndex]
-        const isInteractiveStep = currentStep?.popover?.showButtons?.length === 1 &&
-                                   currentStep?.popover.showButtons[0] === 'close'
 
-        if (isInteractiveStep && currentStep.element) {
+        if (currentStep && isInteractiveStep(currentStep) && currentStep.element) {
           const targetElement = typeof currentStep.element === 'string'
             ? document.querySelector(currentStep.element) as HTMLElement
             : currentStep.element as HTMLElement
@@ -572,21 +527,18 @@ export function useOnboardingTour(options: OnboardingOptions) {
     })
 
     if (onboardingStore.isDriverActive()) {
-      console.log('Tour already active, skipping auto-start')
       driverInstance = onboardingStore.getDriverInstance()
       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
     }
 
@@ -596,10 +548,6 @@ export function useOnboardingTour(options: OnboardingOptions) {
     }, TIMING.AUTO_START_DELAY_MS)
   })
 
-  onBeforeUnmount(() => {
-    // 保持 driver 实例活跃，支持路由切换
-  })
-
   onUnmounted(() => {
     if (autoStartTimer) {
       clearTimeout(autoStartTimer)
diff --git a/frontend/src/styles/onboarding.css b/frontend/src/styles/onboarding.css
index 432d842b..4894c4d7 100644
--- a/frontend/src/styles/onboarding.css
+++ b/frontend/src/styles/onboarding.css
@@ -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;
-}