# 暖丘电器邀您来 15.2 馆 C08

> 活页公开模板 `sample-expo-booth` · 场景: 邀请函 · 行业: 制造供应链 / 电商外贸
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/a-haMDwvHEjJ · 详情: https://space.24haowan.com/examples/sample-expo-booth

## 这是什么

展会邀请 · 请客户来展位

## 什么时候用

参展商请客户、经销商、采购来自己的展位：展会邀请函、展位导览、展期约见。首屏一块大号展位牌（馆号 + 展位号），一张从入口走到展位的平面图分步亮起，看什么新品、几点演示，文末收预约时段（数据表 appointments）并显示每个时段已约几位。请亲友吃饭、喝喜酒选 sample-invitation / sample-wedding-invite；按场次分名额、收报名选 sample-event-signup；介绍公司和产品线、不涉及到场选产品图册类模板。

## 用户对助手说的原话

帮我做一份展会邀请函，请客户和经销商来我们展位，发成一个网页链接：页头一行公司标志和发出日期，一句大字标题说在哪个展会、哪个馆等您，一句话说带了什么新品；下面是全页最显眼的一块展位牌，像印出来的门头 / 入场券：顶部一条品牌色横带写公司和展会名，中间左边小字馆号、右边特大号展位号，底部虚线撕口写展期和场馆，提示读者截图这块牌子到馆里问路；再一行展期与开放时间（最后一天提前闭馆）、展位号和面积、观众证怎么领。接着「怎么走」画一张场馆二层平面示意图（内联 SVG）：入口门、扶梯、主通道、相邻展馆淡画、目标展馆里一排排展位块和排号，目标展位用品牌色块标出并加一圈光晕，从入口到展位的路线分三段，进入视野时依次画出来；图下面三步文字路线（进门坐扶梯上二层 → 沿主通道走到展馆入口 → 进门右转第三排看到橙色门头），每步带距离或分钟数，点哪一步图上只亮那一段，再点一次回到全程；手机和电脑各画一套坐标。然后「到展位看什么」四款产品，每款一个线描小插画（不用照片）、名字、一句卖点、现场演示时间，再用左侧细色线提一句经销 / OEM 洽谈怎么约；再做预约：先列五个时段（每天上午 / 下午，最后一天只有上午），每个时段一条细进度条显示已约几位，下面一张表单：称呼、公司、手机尾号后 4 位、最想看哪款（从上面四款里选）、哪个时段，提交存进一张数据表，页面读这张表统计每个时段几位（别写死数字），提交后表单换成一张预约卡：已预约哪个时段、到展位报手机尾号、大号尾号、接待人电话；最后联系人（姓名、职位、电话可点拨）、地址带复制按钮、地铁和开车怎么走。配色用冷灰底 + 深墨蓝 + 一个橙色强调，暗色也要好看；电脑上左边放标题、展位牌、产品和预约，右边一大张平面图和三步路线、下面接着放联系方式和交通，不要一条窄长条。展位或时间有变就更新同一个链接。

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

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-expo-booth/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-expo-booth ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 怎么走到展位
- 到展位看什么
- 预约时段
- 联系与地址

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

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

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

- 页内预约回写数据表（原生表单 POST ./_data/appointments），页面读回每个时段已约几位，提交后就地出一张预约卡
- 同一链接更新不变（展位调整、演示时间改了都在这一页）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 appointments（列 name / company / phone_tail / product / slot，append_open=true）：文末预约写进这里，发之前先用 set_data 建好；页面读回所有行统计每个时段人数，所以只收手机尾号不收整号；展会结束后把 append_open 关掉

## 模板说明（README）

只进模板市场的托管模板（总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构：「暖丘电器」、「2026 华东智能家居与五金博览会」、「东港国际会展中心」、东港大道、地铁东港站、联系人林蔚和电话都是编的。页面没有图片，产品插画和平面图都是内联 SVG。

## 演示哪个特色

**文末预约写回数据表、页面读回每个时段已约几位 + 展期有变更新同一个链接。**

- 记忆点：页头那块展位牌（`.sign`：橙色横带 + 特大号「C08」+ 虚线撕口，第一次打开轻轻「挂」上来一下），配一句「截一张这块牌子」；
  和「怎么走」的场馆平面图（`svg.map`，`.wide` 电脑 / `.narrow` 手机各一套坐标）：路线分三段 `path.s1 / .s2 / .s3`，进入视野时依次画出，
  点下面的第几步（`.steps button[data-step]`）图上只亮那一段，再点一次回到全程。C08 那圈光晕是全页唯一的循环动效，`prefers-reduced-motion` 时动效全停在终态；不跑脚本时路线照常完整。
- 预约是原生表单 `<form method="post" action="./_data/appointments">`（不跑脚本也能提交）；脚本在时页内提交，表单换成一张预约卡（时段 + 大号手机尾号 + 接待人），
  并读 `./_data/appointments.json` 统计每个时段已约几位（`#slots` 的进度条以 12 位为满，同时写进时段下拉的选项里）。
- 读回的 JSON 是看得到这一页的人都能读的，所以只收**手机尾号后 4 位**（到展位对上预约用），不收整个号码；要回电的客户会直接打联系人的电话。
- 电脑 1440：左边是标题、展位牌、产品和预约（阅读顺序先看到是谁、在哪），右边 720 宽的平面图与三步路线，下面接着是联系与交通（DOM 里两节包在 `.side` 里；手机上 `.side{display:contents}` 加 `order` 排回 怎么走 → 看什么 → 预约 → 联系）；1100 以下单栏，600 以下换手机那套平面图。

## 数据表

`appointments`（列 `name` / `company` / `phone_tail` / `product` / `slot`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="appointments" revision=0 rows=[] columns=["name","company","phone_tail","product","slot"] append_open=true
```

`slot` 的值是 `26日上午` / `26日下午` / `27日上午` / `27日下午` / `28日上午`（与 `#slots li[data-slot]`、下拉 `option value` 一致）。
展前一天用 `list_data_rows table=appointments` 读回，按时段排好接待；展会结束把 `append_open` 关掉。本地 `space-cli serve` 会把提交写进包里的 `_data/appointments.json`，试完改回 `[]`。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.sub` | 公司标志（内联 SVG）、发出日期、标题、一句话 |
| 展位牌 `.sign` | 横带上的公司与展会名、馆号 `.hall b`、展位号 `.booth`（中间那位数字包在 `<i>` 里变橙色，可去掉）、撕口下的展期与场馆；`aria-label` 同改 |
| `.facts` | 展期与开放时间、展位面积、观众证怎么领 |
| 平面图 `svg.map.wide` / `svg.map.narrow` | 展馆方块、展位块 `.blk`、排号、通道、扶梯、入口门；三段路线 `.s1 / .s2 / .s3` 的端点首尾相接，`.seg-bg` 是三段连起来的底线；目标展位 `.me` 与光晕 `.halo` 同坐标；两套都要改，`aria-label` 同改 |
| 三步路线 `.steps` | 每步一个 `button[data-step]`，与图上的段号一一对应；右侧距离 / 分钟 |
| 「到展位看什么」`.goods` | 每款一个 `<li>`：线描插画（64×64 内联 SVG，`.l` 描线、`.a` / `.al` 强调色）、名字、卖点、演示时间；`.aside` 写经销洽谈 |
| 预约 `#slots` + `form.book` | 时段（`data-slot` 与 `option value` 一致）、每时段满额 `CAP`（脚本里）、产品下拉与上面的产品一致；字段名要和 `appointments` 的列一致 |
| 预约卡 `#ticket` | 顶部场馆一行、接待人电话（脚本 `show()` 里也有一处；示例号码 130 0000 0186 / 021-5555-0186 是编的，换成你自己的） |
| 联系 `#contact` | 联系人、电话（`tel:`）、地址与 `data-copy`、地铁 / 开车 / 样品三句 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致）+ 一句适用场景；发自己的邀请时整段删掉 |
| `manifest.json` | `title` / `share.*`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 怎么发出去

```bash
node core/space/cli/space-cli.mjs push <包目录> --proposal <proposal_id> --manifest <包目录>/manifest.json --hold
# 先建 appointments 表 → 预览确认 → publish_version → 链接发给客户、发到经销商群
```

或者没有终端时用 MCP `publish_file`（`filename: "index.html"`，`manifest` 用本目录那份去掉 `entry`，`hold: true`）。
展位号、演示时间有变：改完再推一次到**同一个** `proposal_id`，链接不变，客户收藏的那条就是最新的。
验收截图：`node --import tsx examples/verify-shots.mjs sample-expo-booth --write-thumb --write-phone`（QUALITY.md §7）。