feat: 移动端兼容优化

Yi.Ai.Vue3/src/pages/chat/index.vue

@@ -90,12 +90,12 @@ window.addEventListener('resize', checkIsMobile);
 
     <!-- 主内容区 -->
     <div class="content-main">
-      <div v-if="isMobile" class="content-header">
-        <div class="mobile-toggle" @click="isCollapsed = false">
-          <el-icon><Expand /></el-icon>
-          <span>AI应用</span>
-        </div>
-      </div>
+      <!--      <div v-if="isMobile" class="content-header"> -->
+      <!--        <div class="mobile-toggle" @click="isCollapsed = false"> -->
+      <!--          <el-icon><Expand /></el-icon> -->
+      <!--          <span>AI应用</span> -->
+      <!--        </div> -->
+      <!--      </div> -->
       <router-view v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" />

Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue

@@ -746,4 +746,128 @@ function handleImagePreview(url: string) {
   display: inline-block;
   margin-left: 8px;
 }
+
+/* 移动端响应式优化 */
+@media (max-width: 768px) {
+  .chat-with-id-container {
+    padding: 0 12px;
+
+    .chat-header {
+      height: 50px;
+
+      .left-box {
+        padding-left: 8px;
+        gap: 8px;
+      }
+
+      .middle-box {
+        margin-left: 8px;
+      }
+    }
+
+    .chat-warp {
+      height: calc(100vh - 110px);
+
+      .thinking-chain-warp {
+        margin-bottom: 8px;
+      }
+    }
+
+    /* 气泡列表优化 */
+    :deep(.el-bubble-list) {
+      padding-top: 16px;
+    }
+
+    :deep(.el-bubble) {
+      padding: 0 8px;
+      padding-bottom: 16px;
+    }
+
+    /* 用户图片优化 */
+    :deep(.user-image) {
+      max-width: 150px;
+      max-height: 150px;
+    }
+
+    /* 文件项优化 */
+    :deep(.user-file-item) {
+      padding: 6px 10px;
+      font-size: 12px;
+
+      .file-icon {
+        font-size: 14px;
+      }
+    }
+
+    /* Sender 输入框优化 */
+    .chat-defaul-sender {
+      margin-bottom: 16px;
+    }
+
+    /* Footer 优化 */
+    .footer-wrapper {
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .footer-time {
+      font-size: 11px;
+
+      .footer-token {
+        padding: 0 3px;
+        font-size: 11px;
+      }
+    }
+  }
+}
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+  .chat-with-id-container {
+    padding: 0 8px;
+
+    .chat-header {
+      height: 48px;
+
+      .left-box {
+        padding-left: 4px;
+        gap: 6px;
+      }
+
+      .middle-box {
+        margin-left: 6px;
+      }
+    }
+
+    .chat-warp {
+      height: calc(100vh - 100px);
+    }
+
+    :deep(.el-bubble-list) {
+      padding-top: 12px;
+    }
+
+    :deep(.el-bubble) {
+      padding: 0 6px;
+      padding-bottom: 12px;
+    }
+
+    :deep(.user-image) {
+      max-width: 120px;
+      max-height: 120px;
+    }
+
+    .chat-defaul-sender {
+      margin-bottom: 12px;
+    }
+
+    .footer-time {
+      font-size: 10px;
+
+      .footer-token {
+        font-size: 10px;
+      }
+    }
+  }
+}
 </style>