# 第一次来澄湾社区卫生服务中心？跟着走

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

## 这是什么

就诊指引 · 医院、诊所发给预约患者的一步步就诊流程

## 什么时候用

社区医院、诊所、口腔 / 体检中心、宠物医院要告诉第一次来的人：到了先去哪、每一步在几楼、要带什么、大概多久，读者在路上或候诊时用手机一步步对着走，文末收就诊后反馈。只讲怎么到园区、到了去哪登记换证选 sample-visitor-guide；教员工一步一步操作某个系统选 sample-handbook；要收报名或预约名额选 sample-event-signup。

## 用户对助手说的原话

帮我给我们社区医院做一份就诊指引，发成一个网页链接给预约了门诊的患者，让他们在路上或候诊时用手机对着走：页头是医院名和更新日期，标题「第一次来就诊？跟着走」，一行地址、咨询电话（点了能拨）和门诊时间，右上角放一个「字放大」按钮；正文最主要的是一条竖向的就诊步骤条：预约、到院、取号、候诊、就诊、缴费、检查 / 取药，每一步一个圆点和预计几分钟，当前那一步高亮、外面一圈轻轻的光，点开每一步有一张这层楼的小地图（标「您在这」和要去的房间，中间一条虚线）、一句话说去哪做什么、要带什么、一条温和的提醒和「办完了，下一步」按钮；步骤条上方（电脑上放右栏）是「我在哪一步」一排按钮，点了整页滚到那一步、前面的打勾，并算出到拿完药还要多少分钟；接着是 1 到 4 层可以切换的楼层平面图，每层下面列房间说明；然后是本周各科室出诊表，标出今天；再写几条点开看的常见问题；最后一张「就诊后反馈」表单（科室、1 到 5 分满意度、想说的话），存到数据表，页面上显示这个月收到几条、平均几分，旁边写上个月根据反馈改了哪三件事。字号偏大，老人也看得清，按钮够大；少用底色块，用细线分隔；手机是主场景，电脑上排成两栏。出诊表每周一更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 就诊七步
- 楼层导览
- 本周出诊
- 常见问题
- 就诊后反馈

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

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

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

- 竖向「就诊七步」步骤条：当前一步高亮，每步展开有楼层小地图（内联 SVG，您在这 → 去哪）、要带什么、预计时间
- 「我在哪一步」点选后整页滚到那一步、前面的步骤打勾，并算出办完还要多少分钟
- 1–4 层可切的楼层平面图（手机 / 电脑各一套坐标）和本周出诊表（自动标出今天）
- 文末「就诊后反馈」回写数据表（原生表单 POST ./_data/feedback），页面读回条数与平均分
- 出诊表每周更新同一个链接，发出去的旧链接一直有效
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 feedback（列 dept / score / note，append_open=true）：文末「就诊后反馈」写进这里，页面读回条数与平均分；发之前先用 set_data 建好，院办每周用 list_data_rows 读回

## 模板说明（README）

只进画廊的样例（活页模板市场，K1DG；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构（澄湾社区卫生服务中心、临溪路、电话、医生名字、出诊安排都是编的）；页面没有位图，图标、楼层图、小地图都是内联 SVG。

## 演示哪个特色

**一步步的就诊流程 + 「我在哪一步」 + 文末反馈写回数据表并读回 + 出诊表每周更新同一个链接。**

- 记忆点：「就诊七步」竖向步骤条（预约 → 到院 → 取号 → 候诊 → 就诊 → 缴费 → 检查 / 取药）。当前一步蓝色高亮，圆点外一圈轻轻的光
  （全页唯一的循环动效，`prefers-reduced-motion` 时停）；打开页面时连接线逐段长出来。每步展开有一张楼层小地图（橙色「您在这」→ 蓝色目的地，
  走廊里一条虚线）、一句话去哪、要带什么、一条提醒，以及「办完了，下一步」按钮。
- 「我在哪一步」：手机上是吸顶的一排圆角按钮，电脑上是右栏的清单；点一下整页滚到那一步，前面的步骤打勾，并算出「从这一步到拿完药大约还要多少分钟」
  （各步的分钟数在脚本里的 `MIN`，与每步的「约 N 分钟」同改）。
- 楼层导览：1–4 层可切的平面图，电脑一套横向坐标、手机一套转置后的竖向坐标（不是等比缩小）；每层一张房间说明。
- 本周出诊表：今天那一列自动标出来，并在表上方写一句「今天出诊：……」；手机上表格可左右滑、首列固定。
- 老人友好：根字号 17px（全页用 rem），右上角「字放大」切到 20px；可点的东西都 ≥ 44px。
- 不跑脚本时七步全部展开、四层平面图依次排开，内容完整可读，反馈表单照常提交。

## 数据表

`feedback`（列 `dept` / `score` / `note`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="feedback" revision=0 rows=[] columns=["dept","score","note"] append_open=true
```

`score` 是 1–5；`note` 选填。页面读 `./_data/feedback.json`，有数据时在表单上方写「这个月已收到 N 条反馈，平均 X 分」。
院办读回：`list_data_rows table=feedback`（每周一看一次，改了什么写进「上个月大家提的，已经改了」那三行）。

## 改哪里变成我的

直接改 `index.html`；楼层导览和七步的小地图画的是同一套楼层，改房间位置时两处对照着改。

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` / `.sub` / `.facts` | 机构名、更新日期、标题、给谁看的一句话；地址、电话（`tel:` 同改）、门诊时间 |
| 「就诊七步」`ol.flow > li.step` | 每步：标题、位置（`.sw`）、预计时间（`.tm`，脚本 `MIN` 同改）、一句话（`.sum`）、小地图、去哪、要带什么、提醒；步骤增减时「我在哪一步」的 `.chip` 同增减 |
| 小地图 `svg.mini` | 同层房间的位置要和楼层导览一致；目的地加 `to` 类，「您在这」两个圆与虚线 `path.route` 的起点同坐标 |
| 楼层导览 `.fp`（`svg.plan.wide` / `.narrow`） | 每层每个房间一个 `g.rm`（方块 + 名称 + 一行小字）；电梯加 `lift`、正门加 `gate`；`aria-label` 同改；下面的 `dl.rooms` 逐行改 |
| 本周出诊 `table.hours` | 表头日期、每行科室 / 医生 / 楼层、每格「全天 / 上午 / 下午 / 停诊」；脚本里 `new Date(2026, 9, 26)` 改成这一周的周一 |
| 常见问题 | 每条一个 `details` |
| 就诊后反馈 | 科室下拉与 `feedback.dept` 对应；「已经改了」三行每周换 |
| 页脚 | 平台标志与名称（与 `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-clinic-guide \
  --proposal <proposal_id> --manifest core/space/examples/sample-clinic-guide/manifest.json --hold
# 先建 feedback 表 → 预览确认 → publish_version → 链接贴进预约成功短信、公众号菜单、诊室门口的二维码
```

每周一换出诊表、临时停诊：改完再推一次到**同一个** `proposal_id`，已经发出去的链接不变。
验收截图：`node --import tsx examples/verify-shots.mjs sample-clinic-guide --write-thumb --write-phone`（QUALITY.md §7）。