Safari
safari用 Safari 风格的浏览器窗口包住截图
用法
基础用法
用 Safari 外壳包裹任意内容（网页截图、组件预览等）。
hulian.design
你的网页截图放这里
tsx
<Safari url="hulian.design" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Safari>自定义地址栏
通过 url 设置地址栏文本。
app.hulian.design/dashboard
你的网页截图放这里
tsx
<Safari url="app.hulian.design/dashboard" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Safari>图片截图
传 imageSrc 直接渲染网页截图（优先于 children）。
hulian.design
你的网页截图放这里
tsx
<Safari url="hulian.design" imageSrc="/screenshot.png" style={{ width: 375 }} />何时用
把网页截图 / live 内容包进一个 macOS Safari 风格的窗口框，用于落地页展示、文档配图。它只有红绿灯+地址栏的极简顶栏；要带标签页 + 前进/后退/刷新工具栏用 Chrome，要命令行风格用 Terminal，要手机/平板机身用 iPhone/Tablet。
导入
ts
import { Safari } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">（className、style 等照常透传，常用 style={{ width }} 控宽）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| url | string | "hulian.design" | 地址栏文本。 |
| imageSrc | string | - | 内容区图片地址，优先于 children。 |
| headerExtra | ReactNode | - | 顶栏右端的工具入口（分享/下载这类）。不传时该格是让地址胶囊居中的 w-12 占位，尺寸逐字节不变；传了就让出该格，宽度下限锁在占位宽。见下方「活内容」 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 内容区自定义节点（imageSrc 未传时渲染）。 |
禁忌 / 坑
- 纯展示外壳，不带宽度默认值，需自行用
style={{ width }}或 className 控制尺寸，否则塌缩到内容宽。 imageSrc与children同传时imageSrc优先，children 被忽略。
活内容（不只服务截图）
壳的内容区在高度链上：根是列向 flex，内容区 min-h-0 flex-1。所以「壳撑满父容器、内容吃掉顶栏之外的剩余高度」只要在根上给高度即可 —— 内嵌真实网页、原生视图（Electron 的 WebContentsView）、可滚动面板都靠这条：
tsx
<div style={{ height: 500 }}>
<Safari url="zwfw.example.gov.cn" className="h-full" headerExtra={<DownloadButton />}>
<div ref={viewportRef} className="h-full" /> {/* 量几何喂给主进程 setBounds */}
</Safari>
</div>截图场景不受影响：auto 高度的列向 flex 容器仍按内容定高（min-h-0 也不会让它塌成 0，这点已在 Chromium 实测排除）。
顶栏右端那格默认是块 w-12 空占位，作用是让地址胶囊相对红绿灯居中对称。headerExtra 传了就把它让出来，宽度下限仍锁在占位宽：内容窄于它时对称性完全保持，宽于它时该格随内容生长 —— 宁可胶囊偏一点，也不裁掉按钮。
相关
Playground
hulian.design
你的网页截图放这里
<Safari url="hulian.design">
<img src="/screenshot.png" />
</Safari>