# 我们的 2026 · 团队年度回顾

> 活页公开模板 `sample-year-story` · 场景: 工作汇报 · 行业: 企业内部 / 科技互联网
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/eNmUZIFoQS2L · 详情: https://space.24haowan.com/examples/sample-year-story

## 这是什么

团队年度回顾 · 年会前发到团队群的滚动长卷

## 什么时候用

年终、周年、项目收官，想让团队往下滑着把这一年「看一遍」而不是读一篇总结时选它：画面钉住、随滚动变化，结尾大家各留一句话。要逐条汇报进度给上级选 sample-weekly-report；要讲给客户听、手机翻页的选 sample-pitch-deck；只是收报名或投票选 sample-event-signup。

## 用户对助手说的原话

帮我把我们团队这一年做成一个往下滑着看的年度回顾网页，年会前发到团队群里：每一章画面钉在屏幕上、随滚动变化，文字在下方一句句换。第一章一个从 0 跳到 365 的大数字，下面是一年 12 行的日历格子，滑动时先标出开门的日子、再点亮周末加班的那几天；第二章一条按月份画的项目数曲线，随滚动一点点描出来，在几个关键月份停一下弹出注释（那个月发生了什么），标题跟着显示累计数；第三章 30 个小圆点人像先散开、再聚成「2026」字样、最后按岗位排成一张合影，今年新来的带一圈；第四章「年度之最」几张趣味数据卡片从下方一张张叠上来；第五章以公司所在城市为中心，客户城市按真实方向一座座亮起，标题数城市和客户数；最后一节「给明年的一句话」，大家填名字和一句话，存进一张数据表，读回来显示成飘动的词云，提交后给一张能截图的结果卡。所有数字前后要对得上。电脑上左边文字、右边画面；系统设了减少动态效果时变成一段段静态长图。

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

## 照着做一份

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

## 页面结构

- 365 天
- 128 个项目
- 30 个人
- 年度之最
- 12 座城市
- 给明年的一句话

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

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

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

- 滚动叙事：每章画面 position:sticky 钉住，随滚动描曲线、聚散粒子、叠卡片、点亮城市
- 页内回写数据表（原生表单 POST ./_data/wishes），读回成飘动的词云
- 系统设了减少动态效果或脚本不跑时，自动变成一段段静态长图，表单照样能交
- 阅读回执（谁滑到了哪一章）

## 发之前要备好

- 数据表 wishes（列 name / text，append_open=true）：文末「给明年的一句话」表单写进这里，页面读回成词云；发布前先用 set_data 建好

## 模板说明（README）

模板市场「工作汇报」场景的一份富媒体 H5（品质标准见 `core/space/examples/QUALITY.md`）。虚构的 30 人设计工作室「方糖设计」，年会前把这一年发到团队群。示例数据均为虚构。

## 演示哪个特色

**滚动叙事（scrollytelling）+ 页内留言写回数据表、读回成词云。**

- 每一章是一个 `.ch`：一块 `.stage` 用 `position: sticky` 钉在屏幕上，后面一列 `.step` 只负责撑出滚动距离和每一步的文字。脚本算出这一章滚过的比例 `p`（0–1）去改画面：
  ① 大数字从 0 跳到 365，下面 12 行日历格子先标出开门的 257 天、再点亮 9 天周末加班；
  ② 按月项目数曲线随滚动描出来，在 2 / 6 / 9 / 11 月停一下弹出注释，标题跟着显示累计数；
  ③ 30 个小圆点人像（`<canvas>`）散开 → 聚成「2026」→ 按岗位排成一张合影，今年新来的 7 位带一圈；
  ④ 「年度之最」五张卡片从下方一张张叠上来；
  ⑤ 以杭州工作室为中心，客户城市按真实方位、压缩后的距离一座座亮起。
- 手机上文字固定在画面下方一句句换（`.cap`）；电脑上左边文字跟着滚、右边画面钉住、坐标是另一套更宽的。
- 发出去之后：文末「给明年的一句话」是原生表单 `POST ./_data/wishes`，脚本在时页内提交、把这句加进词云、给一张能截图的结果卡；页面读 `./_data/wishes.json` 把大家写的都显示成飘动的词云。阅读回执能看到谁滑到了哪一章（`data-track-section`）。
- 降级：`<head>` 里一行脚本在**没设**「减少动态效果」时才给 `<html>` 加 `scrolly` 类；没有这个类（脚本不跑 / 设了减少动效）时，每章就是一段静态长图（终态）+ 下面的文字，人像换成内联 SVG 画好的「2026」，表单照样能提交。
- 没有外链、没有位图；manifest 不写 `render`。

## 改哪里变成我的

页面里的坐标是用一段生成脚本算好写死的（不跑脚本也完整），手改时注意两套坐标（`.narrow` 手机 / `.wide` 电脑）都要改：

| 位置 | 改什么 |
|---|---|
| `#days` | 公司名、发给谁、年会日期；日历每格一个 `<rect class="open/off/ot">`（开门 / 休息 / 周末加班），三步的大数字在 `.card` 的 `data-n` / `data-u` |
| `#projects` | 两段曲线 SVG（`.curve.narrow` / `.curve.wide`）；脚本里的 `MONTHS`（每月数）、`KF`（滚到哪停在哪个月）；注释框是 `g.callout[data-m]`；`aria-label` 同步 |
| `#people` | 脚本里的 `P.people`（每人的岗位 `r`、新同事 `nw`）和 `P.word`（聚成的字的点位）；图例 `.legend`；静态版是 `svg.word` |
| `#bests` | 五张 `li.bc`：标签、数字、单位、一句话；`--c` 是颜色 |
| `#cities` | 每座城市一个 `g.city`（`data-step` = 第几步亮）+ 一条 `path.arc`；脚本里的 `CC`（步数、客户数）；标题数字由脚本现算 |
| `#wish` | 种子词云 `ul.cloud` 里同事们先写的几句；表单两个字段 `name` / `text` 就是表里的列名 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的回顾时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`；章节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

所有数字前后要对得上：12 个月加起来 128、城市客户数加起来 41、岗位加起来 30、日历里 `ot` 正好 9 格。

## 数据表

文末表单写进数据表 `wishes`（列 `name` / `text`，一次一行，`append_open=true`）。发之前先建表：

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

年会前用 `list_data_rows table=wishes` 读回，投到大屏上。本地 `space-cli serve` 会把提交写进包里的 `_data/wishes.json`，试完记得改回 `[]`。

## 怎么发出去

单文件，最省事的是 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。有终端时：

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

给谁看：默认仅自己可见；发到团队群用 `set_visibility`（`passcode` 口令可看）。

## 素材

- 没有位图：标志、人像、曲线、城市图都是内联 SVG / canvas 现画；公司、客户、人名与数字均为虚构。城市图不画边界，只按真实方位摆点。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。