图片点击可以放大预览

HBuilderProjects/shareAiConsult.html

@@ -160,6 +160,7 @@
       height: auto;
       margin: 8px 0;
       border-radius: 6px;
+      cursor: pointer;
     }
 
     .user-bubble__image {
@@ -194,6 +195,47 @@
       max-width: none;
       object-fit: cover;
       border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .image-preview {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 10004;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      background: rgba(0, 0, 0, 0.92);
+    }
+
+    .image-preview.is-open {
+      display: flex;
+    }
+
+    .image-preview__img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      -webkit-user-drag: none;
+      user-select: none;
+      pointer-events: none;
+    }
+
+    .image-preview__close {
+      position: absolute;
+      top: calc(12px + env(safe-area-inset-top, 0px));
+      right: 12px;
+      z-index: 1;
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.18);
+      color: #fff;
+      font-size: 24px;
+      line-height: 1;
+      cursor: pointer;
     }
 
     .fallback-card {
@@ -459,6 +501,11 @@
     </div>
   </div>
 
+  <div class="image-preview" id="imagePreview" aria-hidden="true">
+    <button type="button" class="image-preview__close" id="imagePreviewClose" aria-label="关闭预览">×</button>
+    <img class="image-preview__img" id="imagePreviewImg" src="" alt="图片预览" />
+  </div>
+
   <div class="fab-wrap">
     <div class="fab-dock__slot">
       <!-- 与 secondShareGoods 相同顺序：openApp 在下，launch-btn 在上，避免挡住点击 -->
@@ -966,6 +1013,52 @@
         }
       }
 
+      function showImagePreview(url) {
+        var urlStr = String(url || "").trim();
+        if (!urlStr) return;
+        var mask = document.getElementById("imagePreview");
+        var img = document.getElementById("imagePreviewImg");
+        if (!mask || !img) return;
+        img.src = urlStr;
+        mask.classList.add("is-open");
+        mask.setAttribute("aria-hidden", "false");
+        document.body.style.overflow = "hidden";
+      }
+
+      function hideImagePreview() {
+        var mask = document.getElementById("imagePreview");
+        var img = document.getElementById("imagePreviewImg");
+        if (!mask) return;
+        mask.classList.remove("is-open");
+        mask.setAttribute("aria-hidden", "true");
+        if (img) img.src = "";
+        document.body.style.overflow = "";
+      }
+
+      function bindImagePreviewEvents() {
+        var main = document.getElementById("main");
+        var mask = document.getElementById("imagePreview");
+        var closeBtn = document.getElementById("imagePreviewClose");
+        if (main) {
+          main.addEventListener("click", function (e) {
+            var target = e.target;
+            if (!target || target.tagName !== "IMG") return;
+            if (
+              target.classList.contains("user-bubble__image") ||
+              target.classList.contains("ai-card__image")
+            ) {
+              showImagePreview(target.getAttribute("src") || target.src);
+            }
+          });
+        }
+        if (closeBtn) closeBtn.addEventListener("click", hideImagePreview);
+        if (mask) {
+          mask.addEventListener("click", function (e) {
+            if (e.target === mask) hideImagePreview();
+          });
+        }
+      }
+
       function fetchConversationHistory(sessionId, userId, type) {
         var requestUrl = buildConversationApiUrl(sessionId, userId, type);
         var apiBase = getConversationApiBase(type);
@@ -1935,6 +2028,7 @@
         }
 
         bindApiDebugModalEvents();
+        bindImagePreviewEvents();
         loadPageData();
       }
 

HBuilderProjects/shareAiKfChat.html

@@ -160,6 +160,7 @@
       height: auto;
       margin: 8px 0;
       border-radius: 6px;
+      cursor: pointer;
     }
 
     .user-bubble__image {
@@ -194,6 +195,47 @@
       max-width: none;
       object-fit: cover;
       border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .image-preview {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 10004;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      background: rgba(0, 0, 0, 0.92);
+    }
+
+    .image-preview.is-open {
+      display: flex;
+    }
+
+    .image-preview__img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      -webkit-user-drag: none;
+      user-select: none;
+      pointer-events: none;
+    }
+
+    .image-preview__close {
+      position: absolute;
+      top: calc(12px + env(safe-area-inset-top, 0px));
+      right: 12px;
+      z-index: 1;
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.18);
+      color: #fff;
+      font-size: 24px;
+      line-height: 1;
+      cursor: pointer;
     }
 
     .fallback-card {
@@ -347,6 +389,11 @@
 
   <div id="openAppToast" role="status" aria-live="polite"></div>
 
+  <div class="image-preview" id="imagePreview" aria-hidden="true">
+    <button type="button" class="image-preview__close" id="imagePreviewClose" aria-label="关闭预览">×</button>
+    <img class="image-preview__img" id="imagePreviewImg" src="" alt="图片预览" />
+  </div>
+
   <div class="fab-wrap">
     <div class="fab-dock__slot">
       <!-- 与 secondShareGoods 相同顺序：openApp 在下，launch-btn 在上，避免挡住点击 -->
@@ -763,6 +810,52 @@
         };
       }
 
+      function showImagePreview(url) {
+        var urlStr = String(url || "").trim();
+        if (!urlStr) return;
+        var mask = document.getElementById("imagePreview");
+        var img = document.getElementById("imagePreviewImg");
+        if (!mask || !img) return;
+        img.src = urlStr;
+        mask.classList.add("is-open");
+        mask.setAttribute("aria-hidden", "false");
+        document.body.style.overflow = "hidden";
+      }
+
+      function hideImagePreview() {
+        var mask = document.getElementById("imagePreview");
+        var img = document.getElementById("imagePreviewImg");
+        if (!mask) return;
+        mask.classList.remove("is-open");
+        mask.setAttribute("aria-hidden", "true");
+        if (img) img.src = "";
+        document.body.style.overflow = "";
+      }
+
+      function bindImagePreviewEvents() {
+        var main = document.getElementById("main");
+        var mask = document.getElementById("imagePreview");
+        var closeBtn = document.getElementById("imagePreviewClose");
+        if (main) {
+          main.addEventListener("click", function (e) {
+            var target = e.target;
+            if (!target || target.tagName !== "IMG") return;
+            if (
+              target.classList.contains("user-bubble__image") ||
+              target.classList.contains("ai-card__image")
+            ) {
+              showImagePreview(target.getAttribute("src") || target.src);
+            }
+          });
+        }
+        if (closeBtn) closeBtn.addEventListener("click", hideImagePreview);
+        if (mask) {
+          mask.addEventListener("click", function (e) {
+            if (e.target === mask) hideImagePreview();
+          });
+        }
+      }
+
       function fetchConversationHistory(sessionId, userId, clientType) {
         var requestUrl = buildConversationApiUrl(sessionId, userId, clientType);
         var requestParams = buildConversationRequestParams(sessionId, userId, clientType);
@@ -1690,6 +1783,7 @@
           }
         }
 
+        bindImagePreviewEvents();
         loadPageData();
       }