H5 Concept Demo Source Intake
来源：
/Users/a123/Downloads/dingwei-meat-market-source.zip日期：2026-09-08 当前分支：req/REQ-001-monorepo-shell性质：顾客小程序首选高保真 H5 设计源，不直接作为 REQ-001 产品实现。 分支落位：docs/design/prototypes/customer-miniapp/source/dingwei-meat-market/
活动包状态（2026-09-22）：已按
docs/rules/ui-prototype.md回填到docs/design/prototypes/customer-miniapp/，入口、页面证据、stories、flows、 scenario 四件套、fixture contract 和 cross-matrix 均已就位。源码保留为35c0d16b14a984fd138d73483a17a4a9eb7d66dd的可运行设计快照。
2026-09-21 同步记录
已从上游高保真 Demo 的 fec297053947f5b63e9d4e87c972b1521179a540 同步至 Sites Version 14。经 DFD-003 确认，本 H5 源现在是顾客端首选设计方向；这不改变它不是 REQ-001 Taro 产品实现的边界。
新增或深化的验证内容：
- 计划基本单位由单道菜扩展为一餐多菜，午餐和晚餐可独立安排。
- 餐轨区分未安排、已计划待购买、已下单，以及菜单变化待核对状态。
- 首页动态卡展示隔日预购内容、配送时段和确认配送入口；支持默认自动配送与超时自动退款语义。
- 计划菜卡改为横向菜单轨道，移除重复餐次标题，并在轨道末尾提供独立加菜卡。
- 增补配送确认、计划采购关联及边界测试；原型测试总数更新为 12 项。
为保持研究快照可独立构建，vite.config.ts 在本目录内关闭未使用的 D1/R2 绑定，不读取已明确排除的上游 .openai/hosting.json；产品源码与交互逻辑不受影响。
结论
该 zip 是一套完整的 Vinext/Vite + React H5 概念 Demo，包含移动端交互、品牌组件、设计 token、食材图片、mock 数据、业务 reducer、计划推荐逻辑和 Node 测试。它现在作为 docs/design/prototypes/customer-miniapp/ 的首选可运行设计源；customer-miniapp-redesign/ 保留为备选 HTML/场景包。
原因：
- REQ-001 锁定目标是工程骨架、五发布单元、小程序五 Tab 壳、悬浮购物车入口、PortalHost 和后台布局壳；该 Demo 是独立 H5 体验，技术栈和目标工程不同。
- Demo 底部导航是
肉市 / 计划 / 我的三 Tab；REQ-001 要求顾客小程序底部固定五 Tab：首页 / 买肉 / 订阅 / 肉篮 / 我的，且购物车是悬浮入口。 - Demo 含自由买肉、菜谱、计划、结算、模拟支付、订单、售后、订阅等业务路径；REQ-001 明确不实现真实交易规则、业务状态机、下单/支付/容量等能力。
- 仓库
docs/design/prototypes/README.md规定每个模块只能有一个首选方向；本次提升由 DFD-003 记录。H5 源现在有对应的活动模块包，但仍不能绕过真实 UI REQ 的合同前场景和页面门禁。
推荐落位
| 内容 | 建议位置 | 用途 |
|---|---|---|
| 原型入口 | docs/design/prototypes/customer-miniapp/index.html |
声明首选方向、在线预览和本地运行入口 |
| 页面证据 | docs/design/prototypes/customer-miniapp/h5-concept-demo.html |
按当前规范记录路由、状态、边界和 review 说明 |
| 用户故事 / 动线 | stories.md / flows.md |
供设计评审与后续 E2E 转录使用 |
| 场景包 | scenario-model.json / cases.json / scenario-coverage.json / fixture-contract.json / cross-matrix.json |
记录允许、拒绝、恢复和隔离 fixture |
| 导入说明 | docs/design/prototypes/customer-miniapp/README.md |
说明首选方向、边界和查看方式 |
| 解压源码快照 | docs/design/prototypes/customer-miniapp/source/dingwei-meat-market/ |
分支内可查看、可运行、可复现的首选设计源；已排除 .openai/hosting.json |
| 原 zip | 不提交，保留在本机下载目录或外部资产库 | 避免把二进制打包产物写入主仓 |
| 可复用截图或少量参考图 | 后续如需，再放入 docs/design/proof/anchor-screens/ |
作为人工评审证据，不作为可运行源码 |
| 可复用 token/品牌语言 | 经 S2 设计审查后映射到 docs/design/tokens/ 或当前 prototype CSS |
只吸收语义，不照搬 H5 样式系统 |
| 可复用业务拆分 | 后续 REQ-003/009/014/025 等按职责拆入 | REQ-001 不承接业务页面逻辑 |
不建议：
| 做法 | 风险 |
|---|---|
把源码直接放进 apps/customer-miniapp/ |
技术栈是 H5 React/Radix，不是 Taro 小程序；且含 REQ-001 禁止实现的交易/订单/售后路径 |
提交 .openai/hosting.json |
这是原 Sites 项目托管元数据，不属于鼎味主仓的 R0 工程基线 |
| 直接迁移 mock 商品/支付成功/订单页面 | REQ-001 占位页不得展示假成交、假价格、假订单或假支付成功 |
可复用资产清单
| Demo 路径 | 可复用方向 | 首个合适 REQ |
|---|---|---|
src/tokens/design-tokens.css |
品牌色、纸面、文字和动效 token 的候选输入 | REQ-001 S2/S6，需与现有 Foundation 对齐 |
public/images/*.jpg |
食材/菜谱图片参考；可转为 proof 或 prototype assets | REQ-001 S2 或 REQ-009/R2 后续 |
src/components/brand.tsx |
Logo、Meat ID、Timeline、Balance 等品牌组件概念 | REQ-001 只可借鉴壳层品牌；业务组件后置 |
src/models/* |
可测试状态 reducer 的拆分方式 | REQ-003 以后 |
src/services/planning.ts |
周计划和推荐规则的 demo 逻辑 | REQ-053/054 或对应计划 REQ |
src/views/Market.tsx / Product.tsx |
商品浏览与详情交互参考 | REQ-014 |
src/views/Basket.tsx / Plan.tsx |
肉篮/周计划语义参考 | REQ-025/055，需避免把肉篮当购物车 |
src/views/Checkout.tsx / Orders.tsx |
结算、订单、售后路径参考 | REQ-025/026/036/037，不能进入 REQ-001 |
tests/*.mjs |
页面渲染和领域逻辑测试写法参考 | 后续对应实现 REQ |
与 REQ-001 的可采纳点
- 保留“肉篮不是购物车、购物车是全局悬浮入口”的概念，但必须改为五 Tab 壳。
- 可借鉴移动端画布、桌面预览和品牌语气，作为 S2 设计讨论输入。
- 可借鉴“所有数据为示例、模拟支付不产生真实交易”的披露方式，但 REQ-001 页面最终应以“能力未就绪”占位为主。
- 可借鉴 testable reducer/service 的结构，但不在 REQ-001 引入业务 reducer 或推荐算法。
后续提升路径
- 保持本 H5 作为顾客端首选视觉和交互参考，
customer-miniapp-redesign作为回退与对照方案。 - 当前首选方向已整理为完整的
index.html、stories、flows、scenario 四件套和页面证据；下一次 UI REQ 锁定前，须以本包为输入完成模块级回归，不得把 H5 的 mock 交易路径直接写入产品实现。 - 若首选方向在评审中被否决，按 DFD-003 的恢复路线切回
customer-miniapp-redesign，并记录新的设计决策。 - 产品代码阶段只实现 REQ-001 拥有的壳层：五 Tab、悬浮购物车入口、PortalHost、后台 Layout、五发布单元工程骨架。
2026-09-22 活动回填验证
- 来源一致性：最新 commit 的 139 个源码文件逐文件 SHA-256 对照，缺失 0、差异 0。
- 模块门禁：
loop-harness doctor --root .、validate --all --root .通过；活动投影的release-graph validate --installed与docs check通过。 - H5 源码（隔离临时目录）验证：
npm run typecheck通过；主npm test为 12/12；npm run build和npm run test:build为 1/1。 - 配送边界测试：
tests/delivery.test.mjs为 6/6 通过。 - 计划边界测试：
tests/plan-purchase.test.mjs为 7 通过、2 失败。失败来自 commit 自带实现src/services/planPurchase.ts与测试预期的身份语义不一致：同一meal.id但切换period仍按mealId命中，测试期望pending；替换id后没有mealId命中，测试期望ordered。本次仅迁移原型，未改写最新 commit；该项登记为源码快照残余风险。 design-foundation check以 advisory 方式通过；源码内部的 H5 token/CSS 原样保留，工具对其中未注册到 v0.2.0 Foundation 的颜色给出警告。活动模块入口和页面证据使用当前docs/design/tokens/tokens.css，后续产品化需另做语义 token 映射。
独立预览部署
首选 H5 源现在提供独立 Docker Compose 预览，部署说明位于
deployment.md，配置位于 deploy/docker/。默认只绑定
0.0.0.0:4300；它只证明原型可构建和可查看，不改变 H5 不是小程序产品实现的边界。
2026-09-22 已实测 Docker 镜像构建、Compose 启动、healthy 健康检查和
GET / HTTP 200；容器以非 root 用户运行，外部端口为 4300。