k_online_ui/src/stores/modules/guide.ts

// store/guide.ts
import { defineStore } from 'pinia'
import { useDriver } from '@/utils/driverGuide'

const oceanSteps: any = [
  {
    element: '#driver-step-tracking-detail-1',
    popover: {
      title: '',
      description: 'Main operation button area',
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-2',
    popover: {
      description: 'Key shipment status',
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-3',
    popover: {
      description: 'Detail container status of each container',
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#tracking-map',
    popover: {
      description: `
        <ul>
          <li>Actual Line(Actual Trajectory)</li>
          <li>Virtual Line(Planned Trajectory)</li>
          <li>Arrow (Current Real-time Position)</li>
        </ol>
      `,
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-5',
    popover: {
      description: `
      <ul>
        <li>Upload Files</li>
        <li>Clickable download icons to download files</li>
      </ol>
      `,
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-6',
    popover: {
      description: `
        <p>Send email to site staff</p>
        <p>Enter contents you want to communicate with, click “Send 
         Email” button to send out.
        </p>
      `,
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#page-guide-btn-guide',
    popover: {
      title: '',
      description:
        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
      side: 'bottom'
    }
  }
]
const airSteps: any = [
  {
    element: '#driver-step-tracking-detail-1',
    popover: {
      title: '',
      description: 'Main operation button area',
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-2',
    popover: {
      description: 'Key shipment status',
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#tracking-map',
    popover: {
      description: `
        <ul>
          <li>Actual Line(Actual Trajectory)</li>
          <li>Virtual Line(Planned Trajectory)</li>
          <li>Arrow (Current Real-time Position)</li>
        </ol>
      `,
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-5',
    popover: {
      description: `
      <ul>
        <li>Upload Files</li>
        <li>Clickable download icons to download files</li>
      </ol>
      `,
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#driver-step-tracking-detail-6',
    popover: {
      description: `
        <p>Send email to site staff</p>
        <p>Enter contents you want to communicate with, click “Send 
         Email” button to send out.
        </p>
      `,
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#page-guide-btn-guide',
    popover: {
      title: '',
      description:
        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
      side: 'bottom'
    }
  }
]

const guideTimer = ref<ReturnType<typeof setTimeout> | null>(null)
export const useGuideStore = defineStore('guide', {
  state: () => ({
    booking: {
      isShowMoreFiltersGuidePhoto: false,
      isShowDownloadFileGuidePhoto: false,
      isShowFilterGuidePhoto: false,
      isShowCustomizeColumnsGuidePhoto: false
    },
    tracking: {
      isShowFilterGuidePhoto: false,
      isShowMoreFiltersGuidePhoto: false,
      isShowDownloadFileGuidePhoto: false,
      isShowCustomizeColumnsGuidePhoto: false
    },
    dashboard: {
      isShowViewManagementGuidePhoto: false,
      isShowTransportModeGuidePhoto: false,
      isShowSaveConfigGuidePhoto: false,
      isShowKpiChartGuidePhoto: false
    },
    trackingDetail: {
      mode: 'Ocean Freight'
    }
  }),
  actions: {
    resetGuide(key: string) {
      if (this.booking[key] !== undefined) {
        this.booking[key] = false
      } else if (this.tracking[key] !== undefined) {
        this.tracking[key] = false
      } else if (this.dashboard[key] !== undefined) {
        this.dashboard[key] = false
      }
    },
    handleTrackingDetailGuide() {
      let steps = []
      if (this.trackingDetail.mode === 'Ocean Freight') {
        steps = oceanSteps
      } else if (this.trackingDetail.mode === 'Air Freight') {
        steps = airSteps
      } else {
        return
      }
      const { start, movePrevious, hasNextStep, moveTo, destroy } = useDriver(steps, {
        onPrevClick: () => {
          if (guideTimer.value) {
            clearTimeout(guideTimer.value)
            guideTimer.value = null
          }
          movePrevious()
        },
        onHighlightStarted: () => {
          if (!hasNextStep()) {
            guideTimer.value = setTimeout(() => {
              destroy()
            }, 3000)
          }
        },
        onDestroyStarted: (element, step, options) => {
          if (hasNextStep()) {
            moveTo(options.config.steps.length - 1)
            return
          }
          destroy()
        },
        onDestroyed: () => {
          if (guideTimer.value) {
            clearTimeout(guideTimer.value)
            guideTimer.value = null
          }
        }
      })
      start() // 开始引导
    }
  }
})