# 来云溪生命科学园，这样走

> 活页公开模板 `sample-visitor-guide` · 场景: 手册 · 指南 · 行业: 企业内部 / 医疗健康
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/kR3q1EXmM1D6 · 详情: https://space.24haowan.com/examples/sample-visitor-guide

## 这是什么

访客交通指引 · 园区、公司给来访的人看怎么来

## 什么时候用

园区、公司总部、工厂、门店、学校要告诉来访的人（客户、面试者、合作方、供应商）怎么来、到了去哪登记：一张可点的园区示意图 + 按地铁 / 自驾 / 打车 / 机场高铁分的路线 + 到了之后的登记换证和会议室楼层，文末收来访登记。只请人来一次饭局或聚会、要回执几位大人小朋友选 sample-invitation；教员工一步步操作某件事选 sample-handbook；几天的出行安排选 sample-weekend-trip。

## 用户对助手说的原话

帮我给我们园区做一份访客交通指引，发成一个网页链接给来访的客户、面试的人和合作方：页头是园区名，一行地址（能长按复制，再配一个复制按钮）、前台电话（点了能拨）、接待时间和更新日期；接着画一张北向上的园区示意图：大门、每栋楼、访客停车场、地铁口，用虚线画出从地铁口走到访客中心的路，标出步行米数和分钟数，访客中心上标「先到这里」；点图上某栋楼会高亮，图下面一行一栋楼写它是做什么的、访客能不能进；然后「怎么来」按地铁、自驾、打车、机场高铁分开，每种写三步和预计时间；「到了之后」按顺序写登记换证、等接待人、过闸机坐电梯、离开交证，再列会议室在哪栋几层；再写园区里吃饭、休息、无障碍通道，几条常见问题做成点开看的；最后一张「我要来访」表单（称呼、单位、来访日期、车牌、找谁），存到一张数据表里，提交后显示已登记。手机是主场景，示意图手机上单独画一套，按钮和可点的地方够大；少用底色块，用细线分隔。地址或楼层有变就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 园区示意图
- 怎么来
- 到了之后
- 吃饭、休息和无障碍
- 常见问题
- 我要来访

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

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

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

- 可点的园区示意图（内联 SVG，手机 / 电脑各一套坐标），点楼高亮并对应下方楼栋说明
- 页末来访登记回写数据表（原生表单 POST ./_data/visits），提交后就地显示「已登记」
- 地址、楼层、停车规则有变动更新同一个链接，发出去的旧链接一直有效
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 visits（列 name / company / date / plate / host，append_open=true）：文末「我要来访」写进这里，发之前先用 set_data 建好；前台每天用 list_data_rows 读回做访客证

## 模板说明（README）

只进画廊的样例（活页模板市场第一波，K1DG；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构（云溪生命科学园、7 号线云溪北站、滨江国际机场、电话、人名都是编的）；页面没有位图，图标与示意图都是内联 SVG。

## 演示哪个特色

**一张可点的园区示意图 + 文末来访登记写回数据表 + 有变动更新同一个链接。**

- 记忆点：「园区示意图」（内联 SVG，北向上）：南门、六栋楼 / 停车场、地铁口，从地铁口到访客中心的步行虚线（米数与分钟数），
  访客中心上一枚「先到这里」脉冲点（全页唯一的循环动效，`prefers-reduced-motion` 时停）。点图上某栋楼高亮，图下楼栋清单同一行跟着高亮；
  点清单也反过来高亮图。不跑脚本时图与清单照常完整可读。电脑与手机各一套坐标（`.wide` / `.narrow`），手机那套去掉了停车步道的注记。
- 手机是主场景（访客在路上打开）：地址可长按复制、另有「复制地址」按钮（脚本在时出现），前台电话是 `tel:` 链接，所有可点的地方 ≥ 44px。
- 文末「我要来访」是原生表单 `<form action="./_data/visits" method="post">`（不跑脚本也能提交）；脚本在时页内提交，就地显示「已登记」，
  按钮变成「已登记」。

## 数据表

`visits`（列 `name` / `company` / `date` / `plate` / `host`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="visits" revision=0 rows=[] columns=["name","company","date","plate","host"] append_open=true
```

读回：`list_data_rows table=visits`（前台每天看一次，提前做访客证、把车牌录进停车场）。`date` 是 `YYYY-MM-DD`，`plate` 选填。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.sub` / `.facts` | 园区或公司名、更新日期、标题、一句给谁看；地址（`.addr` 与 `.copy` 的 `data-copy` 同改）、前台电话（`tel:` 同改）、接待时间 |
| 「园区示意图」`svg.map`（`.wide` / `.narrow`） | 道路、园区边界、每栋楼一个 `g.b[data-b]`（方块 + 楼号 + 用途）、步行虚线 `path.walk`、地铁口、车行入口、「先到这里」与脉冲点同坐标；比例尺按「路线像素 ÷ 实际米数」重算；`aria-label` 同改 |
| 楼栋清单 `.blist` | 每行一个 `button[data-b]`，`data-b` 与图上那栋楼一致；访客不能进的楼在图上加 `x` 类（斜线填充） |
| 「怎么来」`.modes` | 每种交通方式一行：图标、名称、预计时间（`.t b`）、三步 `.steps`；没有的方式整行删掉 |
| 「到了之后」 | 登记换证的顺序、要提醒的一句放 `.aside`（左侧细色线）、会议室楼层 `.rooms` |
| 「吃饭、休息和无障碍」「常见问题」 | 逐行改；常见问题每条一个 `details` |
| 「我要来访」 | 字段名要和 `visits` 的列一致 |
| 页脚 | 平台标志与名称（与 `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 core/space/examples/sample-visitor-guide \
  --proposal <proposal_id> --manifest core/space/examples/sample-visitor-guide/manifest.json --hold
# 先建 visits 表 → 预览确认 → publish_version → 链接贴进邀约短信、面试通知、会议邀请
```

地址、楼层、停车规则有变：改完再推一次到**同一个** `proposal_id`，已经发出去的链接不变。
验收截图：`node --import tsx examples/verify-shots.mjs sample-visitor-guide --write-thumb`（QUALITY.md §7）。