feat: 实现Tracking Detail页面导览

src/components/VDriverGuide/index.ts

@@ -0,0 +1 @@
+export { default } from './src/VDriverGuide.vue'

src/components/VDriverGuide/src/VDriverGuide.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts"></script>
+
+<template>
+  <el-button style="height: 24px; margin-left: 8px" 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
+    </span>
+  </el-button>
+</template>
+
+<style lang="scss" scoped></style>

src/styles/driver.scss

@@ -26,6 +26,8 @@ div.driver-popover-arrow-side-bottom {
 
 // 关闭图标
 button.driver-popover-close-btn {
+  top: 9px;
+  right: 9px;
   color: var(--color-neutral-1);
   &:hover,
   &:focus {
@@ -80,7 +82,7 @@ span.driver-popover-progress-text {
         background-color: var(--color-tour-next-btn-hover-bg);
         fill: var(--color-tour-next-btn-bg);
         span {
-          color: var(--color-btn-default-dark-hover) !important;
+          color: var(--color-tour-next-btn-color) !important;
         }
       }
     }

src/styles/theme.scss

@@ -254,6 +254,7 @@
   --color-tour-popover-bg: #fff;
   --color-tour-prev-btn-border: #eaebed;
   --color-tour-next-btn-bg: #2b2f36;
+  --color-tour-next-btn-hover-bg: #2b2f36;
   --color-tour-next-btn-color: #fff;
   --color-tour-step-color: #b5b9bf;
 }

src/utils/driverGuide.ts

@@ -14,6 +14,9 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
     driverInstance = driver({
       ...globalConfig,
       animate: false,
+      showProgress: true, // 显示进度条
+      overlayOpacity: 0.7, // 遮罩透明度
+      overlayColor: '#2b2f36', // 遮罩颜色
       // allowClose: false, // 禁止用户关闭引导
       showButtons: ['previous', 'next', 'close'],
       onPopoverRender: (popoverDOM, { config, state, driver }) => {

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

@@ -22,19 +22,66 @@ import { useDriver } from '@/utils/driverGuide'
 
 const steps: any = [
   {
-    element: '#step-home-1',
+    element: '#driver-step-tracking-detail-1',
     popover: {
-      title: 'Animated Tour Example',
-      description: "Here is the code example showing animated tour. Let's walk you through it.",
-      side: 'left',
+      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: `
+        <ol style="margin-left: 16px; list-style: disc">
+          <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: `
+      <ol style="margin-left: 16px; list-style: disc">
+        <li>Upload Files</li>
+        <li>Clickable download icons to download files</li>
+      </ol>
+      `,
+      side: 'bottom',
       align: 'start'
     }
   },
   {
-    element: '#step-home-2',
+    element: '#driver-step-tracking-detail-6',
     popover: {
-      title: 'Import the Library',
-      description: 'It works the same in vanilla JavaScript as well as frameworks.',
+      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'
     }
@@ -164,13 +211,8 @@ const openShareDialog = () => {
         <VTag large :type="allData?.transportInfo?.status">{{
           allData?.transportInfo?.status
         }}</VTag>
-        <el-button style="height: 24px; margin-left: 8px" class="driver-guide-btn el-button--dark">
-          <span class="font_family icon-icon_guidelines_b"></span>
-          <span style="display: inline-block; margin-top: 2px; margin-left: 4px; font-size: 12px">
-            Guidelines
-          </span>
-        </el-button>
-        <div class="right-operation" id="step-home-1">
+        <VDriverGuide @click="handleGuide"></VDriverGuide>
+        <div class="right-operation" id="driver-step-tracking-detail-1">
           <el-button
             v-if="
               (allData?.canViewAMSLog || allData?.canViewISFLog) &&
@@ -182,10 +224,9 @@ const openShareDialog = () => {
             <span class="font_family icon-icon_log_b" style="margin-right: 4px"></span
             >AMS/ISF</el-button
           >
-          <el-button @click="handleGuide">测试</el-button>
         </div>
       </div>
-      <div class="detail-info" id="step-home-2">
+      <div class="detail-info">
         <div class="item transport-way">
           <div class="origin">
             <div class="title">Origin</div>
@@ -328,7 +369,7 @@ const openShareDialog = () => {
           </div>
 
           <!-- Attachment -->
-          <div v-if="item.id === 5">
+          <div v-if="item.id === 5" id="driver-step-tracking-detail-5">
             <VBox :id="item.id" :isSeeAll="false" @draggable="handleDraggable">
               <template #header>Attachment</template>
               <template #content>
@@ -338,7 +379,12 @@ const openShareDialog = () => {
           </div>
         </template>
       </VueDraggable>
-      <EmailDrawer @sendEmailSuccess="getData" :data="allData" ref="emailDrawerRef"></EmailDrawer>
+      <EmailDrawer
+        id="driver-step-tracking-detail-6"
+        @sendEmailSuccess="getData"
+        :data="allData"
+        ref="emailDrawerRef"
+      ></EmailDrawer>
     </div>
     <AMSISFDrawer ref="AMSISFDrawerRef"></AMSISFDrawer>
     <ShareLinkDialog

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

@@ -20,6 +20,7 @@ const handleTabClick = (name: string) => {
             activeName === 'shipmentStatus' && props.data?.transportInfo?.mode !== 'Air Freight',
           'only-one-mode': props.data?.transportInfo?.mode === 'Air Freight'
         }"
+        id="driver-step-tracking-detail-2"
         @click="handleTabClick('shipmentStatus')"
       >
         Shipment Status
@@ -27,6 +28,7 @@ const handleTabClick = (name: string) => {
       <div
         v-if="props.data?.transportInfo?.mode !== 'Air Freight'"
         class="tab"
+        id="driver-step-tracking-detail-3"
         :class="{ 'is-active': activeName === 'containerStatus' }"
         @click="handleTabClick('containerStatus')"
       >