feat: 实现导览最后一步为高亮page guide按钮

src/components/VDriverGuide/src/VDriverGuide.vue

@@ -1,28 +1,32 @@
 <script setup lang="ts"></script>
 
 <template>
-  <el-button id="page-guide-btn-guide" class="driver-guide-btn el-button--text">
-    <span class="font_family icon-icon_guidelines_b" style="color: var(--color-theme)"></span>
-    <span
-      style="
-        display: inline-block;
-        margin-top: 2px;
-        margin-left: 2px;
-        font-size: 12px;
-        color: var(--color-theme);
-      "
-    >
-      Guidelines
+  <div id="page-guide-btn-guide" class="driver-guide-btn">
+    <img src="./img/guide-icon.png" alt="" />
+    <span style="margin-top: 2px; font-size: 12px; font-style: italic; color: var(--color-theme)">
+      Page Guide
     </span>
-  </el-button>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .driver-guide-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: 24px;
+  padding: 0 7px;
   margin-left: 8px;
-  span {
-    color: var(--color-theme);
+  border-radius: 24px;
+  background: var(--color-guide-icon-bg);
+  cursor: pointer;
+  &:hover {
+    background: var(--color-guide-icon-hover-bg);
+  }
+  img {
+    width: 16px;
+    height: 16px;
+    margin-right: 2px;
   }
 }
 </style>

src/styles/theme.scss

@@ -258,6 +258,9 @@
   --color-tour-next-btn-color: #fff;
   --color-tour-step-color: #b5b9bf;
   --color-tour-mask-bg: rgba(43, 47, 54, 0.7);
+
+  --color-guide-icon-bg: rgba(237, 237, 237, 0.6);
+  --color-guide-icon-hover-bg: rgba(237, 237, 237, 0.45);
 }
 
 :root.dark {
@@ -403,4 +406,7 @@
   --color-tour-next-btn-color: #ed6d00;
   --color-tour-step-color: rgba(240, 241, 243, 0.7);
   --color-tour-mask-bg: rgba(0, 0, 0, 0.7);
+
+  --color-guide-icon-bg: rgba(237, 237, 237, 0.1);
+  --color-guide-icon-hover-bg: rgba(237, 237, 237, 0.15);
 }

src/utils/driverGuide.ts

@@ -3,7 +3,6 @@ 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'
-import { set } from 'lodash'
 
 /**
  * useDriver composable
@@ -27,7 +26,6 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
         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 = '32px'
@@ -44,13 +42,6 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
         img.style.height = '32px'
         previousBtn.appendChild(img)
       }
-    },
-    onHighlightStarted: (element, step, options) => {
-      if (!driverInstance.hasNextStep()) {
-        setTimeout(() => {
-          driverInstance.destroy()
-        }, 3000)
-      }
     }
   })
 

src/views/Booking/src/components/BookingGuide.vue

@@ -92,10 +92,20 @@ const steps: any = [
       `,
       side: 'bottom'
     }
+  },
+  {
+    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 { start, moveNext, movePrevious, destroy } = useDriver(steps, {
+const guideTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const { start, moveNext, movePrevious, destroy, hasNextStep, moveTo } = useDriver(steps, {
   onNextClick: (element, step, options) => {
     if (options?.state?.activeIndex === 1) {
       bookingGuideStore.isShowMoreFiltersGuidePhoto = true
@@ -125,20 +135,46 @@ const { start, moveNext, movePrevious, destroy } = useDriver(steps, {
       bookingGuideStore.isShowDownloadFileGuidePhoto = true
 
       bookingGuideStore.isShowCustomizeColumnsGuidePhoto = false
+    } else if (options?.state?.activeIndex === 6) {
+      bookingGuideStore.isShowCustomizeColumnsGuidePhoto = true
+    }
+    if (guideTimer.value) {
+      clearTimeout(guideTimer.value)
+      guideTimer.value = null
     }
     nextTick(() => {
       movePrevious() // 执行上一步
     })
   },
-
-  onDestroyed: () => {
+  onHighlightStarted: () => {
+    if (!hasNextStep()) {
+      guideTimer.value = setTimeout(() => {
+        destroy()
+      }, 3000)
+    }
+  },
+  onDestroyStarted: (element, step, options) => {
     bookingGuideStore.isShowFilterGuidePhoto = false
     bookingGuideStore.isShowMoreFiltersGuidePhoto = false
     bookingGuideStore.isShowDownloadFileGuidePhoto = false
     bookingGuideStore.isShowCustomizeColumnsGuidePhoto = false
+    if (hasNextStep()) {
+      moveTo(options.config.steps.length - 1)
+      return
+    }
     nextTick(() => {
       destroy() // 销毁导览
     })
+  },
+  onDestroyed: () => {
+    bookingGuideStore.isShowFilterGuidePhoto = false
+    bookingGuideStore.isShowMoreFiltersGuidePhoto = false
+    bookingGuideStore.isShowDownloadFileGuidePhoto = false
+    bookingGuideStore.isShowCustomizeColumnsGuidePhoto = false
+    if (guideTimer.value) {
+      clearTimeout(guideTimer.value)
+      guideTimer.value = null
+    }
   }
 })
 const startGuide = () => {

src/views/Dashboard/src/components/DashboardGuide.vue

@@ -61,6 +61,7 @@ const steps: any = [
   }
 ]
 
+const guideTimer = ref<ReturnType<typeof setTimeout> | null>(null)
 const { start, moveNext, movePrevious, destroy, hasNextStep, moveTo } = useDriver(steps, {
   onNextClick: (element, step, options) => {
     if (options?.state?.activeIndex === 0) {
@@ -95,29 +96,45 @@ const { start, moveNext, movePrevious, destroy, hasNextStep, moveTo } = useDrive
     } else if (options?.state?.activeIndex === 5) {
       dashboardGuideStore.isShowSaveConfigGuidePhoto = true
     }
+    if (guideTimer.value) {
+      clearTimeout(guideTimer.value)
+      guideTimer.value = null
+    }
     nextTick(() => {
       movePrevious() // 执行上一步
     })
   },
+  onHighlightStarted: () => {
+    if (!hasNextStep()) {
+      guideTimer.value = setTimeout(() => {
+        destroy()
+      }, 3000)
+    }
+  },
   // 关闭导览时，隐藏所有图片
   onDestroyStarted: (element, step, options) => {
+    dashboardGuideStore.isShowViewManagementGuidePhoto = false
+    dashboardGuideStore.isShowTransportModeGuidePhoto = false
+    dashboardGuideStore.isShowSaveConfigGuidePhoto = false
+    dashboardGuideStore.isShowKpiChartGuidePhoto = false
     if (hasNextStep()) {
-      moveTo(options.config.steps.length - 1) // 如果还有下一步，跳转到下一步
-
-      dashboardGuideStore.isShowViewManagementGuidePhoto = false
-      dashboardGuideStore.isShowTransportModeGuidePhoto = false
-      dashboardGuideStore.isShowSaveConfigGuidePhoto = false
-      dashboardGuideStore.isShowKpiChartGuidePhoto = false
+      moveTo(options.config.steps.length - 1)
       return
     }
     // showExtraHighlights.value = false // 隐藏额外高亮
+    nextTick(() => {
+      destroy() // 销毁导览
+    }) // 确保在下一次DOM更新后执行销毁
+  },
+  onDestroyed: () => {
     dashboardGuideStore.isShowViewManagementGuidePhoto = false
     dashboardGuideStore.isShowTransportModeGuidePhoto = false
     dashboardGuideStore.isShowSaveConfigGuidePhoto = false
     dashboardGuideStore.isShowKpiChartGuidePhoto = false
-    nextTick(() => {
-      destroy() // 销毁导览
-    }) // 确保在下一次DOM更新后执行销毁
+    if (guideTimer.value) {
+      clearTimeout(guideTimer.value)
+      guideTimer.value = null
+    }
   }
 })
 const startGuide = () => {

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -85,6 +85,15 @@ const oceanSteps: any = [
       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 = [
@@ -144,8 +153,19 @@ const airSteps: any = [
       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)
 const handleGuide = () => {
   let steps = []
   if (allData.value?.transportInfo?.mode === 'Ocean Freight') {
@@ -155,7 +175,35 @@ const handleGuide = () => {
   } else {
     return
   }
-  const { start } = useDriver(steps)
+  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() // 开始引导
 }
 

src/views/Tracking/src/components/TrackingGuide.vue

@@ -97,6 +97,15 @@ const steps: any = [
       `,
       side: 'bottom'
     }
+  },
+  {
+    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'
+    }
   }
 ]
 
@@ -105,7 +114,8 @@ const steps: any = [
 //    { selector: '#tab-filter-guide', tip: 'Select booking status. The default is all.' }
 // ]
 
-const { start, moveNext, movePrevious, destroy } = useDriver(steps, {
+const guideTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const { start, moveNext, movePrevious, destroy, hasNextStep, moveTo } = useDriver(steps, {
   onNextClick: (element, step, options) => {
     if (options?.state?.activeIndex === 1) {
       trackingGuideStore.isShowMoreFiltersGuidePhoto = true
@@ -133,26 +143,49 @@ const { start, moveNext, movePrevious, destroy } = useDriver(steps, {
       trackingGuideStore.isShowDownloadFileGuidePhoto = false
     } else if (options?.state?.activeIndex === 5) {
       trackingGuideStore.isShowDownloadFileGuidePhoto = true
-
       trackingGuideStore.isShowCustomizeColumnsGuidePhoto = false
+    } else if (options?.state?.activeIndex === 6) {
+      trackingGuideStore.isShowCustomizeColumnsGuidePhoto = true
+    }
+    if (guideTimer.value) {
+      clearTimeout(guideTimer.value)
+      guideTimer.value = null
     }
     nextTick(() => {
       movePrevious() // 执行上一步
     })
   },
+  onHighlightStarted: () => {
+    if (!hasNextStep()) {
+      guideTimer.value = setTimeout(() => {
+        destroy()
+      }, 3000)
+    }
+  },
   // 关闭导览时，隐藏所有图片
-  onDestroyStarted: () => {
+  onDestroyStarted: (element, step, options) => {
     trackingGuideStore.isShowFilterGuidePhoto = false
-
     trackingGuideStore.isShowMoreFiltersGuidePhoto = false
-
     trackingGuideStore.isShowDownloadFileGuidePhoto = false
-
     trackingGuideStore.isShowCustomizeColumnsGuidePhoto = false
+    if (hasNextStep()) {
+      moveTo(options.config.steps.length - 1)
+      return
+    }
     // showExtraHighlights.value = false // 隐藏额外高亮
     nextTick(() => {
       destroy() // 销毁导览
     }) // 确保在下一次DOM更新后执行销毁
+  },
+  onDestroyed: () => {
+    trackingGuideStore.isShowFilterGuidePhoto = false
+    trackingGuideStore.isShowMoreFiltersGuidePhoto = false
+    trackingGuideStore.isShowDownloadFileGuidePhoto = false
+    trackingGuideStore.isShowCustomizeColumnsGuidePhoto = false
+    if (guideTimer.value) {
+      clearTimeout(guideTimer.value)
+      guideTimer.value = null
+    }
   }
 })
 const startGuide = () => {