Mockup Phone 手机外框
MockupPhone 可以使用 Rue 基础的 compound 结构，同时补上一层更顺手的根级 API：可以直接声明display、size、color和camera，在快速搭示例 时不用每次都手写完整骨架。
何时使用
- 需要在设计页、营销页或功能介绍页展示移动端界面，而不想自己维护手机边框结构。
- 需要在“快速搭一个手机画面”和“完全自定义显示区 DOM”之间自由切换。
- 需要统一控制机身尺寸、边框主色、摄像头显隐和屏幕内容布局。
# 推荐写法
display 简写模式适合绝大多数展示型场景，根节点上就能把机身、摄像头和屏幕内容一次性声明完。
# iPhone mockup
展示 compound 写法，适合你想显式控制摄像头和显示区结构的时候。
# With color and wallpaper
基础壁纸示例 展示，同时说明 className 仍然是最高自由度的扩展入口。
# 尺寸与边框色
size 控制机身宽度，color 负责常用边框主题色；如果需要更细粒度样式，继续追加 className 即可。
# 屏幕内容布局
display.contentClassName 适合把文案、状态块和浮层叠加到壁纸或纯色背景之上。
# 摄像头控制
camera 默认开启；当画面更偏卡片展示时可以关闭，或者通过对象写法补充类名和属性。
# 场景组合
当手机只是内容容器时，可以把它当成页面模块来组合；推荐把复杂 UI 放进 display.children。
API
MockupPhone 现在支持“根级简写模式”和“组合 compound 模式”两套写法。
MockupPhone
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
className | 追加到手机外框根节点，适合细调边框、阴影、定位等样式 | string | - |
size | 机身宽度预设，提供 xs 到 xl 以及 small / middle / large 别名 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'middle' | 'medium' | 'large' | - |
color | 边框主色快捷语义，映射到 border-* 类名 | 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'default' |
camera | 仅在 display 简写模式下生效；可关闭摄像头，或透传 className / attrs 给摄像头节点 | boolean | MockupPhoneCameraConfig | true |
display | 根级简写模式：直接声明屏幕内容、壁纸、覆盖层与显示区类名 | MockupPhoneDisplayConfig | - |
children | 组合 compound 模式内容，通常与 MockupPhone.Camera / Display 搭配使用 | any | - |
Compound Parts
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
MockupPhone.Camera | 摄像头部件，展示基础结构，可自定义 className 和 attrs | FC<MockupPhonePartProps> | - |
MockupPhone.Display | 显示区部件，适合完全自定义屏幕内部 DOM 结构 | FC<MockupPhonePartProps> | - |
display 对象结构
className：显示区根节点类名src/alt/imgClassName：内置壁纸图children：显示区内容contentClassName：为 children 额外包一层容器，便于做绝对定位和覆盖层FAQ
什么时候用 display，什么时候可以写 MockupPhone.Display？
如果只是想快速搭一个手机画面，优先用display。如果你需要自己决定显示区里的完整节点树，或者已经在复用基础示例，可以用MockupPhone.Camera和MockupPhone.Display会更直观。
color 和 className 应该怎么选？
color负责常用边框主题色，适合快速选主色；className 负责更细的样式控制，比如任意十六进制边框色、自定义阴影或缩放。
如何在壁纸上叠加浮层内容？
让display.className具备relative和 overflow-hidden，再把浮层内容放进children，通过contentClassName设置 absolute inset-0即可。