# 潮汐数据组 · Q4 OKR 进度同步

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

## 这是什么

团队 OKR 同步 · 季度目标与每人进度，成员页内更新

## 什么时候用

一个小团队（5–10 人）整季度用同一个链接对齐 OKR：组长发进群，每人手机上点开看团队进度、自己名下的 KR，并在页内更新进度与信心。要给管理层发一周一份的项目周报选 sample-weekly-report；只是个人备考或打卡计划选 sample-study-plan。

## 用户对助手说的原话

帮我把我们组这个季度的 OKR 做成一个手机上好看的进度同步网页，发在团队群里，大家每周在页面里更新自己的进度。页头是团队名、部门、第几周同步、本季起止日期、组长和人数；首屏最大的是一个团队进度圆环：外环是按 KR 进度加权汇总的团队进度（每个 O 取名下 KR 的平均，再按 O 的权重相加），内环是本季时间已过去多少，旁边写时间进度和剩余天数，进度落后于时间就用一行提示色写「比时间慢 N 个点」并点名红灯的 KR，下面两条 O 的进度条。接着「目标与关键结果」：每个 O 下列 KR，每条带负责人（首字色块头像）、当前值 / 目标值、进度条（条上一根虚线标时间进度）和信心三档（有信心 / 有风险 / 要帮忙，绿黄红）。然后「成员」：一排头像可点，点谁就只看谁的卡片，卡片里是他的个人进度小环和名下的 O / KR。再是「更新我的进度」表单（我是谁、更新哪条 KR、进度滑杆、信心三选一、一句话说明），提交存进一张数据表，页面就地更新那条 KR 和圆环；页面打开时读这张表，每条 KR 取最新一条覆盖，并在「最近更新」里按时间列出来。最后写下次对齐会的时间地点。少用底色块，用细线分隔；电脑上排成看板：圆环和 O 横排在上，下面左边 KR、右边成员。每周更新到同一个链接。

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

## 照着做一份

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

## 页面结构

- 团队进度
- 目标与关键结果
- 成员
- 更新我的进度
- 最近更新
- 下次对齐

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

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

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

- 同一链接用一整个季度（改 O / KR 就往同一页发新版本）
- 成员在页内更新进度（原生表单 POST ./_data/okr_updates，页面读回覆盖每条 KR 并列进最近更新）
- 阅读回执（谁这周还没点开）

## 发之前要备好

- 数据表 okr_updates（列 member / kr / progress / confidence / note，append_open=true）：文末「更新我的进度」写进这里，页面读回覆盖每条 KR 的进度并列出最近更新；发布前用 set_data 建好

## 模板说明（README）

团队「潮汐数据组」（远帆科技 · 数据平台部，均为虚构）的 Q4 OKR 同步页：首屏一个团队进度大圆环，下面是目标与关键结果、成员卡、
页内「更新我的进度」与最近更新。示例数据均为虚构。

## 演示哪个特色

**一个链接用一整个季度 + 成员在页内更新进度（写回数据表，页面读回）。**

- **记忆点**是首屏的大圆环：外环 = 按 KR 进度加权汇总的团队进度（每个 O 取名下 KR 的平均，再按 O 的权重相加），内环 = 本季时间已过去多少；
  旁边写剩余天数，进度落后于时间就出一行琥珀色提示（「比时间慢 3 个点」+ 红灯 KR），快于时间变绿色。圆环第一次打开时从 0 长到当前值，
  `prefers-reduced-motion` 时直接终态。每条进度条上的虚线竖线也是时间进度。
- 每条 KR：负责人（首字色块头像）、当前值 / 目标值、进度条、信心三档（有信心 / 有风险 / 要帮忙 = 绿 / 黄 / 红）。
- 成员：点头像筛选，只看这个人的卡片（个人小环 + 他名下的 O / KR），同时在上面把他的 KR 高亮、把表单的「我是」和「更新哪条」预先选好。
- **发出去之后**：文末「更新我的进度」是一张原生表单 `<form method="post" action="./_data/okr_updates">`，不跑脚本也能提交；
  脚本在时页内提交，就地更新那条 KR、两个 O、圆环和成员小环，并把这条插进「最近更新」。页面加载时读 `./_data/okr_updates.json`，
  每条 KR 取最新一条（按 `_at`）覆盖页里写的数值，最近 8 条进动态流。组长用阅读回执看谁这周还没点开。
- 没有外链；不跑脚本时页面里写的数字、圆环（`stroke-dashoffset` 已按 32% / 35% 写好）本身就是完整、自洽的一版。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| `.wrap` 的 `data-start` / `data-end` / `data-today` | 本季起止日期；`data-today` 写成 `auto` 就按读者打开当天算时间进度与剩余天数（样例固定在 2026-11-02，才和页里写的 35% / 60 天对得上） |
| 页头 `.org` / `h1` / `.facts` | 团队名、公司部门、第几周同步、更新日期、周期、组长、人数 |
| 目标与关键结果 `.obj` | 每个 O 一个 `.obj`，`data-o` 是编号、`data-w` 是权重（相加 = 1）；每条 KR 一个 `li.kr`：`data-kr` 编号、`data-p` 进度 %、`data-conf`（`g` / `y` / `r`）、`data-owner` 负责人，页面里的文字、`.bar` 的 `--p` 和 `[data-kp]` 跟着改 |
| 首屏 `.dial` 与 `.objs` | 脚本会重算；不跑脚本时显示写死的值：`[data-v]` 数字、两个圆的 `stroke-dashoffset`（= 周长 × (1 − 进度)，外环周长 552.92、内环 414.69）、`.gap` 那句提示 |
| 成员 `.faces` / `.cards` | 每人一个头像按钮（`data-who`）和一张 `article.card`（`data-krs` 写他名下的 KR，组长写 `O1 O2`）；头像颜色用 `--a1`…`--a7` |
| 表单 `form.upd` | 「我是」的成员名、「更新哪条」的 KR 选项（`value` 必须等于 `data-kr`）；字段名就是表的列名 |
| 最近更新 `.feed` | 页里写的几条是示例，发自己的版本时可以清空，表里的更新会自动列进来 |
| 下次对齐 `#next` | 日期、时间、地点、开会顺序 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致）+ 一句适用场景；发自己的页面时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 数据表

「更新我的进度」写进数据表 `okr_updates`（列 `member` / `kr` / `progress` / `confidence` / `note`，一次提交一行，`append_open=true`）。
`confidence` 存「绿 / 黄 / 红」，`progress` 是 0–100 的整数。发布前先建表：

```
set_data  proposal_id: <id>  table: "okr_updates"  columns: ["member","kr","progress","confidence","note"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=okr_updates` 读回。本地 `space-cli serve` 会把提交写进包里的 `_data/okr_updates.json`，试完改回 `[]`。
季度结束想清零：新开一页（或用 `set_data` 换一张新表名并同步改表单的 `action`）。

## 怎么发出去

单文件 + 一张表，最省事的是 MCP `publish_file`（不需要终端）：

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "我们组 Q1 OKR 进度同步"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
```

然后按上面建表。有终端时也可以整目录推：

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

给谁看：默认仅自己可见；发进团队群用 `set_visibility`（`passcode` 口令可看）。每周改完 O / KR 的写法就往同一个 `proposal_id` 发新版本，链接不变。

## 素材

- 无位图：标志、头像（首字色块）、圆环、进度条全是内联 SVG / CSS。团队「潮汐数据组」、公司「远帆科技」、人名均为虚构。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。