feat: 添加基于ElTour实现的漫游式引导 (#958)

* feat: 添加基于ElTour实现的引导

src/style/element-plus.scss

@@ -64,7 +64,7 @@
   }
 }
 
-/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
+/* 全局覆盖element-plus的el-tour、el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
 .el-dialog__headerbtn,
 .el-message-box__headerbtn {
   &:hover {
@@ -75,6 +75,7 @@
 }
 
 .el-icon {
+  &.el-tour__close,
   &.el-dialog__close,
   &.el-drawer__close,
   &.el-message-box__close,

src/views/guide/index.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import intro from "intro.js";
 import "intro.js/minified/introjs.min.css";
 
+type GuideStep = {
+  element: string | HTMLElement;
+  title: string;
+  intro: string;
+  position: "left" | "right" | "top" | "bottom";
+};
+
 defineOptions({
   name: "Guide"
 });
 
-const onGuide = () => {
+const GUIDE_STEPS = [
-  intro()
-    .setOptions({
-      steps: [
   {
     element: document.querySelector(".sidebar-logo-container") as
       | string
@@ -19,17 +24,13 @@ const onGuide = () => {
     position: "left"
   },
   {
-          element: document.querySelector("#header-search") as
+    element: document.querySelector("#header-search") as string | HTMLElement,
-            | string
-            | HTMLElement,
     title: "搜索菜单",
     intro: "您可以在这里搜索想要查看的菜单",
     position: "left"
   },
   {
-          element: document.querySelector("#header-notice") as
+    element: document.querySelector("#header-notice") as string | HTMLElement,
-            | string
-            | HTMLElement,
     title: "消息通知",
     intro: "您可以在这里查看管理员发送的消息",
     position: "left"
@@ -54,10 +55,21 @@ const onGuide = () => {
     intro: "这里是您访问过的页面的历史",
     position: "bottom"
   }
-      ]
+] as Partial<GuideStep>[];
+
+const tourOpen = ref(false);
+
+const onGuide = () => {
+  intro()
+    .setOptions({
+      steps: GUIDE_STEPS
     })
     .start();
 };
+
+const onTour = () => {
+  tourOpen.value = true;
+};
 </script>
 
 <template>
@@ -69,6 +81,18 @@ const onGuide = () => {
         </span>
       </div>
     </template>
-    <el-button @click="onGuide"> 打开引导页 </el-button>
+    <el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
+    <el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
+
+    <el-tour v-model="tourOpen">
+      <el-tour-step
+        v-for="step in GUIDE_STEPS"
+        :key="step.title"
+        :target="() => step.element"
+        :title="step.title"
+        :description="step.intro"
+        :placement="step.position"
+      />
+    </el-tour>
   </el-card>
 </template>