@luck-design-biz/luckda 1.0.2-13 → 1.0.2-14

package/es/lowcode/painter/components/shortcut-modal/index.js

@@ -0,0 +1,208 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React from 'react';
+import { useCreation, useKeyPress } from 'ahooks';
+import { Modal, Row, Col } from 'luck-design/antd';
+import styled from 'styled-components';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import KeyIcon from "./KeyIcon";
+import { useContext } from "../../../engine/provider/ContextProvider";
+var Title = styled.div.withConfig({
+  displayName: "Title",
+  componentId: "luckda-6530__sc-hk09ii-0"
+})(["display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ant-border-color-base,#d9d9d9);margin-bottom:6px;height:32px;font-size:14px;color:var(--ant-text-color,rgba(0,0,0,0.65));"]);
+var Item = styled.div.withConfig({
+  displayName: "Item",
+  componentId: "luckda-6530__sc-hk09ii-1"
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;color:var(--ant-text-color,rgba(0,0,0,0.65));font-size:12px;min-height:24px;"]);
+var ItemLeft = styled.div.withConfig({
+  displayName: "ItemLeft",
+  componentId: "luckda-6530__sc-hk09ii-2"
+})(["display:flex;align-items:center;height:34px;padding:0 6px;line-height:22px;white-space:nowrap;"]);
+var ItemRight = styled.div.withConfig({
+  displayName: "ItemRight",
+  componentId: "luckda-6530__sc-hk09ii-3"
+})(["display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:5px 0;"]);
+var ShortcutModal = function ShortcutModal(_ref) {
+  var target = _ref.target,
+    show = _ref.show,
+    onClose = _ref.onClose;
+  var ctx = useContext();
+  var _useCreation = useCreation(function () {
+      var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+      var cKey = isMac ? '⌘' : 'Ctrl';
+      var cKeyAlias = isMac ? 'meta' : 'ctrl';
+      var aKey = isMac ? '⌥' : 'Alt';
+      return {
+        general: [{
+          key: 'save',
+          buttons: [cKey, 'S'],
+          buttonKeys: [cKeyAlias, 's'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.save',
+            label: '保存'
+          })
+        }, {
+          key: 'preview',
+          buttons: [cKey, 'P'],
+          buttonKeys: [cKeyAlias, 'p'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.preview',
+            label: '预览调试'
+          })
+        }, {
+          key: 'undo',
+          buttons: [cKey, 'Z'],
+          buttonKeys: [cKeyAlias, 'z'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.undo',
+            label: '撤销'
+          })
+        }, {
+          key: 'redo',
+          buttons: [cKey, 'Shift', 'Z'],
+          buttonKeys: [cKeyAlias, 'shift', 'z'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.redo',
+            label: '重做'
+          })
+        }, {
+          key: 'clone',
+          buttons: [cKey, 'C'],
+          buttonKeys: [cKeyAlias, 'c'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.copy',
+            label: '克隆组件'
+          })
+        }, {
+          key: 'delete',
+          buttons: ['Backspace'],
+          buttonKeys: ['backspace'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.delete',
+            label: '删除组件'
+          })
+        }],
+        others: [{
+          key: 'selectParent',
+          buttons: ['↑'],
+          buttonKeys: ['uparrow'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.selectParent',
+            label: '选择父级组件'
+          })
+        }, {
+          key: 'selectChildren',
+          buttons: ['↓'],
+          buttonKeys: ['downarrow'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.selectChildren',
+            label: '选择子级组件'
+          })
+        }, {
+          key: 'selectLeftBrother',
+          buttons: ['←'],
+          buttonKeys: ['leftarrow'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.selectLeftBrother',
+            label: '向左选择兄弟组件'
+          })
+        }, {
+          key: 'selectRightBrother',
+          buttons: ['→'],
+          buttonKeys: ['rightarrow'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.selectRightBrother',
+            label: '向右选择兄弟组件'
+          })
+        }, {
+          key: 'moveLeft',
+          buttons: [aKey, '←'],
+          buttonKeys: ['alt', 'leftarrow'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.moveLeft',
+            label: '向左移动组件'
+          })
+        }, {
+          key: 'moveRight',
+          buttons: [aKey, '→'],
+          buttonKeys: ['alt', 'rightarrow'],
+          label: formatMessage({
+            id: 'luckda.lowcode.design.toolbar.shortcut.moveRight',
+            label: '向右移动组件'
+          })
+        }]
+      };
+    }, []),
+    general = _useCreation.general,
+    others = _useCreation.others;
+  useKeyPress([].concat(_toConsumableArray(general), _toConsumableArray(others)).map(function (_ref2) {
+    var buttonKeys = _ref2.buttonKeys;
+    return buttonKeys.join('.');
+  }), function (event, key) {
+    event.preventDefault();
+    event.stopPropagation();
+    ctx.$publisher(ctx.topics.DESIGN_SHORTCUT_EMIT, {
+      event: event,
+      key: key
+    });
+  }, {
+    exactMatch: true,
+    useCapture: true,
+    target: target
+  });
+  return /*#__PURE__*/React.createElement(Modal, {
+    title: formatMessage({
+      id: 'luckda.lowcode.design.toolbar.shortcut',
+      label: '快捷键'
+    }),
+    visible: show,
+    onCancel: onClose,
+    width: 860,
+    footer: null,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    bodyStyle: {
+      marginTop: 0,
+      maxHeight: '60vh',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Row, {
+    gutter: 16
+  }, /*#__PURE__*/React.createElement(Col, {
+    className: "gutter-row",
+    span: 12
+  }, /*#__PURE__*/React.createElement(Title, null, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.shortcut.general',
+    label: '常规操作'
+  })), general.map(function (_ref3) {
+    var key = _ref3.key,
+      buttons = _ref3.buttons,
+      label = _ref3.label;
+    return /*#__PURE__*/React.createElement(Item, {
+      key: key
+    }, /*#__PURE__*/React.createElement(ItemLeft, null, label), /*#__PURE__*/React.createElement(ItemRight, null, buttons.map(function (b) {
+      return /*#__PURE__*/React.createElement(KeyIcon, {
+        key: b
+      }, b);
+    })));
+  })), /*#__PURE__*/React.createElement(Col, {
+    className: "gutter-row",
+    span: 12
+  }, /*#__PURE__*/React.createElement(Title, null, formatMessage({
+    id: 'luckda.lowcode.design.toolbar.shortcut.others',
+    label: '组件选择和移动'
+  })), others.map(function (_ref4) {
+    var key = _ref4.key,
+      buttons = _ref4.buttons,
+      label = _ref4.label;
+    return /*#__PURE__*/React.createElement(Item, {
+      key: key
+    }, /*#__PURE__*/React.createElement(ItemLeft, null, label), /*#__PURE__*/React.createElement(ItemRight, null, buttons.map(function (b) {
+      return /*#__PURE__*/React.createElement(KeyIcon, {
+        key: b
+      }, b);
+    })));
+  }))));
+};
+export default ShortcutModal;

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

@@ -1,12 +1,7 @@
 import React from 'react';
 import { useMemoizedFn } from 'ahooks';
-import { Typography } from 'luck-design/antd';
-import styled from 'styled-components';
-var Paragraph = Typography.Paragraph;
-var BlockIdSpan = styled(Paragraph).withConfig({
-  displayName: "BlockIdSpan",
-  componentId: "luckda-6530__sc-gbohir-0"
-})(["display:inline-block;margin:0;color:#595959;text-decoration:var(--ant-primary-color) wavy underline;cursor:copy;padding:0 4px;"]);
+import { Icon } from 'luck-design/antd';
+import { copyToClipboard } from '@luck-design-biz/base/utils';
 var BlockEditor = function BlockEditor(_ref) {
   var blockName = _ref.blockName,
     blockId = _ref.blockId,
@@ -17,25 +12,21 @@ var BlockEditor = function BlockEditor(_ref) {
       blockId: blockId
     });
   });
-  var handleCopyBlockId = useMemoizedFn(function (e) {
-    e.stopPropagation();
-  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     onClick: handleClick,
     style: next ? {
       color: 'var(--ant-primary-color)',
       cursor: 'pointer'
     } : {}
-  }, blockName, /*#__PURE__*/React.createElement("span", {
-    onClick: handleCopyBlockId
-  }, /*#__PURE__*/React.createElement(BlockIdSpan, {
-    style: {
-      display: 'inline-block',
-      margin: 0
+  }, blockName, /*#__PURE__*/React.createElement(Icon, {
+    type: "copy",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      copyToClipboard(blockId);
     },
-    copyable: {
-      text: blockId
+    style: {
+      margin: '0 8px'
     }
-  }, blockId))));
+  })));
 };
 export default BlockEditor;

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

@@ -56,7 +56,10 @@ var BlocksEditor = function BlocksEditor(_ref) {
     var _id = "block_".concat(suid());
     var newData = concat(blocks, _objectSpread(_objectSpread({
       id: _id,
-      name: _id,
+      name: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".defaultBlock"),
+        label: '默认区块'
+      }),
       type: type,
       serialEffect: 'hidden',
       mode: ['add', 'update', 'edit', 'info']

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

@@ -43,7 +43,6 @@ var ConditionCheck = function ConditionCheck(_ref) {
         checked: true
       });
     },
-    showClear: true,
     onClear: handleClear
   }, /*#__PURE__*/React.createElement(Badge, _extends({
     dot: value.code

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

@@ -132,13 +132,16 @@ var DataSetSelector = function DataSetSelector(_ref) {
     style: {
       width: 145
     },
-    loading: loading
+    loading: loading,
+    showSearch: true,
+    optionFilterProp: "title"
   }, options.map(function (opt) {
     return /*#__PURE__*/React.createElement(Select.Option, {
       key: opt.uid,
-      value: opt.code
+      value: opt.code,
+      title: "".concat(opt.name, "|").concat(opt.code)
     }, /*#__PURE__*/React.createElement(Tooltip, {
-      title: opt.name
+      title: "".concat(opt.name, "(").concat(opt.code, ")")
     }, opt.name));
   })), /*#__PURE__*/React.createElement(Tooltip, {
     title: formatMessage({

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

@@ -16,7 +16,7 @@ import { fetchFieldsByDataset } from "../../constants/api-url";
 import { listReducer, getLDMetaAttr } from "../../engine/tools/helper";
 import styles from "../style/fields-setting.less";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
-var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'render', 'col', 'row', 'note', 'placeholder', 'fieldAliasName', 'complexConfig', 'formMode'];
+var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'render', 'col', 'row', 'note', 'placeholder', 'fieldAliasName', 'complexConfig', 'formMode', 'dateFormat'];
 var Header = styled.div.withConfig({
   displayName: "Header",
   componentId: "luckda-6530__sc-gcwvp1-0"

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

@@ -2,29 +2,29 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useLayoutEffect } from 'react';
 import styles from "../style/icon.less";
 import IconFont from "../../../components/IconFont";
-/**
- * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
- * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
- * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
- *
- * @component
- * @example
- * ```jsx
- * <IconSelector
- *   field="iconField"
- *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
- *   defaultValue="icon-example"
- * />
- * ```
- *
- * @param {Object} props 组件的props
- * @param {string} props.field 用于识别选择的图标字段的标识符。
- * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
- *                                  接收一个对象参数，该对象包含`field`字段。
- * @param {string} [props.defaultValue='iconyingyongguanli'] 初始化时图标的类型，
- *                                                     默认为'iconyingyongguanli'。
- *
- * @returns {React.Element} 渲染的React元素。
+/**
+ * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
+ * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
+ * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   field="iconField"
+ *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
+ *   defaultValue="icon-example"
+ * />
+ * ```
+ *
+ * @param {Object} props 组件的props
+ * @param {string} props.field 用于识别选择的图标字段的标识符。
+ * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
+ *                                  接收一个对象参数，该对象包含`field`字段。
+ * @param {string} [props.defaultValue='iconyingyongguanli'] 初始化时图标的类型，
+ *                                                     默认为'iconyingyongguanli'。
+ *
+ * @returns {React.Element} 渲染的React元素。
  */
 export default function (_ref) {
   var defaultValue = _ref.defaultValue,

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

@@ -50,7 +50,8 @@ var IconConditionSelector = function IconConditionSelector(_ref) {
       defaultCode: defaultCode,
       onChange: function onChange(value) {
         return handleChange('code', index, value);
-      }
+      },
+      showClear: false
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "paper-clip",
       style: {

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

@@ -10,22 +10,22 @@ import { formatMessage } from '@luck-design-biz/base/utils';
 import { ICONLIST_URL, ICONLIST_JS } from "../../constants/api-url";
 var Search = Input.Search;
 
-/**
- * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
- *
- * 该组件首先从预定义的URL加载图标列表，然后显示这些图标。用户可以通过输入框搜索图标，
- * 点击图标时，会通过 `onChange` 回调将选中的图标信息返回给父组件。
- *
- * @component
- * @example
- * ```jsx
- * <IconSelector
- *   onChange={(selectedIcon) => console.log(selectedIcon)}
- * />
- * ```
- *
- * @param {Object} props 组件接受的props
- * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
+/**
+ * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
+ *
+ * 该组件首先从预定义的URL加载图标列表，然后显示这些图标。用户可以通过输入框搜索图标，
+ * 点击图标时，会通过 `onChange` 回调将选中的图标信息返回给父组件。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   onChange={(selectedIcon) => console.log(selectedIcon)}
+ * />
+ * ```
+ *
+ * @param {Object} props 组件接受的props
+ * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
  */
 export default function (_ref) {
   var onChange = _ref.onChange,

package/es/lowcode/painter/panel-section/JSEditor/ToolBar.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { reduce } from 'lodash';
 import { useContext, useRemoteSource } from "../../../engine/provider/ContextProvider";
-import { getModuleData } from "../../../engine/provider/ContextProvider/usePageDataStore";
+import { getLDMetaAttr } from "../../../engine/tools/helper";
 var Wrapper = styled.div.withConfig({
   displayName: "Wrapper",
   componentId: "luckda-6530__sc-fxe9dl-0"
@@ -24,7 +24,6 @@ var ToolBar = function ToolBar(_ref) {
   var _useRemoteSource = useRemoteSource(),
     module = _useRemoteSource.module,
     dataset = _useRemoteSource.dataset;
-  var moduleData = getModuleData();
   var meta = useCreation(function () {
     return [{
       key: 'instance',
@@ -60,11 +59,15 @@ var ToolBar = function ToolBar(_ref) {
         }, {
           key: 'publishEvent',
           label: '发布事件',
-          text: "ctx.$publisher('\u8BDD\u9898', {arg: 1});"
+          text: "ctx.$publisher('\u8BDD\u9898', {foo: 1, bar: 2});"
         }, {
           key: 'subscribEvent',
           label: '订阅事件',
           text: "ctx.$subscriber('\u8BDD\u9898').on(()=>{}).watch();"
+        }, {
+          key: 'unsubscriber',
+          label: '卸载事件',
+          text: "ctx.$unsubscriber('\u8BDD\u9898', '\u8BA2\u9605\u8005ID');"
         }]
       }, {
         key: 'tools',
@@ -122,7 +125,7 @@ var ToolBar = function ToolBar(_ref) {
         ret.push({
           key: actionKey,
           label: "".concat(actionName, "(").concat(actionKey, ")"),
-          text: "ctx.utils.callBehavior({ moduleCode:'".concat(moduleData.moduleCode, "', datasetCode: '\u6570\u636E\u96C6\u7F16\u7801', behaviorKey:'").concat(actionKey, "' }, {}, {});")
+          text: "ctx.utils.callBehavior({ moduleCode: '".concat(getLDMetaAttr('moduleCode'), "', datasetCode: '\u6570\u636E\u96C6\u7F16\u7801', behaviorKey:'").concat(actionKey, "' }, {}, {});")
         });
         return ret;
       }, [])

package/es/lowcode/painter/panel-section/JSEditor/index.js

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import * as monaco from 'monaco-editor';
 import { useBoolean, useDebounceFn, useMemoizedFn } from 'ahooks';
-import { Button, Modal } from 'luck-design/antd';
+import { Button, Modal, Badge } from 'luck-design/antd';
 import { LuckModal, SplitPane } from 'luck-design';
 import styled from 'styled-components';
 import { isNil } from 'lodash';
@@ -10,6 +11,7 @@ import { formatMessage } from '@luck-design-biz/base/utils';
 import ToolBar from "./ToolBar";
 import RuntimeComp from "../../../view/lc-components/JSX/RuntimeComp";
 import JSEditor from "../../components/code-editor/JSEditor";
+import styles from "./index.less";
 var Wrapper = styled.div.withConfig({
   displayName: "Wrapper",
   componentId: "luckda-6530__sc-pquf2n-0"
@@ -18,6 +20,11 @@ var PreviewWrapper = styled.div.withConfig({
   displayName: "PreviewWrapper",
   componentId: "luckda-6530__sc-pquf2n-1"
 })(["width:100%;height:100%;overflow:auto;"]);
+var BlockBadge = function BlockBadge(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.blockBadge
+  }, /*#__PURE__*/React.createElement(Badge, props));
+};
 var _JSEditor = function _JSEditor(_ref) {
   var defaultValue = _ref.defaultValue,
     defaultCode = _ref.defaultCode,
@@ -28,7 +35,7 @@ var _JSEditor = function _JSEditor(_ref) {
     trigger = _ref.trigger,
     onClear = _ref.onClear,
     _ref$showClear = _ref.showClear,
-    showClear = _ref$showClear === void 0 ? false : _ref$showClear;
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear;
   var editorRef = useRef();
   var _useState = useState(defaultValue || defaultCode),
     _useState2 = _slicedToArray(_useState, 2),
@@ -119,15 +126,18 @@ var _JSEditor = function _JSEditor(_ref) {
       label: '确定'
     })));
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !trigger && (children ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !trigger && /*#__PURE__*/React.createElement(BlockBadge, _extends({
+    dot: !!defaultValue
+  }, !!defaultValue ? {
+    color: "lime"
+  } : {}), children ? /*#__PURE__*/React.createElement("div", {
     onClick: show
   }, children) : /*#__PURE__*/React.createElement(Button, {
     block: true,
     size: "small",
     onClick: show,
     style: {
-      margin: '0 8px',
-      width: 'calc(100% - 16px)'
+      width: '100%'
     }
   }, formatMessage({
     id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',

package/es/lowcode/painter/panel-section/JSEditor/index.less

@@ -0,0 +1,4 @@
+.blockBadge>span{
+    display: block;
+    margin: 0 8px;
+}

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

@@ -8,27 +8,27 @@ 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:3:9';
 
-/**
- * `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元素。
+/**
+ * `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 = function LayoutRatio(_ref) {
   var defaultValue = _ref.defaultValue,