feat: guide page (#164)

* feat: add guide page

* perf: guide page

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>