顾客小程序原型:stories.md
机制差异提示(2026-09-23):本文是现有H5快照的故事记录。“逐次确认或自动配送”等旧行为尚未按一周无忧计划更新;新机制为每天主动确认,未确认不履约,资金处理待定。以下覆盖不代表新机制已实现。
模块:
customer-miniapp当前真相:本文件维护最新 H5 Concept Demo 的完整故事集合,不创建 per-REQ/per-round 副本。 关联原型:index.html、h5-concept-demo.html与source/dingwei-meat-market/。 关联场景:scenario-model.json/cases.json/scenario-coverage.json/fixture-contract.json。 设计来源:Git commit35c0d16b14a984fd138d73483a17a4a9eb7d66dd。 说明:当前 Runtime 没有绑定 REQ;REQ-DESIGN-INPUT/FR-*只在cross-matrix.json中作为 schema-compatible 的设计输入载体,不是锁定需求。
1. Personas
| Persona ID | 角色描述 | 日常目标 | 权限与边界 |
|---|---|---|---|
anonymous-shopper |
第一次或偶尔进入肉市的顾客 | 快速找到一份今天/本周要吃的肉 | 可浏览公开肉市、菜谱和概念状态;原型不模拟真实登录、支付或个人数据 |
household-planner |
为家庭安排一周餐次的人 | 按人数、餐数和偏好安排餐轨,并生成肉篮 | 可编辑示例家庭、餐次、菜谱和肉品规格;计划与订单事实分开 |
scheduled-delivery-customer |
已有预约配送的顾客 | 确认每个配送波次,知道超时后的结果 | 只能操作示例订单和配送波次;截止时间/退款由模型演示,不产生真实资金副作用 |
service-reviewer |
PM、设计师、验证人员 | 检查成功、空、加载、错误和恢复路径 | 可通过“概念体验设置”切换合成状态;不能把演示结果当作产品验收证据 |
2. Story 目录
| 故事 ID | 用户角色 | 触发场景 | 用户目标 | CASE / PATH | 关联原型 | E2E 锚点 | source_refs |
|---|---|---|---|---|---|---|---|
| S-001 | anonymous-shopper | 想买一份肉或按菜谱找肉 | 找到可购买规格并进入肉篮;售罄时保持可恢复 | CASE-MARKET-ALLOW / PATH-MARKET-BROWSE;CASE-MARKET-REJECT / PATH-MARKET-SOLDOUT | h5-concept-demo.html:肉市与导购 |
F-001 | git:35c0d16; source:src/views/Market.tsx; source:src/views/Product.tsx |
| S-002 | household-planner | 想把一周午餐/晚餐安排好 | 看到餐轨状态、推荐理由和按计划生成的肉篮;空计划可从第一顿恢复 | CASE-PLAN-ALLOW / PATH-PLAN-DRAFT;CASE-PLAN-REJECT / PATH-PLAN-EMPTY | h5-concept-demo.html:一周计划 |
F-002 | git:35c0d16; source:src/views/Plan.tsx; source:tests/plan-purchase.test.mjs |
| S-003 | anonymous-shopper / household-planner | 已有肉篮或计划采购内容 | 核对份量、地址、配送时段并完成一次模拟支付;支付失败时保留上下文 | CASE-BASKET-ALLOW / PATH-BASKET-CHECKOUT;CASE-BASKET-REJECT / PATH-BASKET-EMPTY;CASE-CHECKOUT-ALLOW / PATH-PAYMENT-SUCCESS;CASE-CHECKOUT-REJECT / PATH-PAYMENT-FAILED | h5-concept-demo.html:肉篮与结算 |
F-003 | git:35c0d16; source:src/views/Basket.tsx; source:src/views/Checkout.tsx |
| S-004 | scheduled-delivery-customer | 临近次日配送截单 | 单独确认一波配送,选择自动配送,或理解超时停送/退款 | CASE-DELIVERY-ALLOW / PATH-DELIVERY-CONFIRM;CASE-DELIVERY-REJECT / PATH-DELIVERY-CUTOFF | h5-concept-demo.html:订单与配送 |
F-004 | git:35c0d16; source:src/services/delivery.ts; source:tests/delivery.test.mjs |
| S-005 | service-reviewer | 需要检查批次来源或故障恢复 | 打开 Meat ID 资料;资料失败时看到解释并能重新加载 | CASE-TRACE-ALLOW / PATH-TRACE-VIEW;CASE-TRACE-REJECT / PATH-TRACE-RETRY | h5-concept-demo.html:Meat ID 与状态 |
F-006 | git:35c0d16; source:src/views/Product.tsx; source:src/views/Demo.tsx |
| S-006 | household-planner / service-reviewer | 想调整家庭习惯或体验订阅 | 保存家庭/地址偏好,查看订阅说明;未开启时仍可理解并主动开启 | CASE-SUBSCRIPTION-ALLOW / PATH-SUBSCRIPTION-ACTIVE;CASE-SUBSCRIPTION-REJECT / PATH-SUBSCRIPTION-INACTIVE | h5-concept-demo.html:我的与长期服务 |
F-005 | git:35c0d16; source:src/views/Mine.tsx |
3. 故事定义
S-001:从肉市找到一份合适的肉
- 用户故事:作为顾客,我想要从肉市或菜谱入口找到可用商品并选择标准规格,以便为下一顿准备一份清楚、可追溯的肉品。
- 入口:
market;也可从search、recipe进入。 - 目标:商品图片、名称、Meat ID/来源摘要、标准重量、切法和加入肉篮动作可见;售罄时不增加数量。
- 覆盖分支:
BR-MARKET-ALLOW、BR-MARKET-REJECT。 - 页面跳转:
market → search/product → meat-id 或 basket。 - 异常和边缘故事:搜索无结果、商品售罄、批次售罄、地址不在范围时,保留事实并给出返回肉市、查看档案或更换地址的动作。
S-002:把本周餐桌排出来
- 用户故事:作为家庭计划者,我想要按天、午餐/晚餐和人数安排一周餐次,以便系统按菜谱和标准规格汇总肉品需求。
- 入口:底部
计划Tab 或plan。 - 目标:看到已安排/未安排/已下单状态,能进入推荐理由和 Balance,并从计划生成肉篮;不把计划直接伪装成订单。
- 覆盖分支:
BR-PLAN-ALLOW、BR-PLAN-REJECT。 - 页面跳转:
plan → add-meal → recommendations/why → balance → basket。 - 异常和边缘故事:计划为空时显示“安排第一顿”;已下单后菜单变化显示待核对,不重复生成隐形订单。
S-003:核对肉篮并完成模拟支付
- 用户故事:作为采购顾客,我想要在肉篮和结算页核对商品、地址、配送波次和金额,以便明确知道这次模拟预约的结果。
- 入口:悬浮肉篮、桌面一周餐桌或计划生成肉篮。
- 目标:可以修改重量/切法/份数,进入结算,成功后看到订单;失败时肉篮和当前上下文仍保留。
- 覆盖分支:
BR-BASKET-ALLOW、BR-BASKET-REJECT、BR-CHECKOUT-ALLOW、BR-CHECKOUT-REJECT。 - 页面跳转:
basket → checkout → success → order/orders。 - 异常和边缘故事:肉篮为空时回肉市或计划;地址无配送范围、时段不可用、支付失败时不显示成功订单。
S-004:确认每个配送波次
- 用户故事:作为预约配送顾客,我想要逐次确认配送或选择自动配送,以便在 20:00 截单前知道哪一波会履约。
- 入口:首页动态配送卡、订单详情或“概念体验设置”。
- 目标:确认只影响选中的波次;自动配送跨过截单仍保留;未确认波次超时后显示处理中/已退款。
- 覆盖分支:
BR-DELIVERY-ALLOW、BR-DELIVERY-REJECT。 - 页面跳转:
market/order → delivery confirmation → order。 - 异常和边缘故事:重复确认不重复写入;截单后确认被拒;一单多波次的其他波次独立计算。
S-005:查看 Meat ID 并从失败中恢复
- 用户故事:作为评审人员,我想要打开肉品的来源档案并体验失败恢复,以便确认透明字段和异常语义不会被成功态遮盖。
- 入口:商品、订单明细、我的页 Meat ID 历史或概念体验设置。
- 目标:档案完整时显示批次时间线;失败时显示原因和“重新加载 Meat ID”,不修改订单。
- 覆盖分支:
BR-TRACE-ALLOW、BR-TRACE-REJECT。 - 页面跳转:
product/order/history → meat-id;失败后回到同一档案。 - 异常和边缘故事:网络失败、批次售罄与档案读取失败分别表达,不把示例资料当真实追溯凭证。
S-006:管理家庭与订阅体验
- 用户故事:作为家庭计划者,我想要维护人数、餐数、偏好、地址并了解订阅,以便下周建议能够解释其来源,而不是强迫我一次完成所有设置。
- 入口:
mineTab 的家庭卡、地址行或订阅卡。 - 目标:保存示例家庭后可回到计划;订阅关闭时显示体验入口,开启后生成下周示例建议;结束订阅保留已有计划。
- 覆盖分支:
BR-SUBSCRIPTION-ALLOW、BR-SUBSCRIPTION-REJECT。 - 页面跳转:
mine → family/address/subscription → plan。 - 异常和边缘故事:地址暂不在配送范围时明确提示;订阅切换只改变演示状态,不发生扣费或自动续费。
4. 功能设计背景
H5 Demo 将“今天买肉”和“安排一周”作为两个可以互相进入、但不混淆语义的入口;肉篮保存采购上下文,计划保存餐次意图,订单保存预约快照。新增配送确认语义后,每个配送波次独立处理确认、截单和退款,避免一波异常覆盖同一订单的其他波次。
5. 页面跳转逻辑
| 起点 | 用户意图 | 动作 | 目标页面 / 状态 | 设计理由 | 原型区域 |
|---|---|---|---|---|---|
market |
找肉 | 搜索、分类或点商品 | search / product |
先看事实,再选规格 | h5-concept-demo.html 肉市与导购 |
product |
看来源 | 点 Meat ID | meat-id |
来源信息和购买动作分层 | 同上 |
plan |
安排餐次 | 选日期、午晚餐、添加一顿 | add-meal |
餐次上下文不被购物车取代 | 一周计划 |
plan |
形成采购 | 查看推荐/Balance 后生成肉篮 | basket |
计划意图转成可核对采购内容 | 一周计划 / 肉篮 |
basket |
预约 | 去结算 | checkout |
在一次承诺前集中核对事实 | 肉篮与结算 |
checkout |
支付失败 | 查看原因并重试 | checkout 保留上下文 |
失败不能被画成成功 | 状态与边界 |
market / order |
确认配送 | 选中波次并确认 | 当前波次 confirmed |
波次边界清楚 | 订单与配送 |
mine |
看下周建议 | 开启订阅体验 | plan(下周) |
订阅是可解释的辅助,不是强制门 | 我的与长期服务 |
6. UI/UX 审查问题
| 问题 | 影响 | 决策 | 状态 |
|---|---|---|---|
| H5 为三 Tab,而目标小程序可能需要五 Tab | 导航语义不能直接迁移 | 保留 H5 为视觉/交互输入,REQ 锁定时单独收敛小程序壳 | closed for this prototype |
| 结算与支付是 mock | 不能作为真实资金证据 | 所有页面保留概念披露;真实接入需新 REQ、API 和幂等证据 | closed for this prototype |
| 源码路由不是独立静态 HTML | 静态审查可能遗漏运行态 | h5-concept-demo.html 汇总 26 个页面组件和状态;未来 UI REQ 如需独立页面再扩展同一包 |
closed with follow-up |
7. REQ / source 映射
| source_ref | 原型区域 | 用户价值 | 验收方式 |
|---|---|---|---|
git:35c0d16 |
source/dingwei-meat-market/ |
最新 commit 的完整设计内容不丢失 | 逐文件 SHA-256 与 commit 对照 |
source:src/views/Market.tsx |
肉市、搜索、配送卡 | 快速发现商品并理解配送 | F-001 页面/状态走查 |
source:src/views/Plan.tsx |
一周餐轨、推荐、Balance | 将餐次意图转为采购 | F-002 + plan-purchase.test.mjs |
source:src/services/delivery.ts |
配送确认、截止、退款 | 让边界状态可解释 | F-004 + delivery.test.mjs |
source:src/views/Demo.tsx |
加载、空、错误和恢复开关 | 评审异常路径 | F-006 状态覆盖 |
8. 与原型和动线的一致性
| 检查项 | 结果 | 证据 |
|---|---|---|
| 成功故事在当前页面证据或源码中可见 | pass | h5-concept-demo.html 路由组 + source/src/views/ |
| 异常和边缘故事可见 | pass | 页面证据 Edge cases + Demo.tsx 状态入口 |
页面跳转均有 F-NNN / PATH-* 覆盖 |
pass | flows.md F-001 至 F-006 |
| required allow/reject branch coverage = 100% | pass | scenario-coverage.json |
| browser-required CASE 均绑定 module spec | pending product E2E | 当前无产品实现与 web/e2e;未来执行以 flows 的 hook 映射为准 |
| 合同需要的字段、状态、错误、权限和副作用已标出 | pass for design scope | scenario oracles、API endpoints、Edge cases 与 intake 边界 |