feat: 新手引导优化

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

@@ -32,7 +32,10 @@ function openAnnouncement() {
         class="announcement-btn"
         @click="openAnnouncement"
       >
-        <el-icon :size="20">
+        <!-- PC端显示文字 -->
+        <span class="pc-text">公告/活动</span>
+        <!-- 移动端显示图标 -->
+        <el-icon class="mobile-icon" :size="20">
           <Bell />
         </el-icon>
       </div>
@@ -44,65 +47,52 @@ function openAnnouncement() {
 .announcement-btn-container {
   display: flex;
   align-items: center;
-  margin-right: 12px;
 
   .announcement-badge {
     :deep(.el-badge__content) {
       background-color: #f56c6c;
       border: none;
-      //font-size: 12px;
-      //height: 18px;
-      //line-height: 18px;
-      //padding: 0 6px;
     }
   }
 
   .announcement-btn {
-    width: 40px;
-    height: 40px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background: transparent;
+    gap: 6px;
     cursor: pointer;
-    transition: all 0.3s;
-
-    .el-icon {
-      color: #606266;
-      transition: color 0.3s;
-    }
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #e6a23c;
+    transition: all 0.2s;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.05);
+      color: #ebb563;
+      transform: translateY(-1px);
+    }
 
-      .el-icon {
-        color: #409eff;
-      }
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+
+    }
+
+    .mobile-icon {
+      display: none;
     }
   }
 }
 
-// 移动端适配
-@media screen and (max-width: 768px) {
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
   .announcement-btn-container {
-    margin-right: 8px;
-
     .announcement-btn {
-      width: 36px;
-      height: 36px;
-
-      .el-icon {
-        font-size: 18px;
+      .pc-text {
+        display: none;
       }
-    }
 
-    .announcement-badge {
-      :deep(.el-badge__content) {
-        //font-size: 10px;
-        //height: 16px;
-        //line-height: 16px;
-        //padding: 0 4px;
+      .mobile-icon {
+        display: inline;
       }
     }
   }

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

@@ -12,16 +12,17 @@ function handleStartTutorial() {
 
 <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
+      class="tutorial-btn"
+      @click="handleStartTutorial"
+    >
+      <!-- PC端显示文字 -->
+      <span class="pc-text">新手引导</span>
+      <!-- 移动端显示图标 -->
+      <el-icon class="mobile-icon" :size="20">
+        <QuestionFilled />
+      </el-icon>
+    </div>
   </div>
 </template>
 
@@ -29,45 +30,44 @@ function handleStartTutorial() {
 .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;
+    gap: 6px;
     cursor: pointer;
-    transition: all 0.3s;
-
-    .el-icon {
-      color: #606266;
-      transition: color 0.3s;
-    }
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #409eff;
+    transition: all 0.2s;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.05);
+      color: #66b1ff;
+      transform: translateY(-1px);
+    }
 
-      .el-icon {
-        color: #409eff;
-      }
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+    }
+
+    .mobile-icon {
+      display: none;
     }
   }
 }
 
-// 移动端适配
-@media screen and (max-width: 768px) {
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
   .tutorial-btn-container {
-    margin-right: 8px;
-
     .tutorial-btn {
-      width: 36px;
-      height: 36px;
+      .pc-text {
+        display: none;
+      }
 
-      .el-icon {
-        font-size: 18px;
+      .mobile-icon {
+        display: inline;
       }
     }
   }

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

@@ -71,8 +71,8 @@ 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 />
+          <TutorialBtn />
           <Avatar v-show="userStore.userInfo" />
           <LoginBtn v-show="!userStore.userInfo" />
         </div>