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

package/lib/lowcode/painter/Design.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _Page = _interopRequireDefault(require("../view/Page"));
+var _constants = require("../constants");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var Design = function Design() {
+  var context = (0, _ContextProvider.useLDContext)();
+  var detectorRef = (0, _react.useRef)(null);
+  var selectorRef = (0, _react.useRef)(null);
+  var simulatorRef = (0, _react.useRef)(null);
+  var hoverCellRef = (0, _react.useRef)(null);
+  var activeCellRef = (0, _react.useRef)(null);
+  (0, _ahooks.useEventListener)('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
+      var _id = targetCell.id;
+      hoverCellRef.current = targetCell;
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: _id,
+        cellNode: targetCell
+      });
+    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: simulatorRef
+  });
+  (0, _ahooks.useEventListener)('mouseleave', function () {
+    if (hoverCellRef.current) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: simulatorRef
+  });
+  (0, _ahooks.useEventListener)('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
+    activeCellRef.current = targetCell;
+    hoverCellRef.current = null;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: activeCellRef.current.id,
+      cellNode: activeCellRef.current
+    });
+  }, {
+    target: simulatorRef
+  });
+  (0, _react.useEffect)(function () {
+    var setRect = function setRect(node, cellNode) {
+      node.style.left = "".concat(cellNode.offsetLeft, "px");
+      node.style.top = "".concat(cellNode.offsetTop, "px");
+      node.style.width = "".concat(cellNode.offsetWidth, "px");
+      node.style.height = "".concat(cellNode.offsetHeight, "px");
+    };
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) {
+        detectorRef.current.style.display = 'block';
+        setRect(detectorRef.current, payload.cellNode);
+      } else {
+        detectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        selectorRef.current.style.display = 'block';
+        setRect(selectorRef.current, payload.cellNode);
+      } else {
+        selectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-painter-design']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-detector",
+    ref: detectorRef,
+    className: _design.default.detector
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-selector",
+    ref: selectorRef,
+    className: _design.default.selector
+  }), /*#__PURE__*/_react.default.createElement(_Page.default, {
+    ref: simulatorRef,
+    pageCode: "mk2i87qb",
+    className: _design.default.simulator
+  }));
+};
+var _default = exports.default = Design;

package/lib/lowcode/painter/I18n.js

@@ -0,0 +1,12 @@
+"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 I18n = function I18n() {
+  return /*#__PURE__*/_react.default.createElement("div", null, "i18n");
+};
+var _default = exports.default = I18n;

package/lib/lowcode/painter/Outline.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _constants = require("../constants");
+var _dataProcess = require("../engine/tools/dataProcess");
+var _outline = _interopRequireDefault(require("./style/outline.less"));
+var _excluded = ["props", "children"];
+var TreeNode = _antd.Tree.TreeNode;
+var PAGE_CELL = [_constants.CELL_KEY.PAGE_HEADER, _constants.CELL_KEY.PAGE_CONTENT, _constants.CELL_KEY.PAGE_FOOTER];
+var Outline = function Outline() {
+  var modalTreeRef = (0, _react.useRef)();
+  var pageTreeRef = (0, _react.useRef)();
+  var openModal = (0, _react.useRef)(void 0);
+  var clickBySelf = (0, _react.useRef)(false);
+  var context = (0, _ContextProvider.useLDContext)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    pageAndModal = _useState2[0],
+    setPageAndModal = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    modalExpandedKeys = _useState6[0],
+    setModalExpandedKeys = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    pageExpandedKeys = _useState8[0],
+    setPageExpandedKeys = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setSelectedKey(payload.id);
+      if (clickBySelf.current) {
+        clickBySelf.current = false;
+        return;
+      }
+      setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+    };
+  }, []);
+  var handleSelect = function handleSelect(_key) {
+    clickBySelf.current = true;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key,
+      cellNode: context.componentMap.get(_key).dom
+    } : null);
+  };
+  var handleOpenModal = (0, _ahooks.useMemoizedFn)(function (_key) {
+    var _comp = context.componentMap.get(_key);
+    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
+    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
+    _comp.api.doOpen();
+    openModal.current = _key;
+  });
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    if (props) {
+      return /*#__PURE__*/_react.default.createElement(TreeNode, {
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+          type: "layout"
+        }),
+        title: props.label,
+        key: props.id
+      }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
+        return render(childrenMap[_id]);
+      }));
+    }
+    return (children || []).map(function (_id) {
+      return render(childrenMap[_id]);
+    });
+  });
+  (0, _ahooks.useDeepCompareLayoutEffect)(function () {
+    var _reduce = (0, _lodash.reduce)(context.pageData.children, function (result, _id) {
+        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = context.pageData[_id];
+        if (!result[resultKey].children) {
+          result[resultKey].children = [];
+        }
+        result[resultKey].children.push(_id);
+        return result;
+      }, {
+        page: {},
+        modal: {}
+      }),
+      page = _reduce.page,
+      modal = _reduce.modal;
+    setPageAndModal({
+      page: render(page),
+      modal: render(modal)
+    });
+  }, [context.pageData]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _outline.default['lc-painter-outline']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.CELL_KEY.PAGE_ROOT)),
+    onClick: function onClick() {
+      return handleSelect(_constants.CELL_KEY.PAGE_ROOT);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "layout"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: 5
+    }
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.page',
+    label: '页面'
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Card, {
+    size: "small",
+    type: "inner",
+    hoverable: true,
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.model',
+      label: '模态视图层'
+    }),
+    style: {
+      margin: 5
+    },
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: modalTreeRef,
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
+        _key = _ref4[0];
+      var selected = _ref3.selected,
+        node = _ref3.node;
+      if (selected && node.props.pos.split('-').length === 2) {
+        handleOpenModal(_key);
+        handleSelect(_key);
+      } else if (!selected && node.props.pos.split('-').length === 2) {
+        var _comp = context.componentMap.get(openModal.current);
+        _comp.api.doClose();
+        openModal.current = void 0;
+        handleSelect(null);
+      } else {
+        handleSelect(node.props.eventKey);
+        var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, node.props.eventKey), '/'),
+          _split2 = (0, _slicedToArray2.default)(_split, 1),
+          parentModal = _split2[0];
+        if (!openModal.current || openModal.current !== parentModal) {
+          handleOpenModal(parentModal);
+        }
+      }
+    },
+    expandedKeys: modalExpandedKeys,
+    onExpand: function onExpand(_keys, _ref5) {
+      var expanded = _ref5.expanded,
+        node = _ref5.node;
+      if (expanded && node.props.pos.split('-').length === 2) {
+        handleSelect(null);
+        handleOpenModal(node.props.eventKey);
+      }
+      setModalExpandedKeys(_keys);
+    }
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: pageTreeRef,
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref6, _ref7) {
+      var _ref8 = (0, _slicedToArray2.default)(_ref6, 1),
+        _key = _ref8[0];
+      var node = _ref7.node;
+      if (openModal.current) {
+        var _prevComp = context.componentMap.get(openModal.current);
+        _prevComp.api.doClose();
+        openModal.current = void 0;
+      }
+      handleSelect(node.props.eventKey);
+    },
+    expandedKeys: pageExpandedKeys,
+    onExpand: setPageExpandedKeys
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.page));
+};
+var _default = exports.default = Outline;

package/lib/lowcode/painter/Panel.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _panel = _interopRequireDefault(require("./style/panel.less"));
+var Panel = function Panel() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _panel.default['lc-painter-panel']
+  }, "Panel");
+};
+var _default = exports.default = Panel;

package/lib/lowcode/painter/Ribbon.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireWildcard3 = 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 _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard3(require("react"));
+var _ahooks = require("ahooks");
+var _umi = require("umi");
+var _luckDesign = require("luck-design");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _lodash = require("lodash");
+var _ribbon = _interopRequireDefault(require("./style/ribbon.less"));
+var _WIDTH_ = 48;
+var _DRAWER_OUTLINE_ = {
+  width: 300,
+  key: 'outline',
+  title: '大纲树',
+  fix: true
+};
+var _DRAWER_COMPONENTS_ = {
+  width: 310,
+  key: 'components',
+  title: '组件',
+  fix: false
+};
+var _DRAWER_I18N_ = {
+  width: 450,
+  key: 'i18n',
+  title: '多语言文案管理',
+  fix: false
+};
+var Ribbon = function Ribbon() {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    drawer = _useState2[0],
+    setDrawer = _useState2[1];
+  var Detail = (0, _ahooks.useCreation)(function () {
+    return (0, _umi.dynamic)({
+      loader: function () {
+        var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+          var name, _yield$import, Comp;
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!drawer) {
+                  _context.next = 7;
+                  break;
+                }
+                name = (0, _lodash.upperFirst)(drawer.key);
+                _context.next = 4;
+                return function (specifier) {
+                  return new Promise(function (r) {
+                    return r(specifier);
+                  }).then(function (s) {
+                    return (0, _interopRequireWildcard2.default)(require(s));
+                  });
+                }("./".concat(name));
+              case 4:
+                _yield$import = _context.sent;
+                Comp = _yield$import.default;
+                return _context.abrupt("return", Comp);
+              case 7:
+                return _context.abrupt("return", null);
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function loader() {
+          return _loader.apply(this, arguments);
+        }
+        return loader;
+      }()
+    });
+  }, [drawer]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_luckDesign.Box, {
+    className: _ribbon.default['lc-painter-ribbon'],
+    width: _WIDTH_,
+    heitht: "100%",
+    direction: "column",
+    align: "center",
+    style: {
+      marginRight: drawer !== null && drawer !== void 0 && drawer.fix ? drawer.width : 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "right",
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.outline',
+      label: _DRAWER_OUTLINE_.title
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "apartment",
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? null : _DRAWER_OUTLINE_);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "right",
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.components',
+      label: _DRAWER_COMPONENTS_.title
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "appstore",
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? null : _DRAWER_COMPONENTS_);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "right",
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.i18n',
+      label: _DRAWER_I18N_.title
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "global",
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    title: drawer ? (0, _utils.formatMessage)({
+      id: "luckda.lowcode.".concat(drawer.key),
+      label: drawer.title
+    }) : '',
+    placement: "left",
+    width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
+    visible: !!drawer,
+    mask: false,
+    getContainer: false,
+    onClose: function onClose() {
+      return setDrawer(null);
+    },
+    style: {
+      position: 'absolute',
+      left: _WIDTH_
+    },
+    bodyStyle: {
+      overflowY: 'auto',
+      height: 'calc(100% - 55px)',
+      padding: 0
+    }
+  }, Detail && /*#__PURE__*/_react.default.createElement(Detail, null)));
+};
+var _default = exports.default = Ribbon;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _react = _interopRequireDefault(require("react"));
+var _panelItem = _interopRequireDefault(require("../style/panel-item.less"));
+/**
+ * 属性面板属性行组件
+ * @param {string} label 属性名
+ * @param {React.ReactNode} component 属性组件
+ * @returns 
+ */
+function _default(_ref) {
+  var label = _ref.label,
+    component = _ref.component;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _panelItem.default['lc-painter-components-panelitem']
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _panelItem.default['item-label']
+  }, label), /*#__PURE__*/_react.default.createElement("span", {
+    className: _panelItem.default['item-component']
+  }, component));
+}

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

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("luck-design/antd");
+var _ruleInput = _interopRequireDefault(require("../style/rule-input.less"));
+var _excluded = ["onValueChange", "rules", "value"];
+/**
+ * 带校验功能的输入组件。
+ *
+ * 此组件封装了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,
+    rules = _ref.rules,
+    value = _ref.value,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(value),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1]; // 托管输入值的状态
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    err = _useState4[0],
+    setErr = _useState4[1];
+
+  // 使用useEffect钩子监听value的变化
+  (0, _react.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 = (0, _createForOfIteratorHelper2.default)(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.log('err', error);
+    }
+  };
+  var className = _ruleInput.default['lc-painter-components-ruleinput'];
+  if (err) className += ' ' + _ruleInput.default['err'];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: err,
+    visible: err
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, (0, _extends2.default)({
+    className: className,
+    size: "small",
+    value: inputValue // 绑定输入值
+    ,
+    onChange: handleInputChange
+  }, rest, {
+    ref: ref
+  }))));
+});

package/lib/lowcode/painter/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _EventBusProvider = _interopRequireDefault(require("../engine/provider/EventBusProvider"));
+var _ContextProvider = _interopRequireDefault(require("../engine/provider/ContextProvider"));
+var _Ribbon = _interopRequireDefault(require("./Ribbon"));
+var _Design = _interopRequireDefault(require("./Design"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _index = require("../constants/index");
+var _index2 = _interopRequireDefault(require("./style/index.less"));
+var Painter = function Painter(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement(_EventBusProvider.default, {
+    runtime: _index.RUNTIME.DESIGN
+  }, /*#__PURE__*/_react.default.createElement(_ContextProvider.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_index2.default['lc-painter'], (0, _defineProperty2.default)({}, className, !!className))
+  }, /*#__PURE__*/_react.default.createElement(_Ribbon.default, null), /*#__PURE__*/_react.default.createElement(_Design.default, null), /*#__PURE__*/_react.default.createElement(_Panel.default, null))));
+};
+var _default = exports.default = Painter;