# 我们在招人 · 青萝科技 2026 秋招

> 活页公开模板 `sample-job-post` · 场景: 招生 · 招聘 · 落地页 · 行业: 科技互联网 / 企业内部
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/pD--uvNXcZLu · 详情: https://space.24haowan.com/examples/sample-job-post

## 这是什么

招聘海报 · 公司秋招、社招、内推，发到朋友圈和群里

## 什么时候用

公司 HR 或团队负责人要发一张招聘页到朋友圈、群里让人转发：几个岗位、薪资、地点、面试流程，读者能直接投递或内推朋友，选它。只招一个岗位、要正式的长篇职位说明，用 sample-handbook 改；招的是课程学员、要收学费，选 service-landing；办一场线下宣讲会收报名，选 sample-event-signup。

## 用户对助手说的原话

帮我做一张招聘页，发到朋友圈和群里让大家转发、投递或内推：我们是一家 40 人的软件公司，这次秋招 6 个岗位。手机上首屏是一张海报——公司名和一句介绍、大标题「我们在招人」、一行「6 个岗位 · 远程友好」，中间一幅会动的矢量插画（几个抽象的小人站成一排，一根藤蔓描出来把他们连在一起），底部两个按钮「看岗位」「投递 / 内推」和截止日期；接着是岗位卡片，手机上左右滑，每张写岗位、所在组、月薪范围、地点和能不能远程、三条要求，点开从底部拉出抽屉看完整 JD（做什么、希望你、加分项、面试官是谁），抽屉里有「投这个岗位」按钮；然后「在这里工作是什么样」：一条按真实时间比例画的一天时间条加时间线，和 4 个会动一下的福利图标（远程、14 薪、学习基金、年假）；再是 4 步面试流程，每步写第几天；最后是一张投递表单（自己投 / 内推朋友切换，填名字、岗位、联系方式、简历链接），存进一张数据表，提交后出一张「我投了这家公司」的卡片（第几位投递、岗位、日期、一句邀请朋友的话）方便截图转发，页面读回只显示总人数。电脑上左边海报固定、右边岗位列表和其余内容；插画图标都用内联矢量现画，岗位有变化就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 我们在招人
- 6 个岗位
- 在这里工作是什么样
- 面试流程
- 投递 / 内推

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

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

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

- 投递 / 内推写回数据表 applications（原生表单 POST ./_data/applications 打底，脚本在时页内提交），页面读回只数人数、认出自己投过的那一行
- 提交后就地出一张「我投了青萝」的结果卡（第几位投递、岗位、日期），方便截图转发拉人；复制邀请语一键带上链接
- 首屏是一张海报：大标题 + 动态 SVG 团队插画；岗位卡片横滑（scroll-snap），点开底部抽屉看完整 JD、下拉可关；电脑上左海报固定、右边岗位列表
- 同一个链接一直开着：岗位招满、薪资调整、截止延后都更新这一页，转出去的链接不用换；阅读回执看大家停在哪个岗位

## 发之前要备好

- 数据表 applications（列 name / role / contact / link，append_open=true）：投递和内推都写进这里，发布前先用 set_data 建好，用 list_data_rows 读回；截止后把 append_open 关掉。注意：能打开这一页的人技术上读得到已过审的行（页面本身只显示人数），介意联系方式外露就把页面设成口令可看，或改用平台表单块（set_form）
- 联系方式类数据表建议设 members_only=true 或口令可看：页面读回会把已过审的行返回给每位读者（官方示例成品就是 members_only，访客的提交不会入表）

## 模板说明（README）

模板市场「招生 · 招聘 · 落地页」那一组的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
虚构公司「青萝科技」（40 人，杭州，做连锁门店的排班与进货软件）的 HR 林溪发到朋友圈和群里的 2026 秋招页。示例内容均为虚构。

## 演示哪个特色

**读者在页面里直接投递或内推，写回同一张数据表；提交后就地出一张能截图转发的「我投了青萝」卡片 —— 招聘页本来就是靠转发传开的。**

- **记忆点**是首屏海报里那排「团队」：6 个抽象小人（对应 6 个岗位：抱笔记本的前端、戴耳机的远程后端、打招呼的设计……）依次站上来，一根青萝藤从左到右描出来把他们连在一起，人头轻轻起伏（全页唯一的循环动画，`prefers-reduced-motion` 时停在终态）。
- 岗位：手机上卡片横滑（`scroll-snap`，下面有页码圆点），点开从底部拉出抽屉看完整 JD，下拉 90px 或点遮罩 / Esc 关；抽屉里「投这个岗位」会把岗位填进表单。电脑上左海报 `position:sticky` 固定，右边岗位排成两列，抽屉改从右侧滑出。
- 「在这里工作是什么样」：一条按真实时间比例画的一天（9:30–18:30，每段宽度 = 时长 / 9 小时），进入视野时一段接一段长出来；下面是时间线和 4 个福利图标，各动一次（信号弧、硬币落下、书翻开、太阳升起）。
- 面试流程 4 步写清第几天；电脑上上方多一条按天数比例分段的进度尺。
- 发出去之后：投递 / 内推 POST 到数据表 `applications`；页面读 `./_data/applications.json` **只用来数人数**（起始数 + 行数）和认出 `_mine` 那一行（回访时直接显示自己的卡），别人的名字和联系方式页面上一个字都不显示。音效只在点按后发声，海报右上角可静音。
- 脚本不跑时：每张岗位卡下面的「完整 JD」可以直接展开，表单是原生 `<form method="post" action="./_data/applications">`，照常提交。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 海报 `#poster` | `.brand .co` 公司名和一句介绍、`.season` 招聘季、`h1`（`<em>` 那两个字是黄色）、`.tag`「几个岗位 · 远程友好」、`.facts` 负责人与截止日 |
| 海报插画 `.team svg` | 6 个 `g.mate`（身体、头、手里的东西）和 `.vine` 藤的路径；岗位数不同就增删 `g.mate`，`.m1`–`.m6` 是入场先后 |
| 岗位 `#rail .job` | 一个岗位一张 `<article>`：`--c` 小标颜色、`.team-tag` 所在组、`h3` 岗位名、`.pay` 薪资、`.where` 地点与远程、`ul.req` 三条要求；完整 JD 写在同一张卡的 `<details><div class="jd">` 里（抽屉直接读它，只写一份）。增删岗位时 `.dots` 的圆点数跟着改 |
| 一天 `#day` 与 `ol.tl` | 时间条每段的 `width` = 时长 / 全天时长；`.ticks` 的刻度位置同理；时间线逐条改 |
| 福利 `.perks` | 4 个图标和文字 |
| 面试流程 `ol.steps` | 每步的 `--w` 与 `.ruler` 里的 `flex` 都写这一步占几天 |
| 表单 `form.ap` | `select[name=role]` 的选项必须和岗位名一致（抽屉的「投这个岗位」按名字选中） |
| 结果卡 `#card` | 公司名、`c-say` 那句邀请（脚本 `showCard` 里两种说法各一处） |
| 起始人数 | 脚本里的 `BASE` 和 `#cnt` 的数字一起改；新开一轮招聘写 0 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的招聘页时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

## 数据表

投递写进数据表 `applications`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "applications"  columns: ["name","role","contact","link"]  rows: []  append_open: true  revision: 0
```

内推时 `name` / `contact` 是朋友的，内推人写在 `link` 里（表单底下有提示）。用 `list_data_rows table=applications` 读回，截止后 `set_data ... append_open: false`。
⚠️ 能打开这一页的人技术上读得到已过审的行（页面只显示人数，但 `./_data/applications.json` 里有）—— 介意联系方式外露，就把页面设成口令可看，或改用平台表单块（`set_form`）。
本地 `space-cli serve` 会把提交写进包里的 `_data/applications.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
招聘页要转出去才有用：确认后用 `set_visibility` 设成 `public`。岗位招满、薪资调整就改这一页再推一版，链接不变。

## 素材

- 没有位图：团队插画、福利图标、公司标志都是内联 SVG 手画的；公司、人名、岗位与薪资均为虚构。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机大图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。