@luck-design-biz/luckda 1.0.0-5-alpha → 1.0.0-7-alpha

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

@@ -0,0 +1,456 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { useDebounceFn, useCreation, useSet, useMemoizedFn } from 'ahooks';
+import { Form, Input, Switch, Segmented, Dropdown, Menu } from 'luck-design/antd';
+import styled from 'styled-components';
+import { set, unset, get, intersection, keys } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import VisionEditor from "./code-editor/VisionEditor";
+import JSEditor from "./code-editor/JSEditor";
+import TipIcon from "./TipIcon";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.pageVars';
+var StyledForm = styled(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 = styled(Segmented).withConfig({
+  displayName: "StyledSegmented",
+  componentId: "luckda-6530__sc-iq6k7e-1"
+})(["width:100%;"]);
+var EditorWrapper = styled.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 = styled.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: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.serial"),
+    label: '串行'
+  }),
+  value: 'serial'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.parallel"),
+    label: '并行'
+  }),
+  value: 'parallel'
+}];
+var _METHOD_OPTIONS = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".method.jsonp"),
+    label: 'JSONP'
+  }),
+  value: 'jsonp'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".method.get"),
+    label: 'GET'
+  }),
+  value: 'get'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.post"),
+    label: 'POST'
+  }),
+  value: 'post'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.put"),
+    label: 'PUT'
+  }),
+  value: 'put'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".taskType.delete"),
+    label: 'DELETE'
+  }),
+  value: 'delete'
+}];
+var _DEFAULT_PROCESS_ = {
+  willFetch: {
+    code: 'function willFetch(vars, config){\n\t\n}',
+    title: 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: 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: 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".name"),
+      label: '名称'
+    })
+  }, form.getFieldDecorator('name', {
+    initialValue: item.name,
+    rules: [{
+      required: true,
+      message: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".messag.name"),
+        label: '请输入变量名'
+      })
+    }]
+  })( /*#__PURE__*/React.createElement(Input, {
+    size: "small"
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".desc"),
+      label: '描述'
+    })
+  }, form.getFieldDecorator('desc', {
+    initialValue: item.desc
+  })( /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".placeholder"),
+      label: '请输入'
+    })
+  }))));
+};
+var VarForm = 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 = useDebounceFn(function (code) {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: item.id,
+          data: {
+            data: code
+          }
+        }
+      });
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn.run;
+  return /*#__PURE__*/React.createElement(StyledForm, {
+    layout: "horizontal",
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 17
+    },
+    hideRequiredMark: true
+  }, getBasicFormItem(form, item), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".data"),
+    label: '数据'
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: 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.createElement("div", {
+    style: {
+      width: '100%',
+      height: 300
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    onChange: handleEditorValueChange
+  }, item.data)));
+});
+var ApiForm = Form.create({
+  name: 'api_form',
+  onValuesChange: function onValuesChange(_ref3, values, all) {
+    var dispatch = _ref3.dispatch,
+      item = _ref3.item;
+    var auto = get(values, 'data.auto');
+    if (auto) {
+      set(all, 'data.taskType', 'parallel');
+    } else if (auto === false) {
+      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 = useSet(intersection(['willFetch', 'didFetch', 'onError'], keys(item))),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    processSet = _useSet2[0],
+    _useSet2$ = _useSet2[1],
+    add = _useSet2$.add,
+    remove = _useSet2$.remove;
+  var _useDebounceFn2 = useDebounceFn(function (field, code) {
+      var obj = {};
+      set(obj, field, code);
+      form.setFieldsValue(obj);
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn2.run;
+  var handleAddProcessFun = useMemoizedFn(function (_ref5) {
+    var key = _ref5.key;
+    if (!processSet.has(key)) {
+      add(key);
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: item.id,
+          data: _defineProperty({}, key, _DEFAULT_PROCESS_[key].code)
+        }
+      });
+    }
+  });
+  var handleDelProcessFun = useMemoizedFn(function (_ref6) {
+    var key = _ref6.key;
+    remove(key);
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: _defineProperty({}, key, void 0)
+      }
+    });
+  });
+  var renderProcess = useMemoizedFn(function (processKey) {
+    return processSet.has(processKey) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelLine, {
+      $flex: true
+    }, _DEFAULT_PROCESS_[processKey].title, /*#__PURE__*/React.createElement(TipIcon, {
+      type: "delete",
+      onClick: function onClick() {
+        return handleDelProcessFun(processKey);
+      }
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      wrapperCol: {
+        span: 24
+      }
+    }, form.getFieldDecorator(processKey, {
+      initialValue: item[processKey] || _DEFAULT_PROCESS_[processKey].code
+    })( /*#__PURE__*/React.createElement(EditorWrapper, {
+      style: {
+        margin: '4px 18px',
+        width: 'calc(100% - 36px)'
+      }
+    }, /*#__PURE__*/React.createElement(JSEditor, {
+      options: _EDITOR_OPTIONS,
+      onChange: function onChange(code) {
+        return handleEditorValueChange(processKey, code);
+      }
+    }, item[processKey] || _DEFAULT_PROCESS_[processKey].code))))) : null;
+  });
+  var menu = useCreation(function () {
+    return /*#__PURE__*/React.createElement(Menu, {
+      onClick: handleAddProcessFun
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "willFetch"
+    }, _DEFAULT_PROCESS_.willFetch.title), /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "didFetch"
+    }, _DEFAULT_PROCESS_.didFetch.title), /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "onError"
+    }, _DEFAULT_PROCESS_.onError.title));
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledForm, {
+    layout: "horizontal",
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 17
+    },
+    hideRequiredMark: true
+  }, getBasicFormItem(form, item), /*#__PURE__*/React.createElement(Form.Item, {
+    label: 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.createElement(Switch, {
+    size: "small"
+  }))), form.getFieldValue('data.auto') ? /*#__PURE__*/React.createElement(Form.Item, {
+    label: 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.createElement(StyledSegmented, {
+    size: "small",
+    options: _TASK_TYPE_OPTIONS
+  }))) : null, /*#__PURE__*/React.createElement(Form.Item, {
+    label: 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.createElement(EditorWrapper, null, /*#__PURE__*/React.createElement(VisionEditor, {
+    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.createElement(Form.Item, {
+    label: 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.createElement(StyledSegmented, {
+    size: "small",
+    options: _METHOD_OPTIONS
+  }))), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".urlParams"),
+    label: '请求参数'
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".tip.urlParams"),
+      label: 'URL 请求参数，格式为 {key1:value1,key2:value2} ，等价于 ?key1=value1&key2=value2'
+    })
+  })), /*#__PURE__*/React.createElement(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.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    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.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".body"),
+    label: '请求体'
+  }), /*#__PURE__*/React.createElement(TipIcon, {
+    type: "question-circle",
+    style: {
+      marginLeft: 4
+    },
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".tip.body"),
+      label: '接口请求体(body)，格式为 {key1:value1,key2:value2}'
+    })
+  })), /*#__PURE__*/React.createElement(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.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    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.createElement(LabelLine, {
+    $flex: true
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".process"),
+    label: '数据处理'
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    trigger: ['click'],
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement(TipIcon, {
+    type: "plus"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0 12px'
+    }
+  }, renderProcess('willFetch'), renderProcess('didFetch'), renderProcess('onError')), /*#__PURE__*/React.createElement(LabelLine, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".defaultValue"),
+    label: '默认数据'
+  })), /*#__PURE__*/React.createElement(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.createElement(EditorWrapper, {
+    style: {
+      margin: '4px 18px',
+      width: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(VisionEditor, {
+    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.createElement(VarForm, {
+    item: item,
+    dispatch: dispatch
+  }) : /*#__PURE__*/React.createElement(ApiForm, {
+    item: item,
+    dispatch: dispatch
+  });
+};
+export default VarEditor;

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

@@ -10,6 +10,7 @@ import * as monaco from 'monaco-editor';
 import { isNil, uniqBy, compact } from 'lodash';
 import prettier from 'prettier/standalone';
 import parserBabel from 'prettier/parser-babel';
+import useCombinedRefs from "../../../engine/tools/useCombinedRefs";
 import BaseEditor from "./BaseEditor";
 function capitalizeFirstLetter(string) {
   if (isNil(string)) return null;
@@ -125,10 +126,11 @@ var prettierFormetter = function prettierFormetter(unformattedCode) {
  *
  * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
  */
-var JSEditor = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+var JSEditor = /*#__PURE__*/forwardRef(function (_ref2, outRef) {
   var children = _ref2.children,
     keywords = _ref2.keywords,
     rest = _objectWithoutProperties(_ref2, _excluded);
+  var ref = useCombinedRefs(outRef);
   useEffect(function () {
     var originalGetValue = ref.current.editor.getValue.bind(ref.current.editor);
     ref.current.editor.getValue = function () {

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from 'react';
+import * as monaco from 'monaco-editor';
+import BaseEditor from "./BaseEditor";
+
+// 定义一个简单的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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseEditor, _extends({
+    ref: ref,
+    language: "vision"
+  }, rest), children);
+});
+export default /*#__PURE__*/React.memo(VisionEditor);

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

@@ -13,6 +13,7 @@ import Collapse from "../../components/Collapse";
 import PanelItem from "../../components/PanelItem";
 import { ListEditor, ListEditorItem } from "../../components/ListEditor";
 import WidthHeight from "../../panel-section/WidthHeight";
+import JSEditor from "../../panel-section/JSEditor";
 import FieldAttrsModal from "./FieldAttrsModal";
 import FieldRulesModal from "./FieldRulesModal";
 import { fetchFieldCondition, fetchAttrs } from "../../../constants/api-url";
@@ -70,6 +71,7 @@ var StyledRadio = styled(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,
@@ -349,7 +351,7 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".required"),
       label: '是否必填'
     })
-  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes && /*#__PURE__*/React.createElement(PanelItem, {
+  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes(component) && /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".table.display"),
       label: '表格中显示'
@@ -369,7 +371,19 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".readonly"),
       label: '是否只读'
     })
-  }, renderCodeIcon(fieldReadonly, FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/React.createElement(Collapse, {
+  }, renderCodeIcon(fieldReadonly, FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/React.createElement(React.Fragment, null, ['table', 'tableForm'].includes(component) ? /*#__PURE__*/React.createElement(Collapse, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".render"),
+      label: '内容定制渲染'
+    })
+  }, /*#__PURE__*/React.createElement(JSEditor, {
+    defaultValue: fieldData.render,
+    onChange: function onChange(val) {
+      return run('render', val);
+    },
+    mustConfirm: true,
+    defaultCode: _DEFAULT_RENDER_CODE
+  })) : null, /*#__PURE__*/React.createElement(Collapse, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".defaultValue"),
       label: '默认值'
@@ -384,7 +398,7 @@ var SettingUI = function SettingUI(_ref) {
   }), "\n              \u3010").concat(fieldDefaultValue.expression, "\u3011") : formatMessage({
     id: 'luckda.lowcode.painter.setting',
     label: '设置'
-  }))) : null, !isBatch ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Collapse, {
+  }))), /*#__PURE__*/React.createElement(Collapse, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".rules.front"),
       label: '前端校验规则'

package/es/lowcode/painter/components/field-setting/index.js

@@ -227,7 +227,7 @@ var FieldSetting = function FieldSetting(_ref) {
             _context.next = 34;
             break;
           case 5:
-            if (!(key === 'align' || key === 'headerAlign' || key === 'pinned' || key === 'tip')) {
+            if (!(key === 'align' || key === 'headerAlign' || key === 'pinned' || key === 'tip' || key === 'render')) {
               _context.next = 9;
               break;
             }

package/es/lowcode/painter/index.js

@@ -13,6 +13,7 @@ var Painter = function Painter(_ref) {
   var className = _ref.className,
     code = _ref.code;
   return /*#__PURE__*/React.createElement(EventBusProvider, {
+    key: code,
     runtime: RUNTIME.DESIGN
   }, /*#__PURE__*/React.createElement(ContextProvider, {
     code: code