✨ 引导

package.json

@@ -43,6 +43,7 @@
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vueuse/core": "^9.13.0",
     "autoprefixer": "^10.4.15",
+    "canvas-confetti": "^1.9.0",
     "cssnano": "^6.0.1",
     "electron": "^26.6.10",
     "electron-builder": "^24.13.3",
@@ -65,15 +66,15 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-tsc": "^2.0.22",
-    "vue-types": "^5.1.1",
-    "canvas-confetti": "^1.9.0"
+    "vue-types": "^5.1.1"
   },
   "dependencies": {
     "@iarna/toml": "^2.2.5",
     "adm-zip": "^0.5.14",
     "animate.css": "^4.1.1",
     "electron-dl": "^3.5.1",
     "electron-log": "^5.1.7",
+    "intro.js": "^8.0.0-beta.1",
     "isbinaryfile": "4.0.10",
     "js-base64": "^3.7.7",
     "tar": "^6.2.0",

src/intro/index.ts

@@ -0,0 +1,21 @@
+import introJs from "intro.js";
+import "intro.js/introjs.css";
+
+const intro = introJs.tour();
+// 更多配置参数请到官方文档查看
+intro.setOptions({
+  nextLabel: "下一个", // 下一个按钮文字
+  prevLabel: "上一个", // 上一个按钮文字
+  // skipLabel: '跳过',    // 跳过按钮文字
+  doneLabel: "🎉 立即体验", // 完成按钮文字
+  autoPosition: false,
+  tooltipPosition: "right",
+  exitOnOverlayClick: false,
+  // hidePrev: true,       // 在第一步中是否隐藏上一个按钮
+  // hideNext: true,       // 在最后一步中是否隐藏下一个按钮
+  // exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍
+  // showStepNumbers: false,     // 是否显示红色圆圈的步骤编号
+  // showBullets: false          // 是否显示面板指示点
+});
+
+export default intro;

src/layout/compoenets/LeftMenu.vue

@@ -1,16 +1,47 @@
 <script lang="ts" setup>
-import {computed, defineComponent, onMounted, ref} from "vue";
+import { computed, defineComponent, onMounted, ref } from "vue";
 import router from "@/router";
-import {RouteRecordRaw} from "vue-router";
-import pkg from '../../../package.json';
-
+import { RouteRecordRaw } from "vue-router";
+import pkg from "../../../package.json";
+import Intro from "@/intro";
+import "intro.js/introjs.css";
+import confetti from "canvas-confetti/src/confetti.js";
 
 defineComponent({
   name: "AppMain"
 });
 
 const routes = ref<Array<RouteRecordRaw>>([]);
-
+const guideSteps = ref({
+  Home: {
+    step: "1",
+    intro: "此功能用于控制frpc的连接状态，您可以轻松地断开或重新连接。"
+  },
+  Proxy: {
+    step: "2",
+    intro:
+      "在这里，您可以方便地配置和管理代理设置。无论是添加、修改还是删除代理，您都可以轻松完成。"
+  },
+  Download: {
+    step: "3",
+    intro: "通过此功能，您可以快速下载最新版本的frp。"
+  },
+  Config: {
+    step: "4",
+    intro:
+      "此功能允许您设置软件的各种配置选项，包括连接方式等。根据您的需求进行个性化设置，以优化使用体验。"
+  },
+  Logger: {
+    step: "5",
+    intro:
+      "在日志查看功能中，您可以实时查看FRP连接的日志信息。这有助于您监控连接状态，及时排查可能出现的问题。"
+  },
+  Version: {
+    step: "6",
+    intro:
+      "通过此功能，您可以查看当前安装的Frpc-Desktop版本，并检查是否有可用更新。"
+  }
+});
 const currentRoute = computed(() => {
   return router.currentRoute.value;
 });
@@ -32,38 +63,66 @@ const handleOpenGitHubReleases = () => {
   // ipcRenderer.send("github.openReleases")
   router.push({
     name: "About"
-  })
-}
-
+  });
+};
 
 onMounted(() => {
   routes.value = router.options.routes[0].children?.filter(
-      f => !f.meta?.hidden
+    f => !f.meta?.hidden
   ) as Array<RouteRecordRaw>;
+
+  if (!localStorage.getItem("guide")) {
+    // 开始
+    Intro.onBeforeExit(function () {
+      // 礼花
+      confetti({
+        zIndex: 12002,
+        particleCount: 200,
+        spread: 70,
+        origin: { y: 0.6 }
+      });
+      localStorage.setItem("guide", new Date().getTime().toString());
+    }).start();
+  }
 });
 </script>
 
 <template>
   <div class="left-menu-container drop-shadow-xl">
     <div class="logo-container">
-      <img src="/logo/only/128x128.png" class="logo animate__animated animate__flip" alt="Logo"/>
+      <img
+        src="/logo/only/128x128.png"
+        class="logo animate__animated animate__flip"
+        alt="Logo"
+      />
     </div>
     <ul class="menu-container">
       <!--      enter-active-class="animate__animated animate__bounceIn"-->
       <!--      leave-active-class="animate__animated animate__fadeOut"-->
       <li
-          class="menu animate__animated"
-          :class="currentRoute?.name === r.name ? 'menu-selected' : ''"
-          v-for="r in routes"
-          :key="r.name"
-          @click="handleMenuChange(r)"
+        :data-step="guideSteps[r.name]?.step"
+        :data-intro="guideSteps[r.name]?.intro"
+        :data-disable-interaction="true"
+        class="menu animate__animated"
+        :class="currentRoute?.name === r.name ? 'menu-selected' : ''"
+        v-for="r in routes"
+        :key="r.name"
+        @click="handleMenuChange(r)"
       >
-        <IconifyIconOffline class="animate__animated" :icon="r?.meta?.icon as string"></IconifyIconOffline>
+        <IconifyIconOffline
+          class="animate__animated"
+          :icon="r?.meta?.icon as string"
+        ></IconifyIconOffline>
       </li>
     </ul>
-    <div class="version mb-2 animate__animated" @click="handleOpenGitHubReleases">
+    <div
+      class="version mb-2 animate__animated"
+      @click="handleOpenGitHubReleases"
+      :data-step="guideSteps.Version?.step"
+      :data-intro="guideSteps.Version?.intro"
+      data-position="top"
+    >
       {{ pkg.version }}
     </div>
-
   </div>
 </template>