@4399ywkf/design 2.0.0 → 2.1.1

package/dist/AiConversation/_lobe/utils/smoothCorners.js

@@ -0,0 +1,112 @@
+/**
+ * Smooth Corners utility using Base64 SVG mask
+ * A simpler alternative to CSS Houdini Paint API
+ */
+
+/**
+ * Generate a smooth corners SVG path using superellipse formula
+ * @param size - The size of the shape
+ * @param n - The superellipse exponent (4 = squircle, 5 = iOS style)
+ */
+var generateSuperellipsePath = function generateSuperellipsePath(size) {
+  var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  var r = size / 2;
+  var points = [];
+
+  // Generate points for the superellipse
+  for (var i = 0; i <= 360; i += 2) {
+    var angle = i * Math.PI / 180;
+    var cosAngle = Math.cos(angle);
+    var sinAngle = Math.sin(angle);
+
+    // Superellipse formula
+    var x = r * Math.sign(cosAngle) * Math.pow(Math.abs(cosAngle), 2 / n);
+    var y = r * Math.sign(sinAngle) * Math.pow(Math.abs(sinAngle), 2 / n);
+    points.push("".concat(r + x, ",").concat(r + y));
+  }
+  return "M".concat(points[0], "L").concat(points.slice(1).join('L'), "Z");
+};
+
+/**
+ * Create a Base64 encoded SVG mask for smooth corners
+ * @param options - Configuration options
+ */
+export var createSmoothCornersMask = function createSmoothCornersMask() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$size = options.size,
+    size = _options$size === void 0 ? 100 : _options$size,
+    _options$cornerValue = options.cornerValue,
+    cornerValue = _options$cornerValue === void 0 ? 4 : _options$cornerValue;
+  var path = generateSuperellipsePath(size, cornerValue);
+  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"").concat(path, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
+  return "data:image/svg+xml;base64,".concat(btoa(svg));
+};
+
+/**
+ * Create a Base64 encoded SVG mask for circle shape
+ * @param options - Configuration options
+ */
+export var createCircleMask = function createCircleMask() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$size2 = options.size,
+    size = _options$size2 === void 0 ? 100 : _options$size2;
+  var r = size / 2;
+  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"").concat(r, "\" cy=\"").concat(r, "\" r=\"").concat(r, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
+  return "data:image/svg+xml;base64,".concat(btoa(svg));
+};
+
+/**
+ * Create a Base64 encoded SVG mask for rounded rectangle
+ * @param options - Configuration options
+ */
+export var createRoundedRectMask = function createRoundedRectMask() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$size3 = options.size,
+    size = _options$size3 === void 0 ? 100 : _options$size3,
+    _options$borderRadius = options.borderRadius,
+    borderRadius = _options$borderRadius === void 0 ? 15 : _options$borderRadius;
+  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect x=\"0\" y=\"0\" width=\"").concat(size, "\" height=\"").concat(size, "\" rx=\"").concat(borderRadius, "\" ry=\"").concat(borderRadius, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
+  return "data:image/svg+xml;base64,".concat(btoa(svg));
+};
+
+/**
+ * Predefined smooth corners masks for common corner values
+ */
+export var SMOOTH_CORNER_MASKS = {
+  // Basic shapes
+  circle: createCircleMask(),
+  // Superellipse shapes
+  ios: createSmoothCornersMask({
+    cornerValue: 5
+  }),
+  sharp: createSmoothCornersMask({
+    cornerValue: 6
+  }),
+  smooth: createSmoothCornersMask({
+    cornerValue: 3
+  }),
+  square: createRoundedRectMask({
+    borderRadius: 15
+  }),
+  squircle: createSmoothCornersMask({
+    cornerValue: 4
+  })
+};
+
+/**
+ * CSS helper to apply smooth corners mask
+ */
+export var getSmoothCornersMaskStyle = function getSmoothCornersMaskStyle() {
+  var cornerType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'squircle';
+  return {
+    // WebKit prefix for better browser support
+    WebkitMaskImage: "url(\"".concat(SMOOTH_CORNER_MASKS[cornerType], "\")"),
+    WebkitMaskPosition: 'center',
+    WebkitMaskRepeat: 'no-repeat',
+    WebkitMaskSize: '100% 100%',
+    maskImage: "url(\"".concat(SMOOTH_CORNER_MASKS[cornerType], "\")"),
+    maskPosition: 'center',
+    maskRepeat: 'no-repeat',
+    maskSize: '100% 100%'
+  };
+};

package/dist/AiConversation/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * AiConversation 模块（v2.x）
+ *
+ * 自 v2.x 起，本模块底层切换到 lobe-ui 的对话组件实现，
+ * 源码已 fork 至 ./_lobe，可在该目录下做项目侧定制。
+ *
+ * 旧的 Ai* 组件（AiMessageBubble / AiPromptInput / ... 共 28 个）已废弃，
+ * 业务方请改用 lobe-ui 的 ChatItem / ChatList / ChatInputArea 等 API。
+ *
+ * 迁移指引见 docs/specs。
+ */
+export { BackBottom, type BackBottomProps, ChatActionsBar, type ChatActionsBarProps, ChatHeader, type ChatHeaderProps, ChatHeaderTitle, type ChatHeaderTitleProps, ChatInputActionBar, type ChatInputActionBarProps, ChatInputArea, ChatInputAreaInner, type ChatInputAreaInnerProps, type ChatInputAreaProps, ChatItem, type ChatItemProps, ChatList, type ChatListProps, ChatSendButton, type ChatSendButtonProps, EditableMessage, EditableMessageList, type EditableMessageListProps, type EditableMessageProps, LoadingDots, type LoadingDotsProps, MessageInput, type MessageInputProps, MessageModal, type MessageModalProps, type OnActionsClick, type OnAvatatsClick, type OnMessageChange, type RenderAction, type RenderErrorMessage, type RenderItem, type RenderMessage, type RenderMessageExtra, TokenTag, type TokenTagProps, } from './_lobe/chat';
+export { default as ConfigProvider, type Config as LobeUIConfig, useCdnFn, } from './_lobe/ConfigProvider';
+export { default as ThemeBridge, type YwkfThemeBridgeProps, } from './ThemeBridge';
+export { default as ThemeProvider } from './_lobe/ThemeProvider';
+export { MotionProvider } from './_lobe/MotionProvider';
+export { default as ActionIcon, type ActionIconProps, type ActionIconSize, } from './_lobe/ActionIcon';
+export { default as ActionIconGroup, type ActionIconGroupEvent, type ActionIconGroupItemType, type ActionIconGroupProps, } from './_lobe/ActionIconGroup';
+export { default as Alert, type AlertProps } from './_lobe/Alert';
+export { default as Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, } from './_lobe/Avatar';
+export { default as Block, type BlockProps } from './_lobe/Block';
+export { default as CopyButton, type CopyButtonProps } from './_lobe/CopyButton';
+export { default as DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, type DraggablePanelProps, } from './_lobe/DraggablePanel';
+export { default as EditableText } from './_lobe/EditableText';
+export { Flexbox, Center } from './_lobe/Flex';
+export { default as FluentEmoji } from './_lobe/FluentEmoji';
+export { default as Highlighter } from './_lobe/Highlighter';
+export { default as Hotkey } from './_lobe/Hotkey';
+export { default as Icon } from './_lobe/Icon';
+export { default as Markdown } from './_lobe/Markdown';
+export { default as Mermaid } from './_lobe/Mermaid';
+export { default as Snippet } from './_lobe/Snippet';
+export { default as Tag } from './_lobe/Tag';
+export { default as Tooltip } from './_lobe/Tooltip';
+export * from './_lobe/styles';
+export * from './_lobe/types';

package/dist/AiConversation/index.js

@@ -0,0 +1,46 @@
+/**
+ * AiConversation 模块（v2.x）
+ *
+ * 自 v2.x 起，本模块底层切换到 lobe-ui 的对话组件实现，
+ * 源码已 fork 至 ./_lobe，可在该目录下做项目侧定制。
+ *
+ * 旧的 Ai* 组件（AiMessageBubble / AiPromptInput / ... 共 28 个）已废弃，
+ * 业务方请改用 lobe-ui 的 ChatItem / ChatList / ChatInputArea 等 API。
+ *
+ * 迁移指引见 docs/specs。
+ */
+
+// === lobe-ui chat 域 ===
+export { BackBottom, ChatActionsBar, ChatHeader, ChatHeaderTitle, ChatInputActionBar, ChatInputArea, ChatInputAreaInner, ChatItem, ChatList, ChatSendButton, EditableMessage, EditableMessageList, LoadingDots, MessageInput, MessageModal, TokenTag } from "./_lobe/chat";
+
+// === 必备 Provider 组（业务方需要在应用根挂载）===
+export { default as ConfigProvider, useCdnFn } from "./_lobe/ConfigProvider";
+// 业务方推荐使用 ThemeBridge（已预置 4399 品牌主色与字体策略），
+// 仍需细调时再使用底层的 ThemeProvider。
+export { default as ThemeBridge } from "./ThemeBridge";
+export { default as ThemeProvider } from "./_lobe/ThemeProvider";
+export { MotionProvider } from "./_lobe/MotionProvider";
+
+// === 常用 UI 原子（chat 内部用到，业务方拼装也常用）===
+export { default as ActionIcon } from "./_lobe/ActionIcon";
+export { default as ActionIconGroup } from "./_lobe/ActionIconGroup";
+export { default as Alert } from "./_lobe/Alert";
+export { default as Avatar, AvatarGroup } from "./_lobe/Avatar";
+export { default as Block } from "./_lobe/Block";
+export { default as CopyButton } from "./_lobe/CopyButton";
+export { default as DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader } from "./_lobe/DraggablePanel";
+export { default as EditableText } from "./_lobe/EditableText";
+export { Flexbox, Center } from "./_lobe/Flex";
+export { default as FluentEmoji } from "./_lobe/FluentEmoji";
+export { default as Highlighter } from "./_lobe/Highlighter";
+export { default as Hotkey } from "./_lobe/Hotkey";
+export { default as Icon } from "./_lobe/Icon";
+export { default as Markdown } from "./_lobe/Markdown";
+export { default as Mermaid } from "./_lobe/Mermaid";
+export { default as Snippet } from "./_lobe/Snippet";
+export { default as Tag } from "./_lobe/Tag";
+export { default as Tooltip } from "./_lobe/Tooltip";
+
+// === 主题 / 样式工具 ===
+export * from "./_lobe/styles";
+export * from "./_lobe/types";

package/dist/Button/index.js

@@ -1,9 +1,16 @@
 var _excluded = ["tooltip", "children"];
+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 _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; }
+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 { Button as AntdButton, Tooltip as AntdTooltip } from 'antd';
 import React, { memo } from 'react';
 import useTooltipProps from "./hooks/useTooltipProps";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Tooltip = function Tooltip(_ref) {
   var children = _ref.children,
     tooltip = _ref.tooltip;
@@ -13,15 +20,20 @@ var Tooltip = function Tooltip(_ref) {
   if (!(tooltip !== null && tooltip !== void 0 && tooltip.title)) {
     return children;
   }
-  return /*#__PURE__*/React.createElement(AntdTooltip, tooltip, children);
+  return /*#__PURE__*/_jsx(AntdTooltip, _objectSpread(_objectSpread({}, tooltip), {}, {
+    children: children
+  }));
 };
 var Button = function Button(props) {
   var tooltip = props.tooltip,
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
   var tooltipProps = useTooltipProps(tooltip, rest.title, children);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    tooltip: tooltipProps
-  }, /*#__PURE__*/React.createElement(AntdButton, rest, children));
+  return /*#__PURE__*/_jsx(Tooltip, {
+    tooltip: tooltipProps,
+    children: /*#__PURE__*/_jsx(AntdButton, _objectSpread(_objectSpread({}, rest), {}, {
+      children: children
+    }))
+  });
 };
 export default /*#__PURE__*/memo(Button);

package/dist/CanvasEditor/index.js

@@ -12,6 +12,8 @@ import * as fabric from 'fabric';
 import { Resizable } from 're-resizable';
 import React, { useEffect, useRef, useState } from 'react';
 import "./styles/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function calculateRatio(a, b) {
   var gcd = function gcd(x, y) {
     return y === 0 ? x : gcd(y, x % y);
@@ -52,12 +54,7 @@ var calculateContainerSize = function calculateContainerSize(imgWidth, imgHeight
  * @param height - 画布高度，默认 600px
  */
 var ImageEditor = function ImageEditor(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 400 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 300 : _ref$height,
-    onChange = _ref.onChange,
-    value = _ref.value;
+  var value = _ref.value;
   var editorRef = useRef(null);
   // Canvas DOM 引用
   var canvasRef = useRef(null);
@@ -68,9 +65,8 @@ var ImageEditor = function ImageEditor(_ref) {
     setCanvas = _useState2[1];
   // 添加当前图片的引用
   var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentImage = _useState4[0],
-    setCurrentImage = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 1),
+    currentImage = _useState4[0];
 
   // 存储宽高比状态 (width:height)
   // 从 value.size 中获取宽高比，格式为{width: number, height: number}
@@ -96,9 +92,6 @@ var ImageEditor = function ImageEditor(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     imageScale = _useState10[0],
     setImageScale = _useState10[1];
-
-  // 添加实时尺寸引用
-  var wrapperRef = useRef(null);
   var tempChangeSize = useRef({
     width: 0,
     height: 0
@@ -202,11 +195,11 @@ var ImageEditor = function ImageEditor(_ref) {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var entry = _step.value;
           var _entry$contentRect = entry.contentRect,
-            _width = _entry$contentRect.width,
-            _height = _entry$contentRect.height;
+            width = _entry$contentRect.width,
+            height = _entry$contentRect.height;
           setEditorSize({
-            width: _width,
-            height: _height
+            width: width,
+            height: height
           });
         }
       } catch (err) {
@@ -232,11 +225,11 @@ var ImageEditor = function ImageEditor(_ref) {
     }; // 默认 4:3
     if (value !== null && value !== void 0 && value.aspectRatio) {
       var _value$aspectRatio = _slicedToArray(value.aspectRatio, 2),
-        _width2 = _value$aspectRatio[0],
-        _height2 = _value$aspectRatio[1];
+        width = _value$aspectRatio[0],
+        height = _value$aspectRatio[1];
       aspectRatio = {
-        width: _width2,
-        height: _height2
+        width: width,
+        height: height
       };
     }
 
@@ -265,12 +258,12 @@ var ImageEditor = function ImageEditor(_ref) {
     if (value && value.size) {
       // 解析比例字符串 (例如 "16:9")
       var _value$size = _slicedToArray(value.size, 2),
-        _width3 = _value$size[0],
-        _height3 = _value$size[1];
-      if (_width3 !== size.width || _height3 !== size.height) {
+        width = _value$size[0],
+        height = _value$size[1];
+      if (width !== size.width || height !== size.height) {
         setSize({
-          width: _width3,
-          height: _height3
+          width: width,
+          height: height
         });
       }
     }
@@ -370,10 +363,6 @@ var ImageEditor = function ImageEditor(_ref) {
       targetWidth = targetHeight * imageAspectRatio;
     }
 
-    // 计算缩放比例
-    var scaleX = targetWidth / currentImage.width;
-    var scaleY = targetHeight / currentImage.height;
-
     // 使用 set 方法设置缩放值
     // currentImage.set({
     //   scaleX: scaleX,
@@ -397,63 +386,73 @@ var ImageEditor = function ImageEditor(_ref) {
     border: 'solid 1px #ddd'
     // background: '#f0f0f0',
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "image-editor",
-    ref: editorRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "toolbar"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "file",
-    id: "imageUpload",
-    accept: "image/*",
-    onChange: handleImageUpload,
-    style: {
-      display: 'none'
-    }
-  }), /*#__PURE__*/React.createElement("div", null, "\u6BD4\u4F8B\uFF1A", "".concat(calculateRatio(size.width, size.height))), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "imageUpload",
-    className: "tool-btn"
-  }, /*#__PURE__*/React.createElement(UploadOutlined, null), " \u4E0A\u4F20"), currentImage && /*#__PURE__*/React.createElement("div", {
-    className: "scale-control"
-  }, /*#__PURE__*/React.createElement("span", null, "\u5BB9\u5668\u6BD4\u4F8B\uFF1A"), /*#__PURE__*/React.createElement(Slider, {
-    className: "scale-slider",
-    min: 10,
-    max: 100,
-    value: imageScale,
-    onChange: handleScaleChange,
-    tooltip: {
-      formatter: function formatter(value) {
-        return "".concat(value, "%");
-      }
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: "canvas-container"
-  }, /*#__PURE__*/React.createElement(Resizable
-  // size={calculateWrapperSize(editorSize, aspectRatio)}
-  , {
-    size: size,
-    style: style,
-    onResize: handleResize,
-    onResizeStop: handleResizeStop,
-    minWidth: 200,
-    minHeight: 200,
-    grid: [10, 10],
-    bounds: "parent",
-    enable: {
-      top: true,
-      right: true,
-      bottom: true,
-      left: true,
-      topRight: false,
-      bottomRight: false,
-      bottomLeft: false,
-      topLeft: false
-    },
-    className: "canvas-wrapper"
-  }, /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
-    className: "canvas"
-  }))));
+    ref: editorRef,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "toolbar",
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "file",
+        id: "imageUpload",
+        accept: "image/*",
+        onChange: handleImageUpload,
+        style: {
+          display: 'none'
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["\u6BD4\u4F8B\uFF1A", "".concat(calculateRatio(size.width, size.height))]
+      }), /*#__PURE__*/_jsxs("label", {
+        htmlFor: "imageUpload",
+        className: "tool-btn",
+        children: [/*#__PURE__*/_jsx(UploadOutlined, {}), " \u4E0A\u4F20"]
+      }), currentImage && /*#__PURE__*/_jsxs("div", {
+        className: "scale-control",
+        children: [/*#__PURE__*/_jsx("span", {
+          children: "\u5BB9\u5668\u6BD4\u4F8B\uFF1A"
+        }), /*#__PURE__*/_jsx(Slider, {
+          className: "scale-slider",
+          min: 10,
+          max: 100,
+          value: imageScale,
+          onChange: handleScaleChange,
+          tooltip: {
+            formatter: function formatter(value) {
+              return "".concat(value, "%");
+            }
+          }
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      ref: containerRef,
+      className: "canvas-container",
+      children: /*#__PURE__*/_jsx(Resizable
+      // size={calculateWrapperSize(editorSize, aspectRatio)}
+      , {
+        size: size,
+        style: style,
+        onResize: handleResize,
+        onResizeStop: handleResizeStop,
+        minWidth: 200,
+        minHeight: 200,
+        grid: [10, 10],
+        bounds: "parent",
+        enable: {
+          top: true,
+          right: true,
+          bottom: true,
+          left: true,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false
+        },
+        className: "canvas-wrapper",
+        children: /*#__PURE__*/_jsx("canvas", {
+          ref: canvasRef,
+          className: "canvas"
+        })
+      })
+    })]
+  });
 };
 export default ImageEditor;

package/dist/CanvasEditor/styles/index.less

@@ -5,6 +5,7 @@
   align-items: center;
   height: 100%; // 确保容器高度
   width: 100%;
+
   .canvas-container {
     position: relative;
     display: flex;
@@ -22,16 +23,16 @@
       &::before {
         content: '';
         position: absolute;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
         background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
           linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
           linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
           linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
         background-size: 20px 20px;
-        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0;
         z-index: 0;
       }
 

package/dist/FormDesigner/Provider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;