feat: 增加新手引导

Yi.Ai.Vue3/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx vue-tsc --noEmit)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

Yi.Ai.Vue3/src/components/ModelSelect/index.vue

@@ -149,7 +149,7 @@ function getWrapperClass(item: GetSessionListVO) {
 </script>
 
 <template>
-  <div class="model-select">
+  <div class="model-select" data-tour="model-select">
     <Popover
       ref="popoverRef"
       placement="top-start"

Yi.Ai.Vue3/src/components/userPersonalCenter/NavDialog.vue

@@ -98,7 +98,7 @@ function toggleFullscreen() {
 
     <div class="dialog-container">
       <!-- 左侧导航 -->
-      <div class="nav-side">
+      <div class="nav-side" data-tour="user-nav-menu">
         <el-menu
           :default-active="activeNav"
           class="nav-menu"
@@ -108,6 +108,7 @@ function toggleFullscreen() {
             v-for="item in navItems"
             :key="item.name"
             :index="item.name"
+            :data-tour="`nav-${item.name}`"
           >
             <template #title>
               <el-icon v-if="item.icon">

Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue

@@ -948,6 +948,7 @@ function getCardClass(record: CardFlipRecord): string[] {
             type="primary"
             size="small"
             icon="Gift"
+            data-tour="my-invite-code-btn"
             @click="showMyInviteCodeDialog = true"
           >
             我的邀请码
@@ -956,6 +957,7 @@ function getCardClass(record: CardFlipRecord): string[] {
             type="warning"
             size="small"
             icon="Unlock"
+            data-tour="use-invite-code-btn"
             @click="inviteCodeDialog = true"
           >
             使用邀请码
@@ -964,7 +966,7 @@ function getCardClass(record: CardFlipRecord): string[] {
       </div>
 
       <!-- 翻牌区域 -->
-      <div class="cards-section" :class="{ 'shuffle-mode': isShuffling }">
+      <div class="cards-section" :class="{ 'shuffle-mode': isShuffling }" data-tour="card-flip-area">
         <!-- 洗牌动画遮罩提示 -->
         <div v-if="isShuffling" class="shuffle-overlay">
           <div class="shuffle-tip">

Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue

@@ -66,14 +66,16 @@ onMounted(() => {
 <template>
   <div class="premium-service">
     <!-- 套餐信息 -->
-    <PremiumPackageInfo
-      :package-data="packageData"
-      :loading="loading"
-      @refresh="refreshData"
-    />
+    <div data-tour="premium-package-info">
+      <PremiumPackageInfo
+        :package-data="packageData"
+        :loading="loading"
+        @refresh="refreshData"
+      />
+    </div>
 
     <!-- 额度明细列表 -->
-    <div class="usage-list-wrapper">
+    <div class="usage-list-wrapper" data-tour="premium-usage-list">
       <PremiumUsageList ref="usageListRef" />
     </div>
   </div>

Yi.Ai.Vue3/src/hooks/useGuideTour.ts

@@ -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,
+  };
+}

Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue

@@ -20,7 +20,7 @@ function openAnnouncement() {
 </script>
 
 <template>
-  <div class="announcement-btn-container">
+  <div class="announcement-btn-container" data-tour="announcement-btn">
     <el-badge
       is-dot
       class="announcement-badge"

Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue

@@ -6,7 +6,8 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import Popover from '@/components/Popover/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
-import { useUserStore } from '@/stores';
+import { useGuideTour } from '@/hooks/useGuideTour';
+import { useGuideTourStore, useUserStore } from '@/stores';
 import { useSessionStore } from '@/stores/modules/session';
 import { showProductPackage } from '@/utils/product-package';
 import { getUserProfilePicture, isUserVip } from '@/utils/user';
@@ -15,6 +16,8 @@ const router = useRouter();
 
 const userStore = useUserStore();
 const sessionStore = useSessionStore();
+const guideTourStore = useGuideTourStore();
+const { startUserCenterTour } = useGuideTour();
 
 // const src = computed(
 //   () => userStore.userInfo?.avatar ?? 'https://avatars.githubusercontent.com/u/76239030',
@@ -243,6 +246,34 @@ onMounted(() => {
     // URL 参数会在对话框关闭时清除
   }
 });
+
+// ============ 监听引导状态，自动打开用户中心并开始引导 ============
+watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
+  if (shouldStart) {
+    // 清除触发标记
+    guideTourStore.clearUserCenterTourTrigger();
+
+    // 注册导航切换回调
+    guideTourStore.setUserCenterNavChangeCallback((nav: string) => {
+      activeNav.value = nav;
+    });
+
+    // 注册关闭弹窗回调
+    guideTourStore.setUserCenterCloseCallback(() => {
+      dialogVisible.value = false;
+    });
+
+    // 打开用户中心弹窗
+    nextTick(() => {
+      dialogVisible.value = true;
+
+      // 等待弹窗打开后开始引导
+      setTimeout(() => {
+        startUserCenterTour();
+      }, 600);
+    });
+  }
+});
 </script>
 
 <template>
@@ -259,7 +290,7 @@ onMounted(() => {
     <!--      </a> -->
     <!--    </div> -->
 
-    <div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors">
+    <div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors" data-tour="ai-tutorial-link">
       <a
         href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
         target="_blank"
@@ -292,6 +323,7 @@ onMounted(() => {
 
     <el-button
       class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
+      data-tour="buy-btn"
       @click="onProductPackage"
     >
       <span>立即购买</span>
@@ -321,7 +353,7 @@ onMounted(() => {
     </div>
 
     <!-- 头像区域 -->
-    <div class="avatar-container">
+    <div class="avatar-container" data-tour="user-avatar">
       <Popover
         ref="popoverRef"
         placement="bottom-end"

Yi.Ai.Vue3/src/layouts/components/Header/components/TutorialBtn.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { QuestionFilled } from '@element-plus/icons-vue';
+import { useGuideTour } from '@/hooks/useGuideTour';
+
+const { startHeaderTour } = useGuideTour();
+
+// 开始引导教程
+function handleStartTutorial() {
+  startHeaderTour();
+}
+</script>
+
+<template>
+  <div class="tutorial-btn-container" data-tour="tutorial-btn">
+    <el-tooltip content="新手教程" placement="bottom">
+      <div
+        class="tutorial-btn"
+        @click="handleStartTutorial"
+      >
+        <el-icon :size="20">
+          <QuestionFilled />
+        </el-icon>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tutorial-btn-container {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+
+  .tutorial-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .el-icon {
+      color: #606266;
+      transition: color 0.3s;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+
+      .el-icon {
+        color: #409eff;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .tutorial-btn-container {
+    margin-right: 8px;
+
+    .tutorial-btn {
+      width: 36px;
+      height: 36px;
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -10,6 +10,7 @@ import Collapse from './components/Collapse.vue';
 import CreateChat from './components/CreateChat.vue';
 import LoginBtn from './components/LoginBtn.vue';
 import TitleEditing from './components/TitleEditing.vue';
+import TutorialBtn from './components/TutorialBtn.vue';
 
 const userStore = useUserStore();
 const designStore = useDesignStore();
@@ -70,6 +71,7 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
 
         <!-- 右边 -->
         <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
+          <TutorialBtn />
           <AnnouncementBtn />
           <Avatar v-show="userStore.userInfo" />
           <LoginBtn v-show="!userStore.userInfo" />

Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue

@@ -7,7 +7,8 @@ import { ElMessage } from 'element-plus';
 import { nextTick, ref, watch } from 'vue';
 import ModelSelect from '@/components/ModelSelect/index.vue';
 import WelecomeText from '@/components/WelecomeText/index.vue';
-import { useUserStore } from '@/stores';
+import { useGuideTour } from '@/hooks/useGuideTour';
+import { useGuideTourStore, useUserStore } from '@/stores';
 import { useFilesStore } from '@/stores/modules/files';
 
 import { useSessionStore } from '@/stores/modules/session';
@@ -15,6 +16,7 @@ import { useSessionStore } from '@/stores/modules/session';
 const userStore = useUserStore();
 const sessionStore = useSessionStore();
 const filesStore = useFilesStore();
+const guideTourStore = useGuideTourStore();
 
 const senderValue = ref('');
 const senderRef = ref();
@@ -87,6 +89,7 @@ watch(
       ref="senderRef"
       v-model="senderValue"
       class="chat-defaul-sender"
+      data-tour="chat-sender"
       :auto-size="{
         maxRows: 9,
         minRows: 3,

Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue

@@ -13,6 +13,8 @@ import { Sender } from 'vue-element-plus-x';
 import { useRoute } from 'vue-router';
 import { send } from '@/api';
 import ModelSelect from '@/components/ModelSelect/index.vue';
+import { useGuideTour } from '@/hooks/useGuideTour';
+import { useGuideTourStore } from '@/stores';
 import { useChatStore } from '@/stores/modules/chat';
 import { useFilesStore } from '@/stores/modules/files';
 import { useModelStore } from '@/stores/modules/model';
@@ -35,6 +37,7 @@ const chatStore = useChatStore();
 const modelStore = useModelStore();
 const filesStore = useFilesStore();
 const userStore = useUserStore();
+const guideTourStore = useGuideTourStore();
 
 // 用户头像
 const avatar = computed(() => {
@@ -336,7 +339,7 @@ function copy(item: any) {
       </BubbleList>
 
       <Sender
-        ref="senderRef" v-model="inputValue" class="chat-defaul-sender" :auto-size="{
+        ref="senderRef" v-model="inputValue" class="chat-defaul-sender" data-tour="chat-sender" :auto-size="{
           maxRows: 6,
           minRows: 2,
         }" variant="updown" clearable allow-speech :loading="isLoading" @submit="startSSE" @cancel="cancelSSE"

Yi.Ai.Vue3/src/stores/index.ts

@@ -11,3 +11,4 @@ export * from './modules/announcement'
 // export * from './modules/chat';
 export * from './modules/design';
 export * from './modules/user';
+export * from './modules/guideTour';

Yi.Ai.Vue3/src/stores/modules/guideTour.ts

@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia';
+
+// 存储键名
+const TOUR_STORAGE_KEY = 'guide_tour_completed';
+
+export const useGuideTourStore = defineStore('guideTour', () => {
+  // 是否是首次访问
+  const isFirstVisit = ref(!localStorage.getItem(TOUR_STORAGE_KEY));
+
+  // 当前引导阶段
+  const currentPhase = ref<'idle' | 'header' | 'userCenter' | 'chat'>('idle');
+
+  // 是否需要在用户中心弹窗打开后开始引导
+  const shouldStartUserCenterTour = ref(false);
+
+  // 是否需要在聊天页面开始引导
+  const shouldStartChatTour = ref(false);
+
+  // 用户中心导航切换回调
+  const userCenterNavChangeCallback = ref<((nav: string) => void) | null>(null);
+
+  // 用户中心弹窗关闭回调
+  const userCenterCloseCallback = ref<(() => void) | null>(null);
+
+  // 标记引导已完成
+  function markTourCompleted() {
+    localStorage.setItem(TOUR_STORAGE_KEY, Date.now().toString());
+    isFirstVisit.value = false;
+  }
+
+  // 重置引导状态
+  function resetTourStatus() {
+    localStorage.removeItem(TOUR_STORAGE_KEY);
+    isFirstVisit.value = true;
+  }
+
+  // 设置当前引导阶段
+  function setCurrentPhase(phase: 'idle' | 'header' | 'userCenter' | 'chat') {
+    currentPhase.value = phase;
+  }
+
+  // 触发用户中心引导
+  function triggerUserCenterTour() {
+    shouldStartUserCenterTour.value = true;
+  }
+
+  // 清除用户中心引导触发标记
+  function clearUserCenterTourTrigger() {
+    shouldStartUserCenterTour.value = false;
+  }
+
+  // 触发聊天页面引导
+  function triggerChatTour() {
+    shouldStartChatTour.value = true;
+  }
+
+  // 清除聊天页面引导触发标记
+  function clearChatTourTrigger() {
+    shouldStartChatTour.value = false;
+  }
+
+  // 设置用户中心导航切换回调
+  function setUserCenterNavChangeCallback(callback: (nav: string) => void) {
+    userCenterNavChangeCallback.value = callback;
+  }
+
+  // 设置用户中心弹窗关闭回调
+  function setUserCenterCloseCallback(callback: () => void) {
+    userCenterCloseCallback.value = callback;
+  }
+
+  // 切换用户中心导航
+  function changeUserCenterNav(nav: string) {
+    if (userCenterNavChangeCallback.value) {
+      userCenterNavChangeCallback.value(nav);
+    }
+  }
+
+  // 关闭用户中心弹窗
+  function closeUserCenterDialog() {
+    if (userCenterCloseCallback.value) {
+      userCenterCloseCallback.value();
+    }
+  }
+
+  return {
+    isFirstVisit,
+    currentPhase,
+    shouldStartUserCenterTour,
+    shouldStartChatTour,
+    userCenterNavChangeCallback,
+    userCenterCloseCallback,
+    markTourCompleted,
+    resetTourStatus,
+    setCurrentPhase,
+    triggerUserCenterTour,
+    clearUserCenterTourTrigger,
+    triggerChatTour,
+    clearChatTourTrigger,
+    setUserCenterNavChangeCallback,
+    setUserCenterCloseCallback,
+    changeUserCenterNav,
+    closeUserCenterDialog,
+  };
+});

Yi.Ai.Vue3/src/styles/guide-tour.scss

@@ -0,0 +1,148 @@
+// Guide Tour 自定义样式
+// 覆盖 driver.js 默认样式
+
+.driver-popover {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  border: none;
+  padding: 20px;
+  min-width: 300px;
+  max-width: 400px;
+
+  &.guide-tour-popover {
+    // 自定义样式类
+  }
+
+  .driver-popover-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-right: 24px;
+  }
+
+  .driver-popover-description {
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+
+  .driver-popover-progress-text {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 12px;
+  }
+
+  .driver-popover-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .driver-popover-navigation-btns {
+    display: flex;
+    gap: 8px;
+  }
+
+  .driver-popover-prev-btn,
+  .driver-popover-next-btn {
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: none;
+  }
+
+  .driver-popover-prev-btn {
+    background-color: #f5f7fa;
+    color: #606266;
+
+    &:hover {
+      background-color: #e6e8eb;
+    }
+  }
+
+  .driver-popover-next-btn {
+    background-color: #409eff;
+    color: #fff;
+
+    &:hover {
+      background-color: #66b1ff;
+    }
+  }
+
+  .driver-popover-close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: transparent;
+    border: none;
+    color: #909399;
+    cursor: pointer;
+    transition: all 0.3s;
+    font-size: 18px;
+
+    &:hover {
+      background-color: #f5f7fa;
+      color: #606266;
+    }
+  }
+
+  // 箭头样式
+  .driver-popover-arrow {
+    border: none;
+  }
+
+  &.driver-popover-side-top .driver-popover-arrow {
+    border-top-color: #fff;
+  }
+
+  &.driver-popover-side-bottom .driver-popover-arrow {
+    border-bottom-color: #fff;
+  }
+
+  &.driver-popover-side-left .driver-popover-arrow {
+    border-left-color: #fff;
+  }
+
+  &.driver-popover-side-right .driver-popover-arrow {
+    border-right-color: #fff;
+  }
+}
+
+// 高亮区域样式
+.driver-highlighted-element {
+  outline: none !important;
+}
+
+// 遮罩层样式
+.driver-overlay {
+  background-color: rgba(0, 0, 0, 0.65) !important;
+}
+
+// 动画效果
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.driver-popover {
+  animation: fadeInUp 0.3s ease-out;
+}

Yi.Ai.Vue3/src/styles/index.scss

@@ -3,6 +3,7 @@
 @use 'reset-css';
 @use './element-plus';
 @use './elx';
+@use './guide-tour';
 body{
   overflow: hidden;
 }