Make options review detail a modal and fix screenshot display.

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

lib/common/static/options_review.js

@@ -464,19 +464,18 @@
   }
 
   function hideDetail() {
-    var panel = $("or-detail-panel");
-    if (panel) panel.classList.add("hidden");
+    var backdrop = $("or-detail-backdrop");
+    if (backdrop) backdrop.hidden = true;
   }
 
   function openDetail(tradeId) {
-    var panel = $("or-detail-panel");
-    if (!panel) return;
-    panel.classList.remove("hidden");
+    var backdrop = $("or-detail-backdrop");
+    if (!backdrop) return;
+    backdrop.hidden = false;
     ($("or-detail-title") || {}).textContent = "加载中…";
     ($("or-detail-meta") || {}).innerHTML = "";
     ($("or-detail-text") || {}).innerHTML = "";
     ($("or-detail-images") || {}).innerHTML = "";
-    panel.scrollIntoView({ behavior: "smooth", block: "nearest" });
 
     fetch("/api/options/review/trades/" + tradeId, { credentials: "same-origin" })
       .then(function (r) {
@@ -494,6 +493,92 @@
       });
   }
 
+  function optionsJournalImgSrc(file) {
+    var name = String(file || "").trim().replace(/\\/g, "/");
+    var slash = name.lastIndexOf("/");
+    if (slash >= 0) name = name.slice(slash + 1);
+    if (!name) return "";
+    return "/static/images/options_journal/" + encodeURIComponent(name);
+  }
+
+  function renderDetailImages(images) {
+    var imagesHost = $("or-detail-images");
+    if (!imagesHost) return;
+    var byTf = {};
+    (images || []).forEach(function (img) {
+      var tf = String((img && img.tf) || "").trim();
+      var file = String((img && img.file) || "").trim();
+      if (!file) return;
+      var key = tf || "_";
+      byTf[key] = file;
+    });
+    var order = ["5m", "15m", "1h", "4h"];
+    var keys = order.slice();
+    Object.keys(byTf).forEach(function (k) {
+      if (keys.indexOf(k) < 0) keys.push(k);
+    });
+    var cells = keys
+      .map(function (tf) {
+        var file = byTf[tf];
+        if (!file) {
+          if (order.indexOf(tf) < 0) return "";
+          return (
+            '<div class="or-detail-img-cell">' +
+            '<span class="or-detail-img-label">' +
+            escapeHtml(tf) +
+            "</span>" +
+            '<div class="or-detail-img-miss">未上传</div>' +
+            "</div>"
+          );
+        }
+        var src = optionsJournalImgSrc(file);
+        var label = escapeHtml(tf === "_" ? "截图" : tf);
+        return (
+          '<div class="or-detail-img-cell">' +
+          '<span class="or-detail-img-label">' +
+          label +
+          "</span>" +
+          '<img class="or-detail-img-thumb" src="' +
+          src +
+          '" alt="' +
+          label +
+          '" data-src="' +
+          src +
+          '" loading="lazy">' +
+          "</div>"
+        );
+      })
+      .filter(Boolean);
+    if (!cells.length) {
+      imagesHost.innerHTML = '<div class="muted">无截图</div>';
+      return;
+    }
+    imagesHost.innerHTML = cells.join("");
+    imagesHost.querySelectorAll("img").forEach(function (img) {
+      img.addEventListener("error", function () {
+        var cell = img.closest(".or-detail-img-cell");
+        if (!cell) return;
+        var label = cell.querySelector(".or-detail-img-label");
+        var tf = label ? label.textContent : "截图";
+        cell.innerHTML =
+          '<span class="or-detail-img-label">' +
+          escapeHtml(tf) +
+          "</span>" +
+          '<div class="or-detail-img-miss">文件缺失或无法加载</div>';
+      });
+      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");
+        }
+      });
+    });
+  }
+
   function renderDetail(t) {
     var e = t.entry || {};
     reviewedCache[t.id] = t;
@@ -566,42 +651,7 @@
 
     var imagesHost = $("or-detail-images");
     if (imagesHost) {
-      var images = e.images || [];
-      if (!images.length) {
-        imagesHost.innerHTML = '<div class="muted">无截图</div>';
-      } else {
-        imagesHost.innerHTML = images
-          .map(function (img) {
-            var file = String(img.file || "").trim();
-            if (!file) return "";
-            var src = "/static/images/options_journal/" + encodeURIComponent(file).replace(/%2F/g, "/");
-            var label = escapeHtml(img.tf || "截图");
-            return (
-              '<div class="or-detail-img-cell">' +
-              '<span class="or-detail-img-label">' +
-              label +
-              "</span>" +
-              '<img class="or-detail-img-thumb" src="' +
-              src +
-              '" alt="' +
-              label +
-              '" data-src="' +
-              src +
-              '">' +
-              "</div>"
-            );
-          })
-          .join("");
-        imagesHost.querySelectorAll("img").forEach(function (img) {
-          img.addEventListener("click", function () {
-            if (typeof global.showImage === "function") {
-              global.showImage(img.getAttribute("data-src"));
-            } else {
-              global.open(img.getAttribute("data-src"), "_blank");
-            }
-          });
-        });
-      }
+      renderDetailImages(e.images || []);
     }
   }
 
@@ -1075,9 +1125,23 @@
     if (detailEdit) {
       detailEdit.addEventListener("click", function () {
         var id = Number(detailEdit.getAttribute("data-id") || 0);
-        if (id) openJournalForm(id);
+        if (id) {
+          hideDetail();
+          openJournalForm(id);
+        }
       });
     }
+    var detailBackdrop = $("or-detail-backdrop");
+    if (detailBackdrop) {
+      detailBackdrop.addEventListener("click", function (ev) {
+        if (ev.target === detailBackdrop) hideDetail();
+      });
+    }
+    document.addEventListener("keydown", function (ev) {
+      if (ev.key !== "Escape") return;
+      var bd = $("or-detail-backdrop");
+      if (bd && !bd.hidden) hideDetail();
+    });
     ["or-filter-uly", "or-filter-opt", "or-include-hedge-legs"].forEach(function (id) {
       var el = $(id);
       if (el) {