diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json
index beba9a198..3a9ce284a 100644
--- a/packages/demo/public/assets.json
+++ b/packages/demo/public/assets.json
@@ -24,22 +24,27 @@
   "components": [
     {
       "componentName": "Page",
-      "title": "页面",
+      "title": "Page",
       "configure": {
         "events": {
-          "supportedLifecycles": [{
-            "description": "初始化时",
-            "name": "constructor"
-          }, {
-            "description": "装载后",
-            "name": "componentDidMount"
-          }, {
-            "description": "更新时",
-            "name": "componentDidMount"
-          }, {
-            "description": "卸载时",
-            "name": "componentWillUnmount"
-          }]
+          "supportedLifecycles": [
+            {
+              "description": "初始化时",
+              "name": "constructor"
+            },
+            {
+              "description": "装载后",
+              "name": "componentDidMount"
+            },
+            {
+              "description": "更新时",
+              "name": "componentDidMount"
+            },
+            {
+              "description": "卸载时",
+              "name": "componentWillUnmount"
+            }
+          ]
         },
         "component": {
           "isContainer": true
@@ -48,7 +53,7 @@
     },
     {
       "componentName": "Div",
-      "title": "容器",
+      "title": "Div",
       "configure": {
         "component": {
           "isContainer": true
@@ -57,7 +62,7 @@
     },
     {
       "componentName": "Badge",
-      "title": "@alifd/next",
+      "title": "Badge",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -142,7 +147,7 @@
     },
     {
       "componentName": "Balloon",
-      "title": "@alifd/next",
+      "title": "Balloon",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -389,7 +394,7 @@
     },
     {
       "componentName": "Tooltip",
-      "title": "@alifd/next",
+      "title": "Tooltip",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -509,7 +514,7 @@
     },
     {
       "componentName": "BalloonInner",
-      "title": "@alifd/next",
+      "title": "BalloonInner",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -583,7 +588,7 @@
     },
     {
       "componentName": "Breadcrumb",
-      "title": "@alifd/next",
+      "title": "Breadcrumb",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -653,6 +658,10 @@
         {
           "name": "className",
           "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
@@ -734,12 +743,16 @@
         {
           "name": "className",
           "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Breadcrumb.Item",
-      "title": "@alifd/next",
+      "title": "Breadcrumb.Item",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -786,12 +799,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Button",
-      "title": "@alifd/next",
+      "title": "Button",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -939,8 +956,18 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
         }
-      ]
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
     },
     {
       "componentName": "Button.Group",
@@ -981,12 +1008,22 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "自定义内联样式"
         }
-      ]
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
     },
     {
       "componentName": "Calendar",
-      "title": "@alifd/next",
+      "title": "Calendar",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1108,12 +1145,16 @@
           "name": "locale",
           "propType": "object",
           "description": "国际化配置"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "RangeCalendar",
-      "title": "@alifd/next",
+      "title": "RangeCalendar",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1225,12 +1266,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Card",
-      "title": "@alifd/next",
+      "title": "Card",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1331,12 +1376,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CardHeader",
-      "title": "@alifd/next",
+      "title": "CardHeader",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1389,12 +1438,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CardMedia",
-      "title": "@alifd/next",
+      "title": "CardMedia",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1442,7 +1495,7 @@
     },
     {
       "componentName": "CardDivider",
-      "title": "@alifd/next",
+      "title": "CardDivider",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1476,12 +1529,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CardContent",
-      "title": "@alifd/next",
+      "title": "CardContent",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1510,12 +1567,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CardActions",
-      "title": "@alifd/next",
+      "title": "CardActions",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1544,12 +1605,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CardBulletHeader",
-      "title": "@alifd/next",
+      "title": "CardBulletHeader",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1595,12 +1660,16 @@
             "value": "node"
           },
           "description": "标题区域的用户自定义内容"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CardCollaspeContent",
-      "title": "@alifd/next",
+      "title": "CardCollaspeContent",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1639,12 +1708,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Cascader",
-      "title": "@alifd/next",
+      "title": "Cascader",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -1773,12 +1846,16 @@
         {
           "name": "resultRender",
           "propType": "func"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CascaderSelect",
-      "title": "@alifd/next",
+      "title": "CascaderSelect",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2032,12 +2109,16 @@
           "name": "renderPreview",
           "propType": "func",
           "description": "预览态模式下渲染的内容\n@param {Array<data>} value 选择值 { label: , value:}"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Checkbox",
-      "title": "@alifd/next",
+      "title": "Checkbox",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2154,7 +2235,7 @@
     },
     {
       "componentName": "CheckboxGroup",
-      "title": "@alifd/next",
+      "title": "CheckboxGroup",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2252,7 +2333,7 @@
     },
     {
       "componentName": "Collapse",
-      "title": "@alifd/next",
+      "title": "Collapse",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2339,7 +2420,7 @@
     },
     {
       "componentName": "Panel",
-      "title": "@alifd/next",
+      "title": "Panel",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2401,7 +2482,7 @@
     },
     {
       "componentName": "ErrorBoundary",
-      "title": "@alifd/next",
+      "title": "ErrorBoundary",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2429,12 +2510,16 @@
           "name": "fallbackUI",
           "propType": "func",
           "description": "捕获错误后的展现 自定义组件\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息\n@returns {Element} 捕获错误后的处理"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "DatePicker",
-      "title": "@alifd/next",
+      "title": "DatePicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2701,12 +2786,16 @@
         {
           "name": "disableChangeMode",
           "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "RangePicker",
-      "title": "@alifd/next",
+      "title": "RangePicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -2996,12 +3085,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "MonthPicker",
-      "title": "@alifd/next",
+      "title": "MonthPicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -3226,12 +3319,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "YearPicker",
-      "title": "@alifd/next",
+      "title": "YearPicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -3446,12 +3543,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "WeekPicker",
-      "title": "@alifd/next",
+      "title": "WeekPicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -3681,12 +3782,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Dialog",
-      "title": "@alifd/next",
+      "title": "Dialog",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -3890,12 +3995,16 @@
         {
           "name": "popupContainer",
           "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Inner",
-      "title": "@alifd/next",
+      "title": "Inner",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4007,12 +4116,16 @@
         {
           "name": "height",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Dropdown",
-      "title": "@alifd/next",
+      "title": "Dropdown",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4146,12 +4259,16 @@
             ]
           },
           "description": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Table",
-      "title": "@alifd/next",
+      "title": "Table",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4163,6 +4280,10 @@
         "subName": ""
       },
       "props": [
+        {
+          "name": "style",
+          "propType": "object"
+        }
       ]
     },
     {
@@ -4706,11 +4827,16 @@
           "propType": "func",
           "description": "预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定"
         }
-      ]
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
     },
     {
       "componentName": "Form.Submit",
-      "title": "@alifd/next",
+      "title": "Form.Submit",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4752,12 +4878,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Form.Reset",
-      "title": "@alifd/next",
+      "title": "Form.Reset",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4798,12 +4928,16 @@
             "type": "instanceOf",
             "value": "node"
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
-      "componentName": "From.Error",
-      "title": "@alifd/next",
+      "componentName": "Form.Error",
+      "title": "Form.Error",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4865,7 +4999,7 @@
     },
     {
       "componentName": "Icon",
-      "title": "@alifd/next",
+      "title": "Icon",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4930,7 +5064,7 @@
     },
     {
       "componentName": "Input",
-      "title": "@alifd/next",
+      "title": "Input",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5098,12 +5232,16 @@
           "name": "renderPreview",
           "propType": "func",
           "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Input.Password",
-      "title": "@alifd/next",
+      "title": "Input.Password",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5120,12 +5258,16 @@
           "propType": "bool",
           "description": "是否展示切换按钮",
           "defaultValue": true
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Input.TextArea",
-      "title": "@alifd/next",
+      "title": "Input.TextArea",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5182,12 +5324,16 @@
           "name": "renderPreview",
           "propType": "func",
           "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Input.Group",
-      "title": "@alifd/next",
+      "title": "Input.Group",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5255,7 +5401,7 @@
     },
     {
       "componentName": "Loading",
-      "title": "@alifd/next",
+      "title": "Loading",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5360,7 +5506,7 @@
     },
     {
       "componentName": "Menu",
-      "title": "@alifd/next",
+      "title": "Menu",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5695,12 +5841,16 @@
         {
           "name": "itemClassName",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "SubMenu",
-      "title": "@alifd/next",
+      "title": "SubMenu",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5812,12 +5962,16 @@
               "popup"
             ]
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "SelectableItem",
-      "title": "@alifd/next",
+      "title": "SelectableItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5895,12 +6049,16 @@
         {
           "name": "isSelectIconRight",
           "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "CheckboxItem",
-      "title": "@alifd/next",
+      "title": "CheckboxItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -5955,12 +6113,16 @@
           "name": "checkboxDisabled",
           "propType": "bool",
           "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "RadioItem",
-      "title": "@alifd/next",
+      "title": "RadioItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6004,12 +6166,16 @@
             "value": "node"
           },
           "description": "标签内容"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "PopupItem",
-      "title": "@alifd/next",
+      "title": "PopupItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6094,12 +6260,16 @@
         {
           "name": "autoWidth",
           "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Group",
-      "title": "@alifd/next",
+      "title": "Group",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6144,12 +6314,16 @@
               "popup"
             ]
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Divider",
-      "title": "@alifd/next",
+      "title": "Divider",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6168,12 +6342,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "MenuButton",
-      "title": "@alifd/next",
+      "title": "MenuButton",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6315,7 +6493,7 @@
     },
     {
       "componentName": "Message",
-      "title": "@alifd/next",
+      "title": "Message",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6452,7 +6630,7 @@
     },
     {
       "componentName": "Nav",
-      "title": "@alifd/next",
+      "title": "Nav",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6692,7 +6870,7 @@
     },
     {
       "componentName": "Item",
-      "title": "@alifd/next",
+      "title": "Item",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6735,12 +6913,16 @@
               "popup"
             ]
           }
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Group",
-      "title": "@alifd/next",
+      "title": "Group",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6772,12 +6954,16 @@
             "value": "node"
           },
           "description": "导航项和子导航"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "SubNav",
-      "title": "@alifd/next",
+      "title": "SubNav",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6829,12 +7015,16 @@
             "value": "node"
           },
           "description": "导航项和子导航"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "PopupItem",
-      "title": "@alifd/next",
+      "title": "PopupItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -6880,12 +7070,16 @@
             "value": "node"
           },
           "description": "弹出内容"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "NumberPicker",
-      "title": "@alifd/next",
+      "title": "NumberPicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7092,7 +7286,7 @@
     },
     {
       "componentName": "Pagination",
-      "title": "@alifd/next",
+      "title": "Pagination",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7284,12 +7478,16 @@
           "name": "popupProps",
           "propType": "object",
           "description": "弹层组件属性，透传给Popup"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Progress",
-      "title": "@alifd/next",
+      "title": "Progress",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7380,12 +7578,16 @@
         {
           "name": "rtl",
           "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Radio",
-      "title": "@alifd/next",
+      "title": "Radio",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7490,7 +7692,7 @@
     },
     {
       "componentName": "RadioGroup",
-      "title": "@alifd/next",
+      "title": "RadioGroup",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7619,7 +7821,7 @@
     },
     {
       "componentName": "Range",
-      "title": "@alifd/next",
+      "title": "Range",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7765,7 +7967,7 @@
     },
     {
       "componentName": "Rating",
-      "title": "@alifd/next",
+      "title": "Rating",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -7887,12 +8089,16 @@
           "propType": "bool",
           "description": "是否为只读态，效果上同 disabeld",
           "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Search",
-      "title": "@alifd/next",
+      "title": "Search",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -8087,7 +8293,7 @@
     },
     {
       "componentName": "Select",
-      "title": "@alifd/next",
+      "title": "Select",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -8264,7 +8470,7 @@
     },
     {
       "componentName": "Slider",
-      "title": "@alifd/next",
+      "title": "Slider",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -8598,7 +8804,7 @@
     },
     {
       "componentName": "SplitButton",
-      "title": "@alifd/next",
+      "title": "SplitButton",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -8800,7 +9006,7 @@
     },
     {
       "componentName": "Step",
-      "title": "@alifd/next",
+      "title": "Step",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -8885,12 +9091,16 @@
           "propType": "func",
           "description": "StepItem 的自定义渲染\n@param {Number} index   节点索引\n@param {String} status  节点状态\n@returns {Node} 节点的渲染结果",
           "defaultValue": null
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "StepItem",
-      "title": "@alifd/next",
+      "title": "StepItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9037,12 +9247,16 @@
         {
           "name": "readOnly",
           "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Switch",
-      "title": "@alifd/next",
+      "title": "Switch",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9155,7 +9369,7 @@
     },
     {
       "componentName": "Tab",
-      "title": "@alifd/next",
+      "title": "Tab",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9351,12 +9565,16 @@
         {
           "name": "className",
           "propType": "string"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "TabItem",
-      "title": "@alifd/next",
+      "title": "TabItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9407,12 +9625,16 @@
         {
           "name": "children",
           "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "TabItem",
-      "title": "@alifd/next",
+      "title": "TabItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9463,12 +9685,16 @@
         {
           "name": "children",
           "propType": "any"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "TimePicker",
-      "title": "@alifd/next",
+      "title": "TimePicker",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9697,12 +9923,16 @@
         },
         {
           "name": "locale"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Timeline",
-      "title": "@alifd/next",
+      "title": "Timeline",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9751,12 +9981,16 @@
           "name": "animation",
           "propType": "bool",
           "defaultValue": true
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "TimelineItem",
-      "title": "@alifd/next",
+      "title": "TimelineItem",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -9865,12 +10099,16 @@
           "propType": "bool",
           "description": "动画",
           "defaultValue": true
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Transfer",
-      "title": "@alifd/next",
+      "title": "Transfer",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10005,12 +10243,16 @@
           "name": "children",
           "propType": "func",
           "description": "接收 children 自定义渲染列表"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Tree",
-      "title": "@alifd/next",
+      "title": "Tree",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10249,12 +10491,16 @@
         {
           "name": "onItemKeyDown",
           "propType": "func"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "TreeNode",
-      "title": "@alifd/next",
+      "title": "TreeNode",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10390,12 +10636,16 @@
           "name": "size",
           "propType": "number",
           "defaultValue": 1
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "TreeSelect",
-      "title": "@alifd/next",
+      "title": "TreeSelect",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10616,12 +10866,16 @@
           "name": "renderPreview",
           "propType": "func",
           "description": "预览态模式下渲染的内容\n@param {Array<data>} value 选择值 { label: , value:}"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Typography",
-      "title": "@alifd/next",
+      "title": "Typography",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10641,12 +10895,16 @@
           },
           "description": "设置标签类型",
           "defaultValue": "article"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Paragraph",
-      "title": "@alifd/next",
+      "title": "Paragraph",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10679,12 +10937,16 @@
         {
           "name": "size",
           "defaultValue": "medium"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Text",
-      "title": "@alifd/next",
+      "title": "Text",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10751,12 +11013,16 @@
           "name": "rtl",
           "propType": "bool",
           "defaultValue": false
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Upload",
-      "title": "@alifd/next",
+      "title": "Upload",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -10970,7 +11236,7 @@
     },
     {
       "componentName": "Selecter",
-      "title": "@alifd/next",
+      "title": "Selecter",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11051,7 +11317,7 @@
     },
     {
       "componentName": "Dragger",
-      "title": "@alifd/next",
+      "title": "Dragger",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11127,7 +11393,7 @@
     },
     {
       "componentName": "List",
-      "title": "@alifd/next",
+      "title": "List",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11229,12 +11495,16 @@
         {
           "name": "isPreview",
           "propType": "bool"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Avatar",
-      "title": "@alifd/next",
+      "title": "Avatar",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11323,12 +11593,16 @@
           "name": "srcSet",
           "propType": "string",
           "description": "图片类头像响应式资源地址"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "ResponsiveGrid",
-      "title": "@alifd/next",
+      "title": "ResponsiveGrid",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11391,12 +11665,16 @@
           },
           "description": "设置标签类型",
           "defaultValue": "div"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Cell",
-      "title": "@alifd/next",
+      "title": "Cell",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11444,12 +11722,16 @@
           },
           "description": "设置标签类型",
           "defaultValue": "div"
+        },
+        {
+          "name": "style",
+          "propType": "object"
         }
       ]
     },
     {
       "componentName": "Box",
-      "title": "@alifd/next",
+      "title": "Box",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -12078,9 +12360,9 @@
                   "type": "normal",
                   "size": "medium",
                   "htmlType": "button",
-                  "component": "button",
-                  "children": [ "123" ]
-                }
+                  "component": "button"
+                },
+                "children": "取消"
               }
             },
             {
@@ -12093,7 +12375,8 @@
                   "size": "large",
                   "htmlType": "button",
                   "component": "button"
-                }
+                },
+                "children": "提交"
               }
             }
           ]
@@ -12479,7 +12762,7 @@
           ]
         },
         {
-          "componentName": "Field",
+          "componentName": "Form.Item",
           "title": "表单辅助工具",
           "icon": "",
           "package": "@alife/next",
@@ -12489,7 +12772,7 @@
               "title": "表单辅助工具",
               "screenshot": "",
               "schema": {
-                "componentName": "Field",
+                "componentName": "Form.Item",
                 "props": {}
               }
             }
diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json
index 94472e42a..e5a3b43e7 100644
--- a/packages/demo/public/schema.json
+++ b/packages/demo/public/schema.json
@@ -49,7 +49,7 @@
         "initValue": "李雷"
       },
       "children": [{
-        "componentName": "From.Input",
+        "componentName": "Input",
         "props": {
           "placeholder": "请输入",
           "size": "medium",
@@ -94,7 +94,7 @@
         }
       }]
     }, {
-      "componentName": "Box",
+      "componentName": "Form.Item",
       "props": {
         "style": {
           "textAlign": "center"
@@ -112,7 +112,15 @@
             },
             "htmlType": "submit"
           },
-          "children": "提交"
+          "children": [
+            {
+              "componentName": "Icon",
+              "props": {
+                "type": "success"
+              }
+            },
+            "提交"
+          ]
         }, {
           "componentName": "Button",
           "props": {
diff --git a/packages/demo/src/editor/plugins/codeout.tsx b/packages/demo/src/editor/plugins/codeout.tsx
index d537961fe..6fcaeee5b 100644
--- a/packages/demo/src/editor/plugins/codeout.tsx
+++ b/packages/demo/src/editor/plugins/codeout.tsx
@@ -14,6 +14,14 @@ const Codeout = ({ editor }: PluginProps) => {
   const handleClick = () => {
     const designer = editor.get(Designer);
     if (designer) {
+      const assets = editor.get('assets');
+      console.log(assets.components);
+
+      const componentsMap = assets.components.map((c) => ({
+        componentName: c.componentName,
+        ...(c.npm || {}),
+      }));
+
       const fullSchema = {
         ...designer.schema,
         config: {
@@ -23,30 +31,28 @@ const Codeout = ({ editor }: PluginProps) => {
         meta: {
           name: 'demoproject',
         },
+        componentsMap,
       };
 
       console.info('codeout schema:', fullSchema);
-      // localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
-      fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
-        method: 'POST',
-        body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
-        headers: new Headers({
-          'Content-Type': 'application/json',
-        }),
-        mode: 'cors',
-      }).then((res) => {
-        console.log(res);
-
-        const fileStream = streamSaver.createWriteStream('demoProject.zip');
-        res.body.pipeTo(fileStream).then(
-          () => {
-            console.log('success');
-          },
-          (err) => {
-            console.log(err);
-          },
-        );
-      });
+      // fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
+      //   method: 'POST',
+      //   body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
+      //   headers: new Headers({
+      //     'Content-Type': 'application/json',
+      //   }),
+      //   mode: 'cors',
+      // }).then((res) => {
+      //   const fileStream = streamSaver.createWriteStream('demoProject.zip');
+      //   res.body.pipeTo(fileStream).then(
+      //     () => {
+      //       console.log('success');
+      //     },
+      //     (err) => {
+      //       console.log(err);
+      //     },
+      //   );
+      // });
     }
   };
 
diff --git a/packages/editor-setters/src/events-setter/index.tsx b/packages/editor-setters/src/events-setter/index.tsx
index 92f4eb319..6f364cdfe 100644
--- a/packages/editor-setters/src/events-setter/index.tsx
+++ b/packages/editor-setters/src/events-setter/index.tsx
@@ -33,15 +33,24 @@ export default class EventsSetter extends Component<{
     relatedEventName: '',
   };
 
-
+  // constructor (){
+  //   super();
+  //   debugger;
+  //   if (!this.props || !this.props.value){
+  //     this.setState({
+  //       eventDataList:[]
+  //     })
+  //   }
+  // }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { value } = nextProps;
-    if (value !== prevState.eventDataList) {
-      return {
-        value,
-      };
-    }
+    // const { value } = nextProps;
+    // debugger;
+    // if (value !== prevState.eventDataList) {
+    //   return {
+    //     value,
+    //   };
+    // }
     return null;
   }
 
diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts
index 35844ab29..45eded24d 100644
--- a/packages/editor-skeleton/src/transducers/addon-combine.ts
+++ b/packages/editor-skeleton/src/transducers/addon-combine.ts
@@ -179,7 +179,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
       title: { type: 'i18n', 'zh-CN': '事件', 'en-US': 'Events' },
       items: [
         {
-          name: '!events',
+          name: 'events',
           title: { type: 'i18n', 'zh-CN': '事件设置', 'en-US': 'Events' },
           setter: {
             componentName: 'EventsSetter',
@@ -188,12 +188,25 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             },
           },
           getValue(field: SettingTarget, val?: any[]) {
-            // todo:
-            return val;
+            let eventDataList = []
+            for (let key in val){
+              if (val[key].__eventData){
+                eventDataList.push(val[key].__eventData)
+              }
+            }
+            return eventDataList;
           },
 
           setValue(field: SettingTarget, eventDataList: any[]) {
             // todo:
+            eventDataList.map((item)=>{
+              field.setPropValue(item.name,{
+                type: 'JSFunction',
+                value: `function(){ this.${item.relatedEventName}() }`,
+                __eventData:item
+              })
+              return item;
+            })
             return;
           },
         },
diff --git a/packages/plugin-event-bind-dialog/src/index.tsx b/packages/plugin-event-bind-dialog/src/index.tsx
index c90d16bb3..63d1a788d 100644
--- a/packages/plugin-event-bind-dialog/src/index.tsx
+++ b/packages/plugin-event-bind-dialog/src/index.tsx
@@ -5,21 +5,21 @@ import './index.scss';
 
 export default class EventBindDialog extends Component<PluginProps> {
   private eventList: any[] = [
-    {
-      name: 'getData',
-    },
-    {
-      name: 'deleteData',
-    },
-    {
-      name: 'initData',
-    },
-    {
-      name: 'editData',
-    },
-    {
-      name: 'submitData',
-    },
+    // {
+    //   name: 'getData',
+    // },
+    // {
+    //   name: 'deleteData',
+    // },
+    // {
+    //   name: 'initData',
+    // },
+    // {
+    //   name: 'editData',
+    // },
+    // {
+    //   name: 'submitData',
+    // },
   ];
 
   state: any = {
@@ -41,10 +41,24 @@ export default class EventBindDialog extends Component<PluginProps> {
     });
   };
 
+
+
+
   componentDidMount() {
     const { editor, config } = this.props;
     editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => {
       this.openDialog(bindEventName);
+
+      let schema = editor.get('designer').project.getSchema();
+      let pageNode = schema.componentsTree[0];
+      if (pageNode.methods){
+        this.eventList = [];
+        for (let key in pageNode.methods){
+          this.eventList.push({
+            name:key
+          })
+        }
+      }
     });
   }
 
diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx
index 3becac7b7..245a3198a 100644
--- a/packages/plugin-source-editor/src/index.tsx
+++ b/packages/plugin-source-editor/src/index.tsx
@@ -258,7 +258,7 @@ export default class SourceEditor extends Component<{
               <MonacoEditor
                 value={jsCode}
                 {...defaultEditorOption}
-                {...{ language: 'typescript' }}
+                {...{ language: 'javascript' }}
                 onChange={(newCode) => this.updateCode(newCode)}
                 editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco,TAB_KEY.JS_TAB)}
               />
diff --git a/packages/react-renderer/src/renderer/base.jsx b/packages/react-renderer/src/renderer/base.jsx
index 26581d790..f9b76db64 100644
--- a/packages/react-renderer/src/renderer/base.jsx
+++ b/packages/react-renderer/src/renderer/base.jsx
@@ -308,7 +308,7 @@ export default class BaseRender extends PureComponent {
           ...componentInfo,
           props: transformArrayToMap(componentInfo.props, 'name'),
         },
-      });
+      }) || {};
       // 对于可以获取到ref的组件做特殊处理
       if (acceptsRef(Comp)) {
         otherProps.ref = (ref) => {
diff --git a/packages/react-renderer/src/utils/index.js b/packages/react-renderer/src/utils/index.js
index cc5c5a256..19332fa96 100644
--- a/packages/react-renderer/src/utils/index.js
+++ b/packages/react-renderer/src/utils/index.js
@@ -63,6 +63,8 @@ const ENV = {
  */
 export function isSchema(schema, ignoreArr) {
   if (isEmpty(schema)) return false;
+  // Leaf 组件也返回 true
+  if (schema.componentName === 'Leaf') return true;
   if (!ignoreArr && Array.isArray(schema)) return schema.every((item) => isSchema(item));
   return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props)));
 }
diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index c878cac76..c7848a05f 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -108,6 +108,17 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           const leaf = host.document.getNode(__id);
           viewProps._leaf = leaf;
           viewProps._componentName = leaf?.componentName;
+          // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动
+          if (leaf.isContainer() && children == null && !viewProps.style){
+            Object.assign(viewProps, {
+              style:{
+                height:'100px',
+                backgroundColor:'#f0f0f0',
+                borderColor:'#666666',
+                border: '1px dotted'
+              }
+            })
+          }
 
           if (viewProps._componentName === 'Menu') {
             Object.assign(viewProps, {
@@ -128,11 +139,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
             });
             console.info('menuprops', viewProps);
           }
-
           return createElement(
             getDeviceView(Component, device, designMode),
             viewProps,
-            leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : null,
+            leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children,
           );
         }}
         onCompGetRef={(schema: any, ref: ReactInstance | null) => {