feat(product-create): upload-first 建商品 —— 图拖入即进桶,创建时带 asset 一块落库

- 抽屉拖入/选图 → 立刻 POST /api/assets/upload/ 传进 TOS 桶拿 asset id(每张带上传中/完成/失败态,
  首图标「主图」=cover_asset);上传未完成禁用「创建商品」
- 点创建 → POST /api/products/ 直接带 cover_asset + images inline 落库,一步到位,不再「先建后传图」
  (那条因传图接口需先有商品 ID,与「创建必须带图」校验天然冲突 → 建商品恒 400「商品创建失败」)
- 同步读取 File:addImages 一进来就 Array.from 取文件,避免 pickImage 紧接的 input.value="" 清空
  input.files 导致「第一次点没反应、第二次才上传」;选好即发起上传,不靠会滞后的 effect
- 后端保留「创建必须带图」校验(upload-first 下可满足、且正确)

真实接口验:独立上传 201 → 带 cover+images 创建 201(落库)→ 无图创建 400;tsc/build/后端测试通过。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-23 16:28:53 +08:00
co-authored by Claude Opus 4.8
parent 6916f9c877
commit f02c8053a1
4 changed files with 78 additions and 54 deletions
+14
View File
@@ -461,6 +461,20 @@
.pc-drawer .form-card .pf-thumb:hover .pf-x,
.pc-drawer .form-card .pf-thumb:focus-within .pf-x { opacity: 1; }
.pc-drawer .form-card .pf-thumb .pf-x svg { width: 11px; height: 11px; }
/* upload-first 状态:上传中遮罩转圈 / 失败红底提示 / 主图角标(第一张=cover_asset) */
.pc-drawer .form-card .pf-thumb .pf-state {
position: absolute; inset: 0; display: grid; place-items: center;
background: color-mix(in srgb, var(--surface) 58%, transparent);
font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-56);
}
.pc-drawer .form-card .pf-thumb .pf-state-err { background: var(--crimson-bg); color: var(--accent-crimson); font-weight: 600; }
.pc-drawer .form-card .pf-thumb.pf-error { border-color: var(--crimson-bd); }
.pc-drawer .form-card .pf-thumb .pf-cover {
position: absolute; left: 4px; bottom: 4px; z-index: 1;
background: var(--heat); color: var(--accent-white);
font-family: var(--font-mono); font-size: 10px; line-height: 1;
padding: 3px 6px; border-radius: var(--r-sm);
}
/* ─── 校验态 · 必填红字 / 输入框红框(原内联 style 抽成类) ─── */
.pc-drawer .form-card .input.is-error,