@luck-design-biz/luckda 0.0.22-4 → 0.0.22-6

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

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onValueChange", "rules", "value"];
+import React, { forwardRef, useState, useEffect } from 'react';
+import { Input, Tooltip } from 'luck-design/antd';
+import classNames from 'classnames';
+import styles from "../style/rule-input.less";
+
+/**
+ * 带校验功能的输入组件。
+ *
+ * 此组件封装了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元素，渲染一个带有校验功能的输入框和校验失败时的错误信息提示。
+ */
+export default /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onValueChange = _ref.onValueChange,
+    rules = _ref.rules,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1]; // 托管输入值的状态
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    err = _useState4[0],
+    setErr = _useState4[1];
+
+  // 使用useEffect钩子监听value的变化
+  useEffect(function () {
+    setInputValue(value);
+    setErr(null);
+  }, [value]);
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+    setInputValue(value); // 更新托管的输入值
+
+    if (value == '') onValueChange(e, value);
+    var error = null;
+
+    // 遍历rules，检查输入值是否满足条件
+    var _iterator = _createForOfIteratorHelper(rules),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var rule = _step.value;
+        if (!rule.func(value)) {
+          error = rule.err;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (!error) {
+      setErr(null);
+      onValueChange(e, value);
+    } else {
+      setErr(error);
+      console.error(error);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: err,
+    visible: err
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    className: classNames(styles['lc-painter-components-ruleinput'], _defineProperty({}, styles.err, !!err)),
+    size: "small",
+    value: inputValue // 绑定输入值
+    ,
+    onChange: handleInputChange
+  }, rest, {
+    ref: ref
+  }))));
+});

package/es/lowcode/painter/components/SortBox.js

@@ -0,0 +1,92 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+/**
+ * SortBox 是一个使用 dnd-kit 实现拖拽排序的组件。
+ * 它允许子元素通过拖拽操作来重新排序，并在排序操作完成后通过 onChange 回调传递新的排序结果。
+ * 
+ * @param {Object} props 组件的 props。
+ * @param {Array} props.datas 初始排序的数据数组，通常包含用于排序的唯一标识符。
+ * @param {ReactNode} props.children 组件的子元素，通常是需要进行排序的元素集合。
+ * @param {Function} props.onChange 当排序操作完成时触发的回调函数，参数为重新排序后的数据数组。
+ * @param {Function} [props.strategy=verticalListSortingStrategy] 用于排序的策略。默认为垂直列表排序策略。
+ * 
+ * @returns {ReactNode} 返回一个配置了 DndContext 和 SortableContext 的 React 组件结构。
+ */
+export var SortBox = function SortBox(_ref) {
+  var datas = _ref.datas,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    strategy = _ref.strategy;
+  var _useState = useState(datas),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var sortStrategy = strategy !== null && strategy !== void 0 ? strategy : verticalListSortingStrategy;
+  useEffect(function () {
+    setItems(datas);
+  }, [datas]);
+  function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (active.id !== over.id) {
+      setItems(function (items) {
+        var oldIndex = items.indexOf(active.id);
+        var newIndex = items.indexOf(over.id);
+        var newSortItem = arrayMove(items, oldIndex, newIndex);
+        if (onChange) onChange(newSortItem);
+        return newSortItem;
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(DndContext, {
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    strategy: sortStrategy,
+    items: items
+  }, children));
+};
+
+/**
+ * SortItem 组件是一个使用 dnd-kit 实现的可排序项。它通过 useSortable 钩子来提供拖拽功能，
+ * 并将必要的属性和监听器传递给其子元素，使得子元素可拖拽。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {string} props.id - 该排序项的唯一标识符，用于识别不同的可排序元素。
+ * @param {ReactNode} props.children - 该组件的子元素。通常是你希望使之可拖拽的元素。
+ *                                    SortItem 会将拖拽相关的 props 注入到这个子元素中。
+ * 
+ * @returns {ReactNode} 返回一个增强后的 React 元素，此元素集成了拖拽功能。
+ *                      它基于原 children 元素，附加了用于拖拽的属性和样式。
+ */
+export var SortItem = function SortItem(_ref2) {
+  var id = _ref2.id,
+    children = _ref2.children;
+  var _useSortable = useSortable({
+      id: id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    setActivatorNodeRef = _useSortable.setActivatorNodeRef;
+  var style = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition
+  };
+  var childWithProps = /*#__PURE__*/React.cloneElement(children, {
+    key: id,
+    attributes: attributes,
+    listeners: listeners,
+    setNodeRef: setNodeRef,
+    transform: transform,
+    transition: transition,
+    setActivatorNodeRef: setActivatorNodeRef,
+    style: style
+  });
+  return childWithProps;
+};

package/es/lowcode/painter/components/TabEditor.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { Icon } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import styles from "../style/tabeditor.less";
+
+/**
+ * TabEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
+ * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 TabEditorItem 组件。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {ReactNode} props.children - TabEditorItem 组件的实例，表示可编辑的标签项。
+ * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
+ * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
+ */
+export var TabEditor = function TabEditor(_ref) {
+  var children = _ref.children,
+    handleAdd = _ref.handleAdd;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-components-tabeditor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['tabs-box']
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: styles['tabs-actions']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['tabs-action'],
+    onClick: handleAdd
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "plus-circle"
+  }), ' ', formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.components.tabeditor.add',
+    label: '添加一项'
+  }))));
+};
+
+/**
+ * TabEditorItem 是一个可编辑的标签项组件，用于在 TabEditor 容器内展示。
+ * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
+ *
+ * @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} 渲染一个可编辑的标签项，支持拖拽排序。
+ */
+export var TabEditorItem = function TabEditorItem(_ref2) {
+  var item = _ref2.item,
+    left = _ref2.left,
+    right = _ref2.right,
+    setNodeRef = _ref2.setNodeRef,
+    setActivatorNodeRef = _ref2.setActivatorNodeRef,
+    style = _ref2.style,
+    attributes = _ref2.attributes,
+    listeners = _ref2.listeners,
+    transform = _ref2.transform,
+    transition = _ref2.transition;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setNodeRef,
+    style: style,
+    className: styles['tabitem']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['tabitem-left']
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: setActivatorNodeRef
+  }, attributes, listeners, {
+    className: styles['dragicon']
+  }), /*#__PURE__*/React.createElement("svg", {
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "16",
+    height: "12",
+    viewBox: "0 0 5 12",
+    style: {
+      verticalAlign: 'middle'
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0.499972716,6 L1.50002728,6 C1.77615459,6 2,6.22384541 2,6.49997272 C2,6.77610002 1.77615459,6.99994543 1.50002728,6.99994543 L0.499972716,6.99994543 C0.22384541,6.99994543 3.38158422e-17,6.77610002 0,6.49997272 C-3.38158422e-17,6.22384541 0.22384541,6 0.499972716,6 Z M0.499972716,3 L1.50002728,3 C1.77615459,3 2,3.22384541 2,3.49997272 C2,3.77610002 1.77615459,3.99994543 1.50002728,3.99994543 L0.499972716,3.99994543 C0.22384541,3.99994543 3.38158422e-17,3.77610002 0,3.49997272 C-3.38158422e-17,3.22384541 0.22384541,3 0.499972716,3 Z M0.499972716,7.28787148e-18 L1.50002728,5.55666624e-14 C1.77615459,7.07214574e-14 2,0.22384541 2,0.499972716 C2,0.776100022 1.77615459,0.999945432 1.50002728,0.999945432 L0.499972716,0.999945432 C0.22384541,0.999945432 3.38158422e-17,0.776100022 0,0.499972716 C-3.38158422e-17,0.22384541 0.22384541,5.0723721e-17 0.499972716,0 Z M0.5,9.00002729 L1.5,9.00002729 C1.77614237,9.00002729 2,9.22388491 2,9.50002729 C2,9.77616966 1.77614237,10.0000273 1.5,10.0000273 L0.5,10.0000273 C0.223857625,10.0000273 3.38176876e-17,9.77616966 0,9.50002729 C-3.38176876e-17,9.22388491 0.223857625,9.00002729 0.5,9.00002729 Z M0.5,12.0000273 L1.5,12.0000273 C1.77614237,12.0000273 2,12.2238849 2,12.5000273 C2,12.7761697 1.77614237,13.0000273 1.5,13.0000273 L0.5,13.0000273 C0.223857625,13.0000273 3.38176876e-17,12.7761697 0,12.5000273 C-3.38176876e-17,12.2238849 0.223857625,12.0000273 0.5,12.0000273 Z M0.5,15.0000273 L1.5,15.0000273 C1.77614237,15.0000273 2,15.2238849 2,15.5000273 C2,15.7761697 1.77614237,16.0000273 1.5,16.0000273 L0.5,16.0000273 C0.223857625,16.0000273 3.38176876e-17,15.7761697 0,15.5000273 C-3.38176876e-17,15.2238849 0.223857625,15.0000273 0.5,15.0000273 Z M3.49997272,6 L4.50002728,6 C4.77615459,6 5,6.22384541 5,6.49997272 C5,6.77610002 4.77615459,6.99994543 4.50002728,6.99994543 L3.49997272,6.99994543 C3.22384541,6.99994543 3,6.77610002 3,6.49997272 C3,6.22384541 3.22384541,6 3.49997272,6 Z M3.49997272,3 L4.50002728,3 C4.77615459,3 5,3.22384541 5,3.49997272 C5,3.77610002 4.77615459,3.99994543 4.50002728,3.99994543 L3.49997272,3.99994543 C3.22384541,3.99994543 3,3.77610002 3,3.49997272 C3,3.22384541 3.22384541,3 3.49997272,3 Z M3.49997272,7.28787148e-18 L4.50002728,5.55666624e-14 C4.77615459,7.07214574e-14 5,0.22384541 5,0.499972716 C5,0.776100022 4.77615459,0.999945432 4.50002728,0.999945432 L3.49997272,0.999945432 C3.22384541,0.999945432 3,0.776100022 3,0.499972716 C3,0.22384541 3.22384541,5.0723721e-17 3.49997272,0 Z M3.5,9.00002729 L4.5,9.00002729 C4.77614237,9.00002729 5,9.22388491 5,9.50002729 C5,9.77616966 4.77614237,10.0000273 4.5,10.0000273 L3.5,10.0000273 C3.22385763,10.0000273 3,9.77616966 3,9.50002729 C3,9.22388491 3.22385763,9.00002729 3.5,9.00002729 Z M3.5,12.0000273 L4.5,12.0000273 C4.77614237,12.0000273 5,12.2238849 5,12.5000273 C5,12.7761697 4.77614237,13.0000273 4.5,13.0000273 L3.5,13.0000273 C3.22385763,13.0000273 3,12.7761697 3,12.5000273 C3,12.2238849 3.22385763,12.0000273 3.5,12.0000273 Z M3.5,15.0000273 L4.5,15.0000273 C4.77614237,15.0000273 5,15.2238849 5,15.5000273 C5,15.7761697 4.77614237,16.0000273 4.5,16.0000273 L3.5,16.0000273 C3.22385763,16.0000273 3,15.7761697 3,15.5000273 C3,15.2238849 3.22385763,15.0000273 3.5,15.0000273 Z"
+  }))), left), /*#__PURE__*/React.createElement("div", {
+    className: styles['tabitem-right']
+  }, right));
+};

package/es/lowcode/painter/components/code-editor/BaseEditor.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "width", "height", "language", "options"];
+import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import * as monaco from 'monaco-editor';
+var CodeEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'javascript' : _ref$language,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var editorRef = useRef(null);
+  var editorInstance = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      // 直接暴露 editorInstance
+      get editor() {
+        return editorInstance.current;
+      }
+    };
+  });
+  useEffect(function () {
+    if (editorRef.current) {
+      var code = React.Children.toArray(children).join('').trim();
+      editorInstance.current = monaco.editor.create(editorRef.current, _objectSpread({
+        value: code,
+        language: language
+      }, options));
+    }
+    return function () {
+      var _editorInstance$curre;
+      return (_editorInstance$curre = editorInstance.current) === null || _editorInstance$curre === void 0 ? void 0 : _editorInstance$curre.dispose();
+    };
+  }, [children]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: editorRef,
+    style: {
+      width: width,
+      height: height
+    }
+  }, rest));
+});
+export default CodeEditor;

package/es/lowcode/painter/components/code-editor/JSEditor.js

@@ -0,0 +1,77 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React, { useEffect } from 'react';
+import BaseEditor from "./BaseEditor";
+import * as monaco from 'monaco-editor';
+var _provideCompletionItems = function provideCompletionItems(monaco, model, position, module) {
+  var textUntilPosition = model.getValueInRange({
+    startLineNumber: position.lineNumber,
+    startColumn: 1,
+    endLineNumber: position.lineNumber,
+    endColumn: position.column
+  });
+  if (textUntilPosition.endsWith(module.triggerWord + '.')) {
+    var word = model.getWordUntilPosition(position);
+    var range = {
+      startLineNumber: position.lineNumber,
+      endLineNumber: position.lineNumber,
+      startColumn: word.startColumn,
+      endColumn: word.endColumn
+    };
+
+    // 从模块中调用 completions 函数获取补全项数组
+    // 并动态转换 kind 字段
+    return module.completions.map(function (completion) {
+      return Object.assign({}, completion, {
+        range: range,
+        // 动态转换 kind 字段
+        kind: monaco.languages.CompletionItemKind[completion.kind]
+      });
+    });
+  }
+  return [];
+};
+var setupAutocomplete = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(monaco) {
+    var autoCompleteModules;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return import("../../../engine/meta/js-editor/auto-complete.json");
+        case 2:
+          autoCompleteModules = _context.sent;
+          console.log('autoCompleteModules', autoCompleteModules);
+          monaco.languages.registerCompletionItemProvider('javascript', _defineProperty({
+            triggerCharacters: ['.'],
+            provideCompletionItems: function provideCompletionItems(model, position) {
+              var allCompletionItems = [];
+
+              // 从所有模块收集补全项
+              autoCompleteModules.default.forEach(function (module) {
+                var items = _provideCompletionItems(monaco, model, position, module);
+                allCompletionItems = allCompletionItems.concat(items);
+              });
+              return {
+                suggestions: allCompletionItems
+              };
+            }
+          }, "triggerCharacters", ['.']));
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function setupAutocomplete(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var JSEditor = function JSEditor(props) {
+  useEffect(function () {
+    setupAutocomplete(monaco);
+  }, []);
+  return /*#__PURE__*/React.createElement(BaseEditor, props);
+};
+export default JSEditor;

package/es/lowcode/painter/components/code-editor/index.js

@@ -0,0 +1,2 @@
+export { default as BaseEditor } from "./BaseEditor";
+export { default as JSEditor } from "./JSEditor";

package/es/lowcode/painter/index.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+// import { history } from 'umi';
+// import { formatMessage } from '@luck-design-biz/base/utils';
+import EventBusProvider from "../engine/provider/EventBusProvider";
+import ContextProvider from "../engine/provider/ContextProvider";
+import Ribbon from "./Ribbon";
+import Design from "./Design";
+import Panel from "./Panel";
+import { RUNTIME } from "../constants/index";
+import styles from "./style/index.less";
+var Painter = function Painter(_ref) {
+  var className = _ref.className;
+  // 修改后刷新提示功能，暂时关掉，等待提供数据对比进行判断
+  // useEffect(() => {
+  //   const handleBeforeUnload = (event) => {
+  //     event.preventDefault();
+  //     event.returnValue = null;
+  //     return null;
+  //   };
+
+  //   window.addEventListener('beforeunload', handleBeforeUnload);
+
+  //   const unblock = history.block(() =>
+  //     confirm(`${formatMessage({
+  //       id: 'app.base.operate.comfire.reload', label: '重新加载此网站？'
+  //     })}\n${formatMessage({
+  //       id: 'app.base.operate.comfire.message.reload', label: '系统可能不会保存您所做的更改。'
+  //     })}`)
+  //   );
+
+  //   return () => {
+  //     unblock();
+  //     window.removeEventListener('beforeunload', handleBeforeUnload);
+  //   };
+  // }, []);
+
+  return /*#__PURE__*/React.createElement(EventBusProvider, {
+    runtime: RUNTIME.DESIGN
+  }, /*#__PURE__*/React.createElement(ContextProvider, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['lc-painter'], _defineProperty({}, className, !!className))
+  }, /*#__PURE__*/React.createElement(Ribbon, null), /*#__PURE__*/React.createElement(Design, null), /*#__PURE__*/React.createElement(Panel, null))));
+};
+export default Painter;

package/es/lowcode/painter/panel-section/ButtonType.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field", "onChange"];
+import React from 'react';
+import { Select, Button } from 'luck-design/antd';
+import styles from "../style/button-type.less";
+var ButtonType = function ButtonType(_ref) {
+  var field = _ref.field,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    onChange: function onChange(value) {
+      return _onChange({
+        field: field,
+        value: value
+      });
+    },
+    className: styles['lc-painter-panel-section-components-buttontype']
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "primary"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "primary")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "default"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "default")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "dashed"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "dashed",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "dashed")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "danger"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "danger")));
+};
+export default ButtonType;

package/es/lowcode/painter/panel-section/Icon.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Icon } from 'luck-design/antd';
+import styles from "../style/icon.less";
+import { ICONLIST_JS } from "../../constants/api-url";
+
+/**
+ * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
+ * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
+ * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   field="iconField"
+ *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
+ *   value="icon-example"
+ * />
+ * ```
+ *
+ * @param {Object} props 组件的props
+ * @param {string} props.field 用于识别选择的图标字段的标识符。
+ * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
+ *                                  接收一个对象参数，该对象包含`field`字段。
+ * @param {string} [props.value='iconyingyongguanli'] 初始化时图标的类型，
+ *                                                     默认为'iconyingyongguanli'。
+ *
+ * @returns {React.Element} 渲染的React元素。
+ */
+export default function (_ref) {
+  var field = _ref.field,
+    onSelect = _ref.onSelect,
+    value = _ref.value,
+    next = _ref.next;
+  var IconFont = Icon.createFromIconfontCN({
+    scriptUrl: ICONLIST_JS
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-icon'],
+    onClick: function onClick() {
+      return next();
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: value !== null && value !== void 0 ? value : 'iconyingyongguanli'
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles['selecor']
+  }, "\u8BF7\u9009\u62E9 >"));
+}