ShopSystem Day 11 完成路线图第一阶段基础补全第一项 SKU 多规格:商品编辑页可增删 SKU,详情页勾选规格后加购,购物车/订单显示规格名+价格差。架构零迁移(product_variants 表与 cart_items.variant_id / order_items.variant_id 已预留),只接 UI + API。配套修了 2 个真 bug(attributes JSON 解析 + ensureCart Set-Cookie),并对用户测试时发现的 3 个 SKU 创建假 bug 做了根因排查(实际是浏览器 session 状态丢失导致前端 useEffect 跳走)。

商家后台商品编辑页右栏新增 SKU 编辑卡,每行 4 个字段(SKU 编码 / 规格名 / 价格差 / 库存)+ 删除按钮,底部”+ 添加 SKU”按钮可一键加多行。保存时 PATCH body 传 variants 数组,后端事务全删全插(SKU 数量通常 < 20,简单可靠)。价格差支持正负(高档 +50 / 促销 -20),改商品主价时所有 SKU 同步调整。无 SKU 的老商品继续走 product.price + product.stock 老逻辑,完全兼容。
商品详情页(Day 11 核心功能):有 SKU 的商品从 product_variants.attributes JSON 提取 unique keys(常见 color / size),每个 key 渲染一行按钮组。选中组合 → 唯一确定 variant → 解锁”加入购物车”按钮。Bug 修复方面,safeParseJSON 之前假设 mysql2 driver 返 JSON string,实际 MySQL 8 JSON 字段默认返 parsed object,导致 attributes 解析失败、规格按钮组不渲染——修后兼容两种类型输入。

如截图所示,详情页尺寸 + 颜色两行按钮组,选完后变体库存实时显示在数量加减器旁。Day 11 收工时已验证 curl 8 个 e2e case(创建带 SKU 商品 + 加购不同 variant + 价格差计算 + 同 variant 合并 + 库存不足返 400 + 老商品无 SKU 兼容)+ Playwright 完整浏览器流程跑通(productId=12 + variant 入库)。购物车和订单详情都显示”规格: 红色 L”等变体名,让用户清楚知道买的是哪个 SKU。踩坑方面,mysql2 JSON column 必须用兼容 helper 解析;Next.js Route Handler 调 cookies().set() helper 必须配合 res.cookies.set() 显式写回,否则浏览器拿不到 session cookie 导致每次请求创建新 cart。

Day 11 新增铁律 1 条(mysql2 JSON column 处理),真 Bug 修复 2 个,任务 1/1 主线(SKU 多规格)完成。Day 12 按路线图是优惠券系统(coupons 表已建,补 API + 用户领取/使用 + 后台管理)。代码 commit 已推送到 GitHub main 分支,11 个文件改动 480 行新增 / 110 行修改。累计项目:ShopSystem Day 11 / 目标 30+ 天…
OpenClaw—AI研究