多张图片显示的效果是可以横向滚动

HBuilderProjects/shareAiConsult.html

@@ -168,14 +168,32 @@
       border-radius: 4px;
     }
 
+    .user-bubble--images {
+      padding: 8px 10px;
+    }
+
     .user-bubble__images {
       display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
+      flex-wrap: nowrap;
+      gap: 8px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .user-bubble__images::-webkit-scrollbar {
+      display: none;
     }
 
     .user-bubble__images .user-bubble__image {
       flex: 0 0 auto;
+      width: 72px;
+      height: 72px;
+      max-width: none;
+      object-fit: cover;
+      border-radius: 8px;
     }
 
     .fallback-card {
@@ -1112,7 +1130,7 @@
             var imageUrls = getMessageImageUrls(msg);
             if (msg.isImage && imageUrls.length) {
               html +=
-                '<div class="row row--user"><div class="user-bubble">' +
+                '<div class="row row--user"><div class="user-bubble user-bubble--images">' +
                 buildUserBubbleImagesHtml(imageUrls) +
                 "</div></div>";
               var imageUserText = String(msg.content || "").trim();

HBuilderProjects/shareAiKfChat.html

@@ -168,14 +168,32 @@
       border-radius: 4px;
     }
 
+    .user-bubble--images {
+      padding: 8px 10px;
+    }
+
     .user-bubble__images {
       display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
+      flex-wrap: nowrap;
+      gap: 8px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .user-bubble__images::-webkit-scrollbar {
+      display: none;
     }
 
     .user-bubble__images .user-bubble__image {
       flex: 0 0 auto;
+      width: 72px;
+      height: 72px;
+      max-width: none;
+      object-fit: cover;
+      border-radius: 8px;
     }
 
     .fallback-card {
@@ -869,7 +887,7 @@
             var imageUrls = getMessageImageUrls(msg);
             if (msg.isImage && imageUrls.length) {
               html +=
-                '<div class="row row--user"><div class="user-bubble">' +
+                '<div class="row row--user"><div class="user-bubble user-bubble--images">' +
                 buildUserBubbleImagesHtml(imageUrls) +
                 "</div></div>";
               var imageUserText = String(msg.content || "").trim();