Merge branch 'dev_zyh' into dev_zyh_optimize

src/assets/image/test.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
-
-<style lang="scss" scoped></style>

src/auto-imports.d.ts

@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -69,6 +68,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components/MoreFilters/src/MoreFilters.vue

@@ -528,7 +528,8 @@ const drawer = ref(false)
 const props = defineProps({
   isShipment: Boolean,
   searchTableQeury: Object,
-  isShowMoreFiltersGuidePhoto: Boolean
+  isShowMoreFiltersGuidePhoto: Boolean,
+  pageMode: String
 })
 const PartyTypeoptions = computed(() => {
   if (props.isShipment) {
@@ -1008,14 +1009,21 @@ watch(
     searchTableQeurytest.value = current
   }
 )
-import moreFiltersImgLight from '@/views/Tracking/src/image/more-filters-guide.png'
-import moreFiltersImgDark from '@/views/Tracking/src/image/dark-more-filters-guide.png'
+import trackingMoreFiltersImgLight from './image/tracking-more-filters-guide.png'
+import trackingMoreFiltersImgDark from './image/tracking-dark-more-filters-guide.png'
+import bookingMoreFiltersImgLight from './image/booking-more-filters-guide.png'
+import bookingMoreFiltersImgDark from './image/booking-dark-more-filters-guide.png'
 import { useThemeStore } from '@/stores/modules/theme'
 
 const themeStore = useThemeStore()
 
 const moreFiltersGuideImg = computed(() => {
-  return themeStore.theme === 'dark' ? moreFiltersImgDark : moreFiltersImgLight
+  console.log('props.pageMode', props.pageMode)
+  if (props.pageMode === 'tracking') {
+    return themeStore.theme === 'dark' ? trackingMoreFiltersImgDark : trackingMoreFiltersImgLight
+  } else {
+    return themeStore.theme === 'dark' ? bookingMoreFiltersImgDark : bookingMoreFiltersImgLight
+  }
 })
 </script>
 <template>
@@ -1024,8 +1032,7 @@ const moreFiltersGuideImg = computed(() => {
       <img
         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,19 +1238,11 @@ const moreFiltersGuideImg = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-}
 img.more-filters-guide-class {
-  right: -1px;
+  right: -20px;
   top: -1px;
-  height: 579x;
-  width: 202px;
-  z-index: 20000;
-  &.dark-more-filters-guide-class {
-    right: 0px;
-    width: 250px;
-  }
+  width: 361px;
+  z-index: 1500;
 }
 
 .icon_more {
@@ -1277,6 +1276,7 @@ img.more-filters-guide-class {
 
 .Filters_title {
   margin: 0 8px;
+  margin-left: 7px;
 }
 
 :deep(.el-drawer__header) {

src/components/VTipTooltip/src/VTipTooltip.vue

@@ -7,7 +7,8 @@ const props = withDefaults(
     width?: number
   }>(),
   {
-    placement: 'bottom'
+    placement: 'bottom',
+    width: 368
   }
 )
 
@@ -17,6 +18,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"
@@ -24,7 +26,7 @@ const visible = ref(false)
     >
       <span class="font_family icon-icon_info_b"></span>
       <template #content>
-        <div class="label">{{ props.label }}</div>
+        <div class="label" :style="{ width: props.width + 'px' }">{{ props.label }}</div>
         <div style="text-align: center">
           <img :style="{ width: props.width + 'px' }" class="photo" :src="props.img" alt="" />
         </div>
@@ -37,16 +39,15 @@ const visible = ref(false)
 div.v-tip-tooltip {
   padding: 16px;
   border-radius: 12px;
-  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 {
-  //   border: 2 !important;
-  //   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;
+    white-space: wrap;
+  }
   .photo {
-    width: 368px;
     margin-top: 8px;
     border-radius: 6px;
   }

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

@@ -2,9 +2,11 @@ div.driver-popover {
   width: 400px;
   max-width: 400px;
   padding: 15px;
+  padding-top: 27px;
   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 +35,24 @@ div.driver-popover-arrow-side-bottom {
 }
 // 关闭图标
 button.driver-popover-close-btn {
-  top: 1px;
-  right: -2px;
-  color: var(--color-neutral-1);
+  top: 3px;
+  right: 4px;
+  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 +61,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

@@ -57,3 +57,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

@@ -459,6 +459,7 @@ const handleGuide = () => {
       </div>
       <MoreFilters
         :isShipment="false"
+        :pageMode="'booking'"
         :searchTableQeury="searchTableQeury"
         @MoreFiltersSearch="MoreFiltersSearch"
         @clearMoreFiltersTags="clearMoreFiltersTags"
@@ -502,10 +503,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

@@ -3,8 +3,8 @@ import { useDriver } from '@/utils/driverGuide'
 import { useGuideStore } from '@/stores/modules/guide'
 import { useThemeStore } from '@/stores/modules/theme'
 
-import customizeColumnsImgLight from '@/views/Tracking/src/image/customize-columns.png'
-import customizeColumnsImgDark from '@/views/Tracking/src/image/dark-customize-columns.png'
+import customizeColumnsImgLight from '../image/customize-columns.png'
+import customizeColumnsImgDark from '../image/dark-customize-columns.png'
 
 import downloadFileImgLight from '@/views/Tracking/src/image/download-guide.png'
 import downloadFileImgDark from '@/views/Tracking/src/image/dark-download-guide.png'
@@ -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'
     }
   },
@@ -98,7 +98,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }
@@ -194,9 +194,10 @@ defineExpose({
     <!-- download-file-guide -->
     <Teleport to="body">
       <img
+        :class="{ 'download-file-guide-dark-class': themeStore.theme === 'dark' }"
         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=""
       />
@@ -204,9 +205,10 @@ defineExpose({
     <!-- customize-columns-guide  -->
     <Teleport to="body">
       <img
+        :class="{ 'customize-columns-guide-dark-class': themeStore.theme === 'dark' }"
         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,21 +217,27 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
+.position-absolute-guide {
   position: absolute;
   z-index: 1200;
 }
 
 .download-file-guide-class {
-  right: 204px;
-  top: 245px;
-  width: 488px;
-  height: 333px;
+  right: 187px;
+  top: 246px;
+  width: 431px;
+  height: 304px;
+  &.download-file-guide-dark-class {
+    right: 187px;
+    width: 431px;
+    height: 304px;
+  }
 }
 .customize-columns-guide-class {
-  right: 24px;
-  top: 246px;
-  width: 515px;
-  height: 353px;
+  right: 5px;
+  top: 245px;
+  width: 682px;
+  height: 473px;
+  transform: translateX(0.9px);
 }
 </style>

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -479,12 +479,20 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button class="el-button--main el-button--pain-theme" @click="handleDownload">
-          <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
+        <el-button
+          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
+          class="el-button--main el-button--pain-theme"
+          @click="handleDownload"
+          :style="{
+            paddingRight: themeStore.theme === 'dark' ? '13px' : '16px',
+            paddingLeft: themeStore.theme === 'dark' ? '13px' : '11px'
+          }"
+        >
+          <span style="margin-right: 7px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>
-        <el-button style="padding-left: 10px" type="default" @click="handleCustomizeColumns">
-          <span style="margin-right: 8px" class="font_family icon-icon_column_b"></span>
+        <el-button style="padding: 0 17px 0 9px" type="default" @click="handleCustomizeColumns">
+          <span style="margin-right: 6px" class="font_family icon-icon_column_b"></span>
           Customize Columns
         </el-button>
       </div>

src/views/Dashboard/src/DashboardView.vue

@@ -775,14 +775,47 @@ const ClickParams = (val: any) => {
     })
   }
 }
-import kpiChartTip from './guideImage/kpi-chart-tip.png'
-import pendingChartTip from './guideImage/pending-chart-tip.png'
-import etdToEtaChartsTip from './guideImage/etd-to-eta-chart-tip.png'
-import containerChartTip from './guideImage/container-count-chart-tip.png'
-import top10ChartTip from './guideImage/top-10-chart-tip.png'
-import co2eChartTip from './guideImage/co2e-chart-tip.png'
-import revenueSpentChartTip from './guideImage/revenue-spent-chart-tip.png'
-import recentStatusChartTip from './guideImage/recent-status-chart-tip.png'
+import kpiChartTipLight from './tipsImage/kpi-chart-tip.png'
+import kpiChartTipDark from './tipsImage/dark-kpi-chart-tip.png'
+import pendingChartTipLight from './tipsImage/pending-chart-tip.png'
+import pendingChartTipDark from './tipsImage/dark-pending-chart-tip.png'
+import etdToEtaChartsTipLight from './tipsImage/etd-to-eta-chart-tip.png'
+import etdToEtaChartsTipDark from './tipsImage/dark-etd-to-eta-chart-tip.png'
+import containerChartTipLight from './tipsImage/container-count-chart-tip.png'
+import containerChartTipDark from './tipsImage/dark-container-count-chart-tip.png'
+import top10ChartTipLight from './tipsImage/top-10-chart-tip.png'
+import top10ChartTipDark from './tipsImage/dark-top-10-chart-tip.png'
+import co2eChartTipLight from './tipsImage/co2e-chart-tip.png'
+import co2eChartTipDark from './tipsImage/dark-co2e-chart-tip.png'
+import revenueSpentChartTipLight from './tipsImage/revenue-spent-chart-tip.png'
+import revenueSpentChartTipDark from './tipsImage/dark-revenue-spent-chart-tip.png'
+import recentStatusChartTipLight from './tipsImage/recent-status-chart-tip.png'
+import recentStatusChartTipDark from './tipsImage/dark-recent-status-chart-tip.png'
+
+const kpiChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? kpiChartTipDark : kpiChartTipLight
+})
+const pendingChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? pendingChartTipDark : pendingChartTipLight
+})
+const etdToEtaChartsTip = computed(() => {
+  return themeStore.theme === 'dark' ? etdToEtaChartsTipDark : etdToEtaChartsTipLight
+})
+const containerChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? containerChartTipDark : containerChartTipLight
+})
+const top10ChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? top10ChartTipDark : top10ChartTipLight
+})
+const co2eChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? co2eChartTipDark : co2eChartTipLight
+})
+const revenueSpentChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? revenueSpentChartTipDark : revenueSpentChartTipLight
+})
+const recentStatusChartTip = computed(() => {
+  return themeStore.theme === 'dark' ? recentStatusChartTipDark : recentStatusChartTipLight
+})
 
 import DashboardGuide from '../src/components/DashboardGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
@@ -811,6 +844,11 @@ const handleGuide = () => {
   dashboardGuideRef.value?.startGuide()
 }
 const dashboardGuideRef = ref(null)
+
+function handleImageClick(event) {
+  event.stopPropagation() // 阻止事件冒泡
+  alert('Image clicked')
+}
 </script>
 <template>
   <div class="dashboard">
@@ -824,25 +862,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">
@@ -867,6 +899,17 @@ const dashboardGuideRef = ref(null)
             </div>
           </div>
         </el-popover>
+
+        <img
+          id="view-management-guide"
+          v-if="guideStore.dashboard.isShowViewManagementGuidePhoto"
+          class="view-management-guide-class"
+          :class="{
+            'view-management-guide-dark-class': themeStore.theme === 'dark'
+          }"
+          :src="viewManagementImg"
+          alt=""
+        />
         <el-popover
           :visible="SaveVisible"
           :popper-style="{
@@ -879,7 +922,6 @@ const dashboardGuideRef = ref(null)
           <template #reference>
             <el-button
               class="el-button--default"
-              style="position: relative"
               @blur="SaveVisible = false"
               @click="SaveVisible = !SaveVisible"
             >
@@ -889,15 +931,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>
@@ -922,6 +955,18 @@ 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"
+          :class="{
+            'save-config-guide-dark-class': themeStore.theme === 'dark'
+          }"
+          alt=""
+        />
       </div>
     </div>
     <!-- 图表 -->
@@ -952,9 +997,9 @@ const dashboardGuideRef = ref(null)
               <template #header>
                 <div class="Title_flex" style="position: relative">
                   <img
-                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
                     id="kpi-chart-guide"
-                    class="kpi-chart-guide-class"
+                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
+                    class="kpi-chart-guide-class position-absolute-guide"
                     :src="kpiChartImg"
                     alt=""
                   />
@@ -1020,6 +1065,7 @@ const dashboardGuideRef = ref(null)
                     <VTipTooltip
                       :img="pendingChartTip"
                       :width="420"
+                      :placement="'bottom-start'"
                       :label="'Pending Report：Showing shipments which are soon to depart/arrive.'"
                     ></VTipTooltip>
                   </div>
@@ -1068,6 +1114,7 @@ const dashboardGuideRef = ref(null)
                     <VTipTooltip
                       :img="etdToEtaChartsTip"
                       :width="430"
+                      :placement="'bottom-start'"
                       :label="'ETD to ETA (Days)：Distribution of Transit Time (ETA-ETD) for All Shipments in Last 12 Months.'"
                     ></VTipTooltip>
                   </div>
@@ -1102,6 +1149,7 @@ const dashboardGuideRef = ref(null)
                     {{ item.title }}
                     <VTipTooltip
                       :img="containerChartTip"
+                      :placement="'bottom-start'"
                       :label="'Container Count：Total Container Volume by Month (Last 12 Months)'"
                     ></VTipTooltip>
                   </div>
@@ -1206,6 +1254,7 @@ const dashboardGuideRef = ref(null)
                       :img="co2eChartTip"
                       :label="'CO2e Emission by Origin or Destination: Last 12 Months CO2e Emission Rankings: Top 10 Origin Cities and Top 10 Destination Cities'"
                       :width="700"
+                      :placement="'bottom-start'"
                     ></VTipTooltip>
                   </div>
                   <DashFilters
@@ -1278,6 +1327,7 @@ const dashboardGuideRef = ref(null)
                       :img="recentStatusChartTip"
                       :label="'Recent Status: Active shipment list with ETD within the past three months and the next month.'"
                       :width="700"
+                      :placement="'bottom-start'"
                     ></VTipTooltip>
                   </div>
                   <DashFilters
@@ -1315,6 +1365,7 @@ const dashboardGuideRef = ref(null)
                     <VTipTooltip
                       :img="revenueSpentChartTip"
                       :label="'Revenue Spent: Based on the billto object, display the corresponding revenue data. '"
+                      :placement="'bottom-start'"
                       :width="700"
                     ></VTipTooltip>
                   </div>
@@ -1361,24 +1412,33 @@ const dashboardGuideRef = ref(null)
 
 .view-management-guide-class {
   position: absolute;
-  top: -1px;
-  right: -17px;
-  width: 343px;
-  height: 478px;
+  top: 0px;
+  right: 85px;
+  width: 437px;
+  height: 603px;
   z-index: 1500;
+  &.view-management-guide-dark-class {
+    width: 439px;
+    height: 622px;
+  }
 }
 .save-config-guide-class {
   position: absolute;
   top: -1px;
-  right: -1px;
-  width: 117px;
-  height: 115px;
+  right: -13px;
+  width: 183px;
+  height: 160px;
   z-index: 1500;
+  transform: translate(-0.8px, 0px);
+  &.save-config-guide-dark-class {
+    width: 182px;
+    height: 157px;
+    right: -12px;
+  }
 }
 .kpi-chart-guide-class {
-  position: absolute;
-  top: -1px;
-  right: -1px;
+  top: -2px;
+  left: -50px;
   width: 589px;
   height: 478px;
   z-index: 3500;

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

@@ -191,11 +191,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>
@@ -207,14 +203,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>
@@ -298,19 +286,27 @@ 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;
-  width: 417px;
-  height: 314px;
+  right: -16px;
+  top: -1px;
+  width: 431px;
+  height: 327px;
   z-index: 1000;
 }
 :deep(.el-checkbox-button__inner) {

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

@@ -12,7 +12,7 @@ const steps: any = [
       title: '',
       description:
         'The Dashboard integrates different types of reports. You can freely select the reports you need. ',
-      side: 'bottom'
+      side: 'left'
     }
   },
   {
@@ -29,7 +29,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'Click the icon next to the report name to view the data explanation for each report.',
+        'Hover the icon next to the report name to view the data explanation for each report.',
       side: 'bottom'
     }
   },
@@ -55,7 +55,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }

src/views/Dashboard/src/guideImage/test.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
-
-<style lang="scss" scoped></style>

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

@@ -14,14 +14,15 @@ import TrainingCard from './components/TrainingCard.vue'
 import emitter from '@/utils/bus'
 
 const notificationMsgStore = useNotificationMessage()
+import { useGuideStore } from '@/stores/modules/guide'
+
+const guideStore = useGuideStore()
 const themeStore = useThemeStore()
 const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 const headerSearch = useHeaderSearch()
 
-const trainingCardRef = ref()
-
 // 切换系统主题颜色
 const toggleThemeMode = (theme: string) => {
   themeStore.toggleTheme(theme, true)
@@ -133,7 +134,7 @@ const handleUserManual = () => {
         }
         if (res.data?.code === 403) {
           sessionStorage.clear()
-          emitter.emit('login-out');
+          emitter.emit('login-out')
           router.push('/login')
           userStore.logout()
           ElMessage.warning({
@@ -196,6 +197,24 @@ onMounted(() => {
     notificationMsgStore.hasUnreadMessages()
   }
 })
+const themePopoverRef = ref()
+// // 点击外部关闭逻辑
+const handleClickOutside = (event) => {
+  const popoverElementRef = themePopoverRef.value?.popperRef?.contentRef
+  if (popoverElementRef && !popoverElementRef.contains(event.target)) {
+    isPopoverVisible.value = false
+  }
+}
+
+const handleShowThemePopover = () => {
+  isPopoverVisible.value = true
+  document.addEventListener('click', handleClickOutside)
+}
+
+const handleCloseThemePopover = () => {
+  isPopoverVisible.value = false
+  document.removeEventListener('click', handleClickOutside)
+}
 </script>
 
 <template>
@@ -206,8 +225,14 @@ onMounted(() => {
     element-loading-custom-class="element-loading"
     element-loading-background="rgb(43, 47, 54, 0.7)"
   >
-    <VBreadcrumb></VBreadcrumb>
-    <TrainingCard ref="trainingCardRef"></TrainingCard>
+    <div style="display: flex">
+      <VBreadcrumb></VBreadcrumb>
+      <TrainingCard ref="trainingCardRef"></TrainingCard>
+      <VDriverGuide
+        v-if="route.name === 'Tracking Detail'"
+        @click="guideStore.handleTrackingDetailGuide()"
+      ></VDriverGuide>
+    </div>
     <div class="right-info">
       <el-input
         v-model="searchValue"
@@ -235,10 +260,12 @@ onMounted(() => {
         placement="bottom-end"
         :width="400"
         trigger="click"
+        themePopoverRef
+        ref="themePopoverRef"
         :visible="isPopoverVisible"
         popper-class="toggle-theme-popover"
-        @show="isPopoverVisible = true"
-        @hide="isPopoverVisible = false"
+        @show="handleShowThemePopover"
+        @hide="handleCloseThemePopover"
       >
         <div>
           <!-- Popover content remains the same -->
@@ -384,6 +411,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   position: relative;
+  align-items: center;
   height: 100%;
 }
 .right-info {

src/views/Tracking/src/TrackingView.vue

@@ -711,7 +711,7 @@ const handleGuide = () => {
         @clearMoreFiltersTags="clearMoreFiltersTags"
         @defaultMorefilters="defaultMorefilters"
         :isShowMoreFiltersGuidePhoto="guideStore.tracking.isShowMoreFiltersGuidePhoto"
-        :imgGuideId="'more-filters-guide'"
+        :pageMode="'tracking'"
       ></MoreFilters>
       <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
         >Search</el-button
@@ -750,10 +750,6 @@ const handleGuide = () => {
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-  z-index: 1200;
-}
 .filter-box {
   width: 100%;
   display: flex;
@@ -767,37 +763,6 @@ const handleGuide = () => {
   display: flex;
   flex-direction: column;
 }
-.filter-guide-class {
-  top: -3px;
-  left: -2px;
-  height: 29px;
-  width: 592px;
-}
-img.more-filters-guide-class {
-  right: 38px;
-  top: 155px;
-  height: 634px;
-  width: 243px;
-  z-index: 20000;
-}
-.download-file-guide-class {
-  right: 85px;
-  top: 243px;
-  width: 377px;
-  height: 236px;
-}
-.customize-columns-guide-class {
-  right: 8px;
-  top: 249px;
-  width: 694px;
-  height: 474px;
-}
-.tab-filter-guide-class {
-  left: 248px;
-  top: 118px;
-  height: 42px;
-  z-index: 20000;
-}
 
 .Title {
   display: flex;

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

@@ -17,196 +17,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()
 
@@ -293,6 +105,7 @@ const getData = () => {
         is_subscribe.value = res.data.is_subscribe
         // 获取数据
         allData.value = res.data
+        guideStore.trackingDetail.mode = allData.value?.transportInfo?.mode || 'Ocean Freight'
       }
     })
     .finally(() => {
@@ -352,7 +165,7 @@ const SubscribeShipments = () => {
         <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'
     }
   },
@@ -103,7 +103,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }
@@ -205,13 +205,16 @@ defineExpose({
     <!-- 多区域自定义高亮组件 -->
     <!-- <MultiHighlightGuide v-if="showExtraHighlights" :items="extraHighlightItems" /> -->
 
-    <!-- download-file-guide -->
+    <!-- download-file-guide  -->
     <Teleport to="body">
       <img
         style="box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1)"
         id="download-file-guide"
-        class="position-absolute download-file-guide-class"
         v-if="trackingGuideStore.isShowDownloadFileGuidePhoto"
+        :class="{
+          'download-file-guide-dark-class': themeStore.theme === 'dark'
+        }"
+        class="position-absolute-guide download-file-guide-class"
         :src="downloadFileImg"
         alt=""
       />
@@ -221,7 +224,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,21 +233,23 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-  z-index: 1200;
-}
-
 .download-file-guide-class {
-  right: 204px;
-  top: 245px;
-  width: 488px;
-  height: 333px;
+  right: 187px;
+  top: 246px;
+  width: 431px;
+  height: 304px;
+  transform: translate(0.7px, -0.3px);
+  &.download-file-guide-dark-class {
+    right: 187px;
+    width: 431px;
+    height: 304px;
+  }
 }
 .customize-columns-guide-class {
-  right: 24px;
-  top: 246px;
-  width: 515px;
-  height: 353px;
+  right: 5px;
+  top: 245px;
+  width: 681px;
+  height: 486px;
+  transform: translateX(0.9px);
 }
 </style>

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -593,12 +593,19 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button class="el-button--main el-button--pain-theme" @click="handleDownload">
-          <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
+        <el-button
+          class="el-button--main el-button--pain-theme"
+          @click="handleDownload"
+          :style="{
+            paddingRight: themeStore.theme === 'dark' ? '13px' : '16px',
+            paddingLeft: themeStore.theme === 'dark' ? '13px' : '11px'
+          }"
+        >
+          <span style="margin-right: 7px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>
         <el-button style="padding-left: 10px" type="default" @click="handleCustomizeColumns">
-          <span style="margin-right: 8px" class="font_family icon-icon_column_b"></span>
+          <span style="margin-right: 6px" class="font_family icon-icon_column_b"></span>
           Customize Columns
         </el-button>
       </div>

src/views/Tracking/src/image/test.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
-
-<style lang="scss" scoped></style>