feat: 移动端兼容优化

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>