@wecode-team/watermark 0.0.1

package/README.md

@@ -0,0 +1,96 @@
+# @wecode-team/watermark
+
+We0 页面水印组件，支持自定义文字内容、重复平铺、旋转、透明度、字号、颜色和间距配置，适用于后台管理、预览页、演示页等场景。
+
+## 安装
+
+```bash
+npm install @wecode-team/watermark
+# 或
+pnpm add @wecode-team/watermark
+# 或
+yarn add @wecode-team/watermark
+```
+
+> 需要 React >= 18 作为 peerDependency。
+
+## 快速开始
+
+```tsx
+import { We0Watermark } from "@wecode-team/watermark"
+
+export default function Page() {
+  return (
+    <We0Watermark content="WE0 INTERNAL">
+      <main style={{ minHeight: 400, padding: 24 }}>
+        页面内容
+      </main>
+    </We0Watermark>
+  )
+}
+```
+
+## 多行内容
+
+```tsx
+<We0Watermark
+  content={["WE0", "Confidential"]}
+  rotate={-18}
+  opacity={0.1}
+>
+  <section>敏感内容区域</section>
+</We0Watermark>
+```
+
+## 自定义样式
+
+```tsx
+<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

package/dist/index.cjs

@@ -0,0 +1,164 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  We0Watermark: () => We0Watermark
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Watermark.tsx
+var import_react = require("react");
+
+// src/utils.ts
+var DEFAULT_OPTIONS = {
+  width: 160,
+  height: 96,
+  gapX: 80,
+  gapY: 80,
+  rotate: -22,
+  opacity: 0.14,
+  fontSize: 16,
+  lineHeight: 1.4,
+  color: "#000000",
+  fontFamily: "sans-serif",
+  fontWeight: 500,
+  zIndex: 1,
+  enabled: true
+};
+function resolveWatermarkOptions(props) {
+  const lines = (Array.isArray(props.content) ? props.content : [props.content]).map((line) => `${line}`.trim()).filter(Boolean);
+  return {
+    content: lines,
+    width: props.width ?? DEFAULT_OPTIONS.width,
+    height: props.height ?? DEFAULT_OPTIONS.height,
+    gapX: props.gapX ?? DEFAULT_OPTIONS.gapX,
+    gapY: props.gapY ?? DEFAULT_OPTIONS.gapY,
+    rotate: props.rotate ?? DEFAULT_OPTIONS.rotate,
+    opacity: props.opacity ?? DEFAULT_OPTIONS.opacity,
+    fontSize: props.fontSize ?? DEFAULT_OPTIONS.fontSize,
+    lineHeight: props.lineHeight ?? DEFAULT_OPTIONS.lineHeight,
+    color: props.color ?? DEFAULT_OPTIONS.color,
+    fontFamily: props.fontFamily ?? DEFAULT_OPTIONS.fontFamily,
+    fontWeight: props.fontWeight ?? DEFAULT_OPTIONS.fontWeight,
+    zIndex: props.zIndex ?? DEFAULT_OPTIONS.zIndex,
+    enabled: props.enabled ?? DEFAULT_OPTIONS.enabled
+  };
+}
+function buildFontStyle(fontSize, fontFamily, fontWeight) {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+function createWatermarkDataUrl(options) {
+  if (typeof document === "undefined") {
+    return "";
+  }
+  const tileWidth = options.width + options.gapX;
+  const tileHeight = options.height + options.gapY;
+  const canvas = document.createElement("canvas");
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = tileWidth * dpr;
+  canvas.height = tileHeight * dpr;
+  canvas.style.width = `${tileWidth}px`;
+  canvas.style.height = `${tileHeight}px`;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.scale(dpr, dpr);
+  ctx.clearRect(0, 0, tileWidth, tileHeight);
+  ctx.globalAlpha = options.opacity;
+  ctx.fillStyle = options.color;
+  ctx.font = buildFontStyle(
+    options.fontSize,
+    options.fontFamily,
+    options.fontWeight
+  );
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.translate(tileWidth / 2, tileHeight / 2);
+  ctx.rotate(options.rotate * Math.PI / 180);
+  const totalTextHeight = options.content.length * options.fontSize * options.lineHeight;
+  const startY = -totalTextHeight / 2 + options.fontSize * options.lineHeight / 2;
+  options.content.forEach((line, index) => {
+    const y = startY + index * options.fontSize * options.lineHeight;
+    ctx.fillText(line, 0, y);
+  });
+  return canvas.toDataURL();
+}
+
+// src/components/Watermark.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function We0Watermark(props) {
+  const {
+    className,
+    style,
+    children
+  } = props;
+  const options = resolveWatermarkOptions(props);
+  const contentKey = options.content.join("\n");
+  const [dataUrl, setDataUrl] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (!options.enabled || options.content.length === 0) {
+      setDataUrl("");
+      return;
+    }
+    setDataUrl(createWatermarkDataUrl(options));
+  }, [
+    options.color,
+    contentKey,
+    options.enabled,
+    options.fontFamily,
+    options.fontSize,
+    options.fontWeight,
+    options.gapX,
+    options.gapY,
+    options.height,
+    options.lineHeight,
+    options.opacity,
+    options.rotate,
+    options.width
+  ]);
+  const overlayStyle = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: options.zIndex,
+    backgroundImage: dataUrl ? `url("${dataUrl}")` : void 0,
+    backgroundRepeat: "repeat",
+    backgroundSize: `${options.width + options.gapX}px ${options.height + options.gapY}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        ...style
+      },
+      children: [
+        children,
+        options.enabled && options.content.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: overlayStyle }) : null
+      ]
+    }
+  );
+}
+We0Watermark.displayName = "We0-Watermark";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  We0Watermark
+});

package/dist/index.d.cts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode } from 'react';
+
+/** 页面水印组件属性 */
+interface WatermarkProps {
+    /** 水印文本，支持单行或多行 */
+    content: string | string[];
+    /** 单个水印绘制区域宽度，默认 160 */
+    width?: number;
+    /** 单个水印绘制区域高度，默认 96 */
+    height?: number;
+    /** 水印之间的横向间距，默认 80 */
+    gapX?: number;
+    /** 水印之间的纵向间距，默认 80 */
+    gapY?: number;
+    /** 水印旋转角度，默认 -22 */
+    rotate?: number;
+    /** 水印透明度，默认 0.14 */
+    opacity?: number;
+    /** 字号，默认 16 */
+    fontSize?: number;
+    /** 行高倍数，默认 1.4 */
+    lineHeight?: number;
+    /** 字体颜色，默认 "#000000" */
+    color?: string;
+    /** 字体族，默认 "sans-serif" */
+    fontFamily?: string;
+    /** 字重，默认 500 */
+    fontWeight?: CSSProperties["fontWeight"];
+    /** 水印层级，默认 1 */
+    zIndex?: number;
+    /** 是否启用水印，默认 true */
+    enabled?: boolean;
+    /** 外层容器 className */
+    className?: string;
+    /** 外层容器样式 */
+    style?: CSSProperties;
+    /** 子节点内容 */
+    children?: ReactNode;
+}
+
+/**
+ * 页面水印组件
+ *
+ * @example
+ * ```tsx
+ * <We0Watermark content="WE0 INTERNAL">
+ *   <main>页面内容</main>
+ * </We0Watermark>
+ * ```
+ */
+declare function We0Watermark(props: WatermarkProps): react_jsx_runtime.JSX.Element;
+declare namespace We0Watermark {
+    var displayName: string;
+}
+
+export { type WatermarkProps, We0Watermark };

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode } from 'react';
+
+/** 页面水印组件属性 */
+interface WatermarkProps {
+    /** 水印文本，支持单行或多行 */
+    content: string | string[];
+    /** 单个水印绘制区域宽度，默认 160 */
+    width?: number;
+    /** 单个水印绘制区域高度，默认 96 */
+    height?: number;
+    /** 水印之间的横向间距，默认 80 */
+    gapX?: number;
+    /** 水印之间的纵向间距，默认 80 */
+    gapY?: number;
+    /** 水印旋转角度，默认 -22 */
+    rotate?: number;
+    /** 水印透明度，默认 0.14 */
+    opacity?: number;
+    /** 字号，默认 16 */
+    fontSize?: number;
+    /** 行高倍数，默认 1.4 */
+    lineHeight?: number;
+    /** 字体颜色，默认 "#000000" */
+    color?: string;
+    /** 字体族，默认 "sans-serif" */
+    fontFamily?: string;
+    /** 字重，默认 500 */
+    fontWeight?: CSSProperties["fontWeight"];
+    /** 水印层级，默认 1 */
+    zIndex?: number;
+    /** 是否启用水印，默认 true */
+    enabled?: boolean;
+    /** 外层容器 className */
+    className?: string;
+    /** 外层容器样式 */
+    style?: CSSProperties;
+    /** 子节点内容 */
+    children?: ReactNode;
+}
+
+/**
+ * 页面水印组件
+ *
+ * @example
+ * ```tsx
+ * <We0Watermark content="WE0 INTERNAL">
+ *   <main>页面内容</main>
+ * </We0Watermark>
+ * ```
+ */
+declare function We0Watermark(props: WatermarkProps): react_jsx_runtime.JSX.Element;
+declare namespace We0Watermark {
+    var displayName: string;
+}
+
+export { type WatermarkProps, We0Watermark };

package/dist/index.js

@@ -0,0 +1,137 @@
+// src/components/Watermark.tsx
+import { useEffect, useState } from "react";
+
+// src/utils.ts
+var DEFAULT_OPTIONS = {
+  width: 160,
+  height: 96,
+  gapX: 80,
+  gapY: 80,
+  rotate: -22,
+  opacity: 0.14,
+  fontSize: 16,
+  lineHeight: 1.4,
+  color: "#000000",
+  fontFamily: "sans-serif",
+  fontWeight: 500,
+  zIndex: 1,
+  enabled: true
+};
+function resolveWatermarkOptions(props) {
+  const lines = (Array.isArray(props.content) ? props.content : [props.content]).map((line) => `${line}`.trim()).filter(Boolean);
+  return {
+    content: lines,
+    width: props.width ?? DEFAULT_OPTIONS.width,
+    height: props.height ?? DEFAULT_OPTIONS.height,
+    gapX: props.gapX ?? DEFAULT_OPTIONS.gapX,
+    gapY: props.gapY ?? DEFAULT_OPTIONS.gapY,
+    rotate: props.rotate ?? DEFAULT_OPTIONS.rotate,
+    opacity: props.opacity ?? DEFAULT_OPTIONS.opacity,
+    fontSize: props.fontSize ?? DEFAULT_OPTIONS.fontSize,
+    lineHeight: props.lineHeight ?? DEFAULT_OPTIONS.lineHeight,
+    color: props.color ?? DEFAULT_OPTIONS.color,
+    fontFamily: props.fontFamily ?? DEFAULT_OPTIONS.fontFamily,
+    fontWeight: props.fontWeight ?? DEFAULT_OPTIONS.fontWeight,
+    zIndex: props.zIndex ?? DEFAULT_OPTIONS.zIndex,
+    enabled: props.enabled ?? DEFAULT_OPTIONS.enabled
+  };
+}
+function buildFontStyle(fontSize, fontFamily, fontWeight) {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+function createWatermarkDataUrl(options) {
+  if (typeof document === "undefined") {
+    return "";
+  }
+  const tileWidth = options.width + options.gapX;
+  const tileHeight = options.height + options.gapY;
+  const canvas = document.createElement("canvas");
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = tileWidth * dpr;
+  canvas.height = tileHeight * dpr;
+  canvas.style.width = `${tileWidth}px`;
+  canvas.style.height = `${tileHeight}px`;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.scale(dpr, dpr);
+  ctx.clearRect(0, 0, tileWidth, tileHeight);
+  ctx.globalAlpha = options.opacity;
+  ctx.fillStyle = options.color;
+  ctx.font = buildFontStyle(
+    options.fontSize,
+    options.fontFamily,
+    options.fontWeight
+  );
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.translate(tileWidth / 2, tileHeight / 2);
+  ctx.rotate(options.rotate * Math.PI / 180);
+  const totalTextHeight = options.content.length * options.fontSize * options.lineHeight;
+  const startY = -totalTextHeight / 2 + options.fontSize * options.lineHeight / 2;
+  options.content.forEach((line, index) => {
+    const y = startY + index * options.fontSize * options.lineHeight;
+    ctx.fillText(line, 0, y);
+  });
+  return canvas.toDataURL();
+}
+
+// src/components/Watermark.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function We0Watermark(props) {
+  const {
+    className,
+    style,
+    children
+  } = props;
+  const options = resolveWatermarkOptions(props);
+  const contentKey = options.content.join("\n");
+  const [dataUrl, setDataUrl] = useState("");
+  useEffect(() => {
+    if (!options.enabled || options.content.length === 0) {
+      setDataUrl("");
+      return;
+    }
+    setDataUrl(createWatermarkDataUrl(options));
+  }, [
+    options.color,
+    contentKey,
+    options.enabled,
+    options.fontFamily,
+    options.fontSize,
+    options.fontWeight,
+    options.gapX,
+    options.gapY,
+    options.height,
+    options.lineHeight,
+    options.opacity,
+    options.rotate,
+    options.width
+  ]);
+  const overlayStyle = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: options.zIndex,
+    backgroundImage: dataUrl ? `url("${dataUrl}")` : void 0,
+    backgroundRepeat: "repeat",
+    backgroundSize: `${options.width + options.gapX}px ${options.height + options.gapY}px`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        ...style
+      },
+      children: [
+        children,
+        options.enabled && options.content.length > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: overlayStyle }) : null
+      ]
+    }
+  );
+}
+We0Watermark.displayName = "We0-Watermark";
+export {
+  We0Watermark
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@wecode-team/watermark",
+  "version": "0.0.1",
+  "description": "We0 页面水印组件 —— 支持自定义文字内容、重复平铺和样式配置",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.2"
+  },
+  "keywords": [
+    "watermark",
+    "overlay",
+    "react",
+    "text-watermark",
+    "we0"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/we0-org/we0-sdk.git",
+    "directory": "packages/watermark"
+  },
+  "homepage": "https://github.com/we0-org/we0-sdk/tree/main/packages/watermark#readme",
+  "bugs": {
+    "url": "https://github.com/we0-org/we0-sdk/issues"
+  }
+}