@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/VirtualList/props.js

@@ -0,0 +1,42 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { VERTICAL } from "./defaults";
+var mutable = function mutable(data) {
+  return data;
+};
+export var defaultVirtualizedProps = {
+  className: '',
+  containerElement: 'div',
+  data: mutable([]),
+  direction: 'ltr',
+  innerElement: 'div',
+  innerProps: {},
+  perfMode: true
+};
+export var defaultVirtualizedListProps = _objectSpread({
+  cache: 2,
+  layout: VERTICAL,
+  initScrollOffset: 0
+}, defaultVirtualizedProps);
+export var defaultVirtualizedGridProps = _objectSpread({
+  columnCache: 2,
+  itemKey: function itemKey(_ref) {
+    var columnIndex = _ref.columnIndex,
+      rowIndex = _ref.rowIndex;
+    return "".concat(rowIndex, ":").concat(columnIndex);
+  },
+  rowCache: 2,
+  hScrollbarSize: 6,
+  vScrollbarSize: 6,
+  scrollbarStartGap: 0,
+  scrollbarEndGap: 2
+}, defaultVirtualizedProps);
+export var defaultVirtualizedScrollbarProps = {
+  scrollbarSize: 6,
+  startGap: 0,
+  endGap: 2
+};

package/dist/VirtualList/types.d.ts

@@ -0,0 +1,151 @@
+import type { CSSProperties, MutableRefObject, Ref } from 'react';
+import { BACKWARD, FORWARD } from './defaults';
+export type Alignment = 'auto' | 'smart' | 'center' | 'start' | 'end';
+export type ItemSize = (idx: number) => number;
+export type Direction = 'ltr' | 'rtl';
+export type LayoutDirection = 'horizontal' | 'vertical';
+export type RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending';
+export type ItemProps<T> = {
+    data: T;
+    style: CSSProperties;
+    scrolling?: boolean;
+    index: number;
+};
+export type ListItem = {
+    offset: number;
+    size: number;
+};
+export type ListCache = {
+    items: Record<string, ListItem>;
+    estimatedItemSize: number;
+    lastVisitedIndex: number;
+    clearCacheAfterIndex: (idx: number, forceUpdate?: boolean) => void;
+};
+export type GridCache = {
+    column: Record<string, ListItem>;
+    row: Record<string, ListItem>;
+    estimatedColumnWidth: number;
+    estimatedRowHeight: number;
+    lastVisitedColumnIndex: number;
+    lastVisitedRowIndex: number;
+};
+export type ScrollDir = 'forwards' | 'backwards';
+export type GetEstimatedTotalSize<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, cache: ReturnType<P>) => number;
+export type GetOffset<T, P extends InitListCacheFunc<T>> = (props: T, idx: number, alignment: Alignment, offset: number, cache: ReturnType<P>) => number;
+export type GetStartIndexForOffset<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, offset: number, cache: ReturnType<P>) => number;
+export type GetStopIndexForStartIndex<T, P extends InitCacheFunc<T, GridCache | ListCache>> = (props: T, startIndex: number, scrollOffset: number, cache: ReturnType<P>) => number;
+export type PropValidator<T> = (props: T) => void;
+export type InitCacheFunc<T, P> = (props: T) => P;
+export type InitListCacheFunc<T> = InitCacheFunc<T, ListCache>;
+export type InitGridCacheFunc<T> = InitCacheFunc<T, GridCache>;
+export type ListConstructorProps<T, P extends InitListCacheFunc<T> = InitListCacheFunc<T>> = {
+    name?: string;
+    getItemOffset: ListItemSizer<T, P>;
+    getEstimatedTotalSize: GetEstimatedTotalSize<T, P>;
+    getItemSize: ListItemSizer<T, P>;
+    getOffset: GetOffset<T, P>;
+    getStartIndexForOffset: GetStartIndexForOffset<T, P>;
+    getStopIndexForStartIndex: GetStopIndexForStartIndex<T, P>;
+    initCache: P;
+    clearCache: boolean;
+    validateProps: PropValidator<T>;
+};
+export type ExposesStates = {
+    isScrolling: boolean;
+    updateRequested: boolean;
+};
+export type SharedExposes = {
+    windowRef: Ref<HTMLElement | null>;
+    innerRef: Ref<HTMLElement | null>;
+    getItemStyleCache: (_: any, __: any, ___: any) => CSSProperties;
+};
+export type ListExposes = {
+    scrollTo: (offset: number) => void;
+    scrollToItem: (idx: number, alignment?: Alignment) => void;
+    states: {
+        scrollDir: Dir;
+        scrollOffset: number;
+    } & ExposesStates;
+} & SharedExposes;
+export type GridExposes = {
+    states: {
+        scrollLeft: number;
+        scrollTop: number;
+        xAxisScrollDir: Dir;
+        yAxisScrollDir: Dir;
+    } & ExposesStates;
+    touchStartX: Ref<number>;
+    touchStartY: Ref<number>;
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    scrollTo: (scrollOptions: GridScrollOptions) => void;
+    scrollToItem: (columnIndex?: number, rowIndex?: number, alignment?: Alignment) => void;
+} & SharedExposes;
+export type ScrollbarExpose = {
+    onMouseUp: () => void;
+};
+export type GetGridOffset<T, P extends InitGridCacheFunc<T>> = (props: T, index: number, alignment: Alignment, offset: number, cache: ReturnType<P>, scrollbarWidth: number) => number;
+export type GetPosition<T, P extends InitGridCacheFunc<T>> = (props: T, index: number, cache: ReturnType<P>) => [number, number];
+export type GridConstructorProps<T, P extends InitGridCacheFunc<T> = InitGridCacheFunc<T>> = {
+    name?: string;
+    getColumnOffset: GetGridOffset<T, P>;
+    getColumnPosition: GetPosition<T, P>;
+    getColumnStartIndexForOffset: GetStartIndexForOffset<T, P>;
+    getColumnStopIndexForStartIndex: GetStopIndexForStartIndex<T, P>;
+    getEstimatedTotalHeight: GetEstimatedTotalSize<T, P>;
+    getEstimatedTotalWidth: GetEstimatedTotalSize<T, P>;
+    getRowOffset: GetGridOffset<T, P>;
+    getRowPosition: GetPosition<T, P>;
+    getRowStartIndexForOffset: GetStartIndexForOffset<T, P>;
+    getRowStopIndexForStartIndex: GetStopIndexForStartIndex<T, P>;
+    initCache: P;
+    injectToInstance?: (cache: MutableRefObject<ReturnType<P>>) => void;
+    clearCache: boolean;
+    validateProps: PropValidator<T>;
+};
+/**
+ * Instance methods and emits
+ */
+export type GridDefaultSlotParams = {
+    columnIndex: number;
+    rowIndex: number;
+    data: any;
+    key: number | string;
+    isScrolling?: boolean;
+    style: CSSProperties;
+};
+export type GridItemRenderedEvtParams = {
+    columnCacheStart: number;
+    columnCacheEnd: number;
+    rowCacheStart: number;
+    rowCacheEnd: number;
+    columnVisibleStart: number;
+    columnVisibleEnd: number;
+    rowVisibleStart: number;
+    rowVisibleEnd: number;
+};
+export type GridScrollOptions = {
+    scrollLeft?: number;
+    scrollTop?: number;
+};
+export type GridItemKeyGetter = <T extends {
+    [key: string | number]: any;
+}>(args: {
+    columnIndex: number;
+    data: T;
+    rowIndex: number;
+}) => string | number;
+export type Dir = typeof FORWARD | typeof BACKWARD;
+export interface GridStates {
+    isScrolling: boolean;
+    scrollLeft: number;
+    scrollTop: number;
+    updateRequested: boolean;
+    xAxisScrollDir: Dir;
+    yAxisScrollDir: Dir;
+}
+export type ListItemSizer<T, P extends InitListCacheFunc<T>> = (props: T, index: number, cache: ReturnType<P>) => number;
+export type Indices = {
+    columnIndex?: number;
+    rowIndex?: number;
+};

package/dist/VirtualList/types.js

@@ -0,0 +1 @@
+export {};

package/dist/VirtualList/utils.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'react';
+import type { Direction, RTLOffsetType } from './types';
+export declare const getScrollDir: (prev: number, cur: number) => "backward" | "forward";
+export declare const isHorizontal: (dir: string) => boolean;
+export declare const isRTL: (dir: Direction) => boolean;
+export declare function getRTLOffsetType(recalculate?: boolean): RTLOffsetType;
+export declare function renderThumbStyle({ move, size, bar }: {
+    move: any;
+    size: any;
+    bar: any;
+}, layout: string): CSSProperties;

package/dist/VirtualList/utils.js

@@ -0,0 +1,56 @@
+import { BACKWARD, FORWARD, HORIZONTAL, LTR, RTL, RTL_OFFSET_NAG, RTL_OFFSET_POS_ASC, RTL_OFFSET_POS_DESC } from "./defaults";
+export var getScrollDir = function getScrollDir(prev, cur) {
+  return prev < cur ? FORWARD : BACKWARD;
+};
+export var isHorizontal = function isHorizontal(dir) {
+  return dir === LTR || dir === RTL || dir === HORIZONTAL;
+};
+export var isRTL = function isRTL(dir) {
+  return dir === RTL;
+};
+var cachedRTLResult = null;
+export function getRTLOffsetType() {
+  var recalculate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = RTL_OFFSET_POS_DESC;
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = RTL_OFFSET_NAG;
+      } else {
+        cachedRTLResult = RTL_OFFSET_POS_ASC;
+      }
+    }
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+  return cachedRTLResult;
+}
+export function renderThumbStyle(_ref, layout) {
+  var move = _ref.move,
+    size = _ref.size,
+    bar = _ref.bar;
+  var style = {};
+  var translate = "translate".concat(bar.axis, "(").concat(move, "px)");
+  style[bar.size] = size;
+  style.transform = translate;
+  if (layout === 'horizontal') {
+    style.height = '100%';
+  } else {
+    style.width = '100%';
+  }
+  return style;
+}

package/dist/Watermark/Watermark.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { WatermarkProps } from './typings';
+declare const Watermark: React.MemoExoticComponent<React.ForwardRefExoticComponent<WatermarkProps & React.RefAttributes<HTMLDivElement>>>;
+export default Watermark;

package/dist/Watermark/Watermark.js

@@ -0,0 +1,257 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getClips, getMarkSize, getPixelRatio, getStyleStr, reRendering } from "./helper";
+/**
+ * @description 获取字体样式的默认值，返回必填字段的字体配置
+ * @param font - 可选的字体配置
+ * @returns 填充默认值后的完整字体配置
+ */
+function getFontConfig(font) {
+  var _font$color, _font$fontSize, _font$fontWeight, _font$fontStyle, _font$fontFamily, _font$fontGap, _font$textAlign, _font$textBaseline;
+  return {
+    color: (_font$color = font === null || font === void 0 ? void 0 : font.color) !== null && _font$color !== void 0 ? _font$color : 'rgba(0,0,0,.15)',
+    fontSize: (_font$fontSize = font === null || font === void 0 ? void 0 : font.fontSize) !== null && _font$fontSize !== void 0 ? _font$fontSize : 16,
+    fontWeight: (_font$fontWeight = font === null || font === void 0 ? void 0 : font.fontWeight) !== null && _font$fontWeight !== void 0 ? _font$fontWeight : 'normal',
+    fontStyle: (_font$fontStyle = font === null || font === void 0 ? void 0 : font.fontStyle) !== null && _font$fontStyle !== void 0 ? _font$fontStyle : 'normal',
+    fontFamily: (_font$fontFamily = font === null || font === void 0 ? void 0 : font.fontFamily) !== null && _font$fontFamily !== void 0 ? _font$fontFamily : 'sans-serif',
+    fontGap: (_font$fontGap = font === null || font === void 0 ? void 0 : font.fontGap) !== null && _font$fontGap !== void 0 ? _font$fontGap : 3,
+    textAlign: (_font$textAlign = font === null || font === void 0 ? void 0 : font.textAlign) !== null && _font$textAlign !== void 0 ? _font$textAlign : 'center',
+    textBaseline: (_font$textBaseline = font === null || font === void 0 ? void 0 : font.textBaseline) !== null && _font$textBaseline !== void 0 ? _font$textBaseline : 'hanging'
+  };
+}
+var Watermark = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, _ref3) {
+  var _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
+    _props$rotate = props.rotate,
+    rotate = _props$rotate === void 0 ? -22 : _props$rotate,
+    _props$content = props.content,
+    content = _props$content === void 0 ? 'Element Plus' : _props$content,
+    width = props.width,
+    height = props.height,
+    image = props.image,
+    font = props.font,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? [100, 100] : _props$gap,
+    offset = props.offset,
+    className = props.className,
+    style = props.style,
+    children = props.children;
+  var fontConfig = useMemo(function () {
+    return getFontConfig(font);
+  }, [font]);
+  var gapX = useMemo(function () {
+    return gap[0];
+  }, [gap]);
+  var gapY = useMemo(function () {
+    return gap[1];
+  }, [gap]);
+  var gapXCenter = useMemo(function () {
+    return gapX / 2;
+  }, [gapX]);
+  var gapYCenter = useMemo(function () {
+    return gapY / 2;
+  }, [gapY]);
+  var offsetLeft = useMemo(function () {
+    var _ref, _offset$;
+    return (_ref = (_offset$ = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _offset$ !== void 0 ? _offset$ : gap === null || gap === void 0 ? void 0 : gap[0]) !== null && _ref !== void 0 ? _ref : gapXCenter;
+  }, [offset, gap, gapXCenter]);
+  var offsetTop = useMemo(function () {
+    var _ref2, _offset$2;
+    return (_ref2 = (_offset$2 = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _offset$2 !== void 0 ? _offset$2 : gap === null || gap === void 0 ? void 0 : gap[1]) !== null && _ref2 !== void 0 ? _ref2 : gapYCenter;
+  }, [offset, gap, gapYCenter]);
+
+  /**
+   * @description 计算水印元素的定位样式
+   * @returns 水印元素的 CSS 属性对象
+   */
+  var getMarkStyle = useCallback(function () {
+    var markStyle = {
+      zIndex: zIndex,
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      backgroundRepeat: 'repeat'
+    };
+    var positionLeft = offsetLeft - gapXCenter;
+    var positionTop = offsetTop - gapYCenter;
+    if (positionLeft > 0) {
+      markStyle.left = "".concat(positionLeft, "px");
+      markStyle.width = "calc(100% - ".concat(positionLeft, "px)");
+      positionLeft = 0;
+    }
+    if (positionTop > 0) {
+      markStyle.top = "".concat(positionTop, "px");
+      markStyle.height = "calc(100% - ".concat(positionTop, "px)");
+      positionTop = 0;
+    }
+    markStyle.backgroundPosition = "".concat(positionLeft, "px ").concat(positionTop, "px");
+    return markStyle;
+  }, [zIndex, offsetLeft, offsetTop, gapXCenter, gapYCenter]);
+  var containerRef = useRef(null);
+  var watermarkRef = useRef();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    stopObservation = _useState2[0],
+    setStopObservation = _useState2[1];
+
+  /**
+   * @description 销毁水印 DOM 元素
+   */
+  var destroyWatermark = useCallback(function () {
+    if (watermarkRef.current) {
+      watermarkRef.current.remove();
+      watermarkRef.current = undefined;
+    }
+  }, []);
+
+  /**
+   * @description 将水印 base64 图片追加到容器中
+   * @param base64Url - Canvas 导出的 base64 数据 URL
+   * @param markWidth - 水印图案的宽度
+   */
+  var appendWatermark = useCallback(function (base64Url, markWidth) {
+    if (containerRef.current && watermarkRef.current) {
+      setStopObservation(true);
+      watermarkRef.current.setAttribute('style', getStyleStr(_objectSpread(_objectSpread({}, getMarkStyle()), {}, {
+        backgroundImage: "url('".concat(base64Url, "')"),
+        backgroundSize: "".concat(Math.floor(markWidth), "px")
+      })));
+      containerRef.current.appendChild(watermarkRef.current);
+      setTimeout(function () {
+        setStopObservation(false);
+      });
+    }
+  }, [getMarkStyle, setStopObservation]);
+
+  /**
+   * @description 渲染水印到 Canvas 并插入 DOM
+   */
+  var renderWatermark = useCallback(function () {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      if (!watermarkRef.current) {
+        watermarkRef.current = document.createElement('div');
+      }
+      var ratio = getPixelRatio();
+      var _getMarkSize = getMarkSize({
+          image: image,
+          content: content,
+          width: width,
+          height: height,
+          rotate: rotate,
+          font: fontConfig
+        }, ctx),
+        _getMarkSize2 = _slicedToArray(_getMarkSize, 3),
+        markWidth = _getMarkSize2[0],
+        markHeight = _getMarkSize2[1],
+        space = _getMarkSize2[2];
+
+      /**
+       * @description 在 Canvas 上绘制水印内容并追加到 DOM
+       * @param drawContent - 要绘制的内容（文本或图片元素），如果为 undefined 则使用 props.content
+       */
+      var drawCanvas = function drawCanvas(drawContent) {
+        var currentContent = drawContent !== null && drawContent !== void 0 ? drawContent : content;
+        var _getClips = getClips(currentContent || '', rotate, ratio, markWidth, markHeight, fontConfig, gapX, gapY, space),
+          _getClips2 = _slicedToArray(_getClips, 2),
+          textClips = _getClips2[0],
+          clipWidth = _getClips2[1];
+        appendWatermark(textClips, clipWidth);
+      };
+      if (image) {
+        var img = new Image();
+        img.onload = function () {
+          drawCanvas(img);
+        };
+        img.onerror = function () {
+          drawCanvas(content);
+        };
+        img.crossOrigin = 'anonymous';
+        img.referrerPolicy = 'no-referrer';
+        img.src = image;
+      } else {
+        drawCanvas(content);
+      }
+    }
+  }, [image, content, width, height, rotate, fontConfig, gapX, gapY, appendWatermark]);
+
+  /**
+   * @description 组件挂载时渲染水印，卸载时销毁水印
+   */
+  useEffect(function () {
+    renderWatermark();
+    return function () {
+      destroyWatermark();
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /**
+   * @description 当 props 变化时重新渲染水印
+   */
+  useEffect(function () {
+    renderWatermark();
+  }, [props]);
+
+  /**
+   * @description 使用 MutationObserver 监听 DOM 变化，防止水印被篡改
+   */
+  useEffect(function () {
+    var container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    var observer = new MutationObserver(function (mutations) {
+      if (stopObservation) {
+        return;
+      }
+      mutations.forEach(function (mutation) {
+        if (reRendering(mutation, watermarkRef.current)) {
+          destroyWatermark();
+          renderWatermark();
+        }
+      });
+    });
+    observer.observe(container, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [stopObservation, destroyWatermark, renderWatermark]);
+  var containerStyle = useMemo(function () {
+    return _objectSpread({
+      position: 'relative'
+    }, style);
+  }, [style]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: function ref(node) {
+      containerRef.current = node;
+      if (typeof _ref3 === 'function') {
+        _ref3(node);
+      } else if (_ref3) {
+        _ref3.current = node;
+      }
+    },
+    className: className,
+    style: containerStyle
+  }, children);
+}));
+Watermark.displayName = 'ElWatermark';
+export default Watermark;

package/dist/Watermark/helper.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties } from 'react';
+import type { WatermarkFontType, WatermarkProps } from './typings';
+/**
+ * @description 将 CSSProperties 对象转换为内联样式字符串
+ * @param style - CSS 属性对象
+ * @returns 内联样式字符串
+ */
+export declare function getStyleStr(style: CSSProperties): string;
+/**
+ * @description 返回设备物理像素分辨率与 CSS 像素分辨率的比率
+ * @returns 设备像素比
+ */
+export declare function getPixelRatio(): number;
+/**
+ * @description 判断是否需要重新渲染水印
+ * @param mutation - MutationRecord 对象
+ * @param watermarkElement - 水印 DOM 元素（可选）
+ * @returns 是否需要重新渲染
+ */
+export declare const reRendering: (mutation: MutationRecord, watermarkElement?: HTMLElement) => boolean;
+/**
+ * @description 获取水印内容的 Canvas 剪辑（clips）
+ *  生成包含旋转和填充的水印图案 data URL
+ * @param content - 水印内容（文本或图片元素）
+ * @param rotate - 旋转角度
+ * @param ratio - 像素比率
+ * @param width - 内容宽度
+ * @param height - 内容高度
+ * @param font - 字体样式配置（必填）
+ * @param gapX - 水平间距
+ * @param gapY - 垂直间距
+ * @param space - 旋转后的额外空间
+ * @returns [dataURL, 最终宽度, 最终高度]
+ */
+export declare function getClips(content: NonNullable<WatermarkProps['content']> | HTMLImageElement, rotate: number, ratio: number, width: number, height: number, font: Required<NonNullable<WatermarkFontType>>, gapX: number, gapY: number, space: number): [dataURL: string, finalWidth: number, finalHeight: number];
+/**
+ * @description 获取水印的宽度和高度
+ *  默认值：图片 [120, 64]；文本内容：根据内容计算
+ * @param props - 水印组件属性
+ * @param ctx - Canvas 2D 渲染上下文
+ * @returns [宽度, 高度, 额外空间]
+ */
+export declare function getMarkSize(props: {
+    image?: string;
+    content?: string | string[];
+    width?: number;
+    height?: number;
+    rotate?: number;
+    font?: WatermarkFontType;
+}, ctx: CanvasRenderingContext2D): readonly [number, number, number];