@luck-design-biz/luckda 0.0.22 → 0.0.23

package/es/lowcode/painter/I18n.js

@@ -0,0 +1,5 @@
+import React from 'react';
+var I18n = function I18n() {
+  return /*#__PURE__*/React.createElement("div", null, "i18n");
+};
+export default I18n;

package/es/lowcode/painter/Outline.js

@@ -0,0 +1,202 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["props", "children"];
+import React, { useRef, useState, useEffect } from 'react';
+import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
+import { uniq, split, reduce } from 'lodash';
+import classNames from 'classnames';
+import { Card, Tree, Icon } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { CELL_KEY } from "../constants";
+import { getPathById } from "../engine/tools/dataProcess";
+import styles from "./style/outline.less";
+var TreeNode = Tree.TreeNode;
+var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
+var Outline = function Outline() {
+  var modalTreeRef = useRef();
+  var pageTreeRef = useRef();
+  var openModal = useRef(void 0);
+  var clickBySelf = useRef(false);
+  var context = useLDContext();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    pageAndModal = _useState2[0],
+    setPageAndModal = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    modalExpandedKeys = _useState6[0],
+    setModalExpandedKeys = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    pageExpandedKeys = _useState8[0],
+    setPageExpandedKeys = _useState8[1];
+  useEffect(function () {
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setSelectedKey(payload.id);
+      if (clickBySelf.current) {
+        clickBySelf.current = false;
+        return;
+      }
+      setModalExpandedKeys(uniq([].concat(_toConsumableArray((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), _toConsumableArray(split(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 = 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 = useMemoizedFn(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = _objectWithoutProperties(_ref, _excluded);
+    if (props) {
+      return /*#__PURE__*/React.createElement(TreeNode, {
+        icon: /*#__PURE__*/React.createElement(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]);
+    });
+  });
+  useDeepCompareLayoutEffect(function () {
+    var _reduce = 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.createElement("div", {
+    className: styles['lc-painter-outline']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === CELL_KEY.PAGE_ROOT)),
+    onClick: function onClick() {
+      return handleSelect(CELL_KEY.PAGE_ROOT);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "layout"
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 5
+    }
+  }, formatMessage({
+    id: 'luckda.lowcode.page',
+    label: '页面'
+  }))), /*#__PURE__*/React.createElement(Card, {
+    size: "small",
+    type: "inner",
+    hoverable: true,
+    title: formatMessage({
+      id: 'luckda.lowcode.model',
+      label: '模态视图层'
+    }),
+    style: {
+      margin: 5
+    },
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement(Tree, {
+    ref: modalTreeRef,
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/React.createElement(Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = _slicedToArray(_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 = split(getPathById(context.pageData, node.props.eventKey), '/'),
+          _split2 = _slicedToArray(_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.createElement(Tree, {
+    ref: pageTreeRef,
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/React.createElement(Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref6, _ref7) {
+      var _ref8 = _slicedToArray(_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));
+};
+export default Outline;

package/es/lowcode/painter/Panel.js

@@ -0,0 +1,8 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styles from "./style/panel.less";
+var Panel = function Panel() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel']
+  }, "Panel");
+};
+export default Panel;

package/es/lowcode/painter/Ribbon.js

@@ -0,0 +1,136 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { useCreation } from 'ahooks';
+import { dynamic } from 'umi';
+import { Box } from 'luck-design';
+import { Icon, Tooltip, Drawer } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { upperFirst } from 'lodash';
+import styles from "./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 = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    drawer = _useState2[0],
+    setDrawer = _useState2[1];
+  var Detail = useCreation(function () {
+    return dynamic({
+      loader: function () {
+        var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var name, _yield$import, Comp;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!drawer) {
+                  _context.next = 7;
+                  break;
+                }
+                name = upperFirst(drawer.key);
+                _context.next = 4;
+                return import("./".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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: styles['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.createElement(Tooltip, {
+    placement: "right",
+    title: formatMessage({
+      id: 'luckda.lowcode.outline',
+      label: _DRAWER_OUTLINE_.title
+    })
+  }, /*#__PURE__*/React.createElement(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.createElement(Tooltip, {
+    placement: "right",
+    title: formatMessage({
+      id: 'luckda.lowcode.components',
+      label: _DRAWER_COMPONENTS_.title
+    })
+  }, /*#__PURE__*/React.createElement(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.createElement(Tooltip, {
+    placement: "right",
+    title: formatMessage({
+      id: 'luckda.lowcode.i18n',
+      label: _DRAWER_I18N_.title
+    })
+  }, /*#__PURE__*/React.createElement(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.createElement(Drawer, {
+    title: drawer ? 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.createElement(Detail, null)));
+};
+export default Ribbon;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from "../style/panel-item.less";
+
+/**
+ * 属性面板属性行组件
+ * @param {string} label 属性名
+ * @param {React.ReactNode} component 属性组件
+ * @returns 
+ */
+export default function (_ref) {
+  var label = _ref.label,
+    component = _ref.component;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-components-panelitem']
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['item-label']
+  }, label), /*#__PURE__*/React.createElement("span", {
+    className: styles['item-component']
+  }, component));
+}

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

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 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.log('err', error);
+    }
+  };
+  var className = styles['lc-painter-components-ruleinput'];
+  if (err) className += ' ' + styles['err'];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: err,
+    visible: err
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    className: className,
+    size: "small",
+    value: inputValue // 绑定输入值
+    ,
+    onChange: handleInputChange
+  }, rest, {
+    ref: ref
+  }))));
+});

package/es/lowcode/painter/index.js

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import classNames from 'classnames';
+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;
+  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/LayoutRatio.js

@@ -0,0 +1,123 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import styles from "../style/layout-ratio.less";
+import { formatMessage } from '@luck-design-biz/base/utils';
+import RuleInput from "../components/RuleInput";
+import PanelItem from "../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';
+
+/**
+ * 布局比例组件
+ * 
+ * @param {string} value 默认值
+ * @param {Function} onChange 当合法数据变化时触发
+ * @returns 
+ */
+var LayoutRatio = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(value || defaultRatio),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentRatio = _useState2[0],
+    setCurrentRatio = _useState2[1];
+  var handleInputChange = function handleInputChange(_, value) {
+    console.log('value', value);
+    if (!value) value = defaultRatio;
+    setCurrentRatio(value);
+  };
+  var handGridClick = function handGridClick(selectedRadio) {
+    // console.log('selectedRadio', selectedRadio);
+    setCurrentRatio(selectedRadio);
+    if (onChange) onChange(selectedRadio);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      getValue: function getValue() {
+        return currentRatio;
+      }
+    };
+  });
+
+  // 定义验证规则
+  var rules = [{
+    func: function func(value) {
+      // 首先，检查value是否为字符串
+      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;
+    },
+    err: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
+      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
+    })
+  }];
+  var isCurrentInRatios = ratios.includes(currentRatio);
+  var currentItemRatios = currentRatio.split(':');
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-layoutratio']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['ratio-view']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['gridbox-container']
+  }, ratios.map(function (ratio) {
+    var itemRatios = ratio.split(':');
+    var isCurrent = ratio == currentRatio;
+    var className = styles['gridbox'];
+    if (isCurrent) className = className + ' ' + styles['current'];
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      onClick: function onClick() {
+        return handGridClick(ratio);
+      }
+    }, itemRatios.map(function (itemRatio) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles['girditem'],
+        style: {
+          gridColumn: 'span ' + itemRatio
+        }
+      });
+    }));
+  }), !isCurrentInRatios && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['gridbox'], " ").concat(styles['current']),
+    onClick: function onClick() {
+      return handGridClick(ratio);
+    }
+  }, currentItemRatios.map(function (itemRatio) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles['girditem'],
+      style: {
+        gridColumn: 'span ' + itemRatio
+      }
+    });
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: styles['ratio-input']
+  }, /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
+      label: '列比例'
+    }),
+    component: /*#__PURE__*/React.createElement(RuleInput, {
+      placeholder: formatMessage({
+        id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+        label: '请输入列比例'
+      }),
+      rules: rules,
+      onValueChange: handleInputChange,
+      value: currentRatio
+    })
+  })));
+});
+export default LayoutRatio;

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

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../style/radio.less";
+
+/**
+ * Radio组件允许用户从一组选项中选择一个。它接收一个`options`数组来渲染选项，以及一个可选的`onChange`回调函数，
+ * 当用户选择不同的选项时，`onChange`会被调用并传递当前选中的选项对象。
+ * 
+ * @component
+ * @example
+ * const options = [
+ *   { label: '小', value: 'small' },
+ *   { label: '中', value: 'middle' },
+ *   { label: '大', value: 'large' }
+ * ];
+ * 
+ * function handleChange(option) {
+ *   console.log(option);
+ * }
+ * 
+ * <Radio options={options} onChange={handleChange} />
+ * 
+ * @param {Object} props - 组件的props。
+ * @param {Object[]} props.options - 选项数组，每个对象都应包含`label`和`value`。
+ * @param {string} props.options[].label - 选项的显示文本。
+ * @param {string} props.options[].value - 选项的值，应唯一。
+ * @param {Function} [props.onChange] - 可选，当选项变化时调用的回调函数。传递当前选中的选项对象。
+ */
+var Radio = function Radio(_ref) {
+  var _options$;
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useState = useState((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeValue = _useState2[0],
+    setActiveValue = _useState2[1];
+
+  // 点击事件处理函数
+  var handleClick = function handleClick(option) {
+    // 设置当前激活的选项
+    setActiveValue(option.value);
+    if (onChange) {
+      onChange(option);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-radio']
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: option.value,
+      className: "".concat(styles['radio-item'], " ").concat(activeValue === option.value ? 'active' : ''),
+      onClick: function onClick() {
+        return handleClick(option);
+      }
+    }, option.label);
+  }));
+};
+export default Radio;