mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-24 18:36:39 +08:00
335 lines
9.6 KiB
TypeScript
335 lines
9.6 KiB
TypeScript
import { driver } from 'driver.js';
|
||
import { useGuideTourStore } from '@/stores';
|
||
import 'driver.js/dist/driver.css';
|
||
|
||
// 引导步骤接口
|
||
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: '欢迎使用意心AI-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: '点击这里可以成为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: '了解尊享服务包专属特权和服务，我们将详细介绍这个页面的功能。',
|
||
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,
|
||
};
|
||
}
|
