From efb742beb9edb66dc5d48c7b0a9f0775d0175f7f Mon Sep 17 00:00:00 2001
From: leipu <200684632@qq.com>
Date: Fri, 22 Nov 2024 12:33:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(guide):=20=E6=B7=BB=E5=8A=A0=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=87=E5=BC=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   3 +-
 src/components/common/LayoutSetting.vue  |   2 +-
 src/components/common/ThemeSetting.vue   |   1 +
 src/components/common/ToggleTheme.vue    |   1 +
 src/layouts/components/BeginnerGuide.vue | 138 +++++++++++++++++++++++
 src/layouts/components/Fullscreen.vue    |   1 +
 src/layouts/components/MenuCollapse.vue  |   1 +
 src/layouts/components/UserAvatar.vue    |   2 +-
 src/layouts/components/index.js          |   1 +
 src/layouts/components/tab/index.vue     |   2 +-
 src/layouts/full/header/index.vue        |   4 +-
 src/layouts/normal/header/index.vue      |   4 +-
 12 files changed, 154 insertions(+), 6 deletions(-)
 create mode 100644 src/layouts/components/BeginnerGuide.vue

diff --git a/package.json b/package.json
index fcbab19..384e8ff 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,8 @@
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.9",
     "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-devtools": "^7.5.2"
+    "vite-plugin-vue-devtools": "^7.5.2",
+    "vue3-intro-step": "^1.0.5"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
diff --git a/src/components/common/LayoutSetting.vue b/src/components/common/LayoutSetting.vue
index 462b7c4..c540377 100644
--- a/src/components/common/LayoutSetting.vue
+++ b/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>
diff --git a/src/components/common/ThemeSetting.vue b/src/components/common/ThemeSetting.vue
index dd0abb4..17a7df5 100644
--- a/src/components/common/ThemeSetting.vue
+++ b/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"
diff --git a/src/components/common/ToggleTheme.vue b/src/components/common/ToggleTheme.vue
index 31b07ec..2e65aaa 100644
--- a/src/components/common/ToggleTheme.vue
+++ b/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"
diff --git a/src/layouts/components/BeginnerGuide.vue b/src/layouts/components/BeginnerGuide.vue
new file mode 100644
index 0000000..cc597a7
--- /dev/null
+++ b/src/layouts/components/BeginnerGuide.vue
@@ -0,0 +1,138 @@
+<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
+    ref="myIntroStep"
+    v-model:show="show"
+    class="beginner-guide"
+    :config="config"
+  >
+    <template #prev="{ tipItem, index }">
+      <NButton type="primary" color="#fff" text-color="#fff" ghost round size="small" @click="prev(tipItem, index)">
+        上一步
+      </NButton>
+    </template>
+    <template #next="{ tipItem }">
+      <NButton type="primary" color="#fff" text-color="#fff" ghost round size="small" @click="next(tipItem)">
+        下一步
+      </NButton>
+    </template>
+
+    <template #skip>
+      <NButton type="primary" color="#fff" text-color="#fff" ghost round size="small" @click="skip">
+        跳过
+      </NButton>
+    </template>
+
+    <template #done>
+      <NButton type="primary" color="#fff" text-color="#fff" ghost round size="small" @click="done">
+        完成
+      </NButton>
+    </template>
+  </Vue3IntroStep>
+</template>
+
+<script setup>
+import { lStorage } from '@/utils'
+import Vue3IntroStep from 'vue3-intro-step'
+
+const myIntroStep = shallowRef(null)
+const show = shallowRef(false)
+const config = {
+  backgroundOpacity: 0.8,
+  titleStyle: {
+    textAlign: 'left',
+    fontSize: '18px',
+  },
+  contentStyle: {
+    textAlign: 'left',
+    fontSize: '14px',
+  },
+  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: '将系统布局调整为你喜欢的样子',
+    },
+  ],
+}
+
+onMounted(() => {
+  if (lStorage.get('beginner-guide') === true)
+    return
+  show.value = true
+})
+
+function skip() {
+  lStorage.set('beginner-guide', true)
+  show.value = false
+}
+
+function done() {
+  lStorage.set('beginner-guide', true)
+  show.value = false
+}
+
+function next() {
+  // tipItem当前的提示项信息
+  // 调用vue3-intro-step的next方法 手动触发下一步
+  myIntroStep.value.next()
+}
+function prev() {
+  // 调用vue3-intro-step的prev方法 手动触发上一步
+  myIntroStep.value.prev()
+}
+</script>
+
+<style lang="scss" scoped>
+.beginner-guide {
+  .n-button {
+    margin-right: 12px;
+  }
+}
+</style>
diff --git a/src/layouts/components/Fullscreen.vue b/src/layouts/components/Fullscreen.vue
index 7ccc3d4..fb141d5 100644
--- a/src/layouts/components/Fullscreen.vue
+++ b/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"
diff --git a/src/layouts/components/MenuCollapse.vue b/src/layouts/components/MenuCollapse.vue
index 1ec6d30..71b6894 100644
--- a/src/layouts/components/MenuCollapse.vue
+++ b/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"
   >
diff --git a/src/layouts/components/UserAvatar.vue b/src/layouts/components/UserAvatar.vue
index 3beccca..95c120d 100644
--- a/src/layouts/components/UserAvatar.vue
+++ b/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>
diff --git a/src/layouts/components/index.js b/src/layouts/components/index.js
index 674206b..62ac056 100644
--- a/src/layouts/components/index.js
+++ b/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'
diff --git a/src/layouts/components/tab/index.vue b/src/layouts/components/tab/index.vue
index 0b99d7e..ca42c47 100644
--- a/src/layouts/components/tab/index.vue
+++ b/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"
diff --git a/src/layouts/full/header/index.vue b/src/layouts/full/header/index.vue
index 45850d7..fccd9d7 100644
--- a/src/layouts/full/header/index.vue
+++ b/src/layouts/full/header/index.vue
@@ -13,6 +13,8 @@
     <BreadCrumb />
 
     <div class="ml-auto flex flex-shrink-0 items-center px-12 text-18">
+      <BeginnerGuide />
+
       <ToggleTheme />
 
       <Fullscreen />
@@ -35,7 +37,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)
diff --git a/src/layouts/normal/header/index.vue b/src/layouts/normal/header/index.vue
index 9590e8f..0b43544 100644
--- a/src/layouts/normal/header/index.vue
+++ b/src/layouts/normal/header/index.vue
@@ -15,6 +15,8 @@
     <span class="mx-6 opacity-20">|</span>
 
     <div class="flex flex-shrink-0 items-center px-12 text-18">
+      <BeginnerGuide />
+
       <ToggleTheme />
 
       <Fullscreen />
@@ -37,7 +39,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)