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/css/app.css

@@ -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;