@luck-design-biz/luckda 0.0.24-2 → 0.0.25-1

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

@@ -0,0 +1,316 @@
+"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 _luckDesign = require("luck-design");
+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 _ContextProvider = require("../../engine/provider/ContextProvider");
+var _SortBox = require("../components/SortBox");
+var _ListEditor = require("../components/ListEditor");
+var _fieldSetting = _interopRequireDefault(require("../components/field-setting"));
+var _BatchSetting = _interopRequireDefault(require("../components/field-setting/BatchSetting"));
+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_ = ['uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip'];
+var Header = _styledComponents.default.div.withConfig({
+  displayName: "Header",
+  componentId: "luckda-6530__sc-gcwvp1-0"
+})(["width:100%;display:flex;align-items:center;font-size:12px;font-weight:bold;"]);
+var FieldKey = (0, _styledComponents.default)(_luckDesign.Ellipsis).withConfig({
+  displayName: "FieldKey",
+  componentId: "luckda-6530__sc-gcwvp1-1"
+})(["width:80px;margin-left:4px;"]);
+var FieldsSetting = function FieldsSetting(_ref) {
+  var component = _ref.component,
+    pageinfo = _ref.pageinfo,
+    datasetUid = _ref.datasetUid,
+    nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange;
+  var ctx = (0, _ContextProvider.useContext)();
+  var _useReducer = (0, _react.useReducer)(_helper.listReducer, []),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    fields = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fieldId = _useState2[0],
+    setFieldId = _useState2[1];
+  var _useMap = (0, _ahooks.useMap)([]),
+    _useMap2 = (0, _slicedToArray2.default)(_useMap, 2),
+    checkedFields = _useMap2[0],
+    _useMap2$ = _useMap2[1],
+    set = _useMap2$.set,
+    remove = _useMap2$.remove;
+  var _useState3 = (0, _react.useState)(void 0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    drawerType = _useState4[0],
+    setDrawerType = _useState4[1];
+  var fieldData = (0, _ahooks.useCreation)(function () {
+    return fields.find(function (_ref2) {
+      var uid = _ref2.uid;
+      return uid === fieldId;
+    });
+  }, [fieldId, fields]);
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchFieldsByDataset, {
+      defaultParams: [{
+        datasetUid: datasetUid,
+        moduleUid: pageinfo.relationship.moduleId
+      }],
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code,
+          list = _ref3.list,
+          detail = _ref3.detail;
+        if (code === 1) {
+          var _fields = (0, _lodash.unionBy)((0, _lodash.intersectionWith)(defaultValue, list, function (a, b) {
+            return a.uid === b;
+          }), list.map(function (id) {
+            var _fieldData = detail[id];
+            var extraAttr = JSON.parse(_fieldData.extraAttr || '{}');
+            var alignMapping = {
+              0: 'left',
+              1: 'center',
+              2: 'right'
+            };
+            return {
+              uid: id,
+              field: detail[id].field,
+              align: alignMapping[extraAttr.scell_alignment],
+              headerAlign: alignMapping[extraAttr.sheading_alignment]
+            };
+          }), 'uid');
+          if (!(0, _lodash.isEqual)(_fields, defaultValue)) {
+            _onChange(_fields);
+          }
+          dispatch({
+            type: 'init',
+            payload: _fields.map(function (_field) {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, detail[_field.uid]), _field);
+            })
+          });
+        }
+      }
+    }),
+    loading = _useRequest.loading;
+  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchUpdateFieldAttrs, {
+      manual: true
+    }),
+    runUpdateFieldAttrs = _useRequest2.runAsync;
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function (field, value) {
+      var _pageinfo$relationshi = pageinfo.relationship,
+        moduleId = _pageinfo$relationshi.moduleId,
+        dataModelKey = _pageinfo$relationshi.dataModelKey;
+      runUpdateFieldAttrs({
+        dataModelKey: dataModelKey,
+        datasetBusinessUids: [field.uid],
+        fieldAliasName: value,
+        moduleDatasetUid: datasetUid,
+        moduleUid: moduleId,
+        scope: 'FIELD_ALIAS_NAME',
+        uid: field.uid
+      }).then(function () {
+        if (component === 'table') {
+          var gridApi = ctx.componentMap.get(nodeId).api.self.ref.current.gridApi;
+          var col = gridApi.columnApi.getColumn(field.field);
+          col.colDef.headerName = value;
+          gridApi.api.refreshHeader();
+        }
+      });
+    }, {
+      wait: 500
+    }),
+    run = _useDebounceFn.run;
+  var handleSortChange = (0, _ahooks.useMemoizedFn)(function (sortItems, fromIndex, toIndex) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems,
+      callback: function callback(newFields) {
+        if (component === 'table') {
+          var gridApi = ctx.componentMap.get(nodeId).api.self.ref.current.gridApi;
+          gridApi.columnApi.moveColumnByIndex(fromIndex, toIndex);
+        }
+        _onChange(newFields.map(function (_fieldData) {
+          return (0, _lodash.pick)(_fieldData, _PICK_KEYS_);
+        }));
+      }
+    });
+  });
+  var handleAliasChange = (0, _ahooks.useMemoizedFn)(function (field, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: field.uid,
+        data: {
+          fieldAliasName: value
+        }
+      }
+    });
+    run(field, value);
+  });
+  var handleFieldCheckChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    var _e$target = e.target,
+      checked = _e$target.checked,
+      data = _e$target.data;
+    if (checked) {
+      set(data.uid, data);
+    } else {
+      remove(data.uid, data);
+    }
+  });
+  var handleBatchSetting = (0, _ahooks.useMemoizedFn)(function () {
+    setDrawerType('batch');
+  });
+  var renderItemRight = (0, _ahooks.useMemoizedFn)(function (field) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: field.uid,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      value: field.fieldAliasName,
+      size: "small",
+      style: {
+        flex: 1
+      },
+      onChange: function onChange(e) {
+        return handleAliasChange(field, e.target.value);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.edit',
+        label: '编辑'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "edit",
+      style: {
+        margin: '0 4px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        setFieldId(field.uid);
+        setDrawerType('single');
+      }
+    })));
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: loading
+  }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 116,
+      paddingLeft: 40
+    }
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".field"),
+    label: '数据字段'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      paddingLeft: 20
+    }
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".title"),
+    label: '标题'
+  }))), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: fields.map(function (_ref4) {
+      var uid = _ref4.uid;
+      return uid;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: checkedFields.size === 0,
+    addText: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".batch"),
+      label: '批量设置'
+    }),
+    addIcon: "unordered-list",
+    handleAdd: handleBatchSetting,
+    addBtnProps: {
+      disabled: drawerType === 'batch'
+    }
+  }, fields.map(function (field) {
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      key: field.uid,
+      id: field.uid
+    }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      left: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+        disabled: drawerType === 'batch',
+        data: field,
+        onChange: handleFieldCheckChange
+      }), /*#__PURE__*/_react.default.createElement(FieldKey, {
+        tooltip: true,
+        lines: 1
+      }, field.field)),
+      right: renderItemRight(field),
+      item: field,
+      dispatch: dispatch
+    }));
+  })))), !!drawerType ? /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    visible: true,
+    width: 280,
+    mask: false,
+    onClose: function onClose() {
+      return setDrawerType(void 0);
+    },
+    title: drawerType === 'single' ? fieldData.fieldAliasName : (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".batch"),
+      label: '批量设置'
+    }),
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    destroyOnClose: true,
+    className: _fieldsSetting.default['lc-painter-panel-field-setting-drawer'],
+    style: {
+      position: 'absolute',
+      transform: 'none',
+      right: 320,
+      zIndex: 1001
+    }
+  }, drawerType === 'single' ? /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {
+    key: fieldId,
+    dispatch: dispatch,
+    nodeId: nodeId,
+    fieldData: fieldData,
+    dataModelKey: pageinfo.relationship.dataModelKey,
+    moduleId: pageinfo.relationship.moduleId,
+    datasetId: datasetUid,
+    component: component,
+    onAliasChange: handleAliasChange,
+    onChange: function onChange(newFields) {
+      return _onChange(newFields.map(function (_fieldData) {
+        return (0, _lodash.pick)(_fieldData, _PICK_KEYS_);
+      }));
+    }
+  }) : null, drawerType === 'batch' ? /*#__PURE__*/_react.default.createElement(_BatchSetting.default, {
+    dispatch: dispatch,
+    nodeId: nodeId,
+    fieldsData: checkedFields,
+    dataModelKey: pageinfo.relationship.dataModelKey,
+    moduleId: pageinfo.relationship.moduleId,
+    datasetId: datasetUid,
+    component: component,
+    onChange: function onChange(newFields) {
+      return _onChange(newFields.map(function (_fieldData) {
+        return (0, _lodash.pick)(_fieldData, _PICK_KEYS_);
+      }));
+    }
+  }) : null) : null);
+};
+var _default = exports.default = FieldsSetting;

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

@@ -1,14 +1,15 @@
 "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 = _default;
-var _react = _interopRequireDefault(require("react"));
-var _antd = require("luck-design/antd");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _icon = _interopRequireDefault(require("../style/icon.less"));
-var _apiUrl = require("../../constants/api-url");
+var _IconFont = _interopRequireDefault(require("../../../components/IconFont"));
 /**
  * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
  * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
@@ -20,7 +21,7 @@ var _apiUrl = require("../../constants/api-url");
  * <IconSelector
  *   field="iconField"
  *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
- *   value="icon-example"
+ *   defaultValue="icon-example"
  * />
  * ```
  *
@@ -28,26 +29,27 @@ var _apiUrl = require("../../constants/api-url");
  * @param {string} props.field 用于识别选择的图标字段的标识符。
  * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
  *                                  接收一个对象参数，该对象包含`field`字段。
- * @param {string} [props.value='iconyingyongguanli'] 初始化时图标的类型，
+ * @param {string} [props.defaultValue='iconyingyongguanli'] 初始化时图标的类型，
  *                                                     默认为'iconyingyongguanli'。
  *
  * @returns {React.Element} 渲染的React元素。
  */
 function _default(_ref) {
-  var field = _ref.field,
-    onSelect = _ref.onSelect,
-    value = _ref.value,
+  var defaultValue = _ref.defaultValue,
     next = _ref.next;
-  var IconFont = _antd.Icon.createFromIconfontCN({
-    scriptUrl: _apiUrl.ICONLIST_JS
-  });
+  var _useState = (0, _react.useState)(defaultValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    val = _useState2[0],
+    setVal = _useState2[1];
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _icon.default['lc-painter-panel-section-icon'],
     onClick: function onClick() {
-      return next();
+      return next({
+        onSelect: setVal
+      });
     }
-  }, /*#__PURE__*/_react.default.createElement(IconFont, {
-    type: value !== null && value !== void 0 ? value : 'iconyingyongguanli'
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: val !== null && val !== void 0 ? val : 'iconyingyongguanli'
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: _icon.default['selecor']
   }, "\u8BF7\u9009\u62E9 >"));

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

@@ -0,0 +1,119 @@
+"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 _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ListEditor = require("../components/ListEditor");
+var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
+var _Icon = _interopRequireDefault(require("./Icon"));
+var _IconSelector = _interopRequireDefault(require("./IconSelector"));
+var _JSEditor = _interopRequireDefault(require("./JSEditor"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.iconConditionSelector';
+var IconConditionSelector = function IconConditionSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    defaultCode = _ref.defaultCode;
+  var _useState = (0, _react.useState)((0, _lodash.cloneDeep)(defaultValue)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (type, index, value) {
+    var _list = (0, _lodash.cloneDeep)(list);
+    switch (type) {
+      case 'icon':
+        _list[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _list[index]), {}, {
+          icon: "icon".concat(value)
+        });
+        break;
+      case 'code':
+        _list[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _list[index]), {}, {
+          condition: value
+        });
+        break;
+      case 'delete':
+        _list.splice(index, 1);
+        break;
+      default:
+        ;
+    }
+    setList(_list);
+    onChange(_list);
+  });
+  var renderItemRight = (0, _ahooks.useMemoizedFn)(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.bindCondition',
+        label: '绑定条件'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+      mustConfirm: true,
+      defaultCode: defaultCode,
+      onChange: function onChange(value) {
+        return handleChange('code', index, value);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "paper-clip",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.delete',
+        label: '删除'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "delete",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return handleChange('delete', index);
+      }
+    })));
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    addText: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".add"),
+      label: '添加条件'
+    }),
+    handleAdd: function handleAdd() {
+      var _list = list.concat([{}]);
+      setList(_list);
+      onChange(_list);
+    }
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      sortable: false,
+      left: /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+        placement: "left",
+        title: /*#__PURE__*/_react.default.createElement(_IconSelector.default, {
+          value: item.icon,
+          onChange: function onChange(value) {
+            return handleChange('icon', index, value['font_class']);
+          }
+        })
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        value: item.icon
+      })),
+      right: renderItemRight(item, index)
+    });
+  })));
+};
+var _default = exports.default = IconConditionSelector;

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

@@ -35,7 +35,8 @@ var Search = _antd.Input.Search;
  * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
  */
 function _default(_ref) {
-  var onChange = _ref.onChange;
+  var onChange = _ref.onChange,
+    onSelect = _ref.onSelect;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     iconData = _useState2[0],
@@ -109,7 +110,9 @@ function _default(_ref) {
     return [];
   }, [iconData, searchTerm]);
   var handleClick = (0, _ahooks.useMemoizedFn)(function (icon) {
-    onChange === null || onChange === void 0 || onChange(icon);
+    var _iconfont = "".concat(iconData.css_prefix_text).concat(icon.font_class);
+    onSelect(_iconfont);
+    onChange(_iconfont);
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _iconSelector.default['lc-painter-panel-section-iconselector']

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

@@ -0,0 +1,98 @@
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _lodash = require("lodash");
+var _impexp = _interopRequireDefault(require("../style/impexp.less"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
+var ImpExp = function ImpExp(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useSetState = (0, _ahooks.useSetState)(defaultValue || {}),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  (0, _ahooks.useUpdateEffect)(function () {
+    onChange(state);
+  }, [state]);
+  var handleCheckboxChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    if (e.target.value === 'import') {
+      setState({
+        import: e.target.checked
+      });
+    } else if (e.target.value === 'export') {
+      setState({
+        export: e.target.checked
+      });
+    }
+  });
+  var handleInputChange = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var value = e.target.value.trim();
+    var _val = value === '' ? true : value;
+    console.log(_val);
+    if (field === 'import') {
+      setState({
+        import: _val
+      });
+    } else if (field === 'export') {
+      setState({
+        export: _val
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Row, {
+    gutter: [0, 8],
+    className: _impexp.default['lc-painter-panel-section-impexp']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 6
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    value: "import",
+    checked: !!state.import,
+    onChange: handleCheckboxChange
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.import',
+    label: '导入'
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 18
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: (0, _lodash.isString)(state.import) ? state.import : '',
+    onChange: function onChange(e) {
+      return handleInputChange('import', e);
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".impUrl.placeholder"),
+      label: '请输入模版ID或自定义接口'
+    })
+  })), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 6
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    value: "export",
+    checked: state.export,
+    onChange: handleCheckboxChange
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.export',
+    label: '导出'
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 18
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: (0, _lodash.isString)(state.export) ? state.export : '',
+    onChange: function onChange(e) {
+      return handleInputChange('export', e);
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".expUrl.placeholder"),
+      label: '请输入自定义接口'
+    })
+  })));
+};
+var _default = exports.default = ImpExp;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
+var _FullScreenEditor = _interopRequireDefault(require("../components/code-editor/FullScreenEditor"));
+var _JSEditor2 = _interopRequireDefault(require("../components/code-editor/JSEditor"));
+var _JSEditor = function _JSEditor(_ref) {
+  var defaultValue = _ref.defaultValue,
+    defaultCode = _ref.defaultCode,
+    onChange = _ref.onChange,
+    mustConfirm = _ref.mustConfirm,
+    children = _ref.children;
+  var editorRef = (0, _react.useRef)();
+  var handleCodeChange = (0, _react.useRef)((0, _lodash.debounce)(function (code) {
+    if (!mustConfirm) onChange(code);
+  }, 400));
+  var handleConfirm = (0, _ahooks.useMemoizedFn)(function () {
+    onChange(editorRef.current.editor.getValue());
+  });
+  var handleEditorLoad = (0, _ahooks.useMemoizedFn)(function () {
+    editorRef.current.editor.setValue(defaultValue || defaultCode);
+  });
+  return /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+    placement: "left",
+    title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
+      ref: editorRef,
+      EditorComponent: _JSEditor2.default,
+      width: "600px",
+      height: "400px",
+      onChange: handleCodeChange.current,
+      onLoad: handleEditorLoad
+    }),
+    showBtn: mustConfirm,
+    onConfirm: handleConfirm
+  }, children !== null && children !== void 0 ? children : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    block: true,
+    size: "small"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+    label: '源码编辑'
+  }))));
+};
+var _default = exports.default = _JSEditor;