style: 调整导览样式

src/components/MoreFilters/src/MoreFilters.vue

@@ -1025,7 +1025,7 @@ const moreFiltersGuideImg = computed(() => {
         id="more-filters-guide"
         v-show="props.isShowMoreFiltersGuidePhoto"
         :class="{ 'dark-more-filters-guide-class': themeStore.theme === 'dark' }"
-        class="more-filters-guide-class position-absolute"
+        class="more-filters-guide-class position-absolute-guide"
         :src="moreFiltersGuideImg"
         alt=""
       />
@@ -1231,9 +1231,6 @@ const moreFiltersGuideImg = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-}
 img.more-filters-guide-class {
   right: -1px;
   top: -1px;

src/components/VTipTooltip/src/VTipTooltip.vue

@@ -17,6 +17,7 @@ const visible = ref(false)
 <template>
   <div style="display: inline-block">
     <el-tooltip
+      effect="dark"
       popper-class="v-tip-tooltip"
       v-model="visible"
       :placement="props.placement"
@@ -37,7 +38,7 @@ const visible = ref(false)
 div.v-tip-tooltip {
   padding: 16px;
   border-radius: 12px;
-  background-color: var(--color-tour-next-btn-color) !important;
+  // background-color: var(--color-tour-next-btn-color) !important;
   border: 0 !important;
   box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1) !important;
   // .el-popper__arrow:before {
@@ -45,6 +46,10 @@ div.v-tip-tooltip {
   //   background-color: var(--color-tour-next-btn-color) !important;
   //   box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1) !important;
   // }
+  .label {
+    color: #f0f1f3;
+    font-size: 14px;
+  }
   .photo {
     width: 368px;
     margin-top: 8px;

src/stores/modules/guide.ts

@@ -1,5 +1,153 @@
 // 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: {
@@ -19,6 +167,60 @@ export const useGuideStore = defineStore('guide', {
       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() // 开始引导
     }
-  })
+  }
 })

src/styles/driver.scss

@@ -5,6 +5,7 @@ div.driver-popover {
   padding-bottom: 8px;
   background-image: linear-gradient(96deg, #b58eff 2.25%, #fdbc94 97.98%);
   box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
 }
 // 标题
 header.driver-popover-title {
@@ -33,21 +34,24 @@ div.driver-popover-arrow-side-bottom {
 }
 // 关闭图标
 button.driver-popover-close-btn {
-  top: 1px;
-  right: -2px;
-  color: var(--color-neutral-1);
+  top: -1px;
+  right: -6px;
+  color: #2b2f36;
   &:hover,
   &:focus {
-    color: var(--color-neutral-1);
+    color: #2b2f36;
   }
 }
 // 内容
 div.driver-popover-description {
-  color: var(--color-neutral-1);
+  color: #2b2f36;
   text-align: left;
   ul {
     margin-left: 16px;
     list-style: disc;
+    li {
+      color: #2b2f36;
+    }
   }
 }
 
@@ -56,54 +60,24 @@ span.driver-popover-progress-text {
   color: rgba($color: #fff, $alpha: 0.7);
   font-size: 12px;
 }
-.driver-popover-footer {
+footer.driver-popover-footer {
+  margin-top: 28px;
+  height: 36px;
   .driver-popover-navigation-btns {
     // 上一步
     button.driver-popover-prev-btn {
       width: 96px;
-      height: 32px;
+      height: 36px;
       padding: 0;
       background-color: transparent;
       border: none;
-      // width: 96px;
-      // height: 32px;
-      // background-color: var(--color-btn-default-bg-color);
-      // color: var(--color-neutral-1);
-      // fill: var(--color-neutral-1);
-      // text-shadow: none;
-      // border: 1px solid var(--color-tour-prev-btn-border);
-      // margin-left: 8px !important;
-      // border-radius: 6px;
-      // text-align: center;
-      // &:hover {
-      //   // border: 1px solid var(--color-btn-default-bg-hover);
-      //   background-color: var(--color-btn-default-bg-hover);
-      //   fill: var(--color-theme);
-      //   span {
-      //     color: var(--color-theme);
-      //   }
-      // }
     }
     button.driver-popover-next-btn {
       width: 96px;
-      height: 32px;
+      height: 36px;
       padding: 0;
       background-color: transparent;
       border: none;
-      // background-color: var(--color-tour-next-btn-bg);
-      // fill: var(--color-tour-next-btn-color);
-      // border: none;
-      // text-shadow: none;
-      // color: var(--color-tour-next-btn-color);
-      // border-radius: 6px;
-      // text-align: center;
-      // &:hover {
-      //   background-color: var(--color-tour-next-btn-hover-bg);
-      //   fill: var(--color-tour-next-btn-bg);
-      //   span {
-      //     color: var(--color-tour-next-btn-color) !important;
-      //   }
-      // }
     }
   }
 }

src/styles/index.scss

@@ -51,3 +51,9 @@
 .icon_dark {
   fill: var(--color-neutral-1);
 }
+
+.position-absolute-guide {
+  position: absolute;
+  z-index: 1200;
+  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.2);
+}

src/utils/driverGuide.ts

@@ -28,7 +28,7 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
         img.src = stepsLength - 1 === state.activeIndex ? doneBtnImg : nextBtnImg // 替换成你的图片路径
         img.alt = 'next'
         img.style.width = '96px'
-        img.style.height = '32px'
+        img.style.height = '36px'
         nextBtn.appendChild(img)
       }
 
@@ -39,8 +39,9 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
         img.src = previousBtnImg // 替换成你的图片路径
         img.alt = 'previous'
         img.style.width = '96px'
-        img.style.height = '32px'
+        img.style.height = '36px'
         previousBtn.appendChild(img)
+        img.style.display = state.activeIndex > 0 ? 'block' : 'none' // 如果是第一个步骤，则隐藏上一页按钮
       }
     }
   })

src/views/Booking/src/BookingView.vue

@@ -502,10 +502,6 @@ const handleGuide = () => {
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-  z-index: 1200;
-}
 .filter-box {
   width: 100%;
   display: flex;

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

@@ -53,7 +53,7 @@ const steps: any = [
     element: '#more-filters-guide',
     popover: {
       title: '',
-      description: 'Click "more filters" to see more search options.',
+      description: 'Click "More Filters" to see more search options.',
       side: 'left'
     }
   },
@@ -196,7 +196,7 @@ defineExpose({
       <img
         id="booking-download-file-guide"
         v-show="bookingGuideStore.isShowDownloadFileGuidePhoto"
-        class="position-absolute download-file-guide-class"
+        class="position-absolute-guide download-file-guide-class"
         :src="downloadFileImg"
         alt=""
       />
@@ -206,7 +206,7 @@ defineExpose({
       <img
         id="booking-customize-columns-guide"
         v-show="bookingGuideStore.isShowCustomizeColumnsGuidePhoto"
-        class="position-absolute customize-columns-guide-class"
+        class="position-absolute-guide customize-columns-guide-class"
         :src="customizeColumnsImg"
         alt=""
       />
@@ -215,7 +215,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
+.position-absolute-guide {
   position: absolute;
   z-index: 1200;
 }

src/views/Dashboard/src/DashboardView.vue

@@ -809,6 +809,11 @@ const handleGuide = () => {
   dashboardGuideRef.value?.startGuide()
 }
 const dashboardGuideRef = ref(null)
+
+function handleImageClick(event) {
+  event.stopPropagation() // 阻止事件冒泡
+  alert('Image clicked')
+}
 </script>
 <template>
   <div class="dashboard">
@@ -822,25 +827,19 @@ const dashboardGuideRef = ref(null)
         <VDriverGuide style="margin-top: -1px" @click="handleGuide"></VDriverGuide>
       </div>
 
-      <div>
+      <div style="position: relative">
         <el-popover trigger="click" width="400" popper-style="border-radius: 12px">
           <template #reference>
-            <el-button class="el-button--default" style="position: relative">
+            <el-button class="el-button--default">
               <span class="iconfont_icon">
                 <svg class="iconfont" aria-hidden="true">
                   <use xlink:href="#icon-icon_view__management_b"></use>
                 </svg>
               </span>
               View Management
-              <img
-                id="view-management-guide"
-                v-if="guideStore.dashboard.isShowViewManagementGuidePhoto"
-                class="view-management-guide-class"
-                :src="viewManagementImg"
-                alt=""
-              />
             </el-button>
           </template>
+
           <div class="Management">
             <div class="title">View Management</div>
             <div class="management_content" v-for="(item, index) in Management" :key="index">
@@ -864,6 +863,14 @@ const dashboardGuideRef = ref(null)
             </div>
           </div>
         </el-popover>
+
+        <img
+          id="view-management-guide"
+          v-if="guideStore.dashboard.isShowViewManagementGuidePhoto"
+          class="view-management-guide-class"
+          :src="viewManagementImg"
+          alt=""
+        />
         <el-popover
           :visible="SaveVisible"
           :popper-style="{
@@ -876,7 +883,6 @@ const dashboardGuideRef = ref(null)
           <template #reference>
             <el-button
               class="el-button--default"
-              style="position: relative"
               @blur="SaveVisible = false"
               @click="SaveVisible = !SaveVisible"
             >
@@ -886,15 +892,6 @@ const dashboardGuideRef = ref(null)
                 </svg>
               </span>
               Save
-
-              <!-- v-if="guideStore.dashboard.isShowSaveConfigGuidePhoto" -->
-              <img
-                id="save-config-guide"
-                v-if="guideStore.dashboard.isShowSaveConfigGuidePhoto"
-                class="save-config-guide-class"
-                :src="saveConfigImg"
-                alt=""
-              />
               <span class="iconfont_icon">
                 <svg class="iconfont" aria-hidden="true">
                   <use xlink:href="#icon-icon_dropdown_b"></use>
@@ -919,6 +916,13 @@ const dashboardGuideRef = ref(null)
             <div>Save Layout</div>
           </div>
         </el-popover>
+        <img
+          id="save-config-guide"
+          v-if="guideStore.dashboard.isShowSaveConfigGuidePhoto"
+          class="save-config-guide-class position-absolute-guide"
+          :src="saveConfigImg"
+          alt=""
+        />
       </div>
     </div>
     <!-- 图表 -->
@@ -951,7 +955,7 @@ const dashboardGuideRef = ref(null)
                   <img
                     v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
                     id="kpi-chart-guide"
-                    class="kpi-chart-guide-class"
+                    class="kpi-chart-guide-class position-absolute-guide"
                     :src="kpiChartImg"
                     alt=""
                   />
@@ -1358,8 +1362,8 @@ const dashboardGuideRef = ref(null)
 
 .view-management-guide-class {
   position: absolute;
-  top: -1px;
-  right: -17px;
+  top: 0px;
+  right: 89px;
   width: 343px;
   height: 478px;
   z-index: 1500;
@@ -1367,13 +1371,12 @@ const dashboardGuideRef = ref(null)
 .save-config-guide-class {
   position: absolute;
   top: -1px;
-  right: -1px;
+  right: 0px;
   width: 117px;
   height: 115px;
   z-index: 1500;
 }
 .kpi-chart-guide-class {
-  position: absolute;
   top: -1px;
   right: -1px;
   width: 589px;

src/views/Dashboard/src/components/DashFiters.vue

@@ -190,11 +190,7 @@ const guideStore = useGuideStore()
       :offset="8"
     >
       <template #reference>
-        <el-button
-          style="position: relative"
-          class="el-button--default"
-          @click="filters_visible = !filters_visible"
-        >
+        <el-button class="el-button--default" @click="filters_visible = !filters_visible">
           <span class="iconfont_icon">
             <svg class="iconfont" aria-hidden="true">
               <use xlink:href="#icon-icon_filter_b"></use>
@@ -206,14 +202,6 @@ const guideStore = useGuideStore()
               <use xlink:href="#icon-icon_dropdown_b"></use>
             </svg>
           </span>
-
-          <img
-            v-if="isShowTransportModeGuide && guideStore.dashboard.isShowTransportModeGuidePhoto"
-            id="transport-mode-guide"
-            :src="transportModeImg"
-            class="transport-mode-guide-class"
-            alt=""
-          />
         </el-button>
       </template>
       <div class="Dash_title">Transport Mode</div>
@@ -297,17 +285,25 @@ const guideStore = useGuideStore()
         </div>
       </div>
     </el-popover>
+    <img
+      id="transport-mode-guide"
+      :src="transportModeImg"
+      v-if="isShowTransportModeGuide && guideStore.dashboard.isShowTransportModeGuidePhoto"
+      class="transport-mode-guide-class position-absolute-guide"
+      alt=""
+    />
   </div>
 </template>
 <style lang="scss" scoped>
 .DashFilters {
+  position: relative;
   display: flex;
   align-items: center;
 }
 .transport-mode-guide-class {
   position: absolute;
-  right: -1px;
-  top: -2px;
+  right: 0px;
+  top: -1px;
   width: 417px;
   height: 314px;
   z-index: 1000;

src/views/Layout/src/components/Header/HeaderView.vue

@@ -8,7 +8,9 @@ import { useHeaderSearch } from '@/stores/modules/headerSearch'
 import { onBeforeRouteUpdate } from 'vue-router'
 import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
+import { useGuideStore } from '@/stores/modules/guide'
 
+const guideStore = useGuideStore()
 const themeStore = useThemeStore()
 const userStore = useUserStore()
 const route = useRoute()
@@ -161,7 +163,13 @@ const closePopover = () => {
 
 <template>
   <div class="layout-toolbar">
-    <VBreadcrumb></VBreadcrumb>
+    <div style="display: flex">
+      <VBreadcrumb></VBreadcrumb>
+      <VDriverGuide
+        v-if="route.name === 'Tracking Detail'"
+        @click="guideStore.handleTrackingDetailGuide()"
+      ></VDriverGuide>
+    </div>
     <div class="right-info">
       <el-input
         v-model="searchValue"
@@ -326,6 +334,7 @@ const closePopover = () => {
 .layout-toolbar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   height: 100%;
 }
 .right-info {
@@ -495,4 +504,4 @@ div.el-popover.el-popper.user-config-popover {
 div.el-popper.theme-popper-class {
   padding: 3px 4px;
 }
-</style>
+</style>

src/views/Tracking/src/TrackingView.vue

@@ -750,10 +750,6 @@ const handleGuide = () => {
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-  z-index: 1200;
-}
 .filter-box {
   width: 100%;
   display: flex;

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

@@ -16,196 +16,8 @@ import { useOverflow } from '@/hooks/useOverflow'
 import { formatTimezone } from '@/utils/tools'
 import { useThemeStore } from '@/stores/modules/theme'
 import ShareLinkDialog from './components/ShareLinkDialog.vue'
-import { useDriver } from '@/utils/driverGuide'
-
-// import { driver } from 'driver.js'
-
-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)
-const handleGuide = () => {
-  let steps = []
-  if (allData.value?.transportInfo?.mode === 'Ocean Freight') {
-    steps = oceanSteps
-  } else if (allData.value?.transportInfo?.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() // 开始引导
-}
+import { useGuideStore } from '@/stores/modules/guide'
+const guideStore = useGuideStore()
 
 const route = useRoute()
 
@@ -288,6 +100,7 @@ const getData = () => {
       if (res.code === 200) {
         // 获取数据
         allData.value = res.data
+        guideStore.trackingDetail.mode = allData.value?.transportInfo?.mode || 'Ocean Freight'
       }
     })
     .finally(() => {
@@ -326,7 +139,7 @@ const openShareDialog = () => {
         <VTag large :type="allData?.transportInfo?.status">{{
           allData?.transportInfo?.status
         }}</VTag>
-        <VDriverGuide @click="handleGuide"></VDriverGuide>
+
         <div class="right-operation" id="driver-step-tracking-detail-1">
           <el-button
             v-if="

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

@@ -58,7 +58,7 @@ const steps: any = [
     element: '#more-filters-guide',
     popover: {
       title: '',
-      description: 'Click "more filters" to see more search options.',
+      description: 'Click "More Filters" to see more search options.',
       side: 'left'
     }
   },
@@ -210,7 +210,7 @@ defineExpose({
       <img
         style="box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1)"
         id="download-file-guide"
-        class="position-absolute download-file-guide-class"
+        class="position-absolute-guide download-file-guide-class"
         v-if="trackingGuideStore.isShowDownloadFileGuidePhoto"
         :src="downloadFileImg"
         alt=""
@@ -221,7 +221,7 @@ defineExpose({
       <img
         id="customize-columns-guide"
         v-if="trackingGuideStore.isShowCustomizeColumnsGuidePhoto"
-        class="position-absolute customize-columns-guide-class"
+        class="position-absolute-guide customize-columns-guide-class"
         :src="customizeColumnsImg"
         alt=""
       />
@@ -230,11 +230,6 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-  z-index: 1200;
-}
-
 .download-file-guide-class {
   right: 204px;
   top: 245px;