@luck-design-biz/luckda 1.0.0-alpha → 1.0.1-2

package/lib/lowcode/painter/components/VarEditor.js

@@ -0,0 +1,463 @@
+"use strict";
+
+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 = _interopRequireDefault(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 _VisionEditor = _interopRequireDefault(require("./code-editor/VisionEditor"));
+var _JSEditor = _interopRequireDefault(require("./code-editor/JSEditor"));
+var _TipIcon = _interopRequireDefault(require("./TipIcon"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.pageVars';
+var StyledForm = (0, _styledComponents.default)(_antd.Form).withConfig({
+  displayName: "StyledForm",
+  componentId: "luckda-6530__sc-iq6k7e-0"
+})(["font-size:12px;.ant-form-item{font-size:12px;margin-bottom:0;}label{font-size:12px;}"]);
+var StyledSegmented = (0, _styledComponents.default)(_antd.Segmented).withConfig({
+  displayName: "StyledSegmented",
+  componentId: "luckda-6530__sc-iq6k7e-1"
+})(["width:100%;"]);
+var EditorWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EditorWrapper",
+  componentId: "luckda-6530__sc-iq6k7e-2"
+})(["width:100%;height:80px;border:1px solid #d9d9d9;border-radius:4px;margin:8px 0;"]);
+var LabelLine = _styledComponents.default.div.withConfig({
+  displayName: "LabelLine",
+  componentId: "luckda-6530__sc-iq6k7e-3"
+})(["height:28px;background:rgba(31,56,88,0.04);border-top:1px solid rgba(31,56,88,0.1);border-bottom:1px solid rgba(31,56,88,0.1);margin:8px 0;line-height:26px;padding:0 12px;", ""], function (props) {
+  return props.$flex ? {
+    display: 'flex',
+    'align-items': 'center',
+    'justify-content': 'space-between'
+  } : null;
+});
+var _EDITOR_OPTIONS = {
+  minimap: {
+    enabled: false
+  },
+  lineNumbers: 'off'
+};
+var _TASK_TYPE_OPTIONS = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".taskType.serial"),
+    label: '串行'
+  }),
+  value: 'serial'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".taskType.parallel"),
+    label: '并行'
+  }),
+  value: 'parallel'
+}];
+var _METHOD_OPTIONS = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".method.jsonp"),
+    label: 'JSONP'
+  }),
+  value: 'jsonp'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".method.get"),
+    label: 'GET'
+  }),
+  value: 'get'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".taskType.post"),
+    label: 'POST'
+  }),
+  value: 'post'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".taskType.put"),
+    label: 'PUT'
+  }),
+  value: 'put'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".taskType.delete"),
+    label: 'DELETE'
+  }),
+  value: 'delete'
+}];
+var _DEFAULT_PROCESS_ = {
+  willFetch: {
+    code: 'function willFetch(vars, config){\n\t\n}',
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".willFetch"),
+      label: "\u8BF7\u6C42\u53D1\u9001\u524D\u5904\u7406\u51FD\u6570(willFetch)"
+    })
+  },
+  didFetch: {
+    code: 'function didFetch(content){\n\t\n}',
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".didFetch"),
+      label: "\u8BF7\u6C42\u53D1\u9001\u524D\u5904\u7406\u51FD\u6570(didFetch)"
+    })
+  },
+  onError: {
+    code: 'function onError(error){\n\t\n}',
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".onError"),
+      label: "\u8BF7\u6C42\u53D1\u9001\u524D\u5904\u7406\u51FD\u6570(onError)"
+    })
+  }
+};
+var getBasicFormItem = function getBasicFormItem(form, item) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".name"),
+      label: '名称'
+    })
+  }, form.getFieldDecorator('name', {
+    initialValue: item.name,
+    rules: [{
+      required: true,
+      message: (0, _utils.formatMessage)({
+        id: "".concat(_I18N_PREFIX_, ".messag.name"),
+        label: '请输入变量名'
+      })
+    }]
+  })( /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small"
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".desc"),
+      label: '描述'
+    })
+  }, form.getFieldDecorator('desc', {
+    initialValue: item.desc
+  })( /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".placeholder"),
+      label: '请输入'
+    })
+  }))));
+};
+var VarForm = _antd.Form.create({
+  name: 'var_form',
+  onValuesChange: function onValuesChange(_ref, values) {
+    var dispatch = _ref.dispatch,
+      item = _ref.item;
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: values
+      }
+    });
+  }
+})(function (_ref2) {
+  var form = _ref2.form,
+    item = _ref2.item,
+    dispatch = _ref2.dispatch;
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function (code) {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: item.id,
+          data: {
+            data: code
+          }
+        }
+      });
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn.run;
+  return /*#__PURE__*/_react.default.createElement(StyledForm, {
+    layout: "horizontal",
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 17
+    },
+    hideRequiredMark: true
+  }, getBasicFormItem(form, item), /*#__PURE__*/_react.default.createElement(LabelLine, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".data"),
+    label: '数据'
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".tip.data"),
+      label: "\u8F93\u5165\u6846\u5185\u652F\u6301\u8F93\u5165JS\u7684\u57FA\u672C\u7C7B\u578B\u53D8\u91CF\uFF0C\u5982\u5B57\u7B26\u4E32:\"string\"\uFF0C\u6570\u5B57:123\uFF0C\u5E03\u5C14\u503C:true/false\uFF0C\u6570\u7EC4:[1,2,3]\uFF0C\u5BF9\u8C61:{\"name\": \"test\"}\uFF0C\u7A7A\u503C:null"
+    })
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: 300
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VisionEditor.default, {
+    onChange: handleEditorValueChange
+  }, item.data)));
+});
+var ApiForm = _antd.Form.create({
+  name: 'api_form',
+  onValuesChange: function onValuesChange(_ref3, values, all) {
+    var dispatch = _ref3.dispatch,
+      item = _ref3.item;
+    var auto = (0, _lodash.get)(values, 'data.auto');
+    if (auto) {
+      (0, _lodash.set)(all, 'data.taskType', 'parallel');
+    } else if (auto === false) {
+      (0, _lodash.unset)(all, 'data.taskType');
+    }
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: all
+      }
+    });
+  }
+})(function (_ref4) {
+  var _item$data, _item$data2, _item$data3, _item$data4, _item$data5, _item$data6, _item$data7, _item$data8, _item$data9, _item$data10, _item$data11;
+  var form = _ref4.form,
+    item = _ref4.item,
+    dispatch = _ref4.dispatch;
+  var _useSet = (0, _ahooks.useSet)((0, _lodash.intersection)(['willFetch', 'didFetch', 'onError'], (0, _lodash.keys)(item))),
+    _useSet2 = (0, _slicedToArray2.default)(_useSet, 2),
+    processSet = _useSet2[0],
+    _useSet2$ = _useSet2[1],
+    add = _useSet2$.add,
+    remove = _useSet2$.remove;
+  var _useDebounceFn2 = (0, _ahooks.useDebounceFn)(function (field, code) {
+      var obj = {};
+      (0, _lodash.set)(obj, field, code);
+      form.setFieldsValue(obj);
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn2.run;
+  var handleAddProcessFun = (0, _ahooks.useMemoizedFn)(function (_ref5) {
+    var key = _ref5.key;
+    if (!processSet.has(key)) {
+      add(key);
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: item.id,
+          data: (0, _defineProperty2.default)({}, key, _DEFAULT_PROCESS_[key].code)
+        }
+      });
+    }
+  });
+  var handleDelProcessFun = (0, _ahooks.useMemoizedFn)(function (_ref6) {
+    var key = _ref6.key;
+    remove(key);
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _defineProperty2.default)({}, key, void 0)
+      }
+    });
+  });
+  var renderProcess = (0, _ahooks.useMemoizedFn)(function (processKey) {
+    return processSet.has(processKey) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LabelLine, {
+      $flex: true
+    }, _DEFAULT_PROCESS_[processKey].title, /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+      type: "delete",
+      onClick: function onClick() {
+        return handleDelProcessFun(processKey);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      wrapperCol: {
+        span: 24
+      }
+    }, form.getFieldDecorator(processKey, {
+      initialValue: item[processKey] || _DEFAULT_PROCESS_[processKey].code
+    })( /*#__PURE__*/_react.default.createElement(EditorWrapper, {
+      style: {
+        margin: '4px 18px',
+        width: 'calc(100% - 36px)'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+      options: _EDITOR_OPTIONS,
+      onChange: function onChange(code) {
+        return handleEditorValueChange(processKey, code);
+      }
+    }, item[processKey] || _DEFAULT_PROCESS_[processKey].code))))) : null;
+  });
+  var menu = (0, _ahooks.useCreation)(function () {
+    return /*#__PURE__*/_react.default.createElement(_antd.Menu, {
+      onClick: handleAddProcessFun
+    }, /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+      key: "willFetch"
+    }, _DEFAULT_PROCESS_.willFetch.title), /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+      key: "didFetch"
+    }, _DEFAULT_PROCESS_.didFetch.title), /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+      key: "onError"
+    }, _DEFAULT_PROCESS_.onError.title));
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(StyledForm, {
+    layout: "horizontal",
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 17
+    },
+    hideRequiredMark: true
+  }, getBasicFormItem(form, item), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".auto"),
+      label: '自动加载'
+    })
+  }, form.getFieldDecorator('data.auto', {
+    valuePropName: 'checked',
+    initialValue: Boolean((_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.auto)
+  })( /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    size: "small"
+  }))), form.getFieldValue('data.auto') ? /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".taskType"),
+      label: '加载方式'
+    })
+  }, form.getFieldDecorator('data.taskType', {
+    initialValue: ((_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.taskType) || 'parallel'
+  })( /*#__PURE__*/_react.default.createElement(StyledSegmented, {
+    size: "small",
+    options: _TASK_TYPE_OPTIONS
+  }))) : null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".url"),
+      label: '请求地址'
+    })
+  }, form.getFieldDecorator('data.url', {
+    initialValue: ((_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.url) || ''
+  })( /*#__PURE__*/_react.default.createElement(EditorWrapper, null, /*#__PURE__*/_react.default.createElement(_VisionEditor.default, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.url', code);
+    }
+  }, ((_item$data4 = item.data) === null || _item$data4 === void 0 ? void 0 : _item$data4.url) || '')))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".method"),
+      label: '请求方式'
+    })
+  }, form.getFieldDecorator('data.method', {
+    initialValue: ((_item$data5 = item.data) === null || _item$data5 === void 0 ? void 0 : _item$data5.method) || 'get'
+  })( /*#__PURE__*/_react.default.createElement(StyledSegmented, {
+    size: "small",
+    options: _METHOD_OPTIONS
+  }))), /*#__PURE__*/_react.default.createElement(LabelLine, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".urlParams"),
+    label: '请求参数'
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".tip.urlParams"),
+      label: 'URL 请求参数，格式为 {key1:value1,key2:value2} ，等价于 ?key1=value1&key2=value2'
+    })
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    wrapperCol: {
+      span: 24
+    }
+  }, form.getFieldDecorator('data.params', {
+    initialValue: ((_item$data6 = item.data) === null || _item$data6 === void 0 ? void 0 : _item$data6.params) || ''
+  })( /*#__PURE__*/_react.default.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VisionEditor.default, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.params', code);
+    }
+  }, ((_item$data7 = item.data) === null || _item$data7 === void 0 ? void 0 : _item$data7.params) || '')))), /*#__PURE__*/_react.default.createElement(LabelLine, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".body"),
+    label: '请求体'
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".tip.body"),
+      label: '接口请求体(body)，格式为 {key1:value1,key2:value2}'
+    })
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    wrapperCol: {
+      span: 24
+    }
+  }, form.getFieldDecorator('data.body', {
+    initialValue: ((_item$data8 = item.data) === null || _item$data8 === void 0 ? void 0 : _item$data8.body) || ''
+  })( /*#__PURE__*/_react.default.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VisionEditor.default, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.body', code);
+    }
+  }, ((_item$data9 = item.data) === null || _item$data9 === void 0 ? void 0 : _item$data9.body) || '')))), /*#__PURE__*/_react.default.createElement(LabelLine, {
+    $flex: true
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".process"),
+    label: '数据处理'
+  }), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    overlay: menu,
+    trigger: ['click'],
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    type: "plus"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '0 12px'
+    }
+  }, renderProcess('willFetch'), renderProcess('didFetch'), renderProcess('onError')), /*#__PURE__*/_react.default.createElement(LabelLine, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".defaultValue"),
+    label: '默认数据'
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    wrapperCol: {
+      span: 24
+    }
+  }, form.getFieldDecorator('data.defaultValue', {
+    initialValue: (_item$data10 = item.data) === null || _item$data10 === void 0 ? void 0 : _item$data10.defaultValue
+  })( /*#__PURE__*/_react.default.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VisionEditor.default, {
+    options: _EDITOR_OPTIONS,
+    onChange: function onChange(code) {
+      return handleEditorValueChange('data.defaultValue', code);
+    }
+  }, ((_item$data11 = item.data) === null || _item$data11 === void 0 ? void 0 : _item$data11.defaultValue) || '')))));
+});
+var VarEditor = function VarEditor(_ref7) {
+  var item = _ref7.item,
+    dispatch = _ref7.dispatch;
+  return item.type === 'var' ? /*#__PURE__*/_react.default.createElement(VarForm, {
+    item: item,
+    dispatch: dispatch
+  }) : /*#__PURE__*/_react.default.createElement(ApiForm, {
+    item: item,
+    dispatch: dispatch
+  });
+};
+var _default = exports.default = VarEditor;

package/lib/lowcode/painter/components/code-editor/FullScreenEditor.js

@@ -84,8 +84,8 @@ var FullScreenEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       },
       overviewRulerLanes: 0,
       scrollbar: {
-        vertical: 'hidden',
-        horizontal: 'hidden',
+        vertical: 'auto',
+        horizontal: 'auto',
         handleMouseWheel: false
       }
     }

package/lib/lowcode/painter/components/code-editor/JSEditor.js

@@ -18,6 +18,7 @@ var monaco = _interopRequireWildcard3(require("monaco-editor"));
 var _lodash = require("lodash");
 var _standalone = _interopRequireDefault(require("prettier/standalone"));
 var _parserBabel = _interopRequireDefault(require("prettier/parser-babel"));
+var _useCombinedRefs = _interopRequireDefault(require("../../../engine/tools/useCombinedRefs"));
 var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
 var _excluded = ["children", "keywords"];
 function capitalizeFirstLetter(string) {
@@ -136,10 +137,11 @@ var prettierFormetter = function prettierFormetter(unformattedCode) {
  *
  * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
  */
-var JSEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+var JSEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, outRef) {
   var children = _ref2.children,
     keywords = _ref2.keywords,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var ref = (0, _useCombinedRefs.default)(outRef);
   (0, _react.useEffect)(function () {
     var originalGetValue = ref.current.editor.getValue.bind(ref.current.editor);
     ref.current.editor.getValue = function () {

package/lib/lowcode/painter/components/code-editor/VisionEditor.js

@@ -0,0 +1,88 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var monaco = _interopRequireWildcard(require("monaco-editor"));
+var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
+var _excluded = ["children"];
+// 定义一个简单的JavaScript语言
+monaco.languages.register({
+  id: 'vision'
+});
+
+// 定义语言的配置
+monaco.languages.setLanguageConfiguration('vision', {
+  brackets: [['{', '}'], ['[', ']'], ['(', ')']],
+  autoClosingPairs: [{
+    open: '{',
+    close: '}'
+  }, {
+    open: '[',
+    close: ']'
+  }, {
+    open: '(',
+    close: ')'
+  }, {
+    open: '"',
+    close: '"',
+    notIn: ['string']
+  }, {
+    open: "'",
+    close: "'",
+    notIn: ['string']
+  }]
+});
+
+// 定义语言的词法规则
+monaco.languages.setMonarchTokensProvider('vision', {
+  tokenizer: {
+    root: [[/\b(true|false|null)\b/, 'constant'], [/[{}()\[\]]/, '@brackets'], [/[0-9]+/, 'number'], [/["'](.*?)["']/, 'string'],
+    // 新增模板字符串的词法规则
+    [/\$\{/, 'delimiter.curly'],
+    // 添加对模板表达式起始的支持
+    [/\`/, {
+      token: 'string.quote',
+      bracket: '@open',
+      next: '@template_string'
+    }] // 处理模板字符串
+    ],
+    template_string: [[/\$\{/, {
+      token: 'delimiter.curly',
+      next: '@expression'
+    }],
+    // 模板表达式开始
+    [/\`/, {
+      token: 'string.quote',
+      bracket: '@close',
+      next: '@pop'
+    }],
+    // 模板字符串结束
+    [/./, 'string'] // 模板字符串内的内容
+    ],
+    expression: [[/\}/, {
+      token: 'delimiter.curly',
+      next: '@pop'
+    }],
+    // 模板表达式结束
+    [/[0-9]+/, 'number'],
+    // 在模板表达式内的数字
+    [/[a-zA-Z_]\w*/, 'identifier'] // 在模板表达式内的标识符
+    ]
+  }
+});
+var VisionEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_BaseEditor.default, (0, _extends2.default)({
+    ref: ref,
+    language: "vision"
+  }, rest), children);
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(VisionEditor);

package/lib/lowcode/painter/components/field-setting/SettingUI.js

@@ -21,6 +21,7 @@ var _Collapse = _interopRequireDefault(require("../../components/Collapse"));
 var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
 var _ListEditor = require("../../components/ListEditor");
 var _WidthHeight = _interopRequireDefault(require("../../panel-section/WidthHeight"));
+var _JSEditor = _interopRequireDefault(require("../../panel-section/JSEditor"));
 var _FieldAttrsModal = _interopRequireDefault(require("./FieldAttrsModal"));
 var _FieldRulesModal = _interopRequireDefault(require("./FieldRulesModal"));
 var _apiUrl = require("../../../constants/api-url");
@@ -65,6 +66,19 @@ var _PINNED_OPTIONS_ = [{
   }),
   value: 'right'
 }];
+var _FORM_MODE_OPTIONS_ = [{
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".formMode.single"),
+    label: '行修改'
+  }),
+  value: 'single'
+}, {
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".formMode.bulk"),
+    label: '批量修改'
+  }),
+  value: 'bulk'
+}];
 var _TRUE_FALSE_ = ['__TRUE__', '__FALSE__'];
 var CoderWrapper = _styledComponents.default.div.withConfig({
   displayName: "CoderWrapper",
@@ -78,6 +92,7 @@ var StyledRadio = (0, _styledComponents.default)(_antd.Radio.Group).withConfig({
   displayName: "StyledRadio",
   componentId: "luckda-6530__sc-1n41f3z-2"
 })(["span.ant-radio + *{padding-left:4px;padding-right:4px;}"]);
+var _DEFAULT_RENDER_CODE = "function render(value, data, rowIndex, params) { \n  return value;\n}";
 var SettingUI = function SettingUI(_ref) {
   var loading = _ref.loading,
     data = _ref.data,
@@ -323,7 +338,18 @@ var SettingUI = function SettingUI(_ref) {
     onChange: function onChange(val) {
       return run('tip', val);
     }
-  }))), component === 'form' && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+  }))), component === 'tableForm' && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".formMode"),
+      label: '表单模式'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox.Group, {
+    options: _FORM_MODE_OPTIONS_,
+    defaultValue: fieldData.formMode ? [fieldData.formMode] : ['single', 'bulk'],
+    onChange: function onChange(val) {
+      return run('formMode', val);
+    }
+  })), component === 'form' && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".fieldColumn"),
       label: '占列数'
@@ -357,7 +383,7 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".required"),
       label: '是否必填'
     })
-  }, renderCodeIcon(fieldRequired, _constants.FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+  }, renderCodeIcon(fieldRequired, _constants.FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes(component) && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".table.display"),
       label: '表格中显示'
@@ -377,7 +403,19 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".readonly"),
       label: '是否只读'
     })
-  }, renderCodeIcon(fieldReadonly, _constants.FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+  }, renderCodeIcon(fieldReadonly, _constants.FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['table', 'tableForm'].includes(component) ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".render"),
+      label: '内容定制渲染'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+    defaultValue: fieldData.render,
+    onChange: function onChange(val) {
+      return run('render', val);
+    },
+    mustConfirm: true,
+    defaultCode: _DEFAULT_RENDER_CODE
+  })) : null, /*#__PURE__*/_react.default.createElement(_Collapse.default, {
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".defaultValue"),
       label: '默认值'
@@ -392,7 +430,7 @@ var SettingUI = function SettingUI(_ref) {
   }), "\n              \u3010").concat(fieldDefaultValue.expression, "\u3011") : (0, _utils.formatMessage)({
     id: 'luckda.lowcode.painter.setting',
     label: '设置'
-  }))) : null, !isBatch ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_Collapse.default, {
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".rules.front"),
       label: '前端校验规则'