# Harbor Lane Catalogue 2026–27

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

## 这是什么

英文外贸产品目录 · 发给海外买家询价

## 什么时候用

外贸工厂 / 跨境卖家要给海外买家发一份英文产品目录时选它：页面正文是英文，按外贸的口径写 MOQ、FOB 价格区间、外箱与装柜量、打样与大货交期、付款条款，页末是一张英文询价表单（公司、邮箱、型号、数量、备注）写进数据表 inquiries。调价后更新同一个链接。给国内客户看的中文图册（餐饮瓷器那种，按品类配大图和规格表、询价留手机号）选 sample-product-catalog；给一个客户的一次性合作方案选 sample-client-proposal；要讲给人听的演示稿选 sample-pitch-deck。

## 用户对助手说的原话

帮我把工厂的产品做成一份发给海外买家的英文产品目录，发成一个网页链接，正文全用英文：页头是公司名、成立年份和城市、目录名、一句话介绍，下面一行价格条款（FOB 港口、美元）、报价有效期、打样天数、付款方式，再一排文字认证徽章；接着是这份最显眼的产品系列网格，每款一张简洁的线稿图、型号、产品名、起订量 MOQ、FOB 价格区间和几个颜色色点（点色点线稿跟着换色），每格一个「询这款」的链接；然后一张规格对比表（材质、尺码和重量、每箱数量、外箱尺寸和体积、一个 40 尺高柜能装多少），手机上每行改成竖排条目；再写工厂能力：四个数字（面积、日产能、检验标准）、一张按订单量画的生产天数条形图（带春节停工截单日的虚线）、三种包装方式的线稿；然后合作流程按询价→打样→大货→出运排，每步写天数，电脑上画一条按天数比例的时间条，春节停工用一条细线提醒；最后一张英文询价表单（公司、邮箱、型号、数量、备注），提交存到一张数据表里，下面写联系人、WhatsApp 和邮箱。版式像一份正式的英文报价资料，少用底色块，用细线分隔；手机上网格两列、图表单独画一套。以后调价就更新同一个链接。价格条款旁加一个币种切换（美元 / 欧元 / 英镑 / 日元 / 人民币），按欧洲央行实时汇率（Frankfurter 免费接口）换算全部价格，页里先放一份今天的汇率快照，拉不到实时就用快照并写明更新时间。

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

## 照着做一份

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

## 页面结构

- Product range
- Specifications
- Factory & lead times
- How an order runs
- Request a quote

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

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

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

- 页内询价回写数据表（原生表单 POST ./_data/inquiries），产品格上一键预选型号
- 报价按欧洲央行实时汇率换算（页头切 USD / EUR / GBP / JPY / CNY，所有 FOB 价格区间跟着换；Frankfurter 实时拉取，拉不到用页内快照并标明时间）
- 同一链接更新不变（调价后买家手里的链接还是最新价）
- 阅读回执（买家看了产品、规格还是交期那几节）
- 微信 / 链接预览卡（share.title / share.desc）

## 发之前要备好

- 数据表 inquiries（列 company / email / model / qty / note，append_open=true）：页末询价表单写进这里，发布前先用 set_data 建好
- 页内内联一份汇率快照 <script id="fx-snapshot">（Frankfurter 美元基准 EUR / GBP / JPY / CNY + 抓取时间），由模板工厂每日刷新；不刷新也能用，页面打开时会自己拉实时汇率，拉不到才显示快照时间

## 模板说明（README）

只进画廊的样例（活页模板市场第一波，K1DG；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
正文是英文（`manifest.lang: "en"`），给外贸工厂发给海外买家用。示例内容均为虚构：工厂「Harbor Lane Home Textiles Co., Ltd.」、
型号、联系人 Iris Chen、WhatsApp 号码与邮箱（`.example` 保留域名）都是编的；认证徽章只是文字，不是任何认证机构的标志。没有位图，产品图全是内联 SVG 线稿。

## 演示哪个特色

**页末询价写回数据表 + 调价后同一个链接更新不变 + 阅读回执（买家看了哪几节）。**

- 记忆点：产品系列网格（`#range`）—— 每款一张内联 SVG 线稿 + 型号 + MOQ + FOB 价格区间 + 颜色色点；点色点，线稿的填色跟着换（脚本不跑时停在第一个颜色）。
  网格用 1px 细线分格，不用卡片阴影；手机两列、电脑三列。
- 规格对比表（`#specs`）：电脑上是表，手机上每行变成一张「标签 + 值」的竖排条目；带外箱尺寸、CBM 和 40'HQ 装柜量（按 68 CBM 自己算过）。
- 工厂能力（`#factory`）：四个数字 + 「按订单量的生产天数」条形图（内联 SVG，电脑 / 手机各一套坐标，带春节停工截止参照虚线，进视野时长出来一次）+ 三种包装方式线稿。
- 合作流程（`#process`）：询价 → 打样 → 大货 → 出运，电脑上一条按天数比例画的时间条，手机上改竖排清单；春节停工那句用左侧琥珀细线提醒。
- 汇率换算（页头 `#fx`）：价格条款下一排 USD / EUR / GBP / JPY / CNY 切换，切了之后所有 FOB 价格区间（和包装加价）按欧洲央行参考汇率换算显示，
  下面一行始终写「Rates: ECB reference rates via Frankfurter · updated <时间>」和当前 1 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`（`AbortSignal.timeout(3000)`），成功就换成实时、标「live, updated HH:MM」，
     失败就留快照、标「updated <快照时间>（saved snapshot）」。
  不跑脚本时切换条整块隐藏，价格只显示 USD 原价（页面仍完整）。报价和开票仍按美元，页上写明换算价只作参考。读者选过的币种记在本机 `localStorage`。
  页面会连的站外域名只有 `api.frankfurter.dev`（发布回执里是一条 `external_origins` 事实说明，不是提醒）。
- 询价（`#inquiry`）：原生表单 `<form action="./_data/inquiries" method="post">`，不跑脚本也能提交；脚本在时页内提交、就地显示「已发送」。
  每张产品格上的「Quote this style」会把型号预选进表单。

## 数据表

`inquiries`（列 `company` / `email` / `model` / `qty` / `note`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="inquiries" revision=0 rows=[] columns=["company","email","model","qty","note"] append_open=true
```

读回：`list_data_rows table=inquiries`。`model` 的值是型号（`HL-S201` 等）或 `Several`。

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

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

`date` 是欧洲央行的参考日（接口返回的 `date`），`rates` 原样抄接口的 `rates`，`fetched_at` 写抓取时刻（带时区）。
模板工厂每天跑一次 `curl -s 'https://api.frankfurter.dev/v1/latest?base=USD&symbols=EUR,GBP,JPY,CNY'`，把结果换进 `#fx-snapshot` 再推同一个 `proposal_id`。
快照写在页里，没有放 `_data/` 数据表。不刷新也能用：页面每次打开都会自己拉实时汇率，只是拉不到时显示的是上次快照的时间。
要加币种：页头 `.seg` 加一个按钮、请求的 `symbols` 和快照的 `rates` 同改。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.top` / `h1` / `.sub` / `.facts` / `.badges` | 公司名、成立年份与城市、更新日期、目录名、一句话、价格条款 / 有效期 / 打样天数 / 付款方式、认证徽章文字（只写你真有的） |
| 价格 `.px[data-usd]` | 每个价格区间写成 `<span class="px" data-usd="低-高">$低–高</span>`（美元，换算从这里读）；改价时文字和 `data-usd` 一起改 |
| 产品网格 `.range > .item` | 每格：`--tint` 默认色、SVG 线稿（`.f` 填色 / `.s` 轮廓 / `.t` 纹理）、型号、名称、MOQ、FOB 区间、色点（`--c` + `aria-label`）、`data-model`；增删格子时表单 `select` 同改 |
| `.terms-note` | MOQ 每色要求、阶梯价规则、定制包装加价 |
| 规格表 `table` | 每行 `data-label` 是手机上显示的标签；外箱尺寸、CBM、装柜量自己算一遍（68 ÷ CBM × 每箱数量） |
| 工厂数字 `.figs` | 面积、产能、检验标准 |
| 生产天数图 `svg.chart.wide` / `.narrow` | 每行两段条（备料 / 生产），宽度 = 天数 × 每天像素（电脑 10.5，手机 5.5）；参照虚线与文字；`aria-label` 同改 |
| 合作流程 `svg.strip` + `.steps` | 每段的天数与说明；时间条每天 9 像素 |
| `.aside` | 节假日停工与截单日期 |
| 询价表单 + `.contact` | 字段名要与 `inquiries` 的列一致；联系人、WhatsApp、邮箱换成你自己的 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PRODUCT_EN` / `PUBLIC_NAME` 一致，测试咬着）+ 一句适用场景；发自己的目录时整段删掉 |
| `manifest.json` | `title` / `share.*`（微信 / WhatsApp 预览卡上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 怎么发出去

单文件，最省事的是 MCP `publish_file`：先 `set_data` 建好 `inquiries` 表，再

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "Harbor Lane Catalogue 2026–27"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
```

有终端时用 CLI：

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

给海外买家看要 `set_visibility` 设成 `public`（或 `passcode`，口令随报价邮件发）。**调价**：改完再推一次到**同一个** `proposal_id`，
买家手里的链接不变、看到的就是新价。验收截图：`node --import tsx examples/verify-shots.mjs sample-export-catalog --write-thumb`（QUALITY.md §7）。