1. Form 组件优化；

2. IconSetter 优化；

packages/demo/public/assets.json

@@ -4509,7 +4509,13 @@
         },
         {
           "name": "visible",
-          "propType": "JSExpression",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "JSExpression",
+              "bool"
+            ]
+          },
           "description": "是否显示",
           "defaultValue": false
         },
@@ -4979,12 +4985,6 @@
         "subName": ""
       },
       "props": [
-        {
-          "name": "prefix",
-          "propType": "string",
-          "description": "样式前缀",
-          "defaultValue": "next-"
-        },
         {
           "name": "inline",
           "propType": "bool",
@@ -4992,6 +4992,10 @@
         },
         {
           "name": "size",
+          "title": {
+            "label": "Size",
+            "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5010,6 +5014,10 @@
         },
         {
           "name": "labelAlign",
+          "title": {
+            "label": "标签的位置",
+            "tip": "上, 左, 内"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5032,74 +5040,11 @@
           },
           "description": "标签的左右对齐方式\n@enumdesc 左, 右"
         },
-        {
-          "name": "field",
-          "propType": "any",
-          "description": "field 实例, 传 false 会禁用 field"
-        },
-        {
-          "name": "saveField",
-          "propType": "func",
-          "description": "保存 Form 自动生成的 field 对象"
-        },
-        {
-          "name": "labelCol",
-          "propType": {
-            "type": "shape",
-            "value": [{
-              "name": "span",
-              "description": "fixedSpan",
-              "propType": "number"
-            },{
-              "name": "fixedSpan",
-              "description": "fixedSpan",
-              "propType": "number"
-            },{
-              "name": "offset",
-              "description": "offset",
-              "propType": "number"
-            },{
-              "name": "fixedOffset",
-              "description": "fixedOffset",
-              "propType": "number"
-            }]
-          },
-          "description": "控制第一级 Item 的 labelCol"
-        },
-        {
-          "name": "wrapperCol",
-          "propType": {
-            "type": "shape",
-            "value": [{
-              "name": "span",
-              "description": "fixedSpan",
-              "propType": "number"
-            },{
-              "name": "fixedSpan",
-              "description": "fixedSpan",
-              "propType": "number"
-            },{
-              "name": "offset",
-              "description": "offset",
-              "propType": "number"
-            },{
-              "name": "fixedOffset",
-              "description": "fixedOffset",
-              "propType": "number"
-            }]
-          },
-          "description": "控制第一级 Item 的 wrapperCol"
-        },
         {
           "name": "onSubmit",
           "propType": "func",
           "description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发"
         },
-        {
-          "name": "children",
-          "propType": "any",
-          "description": "子元素"
-        },
         {
           "name": "className",
           "propType": "string",
@@ -5112,7 +5057,13 @@
         },
         {
           "name": "value",
-          "propType": "object",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "Json",
+              "JSExpression"
+            ]
+          },
           "description": "表单数值"
         },
         {
@@ -5120,22 +5071,6 @@
           "propType": "func",
           "description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例"
         },
-        {
-          "name": "component",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              "func"
-            ]
-          },
-          "description": "设置标签类型",
-          "defaultValue": "form"
-        },
-        {
-          "name": "fieldOptions",
-          "propType": "object"
-        },
         {
           "name": "rtl",
           "propType": "bool"
@@ -5163,11 +5098,16 @@
           "propType": "bool",
           "description": "是否开启预览态"
         }
-      ]
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
     },
     {
-      "componentName": "Form.Item",
+      "componentName": "FormItem",
-      "title": "Form.Item",
+      "title": "FormItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5180,10 +5120,8 @@
       },
       "props": [
         {
-          "name": "prefix",
+          "name": "id",
-          "propType": "string",
+          "propType": "string"
-          "description": "样式前缀",
-          "defaultValue": "next-"
         },
         {
           "name": "rtl",
@@ -5196,32 +5134,60 @@
         },
         {
           "name": "labelCol",
-          "propType": "object",
+          "propType": {
+            "type": "shape",
+            "value": [{
+              "name": "span",
+              "description": "span",
+              "propType": "number"
+            },{
+              "name": "offset",
+              "description": "offset",
+              "propType": "number"
+            }]
+          },
           "description": "label 标签布局，通 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效"
         },
         {
           "name": "wrapperCol",
-          "propType": "object",
+          "propType": {
+            "type": "shape",
+            "value": [{
+              "name": "span",
+              "description": "span",
+              "propType": "number"
+            },{
+              "name": "offset",
+              "description": "offset",
+              "propType": "number"
+            }]
+          },
           "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol"
         },
         {
           "name": "help",
-          "propType": {
+          "title": {
-            "type": "instanceOf",
+            "label": "自定义提示信息",
-            "value": "node"
+            "tip": "如不设置，则会根据校验规则自动生成."
           },
+          "propType": "string",
           "description": "自定义提示信息，如不设置，则会根据校验规则自动生成."
         },
         {
           "name": "extra",
-          "propType": {
+          "title": {
-            "type": "instanceOf",
+            "label": "额外的提示信息",
-            "value": "node"
+            "tip": "和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面"
           },
+          "propType": "string",
           "description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面"
         },
         {
           "name": "validateState",
+          "title": {
+            "label": "校验状态",
+            "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5233,37 +5199,17 @@
           },
           "description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告"
         },
-        {
-          "name": "hasFeedback",
-          "propType": "bool",
-          "description": "配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持",
-          "defaultValue": false
-        },
         {
           "name": "style",
           "propType": "object",
           "description": "自定义内联样式"
         },
-        {
-          "name": "id",
-          "propType": "string"
-        },
-        {
-          "name": "children",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              {
-                "type": "instanceOf",
-                "value": "node"
-              },
-              "func"
-            ]
-          },
-          "description": "node 或者 function(values)"
-        },
         {
           "name": "size",
+          "title": {
+            "label": "Size",
+            "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5276,11 +5222,19 @@
         },
         {
           "name": "fullWidth",
+          "title": {
+            "label": "fullWidth",
+            "tip": "单个 Item 中表单类组件宽度是否是100%"
+          },
           "propType": "bool",
           "description": "单个 Item 中表单类组件宽度是否是100%"
         },
         {
           "name": "labelAlign",
+          "title": {
+            "label": "标签的位置",
+            "tip": "上, 左, 内"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5293,6 +5247,10 @@
         },
         {
           "name": "labelTextAlign",
+          "title": {
+            "label": "标签的左右对齐方式",
+            "tip": "左, 右"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5309,141 +5267,118 @@
         },
         {
           "name": "required",
+          "title": {
+            "label": "不能为空",
+            "tip": "[表单校验] 不能为空"
+          },
           "propType": "bool",
           "description": "[表单校验] 不能为空"
         },
-        {
-          "name": "asterisk",
-          "propType": "bool",
-          "description": "required 的星号是否显示"
-        },
         {
           "name": "requiredMessage",
+          "title": {
+            "label": "自定义错误信息",
+            "tip": "[表单校验]为空时自定义错误信息"
+          },
           "propType": "string",
           "description": "required 自定义错误信息"
         },
-        {
-          "name": "requiredTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "required 自定义触发方式"
-        },
         {
           "name": "min",
+          "title": {
+            "label": "最小值",
+            "tip": "[表单校验] 最小值"
+          },
           "propType": "number",
           "description": "[表单校验] 最小值"
         },
         {
           "name": "max",
+          "title": {
+            "label": "最大值",
+            "tip": "[表单校验] 最大值"
+          },
           "propType": "number",
           "description": "[表单校验] 最大值"
         },
         {
           "name": "minmaxMessage",
+          "title": {
+            "label": "min/max message",
+            "tip": "[表单校验] min/max 自定义错误信息"
+          },
           "propType": "string",
           "description": "min/max 自定义错误信息"
         },
-        {
-          "name": "minmaxTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "min/max 自定义触发方式"
-        },
         {
           "name": "minLength",
+          "title": {
+            "label": "最小长度",
+            "tip": "[表单校验] 字符串最小长度 / 数组最小个数"
+          },
           "propType": "number",
           "description": "[表单校验] 字符串最小长度 / 数组最小个数"
         },
         {
           "name": "maxLength",
+          "title": {
+            "label": "最大长度",
+            "tip": "[表单校验] 字符串最大长度 / 数组最大个数"
+          },
           "propType": "number",
           "description": "[表单校验] 字符串最大长度 / 数组最大个数"
         },
         {
           "name": "minmaxLengthMessage",
+          "title": {
+            "label": "max|min length error message",
+            "tip": "[表单校验] minLength/maxLength 自定义错误信息"
+          },
           "propType": "string",
           "description": "minLength/maxLength 自定义错误信息"
         },
-        {
-          "name": "minmaxLengthTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "minLength/maxLength 自定义触发方式"
-        },
         {
           "name": "length",
+          "title": {
+            "label": "长度",
+            "tip": "[表单校验] 字符串精确长度 / 数组精确个数"
+          },
           "propType": "number",
           "description": "[表单校验] 字符串精确长度 / 数组精确个数"
         },
         {
           "name": "lengthMessage",
+          "title": {
+            "label": "length error message",
+            "tip": "[表单校验] minLength/maxLength 自定义错误信息"
+          },
           "propType": "string",
           "description": "length 自定义错误信息"
         },
-        {
-          "name": "lengthTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "length 自定义触发方式"
-        },
         {
           "name": "pattern",
-          "propType": "any",
+          "title": {
+            "label": "正则",
+            "tip": "[表单校验] 正则校验"
+          },
+          "propType": "string",
           "description": "正则校验"
         },
         {
           "name": "patternMessage",
+          "title": {
+            "label": "pattern error message",
+            "tip": "[表单校验] pattern 自定义错误信息"
+          },
           "propType": "string",
           "description": "pattern 自定义错误信息"
         },
-        {
-          "name": "patternTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "pattern 自定义触发方式"
-        },
         {
           "name": "format",
+          "title": {
+            "label": "format",
+            "tip": "[表单校验] 四种常用的 pattern"
+          },
           "propType": {
             "type": "oneOf",
             "value": [
@@ -5457,42 +5392,18 @@
         },
         {
           "name": "formatMessage",
+          "title": {
+            "label": "format error message",
+            "tip": "[表单校验] format 自定义错误信息"
+          },
           "propType": "string",
           "description": "format 自定义错误信息"
         },
-        {
-          "name": "formatTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "format 自定义触发方式"
-        },
         {
           "name": "validator",
           "propType": "func",
           "description": "[表单校验] 自定义校验函数"
         },
-        {
-          "name": "validatorTrigger",
-          "propType": {
-            "type": "oneOfType",
-            "value": [
-              "string",
-              {
-                "type": "instanceOf",
-                "value": "array"
-              }
-            ]
-          },
-          "description": "validator 自定义触发方式"
-        },
         {
           "name": "autoValidate",
           "propType": "bool",
@@ -5535,11 +5446,6 @@
           "name": "isPreview",
           "propType": "bool",
           "description": "是否开启预览态"
-        },
-        {
-          "name": "renderPreview",
-          "propType": "func",
-          "description": "预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定"
         }
       ],
       "configure": {
@@ -5801,6 +5707,10 @@
           "title":"标签文案",
           "description": "label"
         },
+        {
+          "name": "name",
+          "propType": "string"
+        },
         {
           "name": "hasClear",
           "propType": "bool",
@@ -12528,6 +12438,26 @@
         }
       ]
     },
+    {
+      "componentName": "Field",
+      "title": "Field",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "@alifd/next",
+        "version": "1.19.18",
+        "exportName": "Field",
+        "main": "src/index.js",
+        "destructuring": true,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "this",
+          "propType": "any"
+        }
+      ]
+    },
     {
       "componentName": "Avatar",
       "title": "Avatar",
@@ -14181,18 +14111,24 @@
               "schema": {
                 "componentName": "Form",
                 "props": {
-                  "labelCol": 4
+                  "labelCol": {
+                    "span": 2,
+                    "labelAlign": "left"
+                  },
+                  "role": "grid"
                 },
                 "children": [
                   {
-                    "componentName": "Form.Item",
+                    "componentName": "FormItem",
                     "props": {
-                      "name": "email"
+                      "label": "Email: ",
+                      "required": true
                     },
                     "children": [
                       {
                         "componentName": "Input",
                         "props": {
+                          "name": "email",
                           "size": "medium",
                           "placeholder": "用户名"
                         }
@@ -14200,80 +14136,48 @@
                     ]
                   },
                   {
-                    "componentName": "Form.Item",
+                    "componentName": "FormItem",
                     "props": {
-                      "name": "pwd2"
+                      "label": "Password: ",
+                      "required": true
                     },
                     "children": [
                       {
                         "componentName": "Input.Password",
                         "props": {
-                          "placeholder": "密码",
+                          "name": "password",
-                          "size": "medium",
+                          "placeholder": "请输入密码",
-                          "innerAfter": {
+                          "size": "medium"
-                            "componentName": "Icon",
-                            "props": {
-                              "size": "large",
-                              "style": {
-                                "marginRight": 10,
-                                "color": "#9b9b9b"
-                              },
-                              "type": "help"
-                            }
-                          }
                         }
                       }
                     ]
                   },
                   {
-                    "componentName": "Box",
+                    "componentName": "FormItem",
                     "props": {
-                      "direction": "column",
+                      "wrapperCol": {
-                      "wrap": true,
+                        "offset": 7
-                      "style": {
-                        "margin": "5px 0 5px 0"
                       }
                     },
                     "children": [
                       {
-                        "componentName": "Radio.Group",
+                        "componentName": "Form.Submit",
                         "props": {
-                          "dataSource": [
+                          "type": "primary",
-                            {
+                          "validate": true,
-                              "label": "自动登录",
+                          "onClick": {
-                              "value": "auto"
+                            "type": "JSFunction",
-                            }
+                            "value": "(v, e) => { console.log(v, e) }"
-                          ]
-                        }
-                      },
-                      {
-                        "componentName": "Button.Group",
-                        "props": {
-                          "style": {
-                            "margin": "10px 0 10px 0"
                           }
                         },
-                        "children": [
+                        "children": "Submit"
-                          {
+                      },
-                            "componentName": "Button",
+                      {
-                            "props": {
+                        "componentName": "Form.Reset",
-                              "type": "normal",
+                        "props": {
-                              "htmlType": "submit",
+                          "style": {"marginLeft": 10}
-                              "children": "注册"
+                        },
-                            }
+                        "children": "Reset"
-                          },
-                          {
-                            "componentName": "Button",
-                            "props": {
-                              "type": "primary",
-                              "htmlType": "submit",
-                              "children": "登录",
-                              "style": {
-                                "margin": "0 5px 0 5px"
-                              }
-                            }
-                          }
-                        ]
                       }
                     ]
                   }
@@ -14283,17 +14187,17 @@
           ]
         },
         {
-          "componentName": "Form.Item",
+          "componentName": "FormItem",
           "title": "表单项",
           "icon": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png",
           "package": "@alifd/next",
           "library": "Next",
           "snippets": [
             {
-              "title": "Form.Item",
+              "title": "FormItem",
               "screenshot": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png",
               "schema": {
-                "componentName": "Form.Item",
+                "componentName": "FormItem",
                 "props": {
                   "placeholder": "拖动组件到这里"
                 }
@@ -14312,7 +14216,7 @@
               "title": "输入框",
               "screenshot": "https://img.alicdn.com/tfs/TB1ysp3u8v0gK0jSZKbXXbK2FXa-112-64.png",
               "schema": {
-                "componentName": "Form.Item",
+                "componentName": "FormItem",
                 "props": {
                   "label": "标签",
                   "labelAlign": "top",

packages/editor-setters/src/icon-setter/index.tsx

@@ -112,10 +112,12 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
     const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
     const { firstLoad } = this.state;
     const _value = typeof value === 'object' ? value?.props?.type : value;
-    if (firstLoad && defaultValue && typeof value === 'undefined') onChange(defaultValue);
+    if (firstLoad && defaultValue && typeof value === 'undefined') {
-    this.setState({
+      onChange(defaultValue);
-      firstLoad: false,
+      this.setState({
-    });
+        firstLoad: false,
+      });
+    }
     const currentIcon = <Icon size="xs" type={_value} />;
     const clearIcon = hasClear && (
       <Icon
@@ -156,7 +158,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
       >
         <ul className="lowcode-icon-list">
           {icons.map((icon) => (
-            <li onClick={() => this.onSelectIcon(icon)}>
+            <li key={icon} onClick={() => this.onSelectIcon(icon)}>
               <Icon type={icon} size="medium" />
             </li>
           ))}

packages/editor-skeleton/src/transducers/parse-props.ts

@@ -48,6 +48,12 @@ function propTypeToSetter(propType: PropType): SetterType {
         isRequired,
         initialValue: '',
       };
+    case 'Json':
+      return {
+        componentName: 'JsonSetter',
+        isRequired,
+        initialValue: '',
+      };
     case 'color':
       return {
         componentName: 'ColorSetter',