@luck-design-biz/luckda 0.0.26 → 1.0.0-alpha

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

@@ -8,45 +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;
+  var handleInputChange = (0, _ahooks.useMemoizedFn)(function (_, value) {
+    // console.log('value', value);
+    // if (!value) value = _DEFAULTRATIO_;
     setCurrentRatio(value);
-  };
-  var handGridClick = function handGridClick(selectedRadio) {
+    onChange === null || onChange === void 0 || onChange(value);
+  });
+  var handGridClick = (0, _ahooks.useMemoizedFn)(function (selectedRadio) {
     // console.log('selectedRadio', selectedRadio);
     setCurrentRatio(selectedRadio);
-    if (onChange) onChange(selectedRadio);
-  };
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      getValue: function getValue() {
-        return currentRatio;
-      }
-    };
+    onChange === null || onChange === void 0 || onChange(selectedRadio);
   });
-
   // 定义验证规则
   var rules = [{
     func: function func(value) {
@@ -54,44 +63,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'
+      label: '必须是数字或者数字加:号的组合'
     })
   }];
-  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 +109,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
@@ -117,15 +124,15 @@ var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       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
-    })
-  })));
-});
+    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: currentRatio
+  }))));
+};
 var _default = exports.default = LayoutRatio;

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/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;

package/lib/lowcode/painter/panel-section/StylePanel/BackGround.js

@@ -0,0 +1,68 @@
+"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 _utils = require("@luck-design-biz/base/utils");
+var _StyleContext = require("./StyleContext");
+var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
+var _StyleRow = _interopRequireDefault(require("./StyleRow"));
+var _antd = require("luck-design/antd");
+var _ColorInput = _interopRequireDefault(require("../../components/ColorInput"));
+var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
+var _HightLightSvg = _interopRequireDefault(require("./HightLightSvg"));
+var textRelatedStyles = ['background-color'];
+
+/**
+ * 背景设置控件
+ */
+function _default() {
+  return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/_react.default.createElement(BackGroundEditor, null),
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.background',
+      label: '背景'
+    })
+  });
+}
+var BackGroundEditor = function BackGroundEditor() {
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var handleChange = function handleChange(field, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: field,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyleRow.default, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.font.weight',
+      label: '字重'
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylePanel.default['svg-label']
+  }, /*#__PURE__*/_react.default.createElement(_HightLightSvg.default, {
+    field: "background-color",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"
+  })))), /*#__PURE__*/_react.default.createElement(_ColorInput.default, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style['background-color'],
+    onChange: function onChange(value) {
+      return handleChange('background-color', value);
+    }
+  })));
+};