From ac018cb6187755f2e1ae29a51befc24845772123 Mon Sep 17 00:00:00 2001 From: dekun Date: Sun, 19 Jul 2026 16:27:42 +0800 Subject: [PATCH] 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 --- lib/common/static/instance_page.css | 2 +- lib/common/static/options_review.js | 46 ++++++++++++++++--- lib/instance/templates/embed_shell.html | 2 +- lib/instance/templates/index.html | 2 +- .../templates/options_review_panel.html | 17 ++++++- 5 files changed, 58 insertions(+), 11 deletions(-) diff --git a/lib/common/static/instance_page.css b/lib/common/static/instance_page.css index 6c7c94e..8a3480b 100644 --- a/lib/common/static/instance_page.css +++ b/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} diff --git a/lib/common/static/options_review.js b/lib/common/static/options_review.js index c272a70..d77b230 100644 --- a/lib/common/static/options_review.js +++ b/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") { - global.showImage(src); - } else if (typeof window.showImage === "function") { - window.showImage(src); - } else { - global.open(src, "_blank"); - } + showLightbox(src); }); }); } @@ -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(); }); diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index 4368857..7249e4a 100644 --- a/lib/instance/templates/embed_shell.html +++ b/lib/instance/templates/embed_shell.html @@ -6,7 +6,7 @@ - + diff --git a/lib/instance/templates/index.html b/lib/instance/templates/index.html index 2a766aa..a8f5a77 100644 --- a/lib/instance/templates/index.html +++ b/lib/instance/templates/index.html @@ -16,7 +16,7 @@ {{ pwa_app_name }} - + diff --git a/lib/options/templates/options_review_panel.html b/lib/options/templates/options_review_panel.html index f394c6e..e428d17 100644 --- a/lib/options/templates/options_review_panel.html +++ b/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 @@
+ {# 截图放大层(高于详情弹窗) #} + {# 4. 统计 #}
@@ -271,4 +286,4 @@
- +