# 房贷怎么还更划算 · 计算器

> 活页公开模板 `sample-mortgage-calc` · 场景: 小工具 · 轻应用 · 行业: 房产家居 / 金融投资
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/O5GJk7MJKLIm · 详情: https://space.24haowan.com/examples/sample-mortgage-calc

## 这是什么

房贷计算器 · 置业顾问发给客户，自己拖首付、改年限立刻重算

## 什么时候用

要发一个读者自己动手算的小工具：房贷、车贷、分期、装修预算这类「改几个数、立刻看结果」，并且希望读者把算好的结果发回给你，选它。只是把几档价格摆出来让人选，选 sample-quote-sheet 或 sample-client-proposal；介绍一套房源本身（户型、照片、配套），选 sample-property-listing；要的是数据表驱动的店务台，选 livepage-app。

## 用户对助手说的原话

帮我做一个房贷计算器，发成一个网页链接给客户：页头写我的门店和名字、日期、客户称呼，以及房源、面积、总价；电脑上左边一栏是输入（总价、首付比例滑块、贷款年限滑块、商贷 / 公积金 / 组合贷三选一、组合贷里公积金贷多少、两个利率、等额本息 / 等额本金），利率写成能改的输入框并标「示例」、注明不是银行现行利率；右边先是一个很大的「每月还」读数，下面一排首付、贷款、总利息、本息合计；接着一张两种还法的双折线图（每月还款额随时间，点任意一个月看本金和利息各多少），旁边一个利息占比环形图和两种还法的对照表，加一句等额本金少付多少、首月多还多少；然后是提前还款模拟（第几年末还多少万、缩短年限还是减少月供，算出省多少利息）；最后一张「把这个方案发给顾问」表单（称呼、手机号、按当前输入自动填好的方案摘要），提交后存到数据表。改任何一项都立刻重算，公式用标准的等额本息、等额本金；手机上一栏排，输入区顶上吸着月供，图换一套适合窄屏的坐标。

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

## 照着做一份

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

## 页面结构

- 房子和贷款
- 每月还多少
- 两种还法对比
- 提前还款
- 发给顾问

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

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

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

- 页面里现算：改输入，月供大读数、双折线对比图、利息占比环形图、提前还款模拟同一帧重算；不跑脚本时显示按默认输入算好的那一份
- 调好的方案经原生表单写进数据表 plans（name / phone / summary），只读回读者自己发过的行
- 同一链接一直可用：换房源、换默认值就更新同一个页面

## 发之前要备好

- 数据表 plans（列 name / phone / summary，append_open=true）：文末「把这个方案发给顾问」表单写进这里，发布前先用 set_data 建好；页面只读回读者自己发过的行
- 联系方式类数据表建议设 members_only=true 或口令可看：页面读回会把已过审的行返回给每位读者（官方示例成品就是 members_only，访客的提交不会入表）

## 模板说明（README）

模板市场「小工具 · 轻应用」的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
置业顾问把一套房按客户的情况先算一版发过去，客户自己拖首付、改年限和利率，调好了一键把方案发回顾问。计算器类页面会被反复打开、转给家里人商量，同一条链接一直有用。示例数据均为虚构。

## 演示哪个特色

**一个能算的页面 + 调好的方案写回数据表。**

- **记忆点**是「每月还」那个大读数：改左边任何一项（总价、首付比例滑块、年限滑块、商贷 / 公积金 / 组合、两个利率、还款方式），它和右边的图在同一帧里重算。第一次打开时从 0 数上来（0.7 秒，`prefers-reduced-motion` 时直接终态）。手机上输入区顶部吸着一条月供，拖滑块时一直看得见。
- 两种还法对比：一张双折线 SVG（每月还款额随时间），点 / 拖图上任意一个月，看那个月两种还法里本金、利息各多少（键盘方向键逐月，PageUp / PageDown 一年）；旁边是利息占比环形图和一张首月 / 末月 / 总利息 / 本息合计的对照表，外加一句「等额本金少付多少、首月多还多少、第几期起反超」。
- 提前还款模拟：第 N 年末还 X 万，选「缩短年限」或「减少月供」，算出省多少利息、提前多久还清或月供降到多少；组合贷先还利率高的那一笔。
- 利率是用户可改的输入，默认值标「示例」，页面上写明不是任何银行的现行利率。
- 不跑脚本时：页面里写着按默认输入算好的那一份（数字、两张图、对照表、方案摘要全在），表单照常能提交。
- 电脑上左栏输入（吸顶）、右栏结果与图；手机上一栏，图换一套 343 宽的坐标。
- 发出去之后：「把这个方案发给顾问」是原生表单，写进数据表 `plans`（name / phone / summary），summary 按当前输入自动填好、客户也能改；顾问用 `list_data_rows table=plans` 读回。页面**只读回自己发过的行**（`_mine`），别人的称呼和电话不出现在页面上。

## 公式与验算

r = 年利率 ÷ 12，n = 期数，P = 贷款本金。

- 等额本息：月供 M = P·r·(1+r)^n ÷ ((1+r)^n − 1)；总利息 = M·n − P。
- 等额本金：第 k 期 = P/n + (P − (k−1)·P/n)·r，每期少 P/n·r；总利息 = P·r·(n+1)/2。
- 组合贷：商贷、公积金各算一张逐月表，按月相加。
- 提前还款：逐月模拟，第 12N 期还完后余额减 X；缩短年限 = 月供（或每期本金）不变、还到清为止；减少月供 = 剩余期数不变、按新余额重算。

页面脚本逐月模拟（`schedule()`），与上面的闭式公式两组对过：

| 例子 | 等额本息月供 | 等额本息总利息 | 等额本金首月 / 每月递减 / 末月 | 等额本金总利息 |
|---|---|---|---|---|
| 100 万 · 3.00% · 30 年（360 期） | 4,216.04 | 517,774.52 | 5,277.78 / 6.94 / 2,784.72 | 451,250.00 |
| 50 万 · 4.90% · 20 年（240 期） | 3,272.22 | 285,332.86 | 4,125.00 / 8.51 / 2,091.84 | 246,020.83 |

提前还款另对一组：100 万 · 3.00% · 30 年等额本息，第 5 年末（第 60 期后，余额 889,063.63）还 20 万 ——
缩短年限：剩余 210.4 期 ⇒ 共 271 期还清，省利息约 17.79 万；减少月供：月供 4,216.04 → 3,267.62，省利息 84,526.79。

默认这一版（总价 320 万、首付 30%、组合贷：公积金 100 万 @ 2.60% + 商贷 124 万 @ 3.10%、30 年、等额本息）：月供 4,003.3 + 5,295.1 = 9,298.40，总利息 110.7 万；等额本金首月 11,592、总利息 96.9 万。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.org` / `h1` / `.facts` | 你的门店、顾问名字、日期、客户称呼；房源、面积、挂牌价 |
| 左栏 `#calc` 各 `input` 的 `value` | 默认总价、首付比例、年限、贷款类型（`checked`）、公积金额度、两个利率、还款方式 —— 页面打开就按这些算 |
| `.rate-note` | 利率说明。利率一律写成示例，别写成「当前利率」 |
| 脚本 `FIRST` | 首期还款年月（图上的日期、「第 N 期 · 某年某月」都从它推） |
| `#pre` | 提前还款的默认年份、金额、方式 |
| 「把这个方案发给顾问」 | 导语里的回电承诺、按钮上的名字；`name` / `phone` / `summary` 三个字段名就是表里的列名 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的页面时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

改了默认输入之后，不跑脚本时看到的那一份（页面里 `<!--b:…-->` 标记之间的数字和图）要重新生成：用浏览器打开页面、把每个 `data-bake` 元素的内容写回去（本仓库里用 playwright 打开后取 `innerHTML`）。只给会跑脚本的读者看可以不管，脚本一跑就覆盖。

## 数据表

文末表单写进数据表 `plans`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "plans"  columns: ["name","phone","summary"]  rows: []  append_open: true  revision: 0
```

顾问用 `list_data_rows table=plans` 读回；想每来一份就收邮件，`set_data` 再带 `notify_emails`。
注意：过审的读者写回行，知道链接的人用 `./_data/plans.json` 读得到 —— 本页自己只显示 `_mine` 的行，但手机号仍在接口里。介意的话把链接设成口令可看，或把「手机号」换成「方便联系的时间」。
本地 `space-cli serve` 会把提交写进包里的 `_data/plans.json`，试完改回 `[]`。

## 怎么发出去

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

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "房贷怎么还更划算 · 计算器"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
```

然后按上面建 `plans` 表。有终端时用 CLI：

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

给谁看：默认仅自己可见；发给客户用 `set_visibility`（`passcode` 口令可看，或 `public`）。换了房源就更新同一个页面，客户手里的链接不变。

## 素材

- 没有位图；门店标志是内联 SVG 几何图形。门店、顾问、客户、房源均为虚构；利率是示例，不代表任何银行。
- 没有外部数据：利率由读者自己填，不接任何接口。
- `thumb.webp` / `phone.webp`：画廊缩略图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。