Examples gallery

20+ 个完整可复制粘贴的 Rho 文档片段——按场景分类。每个 demo 一段源 + 一句"它教你什么"。想看活的渲染？贴进一个 .md 文件，用 Rho MD 打开即可。

财务 (Finance)

F1 — 复利计算器（最经典）

学到什么：slider + computed + Vega-Lite chart 配合做出 Observable 级别的金融工具。

```interact namespace finance
slider principal 1000 100000 10000 1000
slider rate 0 0.15 0.05 0.01
slider years 1 30 10 1
computed compound = principal * pow(1+rate, years)
template stl:
[本金] -> [${principal:.0f}]
[终值] -> [${compound:.0f}]
```

```interact namespace finance
template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": {years}, "step": 1, "as": "year"}},
  "transform": [{"calculate": "{principal} * pow(1+{rate}, datum.year)", "as": "value"}],
  "mark": "line",
  "encoding": {"x": {"field": "year"}, "y": {"field": "value", "type": "quantitative"}}
}
```

F2 — 房贷月供

学到什么：复杂金融公式直接写在 computed 里。

```interact
slider price 100000 2000000 500000 10000
slider down 0 0.5 0.3 0.05
slider rate 0.02 0.08 0.045 0.001
slider years 5 30 30 1
computed loan = price * (1 - down)
computed monthlyRate = rate / 12
computed n = years * 12
computed monthly = loan * monthlyRate * pow(1+monthlyRate, n) / (pow(1+monthlyRate, n) - 1)
template stl:
[贷款额] -> [${loan:.0f}]
[月供] -> [${monthly:.2f}]
[总利息] -> [${(monthly * n - loan):.0f}]
```

F3 — 退休规划

学到什么：多个 sliders + 复杂 computed + chart 综合。

```interact namespace retire
slider age 25 60 30 1
slider retireAge 50 75 65 1
slider monthly 100 5000 1000 100
slider rate 0 0.1 0.06 0.005
computed years = retireAge - age
computed total = monthly * 12 * ((pow(1 + rate, years) - 1) / rate)
template stl:
[投资期] -> [{years} 年]
[退休本金] -> [${total:.0f}]
```

F4 — 投资回报对比

学到什么：toggle + ternary 切换两种方案。

```interact
slider initial 1000 100000 10000 1000
slider growth 0 0.3 0.1 0.01
slider years 1 30 10 1
toggle reinvest true
computed value = reinvest ? initial * pow(1+growth, years) : initial * (1 + growth * years)
template stl:
[模式] -> [{reinvest ? "复利" : "单利"}]
[终值] -> [${value:.0f}]
```

物理 (Physics)

P1 — 单摆动画

学到什么：timer + SVG 做物理仿真，三角函数计算位置。

```interact
timer t 0 10 0.05 loop
slider length 30 80 50 1
template svg:
<svg viewBox="0 0 200 100" width="400" height="200">
  <line x1="100" y1="0" x2="{100 + length * sin(2*pi*t/2):.2f}" y2="{length * cos(2*pi*t/2):.2f}" stroke="#888"/>
  <circle cx="{100 + length * sin(2*pi*t/2):.2f}" cy="{length * cos(2*pi*t/2):.2f}" r="6" fill="red"/>
</svg>
```

P2 — 阻尼振动

学到什么：指数衰减 × 三角函数复合，chart 看曲线包络。

```interact
slider damping 0 1 0.1 0.01
slider freq 0.5 5 2 0.1
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 10, "step": 0.05, "as": "t"}},
  "transform": [{"calculate": "exp(-{damping} * datum.t) * cos(2*3.14159*{freq}*datum.t)", "as": "y"}],
  "mark": "line",
  "encoding": {"x": {"field": "t"}, "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-1.2, 1.2]}}}
}
```

P3 — 抛物运动轨迹

学到什么：参数方程 → x(t) + y(t) → 散点图轨迹。

```interact
slider v 5 50 25 1
slider angle 10 80 45 1
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 10, "step": 0.1, "as": "t"}},
  "transform": [
    {"calculate": "{v} * cos({angle}*3.14159/180) * datum.t", "as": "x"},
    {"calculate": "{v} * sin({angle}*3.14159/180) * datum.t - 0.5 * 9.8 * datum.t * datum.t", "as": "y"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative", "scale": {"domain": [0, 60]}}
  }
}
```

P4 — 行星 3 颗 + 太阳

学到什么：timer 驱动多对象 SVG，不同周期。

```interact
timer t 0 1000 1 loop
template svg:
<svg viewBox="0 0 200 200" width="300" height="300">
  <circle cx="100" cy="100" r="6" fill="orange"/>
  <circle cx="{100 + 30*cos(t*0.15):.1f}" cy="{100 + 30*sin(t*0.15):.1f}" r="3" fill="gray"/>
  <circle cx="{100 + 50*cos(t*0.08):.1f}" cy="{100 + 50*sin(t*0.08):.1f}" r="4" fill="blue"/>
  <circle cx="{100 + 70*cos(t*0.04):.1f}" cy="{100 + 70*sin(t*0.04):.1f}" r="3" fill="red"/>
</svg>
```

数学 (Math)

M1 — 三角函数同步

学到什么：单 timer 驱动多函数对比。

```interact
timer t 0 6.28 0.05 loop
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "x"}},
  "transform": [
    {"calculate": "sin(datum.x + {t})", "as": "sin"},
    {"calculate": "cos(datum.x + {t})", "as": "cos"}
  ],
  "layer": [
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "sin", "type": "quantitative"}, "color": {"value": "red"}}},
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "cos", "type": "quantitative"}, "color": {"value": "blue"}}}
  ]
}
```

M2 — 正态分布参数

学到什么：完整 PDF 公式直接写在 vega-lite 里。

```interact
slider mu -5 5 0 0.1
slider sigma 0.1 3 1 0.1
template vega-lite:
{
  "data": {"sequence": {"start": -10, "stop": 10, "step": 0.1, "as": "x"}},
  "transform": [{"calculate": "(1 / ({sigma} * sqrt(2*3.14159))) * exp(-pow(datum.x - {mu}, 2) / (2 * pow({sigma}, 2)))", "as": "p"}],
  "mark": "area",
  "encoding": {"x": {"field": "x"}, "y": {"field": "p", "type": "quantitative"}}
}
```

M3 — 黄金比例视觉

学到什么：SVG 嵌套矩形 + 数学常数。

```interact
slider iterations 1 8 5 1
template svg:
<svg viewBox="0 0 200 130" width="400" height="260">
  <rect x="10" y="10" width="180" height="111" fill="none" stroke="gold" stroke-width="2"/>
  <rect x="10" y="10" width="111" height="111" fill="none" stroke="gold" stroke-width="1"/>
  <rect x="10" y="10" width="69" height="69" fill="none" stroke="gold" stroke-width="1" opacity="{iterations >= 3 ? 1 : 0.2}"/>
  <rect x="10" y="10" width="42" height="42" fill="none" stroke="gold" stroke-width="1" opacity="{iterations >= 4 ? 1 : 0.2}"/>
  <text x="100" y="125" text-anchor="middle" font-size="6" fill="#888">Φ ≈ 1.618</text>
</svg>
```

M4 — 二次函数 + 导数

学到什么：layered chart 同时画函数和导数。

```interact
slider a 0.1 3 1 0.1
slider b -3 3 0 0.1
slider c -3 3 0 0.1
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": -5, "stop": 5, "step": 0.1, "as": "x"}},
  "transform": [
    {"calculate": "{a}*datum.x*datum.x + {b}*datum.x + {c}", "as": "y"},
    {"calculate": "2*{a}*datum.x + {b}", "as": "dy"}
  ],
  "layer": [
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "y", "type": "quantitative"}, "color": {"value": "blue"}}},
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "dy", "type": "quantitative"}, "color": {"value": "red"}}}
  ]
}
```

教育 (Education)

E1 — BMI 计算器（详细版）

学到什么：slider + computed + 三元嵌套分类。

```interact
slider weight 40 120 70 1
slider height 1.4 2.1 1.7 0.01
computed bmi = weight / (height * height)
computed cat = bmi < 18.5 ? "偏瘦" : bmi < 24 ? "正常" : bmi < 28 ? "超重" : "肥胖"
computed advice = bmi < 18.5 ? "建议增重 + 力量训练" : bmi < 24 ? "保持现状" : bmi < 28 ? "建议有氧 + 控制饮食" : "建议就医咨询"
template stl:
[BMI] -> [{bmi:.1f}] ::mod(分类="{cat}", 建议="{advice}")
```

E2 — 单位换算

学到什么：select + ternary 切多种单位。

```interact
slider v 1 1000 100 1
select unit "kg" "lb" "oz" "stone"
computed kg = unit == "kg" ? v : unit == "lb" ? v * 0.453592 : unit == "oz" ? v * 0.0283495 : v * 6.35029
template stl:
[原始] -> [{v} {unit}]
[公斤] -> [{kg:.3f} kg]
```

E3 — 步数能量消耗

学到什么：toggle + 多 slider 配合做实用工具。

```interact
slider steps 0 30000 5000 100
slider weight 40 120 70 1
toggle hilly false
computed baseCal = steps * 0.04 * (weight / 70)
computed totalCal = hilly ? baseCal * 1.3 : baseCal
template stl:
[步数] -> [{steps}]
[消耗热量] -> [{totalCal:.0f} kcal]
```

工程 (Engineering)

Eng1 — RC 电路充放电

学到什么：电路时间常数演示。

```interact
slider r 100 10000 1000 100
slider c 0.000001 0.001 0.0001 0.000001
slider v 1 12 5 0.5
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 1, "step": 0.005, "as": "t"}},
  "transform": [
    {"calculate": "{v} * (1 - exp(-datum.t / ({r} * {c})))", "as": "vc"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "t", "type": "quantitative", "title": "时间 (秒)"},
    "y": {"field": "vc", "type": "quantitative", "title": "电容电压 (V)"}
  }
}
```

Eng2 — PID 控制响应

学到什么：复杂数值演示。

```interact
slider kp 0 5 1 0.1
slider ki 0 2 0.5 0.1
slider setpoint 0 10 5 0.5
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 5, "step": 0.05, "as": "t"}},
  "transform": [
    {"calculate": "{setpoint} * (1 - exp(-{kp} * datum.t) * cos({ki}*datum.t))", "as": "y"}
  ],
  "mark": "line",
  "encoding": {"x": {"field": "t"}, "y": {"field": "y", "type": "quantitative"}}
}
```

数据 (Data)

D1 — 移动平均

学到什么：raw 数据 + 计算后曲线对比。

```interact
slider window 1 20 5 1
template vega-lite:
{
  "data": {"values": [
    {"t": 1, "v": 5}, {"t": 2, "v": 7}, {"t": 3, "v": 6}, {"t": 4, "v": 9}, {"t": 5, "v": 11},
    {"t": 6, "v": 8}, {"t": 7, "v": 13}, {"t": 8, "v": 15}, {"t": 9, "v": 12}, {"t": 10, "v": 17}
  ]},
  "transform": [
    {"window": [{"op": "mean", "field": "v", "as": "ma"}], "frame": [-{window}, 0]}
  ],
  "layer": [
    {"mark": "line", "encoding": {"x": {"field": "t"}, "y": {"field": "v", "type": "quantitative"}, "color": {"value": "lightgray"}}},
    {"mark": "line", "encoding": {"x": {"field": "t"}, "y": {"field": "ma", "type": "quantitative"}, "color": {"value": "red"}}}
  ]
}
```

D2 — 蒙特卡洛 π 估算

学到什么：vega-lite 的 sequence + random 模式。

```interact
slider n 10 1000 100 10
template vega-lite:
{
  "width": 300,
  "height": 300,
  "data": {"sequence": {"start": 0, "stop": {n}, "as": "i"}},
  "transform": [
    {"calculate": "random()", "as": "x"},
    {"calculate": "random()", "as": "y"},
    {"calculate": "datum.x*datum.x + datum.y*datum.y < 1 ? 'in' : 'out'", "as": "inside"}
  ],
  "mark": "circle",
  "encoding": {
    "x": {"field": "x", "scale": {"domain": [0, 1]}},
    "y": {"field": "y", "scale": {"domain": [0, 1]}},
    "color": {"field": "inside"}
  }
}
```

UI 模板 (UI patterns)

U1 — 多语言代码 tabs

学到什么：tabs + 代码块 nested。

```tabs
:::tab title=JavaScript
\```js
fetch('/api/users').then(r => r.json())
\```
:::

:::tab title=Python
\```py
import requests; requests.get('/api/users').json()
\```
:::

:::tab title=Go
\```go
http.Get("/api/users")
\```
:::
```

U2 — 安装步骤 stepper

学到什么：stepper + nested 代码块。

```stepper
:::step title="第 1 步"
\```bash
npm install foo
\```
:::

:::step title="第 2 步"
\```js
import foo from 'foo';
foo.init();
\```
:::

:::step title="第 3 步"
\```bash
npm run dev
\```
:::
```

U3 — Roadmap timeline

学到什么：timeline + emoji 状态编码 + accent 色。

```timeline
:::event date="2026 Q1" title="✅ v0.3" accent=green
基础 12 项 capability 完成
:::

:::event date="2026 Q2" title="✅ v0.6" accent=green
+computed / timer / svg = 15 capability
:::

:::event date="2026 Q3" title="🔨 cloud MVP" accent=yellow
share link + OG preview 4-8 周
:::

:::event date="2026 Q4" title="🔮 Rho AI" accent=blue
LLM 直接生成 Rho format
:::
```

U4 — 方案对比 layout

学到什么：layout grid + 嵌套 callout。

```layout grid cols=3
:::card accent=gray
**Free**
$0/月

> [!INFO]
> 个人 / 试用
:::

:::card accent=blue
**Pro**
$10/月

> [!TIP]
> 专业用户首选
:::

:::card accent=purple
**Team**
$50/月

> [!IMPORTANT]
> 企业 / SSO
:::
```