✨ 引导
This commit is contained in:
刘嘉伟
parent
44088af063
commit
ad3167627b
@ -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,8 +66,7 @@
|
||||
"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",
|
||||
@ -74,6 +74,7 @@
|
||||
"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",
|
||||
|
||||
21
src/intro/index.ts
Normal file
21
src/intro/index.ts
Normal file
@ -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;
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user