Watch
watch手表外壳 · Apple Watch 系 squircle 表壳+数码表冠(model 预设尺寸) + RSC
用法
基础用法
用 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">瑚琏</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 未传时渲染） |
禁忌 / 坑
暂无已知坑。设备外壳为纯展示组件（RSC 可用），imageSrc 与 children 同时存在时 imageSrc 胜出。
相关
Playground
10:09瑚琏
<Watch model="series-45">
<img src="/face.png" />
</Watch>