wssf-kage-ui 0.1.1 → 0.1.3

package/dist/cjs/Watermark/index.js

@@ -0,0 +1,353 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Watermark = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./style.less");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; } // ============ 类型定义 ============
+/** Watermark 属性 */
+// ============ 检查颜色是否包含透明度 ============
+var hasAlpha = function hasAlpha(color) {
+  return color.includes('rgba') || color.includes('hsla') || color.startsWith('#') && color.length === 9;
+};
+
+// ============ 生成水印 Canvas ============
+var generateWatermark = function generateWatermark(content, image, options) {
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return '';
+  var width = options.width,
+    height = options.height,
+    rotate = options.rotate,
+    opacity = options.opacity,
+    fontSize = options.fontSize,
+    fontColor = options.fontColor,
+    fontFamily = options.fontFamily;
+  canvas.width = width;
+  canvas.height = height;
+  ctx.save();
+
+  // 如果 fontColor 已经包含透明度，就不使用 globalAlpha，避免双重透明度
+  // 否则使用 globalAlpha 来控制整体透明度
+  // 注意：如果 fontColor 已经有透明度，我们仍然需要应用 opacity，但要调整
+  if (hasAlpha(fontColor)) {
+    // fontColor 已经有透明度，直接使用，不叠加 globalAlpha
+    ctx.globalAlpha = 1;
+  } else {
+    // fontColor 没有透明度，使用 globalAlpha
+    ctx.globalAlpha = opacity;
+  }
+  ctx.translate(width / 2, height / 2);
+  ctx.rotate(rotate * Math.PI / 180);
+  ctx.translate(-width / 2, -height / 2);
+  if (image) {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = image;
+    // 注意：这里需要等待图片加载完成，但为了简化，先返回空字符串
+    // 实际使用时应该使用 Promise 或回调
+    ctx.drawImage(img, 0, 0, width, height);
+  } else if (content) {
+    // 确保 fontColor 有效
+    if (!fontColor) {
+      ctx.restore();
+      return '';
+    }
+    ctx.fillStyle = fontColor;
+    ctx.font = "".concat(fontSize, "px ").concat(fontFamily);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    var contents = Array.isArray(content) ? content : [content];
+    var lineHeight = fontSize * 1.2;
+    var totalHeight = contents.length * lineHeight;
+    var startY = (height - totalHeight) / 2 + lineHeight / 2;
+    contents.forEach(function (text, index) {
+      ctx.fillText(text, width / 2, startY + index * lineHeight);
+    });
+  }
+  ctx.restore();
+  return canvas.toDataURL();
+};
+
+// ============ 检测深色模式 ============
+var isDarkMode = function isDarkMode() {
+  if (typeof window === 'undefined') return false;
+
+  // 优先检查页面主题属性（最可靠）
+  if (document.documentElement.hasAttribute('data-theme') && document.documentElement.getAttribute('data-theme') === 'dark') {
+    return true;
+  }
+  if (document.documentElement.hasAttribute('data-prefers-color-scheme') && document.documentElement.getAttribute('data-prefers-color-scheme') === 'dark') {
+    return true;
+  }
+  if (document.documentElement.hasAttribute('data-prefers-color') && document.documentElement.getAttribute('data-prefers-color') === 'dark') {
+    return true;
+  }
+  if (document.documentElement.classList.contains('dark') || document.body.classList.contains('dark')) {
+    return true;
+  }
+
+  // 最后检查系统偏好（可能不准确，因为页面可能是亮色但系统是深色）
+  // 如果页面没有明确的主题标识，才使用系统偏好
+  // 这里暂时注释掉，优先使用页面主题
+  // if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  //   return true;
+  // }
+
+  return false; // 默认亮色模式
+};
+
+// ============ Watermark 组件 ============
+var Watermark = exports.Watermark = function Watermark(_ref) {
+  var _ref$content = _ref.content,
+    content = _ref$content === void 0 ? 'Watermark' : _ref$content,
+    image = _ref.image,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 120 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 64 : _ref$height,
+    _ref$rotate = _ref.rotate,
+    rotate = _ref$rotate === void 0 ? -22 : _ref$rotate,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 16 : _ref$fontSize,
+    fontColor = _ref.fontColor,
+    _ref$fontFamily = _ref.fontFamily,
+    fontFamily = _ref$fontFamily === void 0 ? 'sans-serif' : _ref$fontFamily,
+    _ref$gapX = _ref.gapX,
+    gapX = _ref$gapX === void 0 ? 100 : _ref$gapX,
+    _ref$gapY = _ref.gapY,
+    gapY = _ref$gapY === void 0 ? 100 : _ref$gapY,
+    _ref$offsetLeft = _ref.offsetLeft,
+    offsetLeft = _ref$offsetLeft === void 0 ? 0 : _ref$offsetLeft,
+    _ref$offsetTop = _ref.offsetTop,
+    offsetTop = _ref$offsetTop === void 0 ? 0 : _ref$offsetTop,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 9 : _ref$zIndex,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    children = _ref.children;
+  var containerRef = (0, _react.useRef)(null);
+  var watermarkRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    watermarkUrl = _useState2[0],
+    setWatermarkUrl = _useState2[1];
+  var _useState3 = (0, _react.useState)(function () {
+      // 在客户端初始化时检测深色模式，默认为 false（亮色模式）
+      if (typeof window !== 'undefined') {
+        return isDarkMode();
+      }
+      return false; // 默认亮色模式
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    darkMode = _useState4[0],
+    setDarkMode = _useState4[1];
+
+  // 使用默认字体颜色（如果未指定），依赖于 darkMode state
+  var finalFontColor = (0, _react.useMemo)(function () {
+    if (fontColor) {
+      return fontColor;
+    }
+    // 提高默认透明度，确保可见性
+    // 亮色模式使用深色（黑色），深色模式使用浅色（白色）
+    // 确保在客户端环境下正确检测，如果 darkMode 未初始化，默认使用亮色模式（黑色）
+    if (typeof window === 'undefined') {
+      return 'rgba(0, 0, 0, 0.35)'; // 服务端渲染默认亮色
+    }
+    var isDark = darkMode !== null && darkMode !== void 0 ? darkMode : isDarkMode();
+    return isDark ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.35)';
+  }, [fontColor, darkMode]);
+
+  // 监听深色模式变化
+  (0, _react.useEffect)(function () {
+    var checkDarkMode = function checkDarkMode() {
+      var newDarkMode = isDarkMode();
+      setDarkMode(newDarkMode);
+    };
+
+    // 立即检查一次，确保初始状态正确
+    checkDarkMode();
+
+    // 延迟再检查一次，确保 DOM 已完全加载
+    var timer = setTimeout(function () {
+      checkDarkMode();
+    }, 100);
+
+    // 监听主题变化
+    var observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme', 'data-prefers-color-scheme', 'data-prefers-color', 'class']
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    // 监听系统偏好变化
+    var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    var handleChange = function handleChange() {
+      return checkDarkMode();
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+    } else {
+      // 兼容旧版浏览器
+      mediaQuery.addListener(handleChange);
+    }
+    return function () {
+      clearTimeout(timer);
+      observer.disconnect();
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener('change', handleChange);
+      } else {
+        mediaQuery.removeListener(handleChange);
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!content && !image) return;
+
+    // 确保 finalFontColor 已经计算好
+    if (!finalFontColor) {
+      // 如果 finalFontColor 还未计算好，使用默认的黑色（亮色模式）
+      var defaultColor = 'rgba(0, 0, 0, 0.35)';
+      var url = generateWatermark(content, undefined, {
+        width: width,
+        height: height,
+        rotate: rotate,
+        opacity: opacity,
+        fontSize: fontSize,
+        fontColor: defaultColor,
+        fontFamily: fontFamily
+      });
+      setWatermarkUrl(url);
+      return;
+    }
+
+    // 如果使用图片，需要等待图片加载
+    if (image) {
+      var img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = function () {
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        if (!ctx) return;
+        canvas.width = width;
+        canvas.height = height;
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        ctx.translate(width / 2, height / 2);
+        ctx.rotate(rotate * Math.PI / 180);
+        ctx.translate(-width / 2, -height / 2);
+        ctx.drawImage(img, 0, 0, width, height);
+        ctx.restore();
+        setWatermarkUrl(canvas.toDataURL());
+      };
+      img.onerror = function () {
+        // 图片加载失败，使用文字
+        var url = generateWatermark(content || 'Watermark', undefined, {
+          width: width,
+          height: height,
+          rotate: rotate,
+          opacity: opacity,
+          fontSize: fontSize,
+          fontColor: finalFontColor,
+          fontFamily: fontFamily
+        });
+        setWatermarkUrl(url);
+      };
+      img.src = image;
+    } else {
+      // 使用文字
+      var _url = generateWatermark(content, undefined, {
+        width: width,
+        height: height,
+        rotate: rotate,
+        opacity: opacity,
+        fontSize: fontSize,
+        fontColor: finalFontColor,
+        fontFamily: fontFamily
+      });
+      setWatermarkUrl(_url);
+    }
+  }, [content, image, width, height, rotate, opacity, fontSize, finalFontColor, fontFamily, darkMode]);
+
+  // 更新水印位置和大小
+  var updateWatermark = (0, _react.useCallback)(function () {
+    if (!containerRef.current || !watermarkRef.current || !watermarkUrl) return;
+    var watermark = watermarkRef.current;
+
+    // 设置背景图片
+    var backgroundSize = "".concat(width + gapX, "px ").concat(height + gapY, "px");
+    var backgroundPosition = "".concat(offsetLeft, "px ").concat(offsetTop, "px");
+    watermark.style.backgroundImage = "url(".concat(watermarkUrl, ")");
+    watermark.style.backgroundSize = backgroundSize;
+    watermark.style.backgroundPosition = backgroundPosition;
+    watermark.style.backgroundRepeat = 'repeat';
+  }, [watermarkUrl, gapX, gapY, offsetLeft, offsetTop, width, height]);
+
+  // 监听容器大小变化
+  (0, _react.useEffect)(function () {
+    if (!containerRef.current || !watermarkRef.current) return;
+    var resizeObserver = new ResizeObserver(function () {
+      if (!containerRef.current || !watermarkRef.current) return;
+      updateWatermark();
+    });
+    resizeObserver.observe(containerRef.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [updateWatermark]);
+  (0, _react.useEffect)(function () {
+    if (watermarkUrl) {
+      updateWatermark();
+    }
+  }, [watermarkUrl, updateWatermark]);
+  var watermarkStyle = _objectSpread({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: zIndex,
+    opacity: 1
+  }, style);
+  var containerClassNames = ['kage-watermark', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: containerClassNames,
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: watermarkRef,
+      className: "kage-watermark-content",
+      style: watermarkStyle
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "kage-watermark-children",
+      children: children
+    })]
+  });
+};
+var _default = exports.default = Watermark;

package/dist/cjs/Watermark/style.less

@@ -0,0 +1,31 @@
+// Watermark 水印组件样式
+
+@prefix: kage-watermark;
+
+// ============ 主容器 ============
+.@{prefix} {
+  position: relative;
+  overflow: hidden;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 水印内容 ============
+.@{prefix}-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9;
+}
+
+// ============ 子元素 ============
+.@{prefix}-children {
+  position: relative;
+  z-index: 1;
+}
+

package/dist/cjs/index.d.ts

@@ -42,3 +42,87 @@ export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
 export { default as Form, FormItem } from './Form';
 export type { FormProps, FormItemProps, Rule, FormInstance } from './Form';
+export { default as Input } from './Input';
+export type { InputProps } from './Input';
+export { default as InputNumber } from './InputNumber';
+export type { InputNumberProps } from './InputNumber';
+export { default as Mentions } from './Mentions';
+export type { MentionsProps, MentionOption } from './Mentions';
+export { default as Radio, RadioGroup, RadioButton } from './Radio';
+export type { RadioProps, RadioGroupProps, RadioButtonProps, RadioOptionType } from './Radio';
+export { default as Rate } from './Rate';
+export type { RateProps } from './Rate';
+export { default as Select } from './Select';
+export type { SelectProps, SelectOption, SelectValue } from './Select';
+export { default as Slider } from './Slider';
+export type { SliderProps, SliderValue } from './Slider';
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { default as TimePicker } from './TimePicker';
+export type { TimePickerProps, TimeValue } from './TimePicker';
+export { default as Transfer } from './Transfer';
+export type { TransferProps, TransferItem, TransferDirection } from './Transfer';
+export { default as TreeSelect } from './TreeSelect';
+export type { TreeSelectProps, TreeNode as TreeSelectTreeNode } from './TreeSelect';
+export { default as Upload } from './Upload';
+export type { UploadProps, UploadFile, UploadListType } from './Upload';
+export { default as Avatar } from './Avatar';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape } from './Avatar';
+export { default as Badge } from './Badge';
+export type { BadgeProps, BadgeRibbonProps, BadgeStatus } from './Badge';
+export { default as Calendar } from './Calendar';
+export type { CalendarProps, CalendarMode } from './Calendar';
+export { default as Card } from './Card';
+export type { CardProps, CardMetaProps, CardGridProps, CardSize } from './Card';
+export { default as Carousel } from './Carousel';
+export type { CarouselProps, DotPosition } from './Carousel';
+export { default as Collapse } from './Collapse';
+export type { CollapseProps, CollapseItemProps } from './Collapse';
+export { default as Descriptions } from './Descriptions';
+export type { DescriptionsProps, DescriptionsItemProps } from './Descriptions';
+export { default as Empty } from './Empty';
+export type { EmptyProps } from './Empty';
+export { default as Image } from './Image';
+export type { ImageProps } from './Image';
+export { default as Popover } from './Popover';
+export type { PopoverProps, PopoverPlacement, PopoverTrigger } from './Popover';
+export { default as QRCode } from './QRCode';
+export type { QRCodeProps } from './QRCode';
+export { default as Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedOption, SegmentedValue } from './Segmented';
+export { default as Statistic } from './Statistic';
+export type { StatisticProps } from './Statistic';
+export { default as Table } from './Table';
+export type { TableProps, ColumnType, TableColumnType, RowSelection, TablePagination, SortOrder, AlignType, TableSize, FilterItem, } from './Table';
+export { default as Tag, CheckableTag } from './Tag';
+export type { TagProps, CheckableTagProps, TagPresetColor, TagPresetStatus, } from './Tag';
+export { default as Timeline, TimelineItem } from './Timeline';
+export type { TimelineProps, TimelineItemProps, TimelineItemColor, TimelineMode, } from './Timeline';
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipPlacement, TooltipTrigger, TooltipColor, } from './Tooltip';
+export { default as Tree } from './Tree';
+export type { TreeProps, TreeNode, TreeSelectMode, } from './Tree';
+export { default as Alert } from './Alert';
+export type { AlertProps, AlertType, } from './Alert';
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerPlacement, } from './Drawer';
+export { default as Message } from './Message';
+export type { MessageApi, MessageConfig, MessageType, } from './Message';
+export { default as Modal } from './Modal';
+export type { ModalProps, } from './Modal';
+export { default as Notification } from './Notification';
+export type { NotificationApi, NotificationConfig, NotificationType, NotificationPlacement, } from './Notification';
+export { default as Popconfirm } from './Popconfirm';
+export type { PopconfirmProps, PopconfirmPlacement, PopconfirmTrigger, } from './Popconfirm';
+export { default as Progress } from './Progress';
+export type { ProgressProps, ProgressType, ProgressStatus, } from './Progress';
+export { default as Result } from './Result';
+export type { ResultProps, ResultStatus, } from './Result';
+export { default as FloatButton } from './FloatButton';
+export type { FloatButtonProps, FloatButtonGroupProps, FloatButtonType, FloatButtonShape, FloatButtonTrigger, } from './FloatButton';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonButtonProps, SkeletonInputProps, SkeletonImageProps, SkeletonAvatarProps, } from './Skeleton';
+export { default as Spin } from './Spin';
+export type { SpinProps } from './Spin';
+export { default as Watermark } from './Watermark';
+export type { WatermarkProps } from './Watermark';