feat: 区分顺运宝标题与图片交互 (#105)

admin/static/css/app.css

@@ -511,6 +511,49 @@ select {
   border-radius: 3px;
   vertical-align: middle;
 }
+.table-title-action,
+.thumb-action {
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+.table-title-action {
+  display: block;
+  max-width: 100%;
+  padding: 2px 0;
+  overflow: hidden;
+  color: #0969da;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.table-title-action:hover { text-decoration: underline; }
+.thumb-action {
+  padding: 3px;
+  border-radius: 4px;
+  line-height: 0;
+}
+.thumb-action:hover { background: #e8edf3; }
+.table-title-action:focus-visible,
+.thumb-action:focus-visible {
+  outline: 2px solid #0969da;
+  outline-offset: 2px;
+}
+.image-preview-modal { max-width: min(1120px, calc(100vw - 32px)); }
+.image-preview-body {
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+}
+.image-preview-body img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(100vh - 190px);
+  object-fit: contain;
+}
+.image-preview-body img[hidden] { display: none; }
+.image-preview-status { margin: 0; }
 
 /* ── 错误页 ───────────────────────────── */
 .error-box {

admin/static/js/app.js

@@ -296,6 +296,8 @@
     var base = modal.getAttribute("data-detail-url") || "";
 
     function loadDetail(id) {
+      if (!modal.hidden && modal.getAttribute("data-loaded-detail-id") === id) return;
+      modal.setAttribute("data-loaded-detail-id", id);
       slot.innerHTML = "<div class='modal-body'>正在加载…</div>";
       openModal(modal);
 
@@ -336,6 +338,45 @@
     });
   }
 
+  /* 顺运宝缩略图使用上游图片 URL。这里只在弹窗里放大展示，
+     不代理、不下载图片；加载失败时保留新窗口重试入口。 */
+  function setupImagePreview() {
+    var modal = document.getElementById("image-preview-modal");
+    if (!modal) return;
+    var image = modal.querySelector("[data-image-preview-image]");
+    var title = modal.querySelector("[data-image-preview-title]");
+    var status = modal.querySelector("[data-image-preview-status]");
+    var link = modal.querySelector("[data-image-preview-link]");
+    if (!image || !title || !status || !link) return;
+
+    document.querySelectorAll("[data-image-preview-url]").forEach(function (button) {
+      button.addEventListener("click", function () {
+        var url = button.getAttribute("data-image-preview-url") || "";
+        var productTitle = button.getAttribute("data-image-preview-title") || "商品";
+        title.textContent = productTitle + " · 原图";
+        link.href = url;
+        image.alt = productTitle + " 原图";
+        image.hidden = true;
+        status.hidden = false;
+        status.classList.remove("missing");
+        status.textContent = "正在加载原图…";
+        openModal(modal);
+
+        image.onload = function () {
+          status.hidden = true;
+          image.hidden = false;
+        };
+        image.onerror = function () {
+          image.hidden = true;
+          status.hidden = false;
+          status.classList.add("missing");
+          status.textContent = "原图加载失败，请在新窗口打开或稍后重试。";
+        };
+        image.src = url;
+      });
+    });
+  }
+
   /* ── 顺运宝登录弹窗：验证码"换一张" ─────────────
      图片本身、以及旁边的"换一张"按钮，点了都重新请求验证码接口。
      `[必须]` 每次请求带一个新的时间戳查询参数，绕开浏览器缓存——
@@ -446,6 +487,7 @@
     setupUploadFeedback();
     setupModals();
     setupRowDetail();
+    setupImagePreview();
     setupCaptchaRefresh();
     setupSybSyncFeedback();
     setupSybHistoryRefresh();