# 方寸科技 2026 年会 · 现场抽奖

> 活页公开模板 `sample-annual-draw` · 场景: 互动玩法 · 行业: 企业内部
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/9_K1rDQA2a4w · 详情: https://space.24haowan.com/examples/sample-annual-draw

## 这是什么

年会抽奖 · 大屏投屏抽奖，手机扫码签到

## 什么时候用

公司年会、团建晚宴、开工大会要现场抽奖：会场电脑投到大屏上转名字球、主持人按空格停，大家用手机扫码签到、看中奖名单，选它。门店或活动给顾客每人转一次、奖品限量要显示剩余，选 sample-lucky-wheel；只收报名、按场次限名额选 sample-event-signup；让大家留言祝福、当天投到电视上飘，选 sample-wish-wall；只是投票选节目，选 sample-vote-rank。

## 用户对助手说的原话

帮我给公司年会做一个现场抽奖网页，同一个链接电脑投屏抽奖、手机扫码签到：在电脑宽屏上（或网址带 ?screen=1）进入全屏抽奖舞台，深蓝夜色背景带一团红金色光晕，中间是用 canvas 画的 3D 旋转名字球，参与者的名字按前后远近变大小和深浅，外面绕几条轨道环；下面是当前奖项、一个大的「开始」按钮和快捷键提示，按空格或点按钮开始，球加速转、名字随机闪金色、嗒嗒作响，再按一次停下，中奖名字从球上飞出放大成卡片（名字、部门、抽奖号），撒彩带、响一段合成的音效（点了才响，有静音键）；右侧栏是四个奖项（三等奖 10 名分两轮、二等奖 3 名、一等奖 1 名、特等奖 1 名）的剩余，左右键切换，下面是实时中奖名单，已中奖的人不再进球，每轮结果存进一张数据表（name / prize）。手机上是签到页：顶上是同一只小号名字球和年会时间地点，下面填名字、选部门，存进另一张数据表（name / dept），签到成功出一张「你的抽奖号 #031」的票根卡片；再往下是和大屏同步的中奖名单（每个奖项有待抽空位）和奖项、当晚流程。名字球里放 30 个示例同事加签到名单。系统要求减少动效时球不转、直接出结果；不跑脚本时签到表单照样能交。

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

## 照着做一份

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

## 页面结构

- 抽奖名字球
- 签到
- 中奖名单
- 奖项

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

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

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

- 一页两种模式：电脑 / 投屏宽屏自动进入全屏抽奖舞台（canvas 3D 名字球、空格开始 / 停、中奖名字飞出放大、彩带与 Web Audio 合成音），手机上是签到页
- 手机签到写回数据表（原生表单 POST ./_data/entrants），出「你的抽奖号」卡片；大屏读回签到名单，新签到的人实时长进名字球
- 大屏每抽一轮写进数据表 winners，手机页读回中奖名单并提醒本人；已中奖的人不再进球
- 微信卡片（share.title / share.desc），发到公司群或印成桌卡二维码

## 发之前要备好

- 数据表 entrants（列 name / dept，append_open=true）：手机签到写进这里，名字球和抽奖号从这里读回；发布前先用 set_data 建好
- 数据表 winners（列 name / prize，append_open=true）：大屏每抽一轮写进这里，手机页读回中奖名单；只在年会当晚开，散场后关掉，重抽前用 set_data 清空
- 会场一台接大屏的电脑（横屏、浏览器打开同一链接即自动进抽奖模式），签到二维码印在桌卡或发到群里

## 模板说明（README）

模板市场第三轮补齐的画廊样例（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
故事：虚构公司「方寸科技」2026 年会，1 月 15 日（周五）晚在澜岸酒店三楼宴会厅，人力行政部苏晴主持抽奖。人名、公司、酒店均为虚构。

## 演示哪个特色

**同一个链接：电脑 / 投屏上是全屏抽奖舞台，手机上是签到页；签到名单和中奖结果都在数据表里，两端互相读回。**

- **大屏模式**（`?screen=1`，或宽屏横放 —— 宽 ≥ 900 且宽 > 高 —— 自动进入）：记忆点是那只 `<canvas>` 画的 **3D 旋转名字球**（斐波那契球面布点，绕 Y 轴转、X 轴微倾，按深度定字号与透明度，外面三条轨道环）。
  按空格或点「开始」，球加速旋转、随机名字金色闪烁并配合成「嗒嗒」声；再按一次「停」，中奖名字从球上**当时的位置**飞出、放大成卡片（Web Animations），
  同时彩带粒子 + 低音「咚」和一段上行和弦（Web Audio 合成，**只在点按 / 按键后**发声，右上角静音键，`M` 也行）。再按空格「继续」。
- **奖项**：三等奖 ×10（两轮，每轮 5 人）/ 二等奖 ×3（每轮 1 人）/ 一等奖 ×1 / 特等奖 ×1，从三等奖抽起，抽完自动换下一个；`←` `→` 或点侧栏换奖项。**已中奖的人从球里拿掉**，每人最多中一次。侧栏是奖项剩余和实时中奖名单。`F` 全屏。
- **手机模式（签到页）**：首屏同一只名字球（小号），下面是签到表单 —— 原生表单 `<form method="post" action="./_data/entrants">`（列 `name / dept`），不跑脚本也能提交；脚本在时页内提交，出一张「你的抽奖号 #031」卡片（值得截图）。抽奖号 = 页面里 30 位示例同事占 #001–#030，签到名单按提交时间从 #031 往后排。
- **读回**：名字球 = 30 位示例同事 + 读 `./_data/entrants.json` 的签到名单（大屏每 10 秒拉一次，新签到的人「长」进球里）；大屏每抽一轮就把结果 `POST ./_data/winners`（列 `name / prize`），
  手机页读 `./_data/winners.json`（每 20 秒刷新）显示中奖名单，自己中了会在抽奖号卡片上高亮「恭喜，你抽中了三等奖」。大屏重开页面时也读 winners，已中奖的人不会再进球。
- 降级：`prefers-reduced-motion` 时球不自转、停下直接出卡片、不放彩带；不跑脚本时显示签到表单、静态名单、中奖名单空位和奖项。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.brand` | 公司名、年会名、日期、地点（标志是一段内联 SVG，换成自己的几何标志） |
| 手机首屏 `.hero` | 标题、入场 / 开奖时间、特等奖一句话 |
| 脚本 `SAMPLE` | 示例同事（`名字 部门`，用 `|` 分隔）。正式用时可以删到只剩几个、或整段清空，全靠签到；抽奖号起点跟着变 |
| 脚本 `PRIZES` | 奖项：`lv` 名称（写进 winners 的 `prize`）、`item` 奖品、`total` 名额、`round` 每停一次抽几人；奖项列表 `.prizes li` 和中奖名单的静态空位（不跑脚本时显示）一起改 |
| 签到表单 `#f-dept` | 部门选项 |
| 抽奖号卡片 `.tk-body` | 开奖地点、座位、领奖找谁 |
| `.flow` | 当晚流程与主持人 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的年会时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（群里卡片上的字） |

中奖按名字去重：两位同事同名时，签到让他们在名字后面加部门或工号（如「李想（研发）」）。

## 数据表

发之前建两张表，都开 `append_open`：

```
set_data  proposal_id: <id>  table: "entrants"  columns: ["name","dept"]   rows: []  append_open: true  revision: 0
set_data  proposal_id: <id>  table: "winners"   columns: ["name","prize"]  rows: []  append_open: true  revision: 0
```

`list_data_rows table=entrants` 看谁签了到，`table=winners` 是领奖登记的依据。散场后两张表都把 `append_open` 关掉；要重抽一遍就用 `set_data` 把 winners 清空（`rows: []`）。
winners 开着写回意味着拿到链接的人理论上也能往里写 —— 只在年会当晚开，或用 `set_data … members_only: true` 只收工作区成员（大屏那台电脑登录发布者账号）。
本地 `space-cli serve` 会把提交写进包里的 `_data/*.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
给谁看：默认仅自己可见；发到公司群前用 `set_visibility` 改成 `passcode`（口令写在桌卡上）或 `public`。

**怎么投屏**：
1. 会场电脑（接投影 / LED 屏，横屏）用浏览器打开同一个链接 —— 宽屏横放会自动进入抽奖大屏；没进的话点手机页最下面「这台是投屏电脑？进入抽奖大屏」（直开入口文件时也可以加 `?screen=1`）。
2. 先点一下页面（浏览器要求点按后才能出声），按 `F` 或右上角按钮全屏（不行就用浏览器自己的全屏：Windows `F11`、Mac `⌃⌘F`）。
3. 手机签到：把同一个链接生成二维码印在桌卡 / 易拉宝上，或直接发到年会群；签到期间大屏上的名字球会自己长出新名字。
4. 主持人一句「开始」—— 按空格；「停」—— 再按空格；揭晓完再按空格接着抽。用翻页笔的话，大多数翻页笔的「下一页」键就是 `→` 或空格。

## 素材

- 没有位图：标志、名字球、彩带全部是内联 SVG 或 canvas 现画；音效是 Web Audio 现场合成。公司、人名、酒店、奖品均为虚构。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。