产品需求文档：配方管理（方案 B 主编辑器）

1. 介绍 / 概述

商品详情页的“🧪 配方配置”用于维护一款商品在不同杯型下的实际制作剂量，例如热杯、标准冰、少冰等。

当前生产版本采用“方案 B 主编辑器”：页面内直接展示一个主编辑区，右侧提供杯型切换与修改前后对比，底部提供保存汇总。它替代上一代“点击修改配方按钮 -> 弹窗编辑”的交互，让运营人员在同一页面内完成查看标准杯量、切换杯型、调整成分、恢复当前杯型、确认变化与保存。

本 PRD 只覆盖商品详情页中的“🧪 配方配置”页签。客户可见标签、默认选项、价格和多语言文案继续由“⚙️ 选项配置”页签管理。

2. 目标与非目标

2.1 目标

• 让运营人员进入配方配置后，一眼知道当前编辑的杯型、标准杯量、当前容量和容量偏差。
• 把多杯型平铺卡片改成“主编辑 + 杯型切换 + 对比”的清晰结构，降低误改其他杯型的风险。
• 支持在多个杯型之间切换时保留未保存修改。
• 支持按成分调整剂量，同时明确哪些成分只读、哪些成分可编辑。
• 在保存前汇总已修改杯型、容量偏差和关联商品影响范围。
• 保留既有配方保存、关联商品同步和恢复逻辑，不改变持久化契约。

2.2 非目标

• 不定义复制商品流程下的特殊保存逻辑。
• 不定义“⚙️ 选项配置”页签的标签、默认、价格、多语言文案规则。
• 不定义点单端前台展示样式。
• 不定义设备底层配方文件字段和制作参数协议。
• 不要求在配方主编辑器中编辑标签文案或商品名称。

3. 页面范围与信息架构

3.1 页面路径

• 菜单管理
• 商品管理
• 点击商品进入商品详情
• 切换到“🧪 配方配置”Tab

3.2 顶部页签

商品详情页顶部应提供三个一级配置入口：

3.3 配方配置布局

配方配置页签由四个核心区域组成：

3.4 参考截图总览

4. 用户流程 / 用户故事

UF-001：进入配方配置并识别当前杯型

描述： 作为运营人员，我进入商品详情页的配方配置后，需要立刻知道自己正在编辑哪个杯型，以及这个杯型的标准杯量是多少。

主流程：

1. 用户进入商品详情页。
2. 用户点击“🧪 配方配置”Tab。
3. 页面显示主编辑器，并默认选中第一个可配置杯型。
4. 主编辑器顶部显示杯型名称，例如“热 约355ML”。
5. 主编辑器内以突出样式显示“标准杯量 355ml”。

验收标准：

• [ ] 配方配置页签中不再以“修改配方”按钮作为主要编辑入口。
• [ ] 主编辑器顶部展示当前杯型名称。
• [ ] 标准杯量必须独立展示，视觉优先级高于当前容量和其他摘要信息。
• [ ] 当前容量和容量偏差与标准杯量处于同一信息组内，便于比较。

参考截图：

UF-002：查看容量是否偏离标准杯量

描述： 作为运营人员，我调整成分前后都需要知道当前容量是否偏离标准杯量，避免保存明显不合理的配方。

主流程：

1. 页面读取当前杯型的标准杯量。
2. 页面根据可计算成分汇总当前容量。
3. 页面计算容量偏差：当前容量 - 标准杯量。
4. 当偏差不为 0 时，页面在主编辑器和保存栏中提示偏差。

验收标准：

• [ ] 标准杯量、当前容量、容量偏差三项同时展示。
• [ ] 容量偏差为 0 时显示“匹配”或中性状态。
• [ ] 容量偏差不为 0 时使用警告样式，但不阻断保存。
• [ ] 保存栏文案需要明确到杯型，例如“热 约355ML 容量低于标准杯量 20ml”。

参考截图：

UF-003：切换杯型并保留未保存修改

描述： 作为运营人员，我需要在热、标准冰、少冰等杯型之间来回切换，同时不能丢失尚未保存的修改。

主流程：

1. 用户在当前杯型修改一个成分剂量。
2. 右侧杯型切换列表把该杯型标记为“已修改”。
3. 用户点击另一个杯型。
4. 主编辑器切换到新杯型。
5. 用户再切回原杯型，之前的修改仍然存在。

验收标准：

• [ ] 杯型切换列表展示全部可配置杯型。
• [ ] 当前选中的杯型需要有高亮状态。
• [ ] 已修改杯型显示“已修改”徽标，未修改杯型显示“未修改”或中性状态。
• [ ] 切换杯型不会重置任何未保存编辑。
• [ ] 每个杯型的当前容量按该杯型自己的临时状态计算。

参考截图：

UF-004：调整当前杯型成分剂量

描述： 作为运营人员，我希望通过清晰的成分行修改剂量，并知道每次调整的步长和单位。

主流程：

1. 用户在主编辑器中查看当前杯型成分。
2. 可编辑成分以“成分名 + 减号 + 数值输入 + 单位 + 加号”展示。
3. 用户点击加号或减号，剂量按步长变化。
4. 用户也可以直接输入数值。
5. 页面实时刷新当前容量、容量偏差和修改前后对比。

验收标准：

• [ ] 每个可编辑成分必须有明确名称、当前数值和单位。
• [ ] 液体成分默认以 5ml 为步长。
• [ ] 数值不得小于 0。
• [ ] 空值、非法值在失焦时归一为 0 或恢复到有效整数。
• [ ] 剂量变化后，当前容量、偏差、杯型修改状态和对比面板同步更新。

参考截图：

UF-005：识别只读成分

描述： 作为运营人员，我需要知道哪些成分不能在页面直接修改，避免误以为页面坏了或数据不能保存。

主流程：

1. 页面展示只读成分，例如浓缩。
2. 只读成分不显示加减按钮和可编辑输入框。
3. 页面展示原因说明。

验收标准：

• [ ] 浓缩等由配方文件维护的成分必须显示为只读。
• [ ] 只读行需要展示当前剂量。
• [ ] 只读说明使用业务语言，例如“基底咖啡数值由配方文件维护，不可在此修改”。
• [ ] 只读成分仍参与配方预览和容量展示，除非业务规则明确排除。

参考截图：

UF-006：查看修改前后对比

描述： 作为运营人员，我保存前需要确认这次到底改了什么。

主流程：

1. 用户调整当前杯型成分。
2. 对比面板展示修改前容量和修改后容量。
3. 对比面板展示发生变化的成分，例如“热水 60ml -> 30ml”。
4. 没有变化时，对比面板显示空状态。

验收标准：

• [ ] 对比面板只展示当前选中杯型的变化。
• [ ] 成分变化必须包含修改前值、修改后值和单位。
• [ ] 容量总量变化必须展示修改前后。
• [ ] 无变化时不能展示误导性的变化项。

参考截图：

UF-007：恢复当前杯型修改前状态

描述： 作为运营人员，我只想撤销当前杯型的临时修改，不影响其他杯型已经做过的调整。

主流程：

1. 用户在当前杯型产生修改。
2. 用户点击“恢复当前杯型修改前”。
3. 当前杯型恢复到进入编辑时的状态。
4. 其他杯型的未保存修改保持不变。

验收标准：

• [ ] 恢复按钮只影响当前选中杯型。
• [ ] 恢复后当前杯型的“已修改”状态被清除。
• [ ] 恢复后当前杯型的容量、偏差和对比面板同步刷新。
• [ ] 其他杯型状态不受影响。

UF-008：保存配方并确认影响范围

描述： 作为运营人员，我保存前需要知道这次修改涉及几个杯型，以及是否会同步影响关联商品。

主流程：

1. 用户完成一个或多个杯型的修改。
2. 底部保存栏汇总“已修改 X 个杯型”。
3. 用户点击“保存配方”。
4. 如果存在关联商品，页面展示关联商品确认列表。
5. 用户确认同步范围。
6. 页面保存当前商品，并按用户选择处理关联商品。
7. 页面反馈保存结果。

验收标准：

• [ ] 保存栏必须展示已修改杯型数量。
• [ ] 保存前必须让用户知道容量偏差和关联商品影响范围。
• [ ] 当前商品始终直接保存。
• [ ] 关联商品列表不得包含当前商品自身。
• [ ] 关联商品默认按既有业务规则处理，且用户可调整同步范围。
• [ ] 保存成功后，临时修改状态清空，并更新修改前基准。

UF-009：移动端使用

描述： 作为运营人员，我可能在窄屏设备上维护商品配方，需要仍然能看清主编辑、杯型切换和保存按钮。

主流程：

1. 用户在移动端或窄屏打开商品详情页。
2. 配方配置从左右两栏改为纵向布局。
3. 主编辑器优先展示。
4. 杯型切换和对比面板位于主编辑器下方。
5. 保存栏保持可见且不遮挡主要输入。

验收标准：

• [ ] 移动端主编辑器、杯型切换、对比面板不能横向溢出。
• [ ] 数值输入、加减按钮有足够点击面积。
• [ ] 底部保存栏不遮挡最后一个成分行。
• [ ] 标准杯量在移动端仍然突出可见。

5. 功能需求

5.1 页面入口与状态

• FR-001：配方配置页签必须直接展示主编辑器，不以弹窗作为生产主路径。
• FR-002：当无杯型配方数据时，应展示明确空状态，不展示空白主编辑器。
• FR-003：进入 Tab 时默认选中第一个可配置杯型。
• FR-004：页面状态应由杯型维度管理，不能把所有杯型修改混成一个全局数值。
• FR-005：切换离开配方配置 Tab 后，未保存状态按现有页面离开/保存规则处理。

5.2 主编辑器

• FR-006：主编辑器标题展示当前杯型名称和约杯量，例如“热 约355ML”。
• FR-007：标准杯量必须独立成块展示，不得只作为小号辅助文字出现。
• FR-008：当前容量根据当前杯型临时剂量实时计算。
• FR-009：容量偏差根据“当前容量 - 标准杯量”实时计算。
• FR-010：容量偏差只提示，不拦截保存。
• FR-011：配方段条应展示当前杯型的主要成分占比，帮助用户快速理解结构。
• FR-012：只读成分必须与可编辑成分视觉区分。

5.3 成分剂量编辑

• FR-013：可编辑成分提供减号按钮、数字输入框、单位和加号按钮。
• FR-014：默认步长为 5ml；如成分有专属步长，以业务配置为准。
• FR-015：剂量最小值为 0。
• FR-016：输入框只接受可解析数字；失焦后归一为非负整数。
• FR-017：剂量变化必须更新该杯型的临时状态，而不是直接覆盖保存基准。
• FR-018：剂量变化必须同步刷新容量、偏差、杯型修改状态、对比面板和保存栏。

5.4 杯型切换

• FR-019：杯型切换区展示全部杯型。
• FR-020：每个杯型条目展示杯型名称、标准杯量、当前容量和修改状态。
• FR-021：当前选中条目使用主色边框或背景高亮。
• FR-022：已修改条目显示“已修改”徽标。
• FR-023：点击杯型条目仅切换主编辑器，不触发保存。

5.5 修改前后对比

• FR-024：对比面板展示当前杯型的容量变化。
• FR-025：对比面板展示当前杯型发生变化的成分列表。
• FR-026：对比面板不展示其他杯型变化，避免用户误判当前编辑对象。
• FR-027：无变化时展示空状态或“暂无修改”。

5.6 恢复当前杯型

• FR-028：主编辑器提供“恢复当前杯型修改前”入口。
• FR-029：恢复操作只重置当前选中杯型。
• FR-030：恢复后重新计算该杯型容量、偏差和修改状态。
• FR-031：恢复后其他杯型未保存状态保持不变。

5.7 保存配方

• FR-032：底部保存栏展示已修改杯型数量。
• FR-033：底部保存栏展示容量偏差摘要；多杯型都有偏差时，应优先提示当前杯型，并可补充总数。
• FR-034：保存按钮在没有修改时应禁用或展示无修改状态。
• FR-035：保存触发后沿用既有配方保存业务规则。
• FR-036：保存成功后，当前页面状态成为新的修改前基准。
• FR-037：保存成功反馈需要说明当前商品是否保存成功，以及关联商品同步结果。
• FR-038：本次 PRD 不要求改变现有商品、杯型和关联商品的保存结果。

6. 保存结果说明矩阵

7. 设计与文案规则

• “标准杯量”是页面最关键的校验信息，必须在主编辑器中突出展示。
• “当前容量”用于表达本次编辑后的结果，不得比标准杯量更突出。
• “容量偏差”使用警告色，避免使用会让用户误解为保存失败的强错误红。
• “恢复当前杯型修改前”必须明确“当前杯型”，避免用户误以为会恢复全部杯型。
• 保存栏文案使用业务结果，不使用内部字段名。
• 杯型名称、容量、单位文案在主编辑器、杯型切换和保存栏中保持一致。

8. 可访问性与响应式要求

• 加减按钮和保存按钮必须可通过键盘聚焦。
• 数字输入框应提供明确单位，不只依赖 placeholder。
• 桌面端两栏布局不得让右侧切换区挤压主编辑器输入。
• 移动端改为纵向布局，主编辑器优先于杯型切换展示。
• 底部保存栏需要预留底部间距，不能遮挡最后一个输入项。

9. 成功标准

• 运营人员进入配方配置后，无需打开弹窗即可开始编辑当前杯型。
• 标准杯量在首屏内清晰可见，并且比当前容量更突出。
• 切换杯型不会丢失任何未保存修改。
• 修改一个成分后，容量、偏差、杯型状态、对比面板和保存栏同时更新。
• 恢复当前杯型不会影响其他杯型。
• 保存前能看清本次改了几个杯型，以及是否涉及关联商品。
• 旧版“修改配方按钮 + 弹窗”不再作为当前生产主路径。

10. 回归测试要求

• 结构测试：确认页面能同时展示主编辑器、杯型切换、修改前后对比和底部保存栏。
• 文案测试：确认“标准杯量”在主编辑器中存在，且保存栏能输出容量偏差摘要。
• 交互测试：修改热杯型后切换到标准冰，再切回热杯型，修改仍然存在。
• 计算测试：剂量变化后，当前容量和容量偏差同步变化。
• 恢复测试：恢复当前杯型只影响当前杯型。
• 保存测试：保存成功后修改状态清空，并更新对比基准。
• 响应式测试：移动端无横向溢出，保存栏不遮挡输入。
• PRD 站点测试：首页保留本 PRD 链接，HTML 版本可独立打开。

11. 历史关系

上一代 prd-product-detail-recipe-tag-config 仍然保留，用于解释“标签配置”和历史弹窗式“修改配方”能力。当前生产中的配方管理已经迁移到方案 B 主编辑器，因此涉及“🧪 配方配置”主路径的评审、开发和测试，应以本 PRD 为准。