Watch
watch用智能手表外壳包住紧凑内容做展示
用法
基础用法
用 children 填充表盘内容，默认为 Series 45mm 机型。
10:09瑚琏
tsx
<Watch model="series-45">
<div className="flex h-full w-full flex-col items-center justify-center">
<span className="text-base font-semibold">10:09</span>
<span className="text-[10px] text-muted-foreground">瑚琏</span>
</div>
</Watch>预设机型
model 决定表壳尺寸：Ultra 49mm 最大、Series 41mm 最小。
10:09瑚琏
10:09瑚琏
10:09瑚琏
tsx
<>
<Watch model="ultra-49"><Face /></Watch>
<Watch model="series-45"><Face /></Watch>
<Watch model="series-41"><Face /></Watch>
</>自定义宽度
width 显式传入时优先于 model 预设，可精确控制表壳大小。
10:09瑚琏
tsx
<Watch width={140}>
<Face />
</Watch>图片表盘
imageSrc 优先于 children，整张图按 cover 铺满表盘。
图片表盘
tsx
<Watch model="series-45" imageSrc="/face.png" />何时用
需要把表盘内容（截图或自渲染 UI）放进 Apple Watch 风格的设备外壳里展示时用。配套 iPhone / Tablet 等设备框：手机/平板用对应组件，手表场景用本组件。
导入
ts
import { Watch, WATCH_MODELS } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
model | "ultra-49" | "series-45" | "se-44" | "series-41" | "se-44"（无 width 且无 model 时按 184px） | 预设机型，决定默认表壳宽度 |
width | number | model 预设宽度，否则 184 | 表壳宽度 px；显式传入时优先于 model |
imageSrc | string | - | 表盘内容图片地址，优先于 children |
继承ComponentPropsWithoutRef<"div">（className、style 等可透传）。WATCH_MODELS导出各机型对应的表壳宽度映射（ultra-49→210、series-45→190、se-44→184、series-41→172）。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
children | ReactNode | 表盘内容（imageSrc 未传时渲染） |
禁忌 / 坑
- 机身高度由内屏比例 + 边框反推，不写死 `aspectRatio`。边框是固定 px 而内屏随宽度缩放，所以机身比例并不是常数——同一台设备画成 280px 宽和 360px 宽，机身比例不一样。写死一个比例必然在某些宽度下让内屏比例偏掉，PreviewSandbox 的
fit缩放就会在短边留一圈白（#117）。内屏逻辑分辨率与边框宽度的真源是lib/device-metrics，单测锁住「内屏比例恒等于screen比例」这层关系。
暂无已知坑。设备外壳为纯展示组件（RSC 可用），imageSrc 与 children 同时存在时 imageSrc 胜出。
相关
Playground
10:09瑚琏
<Watch model="series-45">
<img src="/face.png" />
</Watch>