@luck-design-biz/luckda 0.0.27 → 1.0.0-alpha

package/lib/lowcode/painter/panel-section/ActionsEditor/index.js

@@ -0,0 +1,241 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _ActionEditor = _interopRequireDefault(require("./ActionEditor"));
+var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
+var _SortBox = require("../../components/SortBox");
+var _ListEditor = require("../../components/ListEditor");
+var _PopConfirm = _interopRequireDefault(require("../../components/PopConfirm"));
+var _ActionBindModal = _interopRequireDefault(require("../../components/ActionBindModal"));
+var _utils = require("@luck-design-biz/base/utils");
+var _helper = require("../../../engine/tools/helper");
+var _actionsEditor = _interopRequireDefault(require("../../style/actions-editor.less"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.actionsEditor';
+var _DISPLAY_OPTIONS_ = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".button"),
+    label: '按钮'
+  }),
+  value: 'button'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".text"),
+    label: '文本'
+  }),
+  value: 'text'
+}];
+var ActionsEditor = function ActionsEditor(_ref) {
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    suppressDisplay = _ref.suppressDisplay,
+    suppressMax = _ref.suppressMax,
+    suppressMore = _ref.suppressMore,
+    defaultCode = _ref.defaultCode;
+  var valueRef = (0, _react.useRef)((0, _lodash.cloneDeep)(defaultValue));
+  var _useReducer = (0, _react.useReducer)(_helper.listReducer, defaultValue.todoList || []),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    todoList = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    action = _useState2[0],
+    setAction = _useState2[1];
+  var handleAdd = (0, _ahooks.useMemoizedFn)(function () {
+    dispatch({
+      type: 'add',
+      payload: {
+        id: (0, _utils.suid)(),
+        name: "\u64CD\u4F5C".concat(todoList.length + 1),
+        serial: void 0,
+        serialEffect: 'hidden',
+        riskLevel: 'default',
+        actionPool: []
+      },
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange((0, _lodash.cloneDeep)(valueRef.current));
+      }
+    });
+  });
+  var handleDelete = (0, _ahooks.useMemoizedFn)(function (action) {
+    dispatch({
+      type: 'delete',
+      payload: action.id,
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange((0, _lodash.cloneDeep)(valueRef.current));
+      }
+    });
+  });
+  var handleSortChange = (0, _ahooks.useMemoizedFn)(function (sortItems) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems,
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange((0, _lodash.cloneDeep)(valueRef.current));
+      }
+    });
+  });
+  var handleValueChange = (0, _ahooks.useMemoizedFn)(function (field, value) {
+    if (field === 'action') {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: value.id,
+          data: value
+        },
+        callback: function callback(newActions) {
+          valueRef.current.todoList = newActions;
+        }
+      });
+    } else {
+      valueRef.current[field] = value;
+    }
+    onChange((0, _lodash.cloneDeep)(valueRef.current));
+  });
+  var renderItemRight = (0, _ahooks.useMemoizedFn)(function (action) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.edit',
+        label: '编辑'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+      placement: "left",
+      title: /*#__PURE__*/_react.default.createElement(_ActionEditor.default, {
+        action: action,
+        onChange: function onChange(value) {
+          return handleValueChange('action', value);
+        }
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "edit",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.bindAction',
+        label: '绑定动作'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "paper-clip",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return setAction((0, _objectSpread2.default)({
+          key: action.id
+        }, action));
+      }
+    })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.delete',
+        label: '删除'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "delete",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return handleDelete(action);
+      }
+    })));
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionsEditor.default['lc-painter-panel-section-components-actionsEditor']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '0 16px'
+    }
+  }, !suppressDisplay && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true,
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".display"),
+      label: '展现形式'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    size: "small",
+    options: _DISPLAY_OPTIONS_,
+    defaultValue: defaultValue.display,
+    onChange: function onChange(value) {
+      return handleValueChange('display', value);
+    }
+  })), !suppressMax && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true,
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".max"),
+      label: '最大显示数'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.InputNumber, {
+    size: "small",
+    defaultValue: defaultValue.max,
+    onChange: function onChange(value) {
+      return handleValueChange('max', value);
+    }
+  })), !suppressMore && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true,
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".moreText"),
+      label: '更多显示文字'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    defaultValue: defaultValue.moreText,
+    onChange: function onChange(e) {
+      return handleValueChange('moreText', e.target.value);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: todoList.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    addText: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".add"),
+      label: '添加操作'
+    }),
+    handleAdd: handleAdd
+  }, todoList.map(function (action) {
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      key: action.id,
+      id: action.id
+    }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      left: /*#__PURE__*/_react.default.createElement("span", null, action.name),
+      right: renderItemRight(action),
+      item: action,
+      dispatch: dispatch
+    }));
+  })))), /*#__PURE__*/_react.default.createElement(_ActionBindModal.default, {
+    event: action,
+    nodeId: nodeId,
+    defaultCode: defaultCode,
+    onComfirm: function onComfirm(actionPool) {
+      return handleValueChange('action', (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodash.omit)(action, ['key'])), {}, {
+        actionPool: actionPool
+      }));
+    },
+    onClose: function onClose() {
+      return setAction(null);
+    }
+  }));
+};
+var _default = exports.default = ActionsEditor;

package/lib/lowcode/painter/panel-section/BlockEditor/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var BlockEditor = function BlockEditor(_ref) {
+  var blockName = _ref.blockName,
+    blockId = _ref.blockId,
+    next = _ref.next;
+  var handleClick = (0, _ahooks.useMemoizedFn)(function (e) {
+    e.stopPropagation();
+    next && next({
+      blockId: blockId
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("span", {
+    onClick: handleClick,
+    style: next ? {
+      color: 'var(--ant-primary-color)',
+      cursor: 'pointer'
+    } : {}
+  }, blockName || blockId, next && /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "setting",
+    style: {
+      marginLeft: 4
+    }
+  }));
+};
+var _default = exports.default = BlockEditor;

package/lib/lowcode/painter/panel-section/BlocksEditor/BlockEditorItem.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _Collapse = _interopRequireDefault(require("../../components/Collapse"));
+var BlockEditorItem = function BlockEditorItem(_ref) {
+  var children = _ref.children,
+    onDelete = _ref.onDelete,
+    name = _ref.name,
+    setNodeRef = _ref.setNodeRef,
+    style = _ref.style,
+    setActivatorNodeRef = _ref.setActivatorNodeRef,
+    attributes = _ref.attributes,
+    listeners = _ref.listeners,
+    draggable = _ref.draggable;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: setNodeRef,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+    label: /*#__PURE__*/_react.default.createElement("div", null, draggable ? /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      ref: setActivatorNodeRef
+    }, attributes, listeners), /*#__PURE__*/_react.default.createElement("svg", {
+      fill: "currentColor",
+      preserveAspectRatio: "xMidYMid meet",
+      width: "16",
+      height: "12",
+      viewBox: "0 0 5 12",
+      style: {
+        verticalAlign: 'middle'
+      }
+    }, /*#__PURE__*/_react.default.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"
+    }))) : null, name),
+    extraRender: (0, _lodash.isNil)(onDelete) ? false : function () {
+      return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+        type: "delete",
+        style: {
+          color: 'var(--luck-color-danger)'
+        },
+        onClick: onDelete
+      });
+    }
+  }, children));
+};
+var _default = exports.default = BlockEditorItem;

package/lib/lowcode/painter/panel-section/BlocksEditor/index.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
+var _SortBox = require("../../components/SortBox");
+var _BlockEditorItem = _interopRequireDefault(require("./BlockEditorItem"));
+var _formPropsDefault = _interopRequireDefault(require("../../../engine/meta/form.props.default.json"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.blocksEditor';
+var confirm = _antd.Modal.confirm;
+var addOptions = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".auto"),
+    label: '表单'
+  }),
+  value: 'auto'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".grid"),
+    label: '表格'
+  }),
+  value: 'grid'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".writer"),
+    label: '行内编辑表格'
+  }),
+  value: 'writer'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".uploadForm"),
+    label: '附件列表'
+  }),
+  value: 'uploadForm'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".blank"),
+    label: '空白区'
+  }),
+  value: 'blank'
+}];
+var BlockEditor = function BlockEditor(_ref) {
+  var onChange = _ref.onChange,
+    nodeId = _ref.nodeId,
+    renderPanelItems = _ref.renderPanelItems,
+    innerProps = _ref.innerProps;
+  var blocks = (0, _ContextProvider.useGet)({
+    id: nodeId,
+    path: 'props.blocks'
+  });
+  var handleAddBlock = (0, _ahooks.useMemoizedFn)(function (type) {
+    var _id = "block_".concat((0, _utils.suid)());
+    var newData = (0, _lodash.concat)(blocks, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      id: _id,
+      name: _id,
+      type: type,
+      serialEffect: 'hidden',
+      mode: ['add', 'update', 'edit', 'info']
+    }, _formPropsDefault.default.blockSettings[type]), {}, {
+      order: blocks.length + 1
+    }));
+    onChange(newData);
+  });
+  var handleDeleteBlock = (0, _ahooks.useMemoizedFn)(function (_id) {
+    confirm({
+      title: (0, _utils.formatMessage)({
+        id: 'app.base.confirm.delete.title'
+      }),
+      content: "".concat((0, _utils.formatMessage)({
+        id: 'app.base.confirm.delete.simple'
+      }), "?"),
+      cancelText: (0, _utils.formatMessage)({
+        id: 'app.base.operate.cancel'
+      }),
+      okText: (0, _utils.formatMessage)({
+        id: 'app.base.operate.ok'
+      }),
+      okType: 'danger',
+      onOk: function onOk() {
+        var newData = blocks.filter(function (val) {
+          return val.id !== _id;
+        });
+        onChange(newData.map(function (i, index) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, i), {}, {
+            order: index + 1
+          });
+        }));
+      }
+    });
+  });
+  var handleSortBlock = (0, _ahooks.useMemoizedFn)(function (sortItems) {
+    var _blocks = (0, _toArray2.default)(blocks),
+      mainForm = _blocks[0],
+      restForm = _blocks.slice(1);
+    var newRestForm = (0, _lodash.sortBy)(restForm, function (item) {
+      var index = sortItems.indexOf(item.id);
+      return index !== -1 ? index : Infinity;
+    });
+    var newData = [mainForm].concat((0, _toConsumableArray2.default)(newRestForm)).map(function (i, index) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, i), {}, {
+        order: index + 1
+      });
+    });
+    onChange(newData);
+  });
+  var menu = (0, _ahooks.useCreation)(function () {
+    return /*#__PURE__*/_react.default.createElement(_antd.Menu, {
+      onClick: function onClick(_ref2) {
+        var key = _ref2.key;
+        return handleAddBlock(key);
+      }
+    }, addOptions.map(function (opt) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: opt.value
+      }, opt.label);
+    }));
+  });
+  var _useCreation = (0, _ahooks.useCreation)(function () {
+      return blocks || [];
+    }, [blocks]),
+    _useCreation2 = (0, _toArray2.default)(_useCreation),
+    mainForm = _useCreation2[0],
+    restForm = _useCreation2.slice(1);
+  var _useCreation3 = (0, _ahooks.useCreation)(function () {
+      return (0, _lodash.reduce)(innerProps, function (ret, p) {
+        if (p.key === 'blockSettings') {
+          ret.specialProp = p;
+        } else {
+          ret.commonProps.push(p);
+        }
+        return ret;
+      }, {
+        commonProps: []
+      });
+    }, [innerProps]),
+    commonProps = _useCreation3.commonProps,
+    specialProp = _useCreation3.specialProp;
+  return mainForm ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BlockEditorItem.default, {
+    name: renderPanelItems([(0, _objectSpread2.default)((0, _objectSpread2.default)({}, specialProp), {}, {
+      valueKey: "blocks[0].".concat(specialProp.key),
+      blockName: mainForm.name,
+      blockId: mainForm.id,
+      next: {
+        name: specialProp.name,
+        props: specialProp.next["_".concat(mainForm.type, "_props")].map(function (nextP) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nextP), {}, {
+            valueKey: "blocks[0].".concat(nextP.key)
+          });
+        })
+      }
+    })])
+  }, renderPanelItems(commonProps.map(function (p) {
+    var cloneP = (0, _lodash.cloneDeep)(p);
+    if (cloneP.key === 'dataset') {
+      cloneP.fieldsKey = 'blocks[0].fields';
+    }
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, cloneP), {}, {
+      disabled: (0, _lodash.includes)(['mode', 'serialEffect'], cloneP.key) || cloneP.disabled,
+      valueKey: "blocks[0].".concat(cloneP.key)
+    });
+  }))), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: restForm.map(function (_bk) {
+      return _bk.id;
+    }),
+    onChange: handleSortBlock
+  }, restForm.map(function (blockItem, i) {
+    var _specialProp$next;
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      key: blockItem.id,
+      id: blockItem.id
+    }, /*#__PURE__*/_react.default.createElement(_BlockEditorItem.default, {
+      draggable: true,
+      name: renderPanelItems([(0, _objectSpread2.default)((0, _objectSpread2.default)({}, specialProp), {}, {
+        valueKey: "blocks[".concat(i + 1, "].").concat(specialProp.key),
+        blockName: blockItem.name,
+        blockId: blockItem.id,
+        next: {
+          name: specialProp.name,
+          props: (_specialProp$next = specialProp.next["_".concat(blockItem.type, "_props")]) === null || _specialProp$next === void 0 ? void 0 : _specialProp$next.map(function (nextP) {
+            var _nextP$props;
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nextP), {}, {
+              valueKey: "blocks[".concat(i + 1, "].").concat(nextP.key),
+              props: (_nextP$props = nextP.props) === null || _nextP$props === void 0 ? void 0 : _nextP$props.map(function (p) {
+                return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, p), {}, {
+                  valueKey: "blocks[".concat(i + 1, "].").concat(p.key)
+                });
+              })
+            });
+          })
+        }
+      })]),
+      onDelete: function onDelete() {
+        return handleDeleteBlock(blockItem.id);
+      }
+    }, renderPanelItems((0, _lodash.reduce)(commonProps, function (result, p) {
+      var cloneP = (0, _lodash.cloneDeep)(p);
+      cloneP.valueKey = "blocks[".concat(i + 1, "].").concat(p.key);
+      if (p.key === 'dataset') {
+        if ((0, _lodash.includes)(['auto', 'grid', 'writer'], blockItem.type)) {
+          if (blockItem.type !== 'auto') cloneP.component = 'tableForm';
+          cloneP.fieldsKey = "blocks[".concat(i + 1, "].fields");
+          ;
+          result.push(cloneP);
+        }
+      } else result.push(cloneP);
+      return result;
+    }, []))));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '0px 16px',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    overlay: menu
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    block: true,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "plus-circle"
+  }), (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".addBlock"),
+    label: '新增区块'
+  }))))) : null;
+};
+var _default = exports.default = BlockEditor;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("luck-design/antd");
+var _buttonType = _interopRequireDefault(require("../style/button-type.less"));
+var _excluded = ["onChange"];
+var ButtonType = function ButtonType(_ref) {
+  var _onChange = _ref.onChange,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.Select, (0, _extends2.default)({}, props, {
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
+    className: _buttonType.default['lc-painter-panel-section-components-buttontype']
+  }), /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "primary"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    size: "small",
+    className: _buttonType.default['lc-painter-panel-section-components-buttontype-option']
+  }, "primary")), /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "default"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "default",
+    size: "small",
+    className: _buttonType.default['lc-painter-panel-section-components-buttontype-option']
+  }, "default")), /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "dashed"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "dashed",
+    size: "small",
+    className: _buttonType.default['lc-painter-panel-section-components-buttontype-option']
+  }, "dashed")), /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "danger"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "danger",
+    size: "small",
+    className: _buttonType.default['lc-painter-panel-section-components-buttontype-option']
+  }, "danger")));
+};
+var _default = exports.default = ButtonType;

package/lib/lowcode/painter/panel-section/ComponentSelector.js

@@ -0,0 +1,43 @@
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var ComponentSelector = function ComponentSelector(_ref) {
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange,
+    filter = _ref.filter;
+  var ctx = (0, _ContextProvider.useContext)();
+  return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    allowClear: true,
+    defaultValue: defaultValue,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    }
+  }, (0, _lodash.reduce)(ctx.componentList, function (ret, _ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      compId = _ref3[0],
+      comp = _ref3[1];
+    if (compId !== nodeId && (!filter || filter.find(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        val = _ref5[1];
+      return (0, _lodash.get)(comp, key) === val;
+    }))) {
+      ret.push( /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+        value: compId
+      }, comp.meta.name || compId));
+    }
+    return ret;
+  }, []));
+};
+var _default = exports.default = ComponentSelector;