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>
This commit is contained in:
chengma
@@ -135,6 +135,99 @@ tr.empty small { color: #aaa; }
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 链接和标题这类长内容截断显示，鼠标悬停看全文（title 属性）。
|
||||
不截断的话一列能把表格撑到屏幕外面去。 */
|
||||
.truncate {
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ── 弹窗 ─────────────────────────────── */
|
||||
/* 用 hidden 属性控制显示隐藏，JS 只改这一个属性，不拼样式 */
|
||||
.modal-backdrop[hidden] { display: none; }
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(20, 24, 30, .45);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 40px 16px;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
.modal {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
}
|
||||
.modal-head h2 { margin: 0; font-size: 16px; flex: 1; }
|
||||
.modal-x {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
padding: 0 6px;
|
||||
color: #666;
|
||||
}
|
||||
.modal-body { padding: 16px; }
|
||||
.modal-body h3 { font-size: 14px; margin: 20px 0 8px; }
|
||||
.modal-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #e1e4e8;
|
||||
background: #fafbfc;
|
||||
}
|
||||
/* 把左边的按钮和右边的按钮推开 */
|
||||
.modal-foot .grow { flex: 1; }
|
||||
button.primary {
|
||||
background: #1f6feb;
|
||||
border-color: #1f6feb;
|
||||
color: #fff;
|
||||
}
|
||||
button.primary:hover { background: #1a5fd0; }
|
||||
|
||||
/* 弹窗里的字段表：左边标签，右边值 */
|
||||
.detail {
|
||||
display: grid;
|
||||
grid-template-columns: 88px 1fr;
|
||||
gap: 8px 12px;
|
||||
margin: 0;
|
||||
align-items: baseline;
|
||||
}
|
||||
.detail dt { color: #555; }
|
||||
.detail dd { margin: 0; word-break: break-all; }
|
||||
.detail dd small { color: #999; margin-left: 6px; }
|
||||
|
||||
/* 创建弹窗里的单个字段，标签在输入框上面 */
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field label { color: #555; }
|
||||
input[type="text"] {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ccd1d6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
input.wide { width: 100%; }
|
||||
|
||||
select {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ccd1d6;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ── 错误页 ───────────────────────────── */
|
||||
.error-box {
|
||||
background: #fff;
|
||||
|
||||
+102
-9
@@ -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，这里就不用再加代码了。 */
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user