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

Yi.Ai.Vue3/src/layouts/components0/Header/components/ModelLibraryBtn.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+function goToModelLibrary() {
+  router.push('/model-library');
+}
+</script>
+
+<template>
+  <div class="model-library-btn-container" data-tour="model-library-btn">
+    <div
+      class="model-library-btn"
+      title="查看模型库"
+      @click="goToModelLibrary"
+    >
+      <!-- PC端显示文字 -->
+      <span class="pc-text">模型库</span>
+      <!-- 移动端显示图标 -->
+      <svg
+        class="mobile-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect x="3" y="3" width="7" height="7" />
+        <rect x="14" y="3" width="7" height="7" />
+        <rect x="14" y="14" width="7" height="7" />
+        <rect x="3" y="14" width="7" height="7" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.model-library-btn-container {
+  display: flex;
+  align-items: center;
+
+  .model-library-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #606266;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #606266;
+      transform: translateY(-1px);
+    }
+
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+    }
+
+    .mobile-icon {
+      display: none;
+    }
+  }
+}
+
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
+  .model-library-btn-container {
+    .model-library-btn {
+      .pc-text {
+        display: none;
+      }
+
+      .mobile-icon {
+        display: inline;
+      }
+    }
+  }
+}
+</style>