fix: 模型库前端布局优化

.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(dir:*)"
-    ]
-  }
-}

.gitignore

@@ -278,3 +278,5 @@ database_backup
 /Yi.Abp.Net8/src/Yi.Abp.Web/yi-abp-dev.db
 
 package-lock.json
+
+.claude

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

@@ -12,4 +12,4 @@ export const COLLAPSE_THRESHOLD: number = 600;
 export const SIDE_BAR_WIDTH: number = 280;
 
 // 路由白名单地址[本地存在的路由 staticRouter.ts 中]
-export const ROUTER_WHITE_LIST: string[] = ['/chat', '/chat/not_login', '/products', '/403', '/404'];
+export const ROUTER_WHITE_LIST: string[] = ['/chat', '/chat/not_login', '/products', '/model-library', '/403', '/404'];

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

@@ -9,18 +9,33 @@ function goToModelLibrary() {
 </script>
 
 <template>
-  <div class="model-library-btn-container" @click="goToModelLibrary">
+  <div class="model-library-btn-container" data-tour="model-library-btn">
-    <el-tooltip content="查看模型库" placement="bottom">
+    <div
-      <el-button link class="header-btn">
+      class="model-library-btn"
-        <svg 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">
+      title="查看模型库"
-          <rect x="3" y="3" width="7" height="7" />
+      @click="goToModelLibrary"
-          <rect x="14" y="3" width="7" height="7" />
+    >
-          <rect x="14" y="14" width="7" height="7" />
+      <!-- PC端显示文字 -->
-          <rect x="3" y="14" width="7" height="7" />
+      <span class="pc-text">模型库</span>
-        </svg>
+      <!-- 移动端显示图标 -->
-        <span class="btn-text">模型库</span>
+      <svg
-      </el-button>
+        class="mobile-icon"
-    </el-tooltip>
+        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>
 
@@ -28,28 +43,45 @@ function goToModelLibrary() {
 .model-library-btn-container {
   display: flex;
   align-items: center;
-  cursor: pointer;
 
-  .header-btn {
+  .model-library-btn {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: bold;
     color: #606266;
-    transition: all 0.3s;
+    transition: all 0.2s;
 
     &:hover {
-      color: #409eff;
+      color: #606266;
-      background-color: rgba(64, 158, 255, 0.1);
+      transform: translateY(-1px);
     }
 
-    .btn-text {
+    // PC端显示文字，隐藏图标
-      font-size: 14px;
+    .pc-text {
-      font-weight: 500;
+      display: inline;
+      margin: 0 12px;
     }
 
-    svg {
+    .mobile-icon {
-      flex-shrink: 0;
+      display: none;
+    }
+  }
+}
+
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
+  .model-library-btn-container {
+    .model-library-btn {
+      .pc-text {
+        display: none;
+      }
+
+      .mobile-icon {
+        display: inline;
+      }
     }
   }
 }