style: 重新引入icon图标库

src/styles/driver.scss

@@ -11,10 +11,27 @@ header.driver-popover-title {
 }
 
 // 角标
-div.driver-popover-arrow {
+div.driver-popover-arrow-side-left {
+  border-left-color: var(--color-tour-popover-bg);
+}
+div.driver-popover-arrow-side-right {
+  border-right-color: var(--color-tour-popover-bg);
+}
+div.driver-popover-arrow-side-top {
+  border-top-color: var(--color-tour-popover-bg);
+}
+div.driver-popover-arrow-side-bottom {
   border-bottom-color: var(--color-tour-popover-bg);
 }
 
+// 关闭图标
+button.driver-popover-close-btn {
+  color: var(--color-neutral-1);
+  &:hover,
+  &:focus {
+    color: var(--color-neutral-1);
+  }
+}
 // 内容
 div.driver-popover-description {
   color: var(--color-neutral-1);

src/styles/icons/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "font_family"; /* Project id 4672385 */
-  src: url('iconfont.woff2?t=1736324058852') format('woff2'),
-       url('iconfont.woff?t=1736324058852') format('woff'),
-       url('iconfont.ttf?t=1736324058852') format('truetype'),
-       url('iconfont.svg?t=1736324058852#font_family') format('svg');
+  src: url('iconfont.woff2?t=1750149505564') format('woff2'),
+       url('iconfont.woff?t=1750149505564') format('woff'),
+       url('iconfont.ttf?t=1750149505564') format('truetype'),
+       url('iconfont.svg?t=1750149505564#font_family') format('svg');
 }
 
 .font_family {
@@ -14,6 +14,122 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_guidelines_b:before {
+  content: "\e719";
+}
+
+.icon-icon_cancelled_b:before {
+  content: "\e71a";
+}
+
+.icon-icon_configurations_b:before {
+  content: "\e718";
+}
+
+.icon-a-1:before {
+  content: "\e717";
+}
+
+.icon-icon_good_b:before {
+  content: "\e713";
+}
+
+.icon-icon_notgood__filled_b:before {
+  content: "\e714";
+}
+
+.icon-icon_good__filled_b:before {
+  content: "\e715";
+}
+
+.icon-icon_notgood_b:before {
+  content: "\e716";
+}
+
+.icon-icon_send_b:before {
+  content: "\e712";
+}
+
+.icon-icon_sidebar__window_b:before {
+  content: "\e70f";
+}
+
+.icon-icon_maximized__window_b:before {
+  content: "\e710";
+}
+
+.icon-icon_collapsed__to_widget_b:before {
+  content: "\e711";
+}
+
+.icon-icon_theme_colors_b:before {
+  content: "\e70e";
+}
+
+.icon-icon_delay_b1:before {
+  content: "\e70b";
+}
+
+.icon-icon_collapse_b1:before {
+  content: "\e70c";
+}
+
+.icon-icon_cancel_b2:before {
+  content: "\e70d";
+}
+
+.icon-icon_ai_api_log_b:before {
+  content: "\e70a";
+}
+
+.icon-icon_collapse__sidebar_b:before {
+  content: "\e708";
+}
+
+.icon-icon_dashboard_title_b:before {
+  content: "\e709";
+}
+
+.icon-icon_collapse_b:before {
+  content: "\e707";
+}
+
+.icon-icon_cancel_b1:before {
+  content: "\e706";
+}
+
+.icon-icon_container__maintenance_b:before {
+  content: "\e705";
+}
+
+.icon-icon_up_b:before {
+  content: "\e704";
+}
+
+.icon-icon_route_b:before {
+  content: "\e700";
+}
+
+.icon-icon_model_b:before {
+  content: "\e701";
+}
+
+.icon-icon_delay_b:before {
+  content: "\e702";
+}
+
+.icon-icon_container__filled_b:before {
+  content: "\e703";
+}
+
+.icon-icon_po__sscc_b:before {
+  content: "\e6fe";
+}
+
+.icon-icon_po__request_b:before {
+  content: "\e6ff";
+}
+
 .icon-icon_currentlink_b:before {
   content: "\e6fc";
 }

src/utils/driverGuide.ts

@@ -13,30 +13,10 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
   if (!driverInstance) {
     driverInstance = driver({
       ...globalConfig,
+      animate: false,
+      // allowClose: false, // 禁止用户关闭引导
       showButtons: ['previous', 'next', 'close'],
       onPopoverRender: (popoverDOM, { config, state, driver }) => {
-        console.log('Popover rendered:', popoverDOM)
-        // 避免重复插入
-        if (!popoverDOM.container.querySelector('.custom-driver-close')) {
-          const closeBtn = document.createElement('span')
-          closeBtn.innerHTML = '×'
-          closeBtn.className = 'custom-driver-close'
-          closeBtn.style.cssText = `
-            position: absolute;
-            top: 8px;
-            right: 12px;
-            font-size: 18px;
-            font-weight: bold;
-            color: #999;
-            cursor: pointer;
-          `
-          closeBtn.onclick = () => {
-            driverInstance?.destroy()
-          }
-          popoverDOM.container.style.position = 'relative'
-          popoverDOM.container.appendChild(closeBtn)
-        }
-
         // 如果用户配置了自己的 onPopoverRender，也执行它
         globalConfig?.onPopoverRender?.(popoverDOM, { config, state, driver })
       }

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

@@ -16,38 +16,33 @@ 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'
+// import { driver } from 'driver.js'
 
-const driverObj = driver({
-  showProgress: true,
-  progressText: 'Step {{current}} of {{total}}',
-  stagePadding: 2,
-  showButtons: ['next', 'previous'],
-  steps: [
-    {
-      element: '#step-home-1',
-      popover: {
-        title: 'Animated Tour Example',
-        description: "Here is the code example showing animated tour. Let's walk you through it.",
-        side: 'left',
-        align: 'start'
-      }
-    },
-    {
-      element: '#step-home-2',
-      popover: {
-        title: 'Import the Library',
-        description: 'It works the same in vanilla JavaScript as well as frameworks.',
-        side: 'bottom',
-        align: 'start'
-      }
+const steps: any = [
+  {
+    element: '#step-home-1',
+    popover: {
+      title: 'Animated Tour Example',
+      description: "Here is the code example showing animated tour. Let's walk you through it.",
+      side: 'left',
+      align: 'start'
     }
-  ]
-})
-
-const test = () => {
-  driverObj.drive()
+  },
+  {
+    element: '#step-home-2',
+    popover: {
+      title: 'Import the Library',
+      description: 'It works the same in vanilla JavaScript as well as frameworks.',
+      side: 'bottom',
+      align: 'start'
+    }
+  }
+]
+const { start } = useDriver(steps)
+const handleGuide = () => {
+  start() // 开始引导
 }
 
 const route = useRoute()
@@ -169,6 +164,12 @@ 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">
           <el-button
             v-if="
@@ -181,7 +182,7 @@ const openShareDialog = () => {
             <span class="font_family icon-icon_log_b" style="margin-right: 4px"></span
             >AMS/ISF</el-button
           >
-          <el-button @click="test">测试</el-button>
+          <el-button @click="handleGuide">测试</el-button>
         </div>
       </div>
       <div class="detail-info" id="step-home-2">