# Study 12：把这一份配好

2026-09-23 · 详情页局部设计实验。来源与检验入口延续 Study 11 的比例。

## 设计判断

用户指出零散的行列让规格看起来像互斥选项。实际下单需要同时确定克重、做法、切法和份数：做法会给出切法建议，用户可再改切法，克重和份数共同确定总量与价格。

现将四项收在有明确外边界的“配好这一份”中。克重和做法使用紧凑的横向行，切法在同一单内获得全宽，五种切法也能出现；份数是配肉单的最后一项。细分隔线组织阅读，但只有一张表单的整体轮廓。购买栏实时展示完整选择，操作和结果形成闭环。

与上一版相比，卡片增加了一层柔和边界，代价是些许面积；换来的是“这些选择合起来才是我的肉”的语义。并不把四项变成逐步向导，用户可以按自己习惯调整顺序。来源页仍由轻入口独立打开。

## 验证与边界

本地 Chromium 截图查看393×659的猪梅花肉及五切法牛里脊、320×659的牛里脊。393×659下两款的份数区底边约528px，购买栏从约579px开始。320宽牛里脊五切法换行，份数可随页面自然滚动。截图见 `prep-proof/`。

`verify-counter.mjs` 检查多视口、八种商品、键盘规格选择、做法带出切法、手动改切法、数量、完整规格汇总、金额、加购和来源往返；整套货架与业务路径脚本另行回归。[规格验证结果](counter-proof/results.json)与[393px猪梅花肉截图](prep-proof/pork-393.png)、[320px牛里脊截图](prep-proof/beef-320.png)可复核。以上为浏览器行为和尺寸证据，无法代替真机拇指操作和用户审美判断。

最终回归：[26路由与8条操作路径](prep-proof/full/evidence.json)通过、未捕获页面脚本错误；[9项异常恢复](prep-proof/full/boundaries.json)通过；[78项布局观测](prep-proof/full/viewports.json)无外层或内部横向溢出。原版93个源码文件仍与 `35c0d16` 相同。诊断导航取得的路由截图不等于入口可发现性验收，计划购买状态的原版两项语义分歧仍开放。

具体回退点：`study-transform.mjs` 的 `care-prep` 包装、切法提示与购买栏规格汇总，`study-care.css` 的 Study 12 段。上游源码保持只读，不涉及定价、库存、来源资料和配送规则。320窄屏及放大字体允许自然滚动；若进一步提高信息密度会损伤触控与可读性，需以真机检验。