# 麦穗烘焙 · 天河店开业邀请

> 活页公开模板 `sample-store-opening` · 场景: 邀请函 · 行业: 零售门店 / 餐饮茶饮
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/VfNQ-u_w_OU2 · 详情: https://space.24haowan.com/examples/sample-store-opening

## 这是什么

门店开业邀请 · 发到朋友圈和社群

## 什么时候用

新店开业、分店开张、门店重装开门，想发一个在朋友圈和社群里点开就有仪式感的邀请：首屏揭幕、开业几天的福利、当天天气、怎么到店，再让人先领一张开业券，选它。只想抽奖选 sample-lucky-wheel；请亲友吃饭回个执选 sample-invitation；按场次收报名选 sample-event-signup。

## 用户对助手说的原话

帮我给我们面包店的新分店做一个开业邀请，发成一个网页链接到朋友圈和社群：首屏是一块用 SVG 画的门头（招牌、条纹雨棚、摆满面包的橱窗、玻璃门），被两幅红布盖着、中间系一条金绳，点「拉开红布」或在门头上左右一划，红布向两边收起、喷出彩带，之后在门头上点一下就撒一把面粉粒子，声音用合成的短音效、点了才响、有静音键；门头旁边是一句大标题、店主一句话和到开业那一刻的天时分秒倒计时，再放一个「领开业券」按钮和「已有 N 人领券」。往下是开业三天的日程，每天一个福利和两三条安排；然后是开业那天的天气，用真实的天气预报（先内联一份今天抓的快照，脚本在时再取实时、3 秒超时，写明数据来源和更新时间），下雨就提示店内备伞；再画一张到店路线小地图（地铁口、步行路线、公交、停车、比例尺），带复制地址；最后一张领券表单：选哪天来用、称呼、手机尾号 4 位，存进一张数据表（name / phone / day），提交后就地生成一张值得截图的电子券。手机竖屏为主，电脑上门头和文字左右并排、下面分两栏；动效在减少动态时停在终态，脚本不跑时也能看全并提交。开业期间有变化就更新同一个链接。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-store-opening/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-store-opening ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 揭幕
- 开业三天
- 当天天气
- 怎么来
- 领开业券

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-store-opening/source/index.html（入口）

## 发成活页之后还能做的

- 内联 SVG 门头 + 红布揭幕动画、彩带与撒面粉 canvas 粒子、Web Audio 合成音（点按后才发声，可静音）
- 开业当天天气两层加载：内联 Open-Meteo 快照先画，脚本在时取实时预报替换，下雨自动提示「店内备伞」
- 领开业券写回数据表（原生表单 POST ./_data/coupons），提交后生成可截图的电子券，页面读回「已有 N 人领券」与每天剩余
- 同一链接开业期间持续更新；微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 coupons（列 name / phone / day，append_open=true）：领券表单写进这里，phone 只收手机尾号 4 位，页面读回人数与每天剩余；发布前先用 set_data 建好，开业活动结束把 append_open 关掉
- 页面会连 api.open-meteo.com 取天气（免费、无需 key），页里同时内联一份快照，连不上也能显示

## 模板说明（README）

模板市场第三轮补齐空缺的样例（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。虚构面包店「麦穗烘焙」开第二家店（天河店），店主发到朋友圈和社群。店名、地址、街道、地铁站名、电话、人名均为虚构；天气是真实数据。

## 演示哪个特色

**一块点开就想揭的门头，加上「先领一张券」的回写与读回。**

- **记忆点**是首屏的门头：招牌、红白条纹雨棚、摆满面包的橱窗、玻璃门全是内联 SVG。开业前被两幅红布盖着（轻轻摆动），中间一条金绳写着揭幕日期。点「拉开红布」、点门头或在门头上左右一划，红布向两边收拢成褶、灯串亮起、两侧喷出彩带（canvas），配一声合成的「唰」+ 四音上行（Web Audio，**只在点按后**发声，右上角静音键）、手机轻震。揭幕后在门头上点哪儿，哪儿就撒一把面粉粒子。
- 旁边是倒计时（到 `2026-11-01 09:00` 北京时间的天 / 时 / 分 / 秒）；开业后自动换成「开业第 N 天，今天的福利：……」，三天过后换成平时营业时间。
- **开业当天天气，两层加载**（真实数据，广州天河坐标 23.1247, 113.3612）：页里内联 `WEATHER_SNAPSHOT`（今天实抓的 Open-Meteo 7 天预报 + 抓取时间），首屏先画快照；脚本在时 `fetch` 实时预报（`AbortSignal.timeout(3000)`），取到开业那天就替换、标「实时 · 更新于 HH:MM」，取不到就留快照、写「数据更新于 <快照时间>」。开业日下雨（WMO 雨类代码或降水概率 ≥ 40%）就提示「店内备伞」，偏热就提示遮阳棚。始终署名「天气数据：Open-Meteo.com（CC BY 4.0）」。
- 发出去之后：文末「领一张开业券」= 原生表单 `POST ./_data/coupons`（列 `name / phone / day`），脚本在时页内提交、就地生成一张可截图的电子券（券号 `MS<月日>-<尾号>`，店员凭称呼 + 尾号核）。页面读 `./_data/coupons.json`：首屏和文末显示「已有 N 人领券」，三天日程里显示每天已领、表单里显示每天还剩几张（每天 200 张）；自己领过的（`_mine`）再打开直接亮出那张券。
- **隐私**：`phone` 只收手机尾号 4 位。页面读回会把已审核的行返回给每个读者（页面只拿来数人数），所以别改成收整个手机号；要收完整联系方式，改用平台表单块 `set_form` 的 `members_only` 或别做读回。
- `prefers-reduced-motion`：红布直接是揭开的、不摆动，不放彩带和面粉，路线虚线不流动。
- 脚本不跑时：红布不出现（门头直接露出来），倒计时换成一句「11 月 1 日（周日）上午 9:00 揭幕」，天气显示快照里的值，表单照常能提交。
- 电脑上：门头和标题 / 倒计时左右并排，开业三天三栏，天气与路线两栏，领券表单旁边是一张随选项实时变化的券预览。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 首屏 `.shop` / `h1` / `.boss` | 店名、第几家店、标题、店主一句话 |
| 门头 SVG `svg.front` | 招牌字（`<text>麦穗烘焙</text>`）、橱窗里的面包、门上的「11.1 开业」牌、金绳上的揭幕日期；红布是 `#curL` / `#curR` 两个组，别改 id |
| 脚本 `OPEN_AT` | 揭幕时刻（带 `+08:00`）；倒计时、「开业第 N 天」都从它算 |
| 脚本 `DAYS` + `.days` 三个 `<li>` + 表单三个单选 | 开业几天、每天的福利（`what`）；`day` 值（`11月1日`）在脚本、`data-day`、单选 `value` 三处一致，也就是写进表里的 `day` |
| 脚本 `LIMIT` | 每天限多少张；`.left` / `.n` 里的静态数字跟着改 |
| 天气 `WEATHER_SNAPSHOT` + fetch 地址里的坐标 | 换成你门店所在城市的坐标（Open-Meteo 用经纬度）；快照格式见下 |
| 天气提示 `paintWeather()` 里三句 | 下雨 / 偏热 / 天气好时各说什么 |
| 路线图 `svg.map.narrow`（手机，343 宽）/ `svg.map.wide`（电脑，560 宽） | 两套坐标各画一份：路名、地铁口、步行路线 `path.walk`、公交、停车、比例尺（按路线像素长度 ÷ 实际米数算 100 米多长），`aria-label` 同步 |
| `.how` | 地址、地铁、停车、营业时间与电话 |
| 电子券 `.ticket` | 券面文字、使用规则；券号规则在脚本 `fill()` |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的邀请时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

### 天气快照

`index.html` 末尾脚本里的 `WEATHER_SNAPSHOT` 就是 Open-Meteo 返回的原样子集，抓取时间写在 `fetched`（北京时间）：

```js
var WEATHER_SNAPSHOT = {
  "fetched": "2026-10-29T06:15",
  "current": { "temperature_2m": 24.4, "weather_code": 3 },
  "daily": { "time": [...7 天], "temperature_2m_max": [...], "temperature_2m_min": [...], "weather_code": [...], "precipitation_probability_max": [...] }
};
```

刷新办法：`curl` 下面这个地址，把 `current` 与 `daily` 原样贴进去、`fetched` 改成 `current.time`，再发一版（同一链接）。每日定时任务也只改这一段。
开业日不在快照的 7 天里时，页面不画天气数字，只留来源行，所以开业前 6 天内发最合适。

```
https://api.open-meteo.com/v1/forecast?latitude=23.1247&longitude=113.3612&current=temperature_2m,weather_code&daily=temperature_2m_max,temperature_2m_min,weather_code,precipitation_probability_max&timezone=Asia%2FShanghai&forecast_days=7
```

## 数据表

领券写进数据表 `coupons`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "coupons"  columns: ["name","phone","day"]  rows: []  append_open: true  revision: 0
```

店员核券时用 `list_data_rows table=coupons` 读回、按称呼 + 尾号 + 日期对；开业活动结束把 `append_open` 关掉。本地 `space-cli serve` 会把提交写进包里的 `_data/coupons.json`，试完记得改回 `[]`。

## 怎么发出去

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/sample-store-opening \
  --proposal <proposal_id> --manifest core/space/examples/sample-store-opening/manifest.json --hold
```

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
给谁看：默认仅自己可见；发朋友圈和社群前用 `set_visibility` 改成 `public`。开业前一两天刷新一次天气快照再发一版，链接不变。

## 素材

- 没有位图：店标、门头、红布、路线图、天气图标、电子券全部是内联 SVG，彩带与面粉是 canvas 现画；店名、地址、街道、站名、电话、人名均为虚构。
- 天气：Open-Meteo.com（CC BY 4.0），页面上署名。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。