# Kestrel Bay Outdoor Living

> 活页公开模板 `sample-export-brand-site` · 场景: 产品图册 · 公司介绍 · 行业: 制造供应链 / 电商外贸
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/SN1V7X3eABNF · 详情: https://space.24haowan.com/examples/sample-export-brand-site

## 这是什么

外贸工厂英文品牌官网 · 对海外买家介绍工厂、收询盘

## 什么时候用

外贸工厂要一个对外的英文品牌官网、并在页上收海外买家询盘时选它：正文英文，首屏是品牌、一句定位、三个大数字和一张场景插画，下面讲产品线、工厂实力和产能、客户国家地图与案例、常见问题，页末用平台表单收询盘（姓名、公司、邮箱、国家、产品线、数量、贸易条款），旁边有一个按欧洲央行实时汇率换算的预算换算器。工厂、产品、案例变了就更新同一个链接，名片和邮件签名里的地址不用换。要发一份带 MOQ / FOB 价格网格、规格表的英文产品目录选 sample-export-catalog；给国内客户看的中文图册选 sample-product-catalog；给某一个客户的报价单选 sample-quote-sheet。

## 用户对助手说的原话

帮我给我们工厂做一个对海外买家的英文品牌官网，发成一个网页链接，正文全用英文：电脑上顶部一条导航（品牌名、产品 / 工厂 / 客户 / 常见问题几个锚点和一个「Request a quote」按钮），首屏两栏，左边是一句定位、一段介绍、三个大数字（出口国家数、年产能、成立年份）和询价按钮，右边是这份最显眼的一张大幅线稿场景插画（我们产品摆在实际使用场景里，线条在打开时一笔笔画出来），手机上插画放在标题上面；接着是产品线，四到六条，每条一张简洁的线稿、一句卖点和三行关键材质规格，不放价格；然后是工厂实力：四个数字（面积、产线、月产能、人数）、按先后排的质检流程、几枚文字认证徽章，和一张近 12 个月每月出货柜数的柱状图（带产能虚线和春节停工注记，手机另画一套）；再是客户国家：一张点阵世界地图，出过货的国家点亮，点一下旁边出那个国家的案例（客户类型、做了什么、交付量），地图下面一排国家按钮，再放三个案例；然后是常见问题，折叠的六到八条（起订量、打样、交期、OEM/ODM、付款方式、贸易条款、质保、验厂）；最后是询价：写清多久回复、我们会问什么、联系人和邮箱，询价用平台的表单（姓名、公司、邮箱、国家、产品线、数量、贸易条款、留言）；旁边放一个预算换算器，输入金额选币种，按欧洲央行实时汇率（Frankfurter 免费接口）换成美元、欧元、英镑、日元、澳元、加元、人民币，页里先放一份今天的汇率快照，拉不到实时就用快照并写明更新时间，注明报价以美元为准。版式像一本户外家具杂志：衬线大标题、细线分隔、少用底色块，暗色也要好看。以后产品和案例变了就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- Product lines
- Factory & capacity
- Clients & markets
- FAQ
- Request a quote

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

- https://space.24haowan.com/examples/sample-export-brand-site/source/index.html（入口）

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

- 平台表单块收询盘（set_form 照 form.json 原样传，表 rfq；可加 notify_emails，新询盘一到就发邮件）
- 页内预算换算器：按欧洲央行参考汇率（Frankfurter 实时拉取，拉不到用页内快照并写明时间）在 USD / EUR / GBP / JPY / AUD / CAD / CNY 之间换算
- 客户国家点位地图：点亮的国家点一下出那里的案例（客户类型、做了什么、交付量）
- 同一链接更新不变（产品线、产能、案例改完，名片上的链接照旧）
- 阅读回执（买家看了产品、工厂还是常见问题那几节）
- 微信 / WhatsApp 链接预览卡（share.title / share.desc）

## 发之前要备好

- 表单块：发布后用 set_form 挂一张数据表 rfq（table / title / fields 照同目录 form.json 原样传：name / company / email / country / product_line / quantity / incoterm / message，不写 amount）；读者写回默认打开（append_open=true），页面不用重发
- 询盘提醒（可选）：set_form 时加 notify_emails（最多 3 个邮箱），每来一条询盘就发一封邮件，附全部字段；新地址先收一封确认信，点确认后才开始发
- 读回询盘：list_data_rows table=rfq
- 页内内联一份汇率快照 <script id="fx-snapshot">（Frankfurter 美元基准 EUR / GBP / JPY / AUD / CAD / CNY + 抓取时间），由模板工厂每日刷新；不刷新也能用，页面打开时会自己拉实时汇率，拉不到才显示快照时间

## 模板说明（README）

活页模板市场的样例（每日模板工厂，K1DG），按 `core/space/examples/QUALITY.md` 从头做。正文是英文（`manifest.lang: "en"`），给外贸工厂当对外的品牌官网用。
示例内容均为虚构：工厂「Kestrel Bay Outdoor Living Co., Ltd.」（佛山顺德）、联系人 Mia Huang、WhatsApp 号码、邮箱（`.example` 保留域名）、地址、各国客户与案例、产能数字都是编的；
认证徽章只是文字，不是任何认证机构的标志。没有位图，插画、产品线稿、地图全是内联 SVG。

## 演示哪个特色

**平台表单块收询盘 + 页内实时汇率的预算换算 + 同一链接更新不变 + 阅读回执（买家看了哪几节）。**

- 记忆点：首屏右侧（手机上在标题上面）的**海边露台场景插画**（`svg.scene`）—— 悬臂伞、餐桌椅、躺椅、半落的太阳和海面；打开时线条一笔笔画出来、太阳升起一次（CSS，`prefers-reduced-motion` 时直接终态），海面波纹缓慢来回漂（全页唯一一处循环）。电脑上带两条材质注记。
- 电脑上是一份真正的宽屏官网：顶部吸顶导航（锚点 + 「Request a quote」按钮）、两栏首屏、产品线三列网格、工厂两栏（数字与质检流程 / 出货柱状图）、地图与案例面板两栏、FAQ 与询价各两栏。手机上全部改单栏，产品线改「线稿在左、文字在右、规格在下」。
- 产品线（`#products`）：六条线，每条一张内联 SVG 线稿 + 一句卖点 + 三行材质规格；不做价格网格（那是 `sample-export-catalog` 的事）。
- 工厂实力（`#factory`）：四个数字、五个有先后的质检点（才编号）、文字认证徽章；「近 12 个月每月出货柜数」柱状图电脑 / 手机各一套坐标（`svg.chart.wide` / `.narrow`），带产能虚线与春节停工注记，进视野时长出来一次。
- 客户国家（`#clients`）：点阵世界地图（内联 SVG，一条 path 画全部陆地点），出过货的 18 个国家点亮；点 / 悬停一个点，或点地图下面那排国家按钮，右侧面板换成那个国家的案例，并从佛山画一条航线虚线过去。下面三张案例。脚本不跑时面板停在第一个国家，按钮和点不动作，内容仍完整。
- FAQ（`#faq`）：`<details>` 折叠八条（起订量、打样、交期、OEM/ODM、付款、贸易条款、质保、验厂）。
- 询价（`#rfq`）：页面里只写说明（回复时效、我们会问什么、联系人），**表单不在包里**：发布后用 MCP `set_form` 挂上，读者从页面右下角的按钮打开平台渲染的「Request a quote」表单（手机上一张面板填完、带校验）。正文里没有放 `data-space="form"` 按钮 —— 发布那一刻表单还没挂，回执会多一条 `form_button_unconfigured` 提醒；想在正文里放按钮，挂好表单后再加一版。
- 预算换算（`#converter`，在询价旁）：输入金额、选币种（USD / EUR / GBP / JPY / AUD / CAD / CNY），实时换算成其它六种；下面始终写「ECB reference rates via Frankfurter · 更新时间」和「For reference only; quotes are issued in USD」。汇率是**真实数据**（工厂与案例是虚构的），两层加载：
  1. 页里内联一份**快照** `<script type="application/json" id="fx-snapshot">`（做页时 `curl` 抓的当天汇率 + 抓取时间），先按它算；
  2. 脚本再 `fetch` `https://api.frankfurter.dev/v1/latest?base=USD&symbols=EUR,GBP,JPY,CNY,AUD,CAD`（`AbortSignal.timeout(3000)`），成功就换成实时、标「live, updated HH:MM」，失败就留快照、标「updated <快照时间> (saved snapshot)」。
  不跑脚本时输入框隐藏，列表静态显示「USD 10,000 约等于」六种币种（快照算好写在 HTML 里）。页面会连的站外域名只有 `api.frankfurter.dev`（发布回执里是一条 `external_origins` 事实说明，不是提醒）。

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

```json
{ "source": "Frankfurter (api.frankfurter.dev) · ECB reference rates",
  "fetched_at": "2026-10-29T20:50:00+08:00",
  "base": "USD",
  "date": "2026-10-28",
  "rates": { "AUD": 1.4219, "CAD": 1.4047, "CNY": 6.6664, "EUR": 0.89823, "GBP": 0.75258, "JPY": 157.96 } }
```

`date` 是欧洲央行的参考日（接口返回的 `date`），`rates` 原样抄接口的 `rates`，`fetched_at` 写抓取时刻（带 `+08:00`，页面按它显示「Oct 29, 2026, 20:50 UTC+8」）。
模板工厂每天跑一次 `curl -s 'https://api.frankfurter.dev/v1/latest?base=USD&symbols=EUR,GBP,JPY,CNY,AUD,CAD'`，把结果换进 `#fx-snapshot`，
同时把 `#out` 里那六行静态金额（USD 10,000 × 汇率）和 `#fxsrc` 那句的时间改掉，再推同一个 `proposal_id`。快照写在页里，没有放 `_data/` 数据表。
不刷新也能用：页面每次打开都会自己拉实时汇率，只是拉不到时显示的是上次快照的时间。要加币种：`#cur` 的 `<option>`、脚本里的 `NAMES`、请求的 `symbols` 和快照的 `rates` 同改。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 导航 `.nav` | 标志（内联 SVG：太阳 + 三道海浪）、品牌名与一行副标题、锚点链接 |
| 首屏 `.hero` | 标题、一段介绍、三个大数字 `.stats`（出口国家数 / 年产能 / 成立年份）；插画 `svg.scene` 换成你的产品场景，`.draw` 里每条 path 带 `pathLength="1"` 和 `--i`（出场顺序），`.call` 是两条注记 |
| 产品线 `.range > .item` | 线稿（`.f` 填色 / `.s` 轮廓 / `.t` 纹理）、名称、卖点、三行 `dl.spec`；`.range-note` 写颜色与起订规则 |
| 工厂 `.figs` / `.qc` / `.badges` | 四个数字、质检点、认证（只写你真有的） |
| 出货图 `svg.chart.wide` / `.narrow` | 每根柱的高 = 柜数 ÷ 30 × 图内高；产能虚线、春节注记、`aria-label` 同改；`.aside` 写下一个停工期与截单日 |
| 地图 `svg.map` | 点位 `<g class="pt" data-k="国家码" transform="translate(x y)">`：x = (经度 + 180) ÷ 360 × 1000，y = (80 − 纬度) ÷ 360 × 1000；脚本里的 `CASES` / `ROUTE`、国家按钮 `.chips`、面板首屏文字同改；`.also` 列其余出口国 |
| 案例 `.cases` | 三个案例：地点年份、标题、一段经过、三行数字 |
| FAQ | `<details>` 一问一段 |
| 询价 `#rfq` | 回复时效、三步、联系人 / WhatsApp / 邮箱 / 地址；表单字段在 `form.json` |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PRODUCT_EN` / `PUBLIC_NAME` 一致，测试咬着）+ 一句适用场景；发自己的官网时整段删掉 |
| `manifest.json` | `title` / `share.*`（微信 / WhatsApp 预览卡上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 表单（询盘）

询盘写进数据表 `rfq`（列 = `form.json` 里各字段的 `key`：`name` / `company` / `email` / `country` / `product_line` / `quantity` / `incoterm` / `message`）。`set_form` 表不在就建，读者写回默认打开：

```
set_form  proposal_id: <id>  table: "rfq"  title: "Request a quote"
          fields: <form.json 的 fields 原样>
          notify_emails: ["sales@你的域名"]      # 可选，最多 3 个；新询盘一到就发邮件（附全部字段），新地址先收确认信、点确认后才发
```

不写 `amount`（询盘不收钱）。读回：`list_data_rows table=rfq`。暂停收询盘：`set_form … append_open: false`，右下角的入口就不再出现。
`form.json` 的 `demo` 只给验收脚本用（`verify-shots.mjs` 会按它在手机上填一次提交，出 `submitted-375x812.png`）；`form.json` 不进发布包。

## 怎么发出去

单文件，最省事的是 MCP `publish_file`，再挂表单：

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "Kestrel Bay Outdoor Living"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
set_form …              # 见上一节，发布后挂，页面不用重发
```

有终端时用 CLI：

```bash
node core/space/cli/space-cli.mjs push core/space/examples/sample-export-brand-site \
  --proposal <proposal_id> --manifest core/space/examples/sample-export-brand-site/manifest.json --hold
```

官网要给所有人看：`set_visibility public`；想被搜索引擎收录再单独 `set_indexable`（先确认内容都能公开）。
产品线、产能、案例变了就改完再推一次到**同一个** `proposal_id` —— 名片、邮件签名、展会二维码上的链接都不用换。
验收截图：`node --import tsx examples/verify-shots.mjs sample-export-brand-site --write-thumb --write-phone`（QUALITY.md §7）。

## 素材

- 插画、产品线稿、地图点阵都是手写的内联 SVG；地图陆地轮廓是粗略的手描多边形按 2.5° 网格取点，只作示意，不是测绘数据。
- `thumb.webp` / `phone.webp`：画廊缩略图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。