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

顾客小程序原型:flows.md

机制差异提示(2026-09-23):以下为旧H5快照的可执行动线。一周无忧计划要求逐日主动确认;自动配送、固定20:00截单和自动原路退款仍属旧演示行为,不能当新机制已确认政策。场景与实现同步待后续工作。

模块: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。 说明:以下路径是设计审查和未来浏览器 E2E 的共同脚本;当前源码没有接入真实 API,也没有声称已经有产品 E2E 证据。 说明:当前 Runtime 没有绑定 REQ;场景矩阵中的 REQ-DESIGN-INPUT/FR-* 只是设计输入载体,不是锁定需求。

1. 模块范围与路径目录

Flow ID 路径 ID 用户目标 / 场景 类型 起点 终点 Story / CASE 原型区域 source_refs Spec
F-001 PATH-MARKET-BROWSE / PATH-MARKET-SOLDOUT 找到肉品、查看 Meat ID、处理售罄 happy / error market basket / 可恢复售罄 S-001 / CASE-MARKET-* 肉市与导购 source:src/views/Market.tsx 未来 web/e2e/customer-miniapp/F-001.spec.ts
F-002 PATH-PLAN-DRAFT / PATH-PLAN-EMPTY 安排一周餐次并生成采购内容 happy / empty plan basket / 可解释空态 S-002 / CASE-PLAN-* 一周计划 source:src/views/Plan.tsx 未来 web/e2e/customer-miniapp/F-002.spec.ts
F-003 PATH-BASKET-CHECKOUT / PATH-BASKET-EMPTY / PATH-PAYMENT-SUCCESS / PATH-PAYMENT-FAILED 核对肉篮、配送、模拟支付 happy / empty / error 悬浮肉篮或计划采购 order / 保留 checkout S-003 / CASE-BASKET-、CASE-CHECKOUT- 肉篮与结算 source:src/views/Basket.tsx; source:src/views/Checkout.tsx 未来 web/e2e/customer-miniapp/F-003.spec.ts
F-004 PATH-DELIVERY-CONFIRM / PATH-DELIVERY-CUTOFF 确认配送波次或体验退款边界 happy / boundary 首页配送卡或订单 波次确认 / 退款状态 S-004 / CASE-DELIVERY-* 订单与配送 source:src/services/delivery.ts 未来 web/e2e/customer-miniapp/F-004.spec.ts
F-005 PATH-SUBSCRIPTION-ACTIVE / PATH-SUBSCRIPTION-INACTIVE 保存家庭设置并了解订阅 happy / empty mine plan(下周)或解释页 S-006 / CASE-SUBSCRIPTION-* 我的与长期服务 source:src/views/Mine.tsx 未来 web/e2e/customer-miniapp/F-005.spec.ts
F-006 PATH-TRACE-VIEW / PATH-TRACE-RETRY 查看档案并恢复关键失败状态 happy / retry 商品、订单或体验设置 Meat ID / 原入口 S-005 / CASE-TRACE-* 状态与边界 source:src/views/Demo.tsx; source:src/views/Product.tsx 未来 web/e2e/customer-miniapp/F-006.spec.ts

2. 共享前置与测试数据

ID 类型 内容 适用路径
PRE-DEMO-CUSTOMER 身份 建立合成顾客;不连接真实账号;固定演示时间从 2026-09-07 开始 全部路径
DATA-MARKET 商品 使用 src/data/mock.ts 中的本地商品、菜谱、图片和标准重量/切法 F-001、F-003、F-006
DATA-PLAN-DRAFT 计划 固定 2 人家庭、午餐/晚餐餐次和可替换菜谱;计划与订单分离 F-002、F-005
DATA-BASKET 肉篮 预置至少一项 market/plan 来源商品;未支付、未创建订单 F-003
DATA-DELIVERY 订单 预置两波配送,固定北京时区 20:00 截单与各波 itemIds F-004
DATA-FAULT 状态 通过 DemoPage 切换 loading、network、sold-out、batch-sold、payment-failed、meat-id-error 等演示故障 F-001、F-003、F-006

仅业务入口本身是深链时才允许 URL 直跳;正常路径从声明的上游页面点击进入。未来 E2E 必须使用隔离 fixture,不得手改 localStorage 绕过页面导航。

3. 路径定义

F-001 / PATH-MARKET-BROWSE:从肉市选择标准规格

项 内容
触发 顾客进入肉市,想为下一顿买一份肉
角色 anonymous-shopper
前置 PRE-DEMO-CUSTOMER、DATA-MARKET,商品可浏览
关联故事 S-001
关联 CASE CASE-MARKET-ALLOW
覆盖分支 BR-MARKET-ALLOW
入口 market 页面上的搜索、分类、今日鲜切或菜谱卡
允许 URL 直跳 no
预期终点 选择重量/切法/份数后加入肉篮;可打开 Meat ID
原型和合同映射 h5-concept-demo.html 肉市与导购;source/src/views/Market.tsx、Product.tsx
步骤 ID 用户动作 目标控件 / 稳定标签 输入或选择 期望可见结果 原型区域
F-001-001 点击 肉市 N/A 进入 market,看到今日鲜切和底部导航 market
F-001-002 点击 搜索商品、部位、菜名或场景 N/A 进入 search,搜索/分类状态可见 search
F-001-003 点击 商品名或商品图 pork-shoulder 进入 product,看到 Meat ID、标准重量和切法 product
F-001-004 点击 重量/切法选择 500g / 切丝 当前规格、份数和金额更新 product
F-001-005 点击 加入肉篮 N/A 肉篮数量更新,仍可继续浏览 product / 肉篮悬浮入口
F-001-006 点击 肉品身份证 N/A meat-id 显示批次档案和时间线 meat-id

路径完成断言

PATH-MARKET-SOLDOUT:售罄后保持可恢复

商品或当前批次售罄时,进入同一 product 页面,显示售罄原因并禁用加入动作;顾客可以返回搜索/肉市查看其他商品。覆盖 BR-MARKET-REJECT,不得改变肉篮数量。

E2E 转录 note:未来 Playwright 使用 data-test=tab-market、data-test=market-search、data-test=product-card-pork-shoulder、data-test=product-add、data-test=meat-id-entry;当前源码以可访问名称和 route 组件作为观察锚点,尚未提交这些 hook。

F-002 / PATH-PLAN-DRAFT:安排一周餐桌并生成肉篮

项 内容
触发 顾客不想逐个选商品,想按家庭安排一周餐次
角色 household-planner
前置 PRE-DEMO-CUSTOMER、DATA-PLAN-DRAFT
关联故事 S-002
关联 CASE CASE-PLAN-ALLOW
覆盖分支 BR-PLAN-ALLOW
入口 底部 计划 Tab
允许 URL 直跳 no
预期终点 计划状态清楚,选择菜谱/推荐后生成肉篮
原型和合同映射 h5-concept-demo.html 一周计划;source/src/views/Plan.tsx
步骤 ID 用户动作 目标控件 / 稳定标签 输入或选择 期望可见结果 原型区域
F-002-001 点击 计划 N/A 显示一周餐轨、已安排/待安排状态 plan
F-002-002 点击 日期与 午餐/晚餐 周二 / 午餐 只展开选中日期和时段 plan
F-002-003 点击 安排一顿 或 帮我推荐 N/A 进入 add-meal 或 recommendations add-meal / recommendations
F-002-004 点击 推荐卡 / 为什么这样推荐 N/A 看到理由、家庭条件和替换入口 why
F-002-005 点击 确认餐次 N/A 计划写入当前示例状态,返回餐轨 plan
F-002-006 点击 Balance / 生成肉篮 N/A 看到肉类采购估算并进入 basket balance / basket

路径完成断言

PATH-PLAN-EMPTY:空计划恢复

计划为空时显示“本周还没有安排”和“安排第一顿”,并提供回肉市/回首页动作;不填充假商品、不生成肉篮。覆盖 BR-PLAN-REJECT。

E2E 转录 note:未来使用 data-test=tab-plan、data-test=meal-day-2、data-test=meal-period-lunch、data-test=plan-add-meal、data-test=plan-recommendations、data-test=plan-generate-basket;当前以可见中文标签和 Plan.tsx 组件为设计锚点。

F-003 / PATH-BASKET-CHECKOUT:核对肉篮并完成模拟支付

项 内容
触发 顾客从肉市或计划进入肉篮
角色 anonymous-shopper / household-planner
前置 PRE-DEMO-CUSTOMER、DATA-BASKET,地址和配送时段为示例值
关联故事 S-003
关联 CASE CASE-BASKET-ALLOW、CASE-CHECKOUT-ALLOW
覆盖分支 BR-BASKET-ALLOW、BR-CHECKOUT-ALLOW
入口 悬浮肉篮或桌面“我的肉篮”
允许 URL 直跳 no
预期终点 模拟支付成功后显示订单快照和配送信息
原型和合同映射 h5-concept-demo.html 肉篮与结算;Basket.tsx、Checkout.tsx、Orders.tsx
步骤 ID 用户动作 目标控件 / 稳定标签 输入或选择 期望可见结果 原型区域
F-003-001 点击 打开肉篮 N/A 显示来源、日期、餐次、数量和肉篮合计 basket
F-003-002 点击 商品编辑 500g / 薄片 / 2份 商品草稿更新,合计重新计算 basket
F-003-003 点击 去预约 / 进入结算 N/A 进入 checkout,显示地址、配送波次、商品和金额 checkout
F-003-004 点击 地址或配送时段 示例地址 / 17:00–19:00 当前选择可见;不可用时提示恢复 checkout
F-003-005 点击 确认并支付 N/A 进入模拟支付处理,不直接伪造成功 checkout
F-003-006 点击 查看订单 N/A success/order 显示订单号、配送时段和状态 success / order

PATH-BASKET-EMPTY:空肉篮恢复

肉篮为空时显示可解释空态,并回到肉市或计划;覆盖 BR-BASKET-REJECT。

PATH-PAYMENT-SUCCESS:模拟支付成功

有效结算上下文进入模拟支付,成功后显示订单号和预约状态;不得把结果解释为真实扣款。

PATH-PAYMENT-FAILED:支付失败恢复

通过概念体验设置进入 payment-failed,结算页显示失败原因和重试;肉篮与地址/配送上下文不清空,覆盖 BR-CHECKOUT-REJECT。

E2E 转录 note:未来使用 data-test=basket-orb、data-test=basket-item、data-test=basket-edit、data-test=checkout-entry、data-test=checkout-address、data-test=checkout-slot、data-test=checkout-submit、data-test=order-detail;支付成功必须断言可见状态,不断言真实资金。

F-004 / PATH-DELIVERY-CONFIRM:独立确认配送波次

项 内容
触发 顾客看到首页配送卡或打开预约订单
角色 scheduled-delivery-customer
前置 PRE-DEMO-CUSTOMER、DATA-DELIVERY;演示时钟在北京时间 19:55 附近
关联故事 S-004
关联 CASE CASE-DELIVERY-ALLOW
覆盖分支 BR-DELIVERY-ALLOW
入口 market 首页配送卡或 order
允许 URL 直跳 no
预期终点 选中配送波次变为已确认;自动配送跨过截单仍保留
原型和合同映射 h5-concept-demo.html 订单与配送;delivery.ts、delivery.test.mjs
步骤 ID 用户动作 目标控件 / 稳定标签 输入或选择 期望可见结果 原型区域
F-004-001 点击 配送确认体验 N/A 首页展示当前配送波次、商品、地址和截止时间 market
F-004-002 点击 确认这次配送 选中波次 A 只更新波次 A 的确认时间/来源 配送卡
F-004-003 点击 波次切换 波次 B 波次 B 独立显示,不继承 A 的确认状态 配送 tabs
F-004-004 点击 自动配送 N/A 订单显示自动模式和后续截止行为 demo / order
F-004-005 点击 订单详情 N/A 看到配送明细和状态 order

PATH-DELIVERY-CUTOFF:截单后停送退款

将演示时钟推进到北京时间 20:00 后,未确认波次不能补确认,进入停送/退款处理中;约 5 秒后示例状态变为已退款;已确认或自动配送波次不被错误退款。覆盖 BR-DELIVERY-REJECT。

E2E 转录 note:未来使用 data-test=delivery-card、data-test=delivery-wave、data-test=delivery-confirm、data-test=delivery-auto、data-test=delivery-refund-status;时间边界应使用固定 clock fixture,不使用真实等待。

F-005 / PATH-SUBSCRIPTION-ACTIVE:维护家庭并体验订阅

项 内容
触发 顾客想调整家庭习惯或了解下周建议
角色 household-planner
前置 PRE-DEMO-CUSTOMER,可读 mine 页面和示例家庭
关联故事 S-006
关联 CASE CASE-SUBSCRIPTION-ALLOW
覆盖分支 BR-SUBSCRIPTION-ALLOW
入口 mine → 家庭卡/订阅卡
允许 URL 直跳 no
预期终点 家庭设置可保存;订阅体验生成下周示例建议并进入 plan
原型和合同映射 h5-concept-demo.html 我的与长期服务;Mine.tsx
步骤 ID 用户动作 目标控件 / 稳定标签 输入或选择 期望可见结果 原型区域
F-005-001 点击 我的 N/A 显示家庭、订单、订阅和服务入口 mine
F-005-002 点击 我的家庭 N/A 编辑人数、餐数、目标和偏好 family
F-005-003 点击 保存家庭设置 示例家庭值 返回 mine,计划可读取新设置 family
F-005-004 点击 了解鼎味订阅 N/A 显示订阅价值、边界和免费能力 subscription
F-005-005 点击 体验订阅 · 看看下周建议 N/A 显示已开启状态并导航到下周计划 subscription / plan

PATH-SUBSCRIPTION-INACTIVE:未开启订阅

订阅未开启时展示说明和唯一的体验入口;不显示已扣费、自动续费或真实会员权益。结束体验后已有计划保留,覆盖 BR-SUBSCRIPTION-REJECT。

E2E 转录 note:未来使用 data-test=tab-mine、data-test=family-entry、data-test=family-save、data-test=subscription-entry、data-test=subscription-activate、data-test=subscription-end。

F-006 / PATH-TRACE-VIEW:Meat ID 与状态恢复

项 内容
触发 顾客想查看来处,或评审人员主动切换异常状态
角色 service-reviewer
前置 PRE-DEMO-CUSTOMER、DATA-MARKET、DATA-FAULT
关联故事 S-005
关联 CASE CASE-TRACE-ALLOW
覆盖分支 BR-TRACE-ALLOW
入口 商品/订单/我的页 Meat ID 入口或 demo
允许 URL 直跳 no
预期终点 档案完整可读,或失败后通过原入口重试
原型和合同映射 h5-concept-demo.html 状态与边界;Demo.tsx、Product.tsx
步骤 ID 用户动作 目标控件 / 稳定标签 输入或选择 期望可见结果 原型区域
F-006-001 点击 概念体验设置 N/A 打开状态场景列表 demo
F-006-002 点击 页面加载中 N/A 显示 loading 骨架和等待反馈 state
F-006-003 点击 Meat ID 加载失败 N/A meat-id 显示失败原因和重试动作 meat-id
F-006-004 点击 重新加载 Meat ID N/A 关闭故障模拟并显示档案或回到肉市 meat-id
F-006-005 点击 关闭异常模拟 N/A 恢复正常演示状态,不改订单/肉篮事实 demo

PATH-TRACE-RETRY:Meat ID 失败恢复

网络中断、图片失败、Meat ID 失败、售罄和空集合必须显示各自原因/恢复动作;不得以同一个成功态覆盖。覆盖 BR-TRACE-REJECT,并与 F-001/F-003 的故障路径回归。

E2E 转录 note:未来使用 data-test=demo-entry、data-test=state-loading、data-test=state-meat-id-error、data-test=state-retry、data-test=demo-close-fault;状态切换必须通过可见控件完成。

4. 模块交互覆盖核对

原型区域 / 控件 用户意图 覆盖路径 状态 / N/A 理由
全局 / 肉市、计划、我的 Tab 切换主模块 F-001、F-002、F-005 covered
全局 / 打开肉篮 悬浮入口 查看采购内容 F-003 covered
全局 / 更多菜单 打开肉篮、概念体验、回肉市 F-003、F-006 covered
肉市 / 地址行 查看或更换配送地址 F-003、F-005 covered
肉市 / 搜索、分类、场景 chips 找商品/菜谱/部位 F-001 covered
肉市 / 配送卡、波次切换 确认配送 F-004 covered
商品 / 重量、切法、份数、加入、收藏 形成肉篮草稿 F-001、F-003 covered
商品 / Meat ID 查看来源档案 F-001、F-006 covered
菜谱 / 按这道菜买肉、安排进计划 进入采购或计划 F-001、F-002 covered
计划 / 日期、午餐/晚餐、安排一顿、推荐、理由、Balance 编排餐轨 F-002 covered
肉篮 / 编辑、删除、去预约 调整采购并进入结算 F-003 covered
结算 / 地址、时段、确认并支付 发起模拟预约 F-003 covered; no real payment
订单 / 查看、取消预约、售后 查看履约模型 F-003、F-004 covered as demo
我的 / 家庭、地址、订阅、历史、收藏、权益 管理服务入口 F-005、F-006 covered
概念体验 / 状态场景、恢复初始、关闭异常 评审边界和恢复 F-006 及各流程异常分支 covered

5. E2E 执行规则