iPhone
iphone用带灵动岛的手机外壳把内容包成展示图
用法
基础用法
含灵动岛的 iPhone 外壳包裹屏幕内容，默认机型 15 Pro。
瑚琏 App屏幕内容
tsx
<IPhone>
<img src="/app.png" alt="" />
</IPhone>选择机型
model 切换预设机型，决定默认宽度。
瑚琏 App屏幕内容
tsx
<IPhone model="16-pro-max">
<img src="/app.png" alt="" />
</IPhone>自定义宽度
width 显式传入时优先于机型预设宽度。
瑚琏 App屏幕内容
tsx
<IPhone width={220}>
<img src="/app.png" alt="" />
</IPhone>图片内容
传 imageSrc 直接渲染 App 截图（优先于 children）。
瑚琏 App屏幕内容
tsx
<IPhone model="15-pro" imageSrc="/app.png" />何时用
把 App 截图 / 移动端页面包进 iPhone 机身（灵动岛）框做展示，落地页、AppStore 配图常用。要安卓打孔屏机身用 Android，要平板用 Tablet，要浏览器窗口框用 Safari/Chrome。
导入
ts
import { IPhone, IPHONE_MODELS } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">。IPHONE_MODELS 导出机型→宽度映射常量。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| model | "16-pro-max" | "16-pro" | "16-plus" | "16" | "15-pro" | "13-mini" | "15-pro"(showcase) | 预设机型，决定默认宽度。 |
| width | number | model 预设，无 model 则 280 | 设备宽度(px)，显式传入时优先于 model。 |
| imageSrc | string | - | 屏幕内容图片地址，优先于 children。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 屏幕内容自定义节点。 |
禁忌 / 坑
- 机身高度由内屏比例 + 边框反推，不写死 `aspectRatio`。边框是固定 px 而内屏随宽度缩放，所以机身比例并不是常数——同一台设备画成 280px 宽和 360px 宽，机身比例不一样。写死一个比例必然在某些宽度下让内屏比例偏掉，PreviewSandbox 的
fit缩放就会在短边留一圈白（#117）。内屏逻辑分辨率与边框宽度的真源是lib/device-metrics，单测锁住「内屏比例恒等于screen比例」这层关系。
model/width只改机身宽度；高度随之按内屏比例推导，所以纵横比会随宽度略有变化（这是正确的——边框不缩放）。想要别的比例需自行外层裁切。imageSrc与children同传时imageSrc优先。
相关
Playground
瑚琏 App屏幕内容
<IPhone model="15-pro">
<img src="/app.png" />
</IPhone>