# 老城寻味 · 集章地图

> 活页公开模板 `sample-checkin-map` · 场景: 行程 · 攻略 · 行业: 旅游出行 / 餐饮茶饮
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/ZhvEv_hLM1YL · 详情: https://space.24haowan.com/examples/sample-checkin-map

## 这是什么

集章地图 · 文旅美食打卡路线，游客边走边盖章

## 什么时候用

一条有几个点要依次走到的路线：文旅集章、美食探店、景区打卡、商圈寻宝、校园定向，读者在路上用手机打开、到一处点一下，集满有个结果，选它。只是告诉家人几天怎么走、住哪儿选 sample-weekend-trip；带地图的单场邀请（怎么到饭店）选 sample-invitation；按场次收报名选 sample-event-signup。

## 用户对助手说的原话

帮我做一张美食打卡集章地图，发成一个网页链接，游客在路上用手机打开：顶上一行主办方和活动日期、路线名，下面「已集 3 / 8」和八个小圆点；首屏是一张手绘风的城市地图（街巷、一条河和桥、几个地标、指北针和比例尺），八个打卡点的图钉沿一条虚线路线排开、标上店名，能双指缩放和拖动、电脑上滚轮缩放，下一站的图钉高亮、轻轻脉冲，已经去过的点画成不同颜色的圆形印章；点图钉从底部弹出抽屉：第几站和地点、店名、招牌菜配一个小插画、人均、营业时间、一句像本地人说的推荐、今天多少人来过、到下一站步行几分钟，再加一个称呼输入框和「我到了 · 盖章」大按钮，提交存进数据表，存好后图钉变成印章、带盖章动画和一声闷响（可静音）；集满八个弹一张证书卡，写上称呼、日期、八个印章和领奖地点。地图下面按顺序列出八家店的完整信息，再写几条出发前的须知（全程距离、店休、领奖规则）。颜色清爽，少用底色块；不跑脚本时地图下面的列表和一张普通表单也能用。店家信息有变就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 集章地图
- 八家店
- 出发前看一眼

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

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

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

- 首屏一张可缩放、可拖动的手绘地图（内联 SVG），盖过章的点变成彩色印章，盖章有动画和声音
- 到店盖章写回数据表（原生表单 POST ./_data/stamps），页面读回每一站「今天 N 人来过」
- 集满出一张值得截图的证书卡；店家信息有变更新同一个链接

## 发之前要备好

- 数据表 stamps（列 name / spot，append_open=true）：到店盖章写进这里，页面读回每一站今天来过几人；发布前先用 set_data 建好，活动结束后把 append_open 关掉

## 模板说明（README）

模板市场第二波「富媒体 H5」样例（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
虚构城市「榕城」文旅推出的「老城寻味」美食路线，游客在路上用微信打开。示例数据均为虚构。

## 演示哪个特色

**一张能缩放的手绘地图 + 到店盖章写回数据表。**

- **记忆点**是首屏那张内联 SVG 城市地图：街巷、榕溪、南桥、鼓楼与白塔，八个打卡点图钉沿一条虚线路线排开。
  入场时路线沿路画出、图钉依次落下；下一站的图钉是朱红色、带一圈轻轻的脉冲（全页唯一的循环动画）。双指缩放、拖动，电脑上滚轮缩放，右下角有放大 / 缩小 / 看全图。
- 盖过章的点变成彩色印章（朱、靛、松、姜四色轮换）；盖章时印章从大到小砸下、墨迹扩散、地图轻轻一震，
  点按后才有一声 Web Audio 合成的「咚」（右上角可静音），支持的手机轻震一下。顶部「已集 3 / 8」跟着变，集满八个出「寻味达人」证书卡，适合截图。
- 发出去之后：抽屉里的「我到了 · 盖章」是原生表单，写进数据表 `stamps`；脚本在时页内提交、就地盖章，并读 `./_data/stamps.json`
  显示每一站「今天 N 人来过」（页面里的底数 + 表里今天的行），读者自己提交过的行（`_mine`）读回时也会盖上。店家营业时间有变，更新同一个链接。
- 盖章状态只是演示：页面里写死前三站已盖；`localStorage` 只记本机体验，不作显示前提。脚本不跑时图钉是跳到下面列表的链接，
  列表是八家店的完整信息，列表底下是一张普通表单，照样能盖章。`prefers-reduced-motion` 时所有动效停在终态。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` | 主办方、活动期、路线名 |
| 地图 `#city` | `viewBox` 是 360×560 的竖版；街是 `.m-road`（先画 `.m-road-e` 描边），河是 `.m-river`，街区 `.m-block`，绿地 `.m-green`，地标是几笔线条图形，地名是 `.m-name` / `.m-land`。四周画出 viewBox 之外一圈，手机比例不同时也不露边 |
| 路线 | `.m-route`（虚线）与 `mask#reveal` 里 `.rvp`（入场画线）是同一条路径，改一处要同改另一处 |
| 图钉 `.pin` | 每个 `<g transform="translate(x,y)">` 是一站，`data-s` 是站号，`--c` 是印章颜色；`.lb` 是图钉旁的店名，`.s-t` 是印章上的两个字；已盖章的加 `class="done"`，下一站加 `next`（脚本会自己重算） |
| 列表 `.spot` | 一站一条，抽屉的内容全从这里读：`.where` 地点、`h3` 店名、`.sig b` 招牌菜、`.meta` 人均和营业时间、`.say` 推荐一句、`.walk` 到下一站；`data-base` 是「今天 N 人来过」的底数（发自己的活动时改成 `0`，只数数据表） |
| 招牌菜插画 | 页首 `<symbol id="d1">`…`d8`，64×64 的线条小画，列表和抽屉用 `<use href="#dN">` 引用 |
| 证书 `.cert` | 标题、一句话、领奖地点；八个小印章由脚本从地图上的印章复制 |
| 出发前看一眼 `.notes` | 全程距离、店休、领奖规则（`.gift` 是琥珀细线提示） |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的路线时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

## 数据表

到店盖章写进数据表 `stamps`（一次一行，`append_open=true`）：`name` 是游客填的称呼（不填记「游客」），`spot` 是店名（与列表 `h3` 一致，读回按它数人）。发之前先建表：

```
set_data  proposal_id: <id>  table: "stamps"  columns: ["name","spot"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=stamps` 读回，就是每家店每天来了多少人。活动结束后把 `append_open` 关掉。本地 `space-cli serve` 会把提交写进包里的 `_data/stamps.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
给游客看要公开：`set_visibility visibility="public"`（先问发布者），再把链接做成二维码贴在路线起点和每家店门口。

## 素材

- 没有位图：地图、印章、八道菜的小插画和标志都是内联 SVG；声音是 Web Audio 现合成的。城市、店名、人数与价格均为虚构，只作示意。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机大图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。