Watermark 水印
Rue 的 Watermark 不照搬其他组件库的视觉，而是把能力落成更适合当前设计站点的轻量覆盖层。 你可以直接给任意容器加文字或图片水印，同时保持按钮、卡片、统计区这些内容本身的交互。
何时使用
- 需要给卡片、报表、详情页加上“内部预览”“草稿”“仅限共享”等视觉标记。
- 需要图片或文字水印覆盖在任意内容上，但又不希望阻断按钮、链接和表单的交互。
- 需要局部容器继承上层水印图案，而不是为每一块内容重复写一遍配置。
# Basic text watermark
最直接的用法：给一个内容容器加上文本水印，按钮仍然可以正常点击。
Internal Preview
协作面板正在生成新一轮可共享快照
水印覆盖层默认在视觉上方，但采用 pointer-events none，不会挡住卡片、按钮和其它交互控件。
共享链接
1.8k
过去 24 小时
导出快照
312
包含 38 个外部成员
访问终端
57
待二次确认设备 5 台
# Multiline typography and tuned spacing
支持多行内容、字族和铺设参数调优，更适合仪表盘、稿件和审批流页面。
Draft
产品评审结论
用多行水印把容器语义说清楚，而不是只放一个模糊 logo。
Access Scope
仅限设计与法务同步窗口
通过 width、height、gap 和 font 组合，可以让文字块更像“签章”而不是背景噪音。
# Image watermark
图片模式适合品牌 logo、部门印记或业务章；Rue 这边建议把它用在局部容器，而不是整页满屏。
Media Kit
品牌资产导出包
图片水印不会吞掉原内容的层级信息，更适合 logo、组织印章和明确的来源标识。
Delivery
5 Files
SVG / PDF / PNG / dark / light
# Inherited local scope
父级配置一次，子级局部容器可以继续复用；不想继承时再显式关掉。
继承父级水印
这个局部容器没有重新写 content 和 image，会直接复用外层图案与铺设参数。
关闭继承
当局部容器不需要上层水印时，直接把 inherit 设为 false 即可回到纯净内容区。
# Custom controls
把可调示例 落到 Rue 风格里，用 Range 的按帧更新快速调整排版参数。
Scenario Sandbox
参数调整后的实时预览
这里故意放了文字、徽标和按钮，方便观察水印对不同内容密度与层次关系的影响。
内容流
Rue Watermark 会把铺设逻辑限制在当前容器内部，圆角、阴影和内容布局都可以继续由宿主容器控制。
Preset
Rue Design
文本
Color override
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
content | 文字水印内容，支持字符串或多行数组。 | string | string[] | - |
image | 图片水印地址，适合 logo、签章、业务标记。 | string | - |
font | 文字水印的颜色、字号、字重、字体和对齐方式。 | { color?: string; fontSize?: number | string; fontWeight?: number | string; fontStyle?: string; fontFamily?: string; textAlign?: string } | { color: 自动按宿主背景明暗推导, fontSize: 16 } |
rotate | 单个水印块的旋转角度。 | number | -22 |
width / height | 单个水印内容块的尺寸；不传时文本会按内容估算。 | number | 文本自动测量 / 图片 120 x 64 |
gap | 水印块之间的水平与垂直间距。 | [number, number] | [100, 100] |
offset | 起始铺设偏移量，便于与卡片头部或图像对齐。 | [number, number] | [gapX / 2, gapY / 2] |
zIndex | 覆盖层层级，保持视觉上方但不阻断交互。 | number | 9 |
inherit | 是否让后代 Watermark 复用当前图案与铺设参数。 | boolean | true |
className / rootClassName | 根容器类名，便于直接叠加 Rue 的布局与视觉类。 | string | - |
overlayClassName / overlayStyle | 覆盖层类名和样式，适合与圆角、混合模式、局部调优配合。 | string / any | - |
style | 根容器行内样式；默认会自动补 position、overflow、isolation。 | any | - |