@teamix-evo/ui 0.1.1

package/src/components/watermark/watermark.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+export interface WatermarkProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * 水印文字(antd `content` 并集) — 单行字符串或多行字符串数组。
+   */
+  content?: string | string[];
+  /**
+   * 水印图片(antd `image` 并集) — 优先级高于 `content`。建议透明 PNG / SVG。
+   */
+  image?: string;
+  /**
+   * 单块水印宽度(px)。
+   * @default 120
+   */
+  width?: number;
+  /**
+   * 单块水印高度(px)。
+   * @default 64
+   */
+  height?: number;
+  /**
+   * 水印旋转角度(deg)。
+   * @default -22
+   */
+  rotate?: number;
+  /**
+   * 字体大小(px)。
+   * @default 14
+   */
+  fontSize?: number;
+  /**
+   * 字体颜色(支持 rgba 设置透明度)。
+   * @default "rgba(0,0,0,0.15)"
+   */
+  fontColor?: string;
+  /**
+   * 字体粗细。
+   * @default "normal"
+   */
+  fontWeight?: 'normal' | 'medium' | 'bold';
+  /**
+   * 水印块之间的水平间距(px)。
+   * @default 80
+   */
+  gapX?: number;
+  /**
+   * 水印块之间的垂直间距(px)。
+   * @default 80
+   */
+  gapY?: number;
+}
+
+function buildSvg(opts: {
+  content?: string | string[];
+  image?: string;
+  width: number;
+  height: number;
+  rotate: number;
+  fontSize: number;
+  fontColor: string;
+  fontWeight: 'normal' | 'medium' | 'bold';
+  gapX: number;
+  gapY: number;
+}): string {
+  const w = opts.width + opts.gapX;
+  const h = opts.height + opts.gapY;
+  const cx = w / 2;
+  const cy = h / 2;
+  const fontWeightValue =
+    opts.fontWeight === 'bold' ? 700 : opts.fontWeight === 'medium' ? 500 : 400;
+
+  let body = '';
+  if (opts.image) {
+    body = `<image href="${opts.image}" x="${cx - opts.width / 2}" y="${cy - opts.height / 2}" width="${opts.width}" height="${opts.height}" transform="rotate(${opts.rotate} ${cx} ${cy})" />`;
+  } else if (opts.content) {
+    const lines = Array.isArray(opts.content) ? opts.content : [opts.content];
+    const lineHeight = opts.fontSize * 1.4;
+    const totalH = lineHeight * (lines.length - 1);
+    body = `<g transform="rotate(${opts.rotate} ${cx} ${cy})" fill="${opts.fontColor}" font-size="${opts.fontSize}" font-weight="${fontWeightValue}" font-family="system-ui, sans-serif" text-anchor="middle">${lines
+      .map(
+        (line, i) =>
+          `<text x="${cx}" y="${cy - totalH / 2 + i * lineHeight}">${line
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')}</text>`,
+      )
+      .join('')}</g>`;
+  }
+
+  return `data:image/svg+xml;utf8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">${body}</svg>`,
+  )}`;
+}
+
+/**
+ * 水印 — antd 独有补足。**等价 antd `Watermark`**(v5.1+)。在容器内部生成
+ * 重复平铺的 SVG 水印(文字 / 图片),用于敏感页面 / 内部文档 / 演示场景。
+ *
+ * **安全声明**:Watermark 是**前端视觉效果**,可被开发者删除或绕过 — **不能**作为防截图 / 防盗用的真正保护,
+ * 真正合规需要服务端水印 + 数字签名等手段。
+ */
+const Watermark = React.forwardRef<HTMLDivElement, WatermarkProps>(
+  (
+    {
+      content,
+      image,
+      width = 120,
+      height = 64,
+      rotate = -22,
+      fontSize = 14,
+      fontColor = 'rgba(0,0,0,0.15)',
+      fontWeight = 'normal',
+      gapX = 80,
+      gapY = 80,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const dataUrl = React.useMemo(
+      () =>
+        buildSvg({
+          content,
+          image,
+          width,
+          height,
+          rotate,
+          fontSize,
+          fontColor,
+          fontWeight,
+          gapX,
+          gapY,
+        }),
+      [content, image, width, height, rotate, fontSize, fontColor, fontWeight, gapX, gapY],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn('relative isolate', className)}
+        {...props}
+      >
+        {children}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 select-none"
+          style={{
+            backgroundImage: `url("${dataUrl}")`,
+            backgroundRepeat: 'repeat',
+            ...style,
+          }}
+        />
+      </div>
+    );
+  },
+);
+Watermark.displayName = 'Watermark';
+
+export { Watermark };

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}