Show options review image zoom above the detail modal.

Add a dedicated lightbox above the review dialog and raise global imgModal z-index so enlargements are no longer hidden behind it.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/instance_page.css

@@ -88,7 +88,7 @@
         .mood-grid{display:flex;gap:10px;flex-wrap:wrap;font-size:.82rem;color:#d7d7ea}
         .mood-grid label{display:flex;align-items:center;gap:3px}
         .screenshot{width:100px;border-radius:6px;cursor:pointer;margin-top:6px}
-        .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.78);justify-content:center;align-items:center;z-index:1210}
+        .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.78);justify-content:center;align-items:center;z-index:2100}
         .modal img{max-width:90%;max-height:90%;border-radius:8px}
         .detail-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.78);justify-content:center;align-items:center;z-index:1200;padding:20px}
         .detail-modal .panel{width:min(92vw,980px);max-height:88vh;overflow:auto;background:#121726;border:1px solid #2a3150;border-radius:10px;padding:14px}

lib/common/static/options_review.js

@@ -476,7 +476,34 @@
       });
   }
 
+  function hideLightbox() {
+    var box = $("or-img-lightbox");
+    if (box) box.hidden = true;
+    var img = $("or-img-lightbox-img");
+    if (img) img.src = "";
+  }
+
+  function showLightbox(src) {
+    var url = String(src || "").trim();
+    if (!url) return;
+    var box = $("or-img-lightbox");
+    var img = $("or-img-lightbox-img");
+    if (box && img) {
+      img.src = url;
+      box.hidden = false;
+      return;
+    }
+    if (typeof global.showImage === "function") {
+      global.showImage(url);
+    } else if (typeof window.showImage === "function") {
+      window.showImage(url);
+    } else {
+      global.open(url, "_blank");
+    }
+  }
+
   function hideDetail() {
+    hideLightbox();
     var backdrop = $("or-detail-backdrop");
     if (backdrop) backdrop.hidden = true;
   }
@@ -586,13 +613,7 @@
       });
       img.addEventListener("click", function () {
         var src = img.getAttribute("data-src") || img.src;
-        if (typeof global.showImage === "function") {
+        showLightbox(src);
-          global.showImage(src);
-        } else if (typeof window.showImage === "function") {
-          window.showImage(src);
-        } else {
-          global.open(src, "_blank");
-        }
       });
     });
   }
@@ -1169,8 +1190,19 @@
         if (ev.target === detailBackdrop) hideDetail();
       });
     }
+    var lightbox = $("or-img-lightbox");
+    if (lightbox) {
+      lightbox.addEventListener("click", function () {
+        hideLightbox();
+      });
+    }
     document.addEventListener("keydown", function (ev) {
       if (ev.key !== "Escape") return;
+      var lb = $("or-img-lightbox");
+      if (lb && !lb.hidden) {
+        hideLightbox();
+        return;
+      }
       var bd = $("or-detail-backdrop");
       if (bd && !bd.hidden) hideDetail();
     });

lib/instance/templates/embed_shell.html

@@ -6,7 +6,7 @@
     <script src="/static/instance_theme.js?v=50"></script>
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
-    <link rel="stylesheet" href="/static/instance_page.css?v=10">
+    <link rel="stylesheet" href="/static/instance_page.css?v=11">
     <link rel="stylesheet" href="/static/instance_theme.css?v=97">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">

lib/instance/templates/index.html

@@ -16,7 +16,7 @@
     <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ pwa_app_name }}</title>
-    <link rel="stylesheet" href="/static/instance_page.css?v=10">
+    <link rel="stylesheet" href="/static/instance_page.css?v=11">
     <link rel="stylesheet" href="/static/instance_theme.css?v=97">
 
 </head>

lib/options/templates/options_review_panel.html

@@ -34,6 +34,17 @@
           padding:16px;background:rgba(0,0,0,.72);
         }
         .or-detail-backdrop[hidden]{display:none!important}
+        .or-img-lightbox{
+          position:fixed;inset:0;z-index:2200;
+          display:flex;align-items:center;justify-content:center;
+          padding:16px;background:rgba(0,0,0,.86);cursor:zoom-out;
+        }
+        .or-img-lightbox[hidden]{display:none!important}
+        .or-img-lightbox img{
+          max-width:min(96vw,1200px);max-height:92vh;
+          object-fit:contain;border-radius:8px;
+          box-shadow:0 12px 40px rgba(0,0,0,.55);
+        }
         .or-detail-modal{
           width:min(96vw,920px);max-height:90vh;overflow:auto;
           background:var(--card-bg,#121726);color:inherit;
@@ -262,6 +273,10 @@
             <div class="or-detail-images" id="or-detail-images"></div>
         </div>
     </div>
+    {# 截图放大层(高于详情弹窗) #}
+    <div id="or-img-lightbox" class="or-img-lightbox" hidden>
+        <img id="or-img-lightbox-img" src="" alt="截图放大">
+    </div>
 
     {# 4. 统计 #}
     <div class="card" style="margin-bottom:10px">
@@ -271,4 +286,4 @@
     </div>
 </div>
 
-<script src="/static/options_review.js?v=15"></script>
+<script src="/static/options_review.js?v=16"></script>