fix: 前端页面架构重构初版

Yi.Ai.Vue3/src/layouts/components0/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">文档</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>