订场办活动页 PRD 附录 v0.2 · 给机器跑的

订场办活动页 · 附录

这一页是给机器跑的，你不用看。正文在 reserve.html。这里只放可跑的检查、接线和埋点的写法、数字出处。

功能 → 检查（可跑）

都在仓库根目录跑。<页面地址> ＝ 改完的 /reserve（本机或预览地址）。过关线 ＝ 命令输出最后一行要出现的字。编号跟正文那张表一一对应，按重要度排。

编号功能检查（命令 · 过关线 · 对照 · 现状）
F01每一屏装进一个屏幕：电脑 1280×720（导航 73 像素，可用 647）、手机 375×812（导航 69 像素，可用 743），日光、夜间两种配色，不许左右超出NODE_PATH=/Users/jack/yummy-repos/website/node_modules node tools/page-fit-check.cjs <页面地址> · 默认就量这两个尺寸、两种配色 · 过关线 FIT TOTAL: 0 failures · 对照：线上现状 6 处超高（电脑多 224 / 367 / 431 像素，手机多 1,093 / 972 / 1,358 像素），版式 A 高保真稿 0 处 · 工具已在磁盘上
F02屏的顺序 hero → rooms → moments → how → book；第一屏正好一个黄色主按钮，写 Check dates，点了打开日历；Bay、Matcha、Original 三家店各有自己的 Check dates 入口NODE_PATH=/Users/jack/yummy-repos/website/node_modules node tools/reserve-page-check.cjs <页面地址> · 这一条看 RP1–RP3 · 过关线 RESERVE-PAGE TOTAL: 0 failures · 对照：版式 A 高保真稿 0 处，线上现状 12 处 · 工具已在磁盘上
F03日历弹窗顶上三店切换：不带店名的按钮打开时按时区选默认店；从店卡进来选中那家；点另一家换成那家的空档表；手机上切换那一排不让弹窗变宽NODE_PATH=/Users/jack/yummy-repos/website/node_modules node tools/reserve-page-check.cjs <页面地址> · 过关线 TOTAL: 0 failures · 用例至少四条：① 时区 America/Los_Angeles 时默认选中 Bay，别的时区和读不到时区都默认选中 Matcha；② 从 Bay、Matcha、Original 三张店卡进来各自选中那家；③ 点另一家后，弹窗标题、空档表和选空档后交给表单的店都换成那家；④ 手机 375×812 下分别从第一屏按钮和店卡打开弹窗：弹窗的 scrollWidth 不大于它的 clientWidth，整页也不出现横向滚动（jsdom 量不了宽度，这一条在同一份测试里用 playwright 开真浏览器量） · 现状：实施卡新建，先写测试、对现在的代码跑红，再改代码跑绿
F04选完空档交给表单不变：表单停在第 1 步只问人数，第 2 步要登录NODE_PATH=/Users/jack/yummy-repos/website/node_modules node site/tests/booking-handoff-step-test.js · 过关线 TOTAL: 0 failures · 现状：已有
F05付完款跳回 /reserve?booking=paid，付款结果面板照常打开NODE_PATH=/Users/jack/yummy-repos/website/node_modules node site/tests/booking-return-test.js · 过关线 TOTAL: 0 failures · 这份测试直接读 site/reserve.html，改版后面板元素和脚本接线还在它才会绿 · 现状：已有
F06文案规矩：没有中文；没有营收、融资、估值数字；没有假倒计时、假库存；没有 HUD 状态条和 § 编号；小标签不带 //、最多两个词；每屏最多一个强调词、最多一个黄色主按钮；图片都有 alt、只用站内图；旧承诺（30-second form、four fields、Prefer email? That works too）删净NODE_PATH=/Users/jack/yummy-repos/website/node_modules node tools/reserve-page-check.cjs <页面地址> · 这一条看 RP4–RP10 · 过关线 RESERVE-PAGE TOTAL: 0 failures · 工具已在磁盘上
F07新埋点真的发出：每屏每次打开页面一条 section_view；每点一次按钮一条 cta_clickNODE_PATH=/Users/jack/yummy-repos/website/node_modules node site/tests/observe-beacon-test.js · 过关线 TOTAL: 0 failures · 要新加的用例：五屏各进入屏幕一次，各报一条 section_view，section 属性依次是 hero、rooms、moments、how、book；同一屏再次进入不再报；点下面「接线」表里的六个按钮，各报一条 cta_click，带按钮上的字和去向 · 现状：测试文件已有，用例由实施卡新加
F08整页冷启动（第一次打开、没有缓存）10 秒内加载完python3 "/Users/jack/yummy-repos/Video Picker Git/tools/ops/pageload_probe.py" <页面地址> · 过关线：量出的整页加载时间 ≤ 10 秒 · 工具已在磁盘上

接线

东西写法
屏名每屏是一个 <section>，data-section 依次为 hero（第一屏）、rooms（三家店）、moments（真实照片）、how（怎么订）、book（最后一屏），全小写。三家店那屏另带 id="rooms"，给 See the rooms ↓ 滚动用。
店卡按钮现有写法不改：data-booking-calendar="Bay" / "Matcha" / "Original"，连同现有的 data-lead、data-lead-location 和链接 /reserve#lead=reserve&location=Bay（Matcha、Original 同理）。没有脚本时就走这个链接。
第一屏、最后一屏的 Check datesclass 带 btn fill（黄色主按钮）；挂 data-booking-calendar、值留空（表示不指定店，由弹窗按时区选默认店）；不挂 data-lead；链接 /reserve#lead=reserve（没有日历脚本时，lead-forms.js 按这个地址直接开订场表）。
See the rooms ↓描边按钮，链接 #rooms。
六个按钮第一屏 Check dates、See the rooms ↓；三张店卡各一个 Check dates；最后一屏 Check dates。Directions ↗ 和邮箱是链接，不算按钮。
脚本顺序booking-calendar.js 的 <script defer> 排在 lead-forms.js 前面：日历先登记点击，靠 stopImmediatePropagation 让表单那边不再响应同一下点击。
选空档后booking-calendar.js 的 openLeadForm 调 window.yfLeadForm.open('reserve', {店, 日期, 时段})；从第几步进由 lead-forms.js 的 resolveEntryStep 裁定；第 2 步要登录由 STEP2_REQUIRES_AUTH.reserve 决定，没登录时的说明是 AUTH_GATE_COPY.reserve；成功页文字是 SUCCESS.reserve。都不改。
三店切换在 booking-calendar.js 的日历弹窗顶上加一排三个按钮，字是 Palo Alto、Matcha House、Original，对应 STORES 里的 Bay、Matcha、Original。默认店：Intl.DateTimeFormat().resolvedOptions().timeZone 等于 America/Los_Angeles 时选 Bay，其余（包括读不到）选 Matcha；从带店名的按钮进来直接选中那家。点另一家就按那家重新打开空档表（openCalendar 同一套：标题、空档表、交给表单的店一起换）。要藏起来时用 [hidden]{display:none!important}。手机上不许让 .ybc-modal 变宽；空档表每行最小宽 520 像素不改。
日历加载失败renderFallback 照旧显示 "Skip calendar, fill in details →"，点了走 openLeadForm 开表单第 1 步，带弹窗里当时选中的那家店。
付款结果面板<section id="booking-return" hidden> 留在页面上、位置不动、默认藏着，没有 data-section，不算五屏之一。booking-return.js 认 ?booking=paid / cancelled 把它打开。
审核和付款店员在 /admin/bookings.html 审核；付款链接由 netlify/functions/booking-approve.mjs 发（Stripe），付完回 /reserve?booking=paid。都不改。

埋点

事件什么时候发带什么
section_view一屏第一次进入屏幕；同一屏在同一次打开页面里只发一次section ＝ 屏名（hero / rooms / moments / how / book）
cta_click点上面「六个按钮」里的任何一个按钮上的字、去向（日历，或哪家店的日历，或 #rooms）
不变现有的 booking_* 和 lead_form_* 两组事件（例如 booking_calendar_open、booking_slot_selected、booking_paid）照旧
怎么发走现有信标 observe-beacon.js，跟其它事件同一条路进统计库；打线上页面验收时带 yf_bot=1、拦掉信标请求—

数字从哪来