feat: 页内的引导页

2024-08-05 15:49:56 +08:00 · 2024-08-05 15:49:56 +08:00 · 674e868691
commit 674e868691
parent 9f3438c847
6 changed files with 116 additions and 10 deletions
--- a/package.json
+++ b/package.json
@ -35,6 +35,7 @@
    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^1.6.8",
    "codemirror": "^6.0.1",
+    "driver.js": "^1.3.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -41,6 +41,9 @@ importers:
      codemirror:
        specifier: ^6.0.1
        version: 6.0.1(@lezer/common@1.2.1)
+      driver.js:
+        specifier: ^1.3.1
+        version: 1.3.1
      nprogress:
        specifier: ^0.2.0
        version: 0.2.0
@ -1899,6 +1902,9 @@ packages:
  downloadjs@1.4.7:
    resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}

+  driver.js@1.3.1:
+    resolution: {integrity: sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ==}
+
  ejs@3.1.10:
    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
    engines: {node: '>=0.10.0'}
@ -3730,8 +3736,8 @@ packages:
    peerDependencies:
      vue: ^3.0.5

-  vue-demi@0.14.7:
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
    engines: {node: '>=12'}
    hasBin: true
    peerDependencies:
@ -3741,8 +3747,8 @@ packages:
      '@vue/composition-api':
        optional: true

-  vue-demi@0.14.8:
-    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
+  vue-demi@0.14.7:
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
    engines: {node: '>=12'}
    hasBin: true
    peerDependencies:
@ -5137,7 +5143,7 @@ snapshots:
      '@types/web-bluetooth': 0.0.20
      '@vueuse/metadata': 10.11.0
      '@vueuse/shared': 10.11.0(vue@3.4.21(typescript@5.4.3))
-      vue-demi: 0.14.8(vue@3.4.21(typescript@5.4.3))
+      vue-demi: 0.14.10(vue@3.4.21(typescript@5.4.3))
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@ -5148,7 +5154,7 @@ snapshots:

  '@vueuse/shared@10.11.0(vue@3.4.21(typescript@5.4.3))':
    dependencies:
-      vue-demi: 0.14.8(vue@3.4.21(typescript@5.4.3))
+      vue-demi: 0.14.10(vue@3.4.21(typescript@5.4.3))
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@ -5818,6 +5824,8 @@ snapshots:

  downloadjs@1.4.7: {}

+  driver.js@1.3.1: {}
+
  ejs@3.1.10:
    dependencies:
      jake: 10.9.1
@ -7748,7 +7756,7 @@ snapshots:
    dependencies:
      codemirror: 6.0.1(@lezer/common@1.2.1)
      vue: 3.4.21(typescript@5.4.3)
-      vue-demi: 0.14.8(vue@3.4.21(typescript@5.4.3))
+      vue-demi: 0.14.10(vue@3.4.21(typescript@5.4.3))
    transitivePeerDependencies:
      - '@lezer/common'
      - '@vue/composition-api'
@ -7757,11 +7765,11 @@ snapshots:
    dependencies:
      vue: 3.4.21(typescript@5.4.3)

-  vue-demi@0.14.7(vue@3.4.21(typescript@5.4.3)):
+  vue-demi@0.14.10(vue@3.4.21(typescript@5.4.3)):
    dependencies:
      vue: 3.4.21(typescript@5.4.3)

-  vue-demi@0.14.8(vue@3.4.21(typescript@5.4.3)):
+  vue-demi@0.14.7(vue@3.4.21(typescript@5.4.3)):
    dependencies:
      vue: 3.4.21(typescript@5.4.3)

--- a/src/lang/modules/enUS.ts
+++ b/src/lang/modules/enUS.ts
@ -27,6 +27,7 @@ export default {
    ["print"]: "print",
    ["draggable"]: "draggable",
    ["editor"]: "editor",
+    ["newbie"]: "newbie",
    ["usre-center"]: "usre center",
    ["markdown"]: "Markdown",
    ["custom-instruction"]: "custom instruction",
--- a/src/lang/modules/zhCN.ts
+++ b/src/lang/modules/zhCN.ts
@ -27,6 +27,7 @@ export default {
    ["print"]: "打印",
    ["draggable"]: "拖拽",
    ["editor"]: "富文本",
+    ["newbie"]: "新手指引",
    ["usre-center"]: "用户中心",
    ["markdown"]: "Markdown",
    ["custom-instruction"]: "自定义指令",
--- a/src/router/route.ts
+++ b/src/router/route.ts
@ -355,6 +355,23 @@ export const dynamicRoutes: RouteRecordRaw[] = [
            },
            children: []
          },
+          {
+            path: "/common-component/newbie",
+            name: "newbie",
+            component: () => import("@/views/common-component/newbie/newbie.vue"),
+            meta: {
+              title: "newbie",
+              hide: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 5
+            },
+            children: []
+          },
          {
            path: "/common-component/usre-center",
            name: "usre-center",
@ -368,7 +385,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
              iframe: false,
              roles: ["admin"],
              icon: "icon-menu",
-              sort: 5
+              sort: 6
            },
            children: []
          }
--- a/src/views/common-component/newbie/newbie.vue
+++ b/src/views/common-component/newbie/newbie.vue
@ -0,0 +1,78 @@
+<template>
+  <div class="dc-page">
+    <a-space direction="vertical" :size="10">
+      <a-typography-text id="newbie-title-1"> SnowAdmin </a-typography-text>
+      <a-typography-text id="newbie-title-2"> 清晰的项目架构：结构清晰，优雅易懂。 </a-typography-text>
+      <a-typography-text id="newbie-title-3"> 严格的代码规范：严格遵循开发设计规范，保证代码的规范性。 </a-typography-text>
+      <a-typography-text id="newbie-title-4"> 内置国际化方案：轻松实现多语言支持。</a-typography-text>
+      <a-typography-text id="newbie-title-5"> 清新丰富的主题配置：内置多样的主题配置。</a-typography-text>
+    </a-space>
+    <div class="margin-top">
+      <a-button type="primary" @click="openNewbie">打开指引</a-button>
+    </div>
+    <div class="margin-top">新手指引，基于<a-link href="https://driver.employleague.cn/" target="_blank">driver.js</a-link></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
+
+const openNewbie = () => {
+  const driverObj = driver({
+    allowClose: true,
+    doneBtnText: "结束",
+    nextBtnText: "下一步",
+    prevBtnText: "上一步",
+    steps: [
+      {
+        element: "#newbie-title-1",
+        popover: {
+          title: "SnowAdmin",
+          description: "清新优雅的中后台管理模板",
+          side: "right"
+        }
+      },
+      {
+        element: "#newbie-title-2",
+        popover: {
+          title: "清晰的项目架构",
+          description: "结构清晰，优雅易懂",
+          side: "right"
+        }
+      },
+      {
+        element: "#newbie-title-3",
+        popover: {
+          title: "严格的代码规范",
+          description: "严格遵循开发设计规范，保证代码的规范性",
+          side: "left"
+        }
+      },
+      {
+        element: "#newbie-title-4",
+        popover: {
+          title: "内置国际化方案",
+          description: "轻松实现多语言支持",
+          side: "left"
+        }
+      },
+      {
+        element: "#newbie-title-5",
+        popover: {
+          title: "清新丰富的主题配置",
+          description: "内置多样的主题配置",
+          side: "left"
+        }
+      }
+    ]
+  });
+  driverObj.drive();
+};
+</script>
+
+<style lang="scss" scoped>
+.margin-top {
+  margin-top: $padding;
+}
+</style>