k_online_ui/src/utils/driverGuide.ts

import { driver, type DriveStep, type Config } from 'driver.js'
import 'driver.js/dist/driver.css'
import nextBtnImg from '@/assets/image/next-btn.png'
import previousBtnImg from '@/assets/image/pervious-btn.png'
import doneBtnImg from '@/assets/image/done-btn.png'

/**
 * useDriver composable
 * @param steps 引导步骤数组
 * @param globalConfig 可选的 driver 配置
 */
export function useDriver(steps: DriveStep[], globalConfig?: Config) {
  const driverInstance = driver({
    ...globalConfig,
    animate: false,
    showProgress: true,
    overlayOpacity: 0.7,
    overlayColor: '#2b2f36',
    showButtons: ['previous', 'next', 'close'],
    onPopoverRender: (popoverDOM, { config, state, driver }) => {
      globalConfig?.onPopoverRender?.(popoverDOM, { config, state, driver })

      const stepsLength = steps.length
      const nextBtn = popoverDOM.nextButton
      if (nextBtn) {
        nextBtn.innerHTML = '' // 清空原内容
        const img = document.createElement('img')
        img.src = stepsLength - 1 === state.activeIndex ? doneBtnImg : nextBtnImg // 替换成你的图片路径
        img.alt = 'next'
        img.style.width = '96px'
        img.style.height = '36px'
        nextBtn.appendChild(img)
      }

      const previousBtn = popoverDOM.previousButton
      if (previousBtn) {
        previousBtn.innerHTML = '' // 清空原内容
        const img = document.createElement('img')
        img.src = previousBtnImg // 替换成你的图片路径
        img.alt = 'previous'
        img.style.width = '96px'
        img.style.height = '36px'
        previousBtn.appendChild(img)
        img.style.display = state.activeIndex > 0 ? 'block' : 'none' // 如果是第一个步骤，则隐藏上一页按钮
      }
    }
  })

  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(),
    hasNextStep: () => driverInstance.hasNextStep(),
    moveTo: (stepIndex: number) => driverInstance.moveTo(stepIndex),
    driverInstance
  }
}