feat: PDD 商品页面 (#18)

打通 Client↔Admin 闭环的一环：录入 PDD 链接 → 创建采集任务 →
客户端领走去采 → 规格和价格显示在页面上。#16 写的 MarkCollecting 和
SoftDeletePddProduct 至此才有生产调用方。

链接解析严格、不做容错兜底：goods_id 上有 UNIQUE 约束，防重全靠它。
猜一个的话同一商品会存成好几行、采好几遍，规格映射还说不清指向哪一行。
短链一律拒绝，卡域名是为了拦"粘了淘宝链接"这种失误。

创建采集任务先占状态再建任务：MarkCollecting 只在 pending/failed 时成功，
同时充当"有没有人已经在采"的判断，与建任务在同一事务里，
所以并发点多次只会建出一个任务（实测 4 并发 → 1 条）。

submit.go 的 collectedData 增加 Dimensions —— 没有它就只能按 Go 的 map
遍历，而 map 无序，同一商品每次刷新"颜色/尺码"的先后都可能变。

顺带修 #16 一处缺陷：EnsurePddProduct 复活分支清空了 skus_json 却漏了
title，导致复活后状态显示"未采集"但标题还留着旧值。

审查打回一次：清理"PDD 链接唯一的录入口"这一过期说法（全库 5 处），
以及 shopee.go 里"空 → no_link"的过期 TODO —— no_link 已在 #16
从 CHECK 约束删除，照写会直接撞约束。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

admin/static/js/app.js

@@ -56,32 +56,125 @@
   }
 
   /* ── 删除前二次确认 ────────────────────────
-     标了 data-confirm-delete 的表单，提交前必须确认，
-     并明确告诉用户会删掉几条、不可恢复。 */
+     标了 data-confirm-delete 的元素，提交前必须确认，
+     并明确告诉用户会删掉几条、能不能恢复。
+
+     标在表单上就拦 submit，标在按钮上就拦 click——
+     一个表单配多个提交按钮时（PDD 页就是），只有删除那个要确认。
+
+     属性值可以写自定义文案，里面的 {n} 会替换成勾选条数；
+     不写就用默认那句。 */
+  var DEFAULT_CONFIRM = "将删除 {n} 条记录，不可恢复。确定继续？";
+
   function setupConfirmDelete() {
-    document.querySelectorAll("[data-confirm-delete]").forEach(function (form) {
-      form.addEventListener("submit", function (e) {
+    document.querySelectorAll("[data-confirm-delete]").forEach(function (el) {
+      var isForm = el.tagName === "FORM";
+      el.addEventListener(isForm ? "submit" : "click", function (e) {
         var n = checkedCount();
         if (n === 0) {
           e.preventDefault();
           return;
         }
-        if (!window.confirm("将删除 " + n + " 条记录，不可恢复。确定继续？")) {
+        var text = el.getAttribute("data-confirm-delete") || DEFAULT_CONFIRM;
+        if (!window.confirm(text.replace("{n}", n) + "\n\n确定继续？")) {
           e.preventDefault();
         }
       });
     });
   }
 
+  /* ── 弹窗 ──────────────────────────────────
+     弹窗**内容由服务端渲染**，这里只负责显示、隐藏和把内容取回来。
+     不要在这里拼业务数据——价格格式、规格顺序都是业务规则，
+     散到前端就没人维护得住了。 */
+
+  function openModal(modal) {
+    modal.hidden = false;
+    var focusable = modal.querySelector("input, button");
+    if (focusable) focusable.focus();
+  }
+
+  function closeModal(modal) {
+    modal.hidden = true;
+  }
+
+  function setupModals() {
+    /* 打开：按钮上写 data-modal-open="弹窗的 id" */
+    document.querySelectorAll("[data-modal-open]").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        var modal = document.getElementById(btn.getAttribute("data-modal-open"));
+        if (modal) openModal(modal);
+      });
+    });
+
+    document.querySelectorAll(".modal-backdrop").forEach(function (modal) {
+      /* 关闭：叉、取消按钮，以及点弹窗外面的灰底 */
+      modal.addEventListener("click", function (e) {
+        if (e.target === modal || e.target.closest("[data-modal-close]")) {
+          closeModal(modal);
+        }
+      });
+    });
+
+    /* Esc 关掉最上面那个打开着的弹窗 */
+    document.addEventListener("keydown", function (e) {
+      if (e.key !== "Escape") return;
+      var open = document.querySelectorAll(".modal-backdrop:not([hidden])");
+      if (open.length > 0) closeModal(open[open.length - 1]);
+    });
+  }
+
+  /* ── 双击行打开详情弹窗 ────────────────────
+     行上写 data-detail-id，双击时去 /<模块>/detail?id=… 取回
+     已经渲染好的 HTML 片段，塞进壳子里显示。 */
+  function setupRowDetail() {
+    var modal = document.getElementById("detail-modal");
+    if (!modal) return;
+
+    var slot = modal.querySelector("[data-detail-slot]");
+    var base = modal.getAttribute("data-detail-url") || "";
+
+    document.querySelectorAll("tr[data-detail-id]").forEach(function (row) {
+      row.addEventListener("dblclick", function (e) {
+        /* 双击到勾选框或链接上时不要弹窗，那是另一个动作 */
+        if (e.target.closest("input, a, button")) return;
+
+        slot.innerHTML = "<div class='modal-body'>正在加载…</div>";
+        openModal(modal);
+
+        fetch(base + "?id=" + encodeURIComponent(row.getAttribute("data-detail-id")), {
+          headers: { "X-Requested-With": "fetch" }
+        })
+          .then(function (resp) {
+            if (!resp.ok) throw new Error("HTTP " + resp.status);
+            return resp.text();
+          })
+          .then(function (html) {
+            slot.innerHTML = html;
+          })
+          .catch(function (err) {
+            /* 出错也要说清楚，不能让弹窗一直停在"正在加载…" */
+            slot.innerHTML =
+              "<div class='modal-body'><p class='missing'>打不开详情：" +
+              err.message +
+              "。刷新页面后重试。</p></div>" +
+              "<div class='modal-foot'><button type='button' data-modal-close>关闭</button></div>";
+          });
+      });
+    });
+  }
+
   document.addEventListener("DOMContentLoaded", function () {
     document.querySelectorAll("table").forEach(setupCheckAll);
     setupConfirmDelete();
+    setupModals();
+    setupRowDetail();
     syncButtons();
   });
 
-  /* TODO(骨架): 双击行打开弹窗。
-     蝦皮数据页 -> 编辑弹窗（填 PDD 链接 + 采集按钮）
+  /* TODO(骨架): 另外两个页面的弹窗，做法照 PDD 商品页抄：
+     蝦皮数据页 -> 编辑弹窗（填 PDD 链接）
      顺运宝页   -> 规格匹配弹窗
-     实现时注意：弹窗内容由服务端渲染，这里只负责显示/隐藏，
-     不要在前端拼业务数据。 */
+     页面里放一个 id="detail-modal" 的壳子、行上写 data-detail-id，
+     服务端出一个返回片段的 /<模块>/detail，这里就不用再加代码了。 */
 })();