From d83f28dbd3c05394602b9d6d7427df261ad27080 Mon Sep 17 00:00:00 2001
From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com>
Date: Tue, 5 Mar 2024 22:20:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9F=BA=E4=BA=8E`El?=
 =?UTF-8?q?Tour`=E5=AE=9E=E7=8E=B0=E7=9A=84=E6=BC=AB=E6=B8=B8=E5=BC=8F?=
 =?UTF-8?q?=E5=BC=95=E5=AF=BC=20(#958)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 添加基于ElTour实现的引导
---
 src/style/element-plus.scss |   3 +-
 src/views/guide/index.vue   | 118 ++++++++++++++++++++++--------------
 2 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss
index 89a103130..165008f6f 100644
--- a/src/style/element-plus.scss
+++ b/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,
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index a47f74701..38e92af15 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,63 +1,75 @@
 <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 GUIDE_STEPS = [
+  {
+    element: document.querySelector(".sidebar-logo-container") as
+      | string
+      | HTMLElement,
+    title: "项目名称和Logo",
+    intro: "您可以在这里设置项目名称和Logo",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-search") as string | HTMLElement,
+    title: "搜索菜单",
+    intro: "您可以在这里搜索想要查看的菜单",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-notice") as string | HTMLElement,
+    title: "消息通知",
+    intro: "您可以在这里查看管理员发送的消息",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-translation") as
+      | string
+      | HTMLElement,
+    title: "国际化",
+    intro: "您可以在这里进行语言切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".set-icon") as string | HTMLElement,
+    title: "项目配置",
+    intro: "您可以在这里查看项目配置",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".tags-view") as string | HTMLElement,
+    title: "多标签页",
+    intro: "这里是您访问过的页面的历史",
+    position: "bottom"
+  }
+] as Partial<GuideStep>[];
+
+const tourOpen = ref(false);
+
 const onGuide = () => {
   intro()
     .setOptions({
-      steps: [
-        {
-          element: document.querySelector(".sidebar-logo-container") as
-            | string
-            | HTMLElement,
-          title: "项目名称和Logo",
-          intro: "您可以在这里设置项目名称和Logo",
-          position: "left"
-        },
-        {
-          element: document.querySelector("#header-search") as
-            | string
-            | HTMLElement,
-          title: "搜索菜单",
-          intro: "您可以在这里搜索想要查看的菜单",
-          position: "left"
-        },
-        {
-          element: document.querySelector("#header-notice") as
-            | string
-            | HTMLElement,
-          title: "消息通知",
-          intro: "您可以在这里查看管理员发送的消息",
-          position: "left"
-        },
-        {
-          element: document.querySelector("#header-translation") as
-            | string
-            | HTMLElement,
-          title: "国际化",
-          intro: "您可以在这里进行语言切换",
-          position: "left"
-        },
-        {
-          element: document.querySelector(".set-icon") as string | HTMLElement,
-          title: "项目配置",
-          intro: "您可以在这里查看项目配置",
-          position: "left"
-        },
-        {
-          element: document.querySelector(".tags-view") as string | HTMLElement,
-          title: "多标签页",
-          intro: "这里是您访问过的页面的历史",
-          position: "bottom"
-        }
-      ]
+      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>