@luck-design-biz/luckda 1.0.1 → 1.0.2-2

package/lib/lowcode/painter/panel-section/ActionsEditor/ActionEditor.js

@@ -13,6 +13,8 @@ var _lodash = require("lodash");
 var _PopForm = require("../../components/PopForm");
 var _SerialsSelector = _interopRequireDefault(require("../SerialsSelector"));
 var _utils = require("@luck-design-biz/base/utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _IconSelector = _interopRequireDefault(require("../IconSelector"));
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.actionEditor';
 var _SERIAL_EFFECT_OPTIONS_ = [{
   label: (0, _utils.formatMessage)({
@@ -56,6 +58,8 @@ var ActionEditor = function ActionEditor(_ref) {
   var action = _ref.action,
     onChange = _ref.onChange,
     suppressName = _ref.suppressName,
+    _ref$suppressIcon = _ref.suppressIcon,
+    suppressIcon = _ref$suppressIcon === void 0 ? true : _ref$suppressIcon,
     suppressRiskLevel = _ref.suppressRiskLevel;
   var valueRef = (0, _react.useRef)((0, _lodash.cloneDeep)(action));
   var handleChange = (0, _ahooks.useMemoizedFn)(function (field, value) {
@@ -75,7 +79,21 @@ var ActionEditor = function ActionEditor(_ref) {
       id: "".concat(_I18N_PREFIX_, ".name.placeholder"),
       label: '请输入行为名称'
     })
-  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+  }))), !suppressIcon && /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".icon"),
+    label: '图标'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+    placement: "left",
+    content: /*#__PURE__*/_react.default.createElement(_IconSelector.default, {
+      value: action.icon,
+      onChange: function onChange(value) {
+        return handleChange('icon', value);
+      }
+    }),
+    trigger: "click"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    value: action.icon
+  })))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".serial"),
     label: '资源串'
   })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_SerialsSelector.default, {

package/lib/lowcode/painter/panel-section/ActionsEditor/index.js

@@ -20,6 +20,7 @@ var _PopConfirm = _interopRequireDefault(require("../../components/PopConfirm"))
 var _ActionBindModal = _interopRequireDefault(require("../../components/ActionBindModal"));
 var _utils = require("@luck-design-biz/base/utils");
 var _helper = require("../../../engine/tools/helper");
+var _IconFont = _interopRequireDefault(require("../../../../components/IconFont"));
 var _actionsEditor = _interopRequireDefault(require("../../style/actions-editor.less"));
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.actionsEditor';
 var _DISPLAY_OPTIONS_ = [{
@@ -40,6 +41,8 @@ var ActionsEditor = function ActionsEditor(_ref) {
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
     suppressDisplay = _ref.suppressDisplay,
+    _ref$suppressIcon = _ref.suppressIcon,
+    suppressIcon = _ref$suppressIcon === void 0 ? true : _ref$suppressIcon,
     suppressMax = _ref.suppressMax,
     suppressMore = _ref.suppressMore,
     defaultCode = _ref.defaultCode;
@@ -61,7 +64,8 @@ var ActionsEditor = function ActionsEditor(_ref) {
         serial: void 0,
         serialEffect: 'hidden',
         riskLevel: 'default',
-        actionPool: []
+        actionPool: [],
+        icon: suppressIcon ? null : 'iconyingyongguanli'
       },
       callback: function callback(newActions) {
         valueRef.current.todoList = newActions;
@@ -118,7 +122,8 @@ var ActionsEditor = function ActionsEditor(_ref) {
         action: action,
         onChange: function onChange(value) {
           return handleValueChange('action', value);
-        }
+        },
+        suppressIcon: suppressIcon
       })
     }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
       type: "edit",
@@ -215,11 +220,21 @@ var ActionsEditor = function ActionsEditor(_ref) {
     }),
     handleAdd: handleAdd
   }, todoList.map(function (action) {
+    var _action$icon;
     return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
       key: action.id,
       id: action.id
     }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
-      left: /*#__PURE__*/_react.default.createElement("span", null, action.name),
+      left: /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, suppressIcon ? null : /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+        type: (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : 'iconyingyongguanli',
+        style: {
+          marginRight: '4px'
+        }
+      }), /*#__PURE__*/_react.default.createElement("span", null, action.name)),
       right: renderItemRight(action),
       item: action,
       dispatch: dispatch

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

@@ -26,7 +26,7 @@ var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.complexPop';
 var DividerSpan = _styledComponents.default.span.withConfig({
   displayName: "DividerSpan",
   componentId: "luckda-6530__sc-lmsle1-0"
-})(["font-size:12px;color:var(--luck-text-color);"]);
+})(["font-size:12px;color:@text-color;"]);
 var FieldKey = _styledComponents.default.div.withConfig({
   displayName: "FieldKey",
   componentId: "luckda-6530__sc-lmsle1-1"

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

@@ -17,6 +17,7 @@ var _antd = require("luck-design/antd");
 var _ContextProvider = require("../../engine/provider/ContextProvider");
 var _apiUrl = require("../../constants/api-url");
 var _helper = require("../../engine/tools/helper");
+var _utils = require("@luck-design-biz/base/utils");
 var Div = _styledComponents.default.div.withConfig({
   displayName: "Div",
   componentId: "luckda-6530__sc-onj9tc-0"
@@ -147,7 +148,12 @@ var DataSetSelector = function DataSetSelector(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
       title: opt.name
     }, opt.name));
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.dateSetSelector.setting',
+      label: '配置字段'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: size,
     icon: "setting",
     style: {
@@ -162,7 +168,12 @@ var DataSetSelector = function DataSetSelector(_ref) {
         component: component
       });
     }
-  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.dateSetSelector.sync',
+      label: '同步数据'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: size,
     icon: "cloud-sync",
     loading: fetchAllDatasetLoading,
@@ -170,6 +181,6 @@ var DataSetSelector = function DataSetSelector(_ref) {
       marginLeft: 4
     },
     onClick: refreshDataset
-  }));
+  })));
 };
 var _default = exports.default = DataSetSelector;

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

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
@@ -35,11 +36,18 @@ var FieldState = function FieldState(_ref) {
   var defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
   var editorRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) || _DEFAULT_FUNC_),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    editorValue = _useState2[0],
+    setEditorValue = _useState2[1];
   var handleChange = (0, _ahooks.useMemoizedFn)(function (key, val) {
     var retVal = defaultValue || {};
     retVal[key] = val;
     onChange(retVal);
   });
+  var handleEditorLayoutChange = (0, _ahooks.useMemoizedFn)(function (code) {
+    setEditorValue(code);
+  });
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
     style: {
       width: '90%'
@@ -54,9 +62,10 @@ var FieldState = function FieldState(_ref) {
     title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
       ref: editorRef,
       EditorComponent: _JSEditor.default,
+      onLayoutChange: handleEditorLayoutChange,
       width: "600px",
       height: "400px"
-    }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) || _DEFAULT_FUNC_),
+    }, editorValue),
     showBtn: true,
     onConfirm: function onConfirm() {
       var val = editorRef.current.editor.getValue();

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

@@ -24,7 +24,7 @@ var _apiUrl = require("../../constants/api-url");
 var _helper = require("../../engine/tools/helper");
 var _fieldsSetting = _interopRequireDefault(require("../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'];
+var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'render', 'col', 'row', 'note', 'placeholder', 'fieldAliasName', 'complexConfig', 'formMode'];
 var Header = _styledComponents.default.div.withConfig({
   displayName: "Header",
   componentId: "luckda-6530__sc-gcwvp1-0"
@@ -205,7 +205,7 @@ var FieldsSetting = function FieldsSetting(_ref) {
         data: {
           uid: groupId,
           id: groupId,
-          field: 'divider',
+          field: groupId,
           fieldName: 'Group',
           _type: 'divider'
         }

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

@@ -0,0 +1,63 @@
+"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 _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _services = require("@luck-design-biz/base/lib/sys/services");
+var GroupClassSelector = function GroupClassSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  (0, _ahooks.useAsyncEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var _yield$readAllClass, code, list, detail, data;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return (0, _services.readAllClass)();
+        case 2:
+          _yield$readAllClass = _context.sent;
+          code = _yield$readAllClass.code;
+          list = _yield$readAllClass.list;
+          detail = _yield$readAllClass.detail;
+          if (code === 1) {
+            data = list.map(function (id) {
+              return {
+                key: detail[id].skey,
+                label: detail[id].sname
+              };
+            });
+            setOptions(data);
+          }
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    defaultValue: defaultValue,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
+    size: "small"
+  }, options.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: item.key,
+      value: item.key
+    }, item.label);
+  }));
+};
+var _default = exports.default = GroupClassSelector;

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

@@ -10,29 +10,29 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _icon = _interopRequireDefault(require("../style/icon.less"));
 var _IconFont = _interopRequireDefault(require("../../../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元素。
  */
 function _default(_ref) {
   var defaultValue = _ref.defaultValue,

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

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

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

@@ -16,27 +16,27 @@ 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: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,

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

@@ -144,7 +144,7 @@ var PageVars = function PageVars(_ref) {
             label: "\u786E\u8BA4\u5220\u9664\u5417\uFF1F"
           }),
           onOk: function onOk() {
-            if (currentItem.id === item.id) {
+            if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) === item.id) {
               setCurrentItem(null);
             }
             dispatch({

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

@@ -16,8 +16,8 @@ var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var _HightLightSvg = _interopRequireDefault(require("./HightLightSvg"));
 var textRelatedStyles = ['background-color'];
 
-/**
- * 背景设置控件
+/**
+ * 背景设置控件
  */
 function _default() {
   return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {

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

@@ -25,8 +25,8 @@ var getPropName = function getPropName(str) {
   return str.split('-').pop();
 };
 
-/**
- * 边框样式设置控件
+/**
+ * 边框样式设置控件
  */
 function _default() {
   return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {

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

@@ -19,8 +19,8 @@ var borderMainProps = ['border-radius'];
 var borderSideProps = ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
 var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
 
-/**
- * 圆角样式设置控件
+/**
+ * 圆角样式设置控件
  */
 function _default() {
   return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {

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

@@ -9,8 +9,8 @@ exports.default = _default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _borderRadiusSelector = _interopRequireDefault(require("../../style/border-radius-selector.less"));
-/**
- * 圆角设置组件
+/**
+ * 圆角设置组件
  */
 function _default(_ref) {
   var onChange = _ref.onChange;

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

@@ -9,8 +9,8 @@ exports.default = _default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _borderSelector = _interopRequireDefault(require("../../style/border-selector.less"));
-/**
- * 边框选择组件
+/**
+ * 边框选择组件
  */
 function _default(_ref) {
   var onChange = _ref.onChange;

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

@@ -15,8 +15,8 @@ var _StyleContext = require("./StyleContext");
 var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
 
-/**
- * 显示样式设置控件
+/**
+ * 显示样式设置控件
  */
 function _default(_ref) {
   var label = _ref.label;

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

@@ -18,8 +18,8 @@ var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var Option = _antd.Select.Option;
 var textRelatedStyles = ['font-weight', 'font-style', 'color', 'font-size', 'line-height', 'text-align', 'text-decoration'];
 
-/**
- * 文字设置组件
+/**
+ * 文字设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();

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

@@ -18,8 +18,8 @@ var _Size = _interopRequireDefault(require("./Size"));
 var _HightLightSvg = _interopRequireDefault(require("./HightLightSvg"));
 var Option = _antd.Select.Option;
 
-/**
- * 文字详细编辑组件
+/**
+ * 文字详细编辑组件
  */
 function _default() {
   var _style$fontWeight;

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

@@ -11,8 +11,8 @@ var _StyleContext = require("./StyleContext");
 var _antd = require("luck-design/antd");
 var Option = _antd.Select.Option;
 
-/**
- * 间距选择组件
+/**
+ * 间距选择组件
  */
 function _default(_ref) {
   var _style$field;

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

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
 var _HighLigthtSpan = _interopRequireDefault(require("./HighLigthtSpan"));
 var _excluded = ["children", "label", "highLightFields", "customStyle"];
-/**
- * 标签自动高亮控件
+/**
+ * 标签自动高亮控件
  */
 function _default(_ref) {
   var children = _ref.children,

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

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _StyleContext = require("./StyleContext");
 var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
 var _excluded = ["children", "highLightFields", "customStyle"];
-/**
- * 标签自动高亮控件
+/**
+ * 标签自动高亮控件
  */
 function _default(_ref) {
   var children = _ref.children,

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

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _StyleContext = require("./StyleContext");
 var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
 var _excluded = ["children", "field", "label", "highLightFields"];
-/**
- * 标签自动高亮SVG
+/**
+ * 标签自动高亮SVG
  */
 function _default(_ref) {
   var children = _ref.children,

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

@@ -26,8 +26,8 @@ var _BorderRadius = _interopRequireDefault(require("./BorderRadius"));
 var _Shadow = _interopRequireDefault(require("./Shadow"));
 var _Opacity = _interopRequireDefault(require("./Opacity"));
 var _Pointer = _interopRequireDefault(require("./Pointer"));
-/**
- * 主样式面板
+/**
+ * 主样式面板
  */
 var MainPanel = function MainPanel() {
   var style = (0, _StyleContext.useStyle)(true);
@@ -39,6 +39,13 @@ var MainPanel = function MainPanel() {
       payload: code
     });
   }, []);
+  var handleEditorLayoutChange = (0, _react.useCallback)(function (code) {
+    dispatch({
+      type: 'code',
+      payload: code
+    });
+    editorRef.current.editor.setValue(code);
+  }, []);
   var handleEditorLoad = (0, _react.useCallback)(function () {
     (0, _StyleContext.styleToEditor)(style).then(function (css) {
       editorRef.current.editor.setValue(css);
@@ -61,6 +68,7 @@ var MainPanel = function MainPanel() {
       width: "280px",
       height: "300px",
       onChange: handleCodeChange,
+      onLayoutChange: handleEditorLayoutChange,
       onLoad: handleEditorLoad
     })
   }, /*#__PURE__*/_react.default.createElement(_antd.Button, {

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

@@ -22,8 +22,8 @@ function _default() {
   }));
 }
 
-/**
- * 边距样式设置组件
+/**
+ * 边距样式设置组件
  */
 var MarginGroup = function MarginGroup() {
   var style = (0, _StyleContext.useStyle)();

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

@@ -13,8 +13,8 @@ var _lodash = require("lodash");
 var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var field = 'opacity';
 
-/**
- * 透明度设置组件
+/**
+ * 透明度设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();

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

@@ -13,8 +13,8 @@ var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var textRelatedStyles = ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
 var field = 'padding';
 
-/**
- * 间距样式设置组件
+/**
+ * 间距样式设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();