From 867ef87a340ff49dc90858ca63b34ea8a715aca1 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 18 Nov 2022 19:54:08 +0800
Subject: [PATCH] chore: use `intro.js` replace `driver.js`

---
 package.json              |  5 +-
 pnpm-lock.yaml            | 49 ++++++++++++--------
 src/style/dark.scss       |  6 +++
 src/views/guide/index.vue | 98 +++++++++++++--------------------------
 4 files changed, 71 insertions(+), 87 deletions(-)

diff --git a/package.json b/package.json
index d26e136c3..f040084d4 100644
--- a/package.json
+++ b/package.json
@@ -45,11 +45,11 @@
     "china-area-data": "^5.0.1",
     "cropperjs": "^1.5.12",
     "dayjs": "^1.11.5",
-    "driver.js": "^0.9.8",
     "echarts": "^5.4.0",
     "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.2.21",
+    "element-plus": "^2.2.22",
     "element-resize-detector": "^1.2.4",
+    "intro.js": "^6.0.0",
     "js-cookie": "^3.0.1",
     "jsbarcode": "^3.11.5",
     "lodash": "^4.17.21",
@@ -98,6 +98,7 @@
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "@pureadmin/theme": "^2.4.0",
     "@types/element-resize-detector": "1.1.3",
+    "@types/intro.js": "^5.1.0",
     "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.180",
     "@types/lodash-es": "^4.17.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce1b28429..e66db53a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,7 @@ specifiers:
   "@pureadmin/theme": ^2.4.0
   "@pureadmin/utils": ^1.6.5
   "@types/element-resize-detector": 1.1.3
+  "@types/intro.js": ^5.1.0
   "@types/js-cookie": ^3.0.1
   "@types/lodash": ^4.14.180
   "@types/lodash-es": ^4.17.6
@@ -52,16 +53,16 @@ specifiers:
   cropperjs: ^1.5.12
   cssnano: ^5.1.14
   dayjs: ^1.11.5
-  driver.js: ^0.9.8
   echarts: ^5.4.0
   el-table-infinite-scroll: ^3.0.1
-  element-plus: ^2.2.21
+  element-plus: ^2.2.22
   element-resize-detector: ^1.2.4
   eslint: ^8.8.0
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^9.7.0
   font-awesome: ^4.7.0
   husky: ^7.0.4
+  intro.js: ^6.0.0
   js-cookie: ^3.0.1
   jsbarcode: ^3.11.5
   lint-staged: 11.1.2
@@ -130,8 +131,8 @@ dependencies:
   "@logicflow/core": 1.1.31
   "@logicflow/extension": 1.1.31
   "@pureadmin/components": 1.1.0_vue@3.2.45
-  "@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
-  "@pureadmin/table": 1.2.0_element-plus@2.2.21
+  "@pureadmin/descriptions": 1.1.1_element-plus@2.2.22
+  "@pureadmin/table": 1.2.0_element-plus@2.2.22
   "@pureadmin/utils": 1.6.6_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.5.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
@@ -142,11 +143,11 @@ dependencies:
   china-area-data: 5.0.1
   cropperjs: 1.5.12
   dayjs: 1.11.6
-  driver.js: 0.9.8
   echarts: 5.4.0
   el-table-infinite-scroll: 3.0.1
-  element-plus: 2.2.21_vue@3.2.45
+  element-plus: 2.2.22_vue@3.2.45
   element-resize-detector: 1.2.4
+  intro.js: 6.0.0
   js-cookie: 3.0.1
   jsbarcode: 3.11.5
   lodash: 4.17.21
@@ -195,6 +196,7 @@ devDependencies:
   "@intlify/vite-plugin-vue-i18n": 6.0.3_vite@3.1.8+vue-i18n@9.2.2
   "@pureadmin/theme": 2.4.0
   "@types/element-resize-detector": 1.1.3
+  "@types/intro.js": 5.1.0
   "@types/js-cookie": 3.0.2
   "@types/lodash": 4.14.189
   "@types/lodash-es": 4.17.6
@@ -1364,7 +1366,7 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /@pureadmin/descriptions/1.1.1_element-plus@2.2.21:
+  /@pureadmin/descriptions/1.1.1_element-plus@2.2.22:
     resolution:
       {
         integrity: sha512-4BHLKomLU/LxGs5EUA+h+aKNrJEkhrU6+QE8VoWfJZ8VTU6ddvFLT/Pi4WuO5CWNXM9ZjqvHLFFVwEPlKntqtg==
@@ -1373,11 +1375,11 @@ packages:
       element-plus: ^2.0.0
     dependencies:
       "@element-plus/icons-vue": 2.0.10_vue@3.2.45
-      element-plus: 2.2.21_vue@3.2.45
+      element-plus: 2.2.22_vue@3.2.45
       vue: 3.2.45
     dev: false
 
-  /@pureadmin/table/1.2.0_element-plus@2.2.21:
+  /@pureadmin/table/1.2.0_element-plus@2.2.22:
     resolution:
       {
         integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw==
@@ -1385,7 +1387,7 @@ packages:
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
-      element-plus: 2.2.21_vue@3.2.45
+      element-plus: 2.2.22_vue@3.2.45
       vue: 3.2.45
     dev: false
 
@@ -1520,6 +1522,13 @@ packages:
       }
     dev: false
 
+  /@types/intro.js/5.1.0:
+    resolution:
+      {
+        integrity: sha512-XHkD6t7f3bn8B2//kOlznRzmk15KvsRkFpY6i8em/eDphblQ8QHbCiW+6OPjX7CxI0aVNVJK6Yamb2h2KMmFdA==
+      }
+    dev: true
+
   /@types/js-cookie/3.0.2:
     resolution:
       {
@@ -3952,13 +3961,6 @@ packages:
       unidragger: 2.4.0
     dev: false
 
-  /driver.js/0.9.8:
-    resolution:
-      {
-        integrity: sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q==
-      }
-    dev: false
-
   /echarts/5.4.0:
     resolution:
       {
@@ -3983,7 +3985,7 @@ packages:
       }
     dependencies:
       core-js: 3.26.1
-      element-plus: 2.2.21_vue@3.2.45
+      element-plus: 2.2.22_vue@3.2.45
       vue: 3.2.45
     transitivePeerDependencies:
       - "@vue/composition-api"
@@ -3996,10 +3998,10 @@ packages:
       }
     dev: true
 
-  /element-plus/2.2.21_vue@3.2.45:
+  /element-plus/2.2.22_vue@3.2.45:
     resolution:
       {
-        integrity: sha512-wZUePoXZ1zuCkzENK/8mn+mekuLJ9OoGYiudjUujzCf+T8HfOQl+TKQStwOkGBNk93fK8e9YdFIty4jH4AX6dg==
+        integrity: sha512-gg2g2WOMNpWf0wGesymUvTV0VZDF/4khQKroSNeCV/vWJ/cqssPYdtqfGxTiFRt/f+JpyFkV7O1mo0yzMCzrBg==
       }
     peerDependencies:
       vue: ^3.2.0
@@ -5463,6 +5465,13 @@ packages:
       }
     dev: true
 
+  /intro.js/6.0.0:
+    resolution:
+      {
+        integrity: sha512-ZUiR6BoLSvPSlLG0boewnWVgji1fE1gBvP/pyw5pgCKXEDQz1mMeUxarggClPNs71UTq364LwSk9zxz17A9gaQ==
+      }
+    dev: false
+
   /is-arrayish/0.2.1:
     resolution:
       {
diff --git a/src/style/dark.scss b/src/style/dark.scss
index 104331ea7..01f572f98 100644
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -170,6 +170,12 @@ html.dark {
     }
   }
 
+  /* intro.js */
+  .introjs-tooltip-title,
+  .introjs-tooltiptext {
+    color: var(--el-color-primary);
+  }
+
   /* element-plus */
   .el-table__cell {
     background: var(--el-bg-color);
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index de9d479dd..71b72e8a4 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,62 +1,42 @@
 <script setup lang="ts">
-import Driver from "driver.js";
-import "driver.js/dist/driver.min.css";
+import intro from "intro.js";
+import "intro.js/minified/introjs.min.css";
 
 defineOptions({
   name: "Guide"
 });
 
-const steps = [
-  {
-    element: "#header-notice",
-    popover: {
-      title: "消息通知",
-      description: "你可以在这里查看管理员发送的消息",
-      position: "left"
-    }
-  },
-  {
-    element: "#header-translation",
-    popover: {
-      title: "国际化",
-      description: "你可以在这里进行语言切换",
-      position: "left"
-    }
-  },
-  {
-    element: ".set-icon",
-    popover: {
-      title: "项目配置",
-      description: "你可以在这里查看项目配置",
-      position: "left"
-    }
-  },
-  {
-    element: ".tags-view",
-    popover: {
-      title: "多标签页",
-      description: "这里是你访问过的页面的历史",
-      position: "buttom"
-    }
-  }
-];
-
-const driver = new Driver({
-  className: "scoped-class",
-  animate: true,
-  opacity: 0.75,
-  padding: 0,
-  allowClose: true,
-  overlayClickNext: false,
-  doneBtnText: "完成",
-  closeBtnText: "关闭",
-  nextBtnText: "下一步",
-  prevBtnText: "上一步"
-});
-
 const guide = () => {
-  driver.defineSteps(steps);
-  driver.start();
+  intro()
+    .setOptions({
+      steps: [
+        {
+          element: document.querySelector("#header-notice"),
+          title: "消息通知",
+          intro: "您可以在这里查看管理员发送的消息",
+          position: "left"
+        },
+        {
+          element: document.querySelector("#header-translation"),
+          title: "国际化",
+          intro: "您可以在这里进行语言切换",
+          position: "left"
+        },
+        {
+          element: document.querySelector(".set-icon"),
+          title: "项目配置",
+          intro: "您可以在这里查看项目配置",
+          position: "left"
+        },
+        {
+          element: document.querySelector(".tags-view"),
+          title: "多标签页",
+          intro: "这里是您访问过的页面的历史",
+          position: "bottom"
+        }
+      ]
+    })
+    .start();
 };
 </script>
 
@@ -69,20 +49,8 @@ const guide = () => {
         </span>
       </div>
     </template>
-    <el-button
-      type="primary"
-      style="margin-top: 10px"
-      @click.prevent.stop="guide"
-    >
+    <el-button type="primary" class="mt-[10px]" @click="guide">
       打开引导页
     </el-button>
   </el-card>
 </template>
-
-<style>
-div#driver-highlighted-element-stage,
-div#driver-page-overlay {
-  background: transparent !important;
-  outline: 5000px solid rgba(0, 0, 0, 0.75);
-}
-</style>