xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加新手引导

Browse Source
This commit is contained in:
Gsh
2025-11-17 01:05:57 +08:00
parent 7919383be3
commit 695bd56a27
16 changed files with 734 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
Yi.Ai.Vue3/src/hooks/useGuideTour.ts Normal file
View File

@@ -0,0 +1,335 @@
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
import { useGuideTourStore } from '@/stores';
// 引导步骤接口
interface TourStep {
element: string;
popover: {
title: string;
description: string;
side?: 'top' | 'right' | 'bottom' | 'left';
align?: 'start' | 'center' | 'end';
};
onHighlightStarted?: () => void;
onDeselected?: () => void;
}
export function useGuideTour() {
const guideTourStore = useGuideTourStore();
// 创建 driver 实例
const driverInstance = ref<ReturnType<typeof driver> | null>(null);
// 初始化 driver
function initDriver() {
driverInstance.value = driver({
showProgress: true,
animate: true,
allowClose: true,
overlayClickNext: false,
stagePadding: 10,
stageRadius: 8,
popoverClass: 'guide-tour-popover',
nextBtnText: '下一步',
prevBtnText: '上一步',
doneBtnText: '完成',
progressText: '{{current}} / {{total}}',
onDestroyed: () => {
guideTourStore.setCurrentPhase('idle');
},
});
}
// Header 区域引导步骤（包含聊天功能）
const headerSteps: TourStep[] = [
{
element: '[data-tour="tutorial-btn"]',
popover: {
title: '新手教程',
description: '欢迎使用YiXinAI！点击这里可以随时重新查看新手引导教程，帮助您快速了解系统功能。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="model-select"]',
popover: {
title: '模型选择',
description: '点击这里可以切换不同的AI模型，每个模型有不同的特点和能力。VIP用户可以使用所有高级模型。',
side: 'top',
align: 'start',
},
},
{
element: '[data-tour="chat-sender"]',
popover: {
title: '对话输入框',
description: '在这里输入您的问题或指令，按回车或点击发送按钮即可与AI对话。支持语音输入和文件上传。',
side: 'top',
align: 'center',
},
},
{
element: '[data-tour="announcement-btn"]',
popover: {
title: '公告/活动',
description: '这里会显示系统公告和最新活动信息，请及时查看以获取重要通知和福利活动。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="ai-tutorial-link"]',
popover: {
title: 'AI使用教程',
description: '点击这里可以跳转到YiXinAI玩法指南专栏，学习更多AI使用技巧和最佳实践。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="buy-btn"]',
popover: {
title: '立即购买',
description: '点击这里可以购买Token套餐或升级VIP会员，享受更多专属服务和权益。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="user-avatar"]',
popover: {
title: '用户中心',
description: '点击头像可以进入用户中心，管理您的账户信息、查看使用统计、API密钥等。接下来将为您详细介绍用户中心的各项功能。',
side: 'bottom',
align: 'end',
},
},
];
// 用户中心弹窗引导步骤
const userCenterSteps: TourStep[] = [
{
element: '[data-tour="user-nav-menu"]',
popover: {
title: '导航菜单',
description: '左侧是功能导航菜单，您可以切换不同的功能模块。接下来我们将逐一介绍各个功能。',
side: 'right',
align: 'start',
},
},
{
element: '[data-tour="nav-user"]',
popover: {
title: '用户信息',
description: '查看和修改您的个人信息，包括头像、昵称等。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('user');
},
},
{
element: '[data-tour="nav-apiKey"]',
popover: {
title: 'API密钥',
description: '管理您的API密钥，用于第三方接入和开发集成。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('apiKey');
},
},
{
element: '[data-tour="nav-rechargeLog"]',
popover: {
title: '充值记录',
description: '查看您的充值历史和交易记录，了解消费明细。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('rechargeLog');
},
},
{
element: '[data-tour="nav-usageStatistics"]',
popover: {
title: '用量统计',
description: '查看您的AI模型使用情况和消费统计，掌握使用详情。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('usageStatistics');
},
},
{
element: '[data-tour="nav-premiumService"]',
popover: {
title: '尊享服务',
description: '了解VIP会员专属特权和服务，我们将详细介绍这个页面的功能。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('premiumService');
},
},
{
element: '[data-tour="premium-package-info"]',
popover: {
title: '套餐信息',
description: '这里显示您的尊享服务套餐详情，包括总额度、已使用额度、剩余额度等信息。',
side: 'left',
align: 'start',
},
},
{
element: '[data-tour="premium-usage-list"]',
popover: {
title: '额度明细列表',
description: '查看您的额度使用明细记录，包括每次使用的时间、消耗的额度等详细信息。',
side: 'left',
align: 'start',
},
},
{
element: '[data-tour="nav-dailyTask"]',
popover: {
title: '每日任务',
description: '完成每日任务获取额外奖励，提升您的使用体验。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('dailyTask');
},
},
{
element: '[data-tour="nav-cardFlip"]',
popover: {
title: '每周邀请',
description: '邀请好友加入，获得丰厚奖励。接下来将详细介绍这个页面的各项功能。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('cardFlip');
},
},
{
element: '[data-tour="card-flip-area"]',
popover: {
title: '每周免费翻牌',
description: '每周您有10次免费翻牌机会，前7次为基础免费次数。翻牌可获得Token奖励，幸运值随着翻牌次数增加而提升。',
side: 'left',
align: 'start',
},
},
{
element: '[data-tour="use-invite-code-btn"]',
popover: {
title: '使用邀请码',
description: '输入好友的邀请码，双方各增加1次翻牌机会！填写邀请码后，第8-10次翻牌必定中奖，每次奖励最大额度翻倍！',
side: 'left',
align: 'center',
},
},
{
element: '[data-tour="my-invite-code-btn"]',
popover: {
title: '我的邀请码',
description: '生成您的专属邀请码，分享给好友。好友使用您的邀请码后，双方各获得1次额外翻牌机会。您可以复制邀请码或分享带邀请码的链接。',
side: 'left',
align: 'center',
},
},
];
// 开始 Header 引导
async function startHeaderTour() {
if (!driverInstance.value) {
initDriver();
}
guideTourStore.setCurrentPhase('header');
// 等待 DOM 更新
await nextTick();
// 配置完成回调，触发用户中心引导
driverInstance.value?.setConfig({
onDestroyStarted: () => {
if (!driverInstance.value?.hasNextStep()) {
// Header 引导完成，触发打开用户中心弹窗
guideTourStore.triggerUserCenterTour();
}
driverInstance.value?.destroy();
},
});
driverInstance.value?.setSteps(headerSteps);
driverInstance.value?.drive();
}
// 开始用户中心引导
async function startUserCenterTour() {
if (!driverInstance.value) {
initDriver();
}
guideTourStore.setCurrentPhase('userCenter');
// 等待弹窗完全打开
await new Promise(resolve => setTimeout(resolve, 500));
// 配置完成回调，关闭弹窗并标记引导完成
driverInstance.value?.setConfig({
onDestroyStarted: () => {
if (!driverInstance.value?.hasNextStep()) {
// 用户中心引导完成，先关闭弹窗
guideTourStore.closeUserCenterDialog();
// 等待弹窗关闭后标记整个引导流程完成
setTimeout(() => {
guideTourStore.markTourCompleted();
}, 500);
}
driverInstance.value?.destroy();
},
});
driverInstance.value?.setSteps(userCenterSteps);
driverInstance.value?.drive();
}
// 开始完整引导流程
async function startFullTour() {
await startHeaderTour();
}
// 销毁 driver 实例
function destroyTour() {
if (driverInstance.value) {
driverInstance.value.destroy();
driverInstance.value = null;
}
}
// 组件卸载时清理
onUnmounted(() => {
destroyTour();
});
return {
startHeaderTour,
startUserCenterTour,
startFullTour,
destroyTour,
};
}