featur: 新手引导

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^1.7.2",
     "copy-to-clipboard": "^3.3.3",
+    "driver.js": "^1.3.1",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "pinia": "^2.1.7",

src/App.vue

@@ -6,11 +6,12 @@ import ConfirmPopup from 'primevue/confirmpopup';
 import Dialog from 'primevue/dialog';
 import AdminLoginDialog from '@/components/dialog/AdminLoginDialog.vue';
 import ParseVerifyDialog from '@/components/dialog/ParseVerifyDialog.vue';
-import {computed} from 'vue';
+import {computed, watch} from 'vue';
 import {storeToRefs} from 'pinia';
 import GithubCorners from '@/components/GithubCorners.vue';
 import {router} from '@/router';
 import {stringIsEmpty} from '@/utils/string-is-empty';
+import {actionOne} from '@/utils/show-driver';
 const message = useMessage(); // 挂载对象
 
 const systemConfigStore = useSystemConfigStore();
@@ -39,6 +40,13 @@ window.addEventListener('beforeunload', (e) => {
 	e.preventDefault();
 	e.returnValue = true;
 });
+
+watch(visible, (val) => {
+	if (val) return;
+	if (window.localStorage.getItem('driver-step-done') !== 'true') {
+		actionOne();
+	}
+});
 </script>
 
 <template>

src/main.ts

@@ -9,6 +9,7 @@ import ToastService from 'primevue/toastservice';
 import ConfirmationService from 'primevue/confirmationservice';
 import {useMessage} from '@/hooks/useMessage';
 import packages from '@/../package.json';
+import 'driver.js/dist/driver.css';
 
 console.log(`%c Github: https://github.com/f4team-cn/f4pan-web %c F4Pan %c 版本：${packages.version}`, 'color: #3eaf7c; font-size: 16px;line-height:30px;', 'background: #35495e; padding: 4px; border-radius: 3px 0 0 3px; color: #fff', 'background: #41b883; padding: 4px; border-radius: 0 3px 3px 0; color: #fff');
 

src/pages/IndexPage.vue

@@ -10,6 +10,7 @@ import type {MenuItem} from 'primevue/menuitem';
 import {parseBaiduShareUrl} from '@/utils/parse-baidu-share-url';
 import {getRequestId} from '@/services/parse';
 import {useRouter} from 'vue-router';
+import {actionOne} from '@/utils/show-driver';
 
 const router = useRouter();
 const cacheStore = useCacheStore();
@@ -38,6 +39,14 @@ const items = ref<MenuItem[]>([
 				command: () => {
 					cacheStore.adminLogin = !cacheStore.adminLogin;
 				}
+			},
+			{
+				label: '新手教程',
+				icon: 'pi',
+				command: () => {
+					window.localStorage.removeItem('driver-step-done');
+					actionOne();
+				}
 			}
 		]
 	}
@@ -96,20 +105,21 @@ watch(url, value => {
 				</template>
 				<template #icons>
 					<Menu ref="menu" id="overlay_menu" :model="items" :popup="true"/>
-					<button class="p-panel-header-icon p-link mr-2" @click="toggle" :disabled="loading">
+					<button class="p-panel-header-icon p-link mr-2" @click="toggle" :disabled="loading"
+					        id="driver-step-menu">
 						<span class="pi pi-cog"></span>
 					</button>
 				</template>
 				<div class="p-fluid">
-					<div class="field">
+					<div class="field" id="driver-step-pan-url-input">
 						<label for="disk-url">网盘链接</label>
 						<InputText type="text" v-model="url"/>
 					</div>
-					<div class="field">
+					<div class="field" id="driver-step-pan-pwd-input">
 						<label for="disk-password">网盘密码</label>
 						<InputText type="text" v-model="pwd"/>
 					</div>
-					<Button @click="doParser" label="提交"/>
+					<Button @click="doParser" label="提交" id="driver-step-action-parse"/>
 				</div>
 			</Panel>
 		</div>

src/pages/Parsed.vue

@@ -23,6 +23,8 @@ import type {ParsedFile, ShareInfo, TreeFileInfo, WorkerRequestBody, WorkerRespo
 import type {TreeNode} from 'primevue/treenode';
 import {testJsonrpc} from '@/utils/test-jsonrpc';
 import {stringIsEmpty} from '@/utils/string-is-empty';
+import {actionTwo} from '@/utils/show-driver';
+import delay from '@/utils/delay';
 
 const route = useRoute();
 const router = useRouter();
@@ -51,6 +53,15 @@ const downloadType = ref<{
 const progress = ref(0);
 const results: ParsedFile[] = [];
 
+const onNextStep = async (element: Element | undefined) => {
+	if (element && element.id === 'driver-step-select-download-type') {
+		downloadType.value.code = 'jsonrpc';
+	} else {
+		downloadType.value.code = '';
+	}
+	await delay(120);
+};
+
 onMounted(async () => {
 	try {
 		const {data: response} = await getFileList(requestId, undefined);
@@ -61,6 +72,9 @@ onMounted(async () => {
 		diskRoot.value = root;
 		filesRef.value = tree;
 		blocked.value = false;
+		if (window.localStorage.getItem('driver-step-done') !== 'true') {
+			actionTwo(onNextStep);
+		}
 	} catch (e) {
 		console.error(e);
 		message.error('数据出错！请重新解析！');
@@ -186,7 +200,7 @@ worker.setCallback(onWorkerMessage);
 	<div class="layout-main-container">
 		<div class="layout-main">
 			<div class="grid">
-				<div class="col-12 lg:col-8 xl:col-8">
+				<div class="col-12 lg:col-8 xl:col-8" id="driver-step-file-list">
 					<Fieldset legend="文件列表">
 						<BlockUI :blocked="blocked">
 							<ProgressBar v-if="blocked || treeLoading" mode="indeterminate"
@@ -199,7 +213,7 @@ worker.setCallback(onWorkerMessage);
 					</Fieldset>
 				</div>
 				<div class="col-12 lg:col-4 xl:col-4">
-					<Fieldset legend="文件信息">
+					<Fieldset legend="文件信息" id="driver-step-file-count">
 						<ul class="list-none p-0 m-0">
 							<li class="flex flex-row align-items-center justify-content-between">
 								<div>
@@ -221,7 +235,7 @@ worker.setCallback(onWorkerMessage);
 							</li>
 						</ul>
 					</Fieldset>
-					<Fieldset legend="下载配置" class="mt-4 mb-4 p-fluid" toggleable :disabled="blocked">
+					<Fieldset legend="下载配置" class="mt-4 mb-4 p-fluid" toggleable :disabled="blocked" id="driver-step-select-download-type">
 						<div class="formgrid grid">
 							<div class="field col">
 								<label for="type">下载方式</label>
@@ -261,7 +275,7 @@ worker.setCallback(onWorkerMessage);
 									<InputText type="text" v-model="rpcRef.token"/>
 								</div>
 								<div class="field col">
-									<Button label="检测连通性" style="margin-top: 25px;"
+									<Button label="检测连通性" style="margin-top: 25px;" id="driver-step-test-json-rpc"
 									        @click="testConnectionRPC"></Button>
 								</div>
 							</div>
@@ -272,7 +286,7 @@ worker.setCallback(onWorkerMessage);
 						             :value="progress"></ProgressBar>
 						<Divider/>
 						<ButtonGroup>
-							<Button label="开始" icon="pi pi-check" :disabled="selectedFiles.length === 0"
+							<Button label="开始" icon="pi pi-check" :disabled="selectedFiles.length === 0" id="driver-step-done"
 							        @click="start"/>
 							<Button label="取消" icon="pi pi-times" :disabled="!starting" @click="stop"/>
 						</ButtonGroup>

src/utils/delay.ts

@@ -0,0 +1 @@
+export default (time: number) => new Promise(resolve => setTimeout(resolve, time));

src/utils/show-driver.ts

@@ -0,0 +1,102 @@
+import {driver, type DriveStep, type Config} from 'driver.js';
+
+type NextStep = (element: Element | undefined) => Promise<any>;
+
+const baseAction = (step: DriveStep[], next: NextStep | undefined, cfg: Config | {}) => {
+	const obj = driver({
+		onNextClick: (element, step, opts) => {
+			if (next) {
+				next(element).then(() => obj.moveNext());
+			} else {
+				obj.moveNext();
+			}
+		},
+		allowClose: true,
+		showProgress: true,
+		nextBtnText: '下一步',
+		prevBtnText: '上一步',
+		doneBtnText: '结束',
+		steps: step,
+		...cfg
+	});
+	return obj;
+};
+
+export const actionOne = () => {
+	const obj = baseAction([
+		{
+			element: '#driver-step-pan-url-input',
+			popover: {
+				title: '第一步',
+				description: '在这里输入网盘链接。'
+			}
+		},
+		{
+			element: '#driver-step-pan-pwd-input',
+			popover: {
+				title: '第二步',
+				description: '在这里输入网盘密码，一般不需要手动输入。'
+			}
+		},
+		{
+			element: '#driver-step-action-parse',
+			popover: {
+				title: '第三步',
+				description: '记得点击开始！'
+			}
+		},
+		{
+			element: '#driver-step-menu',
+			popover: {
+				title: '更多功能',
+				description: '这里可以再次查看公告呢！'
+			}
+		}
+	], undefined, {});
+	obj.drive();
+};
+
+export const actionTwo = (next: NextStep) => {
+	const obj = baseAction([
+		{
+			element: '#driver-step-file-list',
+			popover: {
+				title: '接下来，你需要选择需要的文件',
+				description: '在这里选择文件。'
+			}
+		},
+		{
+			element: '#driver-step-file-count',
+			popover: {
+				title: '查看文件信息',
+				description: '在这里查看你选择的文件数量及大小。'
+			}
+		},
+		{
+			element: '#driver-step-select-download-type',
+			popover: {
+				title: '非常好，接下来你需要选择适合你的下载方式',
+				description: 'Web 下载方式为获取下载链接，JSON RPC 为推送下载任务到你的 Aria2 客户端。'
+			}
+		},
+		{
+			element: '#driver-step-test-json-rpc',
+			popover: {
+				title: '检查连通性',
+				description: '如果你选择了 JSON RPC 的方式，你可以在这里检查连通性！'
+			}
+		},
+		{
+			element: '#driver-step-done',
+			popover: {
+				title: '最后',
+				description: '最后记得点击开始下载！恭喜你，你已经学会了如何使用本平台，如果需要再次查看，请在 首页 的 设置 按钮中查看。'
+			}
+		}
+	], next, {
+		onDestroyed: () => {
+			window.localStorage.setItem('driver-step-done', 'true');
+		}
+	});
+	obj.drive();
+};

src/worker/parse.ts

@@ -1,15 +1,17 @@
 import type {ParseFileResponse, WorkerRequestBody, WorkerResponse} from '@/types';
 import request from '@/utils/request';
+import delay from '@/utils/delay';
 
 const Main = self;
 
-Main.onmessage = function (e) {
+Main.onmessage = async function (e) {
 	const data = e.data || {};
 	if (data.type === 'add') {
 		const files = data.body || [];
 		const max = files.length || 0;
 		if (max === 0) return;
 		for (let i = 0; i < files.length; i++) {
+			await delay(1400);
 			doParse(files[i], i + 1, max);
 		}
 	}