feat(demo): use Tour component replace dirverjs (vbenjs#3777)

* feat(demo): use Tour component replace dirverjs

* chore(deps): remove dirverjs package

Author: wangjue666

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",

pnpm-lock.yaml

@@ -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>