# 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 产品实现的边界。

新增或深化的验证内容：

1. 计划基本单位由单道菜扩展为一餐多菜，午餐和晚餐可独立安排。
2. 餐轨区分未安排、已计划待购买、已下单，以及菜单变化待核对状态。
3. 首页动态卡展示隔日预购内容、配送时段和确认配送入口；支持默认自动配送与超时自动退款语义。
4. 计划菜卡改为横向菜单轨道，移除重复餐次标题，并在轨道末尾提供独立加菜卡。
5. 增补配送确认、计划采购关联及边界测试；原型测试总数更新为 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/场景包。

原因：

1. REQ-001 锁定目标是工程骨架、五发布单元、小程序五 Tab 壳、悬浮购物车入口、PortalHost 和后台布局壳；该 Demo 是独立 H5 体验，技术栈和目标工程不同。
2. Demo 底部导航是 `肉市 / 计划 / 我的` 三 Tab；REQ-001 要求顾客小程序底部固定五 Tab：`首页 / 买肉 / 订阅 / 肉篮 / 我的`，且购物车是悬浮入口。
3. Demo 含自由买肉、菜谱、计划、结算、模拟支付、订单、售后、订阅等业务路径；REQ-001 明确不实现真实交易规则、业务状态机、下单/支付/容量等能力。
4. 仓库 `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 的可采纳点

1. 保留“肉篮不是购物车、购物车是全局悬浮入口”的概念，但必须改为五 Tab 壳。
2. 可借鉴移动端画布、桌面预览和品牌语气，作为 S2 设计讨论输入。
3. 可借鉴“所有数据为示例、模拟支付不产生真实交易”的披露方式，但 REQ-001 页面最终应以“能力未就绪”占位为主。
4. 可借鉴 testable reducer/service 的结构，但不在 REQ-001 引入业务 reducer 或推荐算法。

## 后续提升路径

1. 保持本 H5 作为顾客端首选视觉和交互参考，`customer-miniapp-redesign` 作为回退与对照方案。
2. 当前首选方向已整理为完整的 `index.html`、stories、flows、scenario 四件套和页面证据；下一次 UI REQ 锁定前，须以本包为输入完成模块级回归，不得把 H5 的 mock 交易路径直接写入产品实现。
3. 若首选方向在评审中被否决，按 DFD-003 的恢复路线切回 `customer-miniapp-redesign`，并记录新的设计决策。
4. 产品代码阶段只实现 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`](deployment.md)，配置位于 `deploy/docker/`。默认只绑定
`0.0.0.0:4300`；它只证明原型可构建和可查看，不改变 H5 不是小程序产品实现的边界。

2026-09-22 已实测 Docker 镜像构建、Compose 启动、`healthy` 健康检查和
`GET /` HTTP 200；容器以非 root 用户运行，外部端口为 `4300`。