@luck-design-biz/luckda 0.0.25-14 → 0.0.25-16

package/lib/lowcode/engine/tools/usePageDataStore.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTemporalStore = exports.useTask = exports.useGet = exports.resetPageData = exports.modifyNode = exports.getSelfAndParent = exports.getLevelNodes = exports.getCanUndoAndRedo = exports.deleteNode = exports.default = exports.addNode = void 0;
+exports.useTemporalStore = exports.useTask = exports.useGet = exports.resetPageData = exports.modifyNode = exports.getSelfAndParent = exports.getLevelNodes = exports.getCanUndoAndRedo = exports.deleteNode = exports.default = exports.clearChildren = exports.addNode = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
@@ -252,6 +252,20 @@ var modifyNode = exports.modifyNode = function modifyNode(id, data) {
     });
   });
 };
+var clearChildren = exports.clearChildren = function clearChildren(id) {
+  usePageDataStore.setState(function (state) {
+    if (id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT) {
+      return;
+    }
+    var _ref4 = findNode(state.pageData, id) || {},
+      target = _ref4.target;
+    if (!target) return;
+    (0, _lodash.forEach)(target.children, function (c) {
+      delete target[c];
+    });
+    delete target['children'];
+  });
+};
 var useTask = exports.useTask = function useTask(type) {
   var promiseRef = (0, _react.useRef)(null);
   var task = (0, _react.useCallback)(function () {

package/lib/lowcode/painter/Components.js

@@ -95,8 +95,8 @@ var CompItem = function CompItem(_ref2) {
   }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
 };
 
-/**
- * 组件清单
+/**
+ * 组件清单
  */
 var Components = function Components(_ref3) {
   var _ref3$dataset = _ref3.dataset,

package/lib/lowcode/painter/components/Collapse.js

@@ -11,32 +11,32 @@ var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _collapse = _interopRequireDefault(require("../style/collapse.less"));
 var _antd = require("luck-design/antd");
-/**
- * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
- * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
- * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
- *
- * @component
- * @example
- * <Collapse
- *   field="exampleField"
- *   label="示例标签"
- *   desc="这是一个用于演示的折叠组件"
- *   defaultCollapsed={true}
- *   next={() => console.log('Custom next function executed')}
- * >
- *   <p>这里是可折叠的内容</p>
- * </Collapse>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
- * @param {string} [props.field] - 与折叠内容相关联的字段名。
- * @param {string} props.label - 折叠区域的标签名称。
- * @param {string} [props.desc] - 关于折叠内容的描述信息。
- * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
- * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
+/**
+ * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
+ * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
+ * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
+ *
+ * @component
+ * @example
+ * <Collapse
+ *   field="exampleField"
+ *   label="示例标签"
+ *   desc="这是一个用于演示的折叠组件"
+ *   defaultCollapsed={true}
+ *   next={() => console.log('Custom next function executed')}
+ * >
+ *   <p>这里是可折叠的内容</p>
+ * </Collapse>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
+ * @param {string} [props.field] - 与折叠内容相关联的字段名。
+ * @param {string} props.label - 折叠区域的标签名称。
+ * @param {string} [props.desc] - 关于折叠内容的描述信息。
+ * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
+ * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/components/ColorInput.js

@@ -17,30 +17,30 @@ var _antd = require("luck-design/antd");
 var _colorInput = _interopRequireDefault(require("../style/color-input.less"));
 var _reactColor = require("react-color");
 var _excluded = ["value", "onChange", "wrapperStyle"];
-/**
- * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
- * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
- * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
- * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
- *
- * @component
- * @example
- * const handleColorChange = (newColor) => {
- *   console.log('Selected color:', newColor);
- * };
- * <ColorInput
- *   value="rgba(255, 0, 0, 0.5)"
- *   onChange={handleColorChange}
- *   wrapperStyle={{ margin: '20px' }}
- * />
- *
- * @param {Object} props - 组件的属性。
- * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
- * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
- * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
- * @param {Object} rest - 传递给 Input 组件的其他属性。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
+/**
+ * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
+ * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
+ * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
+ * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
+ *
+ * @component
+ * @example
+ * const handleColorChange = (newColor) => {
+ *   console.log('Selected color:', newColor);
+ * };
+ * <ColorInput
+ *   value="rgba(255, 0, 0, 0.5)"
+ *   onChange={handleColorChange}
+ *   wrapperStyle={{ margin: '20px' }}
+ * />
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
+ * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
+ * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
+ * @param {Object} rest - 传递给 Input 组件的其他属性。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
  */
 var ColorInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,

package/lib/lowcode/painter/components/ListEditor.js

@@ -10,14 +10,14 @@ var _react = _interopRequireDefault(require("react"));
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _listEditor = _interopRequireDefault(require("../style/list-editor.less"));
-/**
- * ListEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
- * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 ListEditorItem 组件。
- *
- * @param {Object} props - 组件接收的属性。
- * @param {ReactNode} props.children - ListEditorItem 组件的实例，表示可编辑的标签项。
- * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
- * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
+/**
+ * ListEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
+ * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 ListEditorItem 组件。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {ReactNode} props.children - ListEditorItem 组件的实例，表示可编辑的标签项。
+ * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
+ * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
  */
 var ListEditor = exports.ListEditor = function ListEditor(_ref) {
   var children = _ref.children,
@@ -47,22 +47,22 @@ var ListEditor = exports.ListEditor = function ListEditor(_ref) {
   }))));
 };
 
-/**
- * ListEditorItem 是一个可编辑的标签项组件，用于在 ListEditor 容器内展示。
- * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
- *
- * @param {Object} props - 组件接收的属性。
- * @param {Object} props.item - 表示标签项数据的对象。
- * @param {ReactNode} props.left - 放置在标签项左侧的内容，通常用于展示标签名称或其他信息。
- * @param {ReactNode} props.right - 放置在标签项右侧的内容，通常用于展示操作按钮如编辑或删除。
- * @param {Function} props.setNodeRef - 用于设置拖拽组件根节点的引用。
- * @param {Function} props.setActivatorNodeRef - 用于设置激活拖拽操作的节点引用。
- * @param {Object} props.style - 应用于标签项的样式对象，通常包含拖拽过程中的动态变化样式。
- * @param {Object} props.attributes - 包含与拖拽相关的HTML属性。
- * @param {Object} props.listeners - 包含处理拖拽事件的监听器。
- * @param {CSSProperties} props.transform - 应用于组件的CSS变换属性，用于实现拖拽效果。
- * @param {string} props.transition - 定义拖拽动画的CSS过渡属性。
- * @returns {ReactNode} 渲染一个可编辑的标签项，支持拖拽排序。
+/**
+ * ListEditorItem 是一个可编辑的标签项组件，用于在 ListEditor 容器内展示。
+ * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {Object} props.item - 表示标签项数据的对象。
+ * @param {ReactNode} props.left - 放置在标签项左侧的内容，通常用于展示标签名称或其他信息。
+ * @param {ReactNode} props.right - 放置在标签项右侧的内容，通常用于展示操作按钮如编辑或删除。
+ * @param {Function} props.setNodeRef - 用于设置拖拽组件根节点的引用。
+ * @param {Function} props.setActivatorNodeRef - 用于设置激活拖拽操作的节点引用。
+ * @param {Object} props.style - 应用于标签项的样式对象，通常包含拖拽过程中的动态变化样式。
+ * @param {Object} props.attributes - 包含与拖拽相关的HTML属性。
+ * @param {Object} props.listeners - 包含处理拖拽事件的监听器。
+ * @param {CSSProperties} props.transform - 应用于组件的CSS变换属性，用于实现拖拽效果。
+ * @param {string} props.transition - 定义拖拽动画的CSS过渡属性。
+ * @returns {ReactNode} 渲染一个可编辑的标签项，支持拖拽排序。
  */
 var ListEditorItem = exports.ListEditorItem = function ListEditorItem(_ref2) {
   var item = _ref2.item,

package/lib/lowcode/painter/components/NumberInput.js

@@ -15,34 +15,34 @@ var _numberInput = _interopRequireDefault(require("../style/number-input.less"))
 var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _excluded = ["value", "options", "onChange", "defaultValue", "allowNull", "convertInt"];
-/**
- * NumberInput 组件是一个带单位选择的数字输入框组件，允许用户输入一个数值并从预定义的选项中选择一个单位。
- * 它支持默认值、空值、自动类型转换以及自定义更改处理逻辑。
- * 组件内部通过 Dropdown 组件提供一个单位的下拉选择菜单，并通过 InputNumber 接收数值输入。
- * 该组件也支持将输入值转换为整数或保持为原始格式，并允许通过 options 定制可选单位。
- * 
- * @component
- * @example
- * const options = [{ value: 'px', label: '像素' }, { value: '%', label: '百分比' }];
- * <NumberInput
- *   value={100}
- *   options={options}
- *   onChange={(newValue) => console.log('New value:', newValue)}
- *   defaultValue={0}
- *   allowNull={true}
- *   convertInt={false}
- * />
- * 
- * @param {Object} props - 组件的属性。
- * @param {number|string} props.value - 初始化输入框的值。
- * @param {Object[]} props.options - 可选单位的数组，每个对象包含 value（单位的值）和 label（显示在下拉菜单中的标签）。
- * @param {Function} props.onChange - 当输入值或单位改变时触发的回调函数。传递新的值作为参数。
- * @param {number|string} [props.defaultValue] - 未指定 value 时的默认值。
- * @param {boolean} [props.allowNull=true] - 是否允许空值。
- * @param {boolean} [props.convertInt=false] - 是否将输入值转换为整数。
- * @param {Object} rest - 传递给 InputNumber 组件的其他属性。
- * 
- * @returns {ReactElement} 返回一个 React 元素，表示一个带单位选择的数字输入框组件。
+/**
+ * NumberInput 组件是一个带单位选择的数字输入框组件，允许用户输入一个数值并从预定义的选项中选择一个单位。
+ * 它支持默认值、空值、自动类型转换以及自定义更改处理逻辑。
+ * 组件内部通过 Dropdown 组件提供一个单位的下拉选择菜单，并通过 InputNumber 接收数值输入。
+ * 该组件也支持将输入值转换为整数或保持为原始格式，并允许通过 options 定制可选单位。
+ * 
+ * @component
+ * @example
+ * const options = [{ value: 'px', label: '像素' }, { value: '%', label: '百分比' }];
+ * <NumberInput
+ *   value={100}
+ *   options={options}
+ *   onChange={(newValue) => console.log('New value:', newValue)}
+ *   defaultValue={0}
+ *   allowNull={true}
+ *   convertInt={false}
+ * />
+ * 
+ * @param {Object} props - 组件的属性。
+ * @param {number|string} props.value - 初始化输入框的值。
+ * @param {Object[]} props.options - 可选单位的数组，每个对象包含 value（单位的值）和 label（显示在下拉菜单中的标签）。
+ * @param {Function} props.onChange - 当输入值或单位改变时触发的回调函数。传递新的值作为参数。
+ * @param {number|string} [props.defaultValue] - 未指定 value 时的默认值。
+ * @param {boolean} [props.allowNull=true] - 是否允许空值。
+ * @param {boolean} [props.convertInt=false] - 是否将输入值转换为整数。
+ * @param {Object} rest - 传递给 InputNumber 组件的其他属性。
+ * 
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带单位选择的数字输入框组件。
  */
 function _default(_ref) {
   var value = _ref.value,

package/lib/lowcode/painter/components/PanelItem.js

@@ -14,30 +14,30 @@ var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _panelItem = _interopRequireDefault(require("../style/panel-item.less"));
-/**
- * `PanelItem` 组件用于展示属性面板中的单个属性项。
- * 它支持展示一个标签（属性名称）及对应的组件（例如输入框、选择器等），并可通过传入的 `addon` 属性添加额外的内容。
- * 此组件支持折叠功能，可以通过 `collapsed` 属性控制初始折叠状态。
- *
- * @component
- * @example
- * ```jsx
- * <PanelItem
- *   label="属性名称"
- *   collapsed={false}
- *   addon={<div>额外内容</div>}
- * >
- *   <input type="text" />
- * </PanelItem>
- * ```
- *
- * @param {Object} props 组件接收的参数。
- * @param {string} props.label 显示的属性名称。如果标签以 `#` 开头，则不显示。
- * @param {boolean} [props.collapsed=true] 初始是否折叠。默认为 `true`。
- * @param {React.ReactNode} props.addon 当属性项展开时，可以在下方显示额外内容。
- * @param {React.ReactNode} props.children 对应于属性名称的组件，可以是输入框、下拉菜单等 React 节点。
- *
- * @returns {React.Element} 渲染属性名称、对应的组件以及可选的额外内容。
+/**
+ * `PanelItem` 组件用于展示属性面板中的单个属性项。
+ * 它支持展示一个标签（属性名称）及对应的组件（例如输入框、选择器等），并可通过传入的 `addon` 属性添加额外的内容。
+ * 此组件支持折叠功能，可以通过 `collapsed` 属性控制初始折叠状态。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <PanelItem
+ *   label="属性名称"
+ *   collapsed={false}
+ *   addon={<div>额外内容</div>}
+ * >
+ *   <input type="text" />
+ * </PanelItem>
+ * ```
+ *
+ * @param {Object} props 组件接收的参数。
+ * @param {string} props.label 显示的属性名称。如果标签以 `#` 开头，则不显示。
+ * @param {boolean} [props.collapsed=true] 初始是否折叠。默认为 `true`。
+ * @param {React.ReactNode} props.addon 当属性项展开时，可以在下方显示额外内容。
+ * @param {React.ReactNode} props.children 对应于属性名称的组件，可以是输入框、下拉菜单等 React 节点。
+ *
+ * @returns {React.Element} 渲染属性名称、对应的组件以及可选的额外内容。
  */
 function _default(_ref) {
   var field = _ref.field,

package/lib/lowcode/painter/components/PopConfirm.js

@@ -13,14 +13,14 @@ var _antd = require("luck-design/antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _popConfirm = _interopRequireDefault(require("../style/pop-confirm.less"));
 var _excluded = ["showBtn"];
-/**
- * 这个组件是对 luck-design/antd 的 Popconfirm 组件的封装。
- * 它提供了一个带有自定义样式的弹出确认框，用于在用户尝试执行重要操作前提示确认信息。
- * 通过传入的 props 可以自定义 Popconfirm 组件的行为和外观。
- *
- * @param {Object} props - 传递给 Popconfirm 组件的属性。这包括所有标准的 Popconfirm 属性，
- *                         以及任何额外的属性，如事件处理器或自定义内容。
- * @returns {ReactNode} 返回一个配置了自定义样式和指定属性的 Popconfirm 组件实例。
+/**
+ * 这个组件是对 luck-design/antd 的 Popconfirm 组件的封装。
+ * 它提供了一个带有自定义样式的弹出确认框，用于在用户尝试执行重要操作前提示确认信息。
+ * 通过传入的 props 可以自定义 Popconfirm 组件的行为和外观。
+ *
+ * @param {Object} props - 传递给 Popconfirm 组件的属性。这包括所有标准的 Popconfirm 属性，
+ *                         以及任何额外的属性，如事件处理器或自定义内容。
+ * @returns {ReactNode} 返回一个配置了自定义样式和指定属性的 Popconfirm 组件实例。
  */
 function _default(_ref) {
   var _ref$showBtn = _ref.showBtn,

package/lib/lowcode/painter/components/PopForm.js

@@ -13,12 +13,12 @@ var _excluded = ["children"],
   _excluded2 = ["children"],
   _excluded3 = ["children"],
   _excluded4 = ["children"];
-/**
- * PopForm 是一个为弹出式表单布局提供容器的组件，它使用特定的样式来组织表单内容。
- * 
- * @param {Object} props - 组件的 props。
- * @param {ReactNode} props.children - 组件内包含的子元素。
- * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+/**
+ * PopForm 是一个为弹出式表单布局提供容器的组件，它使用特定的样式来组织表单内容。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
  */
 var PopForm = exports.PopForm = function PopForm(_ref) {
   var children = _ref.children,
@@ -28,13 +28,13 @@ var PopForm = exports.PopForm = function PopForm(_ref) {
   }, rest), children);
 };
 
-/**
- * PopFormItem 是 PopForm 组件的一个子项，用于包装表单的每个独立字段。
- * 它提供了一致的布局和样式封装，用于表单项的展示。
- * 
- * @param {Object} props - 组件的 props。
- * @param {ReactNode} props.children - 组件内包含的子元素。
- * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+/**
+ * PopFormItem 是 PopForm 组件的一个子项，用于包装表单的每个独立字段。
+ * 它提供了一致的布局和样式封装，用于表单项的展示。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
  */
 var PopFormItem = exports.PopFormItem = function PopFormItem(_ref2) {
   var children = _ref2.children,
@@ -44,13 +44,13 @@ var PopFormItem = exports.PopFormItem = function PopFormItem(_ref2) {
   }, rest), children);
 };
 
-/**
- * PopFormItemLeft 是 PopFormItem 的子组件，用于展示表单项的标签或标题部分。
- * 它通常用于放置字段名或说明性文本。
- * 
- * @param {Object} props - 组件的 props。
- * @param {ReactNode} props.children - 组件内包含的子元素。
- * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+/**
+ * PopFormItemLeft 是 PopFormItem 的子组件，用于展示表单项的标签或标题部分。
+ * 它通常用于放置字段名或说明性文本。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
  */
 var PopFormItemLeft = exports.PopFormItemLeft = function PopFormItemLeft(_ref3) {
   var children = _ref3.children,
@@ -60,13 +60,13 @@ var PopFormItemLeft = exports.PopFormItemLeft = function PopFormItemLeft(_ref3)
   }, rest), children);
 };
 
-/**
- * PopFormItemRight 是 PopFormItem 的子组件，用于包含表单项的输入字段。
- * 它是表单项布局中用于用户输入的部分，可以容纳各种类型的输入控件。
- * 
- * @param {Object} props - 组件的 props。
- * @param {ReactNode} props.children - 组件内包含的子元素。
- * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+/**
+ * PopFormItemRight 是 PopFormItem 的子组件，用于包含表单项的输入字段。
+ * 它是表单项布局中用于用户输入的部分，可以容纳各种类型的输入控件。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
  */
 var PopFormItemRight = exports.PopFormItemRight = function PopFormItemRight(_ref4) {
   var children = _ref4.children,

package/lib/lowcode/painter/components/PreviewIframe.js

@@ -1,17 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
-var _ahooks = require("ahooks");
+var _react = _interopRequireDefault(require("react"));
+var _umi = require("umi");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _preview = _interopRequireDefault(require("../../preview"));
+var _ahooks = require("ahooks");
 var Iframe = _styledComponents.default.iframe.withConfig({
   displayName: "Iframe",
   componentId: "luckda-6530__sc-cyloc5-0"
@@ -19,45 +16,11 @@ var Iframe = _styledComponents.default.iframe.withConfig({
 var PreviewIframe = function PreviewIframe(_ref) {
   var code = _ref.code,
     userId = _ref.userId;
-  var ref = (0, _react.useRef)();
-  var _useBoolean = (0, _ahooks.useBoolean)(false),
-    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
-    isMount = _useBoolean2[0],
-    setTrue = _useBoolean2[1].setTrue;
-  (0, _react.useEffect)(function () {
-    var styles = Array.from(document.styleSheets).map(function (styleSheet) {
-      if (styleSheet.href) {
-        var link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = styleSheet.href;
-        return link;
-      } else {
-        try {
-          var style = document.createElement('style');
-          style.textContent = Array.from(styleSheet.cssRules).map(function (rule) {
-            return rule.cssText;
-          }).join('\n');
-          return style;
-        } catch (e) {
-          console.error(e);
-          return null;
-        }
-      }
-    }).filter(Boolean);
-    styles.forEach(function (style) {
-      return ref.current.contentDocument.head.appendChild(style);
-    });
-    ref.current.contentDocument.body.setAttribute('luck-theme', 'base');
-    setTrue();
-  }, []);
+  var basename = (0, _ahooks.useCreation)(function () {
+    return (0, _umi.getCreateHistoryOptions)().basename;
+  });
   return /*#__PURE__*/_react.default.createElement(Iframe, {
-    ref: ref
-  }, isMount && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
-    id: "root"
-  }, /*#__PURE__*/_react.default.createElement(_preview.default, {
-    code: code,
-    userId: userId,
-    debug: true
-  })), ref.current.contentDocument.body));
+    src: "".concat(basename === '/' ? '' : basename, "/byteman/preview?code=").concat(code, "&user=").concat(userId)
+  });
 };
 var _default = exports.default = PreviewIframe;

package/lib/lowcode/painter/components/RuleInput.js

@@ -17,36 +17,36 @@ var _antd = require("luck-design/antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ruleInput = _interopRequireDefault(require("../style/rule-input.less"));
 var _excluded = ["onValueChange", "rules", "value", "defaultValue"];
-/**
- * 带校验功能的输入组件。
- *
- * 此组件封装了antd的Input组件，并增加了输入值的校验功能。它允许开发者定义一组校验规则，
- * 以确保用户输入符合特定要求。每条规则由一个校验函数和一个错误信息组成。如果用户的输入
- * 不满足任何一条规则，将展示相应的错误信息提示。
- *
- * @component
- * @example
- * <RuleInput
- *   value="示例值"
- *   onValueChange={(e, newValue) => console.log('新值:', newValue)}
- *   rules={[
- *     { func: value => !!value, err: '输入不能为空' },
- *     { func: value => /^\d+$/.test(value), err: '只允许输入数字' }
- *   ]}
- * />
- *
- * @param {Object} props 组件接收的props
- * @param {string} props.value 输入框当前的值，可以由外部控制以实现受控组件。
- * @param {Function} props.onValueChange 当输入值改变并通过所有校验时，触发的回调函数。
- * 该函数接收原生的事件对象和新的输入值作为参数。
- * @param {Array<{func: (value: string) => boolean, err: string}>} props.rules
- * 定义输入校验规则的数组。每个元素是一个对象，其中`func`属性是一个函数，用于执行校验逻辑，
- * 接收当前输入值作为参数，返回一个布尔值表示校验是否通过；`err`属性是一个字符串，指定当
- * 校验失败时要显示的错误信息。
- * @param {Object} rest 传递给内部Input组件的其他props，如`placeholder`、`disabled`等。
- * @param {React.Ref} ref React ref对象，用于将ref传递给内部的Input DOM元素。
- *
- * @returns React元素，渲染一个带有校验功能的输入框和校验失败时的错误信息提示。
+/**
+ * 带校验功能的输入组件。
+ *
+ * 此组件封装了antd的Input组件，并增加了输入值的校验功能。它允许开发者定义一组校验规则，
+ * 以确保用户输入符合特定要求。每条规则由一个校验函数和一个错误信息组成。如果用户的输入
+ * 不满足任何一条规则，将展示相应的错误信息提示。
+ *
+ * @component
+ * @example
+ * <RuleInput
+ *   value="示例值"
+ *   onValueChange={(e, newValue) => console.log('新值:', newValue)}
+ *   rules={[
+ *     { func: value => !!value, err: '输入不能为空' },
+ *     { func: value => /^\d+$/.test(value), err: '只允许输入数字' }
+ *   ]}
+ * />
+ *
+ * @param {Object} props 组件接收的props
+ * @param {string} props.value 输入框当前的值，可以由外部控制以实现受控组件。
+ * @param {Function} props.onValueChange 当输入值改变并通过所有校验时，触发的回调函数。
+ * 该函数接收原生的事件对象和新的输入值作为参数。
+ * @param {Array<{func: (value: string) => boolean, err: string}>} props.rules
+ * 定义输入校验规则的数组。每个元素是一个对象，其中`func`属性是一个函数，用于执行校验逻辑，
+ * 接收当前输入值作为参数，返回一个布尔值表示校验是否通过；`err`属性是一个字符串，指定当
+ * 校验失败时要显示的错误信息。
+ * @param {Object} rest 传递给内部Input组件的其他props，如`placeholder`、`disabled`等。
+ * @param {React.Ref} ref React ref对象，用于将ref传递给内部的Input DOM元素。
+ *
+ * @returns React元素，渲染一个带有校验功能的输入框和校验失败时的错误信息提示。
  */
 var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var onValueChange = _ref.onValueChange,