鼎味肉市DESIGN ATELIER
← 资料目录docs/design/prototypes/customer-miniapp/stories.md阅读原文

顾客小程序原型: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 commit 35c0d16b14a984fd138d73483a17a4a9eb7d66dd。 说明:当前 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:从肉市找到一份合适的肉

S-002:把本周餐桌排出来

S-003:核对肉篮并完成模拟支付

S-004:确认每个配送波次

S-005:查看 Meat ID 并从失败中恢复

S-006:管理家庭与订阅体验

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 边界