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

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

@@ -0,0 +1,120 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _antd = require("luck-design/antd");
+var _pageLayoutDisplay = _interopRequireDefault(require("../style/page-layout-display.less"));
+var _TYPES_ = ['lr', 'tb', 'lmr', 'ltb'];
+var PageLayoutDisplay = function PageLayoutDisplay(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(defaultValue || 'lr'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeType = _useState2[0],
+    setActiveType = _useState2[1];
+  var handleTypeChange = (0, _ahooks.useMemoizedFn)(function (value) {
+    setActiveType(value);
+    onChange(value);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _pageLayoutDisplay.default['lc-painter-panel-section-pagelayoutdisplay']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _pageLayoutDisplay.default['display-type-box']
+  }, _TYPES_.map(function (_type) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      key: _type,
+      title: _type
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(_pageLayoutDisplay.default['display-type-item'], (0, _defineProperty2.default)({}, _pageLayoutDisplay.default.active, activeType === _type)),
+      style: {
+        flexDirection: 'row'
+      },
+      onClick: function onClick() {
+        return handleTypeChange(_type);
+      }
+    }, _type === 'lr' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 3
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    })), _type === 'tb' && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%',
+        borderBottom: '1px solid #eee'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    })), _type === 'lmr' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '50%',
+        borderRight: '1px solid #eee'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '50%'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }))), _type === 'ltb' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%',
+        borderBottom: '1px solid #eee'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    })))));
+  })));
+};
+var _default = exports.default = PageLayoutDisplay;

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

@@ -0,0 +1,308 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _SortBox = require("../components/SortBox");
+var _ListEditor = require("../components/ListEditor");
+var _helper = require("../../engine/tools/helper");
+var _VarEditor = _interopRequireDefault(require("../components/VarEditor"));
+var _TipIcon = _interopRequireDefault(require("../components/TipIcon"));
+var _pageVars = _interopRequireDefault(require("../style/page-vars.less"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.pageVars';
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "luckda-6530__sc-1qdz6c5-0"
+})(["padding:0 12px;"]);
+var SearchBar = _styledComponents.default.div.withConfig({
+  displayName: "SearchBar",
+  componentId: "luckda-6530__sc-1qdz6c5-1"
+})(["display:flex;margin-bottom:8px;"]);
+var ItemWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "luckda-6530__sc-1qdz6c5-2"
+})(["display:flex;align-items:center;"]);
+var _TYPES_ = {
+  var: {
+    name: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".var"),
+      label: '变量'
+    }),
+    color: '#87d068'
+  },
+  api: {
+    name: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".api"),
+      label: '远程 API'
+    }),
+    color: '#108ee9'
+  }
+};
+var _TYPE_KEYS_ = Object.keys(_TYPES_);
+var PageVars = function PageVars(_ref) {
+  var _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? [] : _ref$defaultValue,
+    onChange = _ref.onChange;
+  var _useReducer = (0, _react.useReducer)(_helper.listReducer, defaultValue),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    vars = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var _useSetState = (0, _ahooks.useSetState)({}),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    filter = _useSetState2[0],
+    setFilter = _useSetState2[1];
+  (0, _ahooks.useUpdateEffect)(function () {
+    onChange(vars);
+  }, [vars]);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentItem = _useState2[0],
+    setCurrentItem = _useState2[1];
+  var handleSortChange = (0, _ahooks.useMemoizedFn)(function (sortItems) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems
+    });
+  });
+  var handleAdd = (0, _ahooks.useMemoizedFn)(function (_item) {
+    dispatch({
+      type: 'add',
+      payload: _item
+    });
+    setCurrentItem(_item);
+  });
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function (keyword) {
+      return setFilter({
+        keyword: (0, _lodash.isNil)(keyword) || keyword === '' ? void 0 : keyword
+      });
+    }, {
+      wait: 400
+    }),
+    handleSearch = _useDebounceFn.run;
+  var renderItemLeft = (0, _ahooks.useMemoizedFn)(function (item) {
+    var _TYPES_$item$type = _TYPES_[item.type],
+      name = _TYPES_$item$type.name,
+      color = _TYPES_$item$type.color;
+    return /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: color
+      }
+    }, name.substring(0, 2)), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        marginLeft: 4,
+        fontWeight: 'bold'
+      }
+    }, item.name));
+  });
+  var renderItemRight = (0, _ahooks.useMemoizedFn)(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+      type: "edit",
+      onClick: function onClick() {
+        return setCurrentItem(item);
+      },
+      style: {
+        marginRight: 4,
+        cursor: 'pointer'
+      },
+      title: (0, _utils.formatMessage)({
+        id: "".concat(_I18N_PREFIX_, ".edit"),
+        label: '编辑'
+      })
+    }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+      type: "copy",
+      onClick: function onClick() {
+        return handleAdd((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          id: (0, _utils.suid)(),
+          name: "".concat(item.name, "_copy")
+        }));
+      },
+      style: {
+        marginRight: 4,
+        cursor: 'pointer'
+      },
+      title: (0, _utils.formatMessage)({
+        id: "".concat(_I18N_PREFIX_, ".copy"),
+        label: '拷贝'
+      })
+    }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+      type: "delete",
+      onClick: function onClick() {
+        return _antd.Modal.confirm({
+          title: (0, _utils.formatMessage)({
+            id: "".concat(_I18N_PREFIX_, ".confirm.delete"),
+            label: "\u786E\u8BA4\u5220\u9664\u5417\uFF1F"
+          }),
+          onOk: function onOk() {
+            if (currentItem.id === item.id) {
+              setCurrentItem(null);
+            }
+            dispatch({
+              type: 'delete',
+              payload: item.id
+            });
+          }
+        });
+      },
+      style: {
+        marginRight: 4,
+        cursor: 'pointer'
+      },
+      title: (0, _utils.formatMessage)({
+        id: "".concat(_I18N_PREFIX_, ".delete"),
+        label: '删除'
+      })
+    }));
+  });
+  var menu = (0, _ahooks.useCreation)(function () {
+    return /*#__PURE__*/_react.default.createElement(_antd.Menu, {
+      onClick: function onClick(_ref2) {
+        var key = _ref2.key;
+        var id = (0, _utils.suid)();
+        handleAdd((0, _objectSpread2.default)({
+          id: id,
+          type: key,
+          name: id
+        }, {
+          var: {
+            data: ''
+          },
+          api: {
+            data: {
+              auto: true,
+              taskType: 'parallel',
+              method: 'get'
+            }
+          }
+        }[key]));
+      }
+    }, _TYPE_KEYS_.map(function (key) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: key
+      }, _TYPES_[key].name);
+    }));
+  }, []);
+  var _vars = (0, _ahooks.useCreation)(function () {
+    var keyword = filter.keyword,
+      type = filter.type;
+    var _vars = (0, _lodash.isNil)(type) ? vars : vars.filter(function (_item) {
+      return _item.type === type;
+    });
+    if ((0, _lodash.isNil)(keyword) || keyword === '') {
+      return _vars;
+    }
+    return (0, _lodash.reduce)(_vars, function (ret, _item) {
+      if (JSON.stringify(_item).includes(keyword)) {
+        ret.push(_item);
+      }
+      return ret;
+    }, []);
+  }, [filter, vars]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    defaultValue: "all",
+    style: {
+      width: 100,
+      marginRight: 8
+    },
+    onSelect: function onSelect(key) {
+      return setFilter({
+        type: key === 'all' ? void 0 : key
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "all"
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".all"),
+    label: '全部'
+  })), _TYPE_KEYS_.map(function (key) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: key,
+      value: key
+    }, _TYPES_[key].name);
+  })), /*#__PURE__*/_react.default.createElement(_antd.Input.Search, {
+    size: "small",
+    allowClear: true,
+    style: {
+      flex: 1
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".placeholder.search"),
+      label: '请输入'
+    }),
+    onChange: function onChange(e) {
+      return handleSearch(e.target.value);
+    },
+    onSearch: handleSearch
+  })), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    overlay: menu,
+    trigger: ['click'],
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "primary"
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".add"),
+    label: '添加'
+  }))), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: vars.map(function (_ref3) {
+      var id = _ref3.id;
+      return id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: true
+  }, _vars.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      key: item.id,
+      id: item.id
+    }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      sortable: (0, _lodash.isNil)(filter.keyword) && (0, _lodash.isNil)(filter.type),
+      left: renderItemLeft(item),
+      right: renderItemRight(item),
+      item: item,
+      dispatch: dispatch
+    }));
+  })))), currentItem ? /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    visible: true,
+    width: 420,
+    mask: false,
+    onClose: function onClose() {
+      return setCurrentItem(null);
+    },
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".edit"),
+      label: '编辑数据源'
+    }),
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    destroyOnClose: true,
+    className: _pageVars.default['lc-painter-panel-page-vars-drawer'],
+    style: {
+      position: 'absolute',
+      transform: 'none',
+      right: 320
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VarEditor.default, {
+    key: currentItem.id,
+    item: currentItem,
+    dispatch: dispatch
+  })) : null);
+};
+var _default = exports.default = PageVars;

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

@@ -0,0 +1,53 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("luck-design/antd");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var Div = _styledComponents.default.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-nsshdj-0"
+})(["display:flex;align-items:center;"]);
+var SerialsSelector = function SerialsSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange,
+    size = _ref.size;
+  var _useRemoteSource = (0, _ContextProvider.useRemoteSource)(),
+    serials = _useRemoteSource.serials,
+    refreshSerials = _useRemoteSource.refreshSerials,
+    fetchAllSerialsLoading = _useRemoteSource.fetchAllSerialsLoading;
+  return /*#__PURE__*/_react.default.createElement(Div, null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    defaultValue: defaultValue,
+    size: size,
+    allowClear: true,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    style: {
+      flex: 1
+    },
+    loading: fetchAllSerialsLoading
+  }, serials.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: opt.uid,
+      value: opt.serial
+    }, opt.name);
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: size,
+    icon: "cloud-sync",
+    loading: fetchAllSerialsLoading,
+    style: {
+      marginLeft: 4
+    },
+    onClick: refreshSerials
+  }));
+};
+var _default = exports.default = SerialsSelector;

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

@@ -0,0 +1,172 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+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 _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = require("lodash");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
+var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
+var _splitDisplay = _interopRequireDefault(require("../style/split-display.less"));
+var _OPTIONS_ = [{
+  label: (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitVertical',
+    label: '横向'
+  }),
+  value: 'vertical'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitHorizontal',
+    label: '纵向'
+  }),
+  value: 'horizontal'
+}];
+var _RULES_ = [{
+  func: function func(value) {
+    // 首先，检查value是否为字符串
+    if (!(0, _lodash.isString)(value) || value === '') return false;
+
+    // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+    return /^[1-9]+(:[1-9]+)+$/.test(value);
+  },
+  err: (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.err',
+    label: '必须是数字或者数字加:号的组合'
+  })
+}];
+var _FAST_TO_MAPPING_ = {
+  right: 'left',
+  left: 'right',
+  up: 'down',
+  down: 'up'
+};
+var FastToBox = _styledComponents.default.div.withConfig({
+  displayName: "FastToBox",
+  componentId: "luckda-6530__sc-aassai-0"
+})(["display:flex;justify-content:flex-start;align-items:center;i:not(:last-child){margin-right:4px;}"]);
+var SplitDisplay = function SplitDisplay(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var valueRef = (0, _react.useRef)(defaultValue);
+  var _useState = (0, _react.useState)(defaultValue.split || 'vertical'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    split = _useState2[0],
+    setSplit = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultValue.ratio || '1:1'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    ratio = _useState4[0],
+    setRatio = _useState4[1];
+  var ratioArr = (0, _ahooks.useCreation)(function () {
+    return ratio.split(':').map(function (r) {
+      return parseInt(r);
+    });
+  }, [ratio]);
+  var _useState5 = (0, _react.useState)(function () {
+      return (0, _lodash.drop)(ratioArr).map(function () {
+        return split === 'vertical' ? 'right' : 'down';
+      });
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    fastTo = _useState6[0],
+    setFastTo = _useState6[1];
+  var handleFastToItemClick = (0, _ahooks.useMemoizedFn)(function (d, i) {
+    var _fastTo = (0, _toConsumableArray2.default)(fastTo);
+    _fastTo[i] = _FAST_TO_MAPPING_[d];
+    setFastTo(_fastTo);
+    valueRef.current.fastTo = _fastTo;
+    onChange((0, _objectSpread2.default)({}, valueRef.current));
+  });
+  var handleSplitChange = (0, _ahooks.useMemoizedFn)(function (value) {
+    var _fastTo = (0, _lodash.drop)(ratio.split(':')).map(function () {
+      return value === 'vertical' ? 'right' : 'down';
+    });
+    setSplit(value);
+    setFastTo(_fastTo);
+    valueRef.current.split = value;
+    valueRef.current.fastTo = _fastTo;
+    onChange((0, _objectSpread2.default)({}, valueRef.current));
+  });
+  var handleInputChange = (0, _ahooks.useMemoizedFn)(function (_, value) {
+    console.log('handleInputChange', value);
+    var _fastTo = (0, _lodash.drop)(value.split(':')).map(function () {
+      return split === 'vertical' ? 'right' : 'down';
+    });
+    setRatio(value);
+    setFastTo(_fastTo);
+    valueRef.current.ratio = value;
+    valueRef.current.fastTo = _fastTo;
+    onChange((0, _objectSpread2.default)({}, valueRef.current));
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _splitDisplay.default['lc-painter-panel-section-splitdisplay']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _splitDisplay.default['display-type-box']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _splitDisplay.default['display-type-item'],
+    style: {
+      flexDirection: split === 'horizontal' ? 'column' : 'row'
+    }
+  }, ratioArr.map(function (r, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      style: (0, _defineProperty2.default)({
+        flex: r
+      }, split === 'horizontal' ? 'borderBottom' : 'borderRight', i < ratioArr.length - 1 ? '1px solid #eee' : 'none'),
+      className: _splitDisplay.default['item-block']
+    });
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.fastTo',
+      label: '收缩方向'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(FastToBox, null, fastTo.map(function (d, i) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      key: i,
+      type: "arrow-".concat(d),
+      onClick: function onClick() {
+        return handleFastToItemClick(d, i);
+      }
+    });
+  }))), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.split',
+      label: '分割方向'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    options: _OPTIONS_,
+    defaultValue: split,
+    onChange: handleSplitChange
+  })), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.ratio',
+      label: '列比例'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+      label: '请输入列比例'
+    }),
+    rules: _RULES_,
+    onValueChange: handleInputChange,
+    value: ratio
+  }))));
+};
+var _default = exports.default = SplitDisplay;