@luck-design-biz/luckda 0.0.23 → 0.0.24-1

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard3 = 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard3(require("react"));
+var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
+var monaco = _interopRequireWildcard3(require("monaco-editor"));
+var _excluded = ["children"];
+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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(monaco) {
+    var autoCompleteModules;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.resolve().then(function () {
+            return (0, _interopRequireWildcard2.default)(require("../../../engine/meta/js-editor/auto-complete.json"));
+          });
+        case 2:
+          autoCompleteModules = _context.sent;
+          console.log('autoCompleteModules', autoCompleteModules);
+          monaco.languages.registerCompletionItemProvider('javascript', (0, _defineProperty2.default)({
+            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 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var children = _ref2.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  (0, _react.useEffect)(function () {
+    setupAutocomplete(monaco);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_BaseEditor.default, (0, _extends2.default)({
+    ref: ref
+  }, rest));
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(JSEditor);

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseEditor", {
+  enumerable: true,
+  get: function get() {
+    return _BaseEditor.default;
+  }
+});
+Object.defineProperty(exports, "JSEditor", {
+  enumerable: true,
+  get: function get() {
+    return _JSEditor.default;
+  }
+});
+var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
+var _JSEditor = _interopRequireDefault(require("./JSEditor"));

package/lib/lowcode/painter/index.js

@@ -1,12 +1,13 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _EventBusProvider = _interopRequireDefault(require("../engine/provider/EventBusProvider"));
 var _ContextProvider = _interopRequireDefault(require("../engine/provider/ContextProvider"));
@@ -15,8 +16,35 @@ var _Design = _interopRequireDefault(require("./Design"));
 var _Panel = _interopRequireDefault(require("./Panel"));
 var _index = require("../constants/index");
 var _index2 = _interopRequireDefault(require("./style/index.less"));
+// import { history } from 'umi';
+// import { formatMessage } from '@luck-design-biz/base/utils';
+
 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.default.createElement(_EventBusProvider.default, {
     runtime: _index.RUNTIME.DESIGN
   }, /*#__PURE__*/_react.default.createElement(_ContextProvider.default, null, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -0,0 +1,46 @@
+"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: onChange,
+    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/Icon.js

@@ -0,0 +1,54 @@
+"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 _antd = require("luck-design/antd");
+var _icon = _interopRequireDefault(require("../style/icon.less"));
+var _apiUrl = require("../../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元素。
+ */
+function _default(_ref) {
+  var field = _ref.field,
+    onSelect = _ref.onSelect,
+    value = _ref.value,
+    next = _ref.next;
+  var IconFont = _antd.Icon.createFromIconfontCN({
+    scriptUrl: _apiUrl.ICONLIST_JS
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _icon.default['lc-painter-panel-section-icon'],
+    onClick: function onClick() {
+      return next();
+    }
+  }, /*#__PURE__*/_react.default.createElement(IconFont, {
+    type: value !== null && value !== void 0 ? value : 'iconyingyongguanli'
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: _icon.default['selecor']
+  }, "\u8BF7\u9009\u62E9 >"));
+}

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

@@ -0,0 +1,141 @@
+"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 = _default;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("luck-design/antd");
+var _ahooks = require("ahooks");
+var _iconSelector = _interopRequireDefault(require("../style/icon-selector.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _apiUrl = require("../../constants/api-url");
+var Search = _antd.Input.Search;
+
+/**
+ * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
+ *
+ * 该组件首先从预定义的URL加载图标列表，然后显示这些图标。用户可以通过输入框搜索图标，
+ * 点击图标时，会通过 `onChange` 回调将选中的图标信息返回给父组件。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   onChange={(selectedIcon) => console.log(selectedIcon)}
+ * />
+ * ```
+ *
+ * @param {Object} props 组件接受的props
+ * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
+ */
+function _default(_ref) {
+  var onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    iconData = _useState2[0],
+    setIconData = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var IconFont = _antd.Icon.createFromIconfontCN({
+    scriptUrl: _apiUrl.ICONLIST_JS
+  });
+  function getIconList() {
+    return _getIconList.apply(this, arguments);
+  }
+  function _getIconList() {
+    _getIconList = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", (0, _utils.request)(_apiUrl.ICONLIST_URL, {
+              method: 'get'
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _getIconList.apply(this, arguments);
+  }
+  (0, _react.useEffect)(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+        var data;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getIconList();
+            case 3:
+              data = _context.sent;
+              setIconData(data);
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              console.error('获取数据失败', _context.t0);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function fetchData() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, []);
+  var handleSearch = (0, _react.useCallback)(function (e) {
+    setSearchTerm(e.target.value.toLowerCase());
+  }, []);
+  var filteredData = (0, _react.useMemo)(function () {
+    if (iconData && iconData.glyphs) {
+      return iconData.glyphs.filter(function (item) {
+        return item.name.toLowerCase().includes(searchTerm) || item.font_class.toLowerCase().includes(searchTerm);
+      });
+    }
+    return [];
+  }, [iconData, searchTerm]);
+  var handleClick = (0, _ahooks.useMemoizedFn)(function (icon) {
+    onChange === null || onChange === void 0 || onChange(icon);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['lc-painter-panel-section-iconselector']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['components-search']
+  }, /*#__PURE__*/_react.default.createElement(Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.components.search',
+      label: '搜索组件'
+    }),
+    onChange: handleSearch
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['icon-warp']
+  }, filteredData && filteredData.length > 0 && filteredData.map(function (iconItem) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: iconItem.font_class,
+      className: _iconSelector.default['icon-box'],
+      onClick: function onClick() {
+        return handleClick(iconItem);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      placement: "top",
+      title: iconItem.name
+    }, /*#__PURE__*/_react.default.createElement(IconFont, {
+      className: _iconSelector.default['icon-item'],
+      type: "".concat(iconData.css_prefix_text).concat(iconItem.font_class)
+    })));
+  })));
+}

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

@@ -8,44 +8,54 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
 var _layoutRatio = _interopRequireDefault(require("../style/layout-ratio.less"));
 var _utils = require("@luck-design-biz/base/utils");
 var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
 var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
-var ratios = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
-var defaultRatio = '12';
+var _RATIOS_ = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
+var _DEFAULTRATIO_ = '12:3:9';
 
 /**
- * 布局比例组件
- * 
- * @param {string} value 默认值
- * @param {Function} onChange 当合法数据变化时触发
- * @returns 
+ * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
+ * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
+ * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
+ * ，
+ * 允许父组件获取当前选中的布局比例。
+ *
+ * @component
+ * @example
+ * ```jsxsdsdsdsdsdsdsd
+ * <LayoutRatio
+ *   value="6:6"
+ *   onChange={(option) => console.log(option)}
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
+ * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
+ *
+ * @returns {React.Element} 渲染的React元素。
  */
-var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var value = _ref.value,
+var LayoutRatio = function LayoutRatio(_ref) {
+  var defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
-  var _useState = (0, _react.useState)(value || defaultRatio),
+  var _useState = (0, _react.useState)(defaultValue || _DEFAULTRATIO_),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentRatio = _useState2[0],
     setCurrentRatio = _useState2[1];
   var handleInputChange = function handleInputChange(_, value) {
-    console.log('value', value);
-    if (!value) value = defaultRatio;
+    // console.log('value', value);
+    // if (!value) value = _DEFAULTRATIO_;
     setCurrentRatio(value);
+    onChange === null || onChange === void 0 || onChange(value);
   };
   var handGridClick = function handGridClick(selectedRadio) {
     // console.log('selectedRadio', selectedRadio);
     setCurrentRatio(selectedRadio);
-    if (onChange) onChange(selectedRadio);
+    onChange === null || onChange === void 0 || onChange(selectedRadio);
   };
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      getValue: function getValue() {
-        return currentRatio;
-      }
-    };
-  });
 
   // 定义验证规则
   var rules = [{
@@ -54,44 +64,41 @@ var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       if (typeof value !== 'string') return false;
 
       // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
-      if (!/^[0-9]+(:[0-9]+)*$/.test(value)) return false;
-
-      // 使用冒号分割字符串，并将分割后的每个元素转换为数字
-      var numbers = value.split(':').map(Number);
-
-      // 计算所有数字的总和
-      var sum = numbers.reduce(function (acc, cur) {
-        return acc + cur;
-      }, 0);
-
-      // 判断总和是否等于12
-      return sum === 12;
+      return /^[0-9]+(:[0-9]+)*$/.test(value);
     },
     err: (0, _utils.formatMessage)({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
       label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
     })
   }];
-  var isCurrentInRatios = ratios.includes(currentRatio);
-  var currentItemRatios = currentRatio.split(':');
+  var _useCreation = (0, _ahooks.useCreation)(function () {
+      return {
+        isCurrentInRatios: _RATIOS_.includes(currentRatio),
+        currentItemRatios: currentRatio.split(':')
+      };
+    }, [currentRatio]),
+    isCurrentInRatios = _useCreation.isCurrentInRatios,
+    currentItemRatios = _useCreation.currentItemRatios;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _layoutRatio.default['lc-painter-panel-section-layoutratio']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _layoutRatio.default['ratio-view']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _layoutRatio.default['gridbox-container']
-  }, ratios.map(function (ratio) {
+  }, _RATIOS_.map(function (ratio, i) {
     var itemRatios = ratio.split(':');
     var isCurrent = ratio == currentRatio;
     var className = _layoutRatio.default['gridbox'];
     if (isCurrent) className = className + ' ' + _layoutRatio.default['current'];
     return /*#__PURE__*/_react.default.createElement("div", {
+      key: "grid-".concat(i),
       className: className,
       onClick: function onClick() {
         return handGridClick(ratio);
       }
-    }, itemRatios.map(function (itemRatio) {
+    }, itemRatios.map(function (itemRatio, j) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        key: "gridItem-".concat(j),
         className: _layoutRatio.default['girditem'],
         style: {
           gridColumn: 'span ' + itemRatio
@@ -103,8 +110,9 @@ var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClick: function onClick() {
       return handGridClick(ratio);
     }
-  }, currentItemRatios.map(function (itemRatio) {
+  }, currentItemRatios.map(function (itemRatio, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
+      key: "itemRatio-".concat(index),
       className: _layoutRatio.default['girditem'],
       style: {
         gridColumn: 'span ' + itemRatio
@@ -116,16 +124,15 @@ var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     label: (0, _utils.formatMessage)({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
       label: '列比例'
-    }),
-    component: /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
-      placeholder: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
-        label: '请输入列比例'
-      }),
-      rules: rules,
-      onValueChange: handleInputChange,
-      value: currentRatio
     })
-  })));
-});
+  }, /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+      label: '请输入列比例'
+    }),
+    rules: rules,
+    onValueChange: handleInputChange,
+    value: currentRatio
+  }))));
+};
 var _default = exports.default = LayoutRatio;