From 02a5f6995813a1ef58891f7b7d915d020fa57d95 Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Wed, 26 Nov 2025 21:05:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF2.4=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Ai.Vue3/index.html                         |  2 +-
 Yi.Ai.Vue3/src/components/SvgIcon/index.vue   |  1 +
 .../Header/components/AiTutorialBtn.vue       | 88 +++++++++++++++++++
 .../Header/components/AnnouncementBtn.vue     |  6 +-
 .../components/Header/components/Avatar.vue   | 74 +++-------------
 .../src/layouts/components/Header/index.vue   |  4 +-
 6 files changed, 108 insertions(+), 67 deletions(-)
 create mode 100644 Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue
diff --git a/Yi.Ai.Vue3/index.html b/Yi.Ai.Vue3/index.html
index 312c6934..5bd4cd8e 100644
--- a/Yi.Ai.Vue3/index.html
+++ b/Yi.Ai.Vue3/index.html
@@ -112,7 +112,7 @@
 <body>
 <!-- 加载动画容器 -->
 <div id="yixinai-loader" class="loader-container">
-  <div class="loader-title">意心Ai 2.3</div>
+  <div class="loader-title">意心Ai 2.4</div>
   <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
   <div class="loader-logo">
     <div class="pulse-box"></div>
diff --git a/Yi.Ai.Vue3/src/components/SvgIcon/index.vue b/Yi.Ai.Vue3/src/components/SvgIcon/index.vue
index cbc86869..873909a4 100644
--- a/Yi.Ai.Vue3/src/components/SvgIcon/index.vue
+++ b/Yi.Ai.Vue3/src/components/SvgIcon/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// 图标文档 https://remixicon.com/
 const props = defineProps<{
   className?: string;
   name: string;
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue
new file mode 100644
index 00000000..c7fe6258
--- /dev/null
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+// 打开AI使用教程（跳转到外部链接）
+function openTutorial() {
+  window.open('https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde', '_blank');
+}
+</script>
+
+<template>
+  <div class="ai-tutorial-btn-container" data-tour="ai-tutorial-link">
+    <div
+      class="ai-tutorial-btn"
+      title="点击跳转YiXinAI玩法指南专栏"
+      @click="openTutorial"
+    >
+      <!-- PC端显示文字 -->
+      <span class="pc-text">AI使用教程</span>
+      <!-- 移动端显示图标 -->
+      <svg
+        class="mobile-icon w-6 h-6"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 14l9-5-9-5-9 5 9 5z"
+        />
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 14l6.16-3.422A12.083 12.083 0 0118 13.5c0 2.579-3.582 4.5-6 4.5s-6-1.921-6-4.5c0-.432.075-.85.198-1.244L12 14z"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ai-tutorial-btn-container {
+  display: flex;
+  align-items: center;
+
+  .ai-tutorial-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #E6A23C;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #F1B44C;
+      transform: translateY(-1px);
+    }
+
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+    }
+
+    .mobile-icon {
+      display: none;
+    }
+  }
+}
+
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
+  .ai-tutorial-btn-container {
+    .ai-tutorial-btn {
+      .pc-text {
+        display: none;
+      }
+
+      .mobile-icon {
+        display: inline;
+      }
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
index d14ee6ef..c8d53159 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
@@ -33,7 +33,7 @@ function openAnnouncement() {
         @click="openAnnouncement"
       >
         <!-- PC端显示文字 -->
-        <span class="pc-text">公告/活动</span>
+        <span class="pc-text">公告</span>
         <!-- 移动端显示图标 -->
         <el-icon class="mobile-icon" :size="20">
           <Bell />
@@ -62,11 +62,11 @@ function openAnnouncement() {
     cursor: pointer;
     font-size: 1.2rem;
     font-weight: bold;
-    color: #e6a23c;
+    color: #409eff;
     transition: all 0.2s;
 
     &:hover {
-      color: #ebb563;
+      color: #66b1ff;
       transform: translateY(-1px);
     }
 
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
index 6c81ec5f..eaa3b15b 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
@@ -51,6 +51,11 @@ const popoverList = ref([
     title: '用户中心',
     icon: 'settings-4-fill',
   },
+  {
+    key: '6',
+    title: '新手引导',
+    icon: 'dashboard-fill',
+  },
   {
     key: '3',
     divider: true,
@@ -100,7 +105,12 @@ function handleNavChange(nav: string) {
 function handleContactSupport() {
   rechargeLogRef.value?.contactCustomerService();
 }
+const { startHeaderTour } = useGuideTour();
 
+// 开始引导教程
+function handleStartTutorial() {
+  startHeaderTour();
+}
 // 点击
 function handleClick(item: any) {
   switch (item.key) {
@@ -113,6 +123,9 @@ function handleClick(item: any) {
     case '5':
       openDialog();
       break;
+    case '6':
+      handleStartTutorial();
+      break;
     case '4':
       popoverRef.value?.hide?.();
       ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', {
@@ -278,49 +291,6 @@ watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
 
 <template>
   <div class="flex items-center gap-2">
-    <!--    <div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors"> -->
-    <!--      <a -->
-    <!--        href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde" -->
-    <!--        target="_blank" -->
-    <!--        class="flex items-center gap-2 group" -->
-    <!--        style="color: #E6A23C;" -->
-    <!--        title="点击跳转YiXinAI玩法指南专栏" -->
-    <!--      > -->
-    <!--        AI使用教程 -->
-    <!--      </a> -->
-    <!--    </div> -->
-
-    <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"
-        class="flex items-center gap-2 group"
-        style="color: #E6A23C;"
-        title="点击跳转YiXinAI玩法指南专栏"
-      >
-        <!-- PC端显示文字 -->
-        <span class="pc-text">AI使用教程</span>
-        <!-- 移动端显示图标，这里用一个示例SVG，实际可以换成你想要的 -->
-        <svg
-          class="inline md:hidden w-6 h-6 text-yellow-500"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M12 14l9-5-9-5-9 5 9 5z"
-          />
-          <path
-            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M12 14l6.16-3.422A12.083 12.083 0 0118 13.5c0 2.579-3.582 4.5-6 4.5s-6-1.921-6-4.5c0-.432.075-.85.198-1.244L12 14z"
-          />
-        </svg>
-
-      </a>
-    </div>
-
     <el-button
       class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
       data-tour="buy-btn"
@@ -523,22 +493,4 @@ watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-4px); }
 }
-
-/* 默认 PC 端文字显示，图标隐藏 */
-.pc-text {
-  display: inline;
-}
-.mobile-icon {
-  display: none;
-}
-
-/* 移动端显示图标，隐藏文字 */
-@media (max-width: 768px) {
-  .pc-text {
-    display: none;
-  }
-  .mobile-icon {
-    display: inline;
-  }
-}
 </style>
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
index 239624b4..9cd4ff9e 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
@@ -4,13 +4,13 @@ import { onKeyStroke } from '@vueuse/core';
 import { SIDE_BAR_WIDTH } from '@/config/index';
 import { useDesignStore, useUserStore } from '@/stores';
 import { useSessionStore } from '@/stores/modules/session';
+import AiTutorialBtn from './components/AiTutorialBtn.vue';
 import AnnouncementBtn from './components/AnnouncementBtn.vue';
 import Avatar from './components/Avatar.vue';
 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();
@@ -72,7 +72,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">
           <AnnouncementBtn />
-          <TutorialBtn />
+          <AiTutorialBtn />
           <Avatar v-show="userStore.userInfo" />
           <LoginBtn v-show="!userStore.userInfo" />
         </div>
