From 49c4dc646a9d123527577f02ee0d92865da9988e Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Tue, 23 Apr 2024 12:05:40 +0800
Subject: [PATCH] feat(demo): use Tour component replace dirverjs (#3777)

* feat(demo): use Tour component replace dirverjs

* chore(deps): remove dirverjs package
---
 package.json                   |  1 -
 pnpm-lock.yaml                 | 12 ++-----
 src/views/demo/steps/index.vue | 57 ++++++++++++++++------------------
 3 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index ec3627ad..9fcbe6d3 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,6 @@
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
-    "driver.js": "^1.3.1",
     "echarts": "^5.5.0",
     "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d2e33d8..e0bbfde0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,9 +50,6 @@ importers:
       dayjs:
         specifier: ^1.11.10
         version: 1.11.10
-      driver.js:
-        specifier: ^1.3.1
-        version: 1.3.1
       echarts:
         specifier: ^5.5.0
         version: 5.5.0
@@ -3108,9 +3105,6 @@ packages:
     resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
     engines: {node: '>=12'}
 
-  driver.js@1.3.1:
-    resolution: {integrity: sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ==}
-
   duplexer2@0.1.4:
     resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
 
@@ -9402,7 +9396,7 @@ snapshots:
 
   axios@1.6.8:
     dependencies:
-      follow-redirects: 1.15.6(debug@4.3.4)
+      follow-redirects: 1.15.6
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -10305,8 +10299,6 @@ snapshots:
 
   dotenv@16.4.5: {}
 
-  driver.js@1.3.1: {}
-
   duplexer2@0.1.4:
     dependencies:
       readable-stream: 2.3.8
@@ -10954,6 +10946,8 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  follow-redirects@1.15.6: {}
+
   follow-redirects@1.15.6(debug@4.3.4):
     optionalDependencies:
       debug: 4.3.4
diff --git a/src/views/demo/steps/index.vue b/src/views/demo/steps/index.vue
index 828a2023..a001a812 100644
--- a/src/views/demo/steps/index.vue
+++ b/src/views/demo/steps/index.vue
@@ -1,41 +1,38 @@
 <template>
   <PageWrapper title="引导页" content="用于给用户的指引操作">
-    <a-button type="primary" @click="handleStart">开始</a-button>
+    <a-button type="primary" @click="handleOpen(true)">开始</a-button>
+    <Tour v-model:current="current" :open="open" :steps="steps" @close="handleOpen(false)" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { PageWrapper } from '@/components/Page';
   import { useDesign } from '@/hooks/web/useDesign';
-  import { driver } from 'driver.js';
-  import 'driver.js/dist/driver.css';
+  import { ref } from 'vue';
+  import { Tour, TourProps } from 'ant-design-vue';
 
+  const open = ref<boolean>(false);
   const { prefixVar } = useDesign('');
 
-  function handleStart() {
-    driver({
-      showProgress: true,
-      steps: [
-        {
-          popover: {
-            title: 'Welcome',
-            description: 'Hello World! 👋',
-          },
-        },
-        {
-          element: `.${prefixVar}-layout-header-trigger`,
-          popover: {
-            title: 'Collapse Button',
-            description: 'This is the menu collapse button.',
-          },
-        },
-        {
-          element: `.${prefixVar}-layout-header-action`,
-          popover: {
-            title: 'User Action',
-            description: 'This is the user function area.',
-          },
-        },
-      ],
-    }).drive();
-  }
+  const current = ref(0);
+  const steps: TourProps['steps'] = [
+    {
+      title: 'Welcome',
+      description: 'Hello World! 👋',
+    },
+    {
+      title: 'Collapse Button',
+      description: 'This is the menu collapse button.',
+      target: () => document.querySelector(`.${prefixVar}-layout-header-trigger`) as HTMLElement,
+    },
+    {
+      title: 'User Action',
+      description: 'This is the user function area.',
+      target: () => document.querySelector(`.${prefixVar}-layout-header-action`) as HTMLElement,
+    },
+  ];
+
+  const handleOpen = (val: boolean): void => {
+    current.value = 0;
+    open.value = val;
+  };
 </script>