# 「蓝线」餐饮瓷器产品图册 · 2026 秋冬

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

## 这是什么

产品图册 · 发给客户看产品和价格

## 什么时候用

要把产品、规格、价格和案例整理成一份给客户翻的图册，或做公司介绍时选它；价格会调、想让客户一直看最新那份，也选它。给一个客户的一次性合作方案选 sample-client-proposal；要讲给人听的演示稿选 sample-pitch-deck。

## 用户对助手说的原话

把我们的产品做成一份给客户看的产品图册，发成一个网页链接：页头是公司抬头、图册名和几项要素（工厂、起订量、交期、联系人），下面一排跳到各品类的链接和一张场景大图；接着三四条卖点，每条一句话带一个具体数字；然后一张按真实比例画的全系尺寸对照图（俯视口径画成一圈圈、左边对齐，旁边列名称和尺寸，点名称那一圈会亮）；每个品类一张产品图配一张规格表（款式、尺寸、重量、单价区间），末尾写清起订量、阶梯价和有效期；再列三个客户案例，每个配一个结果数字；最后一张询价表单（先要什么、大概数量、称呼、手机、门店），提交存到一张数据表里。版式像杂志，标题用宋体，少用底色块，用细线分隔；手机上图和表改成上下排。以后调价就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 为什么后厨愿意用
- 全系尺寸
- 平盘与深盘
- 碗
- 杯
- 他们在用
- 要样品或报价

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

- https://space.24haowan.com/examples/sample-product-catalog/source/index.html（入口）
- https://space.24haowan.com/examples/sample-product-catalog/source/bowls.webp
- https://space.24haowan.com/examples/sample-product-catalog/source/cups.webp
- https://space.24haowan.com/examples/sample-product-catalog/source/hero.webp
- https://space.24haowan.com/examples/sample-product-catalog/source/plates.webp

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

- 同一链接更新不变（调价后客户手里的链接还是最新价）
- 阅读回执（客户看了哪几类产品）
- 页内询价回写数据表（原生表单 POST ./_data/inquiries）

## 发之前要备好

- 数据表 inquiries（列 want / qty / name / phone / store / items，append_open=true）：文末询价表单写进这里，发布前先用 set_data 建好

## 模板说明（README）

画廊里「产品介绍 / 公司介绍」这一类的样例（EPIC #9032 C7，#9040）。按 `core/space/examples/QUALITY.md` 做。示例数据均为虚构。

## 演示哪个特色

**同一条链接调价后更新不变 + 页内询价回写数据表 + 阅读回执。**

- 图册发给客户之后，价格、款式、案例都会变：每次改完往**同一个页面**上发一个新版本，`proposal_id` 不变 ⇒ 客户手里那条链接打开就是最新价。
- 文末「要样品或报价」是一张原生表单，提交落进这个页面的数据表 `inquiries`；发布者用 `list_data_rows` 读回，不用另开问卷。
- 阅读回执能看到客户在哪几类产品上停得久：`get_session_timeline` 逐节的轨迹，节的锚点就是每个 `<section>` 的 `data-track-section`。
- **没有外链**。末尾一小段脚本只做三件事：尺寸图进场、点图例高亮、表单页内提交；不跑时图照常完整、表单照常提交。manifest 不写 `render`。
- 记忆点是「全系尺寸」那张图：八款的俯视口径按真实比例（每厘米 10 px）画成一圈圈、左边对齐，配一条 A4 纸宽的参照线。SVG 的 viewBox 是 340 宽：手机（面板 343）上 1:1，电脑左栏 400 宽略放大 —— 只放大、不缩小，字不会变小。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` / `.facts` | 公司抬头（内联 SVG 标志）、图册编号、系列名、工厂 / 起订 / 交期 / 联系人 |
| 分类导航 `nav .cats` | 每个链接对应一个节的 `id`；品类增减时这里、节、`manifest.sections` 三处同改 |
| 场景大图 `hero.webp` | 换成你们的场景图（WebP，长边 ≤ 1600px，≤ 300 KB）；不加 `loading="lazy"`，它是首屏 |
| 「为什么后厨愿意用」`.points` | 三四条卖点，每条一句话、带一个能核对的数字 |
| 「全系尺寸」`svg.sizes` | 每款一个 `<circle>`：`r` = 口径(cm) × 5，`cx` = 16 + r（左边对齐在 x=16），`cy` 固定 166；`data-k` 与右边图例 `.key li` 的 `data-k` 一一对应；`--i` 是进场先后。最大那款超过 30 cm 时把比例改小，标尺刻度与 A4 线（x = 16 + 21 × 每厘米像素）一起改；`aria-label` 同步 |
| 各品类 `#plates` / `#bowls` / `#cups` | 一张产品图 + 一张 `table`（款式、尺寸、重量、单价区间）；表外套 `.scroll`，列多了手机上自己横向滚 |
| 价格条款 `.terms` | 起订量、阶梯价、含税与否、有效期 —— 和页头「起订」那一格要一致 |
| 「他们在用」`.cases` | 每个案例一行：客户、用了什么、右边一个结果数字 |
| 「要样品或报价」（文末） | 原生 `<form class="ask" action="./_data/inquiries">`：两组短标签单选（`want` / `qty`）+ 称呼 / 手机 / 门店 + 想要的款式；`name` 就是表里的列名。改列时 `set_data` 的 `columns` 同改 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的图册时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；`sections` 与页里的 `id` / `data-track-section` 一致 |

不要动的：每节的 `id` 与 `data-track-section` 必须相等且与 `sections[].anchor` 一致，否则目录点了不跳、回执里那一节没名字（`src/upload/example-deck.test.ts` 咬着）。

## 数据表

询价表单写进数据表 `inquiries`（列 `want` / `qty` / `name` / `phone` / `store` / `items`，一次提交一行，`append_open=true`）。发布前先建表：

```
set_data  proposal_id: <id>  table: "inquiries"  columns: ["want","qty","name","phone","store","items"]  rows: []  append_open: true  revision: 0
```

客户提交后用 `list_data_rows table=inquiries` 读回，处理完用 `set_data_row_status` 标掉。本地 `space-cli serve` 会把提交写进包里的 `_data/inquiries.json`，试完记得改回 `[]`。

## 怎么发出去

先用 MCP `create_proposal` 建一个页面拿到 `proposal_id`，按上一节建好 `inquiries` 表，再整目录推（有图片，CLI 最省事）：

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/sample-product-catalog \
  --proposal <proposal_id> --manifest core/space/examples/sample-product-catalog/manifest.json --note "2026 秋冬" --hold
```

`--hold` 先看预览，确认后 `publish_version`。没有终端时用 MCP `create_upload_session` → 逐个传文件 → `finalize_upload`。

**调价后**：改完同一目录用同一个 `--proposal` 再推一次 —— 链接不变，数据表也不受影响（表挂在方案上、不随版本）。

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

## 素材

- `hero.webp` / `plates.webp` / `bowls.webp` / `cups.webp`：生成图，「蓝线」系列、「素岭瓷业」与案例里的餐厅、酒店均为虚构，图中没有真实品牌。
- `thumb.webp`：画廊缩略图，由 `examples/verify-shots.mjs --write-thumb` 从成品截出，不进发布包。

## 纪律

- 手机号是客户的个人信息：只用来回电，别转发到群里；处理完的行及时标状态。
- 数字是示例，发之前整段换掉；页脚那句「示例内容，均为虚构」删掉。