# 会议室音视频改造 · 报价单

> 活页公开模板 `sample-quote-sheet` · 场景: 方案 · 报价 · 行业: 制造供应链 / 企业内部
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/q7330-3rJyYW · 详情: https://space.24haowan.com/examples/sample-quote-sheet

## 这是什么

报价单 · 客户选配、实时算价、在线确认

## 什么时候用

给客户的正式报价单：有几档基础方案、有可选加配（勾选或改数量），想让客户自己配、当场看到含税合计和大写金额，并在页里点「确认此报价」。设备集成、装修、软件实施、定制采购都合适。要讲活动创意、一天怎么走的提案选 sample-client-proposal；平台级长期合作方案选 proposal-marketing-platform；只是一张固定价目表、不需要客户选配，用 sample-product-catalog。

## 用户对助手说的原话

帮我把这份报价做成一张正式的报价单网页发给客户：页头是我方公司抬头和报价编号，大标题写项目名，下面一行致客户和场地，再列报价日期、有效期、勘测日期、双方联系人、币种和税率；接着是三档基础方案并排对照，每档一张俯视的小示意图（会议室里屏、摄像头、麦克风、音箱、座位怎么摆，用图例说明），列四条配置和价格，推荐的那档标出来，点一档就选中；然后是选配清单，每项写单价和一句说明，能勾选或加减数量；右侧固定一块报价汇总，随选择实时重算明细、小计、满额优惠、6% 税额、含税合计（大字）和人民币大写；再往下是按真实日期比例画的交付排期（标出周末施工）、三期付款（金额跟着合计变）、几条可以折叠的条款；最后「确认此报价」表单写公司、联系人，选配和合计自动带上，提交存进一张数据表，成功后盖一个红色「已确认」印章。电脑上两栏、像一张正式报价单，可直接打印成 A4；手机上一栏，底部固定一条合计。改价就更新同一个链接。

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

## 照着做一份

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

## 页面结构

- 三档方案
- 选配
- 报价汇总
- 交付排期
- 付款方式
- 条款
- 确认此报价

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

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

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

- 页内选配实时算价（小计、满额优惠、6% 税额、含税合计与大写金额同一套算法，脚本不跑时显示默认配置的金额）
- 页内确认回写数据表（原生表单 POST ./_data/confirms），提交后盖「已确认」章，再次打开读回已有确认
- 同一链接更新不变（改价、改排期都在这一页），可直接打印成 A4

## 发之前要备好

- 数据表 confirms（列 company / contact / options / total，append_open=true）：文末「确认此报价」写进这里，页面打开时读回最近一条确认并盖章；发之前先用 set_data 建好，过了有效期把 append_open 关掉
- 联系方式类数据表建议设 members_only=true 或口令可看：页面读回会把已过审的行返回给每位读者（官方示例成品就是 members_only，访客的提交不会入表）

## 模板说明（README）

「会议室音视频改造 · 报价单」：虚构的集成商「声衡视听」发给虚构客户「瑞拓精密机械」的正式报价。总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`。示例数据均为虚构。

## 演示哪个特色

**客户在页里自己配、当场看到含税合计，并在页里确认。**

- 三档基础方案（每档一张会议室俯视示意图，内联 SVG）+ 七项选配（勾选或加减数量）。改任何一项，右侧报价汇总（手机上是底部那条合计）
  实时重算：明细、小计、满额优惠、6% 税额、含税合计和人民币大写，付款三期的金额、文末确认表单里的「选配 / 合计」一起跟着变。
- 页面里写死的是默认配置（进阶档 + 四项选配）算出的金额，与脚本同一套算法（`cap()` 大写、税额四舍五入到分），脚本不跑时照常完整、能提交。
- 文末「确认此报价」是原生表单 `POST ./_data/confirms`：脚本在时页内提交，成功后盖一个红色「已确认」印章（印章环上的字取表单里的公司名）；
  再次打开页面时读 `./_data/confirms.json` 的最近一条，照样盖章、显示谁在几点确认、合计多少。
- 同一条链接持续更新：改价、改排期、换档都发到同一页；发布者能看到客户看到了哪一节（每节的 `data-track-section`）。
- 电脑上两栏、汇总贴在右上；可直接打印成 A4（`@media print`：只留选中的那档与有数量的选配，条款自动展开）。没有外链。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` / `.for` / `.facts` | 我方公司抬头（内联 SVG 标志）、报价编号、项目名、致客户与场地、报价日期 / 有效期 / 勘测日期 / 双方联系人 / 币种与税率 |
| 三档方案 `.tier` | 每档一个 `<label class="tier" data-tier="…">`：单选 `value`、示意图 `svg.plan`、四条配置、适用说明、价格；推荐档加 `<em>推荐</em>`，默认选中那档加 `checked` 和 `on` |
| 选配 `.opt` | 每项一个 `<li data-opt data-price data-kind>`：`data-kind="qty"` 是加减数量（`max` 上限），`"check"` 是勾选；某档已含的加 `data-incl="C"`（选那档时显示「已含」、不计价） |
| 脚本里的 `DATA` | 三档的 `id / name / price` 与选配名称，和上面两处一一对应（顺序同选配列表） |
| 算法（脚本 `calc()`） | 优惠规则（现在是小计满 150,000 打 97 折）、税率（`net * 6` 即 6%，单位分）、付款比例 30 / 60 / 10 |
| 交付排期 `.gantt` | 两段内联 SVG（`.gantt.wide` 电脑 708 宽、`.gantt.narrow` 手机 343 宽），按真实日期比例：电脑 x = 150 + 第几天 × 25，手机 x = 8 + 第几天 × 15.5（从 11/2 周一算起）；周末底色、周末施工用 `bar wk` |
| 付款方式 `.pay` / 条款 `details` | 三期的时点；条款每条一个 `<details>` |
| 默认金额 | 页面里写死的明细、小计、税额、合计、大写、三期金额、表单里的选配与合计，都是默认配置算出来的；改了价格或默认勾选，这几处要一起改（打开页面让脚本算一遍，把结果抄回去最省事） |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 适用场景；发自己的报价时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 数据表

「确认此报价」写进数据表 `confirms`（列 `company` / `contact` / `options` / `total`，一次确认一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "confirms"  columns: ["company","contact","options","total"]  rows: []  append_open: true  revision: 0
```

客户确认后用 `list_data_rows table=confirms` 读回；过了有效期把 `append_open` 关掉。页面读回的是表里最近一条，所以别把测试行留在表里。
本地 `space-cli serve` 会把提交写进包里的 `_data/confirms.json`，试完记得改回 `[]`。

## 怎么发出去

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

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "会议室音视频改造 · 报价单"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
```

然后建 `confirms` 表（见上），`set_visibility` 设成 `passcode`（口令发给客户）或 `public`。**改价**：同一份内容改好，再调一次 `publish_file`，传 `proposal_id` —— 链接不变。

有终端时用 CLI：

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

## 素材与纪律

- 没有位图；标志、会议室示意图、排期图、印章都是内联 SVG。公司、人名、电话、金额均为虚构。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。
- 「已确认」印章只表示客户在页里点了确认，不是电子签章、没有法律效力；正式合同照常走线下签署。