feat: 页内的引导页

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",

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:
+  vue-demi@0.14.10:
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+    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:
+  vue-demi@0.14.7:
-    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
+    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)
 

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",

src/lang/modules/zhCN.ts

@@ -27,6 +27,7 @@ export default {
     ["print"]: "打印",
     ["draggable"]: "拖拽",
     ["editor"]: "富文本",
+    ["newbie"]: "新手指引",
     ["usre-center"]: "用户中心",
     ["markdown"]: "Markdown",
     ["custom-instruction"]: "自定义指令",

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: []
           }

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>