# 今日汇率 · 外贸人早盘

> 活页公开模板 `sample-fx-daily` · 场景: 行情复盘 · 行业: 电商外贸 / 金融投资
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/MO3uZXBjDB8n · 详情: https://space.24haowan.com/examples/sample-fx-daily

## 这是什么

汇率早盘 · 每天早上发到业务群

## 什么时候用

要每天给团队一份「今天的汇率怎么用」：外贸业务报价、跨境电商定价、留学缴费换汇提醒。重点是一个真实的汇率大读数、近 30 天走势，加上按自己公司口径算好的换算器和报价表。写股票指数、板块涨跌的收盘复盘选 sample-market-recap；盘前一分钟动画播报选 sample-premarket-60s；跟踪自己组合净值选 sample-portfolio-tracker；行业新闻早报选 sample-daily-brief。

## 用户对助手说的原话

帮我做一份每天早上发到业务群的汇率早盘，发成一个网页链接：页头是公司和部门、日期、发布人、发给谁；最显眼的是一块深色牌价板，像银行牌价那样一格一格显示「1 美元 = x.xxxx 人民币」和较前一日的涨跌，下面一句「1 万美元比昨天多换 / 少换多少」、数据来源与更新时间，再列欧元、日元、英镑、港币兑人民币；接着一张近 30 天走势图，点某一天看当天的价；然后一个报价换算器（输入报价、选币种，换成人民币，并按我们 2% 的报价安全边际给出建议报价）、一张常用品类 FOB 报价对照表（按到港成本、毛利和今天汇率算，带较上周变化），最后三条「今天怎么报价」，都用「如果……」开头，别写成投资建议。汇率用欧洲央行参考汇率（Frankfurter 免费接口）的真实数据：页里先放一份今天抓的快照，打开时再拉实时的，拉不到就显示快照时间。电脑上排两栏，手机上一栏，图在两端各画一套。以后每个工作日更新到同一个链接。

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

## 照着做一份

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

## 页面结构

- 今日汇率
- 近 30 天走势
- 报价换算器
- FOB 报价对照
- 今天怎么报价

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

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

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

- 同一链接每天更新不变
- 真实外部数据两层加载（页内快照先画，脚本在时拉欧洲央行参考汇率实时替换，标明来源与更新时间）
- 页内互动计算（报价换算器、点走势图看某一天）
- 阅读回执（谁看了 / 看到哪一节）

## 发之前要备好

- 可选：每个工作日早上的定时任务，抓一次 Frankfurter 汇率刷新页里的快照（fx-snapshot）后发到同一个页面；不刷新时页面打开也会自己拉实时数据

## 模板说明（README）

按 `core/space/examples/QUALITY.md` 做。公司「甬舟家居进出口」、财务沈蔓、品类、到港成本、毛利与安全边际都是虚构的；**汇率是真的**：欧洲央行参考汇率，经 Frankfurter（`api.frankfurter.dev`，免费、无需 key、允许跨域）。

## 演示哪个特色

**同一条链接每天更新 + 真实外部数据两层加载。**

- 财务每个工作日早上往**同一个页面**发一个新版本（`proposal_id` 不变 ⇒ 链接不变），业务群里置顶一次就够；阅读回执照常（锚点是每个 `<section>` 的 `data-track-section`）。
- 两层加载，缺一不可：
  1. 页里内联一份**快照** `<script type="application/json" id="fx-snapshot">`（做页时抓的真实数据 + 抓取时间），首屏先按它画 —— 微信里、断网、海外接口慢都能立刻看到；正文里的静态数字也是按它预先排好的，脚本不跑页面也完整。
  2. 脚本在时 `fetch` 近 30 天的实时数据（`AbortSignal.timeout(3000)`），成功就整页重画（大读数、走势、换算器、FOB 表、建议里的数字），状态改成「实时 · 更新于 HH:MM」；失败就留着快照，显示「数据更新于 <快照时间>（页面快照）」。来源一行始终在。
- 页面会连的站外域名只有 `api.frankfurter.dev`（发布回执里是一条 `external_origins` 事实说明，不是提醒）。
- 设计方向（QUALITY §1.1）：风格「数据看板」。冷灰纸底 `#F4F5F7`、墨色字 `#151A21`，走势线用铜橙 `#B4690E`，涨红 `#C2352B` 跌绿 `#137A50`，建议报价用黄铜细条。
  最大声的只有一个：深色**牌价板**，像银行外汇牌价那样一格一格的数字（首次打开数字滚一下落定，`prefers-reduced-motion` 时直接终态）；其余都是细线分隔。电脑上两栏（左读数 + 走势，右换算器常驻），手机一栏。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `.facts` | 公司与部门（内联 SVG 标志）、发布人、发给谁、更新时间 |
| `<script id="fx-config">` | 公司的报价口径：`safety`（安全边际，0.02 = 2%）、`gross`（毛利率）、`items`（品类名、起订量、到港成本人民币）。换算器、FOB 表、建议里的数字都从这里算 |
| `<script id="fx-snapshot">` | 汇率快照，格式见下 |
| 「今天怎么报价」`.tips` | 三条「如果……」建议，写成你们部门的口径；第二条里的 `#move30` / `#eat` 由脚本按近 30 天涨跌填 |
| 「报价换算器」 | 默认样单金额在 `#amt` 的 `value`；可选币种在 `#cur`（要加币种，同时改 `FX.CUR` 和请求里的 `symbols`） |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的页时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

图：走势是两段内联 SVG（`#cw` 电脑 720×300、`#cn` 手机 343×240，各一套坐标、字号 1:1），横轴按真实日期比例（周末与欧洲假日没有参考价，留出空档），纵轴刻度按区间自动取。两段都由脚本里的 `FX.chart()` 生成，页里预排的那份也是同一个函数画的。

### 快照格式（每日刷新只换这一块）

```json
{ "source": "Frankfurter (api.frankfurter.dev) · 欧洲央行参考汇率",
  "fetched_at": "2026-10-29T06:24:00+08:00",
  "rates": { "2026-09-28": { "CNY": 6.7105, "EUR": 0.87889, "GBP": 0.75396, "HKD": 7.8448, "JPY": 156.88 }, "…": {} } }
```

`rates` 就是 `https://api.frankfurter.dev/v1/<30 天前>..?base=USD&symbols=CNY,EUR,JPY,GBP,HKD` 返回里的 `rates` 原样（基准美元，其他币种兑人民币由页面交叉折算，日元按 100）。
`fetched_at` 写抓取时刻（带时区）。脚本按快照重画所有数字；正文里预排的静态数字只在不跑脚本时露出，定时任务有余力就一并换掉（页头 `#today`、`#big`、`#chg`、`#impact`、`#strip`、两段图、`#fobRows`），没余力也不影响微信里的读者。
这份快照写在页里，没有放 `_data/` 数据表。

## 怎么发出去（每个工作日更新，链接不变）

单文件，用 MCP `publish_file`（`filename: "index.html"`、`title`、`manifest` 去掉 `entry`、`hold: true` 先看预览，再 `publish_version`），回执里有 `proposal_id`。
**之后每天**：抓一次汇率、换掉快照（和当天想改的建议），再调一次 `publish_file`，这次传 `proposal_id` 而不是 `title`。

想让助手每天自己做：设一个每个工作日 8:00 的定时任务，写清「抓 Frankfurter 近 30 天美元基准汇率、替换 fx-snapshot、发到这个 proposal_id」。不刷新也能用：页面每次打开都会自己拉实时数据，只是拉不到时显示的是上次快照。

给谁看：默认仅自己可见；发到业务群用 `set_visibility`（`passcode` 口令可看，或 `public`）。

## 纪律

- 汇率是参考价，不是银行结汇价；页面上那句别删。建议写成部门报价口径的条件句，不写涨跌预测、不写「建议结汇 / 买入」。
- 外部数据只用真的；拿不到就显示快照时间，别把旧数字当今天的。
- 示例里的成本、毛利是编的，发之前换成你们自己的；页脚那句「示例内容，均为虚构」删掉。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs` 从成品截出，不进发布包。