k_online_ui/src/utils/driverGuide.ts

// src/composables/useDriver.ts
import { driver, type DriveStep, type Config } from 'driver.js'
import 'driver.js/dist/driver.css'

let driverInstance: ReturnType<typeof driver> | null = null

/**
 * useDriver composable
 * @param steps 引导步骤数组
 * @param globalConfig 可选的 driver 配置
 */
export function useDriver(steps: DriveStep[], globalConfig?: Config) {
  if (!driverInstance) {
    driverInstance = driver({
      ...globalConfig,
      animate: false,
      showProgress: true, // 显示进度条
      overlayOpacity: 0.7, // 遮罩透明度
      overlayColor: '#2b2f36', // 遮罩颜色
      // allowClose: false, // 禁止用户关闭引导
      showButtons: ['previous', 'next', 'close'],
      onPopoverRender: (popoverDOM, { config, state, driver }) => {
        // 如果用户配置了自己的 onPopoverRender，也执行它
        globalConfig?.onPopoverRender?.(popoverDOM, { config, state, driver })
      }
    })
  }

  driverInstance.setSteps(steps)

  return {
    start: (stepIndex = 0) => driverInstance?.drive(stepIndex),
    moveNext: () => driverInstance?.moveNext(),
    movePrevious: () => driverInstance?.movePrevious(),
    highlight: (step: DriveStep) => driverInstance?.highlight(step),
    destroy: () => driverInstance?.destroy(),
    isActive: () => driverInstance?.isActive(),
    driverInstance // 暴露实例给你更多操作
  }
}