feat(guide): 添加新手教程

package.json

@@ -25,6 +25,7 @@
     "vue": "^3.5.12",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5",
+    "vue3-intro-step": "^1.0.5",
     "vxe-pc-ui": "4.2.5",
     "vxe-table": "4.8.13",
     "vxe-table-plugin-export-xlsx": "^4.0.4",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       vue-router:
         specifier: ^4.4.5
         version: 4.4.5(vue@3.5.12(typescript@5.5.4))
+      vue3-intro-step:
+        specifier: ^1.0.5
+        version: 1.0.5(vue@3.5.12(typescript@5.5.4))
       vxe-pc-ui:
         specifier: 4.2.5
         version: 4.2.5(vue@3.5.12(typescript@5.5.4))
@@ -3557,6 +3560,12 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-intro-step@1.0.5:
+    resolution: {integrity: sha512-MV+Y2VZCRVWGFgmwxaAFq0opANe7Yj/xEyL5Zox2z+8JNbU1Y6vkbGivT+yKbqc4o+Q/ui0z45zizI7GCouDmw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: ^3.0.5
+
   vue@3.5.12:
     resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
     peerDependencies:
@@ -7563,6 +7572,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.5.4)
 
+  vue3-intro-step@1.0.5(vue@3.5.12(typescript@5.5.4)):
+    dependencies:
+      vue: 3.5.12(typescript@5.5.4)
+
   vue@3.5.12(typescript@5.5.4):
     dependencies:
       '@vue/compiler-dom': 3.5.12

src/components/common/LayoutSetting.vue

@@ -10,7 +10,7 @@
   <div>
     <n-tooltip trigger="hover" placement="left">
       <template #trigger>
-        <div class="f-c-c rounded-4 bg-primary p-8" @click="modalRef.open()">
+        <div id="layout-setting" class="f-c-c rounded-4 bg-primary p-8" @click="modalRef.open()">
           <i class="i-fe:settings cursor-pointer bg-white text-20" />
         </div>
       </template>

src/components/common/ThemeSetting.vue

@@ -2,6 +2,7 @@
   <n-tooltip trigger="hover">
     <template #trigger>
       <n-color-picker
+        id="theme-setting"
         class="mr-16 h-32 w-32"
         :value="appStore.primaryColor"
         :swatches="primaryColors"

src/components/common/ToggleTheme.vue

@@ -1,5 +1,6 @@
 <template>
   <i
+    id="toggleTheme"
     class="mr-16 cursor-pointer"
     :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
     @click="toggleDark"

src/layouts/components/BeginnerGuide.vue

@@ -0,0 +1,78 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <i
+        class="i-fe:beginner mr-16 cursor-pointer text-20"
+        @click="show = true"
+      />
+    </template>
+    新手教程
+  </n-tooltip>
+
+  <Vue3IntroStep
+    v-model:show="show"
+    :config="config"
+  />
+</template>
+
+<script setup>
+import Vue3IntroStep from 'vue3-intro-step'
+
+const show = shallowRef(false)
+
+const config = {
+  backgroundOpacity: 0.8,
+  titleStyle: {
+    textAlign: 'center',
+    fontSize: '19px',
+  },
+  contentStyle: {
+    textAlign: 'center',
+    fontSize: '15px',
+  },
+  tips: [
+    {
+      el: '#toggleTheme',
+      tipPosition: 'bottom',
+      title: '切换系统主题',
+      content: '一键开启护眼模式',
+    },
+    {
+      el: '#fullscreen',
+      tipPosition: 'bottom',
+      title: '全屏/退出全屏',
+      content: '一键开启全屏',
+    },
+    {
+      el: '#theme-setting',
+      tipPosition: 'bottom',
+      title: '设置主题色',
+      content: '调整为你喜欢的主题色',
+    },
+    {
+      el: '#user-dropdown',
+      tipPosition: 'bottom',
+      title: '个人中心',
+      content: '查看个人资料和退出系统',
+    },
+    {
+      el: '#menu-collapse',
+      tipPosition: 'bottom',
+      title: '展开/收起菜单',
+      content: '一键展开/收起菜单',
+    },
+    {
+      el: '#top-tab',
+      tipPosition: 'bottom',
+      title: '标签栏',
+      content: '鼠标滚轮滑动可调整至最佳视野',
+    },
+    {
+      el: '#layout-setting',
+      tipPosition: 'left',
+      title: '调整系统布局',
+      content: '将系统布局调整为你喜欢的样子',
+    },
+  ],
+}
+</script>

src/layouts/components/Fullscreen.vue

@@ -1,5 +1,6 @@
 <template>
   <i
+    id="fullscreen"
     class="mr-16 cursor-pointer"
     :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
     @click="toggle"

src/layouts/components/MenuCollapse.vue

@@ -8,6 +8,7 @@
 
 <template>
   <div
+    id="menu-collapse"
     class="f-c-c cursor-pointer rounded-4 p-6 text-22 transition-all-300 auto-bg-hover"
     @click="appStore.switchCollapsed"
   >

src/layouts/components/UserAvatar.vue

@@ -8,7 +8,7 @@
 
 <template>
   <n-dropdown :options="options" @select="handleSelect">
-    <div class="flex cursor-pointer items-center">
+    <div id="user-dropdown" class="flex cursor-pointer items-center">
       <n-avatar round :size="36" :src="userStore.avatar" />
       <div v-if="userStore.userInfo" class="ml-12 flex-col flex-shrink-0 items-center">
         <span class="text-14">{{ userStore.nickName ?? userStore.username }}</span>

src/layouts/components/index.js

@@ -1,3 +1,4 @@
+export { default as BeginnerGuide } from './BeginnerGuide.vue'
 export { default as BreadCrumb } from './BreadCrumb.vue'
 export { default as Fullscreen } from './Fullscreen.vue'
 export { default as MenuCollapse } from './MenuCollapse.vue'

src/layouts/components/tab/index.vue

@@ -7,7 +7,7 @@
  --------------------------------->
 
 <template>
-  <div>
+  <div id="top-tab">
     <n-tabs
       :value="tabStore.activeTab"
       :closable="tabStore.tabs.length > 1"

src/layouts/full/header/index.vue

@@ -9,10 +9,10 @@
 <template>
   <AppCard class="flex items-center px-12" border-b="1px solid light_border dark:dark_border">
     <MenuCollapse />
-
     <BreadCrumb />
 
     <div class="ml-auto flex flex-shrink-0 items-center px-12 text-18">
+      <BeginnerGuide />
       <ToggleTheme />
 
       <Fullscreen />
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ToggleTheme } from '@/components'
-import { BreadCrumb, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
+import { BeginnerGuide, BreadCrumb, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
 
 function handleLinkClick(link) {
   window.open(link)

src/layouts/normal/header/index.vue

@@ -9,12 +9,12 @@
 <template>
   <AppCard class="flex items-center px-12" border-b="1px solid light_border dark:dark_border">
     <MenuCollapse />
-
     <AppTab class="w-0 flex-1 px-12" />
 
     <span class="mx-6 opacity-20">|</span>
 
     <div class="flex flex-shrink-0 items-center px-12 text-18">
+      <BeginnerGuide />
       <ToggleTheme />
 
       <Fullscreen />
@@ -37,7 +37,7 @@
 
 <script setup>
 import { ToggleTheme } from '@/components'
-import { AppTab, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
+import { AppTab, BeginnerGuide, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
 
 function handleLinkClick(link) {
   window.open(link)