Update from Vibe Studio

node_modules/@ant-design/pro-layout/lib/components/WaterMark/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export type WaterMarkProps = {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 水印样式 */
+    markStyle?: React.CSSProperties;
+    /** 水印类名 */
+    markClassName?: string;
+    /** 水印之间的水平间距 */
+    gapX?: number;
+    /** 水印之间的垂直间距 */
+    gapY?: number;
+    /** 追加的水印元素的z-index */
+    zIndex?: number;
+    /** 水印的宽度 */
+    width?: number;
+    /** 水印的高度 */
+    height?: number;
+    /** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */
+    offsetTop?: number;
+    /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */
+    offsetLeft?: number;
+    /** 水印绘制时，旋转的角度，单位 ° */
+    rotate?: number;
+    /** ClassName 前缀 */
+    prefixCls?: string;
+    /** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */
+    image?: string;
+    /** 水印文字内容 */
+    content?: string | string[];
+    /** 文字颜色 */
+    fontColor?: string;
+    /** 文字样式 */
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    /** 文字族 */
+    fontFamily?: string;
+    /** 文字粗细 */
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    /** 文字大小 */
+    fontSize?: number | string;
+    children?: React.ReactNode;
+};
+export declare const WaterMark: React.FC<WaterMarkProps>;

node_modules/@ant-design/pro-layout/lib/components/WaterMark/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WaterMark = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _proProvider = require("@ant-design/pro-provider");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
+ *
+ * @param context
+ * @see api 有些废弃了，其实类型 CanvasRenderingContext2D
+ */
+var getPixelRatio = function getPixelRatio(context) {
+  if (!context) {
+    return 1;
+  }
+  var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || 1;
+  return (window.devicePixelRatio || 1) / backingStore;
+};
+var WaterMark = exports.WaterMark = function WaterMark(props) {
+  var _useToken = (0, _proProvider.useToken)(),
+    token = _useToken.token;
+  var children = props.children,
+    style = props.style,
+    className = props.className,
+    markStyle = props.markStyle,
+    markClassName = props.markClassName,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
+    _props$gapX = props.gapX,
+    gapX = _props$gapX === void 0 ? 212 : _props$gapX,
+    _props$gapY = props.gapY,
+    gapY = _props$gapY === void 0 ? 222 : _props$gapY,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 120 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 64 : _props$height,
+    _props$rotate = props.rotate,
+    rotate = _props$rotate === void 0 ? -22 : _props$rotate,
+    image = props.image,
+    offsetLeft = props.offsetLeft,
+    outOffsetTop = props.offsetTop,
+    _props$fontStyle = props.fontStyle,
+    fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
+    _props$fontWeight = props.fontWeight,
+    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
+    _props$fontColor = props.fontColor,
+    fontColor = _props$fontColor === void 0 ? token.colorFill : _props$fontColor,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 16 : _props$fontSize,
+    _props$fontFamily = props.fontFamily,
+    fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
+    customizePrefixCls = props.prefixCls;
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('pro-layout-watermark', customizePrefixCls);
+  var wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), className);
+  var waterMarkCls = (0, _classnames.default)(prefixCls, markClassName);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    base64Url = _useState2[0],
+    setBase64Url = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    var ratio = getPixelRatio(ctx);
+    var canvasWidth = "".concat((gapX + width) * ratio, "px");
+    var canvasHeight = "".concat((gapY + height) * ratio, "px");
+    var canvasOffsetLeft = offsetLeft || gapX / 2;
+    var canvasOffsetTop = outOffsetTop || gapY / 2;
+    canvas.setAttribute('width', canvasWidth);
+    canvas.setAttribute('height', canvasHeight);
+    if (!ctx) {
+      // eslint-disable-next-line no-console
+      console.error('当前环境不支持Canvas');
+      return;
+    }
+
+    // 旋转字符 rotate
+    ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
+    ctx.rotate(Math.PI / 180 * Number(rotate));
+    var markWidth = width * ratio;
+    var markHeight = height * ratio;
+    var writeContent = function writeContent(contentText) {
+      var offsetTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var markSize = Number(fontSize) * ratio;
+      ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
+      ctx.fillStyle = fontColor;
+      if (Array.isArray(contentText)) {
+        contentText === null || contentText === void 0 || contentText.forEach(function (item, index) {
+          return ctx.fillText(item, 0, index * markSize + offsetTop);
+        });
+      } else {
+        ctx.fillText(contentText, 0, offsetTop ? offsetTop + markSize : 0);
+      }
+      setBase64Url(canvas.toDataURL());
+    };
+    if (image) {
+      var img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.referrerPolicy = 'no-referrer';
+      img.src = image;
+      img.onload = function () {
+        ctx.drawImage(img, 0, 0, markWidth, markHeight);
+        setBase64Url(canvas.toDataURL());
+        if (props.content) {
+          writeContent(props.content, img.height + 8);
+          return;
+        }
+      };
+      return;
+    }
+    if (props.content) {
+      writeContent(props.content);
+      return;
+    }
+  }, [gapX, gapY, offsetLeft, outOffsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, props.content, fontSize]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: (0, _objectSpread2.default)({
+      position: 'relative'
+    }, style),
+    className: wrapperCls,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: waterMarkCls,
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        zIndex: zIndex,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        backgroundSize: "".concat(gapX + width, "px"),
+        pointerEvents: 'none',
+        backgroundRepeat: 'repeat'
+      }, base64Url ? {
+        backgroundImage: "url('".concat(base64Url, "')")
+      } : {}), markStyle)
+    })]
+  });
+};