@wecode-team/watermark

We0 页面水印组件，支持自定义文字内容、重复平铺、旋转、透明度、字号、颜色和间距配置，适用于后台管理、预览页、演示页等场景。

安装

npm install @wecode-team/watermark
# 或
pnpm add @wecode-team/watermark
# 或
yarn add @wecode-team/watermark

需要 React >= 18 作为 peerDependency。

快速开始

import { We0Watermark } from "@wecode-team/watermark"

export default function Page() {
  return (
    <We0Watermark content="WE0 INTERNAL">
      <main style={{ minHeight: 400, padding: 24 }}>
        页面内容
      </main>
    </We0Watermark>
  )
}

多行内容

<We0Watermark
  content={["WE0", "Confidential"]}
  rotate={-18}
  opacity={0.1}
>
  <section>敏感内容区域</section>
</We0Watermark>

自定义样式

<We0Watermark
  content="Demo Preview"
  fontSize={18}
  color="#1f2937"
  opacity={0.12}
  gapX={120}
  gapY={96}
  width={200}
  height={120}
  zIndex={2}
>
  <div>页面内容</div>
</We0Watermark>

API

<We0Watermark />

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | string \| string[] | - | 水印内容，支持单行或多行 | | width | number | 160 | 单个水印绘制区域宽度 | | height | number | 96 | 单个水印绘制区域高度 | | gapX | number | 80 | 水印横向间距 | | gapY | number | 80 | 水印纵向间距 | | rotate | number | -22 | 水印旋转角度 | | opacity | number | 0.14 | 水印透明度 | | fontSize | number | 16 | 字号 | | lineHeight | number | 1.4 | 多行文字行高倍数 | | color | string | "#000000" | 水印颜色 | | fontFamily | string | "sans-serif" | 字体族 | | fontWeight | CSSProperties["fontWeight"] | 500 | 字重 | | zIndex | number | 1 | 水印层级 | | enabled | boolean | true | 是否启用水印 | | className | string | - | 外层容器类名 | | style | CSSProperties | - | 外层容器样式 | | children | ReactNode | - | 被包裹的页面内容 |

说明

• 水印层默认 pointer-events: none，不会阻挡页面交互
• 组件通过 Canvas 生成背景图并重复平铺
• 在 SSR 场景下会先渲染内容，客户端挂载后补上水印背景
• React DevTools 中的组件展示名称为 We0-Watermark

License

MIT