瀏覽代碼

多张图片展示

lxr 5 小時之前
父節點
當前提交
be431a6ce7
共有 2 個文件被更改,包括 86 次插入10 次删除
  1. 43 5
      HBuilderProjects/shareAiConsult.html
  2. 43 5
      HBuilderProjects/shareAiKfChat.html

+ 43 - 5
HBuilderProjects/shareAiConsult.html

@@ -168,6 +168,16 @@
       border-radius: 4px;
     }
 
+    .user-bubble__images {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .user-bubble__images .user-bubble__image {
+      flex: 0 0 auto;
+    }
+
     .fallback-card {
       margin: 14px 15px 0;
       padding: 14px 13px;
@@ -645,6 +655,31 @@
           .filter(Boolean);
       }
 
+      function getMessageImageUrls(msg) {
+        if (!msg) return [];
+        if (Array.isArray(msg.imageUrls) && msg.imageUrls.length) {
+          return msg.imageUrls
+            .map(function (u) {
+              return String(u || "").trim();
+            })
+            .filter(Boolean);
+        }
+        if (msg.imageUrl) return [String(msg.imageUrl)];
+        return [];
+      }
+
+      function buildUserBubbleImagesHtml(imageUrls) {
+        if (!Array.isArray(imageUrls) || !imageUrls.length) return "";
+        var imgs = "";
+        for (var j = 0; j < imageUrls.length; j++) {
+          imgs +=
+            '<img class="user-bubble__image" src="' +
+            escHtml(imageUrls[j]) +
+            '" alt="图片" loading="lazy" decoding="async" />';
+        }
+        return '<div class="user-bubble__images">' + imgs + "</div>";
+      }
+
       function normalizeHistoryRowImageUrls(item) {
         var raw = item.image_urls || item.imageUrls || item.images;
         if (Array.isArray(raw)) {
@@ -777,6 +812,7 @@
               id: msgId,
               role: role || "user",
               isImage: true,
+              imageUrls: imageUrls,
               imageUrl: imageUrls[0],
               content: content,
             });
@@ -791,6 +827,7 @@
               id: msgId,
               role: role || "user",
               isImage: true,
+              imageUrls: [String(imageUrl)],
               imageUrl: String(imageUrl),
             });
             continue;
@@ -1072,11 +1109,12 @@
           var msg = list[i];
           if (!msg) continue;
           if (msg.role === "user") {
-            if (msg.isImage && msg.imageUrl) {
+            var imageUrls = getMessageImageUrls(msg);
+            if (msg.isImage && imageUrls.length) {
               html +=
-                '<div class="row row--user"><div class="user-bubble"><img class="user-bubble__image" src="' +
-                escHtml(msg.imageUrl) +
-                '" alt="图片" loading="lazy" decoding="async" /></div></div>';
+                '<div class="row row--user"><div class="user-bubble">' +
+                buildUserBubbleImagesHtml(imageUrls) +
+                "</div></div>";
               var imageUserText = String(msg.content || "").trim();
               if (imageUserText) {
                 html +=
@@ -1142,7 +1180,7 @@
           var msg = list[i];
           if (!msg) continue;
           if (msg.role === "user") {
-            if (msg.isImage && msg.imageUrl) {
+            if (msg.isImage && getMessageImageUrls(msg).length) {
               count += 1;
               continue;
             }

+ 43 - 5
HBuilderProjects/shareAiKfChat.html

@@ -168,6 +168,16 @@
       border-radius: 4px;
     }
 
+    .user-bubble__images {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .user-bubble__images .user-bubble__image {
+      flex: 0 0 auto;
+    }
+
     .fallback-card {
       margin: 14px 15px 0;
       padding: 14px 13px;
@@ -530,6 +540,31 @@
           .filter(Boolean);
       }
 
+      function getMessageImageUrls(msg) {
+        if (!msg) return [];
+        if (Array.isArray(msg.imageUrls) && msg.imageUrls.length) {
+          return msg.imageUrls
+            .map(function (u) {
+              return String(u || "").trim();
+            })
+            .filter(Boolean);
+        }
+        if (msg.imageUrl) return [String(msg.imageUrl)];
+        return [];
+      }
+
+      function buildUserBubbleImagesHtml(imageUrls) {
+        if (!Array.isArray(imageUrls) || !imageUrls.length) return "";
+        var imgs = "";
+        for (var j = 0; j < imageUrls.length; j++) {
+          imgs +=
+            '<img class="user-bubble__image" src="' +
+            escHtml(imageUrls[j]) +
+            '" alt="图片" loading="lazy" decoding="async" />';
+        }
+        return '<div class="user-bubble__images">' + imgs + "</div>";
+      }
+
       function normalizeHistoryRowImageUrls(item) {
         var raw = item.image_urls || item.imageUrls || item.images;
         if (Array.isArray(raw)) {
@@ -665,6 +700,7 @@
               id: msgId,
               role: role || "user",
               isImage: true,
+              imageUrls: imageUrls,
               imageUrl: imageUrls[0],
               content: content,
             });
@@ -679,6 +715,7 @@
               id: msgId,
               role: role || "user",
               isImage: true,
+              imageUrls: [String(imageUrl)],
               imageUrl: String(imageUrl),
             });
             continue;
@@ -829,11 +866,12 @@
           var msg = list[i];
           if (!msg) continue;
           if (msg.role === "user") {
-            if (msg.isImage && msg.imageUrl) {
+            var imageUrls = getMessageImageUrls(msg);
+            if (msg.isImage && imageUrls.length) {
               html +=
-                '<div class="row row--user"><div class="user-bubble"><img class="user-bubble__image" src="' +
-                escHtml(msg.imageUrl) +
-                '" alt="图片" loading="lazy" decoding="async" /></div></div>';
+                '<div class="row row--user"><div class="user-bubble">' +
+                buildUserBubbleImagesHtml(imageUrls) +
+                "</div></div>";
               var imageUserText = String(msg.content || "").trim();
               if (imageUserText) {
                 html +=
@@ -899,7 +937,7 @@
           var msg = list[i];
           if (!msg) continue;
           if (msg.role === "user") {
-            if (msg.isImage && msg.imageUrl) {
+            if (msg.isImage && getMessageImageUrls(msg).length) {
               count += 1;
               continue;
             }