feat: guide page (#164)

* feat: add guide page

* perf: guide page

package.json

@@ -43,6 +43,7 @@
     "cropperjs": "^1.5.11",
     "css-color-function": "^1.3.3",
     "dayjs": "^1.10.7",
+    "driver.js": "^0.9.8",
     "echarts": "^5.2.1",
     "element-plus": "1.2.0-beta.6",
     "element-resize-detector": "^1.2.3",

pnpm-lock.yaml

@@ -36,6 +36,7 @@ specifiers:
   cross-env: 7.0.3
   css-color-function: ^1.3.3
   dayjs: ^1.10.7
+  driver.js: ^0.9.8
   echarts: ^5.2.1
   element-plus: 1.2.0-beta.6
   element-resize-detector: ^1.2.3
@@ -104,6 +105,7 @@ dependencies:
   cropperjs: 1.5.12
   css-color-function: 1.3.3
   dayjs: 1.10.7
+  driver.js: 0.9.8
   echarts: 5.2.2
   element-plus: 1.2.0-beta.6_vue@3.2.24
   element-resize-detector: 1.2.3
@@ -2960,6 +2962,13 @@ packages:
       unidragger: 2.3.1
     dev: false
 
+  /driver.js/0.9.8:
+    resolution:
+      {
+        integrity: sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q==
+      }
+    dev: false
+
   /echarts/5.2.2:
     resolution:
       {

src/layout/components/navbar.vue

@@ -73,11 +73,11 @@ function translationEn() {
 
     <div class="vertical-header-right">
       <!-- 通知 -->
-      <Notice />
+      <Notice id="header-notice" />
       <!-- 全屏 -->
-      <screenfull v-show="!deviceDetection()" />
+      <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
-      <el-dropdown trigger="click">
+      <el-dropdown id="header-translation" trigger="click">
         <globalization />
         <template #dropdown>
           <el-dropdown-menu class="translation">

src/layout/components/sidebar/horizontal.vue

@@ -140,11 +140,11 @@ onMounted(() => {
     </el-menu>
     <div class="horizontal-header-right">
       <!-- 通知 -->
-      <Notice />
+      <Notice id="header-notice" />
       <!-- 全屏 -->
-      <screenfull v-show="!deviceDetection()" />
+      <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
-      <el-dropdown trigger="click">
+      <el-dropdown id="header-translation" trigger="click">
         <globalization />
         <template #dropdown>
           <el-dropdown-menu class="translation">

src/plugins/element-plus/index.ts

@@ -115,7 +115,8 @@ import {
   ArrowDown,
   Close,
   CloseBold,
-  Bell
+  Bell,
+  Guide
 } from "@element-plus/icons-vue";
 
 // Icon
@@ -134,7 +135,8 @@ export const iconComponents = [
   ArrowDown,
   Close,
   CloseBold,
-  Bell
+  Bell,
+  Guide
 ];
 
 export function useElementPlus(app: App) {

src/plugins/i18n/config.ts

@@ -44,6 +44,7 @@ export const menusConfig = {
       permissionButton: "按钮权限",
       hstabs: "标签页操作",
       hsMenuTree: "菜单树结构",
+      hsguide: "引导页",
       externalLink: "外链"
     }
   },
@@ -82,6 +83,7 @@ export const menusConfig = {
       permissionButton: "Button Permission",
       hstabs: "Tabs Operate",
       hsMenuTree: "Menu Tree",
+      hsguide: "Guide",
       externalLink: "External Link"
     }
   }

src/router/modules/guide.ts

@@ -0,0 +1,29 @@
+import Layout from "/@/layout/index.vue";
+
+const guideRouter = {
+  path: "/guide",
+  name: "reGuide",
+  component: Layout,
+  redirect: "/guide/index",
+  meta: {
+    icon: "Guide",
+    title: "message.hsguide",
+    i18n: true,
+    showLink: true,
+    rank: 10
+  },
+  children: [
+    {
+      path: "/guide/index",
+      name: "reGuide",
+      component: () => import("/@/views/guide/index.vue"),
+      meta: {
+        title: "message.hsguide",
+        showLink: true,
+        i18n: true
+      }
+    }
+  ]
+};
+
+export default guideRouter;

src/router/modules/index.ts

@@ -8,6 +8,7 @@ import externalLink from "./externalLink";
 import flowChartRouter from "./flowchart";
 import remainingRouter from "./remaining";
 import componentsRouter from "./components";
+import guideRouter from "./guide";
 import { RouteRecordRaw, RouteComponent } from "vue-router";
 
 import {
@@ -25,7 +26,8 @@ const routes = [
   editorRouter,
   menuTreeRouter,
   flowChartRouter,
-  componentsRouter
+  componentsRouter,
+  guideRouter
 ];
 
 // 导出处理后的静态路由（三级及以上的路由全部拍成二级）

src/views/guide/index.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+export default {
+  name: "reGuide"
+};
+</script>
+
+<script setup lang="ts">
+import Driver from "driver.js";
+import "driver.js/dist/driver.min.css";
+
+// 步骤
+const steps = [
+  {
+    element: "#header-notice",
+    popover: {
+      title: "消息通知",
+      description: "你可以在这里查看管理员发送的消息",
+      position: "left"
+    }
+  },
+  {
+    element: "#header-screenfull",
+    popover: {
+      title: "全屏",
+      description: "你可以在这里进行全屏切换",
+      position: "left"
+    }
+  },
+  {
+    element: "#header-translation",
+    popover: {
+      title: "国际化",
+      description: "你可以在这里进行语言切换",
+      position: "left"
+    }
+  },
+  {
+    element: ".el-icon-setting",
+    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();
+};
+</script>
+
+<template>
+  <div>
+    <div style="font-size: 18px">
+      引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能
+    </div>
+    <el-button
+      type="primary"
+      style="margin-top: 10px"
+      @click.prevent.stop="guide"
+    >
+      打开引导页
+    </el-button>
+  </div>
+</template>
+
+<style>
+div#driver-highlighted-element-stage,
+div#driver-page-overlay {
+  background: transparent !important;
+  outline: 5000px solid rgba(0, 0, 0, 0.75);
+}
+</style>