@ccs-ui/rc-pro 2.0.3 → 2.0.4

package/es/dialog/DialogRequestButton.d.ts

@@ -1,7 +1,7 @@
 import { FormProps } from 'antd';
 import { DialogFormRef } from './form';
 import { CcsDialogModalProps } from './hook';
-declare const DialogRequestButton: ({ auth, formRef, extraBtn, formInitialValues, request, onCancel, onRequestBefore, }: Pick<CcsDialogModalProps, "onCancel" | "auth" | "request" | "onRequestBefore" | "extraBtn"> & {
+declare const DialogRequestButton: ({ auth, formRef, extraBtn, formInitialValues, request, onCancel, onRequestBefore, }: Pick<CcsDialogModalProps, "onCancel" | "auth" | "request" | "extraBtn" | "onRequestBefore"> & {
     formRef: React.RefObject<DialogFormRef>;
     formInitialValues: FormProps['initialValues'];
 }) => import("react/jsx-runtime").JSX.Element;

package/es/layout-keep-alive/page.js

@@ -28,16 +28,13 @@ export default /*#__PURE__*/memo(function (props) {
       "data-display": active,
       children: /*#__PURE__*/_jsx(Scrollbars, {
         style: {
-          display: active ? 'block' : 'none'
+          padding: 16,
+          flexDirection: 'column',
+          display: active ? 'flex' : 'none'
         },
         autoHide: true,
         className: "ccs-table-item-scroll",
-        children: /*#__PURE__*/_jsx("div", {
-          style: {
-            margin: 16
-          },
-          children: children
-        })
+        children: children
       })
     })
   });

package/es/layout-single-page/page.js

@@ -21,12 +21,12 @@ export default /*#__PURE__*/memo(function (props) {
     children: /*#__PURE__*/_jsx(Scrollbars, {
       autoHide: true,
       className: "ccs-table-item-scroll",
-      children: /*#__PURE__*/_jsx("div", {
-        style: {
-          margin: 16
-        },
-        children: children
-      })
+      style: {
+        padding: 16,
+        flexDirection: 'column',
+        display: 'flex'
+      },
+      children: children
     })
   });
 });

package/es/pro-table/index.less

@@ -20,6 +20,10 @@
 }
 
 .ccs-pl {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+
   .ant-pagination {
     margin: 0 !important;
   }
@@ -34,9 +38,8 @@
   }
 
   &-table-content {
-    // margin: 10px;
-    // background: #fff;
     position: relative;
+    flex: auto;
   }
 
   &-adaptation {

package/es/pro-table/table.js

@@ -18,9 +18,9 @@ import { useSize, useUpdateEffect } from 'ahooks';
 import { Empty, Form, theme } from 'antd';
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { CcsWaterMark } from '..';
 import { useCcsPage } from "../";
 import CcsTable from "../table";
+import WaterMarkRelative from "../water-mark/relative";
 import { getAllChildrenId, getDataById, onTableInModalOrDrawer, onTableInTabItem } from "./_utils";
 import HeadComponent from "./head";
 import "./index.less";
@@ -41,6 +41,7 @@ export var TableSelectionContext = /*#__PURE__*/React.createContext({
  * @returns
  */
 var InternalProTable = function InternalProTable(props) {
+  var _table$scroll2, _table$scroll3;
   var init = props.init,
     auth = props.auth,
     table = props.table,
@@ -465,6 +466,7 @@ var InternalProTable = function InternalProTable(props) {
         }),
         treeRef: treeRef,
         tableRef: tableRef,
+        tableContentRef: tableContentRef,
         tableRowSize: tableRowSize,
         sticky: stickyRef.current || true,
         parentFieldName: parentFieldName,
@@ -477,6 +479,7 @@ var InternalProTable = function InternalProTable(props) {
     return /*#__PURE__*/_jsx(CcsTable, _objectSpread(_objectSpread({
       data: data,
       tableRef: tableRef,
+      tableContentRef: tableContentRef,
       onChange: handlePageChange,
       sticky: stickyRef.current || true
     }, table), {}, {
@@ -510,11 +513,17 @@ var InternalProTable = function InternalProTable(props) {
       borderRadius: 4
     }, rootStyle);
   }
-  var render = /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(classPrefix, className, _defineProperty({}, 'dark-table', isDark)),
-    style: rootStyle,
+    style: _objectSpread(_objectSpread({}, rootStyle), {}, {
+      overflow: (table === null || table === void 0 || (_table$scroll2 = table.scroll) === null || _table$scroll2 === void 0 ? void 0 : _table$scroll2.y) === 'auto' ? 'hidden' : 'unset'
+    }),
     ref: containerRef,
-    children: [!(!formItems.length && !toolbar) && isAuth && /*#__PURE__*/_jsx(HeadComponent, {
+    children: [watermark && /*#__PURE__*/_jsx(WaterMarkRelative, {
+      content: watermark,
+      fontColor: "rgba(0,0,0,.15)",
+      zIndex: 105
+    }), !(!formItems.length && !toolbar) && isAuth && /*#__PURE__*/_jsx(HeadComponent, {
       form: form,
       toolbar: newToolbar,
       formItems: formItems,
@@ -535,16 +544,12 @@ var InternalProTable = function InternalProTable(props) {
       children: newToolbarExtra
     }), /*#__PURE__*/_jsxs("div", {
       className: "".concat(classPrefix, "-table-content"),
-      style: styles === null || styles === void 0 ? void 0 : styles.table,
+      style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.table), {}, {
+        overflow: (table === null || table === void 0 || (_table$scroll3 = table.scroll) === null || _table$scroll3 === void 0 ? void 0 : _table$scroll3.y) === 'auto' ? 'hidden' : 'unset'
+      }),
       ref: tableContentRef,
       children: [renderTable(), children]
     })]
   });
-  return watermark ? /*#__PURE__*/_jsx(CcsWaterMark, {
-    content: watermark,
-    fontColor: "rgba(0,0,0,.15)",
-    zIndex: 105,
-    children: render
-  }) : render;
 };
 export default InternalProTable;

package/es/pro-table/tree.d.ts

@@ -15,11 +15,12 @@ type TreeTableProps<T> = Pick<CcsProTableProps<T>, 'table' | 'onSearchBefore' |
     tableRowSize: TableProps['size'];
     treeRef: RefObject<TreeInstance<T>>;
     tableRef: React.MutableRefObject<TableRefType | undefined>;
+    tableContentRef: React.RefObject<HTMLDivElement>;
     setData: React.Dispatch<React.SetStateAction<CCS.TableData<T>>>;
     handlePageChange: any;
     onSearchAfter: (data: HttpResult<T[]>, eventType?: SearchEventType) => HttpResult<(T & {
         children: T[];
     })[]>;
 };
-declare const TableTree: <T extends object = any>({ data, table, sticky, treeRef, tableRef, tableRowSize, parentFieldName, handlePageChange, setData, onSearchAfter, onSearchBefore, }: TreeTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableTree: <T extends object = any>({ data, table, sticky, treeRef, tableRef, tableRowSize, tableContentRef, parentFieldName, handlePageChange, setData, onSearchAfter, onSearchBefore, }: TreeTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableTree;

package/es/pro-table/tree.js

@@ -28,6 +28,7 @@ var TableTree = function TableTree(_ref) {
     treeRef = _ref.treeRef,
     tableRef = _ref.tableRef,
     tableRowSize = _ref.tableRowSize,
+    tableContentRef = _ref.tableContentRef,
     parentFieldName = _ref.parentFieldName,
     handlePageChange = _ref.handlePageChange,
     setData = _ref.setData,
@@ -160,7 +161,8 @@ var TableTree = function TableTree(_ref) {
   return /*#__PURE__*/_jsx(CcsTable, _objectSpread(_objectSpread({
     onChange: handlePageChange,
     data: data,
-    tableRef: tableRef
+    tableRef: tableRef,
+    tableContentRef: tableContentRef
   }, tableParams), {}, {
     size: tableRowSize,
     columns: columns,

package/es/table/index.d.ts

@@ -4,6 +4,7 @@ import './index.less';
 type TableProps<T> = Omit<CcsTableProps<T>, 'request' | 'requestParam' | 'title'> & Pick<CcsProTableProps<T>, 'showNumber'> & {
     title?: any;
     tableRef?: React.MutableRefObject<TableRefType | undefined>;
+    tableContentRef: React.RefObject<HTMLDivElement>;
 };
 export type TableRefType = {
     /** 列筛选 */

package/es/table/index.js

@@ -1,6 +1,6 @@
 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); }
 var _excluded = ["onResize", "width"],
-  _excluded2 = ["data", "style", "scroll", "rowKey", "columns", "tableRef", "pagination", "rowSelection", "className"];
+  _excluded2 = ["data", "style", "scroll", "rowKey", "columns", "tableRef", "pagination", "rowSelection", "className", "tableContentRef"];
 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; }
@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { useDebounceFn, useEventListener, useUpdate } from 'ahooks';
+import { useDebounceFn, useUpdate } from 'ahooks';
 import { Table, Tooltip, theme } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useImperativeHandle, useRef } from 'react';
@@ -55,6 +55,7 @@ var CustomTable = function CustomTable(props) {
     rowSelection = props.rowSelection,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
+    tableContentRef = props.tableContentRef,
     restProps = _objectWithoutProperties(props, _excluded2);
 
   // 固定表头获取table可视高度
@@ -69,27 +70,27 @@ var CustomTable = function CustomTable(props) {
   // table 固定表头，内容滚动
   var _useDebounceFn = useDebounceFn(function () {
       if ((scroll === null || scroll === void 0 ? void 0 : scroll.y) === 'auto') {
-        var _ref$current, _ref$current2;
+        var _ref$current, _ref$current2, _ref$current3, _tableContentRef$curr;
         var tableBody = ref.current.getElementsByClassName('ant-table-body')[0];
         if (!tableBody) return;
-        var _ref2 = tableBody.getBoundingClientRect() || {
-            top: 0
-          },
-          top = _ref2.top;
-        var bodyHeight = document.body.clientHeight;
-        var pageHeight = 0,
+        var headerHeight = 0,
+          pageHeight = 0,
           footerHeight = 0;
         var _pagination = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getElementsByClassName('ant-pagination');
         if (_pagination && _pagination.length > 0) {
           pageHeight = _pagination[0].clientHeight;
         }
-        var footer = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getElementsByClassName('ant-table-footer');
+        var header = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getElementsByClassName('ant-table-header');
+        var footer = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getElementsByClassName('ant-table-footer');
         if (footer && footer.length > 0) {
           footerHeight = footer[0].clientHeight;
         }
+        if (header && header.length > 0) {
+          headerHeight = header[0].clientHeight;
+        }
 
         // 计算table数据区高度
-        var scrollHeight = bodyHeight - top - pageHeight - footerHeight;
+        var scrollHeight = (((_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientHeight) || 0) - headerHeight - pageHeight - footerHeight;
 
         // 固定tbody高度
         tableBody.style.height = "".concat(scrollHeight, "px");
@@ -104,9 +105,7 @@ var CustomTable = function CustomTable(props) {
   }, [totalNum]);
 
   // 监听窗口变化
-  useEventListener('resize', onFixedThead, {
-    target: window
-  });
+  // useEventListener('resize', onFixedThead, { target: window });
 
   // 监听列筛选事件
   useImperativeHandle(tableRef, function () {
@@ -124,8 +123,8 @@ var CustomTable = function CustomTable(props) {
 
   // 改变列宽
   var onResize = function onResize(dataIndex) {
-    return function (_, _ref3) {
-      var size = _ref3.size;
+    return function (_, _ref2) {
+      var size = _ref2.size;
       var column = columns === null || columns === void 0 ? void 0 : columns.find(function (c) {
         return c.dataIndex === dataIndex;
       });

package/es/water-mark/relative.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { PropsWithCss, PropsWithNodeChildren } from '../ccs';
+export type WaterMarkProps = PropsWithNodeChildren & PropsWithCss & {
+    /** 水印文字内容 */
+    content?: string;
+    /** 水印样式 */
+    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;
+    /**
+     * @description 文字颜色
+     * @default rgba(0,0,0,.15)
+     */
+    fontColor?: string;
+    /**
+     * @description 文字样式
+     * @default normal
+     */
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    /**
+     * @description 文字族
+     * @default sans-serif
+     */
+    fontFamily?: string;
+    /**
+     * @description 文字粗细
+     * @default normal
+     */
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    /**
+     * @description 文字大小
+     * @default 16
+     */
+    fontSize?: number | string;
+};
+/**
+ * 水印组件
+ * @param WaterMarkProps
+ * @returns
+ */
+declare const WaterMarkRelative: (props: WaterMarkProps) => import("react/jsx-runtime").JSX.Element;
+export default WaterMarkRelative;

package/es/water-mark/relative.js

@@ -0,0 +1,130 @@
+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 { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "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 || context.backingStorePixelRatio || 1;
+  return (window.devicePixelRatio || 1) / backingStore;
+};
+
+/**
+ * 水印组件
+ * @param WaterMarkProps
+ * @returns
+ */
+var WaterMarkRelative = function WaterMarkRelative(props) {
+  var 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,
+    content = props.content,
+    offsetLeft = props.offsetLeft,
+    offsetTop = 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 ? 'rgba(0,0,0,.15)' : _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 = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('pro-layout-watermark', customizePrefixCls);
+  var waterMakrCls = classNames(prefixCls, markClassName);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    base64Url = _useState2[0],
+    setBase64Url = _useState2[1];
+  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 = offsetTop || gapY / 2;
+    canvas.setAttribute('width', canvasWidth);
+    canvas.setAttribute('height', canvasHeight);
+    if (ctx) {
+      // 旋转字符 rotate
+      ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
+      ctx.rotate(Math.PI / 180 * Number(rotate));
+      var markWidth = width * ratio;
+      var markHeight = height * ratio;
+      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());
+        };
+      } else if (content) {
+        var markSize = Number(fontSize) * ratio;
+        ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
+        ctx.fillStyle = fontColor;
+        ctx.fillText(content, 0, 0);
+        setBase64Url(canvas.toDataURL());
+      }
+    } else {
+      // eslint-disable-next-line no-console
+      console.error('当前环境不支持Canvas');
+    }
+  }, [gapX, gapY, offsetLeft, offsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: base64Url && /*#__PURE__*/_jsx("div", {
+      className: waterMakrCls,
+      style: _objectSpread({
+        zIndex: zIndex,
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        backgroundSize: "".concat(gapX + width, "px"),
+        pointerEvents: 'none',
+        backgroundRepeat: 'repeat',
+        backgroundImage: "url('".concat(base64Url, "')")
+      }, markStyle)
+    })
+  });
+};
+export default WaterMarkRelative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ccs-ui/rc-pro",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "",
   "license": "MIT",
   "author": {