@luck-design-biz/luckda 0.0.25-2 → 0.0.25-21

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

@@ -11,44 +11,45 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var monaco = _interopRequireWildcard(require("monaco-editor"));
-var _excluded = ["onChange", "isFullscreen"],
+var _excluded = ["onChange", "isFullscreen", "style"],
   _excluded2 = ["children", "language", "options"];
-/**
- * BaseEditor 组件是一个封装了 monaco 编辑器的 React 组件，支持前向 ref 引用。
- * 该组件允许用户编辑代码，并在代码发生变更时触发回调函数。
- * 它还支持通过 props 控制编辑器的语言、选项以及是否全屏显示。
- *
- * @component
- * @example
- * const handleEditorChange = (newValue, event) => {
- *   console.log('Editor content changed: ', newValue);
- * };
- * <BaseEditor
- *   language="javascript"
- *   onChange={handleEditorChange}
- *   isFullscreen={false}
- *   width="600px"
- *   height="400px"
- * >
- *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
- * </BaseEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {Function} props.onChange - 当编辑器内容变更时调用的函数。接收最新的编辑器内容和事件对象作为参数。
- * @param {boolean} props.isFullscreen - 控制编辑器是否全屏显示。
- * @param {string} [props.language='javascript'] - 设置编辑器的编程语言，默认为 'javascript'。
- * @param {Object} [props.options={}] - 用于自定义编辑器的选项。
- * @param {React.ReactNode} children - 子组件，通常是编辑器的初始代码。
- * @param {string} [props.width] - 编辑器的宽度，默认为 '100%'。
- * @param {string} [props.height] - 编辑器的高度，默认为 '100%'。
- * @param {Object} rest - 传递给 div 容器的其它属性。
- * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，其中包含了一个配置好的 monaco 编辑器实例。
+/**
+ * BaseEditor 组件是一个封装了 monaco 编辑器的 React 组件，支持前向 ref 引用。
+ * 该组件允许用户编辑代码，并在代码发生变更时触发回调函数。
+ * 它还支持通过 props 控制编辑器的语言、选项以及是否全屏显示。
+ *
+ * @component
+ * @example
+ * const handleEditorChange = (newValue, event) => {
+ *   console.log('Editor content changed: ', newValue);
+ * };
+ * <BaseEditor
+ *   language="javascript"
+ *   onChange={handleEditorChange}
+ *   isFullscreen={false}
+ *   width="600px"
+ *   height="400px"
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </BaseEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {Function} props.onChange - 当编辑器内容变更时调用的函数。接收最新的编辑器内容和事件对象作为参数。
+ * @param {boolean} props.isFullscreen - 控制编辑器是否全屏显示。
+ * @param {string} [props.language='javascript'] - 设置编辑器的编程语言，默认为 'javascript'。
+ * @param {Object} [props.options={}] - 用于自定义编辑器的选项。
+ * @param {React.ReactNode} children - 子组件，通常是编辑器的初始代码。
+ * @param {string} [props.width] - 编辑器的宽度，默认为 '100%'。
+ * @param {string} [props.height] - 编辑器的高度，默认为 '100%'。
+ * @param {Object} rest - 传递给 div 容器的其它属性。
+ * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个配置好的 monaco 编辑器实例。
  */
 var BaseEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var onChange = _ref.onChange,
     isFullscreen = _ref.isFullscreen,
+    style = _ref.style,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var children = props.children,
     _props$language = props.language,
@@ -109,7 +110,7 @@ var BaseEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: editorRef,
-    style: editorStyle
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, editorStyle), style)
   }, rest));
 });
 var _default = exports.default = /*#__PURE__*/_react.default.memo(BaseEditor);

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

@@ -11,31 +11,31 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
 var _excluded = ["children"];
-/**
- * CssEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
- * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
- * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
- *
- * @component
- * @example
- * const handleCssChange = (newCss, event) => {
- *   console.log('CSS changed: ', newCss);
- * };
- * <CssEditor
- *   onChange={handleCssChange}
- *   isFullscreen={false}
- *   width="600px"
- *   height="400px"
- * >
- *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
- * </CssEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
- * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
+/**
+ * CssEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
+ * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
+ * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
+ *
+ * @component
+ * @example
+ * const handleCssChange = (newCss, event) => {
+ *   console.log('CSS changed: ', newCss);
+ * };
+ * <CssEditor
+ *   onChange={handleCssChange}
+ *   isFullscreen={false}
+ *   width="600px"
+ *   height="400px"
+ * >
+ *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
+ * </CssEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
  */
 var CssEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,

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

@@ -15,29 +15,29 @@ var _utils = require("@luck-design-biz/base/utils");
 var _fullscreenEditor = _interopRequireDefault(require("../../style/fullscreen-editor.less"));
 var _ahooks = require("ahooks");
 var _excluded = ["EditorComponent", "onLoad", "children"];
-/**
- * FullScreenEditor 组件是一个支持全屏编辑模式的 React 组件，它利用提供的 EditorComponent 来实现代码编辑功能。
- * 该组件使用 ahooks 的 useFullscreen 钩子来实现全屏切换，并在全屏模式下调整编辑器布局。
- * 全屏/非全屏模式下编辑器的某些选项可能会有所不同，以适应不同的布局需求。
- *
- * @component
- * @example
- * const MyEditor = React.forwardRef((props, ref) => <BaseEditor {...props} ref={ref} />);
- * <FullScreenEditor
- *   EditorComponent={MyEditor}
- *   onLoad={() => console.log('Editor loaded')}
- * >
- *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
- * </FullScreenEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {Function} props.EditorComponent - 用于编辑的组件，该组件需要支持 ref 引用以调用编辑器的方法。
- * @param {Function} [props.onLoad] - 编辑器加载完成时的回调函数。
- * @param {React.ReactNode} children - 传递给 EditorComponent 的 children，通常是初始代码或内容。
- * @param {Object} rest - 传递给 EditorComponent 的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 EditorComponent 实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有全屏切换功能的编辑器界面。
+/**
+ * FullScreenEditor 组件是一个支持全屏编辑模式的 React 组件，它利用提供的 EditorComponent 来实现代码编辑功能。
+ * 该组件使用 ahooks 的 useFullscreen 钩子来实现全屏切换，并在全屏模式下调整编辑器布局。
+ * 全屏/非全屏模式下编辑器的某些选项可能会有所不同，以适应不同的布局需求。
+ *
+ * @component
+ * @example
+ * const MyEditor = React.forwardRef((props, ref) => <BaseEditor {...props} ref={ref} />);
+ * <FullScreenEditor
+ *   EditorComponent={MyEditor}
+ *   onLoad={() => console.log('Editor loaded')}
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </FullScreenEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {Function} props.EditorComponent - 用于编辑的组件，该组件需要支持 ref 引用以调用编辑器的方法。
+ * @param {Function} [props.onLoad] - 编辑器加载完成时的回调函数。
+ * @param {React.ReactNode} children - 传递给 EditorComponent 的 children，通常是初始代码或内容。
+ * @param {Object} rest - 传递给 EditorComponent 的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 EditorComponent 实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有全屏切换功能的编辑器界面。
  */
 var FullScreenEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var EditorComponent = _ref.EditorComponent,

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

@@ -9,15 +9,15 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard3(require("react"));
-var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
 var monaco = _interopRequireWildcard3(require("monaco-editor"));
 var _lodash = require("lodash");
-var _excluded = ["children"];
+var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
+var _excluded = ["children", "keywords"];
 function capitalizeFirstLetter(string) {
   if ((0, _lodash.isNil)(string)) return null;
   if (string.length === 0) {
@@ -25,19 +25,24 @@ function capitalizeFirstLetter(string) {
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-var _provideCompletionItems = function provideCompletionItems(monaco, model, position, module) {
+var _provideCompletionItems = function provideCompletionItems(monaco, model, position, module, ctx) {
   var textUntilPosition = model.getValueInRange({
     startLineNumber: 1,
     startColumn: 1,
     endLineNumber: position.lineNumber,
     endColumn: position.column
   });
-
-  // 正则表达式匹配以 triggerWord 开头的任何单词
-  var pattern = new RegExp('\\b' + module.triggerWord + '[\\w.]*', 'i');
-  var match = textUntilPosition.match(pattern);
-  // console.log('match',match)
+  var match;
+  if (module.triggerWord) {
+    // 正则表达式匹配以 triggerWord 开头的任何单词
+    var pattern = new RegExp('\\b' + module.triggerWord + '[\\w.]*', 'i');
+    match = textUntilPosition.match(pattern);
+  } else {
+    var _pattern = new RegExp('\\b[a-zA-Z][\\w.]*', 'i');
+    match = ["'", '"'].includes(ctx.triggerCharacter) && textUntilPosition.match(_pattern);
+  }
   if (match) {
+    var _module$completions;
     var word = model.getWordUntilPosition(position);
     var range = {
       startLineNumber: position.lineNumber,
@@ -45,7 +50,7 @@ var _provideCompletionItems = function provideCompletionItems(monaco, model, pos
       startColumn: word.startColumn,
       endColumn: word.endColumn
     };
-    return module.completions.map(function (completion) {
+    return (_module$completions = module.completions) === null || _module$completions === void 0 ? void 0 : _module$completions.map(function (completion) {
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, completion), {}, {
         range: range,
         kind: monaco.languages.CompletionItemKind[capitalizeFirstLetter(completion.kind)]
@@ -55,7 +60,7 @@ var _provideCompletionItems = function provideCompletionItems(monaco, model, pos
   return [];
 };
 var setupAutocomplete = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(monaco) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(monaco, keywords) {
     var autoCompleteModules;
     return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -66,60 +71,61 @@ var setupAutocomplete = /*#__PURE__*/function () {
           });
         case 2:
           autoCompleteModules = _context.sent;
-          // console.log('autoCompleteModules', autoCompleteModules);
-
-          monaco.languages.registerCompletionItemProvider('javascript', (0, _defineProperty2.default)({
-            triggerCharacters: ['.'],
-            provideCompletionItems: function provideCompletionItems(model, position) {
+          monaco.languages.registerCompletionItemProvider('javascript', {
+            provideCompletionItems: function provideCompletionItems(model, position, ctx) {
               var allCompletionItems = [];
 
               // 从所有模块收集补全项
-              autoCompleteModules.default.forEach(function (module) {
-                var items = _provideCompletionItems(monaco, model, position, module);
+              [{
+                completions: keywords
+              }].concat((0, _toConsumableArray2.default)(autoCompleteModules.default)).forEach(function (module) {
+                var items = _provideCompletionItems(monaco, model, position, module, ctx);
                 allCompletionItems = allCompletionItems.concat(items);
               });
               return {
                 suggestions: allCompletionItems
               };
-            }
-          }, "triggerCharacters", ['.']));
+            },
+            triggerCharacters: ['.', "'", '"'] // 当用户输入点号时触发补全
+          });
         case 4:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
-  return function setupAutocomplete(_x) {
+  return function setupAutocomplete(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();
 
-/**
- * JSEditor 组件是一个专为 JavaScript 编辑设计的 React 组件，它基于 BaseEditor 组件构建，并集成了自动完成功能。
- * 该组件利用 monaco-editor 提供的 API，通过 setupAutocomplete 函数设置自动完成项，从而增强代码编辑体验。
- * 自动完成逻辑包括从预定义的自动完成模块中加载补全项，以及在编辑器中键入特定字符（如"."）时触发补全建议。
- *
- * @component
- * @example
- * <JSEditor
- *   language="javascript"
- *   options={{ fontSize: 14 }}
- * >
- *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
- * </JSEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 传递给 BaseEditor 的 children，通常是初始代码或内容。
- * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 BaseEditor 实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
+/**
+ * JSEditor 组件是一个专为 JavaScript 编辑设计的 React 组件，它基于 BaseEditor 组件构建，并集成了自动完成功能。
+ * 该组件利用 monaco-editor 提供的 API，通过 setupAutocomplete 函数设置自动完成项，从而增强代码编辑体验。
+ * 自动完成逻辑包括从预定义的自动完成模块中加载补全项，以及在编辑器中键入特定字符（如"."）时触发补全建议。
+ *
+ * @component
+ * @example
+ * <JSEditor
+ *   language="javascript"
+ *   options={{ fontSize: 14 }}
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </JSEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 传递给 BaseEditor 的 children，通常是初始代码或内容。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 BaseEditor 实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
  */
 var JSEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
+    keywords = _ref2.keywords,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   (0, _react.useEffect)(function () {
-    setupAutocomplete(monaco);
+    setupAutocomplete(monaco, keywords);
   }, []);
   return /*#__PURE__*/_react.default.createElement(_BaseEditor.default, (0, _extends2.default)({
     ref: ref

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

@@ -11,31 +11,31 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
 var _excluded = ["children"];
-/**
- * JsonEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
- * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
- * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
- *
- * @component
- * @example
- * const handleCssChange = (newCss, event) => {
- *   console.log('CSS changed: ', newCss);
- * };
- * <JsonEditor
- *   onChange={handleCssChange}
- *   isFullscreen={false}
- *   width="600px"
- *   height="400px"
- * >
- *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
- * </JsonEditor>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
- * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
- * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
- *
- * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
+/**
+ * JsonEditor 组件是一个专门用于编辑 CSS 代码的 React 组件，它基于 BaseEditor 组件构建。
+ * 该组件通过将 language 属性固定设置为 "css"，确保编辑器环境专门用于 CSS 代码编辑。
+ * 用户可以传入 CSS 代码作为 children，并通过其他 props 控制 BaseEditor 提供的额外功能。
+ *
+ * @component
+ * @example
+ * const handleCssChange = (newCss, event) => {
+ *   console.log('CSS changed: ', newCss);
+ * };
+ * <JsonEditor
+ *   onChange={handleCssChange}
+ *   isFullscreen={false}
+ *   width="600px"
+ *   height="400px"
+ * >
+ *   {`body { margin: 0; font-family: Arial, sans-serif; }`}
+ * </JsonEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 子组件，通常是编辑器的初始 CSS 代码。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于外部组件调用编辑器实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，该元素内部是一个专门用于 CSS 编辑的 BaseEditor 组件实例。
  */
 var JsonEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,

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

@@ -0,0 +1,116 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _antd = require("luck-design/antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("@luck-design-biz/base/utils");
+var _codeEditor = require("../code-editor");
+var _frontRules = require("./meta/frontRules");
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting.checkRules';
+var FormItem = (0, _styledComponents.default)(_antd.Form.Item).withConfig({
+  displayName: "FormItem",
+  componentId: "luckda-6530__sc-d9mrmm-0"
+})(["margin-bottom:0;"]);
+var CheckRules = function CheckRules(_ref) {
+  var form = _ref.form,
+    fields = _ref.fields,
+    rule = _ref.rule,
+    fieldData = _ref.fieldData,
+    ruleRef = _ref.ruleRef;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    verifyType = _useState2[0],
+    setVerifyType = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    expression = _useState4[0],
+    setExpression = _useState4[1];
+  var jsRef = (0, _react.useRef)();
+  (0, _react.useImperativeHandle)(ruleRef, function () {
+    return jsRef.current;
+  });
+  (0, _ahooks.useMount)(function () {
+    if (rule.uid) {
+      form.setFieldsValue({
+        verifyType: rule.verifyType
+      });
+      setExpression(rule.expression);
+    } else {
+      var defaultType = (0, _frontRules.getFrontRules)(fieldData.property)[0].key;
+      form.setFieldsValue({
+        verifyType: defaultType
+      });
+      setVerifyType(defaultType);
+    }
+  });
+  var frontRulesObj = (0, _ahooks.useCreation)(function () {
+    return (0, _lodash.keyBy)((0, _frontRules.getFrontRules)(fieldData.property), 'key');
+  }, []);
+  var frontRule = (0, _ahooks.useCreation)(function () {
+    var _frontRulesObj$verify;
+    setExpression(((_frontRulesObj$verify = frontRulesObj[verifyType]) === null || _frontRulesObj$verify === void 0 ? void 0 : _frontRulesObj$verify.defaultCode) || '');
+    if (verifyType) return frontRulesObj[verifyType];
+    return {
+      noCode: false
+    };
+  }, [verifyType]);
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    layout: "vertical"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Row, {
+    gutter: 8
+  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 24
+  }, /*#__PURE__*/_react.default.createElement(FormItem, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".verifyType"),
+      label: '校验规则'
+    })
+  }, form.getFieldDecorator('verifyType', {
+    rules: [{
+      required: true,
+      message: (0, _utils.formatMessage)({
+        id: "".concat(_I18N_PREFIX_, ".message.verifyType"),
+        label: '请选择校验规则'
+      })
+    }]
+  })( /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    onChange: function onChange(val) {
+      console.log('setVerifyType');
+      setVerifyType(val);
+    }
+  }, (0, _frontRules.getFrontRules)(fieldData.property).map(function (rule) {
+    return /*#__PURE__*/_react.default.createElement(Option, {
+      key: rule.key,
+      value: rule.key
+    }, rule.label);
+  }))))), !frontRule.noCode && /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 24
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: '14px',
+      marginBottom: '16px',
+      color: 'rgba(0, 0, 0, 0.85)'
+    }
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".logic"),
+    label: '校验逻辑'
+  })), /*#__PURE__*/_react.default.createElement(_codeEditor.JSEditor, {
+    style: {
+      height: '300px',
+      border: '1px solid rgb(217, 217, 217)',
+      borderRadius: '4px',
+      padding: '12px'
+    },
+    ref: jsRef
+  }, expression))));
+};
+var _default = exports.default = CheckRules;

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

@@ -36,7 +36,7 @@ var CheckRules = function CheckRules(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Row, {
     gutter: 8
   }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
-    span: 12
+    span: 24
   }, /*#__PURE__*/_react.default.createElement(FormItem, {
     label: (0, _utils.formatMessage)({
       id: "".concat(_I18N_PREFIX_, ".verifyType"),
@@ -57,31 +57,6 @@ var CheckRules = function CheckRules(_ref) {
     }, val));
     return types;
   }, []))))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
-    span: 12
-  }, /*#__PURE__*/_react.default.createElement(FormItem, {
-    label: (0, _utils.formatMessage)({
-      id: "".concat(_I18N_PREFIX_, ".verifyScope"),
-      label: '校验类型'
-    })
-  }, form.getFieldDecorator('verifyScope', {
-    rules: [{
-      required: true,
-      message: (0, _utils.formatMessage)({
-        id: "".concat(_I18N_PREFIX_, ".message.verifyScope"),
-        label: '请选择校验类型'
-      })
-    }]
-  })( /*#__PURE__*/_react.default.createElement(_antd.Select, null, /*#__PURE__*/_react.default.createElement(Option, {
-    value: 0
-  }, (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".frontend"),
-    label: '前端'
-  })), /*#__PURE__*/_react.default.createElement(Option, {
-    value: 1
-  }, (0, _utils.formatMessage)({
-    id: "".concat(_I18N_PREFIX_, ".backend"),
-    label: '后端'
-  })))))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
     span: 24
   }, /*#__PURE__*/_react.default.createElement(FormItem, {
     label: (0, _utils.formatMessage)({