/* Admin 的全部 JavaScript。 * * 原生 JS,没有框架、没有构建步骤——见 admin/AGENTS.md 前端约束。 * 只做三件纯前端的事:全选、删除前二次确认、按钮禁用。 * 搜索、删除、导入本身都是普通表单 POST,服务端渲染,不需要 JS。 * * 不要往这里加业务逻辑。业务逻辑在服务端。 */ (function () { "use strict"; /* ── 全选 / 反选 ────────────────────────────── 表头的勾选框控制本表格所有行的勾选框。 */ function setupCheckAll(root) { var master = root.querySelector("[data-check-all]"); if (!master) return; var table = master.closest("table"); if (!table) return; function rowBoxes() { return table.querySelectorAll("tbody input[type=checkbox]"); } master.addEventListener("change", function () { rowBoxes().forEach(function (box) { box.checked = master.checked; }); syncButtons(); }); table.addEventListener("change", function (e) { if (e.target.type !== "checkbox" || e.target === master) return; var boxes = Array.prototype.slice.call(rowBoxes()); master.checked = boxes.length > 0 && boxes.every(function (b) { return b.checked; }); syncButtons(); }); } /* ── 选中数量 ────────────────────────────── */ function checkedCount() { return document.querySelectorAll( "tbody input[type=checkbox]:checked" ).length; } /* ── 需要勾选才能点的按钮 ────────────────── 标了 data-need-checked 的按钮,没勾选任何行时禁用。 */ function syncButtons() { var n = checkedCount(); document.querySelectorAll("[data-need-checked]").forEach(function (btn) { btn.disabled = n === 0; }); } /* ── 删除前二次确认 ──────────────────────── 标了 data-confirm-delete 的表单,提交前必须确认, 并明确告诉用户会删掉几条、不可恢复。 */ function setupConfirmDelete() { document.querySelectorAll("[data-confirm-delete]").forEach(function (form) { form.addEventListener("submit", function (e) { var n = checkedCount(); if (n === 0) { e.preventDefault(); return; } if (!window.confirm("将删除 " + n + " 条记录,不可恢复。确定继续?")) { e.preventDefault(); } }); }); } document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("table").forEach(setupCheckAll); setupConfirmDelete(); syncButtons(); }); /* TODO(骨架): 双击行打开弹窗。 蝦皮数据页 -> 编辑弹窗(填 PDD 链接 + 采集按钮) 顺运宝页 -> 规格匹配弹窗 实现时注意:弹窗内容由服务端渲染,这里只负责显示/隐藏, 不要在前端拼业务数据。 */ })();