Watermark
在内容表面添加来源或安全标识。中文惯用名：水印。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.watermark |
| 名称 | Watermark |
| 二级分类 | 反馈（feedback） |
| 用途 | 在内容表面添加来源或安全标识 |
| 描述 | 中文惯用名：水印。 |
预览
静态结构：根节点 relative 容器（data-slot="watermark"）包裹 children；content 非空时叠加绝对定位层（data-slot="watermark-layer"，absolute inset-0 z-10、pointer-events-none），其 backgroundImage 为内联 SVG data-uri（14px 黑字、按 rotate 旋转、按 gap 计算平铺单元尺寸，background-repeat: repeat 平铺），文本经 XML 转义；多行 content 纵向排列。content 为空（未给或空串）时不渲染水印层。
DSL 结构
{
"type": "Watermark",
"props": {
"content": "Pactor 内部资料",
"rotate": -22,
"gap": [
100,
100
],
"opacity": 0.15
},
"children": [
{
"type": "Text",
"props": {
"text": "被覆盖的正文内容"
}
}
]
}何时用
何时使用
- 在内容表面添加来源或安全标识：截图溯源（用户名 / 工号）、密级标识（「内部资料」）、预览防盗用。
- 覆盖区域内有可交互内容，水印不能影响点击与选择。
- 多行标识：数组形式纵向排列多行文本（如姓名 + 日期）。
何时不用
- 单纯的品牌露出或装饰：使用 Logo / Typography，水印语义是来源与安全标识。
- 需要真正防止内容外发的场景：水印仅作视觉提示与事后溯源，不构成访问控制，敏感内容仍需权限与脱敏。
- 打印级精确水印：SVG data-uri 平铺为背景，打印表现受浏览器背景打印设置影响。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单行水印 | 单行文本按 -22° 旋转平铺 | 用户名 / 密级等单一标识 |
| 多行水印 | 字符串数组纵向排列后整体旋转平铺 | 姓名 + 日期等复合溯源标识 |
| 自定义密度 / 透明度 | gap 调整平铺间距、opacity 调整深浅 | 密集小字防盗用，或浅淡标识不干扰阅读 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | `string | string[]` | — |
rotate | number | -22 | 旋转角度 |
gap | [number, number] | [100, 100] | 平铺间距 [水平, 垂直]（px），参与计算平铺单元尺寸 |
opacity | number | 0.15 | 文本透明度（0~1） |
children | ReactNode | — | 被覆盖内容（DSL 子树，经 Renderer children 机制渲染） |
className | string | — | 通用：根节点 class（与内置样式合并） |
style | CSSProperties | — | 通用：根节点内联样式 |
使用规范
- 水印层 pointer-events-none，完全不影响覆盖区内点击、选择与滚动——不要用它做交互拦截。
- 溯源水印内容绑定当前用户身份（姓名 / 工号 + 日期），确保截图可追溯到人。
- 透明度保持默认 0.15 左右：过深干扰阅读，过浅失去溯源威慑；密级标识可适当加深。
- 水印文本经 XML 转义后编码进 SVG data-uri，可安全包含特殊字符；但不展示不可信长文本（平铺无截断，过长会溢出单元）。
- 水印是视觉提示，不替代权限控制与数据脱敏：敏感数据本身仍需按安全章节要求处理。
正例
- ✓ 敏感报表页外包 Watermark：content=[当前用户姓名, 当天日期]，截图可溯源。
- ✓ 「内部资料」密级标识：单行 content + 默认旋转平铺覆盖文档区。
- ✓ 预览防盗用：缩小 gap、提高密度覆盖整份预览稿。
反例
- ✕ 指望水印阻止数据外发（仅作提示与溯源，权限与脱敏仍需独立实现）。
- ✕ 用很深的 opacity 铺满正文区，正常阅读被干扰。
- ✕ 把长段不可信文本作为 content（平铺无截断，应使用短标识文本）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。