diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
index d4e06792eb..da15069b43 100644
--- a/designer-demo/public/mock/bundle.json
+++ b/designer-demo/public/mock/bundle.json
@@ -180,7 +180,7 @@
                     "labelPosition": "top",
                     "type": "number",
                     "widget": {
-                      "component": "MetaNumberic",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -203,7 +203,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -417,7 +417,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -439,7 +439,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -461,7 +461,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -483,7 +483,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -505,7 +505,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -527,7 +527,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -549,7 +549,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -572,7 +572,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -726,7 +726,7 @@
                     "labelPosition": "top",
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -828,7 +828,7 @@
                     "labelPosition": "top",
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -883,7 +883,7 @@
                     "defaultValue": true,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -905,7 +905,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -927,7 +927,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -949,7 +949,7 @@
                     "defaultValue": true,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -1008,7 +1008,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -1031,7 +1031,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -1200,7 +1200,7 @@
                     "labelPosition": "top",
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -1265,7 +1265,7 @@
                     "labelPosition": "top",
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -1286,7 +1286,7 @@
                     "labelPosition": "top",
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -1635,7 +1635,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaNumberic",
+                              "component": "NumberConfigurator",
                               "props": {}
                             }
                           },
@@ -1654,7 +1654,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaNumberic",
+                              "component": "NumberConfigurator",
                               "props": {}
                             }
                           },
@@ -1703,7 +1703,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaSwitch",
+                              "component": "SwitchConfigurator",
                               "props": {}
                             }
                           },
@@ -1784,7 +1784,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaSwitch",
+                              "component": "SwitchConfigurator",
                               "props": {}
                             }
                           },
@@ -1826,7 +1826,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaSwitch",
+                              "component": "SwitchConfigurator",
                               "props": {}
                             }
                           },
@@ -1976,7 +1976,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaSwitch",
+                              "component": "SwitchConfigurator",
                               "props": {}
                             }
                           },
@@ -2037,7 +2037,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaSwitch",
+                              "component": "SwitchConfigurator",
                               "props": {}
                             }
                           },
@@ -2119,7 +2119,7 @@
                     "labelPosition": "top",
                     "type": "number",
                     "widget": {
-                      "component": "MetaNumberic",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -2164,7 +2164,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -2186,7 +2186,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -2245,7 +2245,7 @@
                     "defaultValue": true,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -2267,7 +2267,7 @@
                     "defaultValue": true,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -2289,7 +2289,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -2429,7 +2429,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -2451,7 +2451,7 @@
                     "defaultValue": false,
                     "type": "boolean",
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   }
@@ -2934,7 +2934,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3024,7 +3024,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3043,7 +3043,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3062,7 +3062,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3081,7 +3081,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3225,7 +3225,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlText",
+                      "component": "HtmlTextConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3294,7 +3294,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3375,7 +3375,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlText",
+                      "component": "HtmlTextConfigurator",
                       "props": {
                         "showRadioButton": true
                       }
@@ -3397,7 +3397,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3478,7 +3478,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlText",
+                      "component": "HtmlTextConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3498,7 +3498,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3700,7 +3700,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3908,7 +3908,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3927,7 +3927,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -3946,7 +3946,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4043,7 +4043,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4106,7 +4106,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4225,7 +4225,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4303,7 +4303,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4322,7 +4322,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4341,7 +4341,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaHtmlAttributes",
+                      "component": "HtmlAttributesConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4690,7 +4690,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4709,7 +4709,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4844,7 +4844,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     }
                   },
@@ -4860,7 +4860,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4943,7 +4943,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -4982,7 +4982,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5001,7 +5001,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5336,7 +5336,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5473,7 +5473,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": -12,
                         "max": 12
@@ -5495,7 +5495,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "max": 12
                       }
@@ -5516,7 +5516,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": 0,
                         "max": 12
@@ -5538,7 +5538,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": 1,
                         "max": 12
@@ -5560,7 +5560,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": 1,
                         "max": 12
@@ -5582,7 +5582,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": 1,
                         "max": 12
@@ -5604,7 +5604,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": 1,
                         "max": 12
@@ -5626,7 +5626,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "min": 1,
                         "max": 12
@@ -5776,7 +5776,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5851,7 +5851,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5871,7 +5871,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5891,7 +5891,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5910,7 +5910,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5930,7 +5930,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5950,7 +5950,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6099,7 +6099,7 @@
                       }
                     },
                     "widget": {
-                      "component": "MetaNumber"
+                      "component": "NumberConfigurator"
                     },
                     "description": {
                       "zh_CN": "输入框行数，只对 type='textarea' 有效"
@@ -6137,7 +6137,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6157,7 +6157,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6218,7 +6218,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6238,7 +6238,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6524,7 +6524,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6553,7 +6553,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6747,7 +6747,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6767,7 +6767,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6787,7 +6787,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6828,7 +6828,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6856,7 +6856,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6896,7 +6896,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7115,7 +7115,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7194,7 +7194,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7337,7 +7337,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7377,7 +7377,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7397,7 +7397,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7425,7 +7425,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7445,7 +7445,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7616,7 +7616,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7635,7 +7635,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7683,7 +7683,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7875,7 +7875,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -7894,7 +7894,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8068,7 +8068,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8277,7 +8277,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8317,7 +8317,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8336,7 +8336,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8376,7 +8376,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8396,7 +8396,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8537,7 +8537,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8599,7 +8599,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8619,7 +8619,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9478,7 +9478,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaSwitch",
+                              "component": "SwitchConfigurator",
                               "props": {}
                             }
                           },
@@ -9492,7 +9492,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaNumber",
+                              "component": "NumberConfigurator",
                               "props": {}
                             }
                           },
@@ -9576,7 +9576,7 @@
                             },
                             "labelPosition": "none",
                             "widget": {
-                              "component": "MetaJsSlot",
+                              "component": "JsSlotConfigurator",
                               "props": {
                                 "slots": ["header", "default"]
                               }
@@ -9782,7 +9782,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9905,7 +9905,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9941,7 +9941,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9961,7 +9961,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9981,7 +9981,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10001,7 +10001,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10021,7 +10021,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10335,7 +10335,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10355,7 +10355,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10394,7 +10394,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10612,7 +10612,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10632,7 +10632,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10659,7 +10659,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10739,7 +10739,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10759,7 +10759,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10938,7 +10938,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11029,7 +11029,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11097,7 +11097,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11285,7 +11285,7 @@
                     "readOnly": false,
                     "disabled": false,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11313,7 +11313,7 @@
                     "readOnly": false,
                     "disabled": false,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11332,7 +11332,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11596,7 +11596,7 @@
                     "defaultValue": true,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11612,7 +11612,7 @@
                     },
                     "defaultValue": true,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11707,7 +11707,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11856,7 +11856,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11875,7 +11875,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11894,7 +11894,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11913,7 +11913,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11951,7 +11951,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11970,7 +11970,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11989,7 +11989,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12046,7 +12046,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12084,7 +12084,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12271,7 +12271,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12291,7 +12291,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12310,7 +12310,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12371,7 +12371,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12391,7 +12391,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12648,7 +12648,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12668,7 +12668,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12721,7 +12721,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaSwitch",
+                      "component": "SwitchConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12771,7 +12771,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "allowEmpty": true
                       }
@@ -12793,7 +12793,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "allowEmpty": true
                       }
@@ -12815,7 +12815,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "allowEmpty": true
                       }
@@ -12837,7 +12837,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaNumber",
+                      "component": "NumberConfigurator",
                       "props": {
                         "allowEmpty": true
                       }
diff --git a/packages/canvas/render/src/builtin/builtin.json b/packages/canvas/render/src/builtin/builtin.json
index 8d31a108a2..57510cc4e7 100644
--- a/packages/canvas/render/src/builtin/builtin.json
+++ b/packages/canvas/render/src/builtin/builtin.json
@@ -108,7 +108,7 @@
                           }
                         },
                         "widget": {
-                          "component": "MetaCodeEditor",
+                          "component": "CodeConfigurator",
                           "props": {
                             "language": "json",
                             "tips": {
@@ -186,7 +186,7 @@
                         "cols": 12,
                         "rules": [],
                         "widget": {
-                          "component": "MetaCodeEditor",
+                          "component": "CodeConfigurator",
                           "props": {}
                         }
                       },
@@ -203,7 +203,7 @@
                         "cols": 12,
                         "rules": [],
                         "widget": {
-                          "component": "MetaCollection",
+                          "component": "CollectionConfigurator",
                           "props": {}
                         }
                       }
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 74bace8f2c..8884ad5541 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -70,7 +70,7 @@
 
         <div class="action-icon">
           <slot name="suffix"></slot>
-          <meta-code-editor
+          <code-configurator
             v-if="showCodeEditIcon"
             ref="editorModalRef"
             v-bind="widget.props"
@@ -85,13 +85,13 @@
                 <icon-writing class="code-icon" @click="editorModalRef?.open && editorModalRef.open()"></icon-writing>
               </tiny-tooltip>
             </template>
-          </meta-code-editor>
-          <meta-bind-variable
+          </code-configurator>
+          <variable-configurator
             v-if="isTopLayer && !onlyEdit && property.bindState !== false && !isRelatedComponents(widget.component)"
             :model-value="widget.props.modelValue"
             :name="widget.props.name"
             @update:modelValue="onModelUpdate"
-          ></meta-bind-variable>
+          ></variable-configurator>
         </div>
       </div>
     </div>
@@ -104,9 +104,7 @@ import { Popover, Tooltip } from '@opentiny/vue'
 import { IconWriting, IconHelpCircle, IconPlusCircle } from '@opentiny/vue-icon'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
 import i18n from '@opentiny/tiny-engine-controller/js/i18n'
-import { MetaComponents } from '../index'
-import MetaBindVariable from './MetaBindVariable.vue'
-import MetaCodeEditor from './MetaCodeEditor.vue'
+import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import MultiTypeSelector from './MultiTypeSelector.vue'
 import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
 import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
@@ -123,8 +121,8 @@ const hasRule = (required, rules) => {
 export default {
   components: {
     MultiTypeSelector,
-    MetaCodeEditor,
-    MetaBindVariable,
+    CodeConfigurator,
+    VariableConfigurator,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
     IconWriting: IconWriting(),
@@ -464,7 +462,6 @@ export default {
       editorModalRef,
       isBindingState,
       component,
-      MetaComponents,
       hidden,
       widget,
       required,
diff --git a/packages/common/component/MetaRelatedEditor.vue b/packages/common/component/MetaRelatedEditor.vue
index c6043c8665..98146cf92a 100644
--- a/packages/common/component/MetaRelatedEditor.vue
+++ b/packages/common/component/MetaRelatedEditor.vue
@@ -3,7 +3,7 @@
     <div v-if="isBindingState" class="meta-binding-state">
       {{ `已绑定：${modelValue?.value}` }}
     </div>
-    <meta-code-editor
+    <code-configurator
       v-else
       :modelValue="modelValue"
       :language="language"
@@ -14,21 +14,20 @@
       :showFormatBtn="showFormatBtn"
       :showErrorMsg="showErrorMsg"
       @update:modelValue="saveValue"
-    ></meta-code-editor>
-    <meta-bind-variable :modelValue="bindValue" :name="name" @update:modelValue="saveValue"></meta-bind-variable>
+    ></code-configurator>
+    <variable-configurator :modelValue="bindValue" :name="name" @update:modelValue="saveValue"></variable-configurator>
   </div>
 </template>
 
 <script>
 import { onMounted, ref, watchEffect } from 'vue'
 import { useMessage, useCanvas } from '@opentiny/tiny-engine-controller'
-import MetaCodeEditor from './MetaCodeEditor.vue'
-import MetaBindVariable from './MetaBindVariable.vue'
+import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 
 export default {
   components: {
-    MetaCodeEditor,
-    MetaBindVariable
+    CodeConfigurator,
+    VariableConfigurator
   },
   props: {
     buttonText: {
diff --git a/packages/common/component/MultiTypeSelector.vue b/packages/common/component/MultiTypeSelector.vue
index 8d7ebd1994..2e3649a80a 100644
--- a/packages/common/component/MultiTypeSelector.vue
+++ b/packages/common/component/MultiTypeSelector.vue
@@ -29,7 +29,6 @@
 <script>
 import { reactive } from 'vue'
 import { Tooltip, Popover, Radio, RadioGroup } from '@opentiny/vue'
-import MetaBindVariable from './MetaBindVariable.vue'
 import { MetaComponents } from '../index'
 
 export default {
@@ -38,14 +37,13 @@ export default {
     TinyTooltip: Tooltip,
     TinyPopover: Popover,
     TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    MetaBindVariable
+    TinyRadioGroup: RadioGroup
   },
   inheritAttrs: false,
   props: {
     meta: {
       type: Object,
-      default: {}
+      default: () => ({})
     },
     label: {
       type: String,
@@ -69,6 +67,9 @@ export default {
       return result
     }
 
+    const currentType = getModelValueType(props.meta.type, props.meta.widget?.props?.modelValue)
+    const defaultType = getModelValueType(props.meta.type, props.meta.defaultValue)
+
     const initModelValue = () =>
       props.meta.type.map((type) => {
         if (type === currentType) return { modelValue: props.meta.widget?.props?.modelValue }
@@ -76,8 +77,6 @@ export default {
         return { modelValue: null }
       })
 
-    const currentType = getModelValueType(props.meta.type, props.meta.widget?.props?.modelValue)
-    const defaultType = getModelValueType(props.meta.type, props.meta.defaultValue)
     const state = reactive({
       type: currentType, // 当前选中的组件类型
       typesValue: initModelValue() // 保存多个组件的modelValue
diff --git a/packages/common/index.js b/packages/common/index.js
index 2ec8e38486..945fc83b3c 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -15,10 +15,15 @@ import {
   CascaderConfigurator,
   CheckBoxConfigurator,
   CheckboxGroupConfigurator,
+  CodeConfigurator,
+  CodeListConfigurator,
+  CollectionConfigurator,
+  ColorConfigurator,
   DatePickerConfigurator,
   FormConfigurator,
   HtmlAttributesConfigurator,
   HtmlTextConfigurator,
+  I18nConfigurator,
   InputConfigurator,
   IpSectionConfigurator,
   JsSlotConfigurator,
@@ -29,7 +34,8 @@ import {
   SelectIconConfigurator,
   SliderConfigurator,
   SlotConfigurator,
-  SwitchConfigurator
+  SwitchConfigurator,
+  VariableConfigurator
 } from '@opentiny/tiny-engine-configurator'
 
 import PluginSetting from './component/PluginSetting.vue'
@@ -43,13 +49,7 @@ import ConfigItem from './component/ConfigItem.vue'
 import ConfigRender from './component/ConfigRender.vue'
 
 import MetaArrayItem from './component/MetaArrayItem.vue'
-import MetaBindI18n from './component/MetaBindI18n.vue'
-import MetaBindVariable from './component/MetaBindVariable.vue'
 import MetaListActions from './component/MetaListActions.vue'
-import MetaCodeEditor from './component/MetaCodeEditor.vue'
-import MetaCodeEditorList from './component/MetaCodeEditorList.vue'
-import MetaCollection from './component/MetaCollection.vue'
-import MetaColor from './component/MetaColor.vue'
 import MetaGroupItem from './component/MetaGroupItem.vue'
 import MetaLayoutGrid from './component/MetaLayoutGrid.vue'
 import MetaListTitle from './component/MetaListTitle.vue'
@@ -57,8 +57,8 @@ import MetaListItems from './component/MetaListItems.vue'
 import MetaListItem from './component/MetaListItem.vue'
 import MetaModal, { useModal } from './component/MetaModal.vue'
 import MetaPopover from './component/MetaPopover.vue'
-import MetaContainer from './component/MetaContainer.vue'
 import VideoGuide from './component/VideoGuide.vue'
+import MetaContainer from './component/MetaContainer.vue'
 import MonacoEditor from './component/MonacoEditor.vue'
 import BlockHistoryList from './component/BlockHistoryList.vue'
 import BlockHistoryTemplate from './component/BlockHistoryTemplate.vue'
@@ -111,14 +111,14 @@ export const injectGlobalComponents = {
 // TODO: 后面由各自所需代码各自引入，然后删除
 export const MetaComponents = {
   MetaArrayItem,
-  MetaBindI18n,
-  MetaBindVariable,
+  MetaBindI18n: I18nConfigurator,
+  MetaBindVariable: VariableConfigurator,
   MetaButtonGroup: ButtonGroupConfigurator,
   MetaCheckBox: CheckBoxConfigurator,
   MetaCascader: CascaderConfigurator,
-  MetaCodeEditor,
-  MetaCodeEditorList,
-  MetaColor,
+  MetaCodeEditor: CodeConfigurator,
+  MetaCodeEditorList: CodeListConfigurator,
+  MetaColor: ColorConfigurator,
   MetaDatePicker: DatePickerConfigurator,
   MetaGroupItem,
   MetaInput: InputConfigurator,
@@ -138,7 +138,7 @@ export const MetaComponents = {
   MetaListItems,
   MetaListItem,
   MetaForm: FormConfigurator,
-  MetaCollection,
+  MetaCollection: CollectionConfigurator,
   MetaContainer,
   MetaJsSlot: JsSlotConfigurator,
   MetaSlot: SlotConfigurator,
@@ -153,12 +153,12 @@ export const MetaComponents = {
 }
 
 export {
-  MetaBindI18n,
-  MetaBindVariable,
+  I18nConfigurator as MetaBindI18n,
+  VariableConfigurator as MetaBindVariable,
   CheckBoxConfigurator as MetaCheckBox,
-  MetaCodeEditor,
-  MetaCodeEditorList,
-  MetaColor,
+  CodeConfigurator as MetaCodeEditor,
+  CodeListConfigurator as MetaCodeEditorList,
+  ColorConfigurator as MetaColor,
   DatePickerConfigurator as MetaDatePicker,
   MetaDescription,
   InputConfigurator as MetaInput,
@@ -195,7 +195,7 @@ export {
   BlockLinkEvent,
   BlockDescription,
   PluginBlockList,
-  MetaCollection,
+  CollectionConfigurator as MetaCollection,
   ButtonGroup,
   CloseIcon,
   LifeCycles,
diff --git a/packages/configurator/package.json b/packages/configurator/package.json
index df8f8f74a1..85adcdd569 100644
--- a/packages/configurator/package.json
+++ b/packages/configurator/package.json
@@ -21,10 +21,15 @@
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.14.0",
+    "@opentiny/vue-icon": "^3.14.0",
     "vue": "^3.4.15"
   },
   "dependencies": {
-    "@opentiny/tiny-engine-controller": "workspace:*"
+    "@opentiny/tiny-engine-controller": "workspace:*",
+    "@opentiny/tiny-engine-http": "workspace:*",
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "@vue/shared": "^3.3.4",
+    "monaco-editor": "0.33.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/configurator/src/code-configurator/CodeConfigurator.vue
similarity index 98%
rename from packages/common/component/MetaCodeEditor.vue
rename to packages/configurator/src/code-configurator/CodeConfigurator.vue
index 85b2a2c3be..9ec5d1386d 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/configurator/src/code-configurator/CodeConfigurator.vue
@@ -66,12 +66,12 @@
 </template>
 
 <script>
-import { reactive, ref, computed, watchEffect, nextTick } from 'vue'
+import { VueMonaco } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { Button, DialogBox } from '@opentiny/vue'
 import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
-import VueMonaco from './VueMonaco.vue'
-import i18n from '@opentiny/tiny-engine-controller/js/i18n'
-import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
+import { computed, nextTick, reactive, ref, watchEffect } from 'vue'
 
 export default {
   components: {
diff --git a/packages/common/component/MetaCodeEditorList.vue b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
similarity index 98%
rename from packages/common/component/MetaCodeEditorList.vue
rename to packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
index 578a9c3f52..3a763b4bed 100644
--- a/packages/common/component/MetaCodeEditorList.vue
+++ b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
@@ -44,7 +44,7 @@ import { getCurrentInstance, reactive, ref, watchEffect } from 'vue'
 import { Button, Tabs, TabItem, Input, ButtonGroup, Switch, Select } from '@opentiny/vue'
 import { IconClose } from '@opentiny/vue-icon'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import VueMonaco from './VueMonaco.vue'
+import { VueMonaco } from '../components'
 
 export default {
   components: {
@@ -76,7 +76,7 @@ export default {
     }
   },
   emits: ['save'],
-  setup(props, { emit, attrs: { meta } }) {
+  setup(props, { emit }) {
     const editorState = reactive({
       show: false,
       created: false,
diff --git a/packages/common/component/MetaCollection.vue b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue
similarity index 96%
rename from packages/common/component/MetaCollection.vue
rename to packages/configurator/src/collection-configurator/CollectionConfigurator.vue
index 601709ff02..ba0ecf1159 100644
--- a/packages/common/component/MetaCollection.vue
+++ b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { ref, nextTick } from 'vue'
 import { useApp, useModal } from '@opentiny/tiny-engine-controller'
-import { Select, Option, Tooltip } from '@opentiny/vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
+import { Option, Select, Tooltip } from '@opentiny/vue'
 import { IconConmentRefresh } from '@opentiny/vue-icon'
+import { nextTick, ref } from 'vue'
 
 export default {
   components: {
diff --git a/packages/common/component/MetaColor.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
similarity index 100%
rename from packages/common/component/MetaColor.vue
rename to packages/configurator/src/color-configurator/ColorConfigurator.vue
index d1662a6f1a..b665ebd17b 100644
--- a/packages/common/component/MetaColor.vue
+++ b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import { ref, watchEffect } from 'vue'
 import { Input } from '@opentiny/vue'
+import { ref, watchEffect } from 'vue'
 
 export default {
   components: {
@@ -30,10 +30,6 @@ export default {
   setup(props, { emit }) {
     const color = ref(props.modelValue)
 
-    const changeColor = (event) => {
-      change(event.target.value)
-    }
-
     const change = (value) => {
       emit('update:modelValue', value)
       emit('change', value)
@@ -43,6 +39,10 @@ export default {
       color.value = props.modelValue
     })
 
+    const changeColor = (event) => {
+      change(event.target.value)
+    }
+
     return {
       color,
       change,
diff --git a/packages/configurator/src/components/BindI18n.vue b/packages/configurator/src/components/BindI18n.vue
new file mode 100644
index 0000000000..c01bd07ca0
--- /dev/null
+++ b/packages/configurator/src/components/BindI18n.vue
@@ -0,0 +1,227 @@
+<template>
+  <div ref="languageContent" class="languageContent">
+    <div v-show="!showEditItem">
+      <tiny-select
+        ref="selectRef"
+        v-model="selectValue"
+        placeholder="请根据显示值搜索"
+        filterable
+        :filter-method="filterMethod"
+        @change="selectI18n"
+      >
+        <tiny-option v-for="item in langData" :key="item.key" :label="item[currentLang]" :value="item.key">
+          <div style="display: flex">
+            <span style="flex: 1">{{ item.key }}</span>
+            <span style="flex: 1">{{ item[currentLang] }}</span>
+          </div>
+        </tiny-option>
+      </tiny-select>
+      <div v-if="paramsForm.length" class="params-form">
+        <label>国际化参数配置</label>
+        <div v-for="param in paramsForm" :key="param.name" class="params-item">
+          <label>{{ param.name }}</label>
+          <tiny-input v-model="param.value" @update:modelValue="paramsChange"></tiny-input>
+        </div>
+      </div>
+      <slot name="suffix">
+        <tiny-button type="info" @click="openCreateForm">
+          <icon-plus class="icon-plus"></icon-plus>
+          <span>创建新的多语言文案</span>
+        </tiny-button>
+        <tiny-button v-if="isBind" type="info" @click="unbindI18n"> 解除关联 </tiny-button>
+      </slot>
+    </div>
+    <div v-show="showEditItem" class="addNewLanguage">
+      <div>
+        <div class="tiny-input">
+          <label>唯一键</label>
+          <input v-model="editForm.key" class="tiny-input__inner" />
+        </div>
+
+        <div v-for="locale in locales" :key="locale.lang" class="tiny-input">
+          <label>{{ locale.label }}</label>
+          <input v-model="editForm[locale.lang]" class="tiny-input__inner" />
+        </div>
+      </div>
+      <div class="add-btns">
+        <tiny-button type="info" @click="activeI18n">国际化管理 </tiny-button>
+        <tiny-button type="info" @click="addBindI18n">添加并关联 </tiny-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, ref, watchEffect } from 'vue'
+import { useLayout, useTranslate } from '@opentiny/tiny-engine-controller'
+import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
+import { utils } from '@opentiny/tiny-engine-utils'
+import { Select, Option, Button, Input } from '@opentiny/vue'
+import { iconPlus } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect: Select,
+    TinyOption: Option,
+    TinyButton: Button,
+    TinyInput: Input,
+    IconPlus: iconPlus()
+  },
+  inheritAttrs: false,
+  props: {
+    currentLang: String,
+    isBind: Boolean,
+    langData: {
+      type: [Array, Object],
+      default: () => []
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    data: [Object, String],
+    locales: Array
+  },
+  setup(props, { emit }) {
+    const selectValue = ref(props.modelValue)
+    const showEditItem = ref(false)
+    const selectRef = ref(null)
+    const editForm = reactive({})
+    const paramsForm = ref([])
+
+    watchEffect(() => {
+      selectValue.value = props.modelValue
+      if (props.modelValue && props.langData[props.modelValue]) {
+        const curValue = props.langData[props.modelValue][props.currentLang] || ''
+        const params = []
+        const data = props?.data?.params || {}
+
+        curValue.replace(/\{(.+?)\}/g, (substr, key) => {
+          key && params.push({ name: key, value: data[key] || '' })
+        })
+        paramsForm.value = params
+      }
+    })
+
+    const filterMethod = (value) => {
+      const options = selectRef.value.state.cachedOptions
+
+      options.forEach((item) => {
+        item.state.visible = value ? item.label.indexOf(value) > -1 : true
+      })
+    }
+
+    const selectI18n = (key) => {
+      const data = props.langData[key] || {}
+
+      emit('bind', { ...data, key })
+    }
+
+    const { PLUGIN_NAME, activePlugin } = useLayout()
+    const activeI18n = () => activePlugin(PLUGIN_NAME.I18n)
+
+    const addBindI18n = () => {
+      useTranslate().ensureI18n(editForm, true)
+      emit('bind', { ...editForm })
+      showEditItem.value = false
+    }
+
+    const unbindI18n = () => {
+      const i18nObj = props.langData[props.modelValue]
+
+      emit('bind', i18nObj[props.currentLang])
+      showEditItem.value = false
+    }
+
+    const paramsChange = () => {
+      const params = {}
+
+      paramsForm.value.forEach(({ name, value }) => {
+        params[name] = value
+      })
+      emit('bind', { type: PROP_DATA_TYPE.I18N, key: selectValue.value, params })
+    }
+
+    const openCreateForm = () => {
+      Object.keys(editForm).forEach((key) => delete editForm[key])
+      editForm.key = 'lowcode.' + utils.guid()
+      editForm.type = PROP_DATA_TYPE.I18N
+      showEditItem.value = true
+    }
+
+    return {
+      selectRef,
+      showEditItem,
+      filterMethod,
+      selectI18n,
+      selectValue,
+      activeI18n,
+      addBindI18n,
+      unbindI18n,
+      paramsForm,
+      paramsChange,
+      editForm,
+      openCreateForm
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.languageContent {
+  width: 254px;
+  border-radius: 5px;
+  text-align: center;
+  z-index: 99;
+  margin-top: 5px;
+
+  .tiny-svg {
+    margin-right: 10px;
+    font-size: 16px;
+    &:hover {
+      cursor: pointer;
+      color: #ccc;
+    }
+  }
+  .tiny-button {
+    margin-top: 10px;
+    max-width: initial;
+    padding: 0 12px;
+    background-color: var(--ti-lowcode-tabs-border-color);
+    border-color: var(--ti-lowcode-tootip-input-border-color);
+    color: var(--ti-lowcode-toolbar-icon-color);
+    &:hover {
+      background-color: var(--ti-lowcode-canvas-wrap-bg);
+      border-color: var(--ti-lowcode-tabs-border-color);
+    }
+  }
+  .addNewLanguage {
+    padding: 0px 5px 5px;
+    .tiny-input {
+      display: flex;
+      margin-bottom: 10px;
+      align-items: center;
+      label {
+        width: 80px;
+      }
+      display: flex;
+    }
+    .add-btns {
+      text-align: right;
+    }
+  }
+}
+.params-form {
+  & > label {
+    line-height: 30px;
+  }
+  .params-item {
+    display: flex;
+    align-items: center;
+    label {
+      width: 80px;
+    }
+    margin-bottom: 10px;
+  }
+}
+</style>
diff --git a/packages/configurator/src/components/SvgButton.vue b/packages/configurator/src/components/SvgButton.vue
new file mode 100644
index 0000000000..e46650d35a
--- /dev/null
+++ b/packages/configurator/src/components/SvgButton.vue
@@ -0,0 +1,68 @@
+<template>
+  <span class="svg-button" @click="$emit('click', $event)">
+    <tiny-tooltip effect="dark" :content="tips" :placement="placement">
+      <component :is="name" v-if="isTinyIcon" />
+      <svg-icon v-else :name="name"></svg-icon>
+    </tiny-tooltip>
+  </span>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { Tooltip } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTooltip: Tooltip
+  },
+  props: {
+    tips: {
+      type: String,
+      default: ''
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    name: {
+      type: String,
+      default: 'add'
+    }
+  },
+  emits: ['click'],
+  setup(props) {
+    const isTinyIcon = computed(() => props.name.toLowerCase().indexOf('icon') === 0)
+
+    return {
+      isTinyIcon
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.svg-button {
+  width: 24px;
+  height: 24px;
+  font-size: 16px;
+  color: var(--ti-lowcode-component-svg-button-color);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: var(--ti-lowcode-component-svg-button-hover-color);
+    background-color: var(--ti-lowcode-component-svg-button-hover-bg-color);
+  }
+  &.active {
+    color: var(--ti-lowcode-component-svg-button-active-color);
+    background-color: var(--ti-lowcode-component-svg-button-active-bg-color);
+  }
+
+  & + .svg-button {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/packages/configurator/src/components/VueMonaco.vue b/packages/configurator/src/components/VueMonaco.vue
new file mode 100644
index 0000000000..d102449425
--- /dev/null
+++ b/packages/configurator/src/components/VueMonaco.vue
@@ -0,0 +1,196 @@
+<template>
+  <div ref="monacoRef"></div>
+</template>
+<script>
+import * as monacoEditor from 'monaco-editor'
+import { watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
+
+export default {
+  name: 'MonacoEditor',
+  model: {
+    event: 'change'
+  },
+  props: {
+    original: {
+      type: String
+    },
+    value: {
+      type: String,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'vs'
+    },
+    language: {
+      type: String
+    },
+    options: {
+      type: Object
+    },
+    amdRequire: {
+      type: Function
+    },
+    diffEditor: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['change', 'editorWillMount', 'editorDidMount'],
+  setup(props, { emit }) {
+    const vueMonaco = {
+      editor: null,
+      monaco: null
+    }
+    const monacoRef = ref(null)
+
+    const focus = () => vueMonaco.editor && vueMonaco.editor.focus()
+
+    const getMonaco = () => vueMonaco.monaco
+
+    const getEditor = () => vueMonaco.editor
+
+    const getModifiedEditor = () => (props.diffEditor ? vueMonaco.editor.getModifiedEditor() : vueMonaco.editor)
+
+    const getOriginalEditor = () => (props.diffEditor ? vueMonaco.editor.getOriginalEditor() : vueMonaco.editor)
+
+    const getModelMarkers = () => vueMonaco.monaco.editor.getModelMarkers()
+
+    const initMonaco = (monaco) => {
+      emit('editorWillMount', vueMonaco.monaco)
+
+      const options = { value: props.value, theme: props.theme, language: props.language, ...props.options }
+
+      if (props.diffEditor) {
+        vueMonaco.editor = monaco.editor.createDiffEditor(monacoRef.value, options)
+        const originalModel = monaco.editor.createModel(props.original, props.language)
+        const modifiedModel = monaco.editor.createModel(props.value, props.language)
+
+        vueMonaco.editor.setModel({
+          original: originalModel,
+          modified: modifiedModel
+        })
+      } else {
+        vueMonaco.editor = monaco.editor.create(monacoRef.value, options)
+      }
+
+      const editor2 = getModifiedEditor()
+
+      editor2.onDidChangeModelContent((event) => {
+        const value = editor2.getValue()
+
+        if (props.value !== value) {
+          emit('change', value, event)
+        }
+      })
+
+      emit('editorDidMount', vueMonaco.editor)
+    }
+
+    onMounted(() => {
+      if (props.amdRequire) {
+        props.amdRequire(['vs/editor/editor.main'], () => {
+          vueMonaco.monaco = window.monaco
+          nextTick(() => {
+            initMonaco(window.monaco)
+          })
+        })
+      } else {
+        vueMonaco.monaco = monacoEditor
+        nextTick(() => {
+          initMonaco(vueMonaco.monaco)
+          vueMonaco.editor.addAction({
+            id: 'prettier',
+            label: 'Prettier',
+            precondition: null,
+            contextMenuGroupId: 'navigation',
+            run(editor) {
+              const currentValue = editor.getValue()
+              const newValue = formatString(currentValue, props.options.language)
+
+              if (newValue !== currentValue) {
+                editor.setValue(newValue)
+              }
+            }
+          })
+        })
+      }
+    })
+
+    onBeforeUnmount(() => {
+      vueMonaco.editor && vueMonaco.editor.dispose()
+    })
+
+    watch(
+      () => props.options,
+      (options) => {
+        if (vueMonaco.editor) {
+          const editor2 = getModifiedEditor()
+
+          editor2.updateOptions(options)
+        }
+      },
+      {
+        deep: true
+      }
+    )
+
+    watch(
+      () => props.value,
+      (newValue) => {
+        if (vueMonaco.editor) {
+          const editor = getModifiedEditor()
+
+          if (newValue !== editor.getValue()) {
+            editor.setValue(newValue)
+          }
+        }
+      }
+    )
+
+    watch(
+      () => props.original,
+      (newValue) => {
+        if (vueMonaco.editor && props.diffEditor) {
+          const editor = getOriginalEditor()
+
+          if (newValue !== editor.getValue()) {
+            editor.setValue(newValue)
+          }
+        }
+      }
+    )
+
+    watch(
+      () => props.language,
+      (newVal) => {
+        if (vueMonaco.editor) {
+          const editor = getModifiedEditor()
+          vueMonaco.monaco.editor.setModelLanguage(editor.getModel(), newVal)
+        }
+      }
+    )
+
+    watch(
+      () => props.theme,
+      (newVal) => {
+        if (vueMonaco.editor) {
+          vueMonaco.monaco.editor.setTheme(newVal)
+        }
+      }
+    )
+
+    return {
+      getMonaco,
+      getEditor,
+      getModifiedEditor,
+      getOriginalEditor,
+      initMonaco,
+      focus,
+      monacoRef,
+      getModelMarkers
+    }
+  }
+}
+</script>
diff --git a/packages/configurator/src/components/index.js b/packages/configurator/src/components/index.js
new file mode 100644
index 0000000000..2b0dbafb93
--- /dev/null
+++ b/packages/configurator/src/components/index.js
@@ -0,0 +1,4 @@
+// TODO components 文件夹下的组件是从 @opentiny/tiny-engine-common 复制过来的临时文件，防止循环依赖
+export { default as BindI18n } from './BindI18n.vue'
+export { default as SvgButton } from './SvgButton.vue'
+export { default as VueMonaco } from './VueMonaco.vue'
diff --git a/packages/common/component/MetaBindI18n.vue b/packages/configurator/src/i18n-configurator/I18nConfigurator.vue
similarity index 92%
rename from packages/common/component/MetaBindI18n.vue
rename to packages/configurator/src/i18n-configurator/I18nConfigurator.vue
index dfe037717d..82b602504e 100644
--- a/packages/common/component/MetaBindI18n.vue
+++ b/packages/configurator/src/i18n-configurator/I18nConfigurator.vue
@@ -34,11 +34,11 @@
 </template>
 
 <script>
-import { ref, watchEffect, computed } from 'vue'
-import { Input, Popover } from '@opentiny/vue'
-import { IconLanguage, IconClose } from '@opentiny/vue-icon'
-import BindI18n from './BindI18n.vue'
+import { BindI18n } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
 import { useTranslate } from '@opentiny/tiny-engine-controller'
+import { Input, Popover } from '@opentiny/vue'
+import { IconClose, IconLanguage } from '@opentiny/vue-icon'
+import { computed, ref, watchEffect } from 'vue'
 
 export default {
   components: {
diff --git a/packages/configurator/src/index.js b/packages/configurator/src/index.js
index 112035ff84..a8e2cbef1a 100644
--- a/packages/configurator/src/index.js
+++ b/packages/configurator/src/index.js
@@ -2,10 +2,15 @@ export { default as ButtonGroupConfigurator } from './button-group-configurator/
 export { default as CascaderConfigurator } from './cascader-configurator/CascaderConfigurator.vue'
 export { default as CheckBoxConfigurator } from './checkbox-configurator/CheckBoxConfigurator.vue'
 export { default as CheckboxGroupConfigurator } from './checkbox-group-configurator/CheckboxGroupConfigurator.vue'
+export { default as CodeConfigurator } from './code-configurator/CodeConfigurator.vue'
+export { default as CodeListConfigurator } from './code-list-configurator/CodeListConfigurator.vue'
+export { default as CollectionConfigurator } from './collection-configurator/CollectionConfigurator.vue'
+export { default as ColorConfigurator } from './color-configurator/ColorConfigurator.vue'
 export { default as DatePickerConfigurator } from './date-picker-configurator/DatePickerConfigurator.vue'
 export { default as FormConfigurator } from './form-configurator/FormConfigurator.vue'
 export { default as HtmlAttributesConfigurator } from './html-attributes-configurator/HtmlAttributesConfigurator.vue'
 export { default as HtmlTextConfigurator } from './html-text-configurator/HtmlTextConfigurator.vue'
+export { default as I18nConfigurator } from './i18n-configurator/I18nConfigurator.vue'
 export { default as InputConfigurator } from './input-configurator/InputConfigurator.vue'
 export { default as IpSectionConfigurator } from './ip-section-configurator/IpSectionConfigurator.vue'
 export { default as JsSlotConfigurator } from './js-slot-configurator/JsSlotConfigurator.vue'
@@ -17,3 +22,4 @@ export { default as SelectIconConfigurator } from './select-icon-configurator/Se
 export { default as SliderConfigurator } from './slider-configurator/SliderConfigurator.vue'
 export { default as SlotConfigurator } from './slot-configurator/SlotConfigurator.vue'
 export { default as SwitchConfigurator } from './switch-configurator/SwitchConfigurator.vue'
+export { default as VariableConfigurator } from './variable-configurator/VariableConfigurator.vue'
diff --git a/packages/common/component/MetaBindVariable.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
similarity index 97%
rename from packages/common/component/MetaBindVariable.vue
rename to packages/configurator/src/variable-configurator/VariableConfigurator.vue
index 14e93bba4d..a0d6b6070d 100644
--- a/packages/common/component/MetaBindVariable.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -120,18 +120,16 @@
 </template>
 
 <script>
-import { reactive, ref, computed, nextTick, watch } from 'vue'
-import { camelize, capitalize } from '@vue/shared'
-import { Button, DialogBox, Search, Switch, Input, Tooltip, Alert } from '@opentiny/vue'
-import { useHttp } from '@opentiny/tiny-engine-http'
-import { useCanvas, useResource, useLayout, useApp, useProperties, useData } from '@opentiny/tiny-engine-controller'
+import { VueMonaco as MonacoEditor, SvgButton } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
+import { useApp, useCanvas, useData, useLayout, useProperties, useResource } from '@opentiny/tiny-engine-controller'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import { constants } from '@opentiny/tiny-engine-utils'
-import SvgButton from './SvgButton.vue'
-import { parse, traverse, generate } from '@opentiny/tiny-engine-controller/js/ast'
+import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-controller/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-controller/js/constants'
-import MonacoEditor from './VueMonaco.vue'
-import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
+import { useHttp } from '@opentiny/tiny-engine-http'
+import { constants } from '@opentiny/tiny-engine-utils'
+import { Alert, Button, DialogBox, Input, Search, Switch, Tooltip } from '@opentiny/vue'
+import { camelize, capitalize } from '@vue/shared'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
 
 const { EXPRESSION_TYPE } = constants
 
@@ -166,7 +164,7 @@ const getJsSlotParams = () => {
 }
 
 export default {
-  name: 'MetaBindVariable',
+  name: 'VariableConfigurator',
   components: {
     MonacoEditor,
     TinyDialogBox: DialogBox,
diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js
index 516e87ef5d..97f636b4cd 100644
--- a/packages/design-core/src/init.js
+++ b/packages/design-core/src/init.js
@@ -57,7 +57,7 @@ const defaultLifeCycles = {
   }
 }
 
-export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, configurators = [] } = {}) => {
+export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, configurators = {} } = {}) => {
   const { beforeAppCreate, appCreated, appMounted } = lifeCycles
 
   registerConfigurators(configurators)
diff --git a/packages/engine-cli/template/designer/public/mock/bundle.json b/packages/engine-cli/template/designer/public/mock/bundle.json
index da15069b43..e082730a0f 100644
--- a/packages/engine-cli/template/designer/public/mock/bundle.json
+++ b/packages/engine-cli/template/designer/public/mock/bundle.json
@@ -158,7 +158,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -680,7 +680,7 @@
                     "labelPosition": "top",
                     "type": "object",
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -703,7 +703,7 @@
                     "labelPosition": "top",
                     "type": "object",
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -1221,7 +1221,7 @@
                     "labelPosition": "top",
                     "type": "object",
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -1487,7 +1487,7 @@
                     "labelPosition": "top",
                     "type": "array",
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -1559,7 +1559,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {}
                             }
                           },
@@ -1722,7 +1722,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {}
                             }
                           },
@@ -1741,7 +1741,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "language": "json"
                               }
@@ -1762,7 +1762,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "language": "json"
                               }
@@ -1804,7 +1804,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "dataType": "JSFunction"
                               }
@@ -1956,7 +1956,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {}
                             }
                           },
@@ -1996,7 +1996,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "language": "json"
                               }
@@ -2057,7 +2057,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {}
                             }
                           },
@@ -2077,7 +2077,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "language": "json"
                               }
@@ -2352,7 +2352,7 @@
                     "cols": 12,
                     "labelPosition": "top",
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "device": []
@@ -4635,7 +4635,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -5082,7 +5082,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5102,7 +5102,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -5716,7 +5716,7 @@
                     "readOnly": false,
                     "disabled": false,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6053,7 +6053,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6117,7 +6117,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -6806,7 +6806,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -8095,7 +8095,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -8955,7 +8955,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -9413,7 +9413,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -9450,7 +9450,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaBindI18n",
+                              "component": "I18nConfigurator",
                               "props": {}
                             }
                           },
@@ -9559,7 +9559,7 @@
                               }
                             },
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "dataType": "JSFunction"
                               }
@@ -9634,7 +9634,7 @@
                             "disabled": false,
                             "cols": 12,
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "language": "json"
                               }
@@ -9656,7 +9656,7 @@
                             "disabled": false,
                             "cols": 12,
                             "widget": {
-                              "component": "MetaCodeEditor",
+                              "component": "CodeConfigurator",
                               "props": {
                                 "language": "json"
                               }
@@ -9733,7 +9733,7 @@
                     "onChange": "this.delProp('data')",
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "name": "fetchData",
                         "dataType": "JSExpression"
@@ -9760,7 +9760,7 @@
                       }
                     },
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "name": "pager",
                         "dataType": "JSExpression"
@@ -9824,7 +9824,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "dataType": "JSExpression"
                       }
@@ -9846,7 +9846,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9866,7 +9866,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -9885,7 +9885,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10041,7 +10041,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10081,7 +10081,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10375,7 +10375,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10679,7 +10679,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10699,7 +10699,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10719,7 +10719,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -10968,7 +10968,7 @@
                     ],
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11049,7 +11049,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11069,7 +11069,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11117,7 +11117,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -11366,7 +11366,7 @@
                     ],
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {
                         "language": "json"
                       }
@@ -12008,7 +12008,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaCodeEditor",
+                      "component": "CodeConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12193,7 +12193,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12251,7 +12251,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12608,7 +12608,7 @@
                     "readOnly": false,
                     "disabled": false,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
@@ -12628,7 +12628,7 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaBindI18n",
+                      "component": "I18nConfigurator",
                       "props": {}
                     },
                     "description": {
diff --git a/packages/engine-cli/template/designer/src/configurators/index.js b/packages/engine-cli/template/designer/src/configurators/index.js
index 3f76596d75..59f2b8bbf2 100644
--- a/packages/engine-cli/template/designer/src/configurators/index.js
+++ b/packages/engine-cli/template/designer/src/configurators/index.js
@@ -1,11 +1,7 @@
-import { InputConfigurator, SelectConfigurator } from '@opentiny/tiny-engine-configurator'
+import * as allConfigurator from '@opentiny/tiny-engine-configurator'
 import MyInputConfigurator from './MyInputConfigurator.vue'
 
-export const configurators = [
-  {
-    name: 'MyInputConfigurator',
-    component: MyInputConfigurator
-  },
-  InputConfigurator,
-  SelectConfigurator
-]
+export const configurators = {
+  ...allConfigurator,
+  MyInputConfigurator
+}
diff --git a/packages/plugins/block/package.json b/packages/plugins/block/package.json
index 8c40d136f1..9fd32c91e2 100644
--- a/packages/plugins/block/package.json
+++ b/packages/plugins/block/package.json
@@ -24,6 +24,7 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
+    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
diff --git a/packages/plugins/block/src/BlockPropertyForm.vue b/packages/plugins/block/src/BlockPropertyForm.vue
index c688ac6e60..8556474635 100644
--- a/packages/plugins/block/src/BlockPropertyForm.vue
+++ b/packages/plugins/block/src/BlockPropertyForm.vue
@@ -22,7 +22,7 @@
         </div>
       </tiny-form-item>
       <tiny-form-item label="属性面板组件属性">
-        <meta-code-editor
+        <code-configurator
           :modelValue="widgetProps"
           title="属性面板组件属性"
           button-text="设置"
@@ -30,7 +30,7 @@
           :tips="componentPropsTips"
           @save="handleSaveWidgetProps"
         >
-        </meta-code-editor>
+        </code-configurator>
       </tiny-form-item>
       <tiny-form-item v-if="showArrayItemConfig" label="配置项">
         <meta-list-items class="config-list" :optionsList="arrayConfig">
@@ -86,24 +86,24 @@
         <tiny-input v-model="label"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="获取属性值">
-        <meta-code-editor
+        <code-configurator
           :modelValue="getterValue"
           title="获取属性值"
           button-text="getter"
           language="javascript"
           single
           @save="(...args) => saveAccessor('getter', ...args)"
-        ></meta-code-editor>
+        ></code-configurator>
       </tiny-form-item>
       <tiny-form-item label="设置属性值">
-        <meta-code-editor
+        <code-configurator
           :modelValue="setterValue"
           title="设置属性值"
           button-text="setter"
           language="javascript"
           single
           @save="(...args) => saveAccessor('setter', ...args)"
-        ></meta-code-editor>
+        ></code-configurator>
       </tiny-form-item>
       <div v-if="property.linked" class="linked-info">
         链接到组件: {{ property.linked.componentName }} 属性: {{ property.linked.property }}
@@ -122,7 +122,8 @@ import {
   Tooltip as TinyTooltip
 } from '@opentiny/vue'
 import { iconChevronLeft, iconPlusCircle } from '@opentiny/vue-icon'
-import { ConfigItem, MetaCodeEditor, MetaListItems } from '@opentiny/tiny-engine-common'
+import { ConfigItem, MetaListItems } from '@opentiny/tiny-engine-common'
+import { CodeConfigurator } from '@opentiny/tiny-engine-configurator'
 import { getEditProperty, DEFAULT_ARRAY_CONFIG, META_COMPONENTS_ENUM } from './js/blockSetting'
 import {
   itemConfig,
@@ -154,7 +155,7 @@ export default {
     TinySelect,
     TinyFormItem,
     ConfigItem,
-    MetaCodeEditor,
+    CodeConfigurator,
     IconChevronLeft: iconChevronLeft(),
     IconPlusCircle: iconPlusCircle(),
     MetaListItems,
diff --git a/packages/plugins/datasource/package.json b/packages/plugins/datasource/package.json
index 1aa5abc734..874ca80888 100644
--- a/packages/plugins/datasource/package.json
+++ b/packages/plugins/datasource/package.json
@@ -24,6 +24,7 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
+    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
diff --git a/packages/plugins/datasource/src/DataSourceFieldForm.vue b/packages/plugins/datasource/src/DataSourceFieldForm.vue
index 9768b47ece..c2370d95ad 100644
--- a/packages/plugins/datasource/src/DataSourceFieldForm.vue
+++ b/packages/plugins/datasource/src/DataSourceFieldForm.vue
@@ -21,7 +21,7 @@
     <div v-if="editable" class="field-content">
       <tiny-form ref="form" label-position="left" :rules="rules" :model="state.field" validate-type="text">
         <tiny-form-item class="title-content" prop="title" label="字段名称" label-width="150px">
-          <meta-bind-i18n v-model="state.field.title"></meta-bind-i18n>
+          <i18n-configurator v-model="state.field.title"></i18n-configurator>
         </tiny-form-item>
         <tiny-form-item class="name-content" prop="name" label="字段唯一标识" label-width="150px">
           <tiny-input class="filedName" v-model="state.field.name"></tiny-input>
@@ -36,7 +36,8 @@
 <script>
 import { reactive, watchEffect, ref, provide } from 'vue'
 import { Button, Input, FormItem, Form } from '@opentiny/vue'
-import { ButtonGroup, MetaBindI18n, SvgButton } from '@opentiny/tiny-engine-common'
+import { ButtonGroup, SvgButton } from '@opentiny/tiny-engine-common'
+import { I18nConfigurator } from '@opentiny/tiny-engine-configurator'
 import { iconArrowDown } from '@opentiny/vue-icon'
 import DataSourceFieldCheck from './DataSourceFieldCheck.vue'
 
@@ -51,7 +52,7 @@ export default {
     TinyForm: Form,
     TinyFormItem: FormItem,
     iconArrowDown: iconArrowDown(),
-    MetaBindI18n,
+    I18nConfigurator,
     DataSourceFieldCheck
   },
   props: {
diff --git a/packages/plugins/page/package.json b/packages/plugins/page/package.json
index 3105a2de2b..67c704a68d 100644
--- a/packages/plugins/page/package.json
+++ b/packages/plugins/page/package.json
@@ -24,6 +24,7 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
+    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/tiny-engine-entry": "workspace:*",
diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue
index ae3855b1bf..b63628b8aa 100644
--- a/packages/plugins/page/src/PageInputOutput.vue
+++ b/packages/plugins/page/src/PageInputOutput.vue
@@ -8,7 +8,7 @@
     ></tiny-alert>
     <tiny-form label-position="left" class="input-output-form">
       <tiny-form-item label="输入配置" class="item-wrap">
-        <meta-code-editor
+        <code-configurator
           :modelValue="inputValue"
           title="输入配置"
           button-text="输入配置"
@@ -16,10 +16,10 @@
           :buttonShowContent="hasContent(inputValue)"
           single
           @save="saveInputValue"
-        ></meta-code-editor>
+        ></code-configurator>
       </tiny-form-item>
       <tiny-form-item label="输出配置" class="item-wrap">
-        <meta-code-editor
+        <code-configurator
           :modelValue="outputValue"
           title="输出配置"
           button-text="输出配置"
@@ -27,7 +27,7 @@
           :buttonShowContent="hasContent(outputValue)"
           single
           @save="saveOutputValue"
-        ></meta-code-editor>
+        ></code-configurator>
       </tiny-form-item>
       <tiny-form-item label="根元素设置" class="page-root-form-item">
         <tiny-switch v-model="pageSettingState.currentPageData.isBody"></tiny-switch>
@@ -40,12 +40,12 @@
 <script>
 import { ref, watchEffect, computed } from 'vue'
 import { Form, FormItem, Switch, Alert } from '@opentiny/vue'
-import { MetaCodeEditor } from '@opentiny/tiny-engine-common'
+import { CodeConfigurator } from '@opentiny/tiny-engine-configurator'
 import { usePage, useNotify } from '@opentiny/tiny-engine-controller'
 
 export default {
   components: {
-    MetaCodeEditor,
+    CodeConfigurator,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinySwitch: Switch,
diff --git a/packages/settings/design/src/components/ArrayConfigItemForm.vue b/packages/settings/design/src/components/ArrayConfigItemForm.vue
index 396a8a1fe8..6cd22dc486 100644
--- a/packages/settings/design/src/components/ArrayConfigItemForm.vue
+++ b/packages/settings/design/src/components/ArrayConfigItemForm.vue
@@ -23,7 +23,7 @@
         ></tiny-select>
       </tiny-form-item>
       <tiny-form-item label="属性面板组件属性">
-        <meta-code-editor
+        <code-configurator
           :modelValue="props"
           single
           class="props-editor"
@@ -31,7 +31,7 @@
           button-text="属性面板组件属性"
           language="json"
           @save="handleSaveProps"
-        ></meta-code-editor>
+        ></code-configurator>
       </tiny-form-item>
       <tiny-form-item label="缺省值">
         <component
@@ -52,8 +52,8 @@
 <script>
 import { computed } from 'vue'
 import { Input as TinyInput, Form as TinyForm, FormItem as TinyFormItem, Select as TinySelect } from '@opentiny/vue'
-import { ConfigItem, MetaCodeEditor, MetaNumber } from '@opentiny/tiny-engine-common'
-import { SwitchConfigurator, InputConfigurator } from '@opentiny/tiny-engine-configurator'
+import { ConfigItem, MetaNumber } from '@opentiny/tiny-engine-common'
+import { CodeConfigurator, SwitchConfigurator, InputConfigurator } from '@opentiny/tiny-engine-configurator'
 import { useNotify } from '@opentiny/tiny-engine-controller'
 import { iconChevronLeft } from '@opentiny/vue-icon'
 import store, { META_TYPES_ENUM, META_TYPES_OPTIONS } from '../store'
@@ -68,7 +68,7 @@ export default {
     TinySelect,
     TinyFormItem,
     ConfigItem,
-    MetaCodeEditor,
+    CodeConfigurator,
     IconChevronLeft: iconChevronLeft()
   },
   setup() {
@@ -146,7 +146,7 @@ export default {
     const component = computed(() => {
       const type = store.currentSubConfig.type
       if (['array', 'object', 'function'].includes(type)) {
-        return MetaCodeEditor
+        return CodeConfigurator
       }
 
       if (type === 'number') {
diff --git a/packages/settings/events/package.json b/packages/settings/events/package.json
index bc387af864..600fad9013 100644
--- a/packages/settings/events/package.json
+++ b/packages/settings/events/package.json
@@ -24,6 +24,7 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
+    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-entry": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index ad79dce33c..fc55d2e658 100644
--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -8,24 +8,32 @@
         <div v-else class="binding-state text-ellipsis-multiple" :title="condition.value">
           已绑定：{{ condition.value }}
         </div>
-        <meta-bind-variable v-model="condition" name="advance" @update:modelValue="setConfig"></meta-bind-variable>
+        <variable-configurator
+          v-model="condition"
+          name="advance"
+          @update:modelValue="setConfig"
+        ></variable-configurator>
       </div>
     </div>
 
     <div class="advnce-config">
       <label class="text-ellipsis-multiple">循环数据</label>
       <div class="advanced-config-form-item">
-        <meta-code-editor
+        <code-configurator
           v-if="!state.isLoop"
           v-model="state.loopData"
           data-type="JSExpression"
           @update:modelValue="setLoop"
           @open="openEditor"
-        ></meta-code-editor>
+        ></code-configurator>
         <div v-else class="binding-state text-ellipsis-multiple" :title="state.loopData?.value">
           已绑定：{{ state.loopData?.value }}
         </div>
-        <meta-bind-variable v-model="state.loopData" name="advance" @update:modelValue="setLoop"></meta-bind-variable>
+        <variable-configurator
+          v-model="state.loopData"
+          name="advance"
+          @update:modelValue="setLoop"
+        ></variable-configurator>
       </div>
     </div>
     <div class="advnce-config">
@@ -65,8 +73,8 @@
 
 <script>
 import { ref, computed, reactive, watch } from 'vue'
-import { MetaBindVariable, MetaInput, MetaCodeEditor } from '@opentiny/tiny-engine-common'
-import { SwitchConfigurator } from '@opentiny/tiny-engine-configurator'
+import { MetaInput } from '@opentiny/tiny-engine-common'
+import { CodeConfigurator, SwitchConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import { useProperties, useCanvas } from '@opentiny/tiny-engine-controller'
 import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
 import { string2Obj } from '@opentiny/tiny-engine-controller/adapter'
@@ -79,9 +87,9 @@ export default {
   components: {
     SwitchConfigurator,
     TinyTooltip: Tooltip,
-    MetaBindVariable,
+    VariableConfigurator,
     MetaInput,
-    MetaCodeEditor
+    CodeConfigurator
   },
   inheritAttrs: false,
   setup() {
diff --git a/packages/settings/styles/package.json b/packages/settings/styles/package.json
index 50ce384a9d..cfd2ccf581 100644
--- a/packages/settings/styles/package.json
+++ b/packages/settings/styles/package.json
@@ -24,6 +24,7 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
+    "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 7fa8e8c57f..1fc622455b 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -3,7 +3,7 @@
     <div class="line-style">
       <span class="line-text"> 行内样式 </span>
       <div class="inline-style">
-        <meta-code-editor
+        <code-configurator
           v-if="state.lineStyleDisable"
           :buttonShowContent="true"
           :modelValue="state.styleContent"
@@ -16,13 +16,13 @@
         <div v-if="!state.lineStyleDisable">
           <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
         </div>
-        <meta-bind-variable
+        <variable-configurator
           ref="bindVariable"
           :model-value="state.bindModelValue"
           name="advance"
           @update:modelValue="setConfig"
         >
-        </meta-bind-variable>
+        </variable-configurator>
       </div>
     </div>
   </div>
@@ -68,7 +68,7 @@
 import { ref, watch } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
-import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
+import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import {
   SizeGroup,
@@ -89,7 +89,7 @@ import { styleStrRemoveRoot } from './js/cssConvert'
 
 export default {
   components: {
-    MetaCodeEditor,
+    CodeConfigurator,
     SizeGroup,
     LayoutGroup,
     FlexBox,
@@ -104,7 +104,7 @@ export default {
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
     TinyInput: Input,
-    MetaBindVariable
+    VariableConfigurator
   },
   setup() {
     const activeNames = ref([
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 0af32bb8d9..83ae9b68a9 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -52,7 +52,7 @@
         @click="openSetting(BACKGROUND_PROPERTY.BackgroundColor, $event)"
         >颜色</label
       >
-      <meta-color :modelValue="getProperty(BACKGROUND_PROPERTY.BackgroundColor).value" @change="changeColor" />
+      <color-configurator :modelValue="getProperty(BACKGROUND_PROPERTY.BackgroundColor).value" @change="changeColor" />
     </div>
     <div class="background-clip">
       <label
@@ -61,11 +61,11 @@
         >裁剪</label
       >
       <div class="position-select">
-        <meta-select
+        <select-configurator
           :modelValue="state.selectValue"
           :options="selectOptions"
           @update:modelValue="selectBackgroundClip"
-        ></meta-select>
+        ></select-configurator>
       </div>
     </div>
   </div>
@@ -83,7 +83,7 @@
 <script>
 import { reactive, watch } from 'vue'
 import { Tooltip } from '@opentiny/vue'
-import { MetaColor, MetaSelect } from '@opentiny/tiny-engine-common'
+import { ColorConfigurator, SelectConfigurator } from '@opentiny/tiny-engine-configurator'
 import { useCanvas } from '@opentiny/tiny-engine-controller'
 import { iconPlus } from '@opentiny/vue-icon'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
@@ -97,10 +97,10 @@ const PAGE_ROOT_ID = 'page-root-id'
 
 export default {
   components: {
-    MetaColor,
+    ColorConfigurator,
     ModalMask,
     ResetButton,
-    MetaSelect,
+    SelectConfigurator,
     BackgroundImageSetting,
     TinyTooltip: Tooltip,
     IconPlus: iconPlus()
diff --git a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
index 587210f0f5..1d55397c15 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue
@@ -18,7 +18,7 @@
     </div>
     <div class="color">
       <label for="">Color</label>
-      <meta-color :modelValue="state.colorValue" @change="colorChange" />
+      <color-configurator :modelValue="state.colorValue" @change="colorChange" />
       <tiny-input v-model="state.value" class="color-input" @change="percentChange">
         <template #suffix>
           <span>%</span>
@@ -31,13 +31,13 @@
 <script>
 import { computed, reactive, watchEffect } from 'vue'
 import { Input, Checkbox } from '@opentiny/vue'
-import { MetaColor } from '@opentiny/tiny-engine-common'
+import { ColorConfigurator } from '@opentiny/tiny-engine-configurator'
 
 export default {
   components: {
     TinyInput: Input,
     TinyCheckbox: Checkbox,
-    MetaColor
+    ColorConfigurator
   },
   props: {
     modelValue: {
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index 1b54dd3b4e..015440aadd 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -38,7 +38,7 @@
 <script>
 import { reactive, onMounted } from 'vue'
 import { Tooltip, Checkbox } from '@opentiny/vue'
-import { MetaColor } from '@opentiny/tiny-engine-common'
+import { ColorConfigurator } from '@opentiny/tiny-engine-configurator'
 import InputSelect from '../inputs/InputSelect.vue'
 import PositionOrigin from './PositionOrigin.vue'
 import ImageSetting from './ImageSetting.vue'
@@ -53,7 +53,7 @@ export default {
     TinyTooltip: Tooltip,
     TinyCheckbox: Checkbox,
     InputSelect,
-    MetaColor,
+    ColorConfigurator,
     PositionOrigin,
     ImageSetting,
     LinearGradient,
diff --git a/packages/settings/styles/src/components/background/ColorOverlay.vue b/packages/settings/styles/src/components/background/ColorOverlay.vue
index 7096099e99..5744300238 100644
--- a/packages/settings/styles/src/components/background/ColorOverlay.vue
+++ b/packages/settings/styles/src/components/background/ColorOverlay.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="background-row">
     <label class="row-label">Color</label>
-    <meta-color :modelValue="modelValue" @change="changeColor" />
+    <color-configurator :modelValue="modelValue" @change="changeColor" />
   </div>
 </template>
 
 <script setup>
 import { ref, defineProps, defineEmits, onMounted } from 'vue'
-import { MetaColor } from '@opentiny/tiny-engine-common'
+import { ColorConfigurator } from '@opentiny/tiny-engine-configurator'
 import { BACKGROUND_PROPERTY } from '../../js/styleProperty'
 
 const props = defineProps({
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 298ddc78fb..1e614164c0 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -26,14 +26,14 @@
       </tiny-tooltip>
 
       <div v-show="isRaduisSelected(RADIUS_SETTING.Single)" class="radius-content-input">
-        <meta-slider
+        <slider-configurator
           :modelValue="borderRadius.BorderRadius"
           class="adjust-vertical"
           :controls="false"
           :showUnit="true"
           :selectedUnit="'px'"
           @update:modelValue="updateRadiusSingle"
-        ></meta-slider>
+        ></slider-configurator>
       </div>
 
       <div v-show="isRaduisSelected(RADIUS_SETTING.Multiple)" class="radius-multiple">
@@ -154,7 +154,7 @@
           >
         </div>
         <div class="border-content">
-          <color-select :modelValue="borderColorValue" @change="changeBorderColor"></color-select>
+          <color-configurator :modelValue="borderColorValue" @change="changeBorderColor"></color-configurator>
         </div>
       </div>
       <div class="border-row">
@@ -230,7 +230,7 @@ import { Tooltip } from '@opentiny/vue'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import NumericSelect from '../inputs/NumericSelect.vue'
 import ResetButton from '../inputs/ResetButton.vue'
-import { MetaColor, MetaSlider } from '@opentiny/tiny-engine-common'
+import { ColorConfigurator, SliderConfigurator } from '@opentiny/tiny-engine-configurator'
 import useEvent from '../../js/useEvent'
 import { useProperties } from '../../js/useStyle'
 import { RADIUS_SETTING, BORDER_SETTING, BORDER_STYLE_TYPE } from '../../js/cssType'
@@ -262,10 +262,10 @@ const BORDER_COLOR = {
 
 export default {
   components: {
-    MetaSlider,
+    SliderConfigurator,
     ModalMask,
     ResetButton,
-    ColorSelect: MetaColor,
+    ColorConfigurator,
     NumericSelect,
     TinyTooltip: Tooltip
   },
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 7c3972b8f3..81ea861847 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -5,7 +5,7 @@
       <link-button :href="docsUrl" class="help-link"></link-button>
     </h6>
     <div class="selector-container">
-      <meta-code-editor
+      <code-configurator
         :modelValue="state.cssContent"
         title="Css 编辑"
         language="css"
@@ -16,7 +16,7 @@
         <div class="edit-global-css" title="编辑全局样式" @click="scope.open">
           <svg-icon name="edit"></svg-icon>
         </div>
-      </meta-code-editor>
+      </code-configurator>
       <div class="selector-right-container">
         <div class="selector-right-container-wrap">
           <div
@@ -105,7 +105,8 @@
 import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-controller'
-import { MetaCodeEditor, LinkButton } from '@opentiny/tiny-engine-common'
+import { LinkButton } from '@opentiny/tiny-engine-common'
+import { CodeConfigurator } from '@opentiny/tiny-engine-configurator'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
 import { stringify, getSelectorArr } from '../../js/parser'
diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
index 95c66a02a4..c5d367eee5 100644
--- a/packages/settings/styles/src/components/effects/EffectGroup.vue
+++ b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -6,13 +6,13 @@
       >透明度</label
     >
     <div>
-      <meta-slider
+      <slider-configurator
         :modelValue="state.opacity"
         :controls="false"
         :showUnit="true"
         :disabled="true"
         @update:modelValue="updateOpacity"
-      ></meta-slider>
+      ></slider-configurator>
     </div>
   </div>
   <div class="effect-group line outline-wrap">
@@ -77,7 +77,7 @@
       </div>
       <div class="outline-color">
         <label>颜色</label>
-        <meta-color :modelValue="state.outlineColor" @change="changeOutlineColor" />
+        <color-configurator :modelValue="state.outlineColor" @change="changeOutlineColor" />
       </div>
     </div>
   </div>
@@ -113,7 +113,7 @@
 <script>
 import { reactive } from 'vue'
 import { Select, Option, OptionGroup, Tooltip } from '@opentiny/vue'
-import { MetaSlider, MetaColor } from '@opentiny/tiny-engine-common'
+import { ColorConfigurator, SliderConfigurator } from '@opentiny/tiny-engine-configurator'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import ResetButton from '../inputs/ResetButton.vue'
 import InputSelect from '../inputs/InputSelect.vue'
@@ -127,8 +127,8 @@ export default {
     TinyOption: Option,
     TinyOptionGroup: OptionGroup,
     TinyTooltip: Tooltip,
-    MetaSlider,
-    MetaColor,
+    SliderConfigurator,
+    ColorConfigurator,
     ModalMask,
     ResetButton,
     InputSelect
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 9f10a39810..071d8dca92 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -22,14 +22,14 @@
           字体
         </div>
         <div class="typography-select">
-          <meta-select
+          <select-configurator
             v-model="state.fontFamilyValue"
             :options="fontFamilyOptions"
             @update:modelValue="selectFontFamily"
             allow-create
             filterable
             default-first-option
-          ></meta-select>
+          ></select-configurator>
         </div>
       </div>
     </div>
@@ -56,14 +56,14 @@
           字重
         </div>
         <div class="typography-select">
-          <meta-select
+          <select-configurator
             v-model="state.value"
             :options="selectOptions"
             @update:modelValue="selectFontWeight"
             allow-create
             filterable
             default-first-option
-          ></meta-select>
+          ></select-configurator>
         </div>
       </div>
     </div>
@@ -74,7 +74,7 @@
         @click="openSetting(TYPO_PROPERTY.Color, $event)"
         >颜色</label
       >
-      <color-select :modelValue="getProperty(TYPO_PROPERTY.Color).value" @change="changeColor" />
+      <color-configurator :modelValue="getProperty(TYPO_PROPERTY.Color).value" @change="changeColor" />
     </div>
     <div class="typography-row">
       <label
@@ -202,8 +202,7 @@
 import { ref, reactive } from 'vue'
 import { Tooltip } from '@opentiny/vue'
 import NumericSelect from '../inputs/NumericSelect.vue'
-import { MetaColor, MetaSelect } from '@opentiny/tiny-engine-common'
-// import TypographyMore from './TypographyMore.vue'
+import { ColorConfigurator, SelectConfigurator } from '@opentiny/tiny-engine-configurator'
 import { TYPO_PROPERTY } from '../../js/styleProperty'
 import useEvent from '../../js/useEvent'
 import { useProperties } from '../../js/useStyle'
@@ -215,10 +214,9 @@ export default {
     NumericSelect,
     ModalMask,
     ResetButton,
-    // TypographyMore,
-    ColorSelect: MetaColor,
+    ColorConfigurator,
     TinyTooltip: Tooltip,
-    MetaSelect
+    SelectConfigurator
   },
   props: {
     style: {