@tmagic/editor 1.3.0-alpha.16 → 1.3.0-alpha.18

package/dist/tmagic-editor.umd.cjs

@@ -26,7 +26,7 @@
   const _hoisted_1$r = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -200,7 +200,7 @@
     }
   });
 
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -208,11 +208,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
       name: {},
       prop: {},
-      lastValues: {},
       disabled: { type: Boolean, default: false },
-      size: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -222,7 +224,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$K, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$L, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -242,7 +244,7 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -250,8 +252,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
       name: {},
-      prop: {}
+      prop: {},
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -316,7 +323,7 @@
     }
   });
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -324,9 +331,13 @@
     props: {
       config: {},
       model: {},
-      prop: {},
+      initValues: {},
+      values: {},
       name: {},
-      size: {}
+      prop: {},
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -384,7 +395,7 @@
     }
   });
 
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -503,6 +514,7 @@
           ref_key: "fomDrawer",
           ref: fomDrawer,
           "label-width": "80px",
+          "close-on-press-escape": false,
           title: _ctx.content.name,
           width: size.value,
           config: functionConfig.value,
@@ -516,7 +528,7 @@
     }
   });
 
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -566,7 +578,7 @@
   });
 
   const _hoisted_1$q = ["src"];
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -668,7 +680,7 @@
 
   const _hoisted_1$p = { class: "m-fields-code-select-col" };
   const _hoisted_2$f = { class: "code-select-container" };
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -676,11 +688,13 @@
     props: {
       config: {},
       model: {},
-      prop: {},
+      initValues: {},
+      values: {},
       name: {},
-      lastValues: {},
+      prop: {},
       disabled: { type: Boolean, default: false },
-      size: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -740,14 +754,14 @@
               model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -755,7 +769,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -770,7 +784,7 @@
 
   const _hoisted_1$o = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -778,10 +792,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
+      name: {},
       prop: {},
-      lastValues: {},
       disabled: { type: Boolean, default: false },
-      name: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -945,6 +962,53 @@
     }
   });
 
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+    __name: "DataSourceFieldSelect",
+    props: {
+      config: {},
+      model: {},
+      initValues: {},
+      values: {},
+      name: {},
+      prop: {},
+      disabled: { type: Boolean, default: false },
+      size: {},
+      lastValues: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const services = vue.inject("services");
+      const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
+      const cascaderConfig = {
+        type: "cascader",
+        name: props.name,
+        options: () => dataSources.value?.filter((ds) => ds.fields?.length)?.map((ds) => ({
+          label: ds.title || ds.id,
+          value: ds.id,
+          children: ds.fields?.map((field) => ({
+            label: field.title,
+            value: field.name
+          }))
+        })) || []
+      };
+      const onChangeHandler = (value) => {
+        emit("change", value);
+      };
+      return (_ctx, _cache) => {
+        const _component_m_form_container = vue.resolveComponent("m-form-container");
+        return vue.openBlock(), vue.createBlock(_component_m_form_container, {
+          config: {
+            ..._ctx.config,
+            ...cascaderConfig
+          },
+          model: _ctx.model,
+          onChange: onChangeHandler
+        }, null, 8, ["config", "model"]);
+      };
+    }
+  });
+
   const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$d = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$5 = { class: "el-input__inner" };
@@ -956,11 +1020,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
       name: {},
       prop: {},
       disabled: { type: Boolean, default: false },
-      lastValues: {},
-      size: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1167,7 +1233,7 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$n, [
@@ -1202,7 +1268,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$E, {
+              vue.createVNode(_sfc_main$F, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -1295,10 +1361,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
+      name: {},
       prop: {},
-      lastValues: {},
       disabled: { type: Boolean, default: false },
-      name: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1368,7 +1437,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -1391,11 +1460,13 @@
     props: {
       config: {},
       model: {},
-      lastValues: {},
-      prop: {},
+      initValues: {},
+      values: {},
       name: {},
+      prop: {},
       disabled: { type: Boolean, default: false },
-      size: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1429,7 +1500,7 @@
         name: props.name,
         labelWidth: "80px",
         options: () => dataSources.value?.filter((ds) => ds.methods?.length)?.map((ds) => ({
-          label: `${ds.title}（${ds.id}）`,
+          label: ds.title || ds.id,
           value: ds.id,
           children: ds.methods?.map((method) => ({
             label: method.name,
@@ -1467,14 +1538,14 @@
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -1483,7 +1554,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -1504,11 +1575,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
       name: {},
       prop: {},
       disabled: { type: Boolean, default: false },
-      lastValues: {},
-      size: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1562,9 +1635,13 @@
     props: {
       config: {},
       model: {},
-      prop: {},
+      initValues: {},
+      values: {},
       name: {},
-      size: {}
+      prop: {},
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1744,26 +1821,30 @@
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
-            size: props.size,
-            model: _ctx.model,
             name: "events",
+            size: _ctx.size,
+            disabled: _ctx.disabled,
+            model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
-              size: "small",
+              size: _ctx.size,
+              disabled: _ctx.disabled,
               onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
             }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode("添加事件")
               ]),
               _: 1
-            }),
+            }, 8, ["size", "disabled"]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model[_ctx.name], (cardItem, index) => {
               return vue.openBlock(), vue.createBlock(_component_m_form_panel, {
                 key: index,
+                disabled: _ctx.disabled,
+                size: _ctx.size,
                 config: actionsConfig.value,
                 model: cardItem,
                 onChange: onChangeHandler
@@ -1773,17 +1854,21 @@
                     class: "fullWidth",
                     config: eventNameConfig.value,
                     model: cardItem,
+                    disabled: _ctx.disabled,
+                    size: _ctx.size,
                     onChange: onChangeHandler
-                  }, null, 8, ["config", "model"]),
+                  }, null, 8, ["config", "model", "disabled", "size"]),
                   vue.createVNode(vue.unref(design.TMagicButton), {
                     style: { "color": "#f56c6c" },
                     text: "",
                     icon: vue.unref(iconsVue.Delete),
+                    disabled: _ctx.disabled,
+                    size: _ctx.size,
                     onClick: ($event) => removeEvent(index)
-                  }, null, 8, ["icon", "onClick"])
+                  }, null, 8, ["icon", "disabled", "size", "onClick"])
                 ]),
                 _: 2
-              }, 1032, ["config", "model"]);
+              }, 1032, ["disabled", "size", "config", "model"]);
             }), 128))
           ]))
         ]);
@@ -1801,11 +1886,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
       name: {},
       prop: {},
       disabled: { type: Boolean, default: false },
-      lastValues: {},
-      size: {}
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1863,16 +1950,18 @@
                 class: "m-fileds-key-value-delete",
                 type: "danger",
                 size: _ctx.size,
+                disabled: _ctx.disabled,
                 circle: "",
                 plain: "",
                 icon: vue.unref(iconsVue.Delete),
                 onClick: ($event) => deleteHandler(index)
-              }, null, 8, ["size", "icon", "onClick"])
+              }, null, 8, ["size", "disabled", "icon", "onClick"])
             ]);
           }), 128)),
           vue.createVNode(vue.unref(design.TMagicButton), {
             type: "primary",
             size: _ctx.size,
+            disabled: _ctx.disabled,
             plain: "",
             icon: vue.unref(iconsVue.Plus),
             onClick: addHandler
@@ -1881,7 +1970,7 @@
               vue.createTextVNode("添加")
             ]),
             _: 1
-          }, 8, ["size", "icon"])
+          }, 8, ["size", "disabled", "icon"])
         ]);
       };
     }
@@ -1900,8 +1989,13 @@
     props: {
       config: {},
       model: {},
+      initValues: {},
+      values: {},
+      name: {},
       prop: {},
-      name: {}
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1966,6 +2060,8 @@
           vue.createVNode(vue.unref(design.TMagicButton), {
             type: "danger",
             icon: vue.unref(iconsVue.Delete),
+            disabled: _ctx.disabled,
+            size: _ctx.size,
             text: "",
             style: { "padding": "0" }
           }, {
@@ -1973,7 +2069,7 @@
               vue.createTextVNode("取消")
             ]),
             _: 1
-          }, 8, ["icon"])
+          }, 8, ["icon", "disabled", "size"])
         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -1985,9 +2081,11 @@
                   style: { "padding": "0" },
                   type: "danger",
                   icon: vue.unref(iconsVue.Close),
+                  disabled: _ctx.disabled,
+                  size: _ctx.size,
                   text: "",
                   onClick: vue.withModifiers(deleteHandler, ["stop"])
-                }, null, 8, ["icon", "onClick"])
+                }, null, 8, ["icon", "disabled", "size", "onClick"])
               ]),
               _: 1
             }),
@@ -1999,6 +2097,8 @@
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   text: "",
                   style: { "padding": "0", "margin": "0" },
+                  disabled: _ctx.disabled,
+                  size: _ctx.size,
                   onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
                   onMouseenter: _cache[1] || (_cache[1] = ($event) => vue.unref(highlight)(val.value)),
                   onMouseleave: unhightlight
@@ -2007,7 +2107,7 @@
                     vue.createTextVNode(vue.toDisplayString(`${toName.value}_${val.value}`), 1)
                   ]),
                   _: 1
-                })
+                }, 8, ["disabled", "size"])
               ]),
               _: 1
             })
@@ -2020,13 +2120,15 @@
               vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
                 style: { "padding": "0", "margin": "0" },
+                disabled: _ctx.disabled,
+                size: _ctx.size,
                 onClick: startSelect
               }, {
                 default: vue.withCtx(() => [
                   vue.createTextVNode("点击此处选择")
                 ]),
                 _: 1
-              })
+              }, 8, ["disabled", "size"])
             ]),
             _: 1
           }))
@@ -2213,246 +2315,631 @@
     }
   });
 
-  const fillConfig$1 = (config = []) => [
+  const BaseFormConfig = [
     {
-      type: "tab",
+      name: "id",
+      type: "hidden"
+    },
+    {
+      name: "type",
+      text: "类型",
+      type: "select",
+      options: [
+        { text: "基础", value: "base" },
+        { text: "HTTP", value: "http" }
+      ],
+      defaultValue: "base"
+    },
+    {
+      name: "title",
+      text: "名称",
+      rules: [
+        {
+          required: true,
+          message: "请输入名称"
+        }
+      ]
+    },
+    {
+      name: "description",
+      text: "描述"
+    }
+  ];
+
+  const HttpFormConfig = [
+    {
+      name: "autoFetch",
+      text: "自动请求",
+      type: "switch",
+      defaultValue: true
+    },
+    {
+      type: "fieldset",
+      name: "options",
+      legend: "HTTP 配置",
       items: [
         {
-          title: "属性",
-          labelWidth: "80px",
-          items: [
-            // 组件类型，必须要有
-            {
-              text: "type",
-              name: "type",
-              type: "hidden"
-            },
-            // 组件id，必须要有
-            {
-              name: "id",
-              type: "display",
-              text: "id"
-            },
-            {
-              name: "name",
-              text: "组件名称"
-            },
-            ...config
-          ]
+          name: "url",
+          text: "URL"
         },
         {
-          title: "样式",
-          labelWidth: "80px",
-          items: [
-            {
-              name: "style",
-              items: [
-                {
-                  type: "fieldset",
-                  legend: "位置",
-                  items: [
-                    {
-                      name: "position",
-                      type: "checkbox",
-                      activeValue: "fixed",
-                      inactiveValue: "absolute",
-                      defaultValue: "absolute",
-                      text: "固定定位"
-                    },
-                    {
-                      name: "left",
-                      text: "left"
-                    },
-                    {
-                      name: "top",
-                      text: "top",
-                      disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
-                    },
-                    {
-                      name: "right",
-                      text: "right"
-                    },
-                    {
-                      name: "bottom",
-                      text: "bottom",
-                      disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
-                    }
-                  ]
-                },
-                {
-                  type: "fieldset",
-                  legend: "盒子",
-                  items: [
-                    {
-                      name: "width",
-                      text: "宽度"
-                    },
-                    {
-                      name: "height",
-                      text: "高度"
-                    }
-                  ]
-                },
-                {
-                  type: "fieldset",
-                  legend: "边框",
-                  items: [
-                    {
-                      name: "borderWidth",
-                      text: "宽度",
-                      defaultValue: "0"
-                    },
-                    {
-                      name: "borderColor",
-                      text: "颜色",
-                      type: "colorPicker"
-                    },
-                    {
-                      name: "borderStyle",
-                      text: "样式",
-                      type: "select",
-                      defaultValue: "none",
-                      options: [
-                        { text: "none", value: "none" },
-                        { text: "hidden", value: "hidden" },
-                        { text: "dotted", value: "dotted" },
-                        { text: "dashed", value: "dashed" },
-                        { text: "solid", value: "solid" },
-                        { text: "double", value: "double" },
-                        { text: "groove", value: "groove" },
-                        { text: "ridge", value: "ridge" },
-                        { text: "inset", value: "inset" },
-                        { text: "outset", value: "outset" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  type: "fieldset",
-                  legend: "背景",
-                  items: [
-                    {
-                      name: "backgroundImage",
-                      text: "背景图"
-                    },
-                    {
-                      name: "backgroundColor",
-                      text: "背景颜色",
-                      type: "colorPicker"
-                    },
-                    {
-                      name: "backgroundRepeat",
-                      text: "背景图重复",
-                      type: "select",
-                      defaultValue: "no-repeat",
-                      options: [
-                        { text: "repeat", value: "repeat" },
-                        { text: "repeat-x", value: "repeat-x" },
-                        { text: "repeat-y", value: "repeat-y" },
-                        { text: "no-repeat", value: "no-repeat" },
-                        { text: "inherit", value: "inherit" }
-                      ]
-                    },
-                    {
-                      name: "backgroundSize",
-                      text: "背景图大小",
-                      defaultValue: "100% 100%"
-                    }
-                  ]
-                },
-                {
-                  type: "fieldset",
-                  legend: "字体",
-                  items: [
-                    {
-                      name: "color",
-                      text: "颜色",
-                      type: "colorPicker"
-                    },
-                    {
-                      name: "fontSize",
-                      text: "大小"
-                    },
-                    {
-                      name: "fontWeight",
-                      text: "粗细"
-                    }
-                  ]
-                },
-                {
-                  type: "fieldset",
-                  legend: "变形",
-                  name: "transform",
-                  items: [
-                    {
-                      name: "rotate",
-                      text: "旋转角度"
-                    },
-                    {
-                      name: "scale",
-                      text: "缩放"
-                    }
-                  ]
-                }
-              ]
-            }
+          name: "method",
+          text: "Method",
+          type: "select",
+          options: [
+            { text: "GET", value: "GET" },
+            { text: "POST", value: "POST" },
+            { text: "PUT", value: "PUT" },
+            { text: "DELETE", value: "DELETE" }
           ]
         },
         {
-          title: "事件",
-          items: [
-            {
-              name: "events",
-              type: "event-select",
-              labelWidth: 0
-            }
-          ]
+          name: "params",
+          type: "key-value",
+          defaultValue: {},
+          text: "参数"
         },
         {
-          title: "高级",
-          lazy: true,
-          items: [
-            {
-              name: "created",
-              text: "created",
-              labelWidth: "100px",
-              type: "code-select"
-            },
-            {
-              name: "mounted",
-              text: "mounted",
-              labelWidth: "100px",
-              type: "code-select"
-            }
-          ]
+          name: "data",
+          type: "key-value",
+          defaultValue: {},
+          text: "请求体"
+        },
+        {
+          name: "headers",
+          type: "key-value",
+          defaultValue: {},
+          text: "请求头"
         }
       ]
     }
   ];
 
-  const log = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.log("magic editor: ", ...args);
-    }
-  };
-  const info = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.info("magic editor: ", ...args);
-    }
-  };
-  const warn = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.warn("magic editor: ", ...args);
-    }
-  };
-  const debug = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.debug("magic editor: ", ...args);
-    }
-  };
-  const error = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.error("magic editor: ", ...args);
+  const fillConfig$1 = (config) => [
+    ...BaseFormConfig,
+    ...config,
+    {
+      type: "panel",
+      title: "数据定义",
+      items: [
+        {
+          name: "fields",
+          type: "data-source-fields",
+          defaultValue: []
+        }
+      ]
+    },
+    {
+      type: "panel",
+      title: "方法定义",
+      items: [
+        {
+          name: "methods",
+          type: "data-source-methods",
+          defaultValue: []
+        }
+      ]
+    }
+  ];
+  const getFormConfig = (type, configs) => {
+    switch (type) {
+      case "base":
+        return fillConfig$1([]);
+      case "http":
+        return fillConfig$1(HttpFormConfig);
+      default:
+        return fillConfig$1(configs[type] || []);
+    }
+  };
+
+  const compose = (middleware) => {
+    if (!Array.isArray(middleware))
+      throw new TypeError("Middleware 必须是一个数组!");
+    for (const fn of middleware) {
+      if (typeof fn !== "function")
+        throw new TypeError("Middleware 必须由函数组成!");
+    }
+    return (args, next) => {
+      let index = -1;
+      return dispatch(0);
+      function dispatch(i) {
+        if (i <= index)
+          return Promise.reject(new Error("next() 被多次调用"));
+        index = i;
+        let fn = middleware[i];
+        if (i === middleware.length && next)
+          fn = next;
+        if (!fn)
+          return Promise.resolve();
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+    };
+  };
+
+  const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+  const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
+  const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+    try {
+      let beforeArgs = args;
+      for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+        beforeArgs = await beforeMethod(...beforeArgs) || [];
+        if (isError(beforeArgs))
+          throw beforeArgs;
+        if (!Array.isArray(beforeArgs)) {
+          beforeArgs = [beforeArgs];
+        }
+      }
+      let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+      for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+        returnValue = await afterMethod(returnValue, ...beforeArgs);
+        if (isError(returnValue))
+          throw returnValue;
+      }
+      return returnValue;
+    } catch (error) {
+      throw error;
+    }
+  };
+  class BaseService extends events.EventEmitter {
+    pluginOptionsList = {};
+    middleware = {};
+    taskList = [];
+    doingTask = false;
+    constructor(methods = [], serialMethods = []) {
+      super();
+      methods.forEach((propertyName) => {
+        const scope = this;
+        const sourceMethod = scope[propertyName];
+        const beforeMethodName = methodName("before", propertyName);
+        const afterMethodName = methodName("after", propertyName);
+        this.pluginOptionsList[beforeMethodName] = [];
+        this.pluginOptionsList[afterMethodName] = [];
+        this.middleware[propertyName] = [];
+        const fn = compose(this.middleware[propertyName]);
+        Object.defineProperty(scope, propertyName, {
+          value: async (...args) => {
+            if (!serialMethods.includes(propertyName)) {
+              return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+            }
+            const promise = new Promise((resolve, reject) => {
+              this.taskList.push(async () => {
+                try {
+                  const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                  resolve(value);
+                } catch (e) {
+                  reject(e);
+                }
+              });
+            });
+            if (!this.doingTask) {
+              this.doTask();
+            }
+            return promise;
+          }
+        });
+      });
+    }
+    use(options) {
+      Object.entries(options).forEach(([methodName2, method]) => {
+        if (typeof method === "function")
+          this.middleware[methodName2].push(method);
+      });
+    }
+    usePlugin(options) {
+      Object.entries(options).forEach(([methodName2, method]) => {
+        if (typeof method === "function")
+          this.pluginOptionsList[methodName2].push(method);
+      });
+    }
+    removeAllPlugins() {
+      Object.keys(this.pluginOptionsList).forEach((key) => {
+        this.pluginOptionsList[key] = [];
+      });
+      Object.keys(this.middleware).forEach((key) => {
+        this.middleware[key] = [];
+      });
+    }
+    async doTask() {
+      this.doingTask = true;
+      let task = this.taskList.shift();
+      while (task) {
+        await task();
+        task = this.taskList.shift();
+      }
+      this.doingTask = false;
+    }
+  }
+
+  class DataSource extends BaseService {
+    state = vue.reactive({
+      dataSources: [],
+      editable: true,
+      configs: {}
+    });
+    set(name, value) {
+      this.state[name] = value;
+    }
+    get(name) {
+      return this.state[name];
+    }
+    getFormConfig(type = "base") {
+      return getFormConfig(type, this.get("configs"));
+    }
+    setFormConfig(type, config) {
+      this.get("configs")[type] = config;
+    }
+    add(config) {
+      const newConfig = {
+        ...config,
+        id: this.createId()
+      };
+      this.get("dataSources").push(newConfig);
+      this.emit("add", newConfig);
+    }
+    update(config) {
+      const dataSources = this.get("dataSources");
+      const index = dataSources.findIndex((ds) => ds.id === config.id);
+      dataSources[index] = lodashEs.cloneDeep(config);
+      this.emit("update", config);
+    }
+    remove(id) {
+      const dataSources = this.get("dataSources");
+      const index = dataSources.findIndex((ds) => ds.id === id);
+      dataSources.splice(index, 1);
+      this.emit("remove", id);
+    }
+    getDataSourceById(id) {
+      return this.get("dataSources").find((ds) => ds.id === id);
+    }
+    resetState() {
+      this.set("dataSources", []);
+    }
+    destroy() {
+      this.removeAllListeners();
+      this.resetState();
+      this.removeAllPlugins();
+    }
+    createId() {
+      return `ds_${utils.guid()}`;
+    }
+  }
+  const dataSourceService = new DataSource();
+
+  const arrayOptions = [
+    { text: "包含", value: "include" },
+    { text: "不包含", value: "not_include" }
+  ];
+  const eqOptions = [
+    { text: "等于", value: "=" },
+    { text: "不等于", value: "!=" }
+  ];
+  const numberOptions = [
+    { text: "大于", value: ">" },
+    { text: "大于等于", value: ">=" },
+    { text: "小于", value: "<" },
+    { text: "小于等于", value: "<=" },
+    { text: "在范围内", value: "between" },
+    { text: "不在范围内", value: "not_between" }
+  ];
+  const styleTabConfig = {
+    title: "样式",
+    labelWidth: "80px",
+    items: [
+      {
+        name: "style",
+        items: [
+          {
+            type: "fieldset",
+            legend: "位置",
+            items: [
+              {
+                name: "position",
+                type: "checkbox",
+                activeValue: "fixed",
+                inactiveValue: "absolute",
+                defaultValue: "absolute",
+                text: "固定定位"
+              },
+              {
+                name: "left",
+                text: "left"
+              },
+              {
+                name: "top",
+                text: "top",
+                disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
+              },
+              {
+                name: "right",
+                text: "right"
+              },
+              {
+                name: "bottom",
+                text: "bottom",
+                disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            legend: "盒子",
+            items: [
+              {
+                name: "width",
+                text: "宽度"
+              },
+              {
+                name: "height",
+                text: "高度"
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            legend: "边框",
+            items: [
+              {
+                name: "borderWidth",
+                text: "宽度",
+                defaultValue: "0"
+              },
+              {
+                name: "borderColor",
+                text: "颜色",
+                type: "colorPicker"
+              },
+              {
+                name: "borderStyle",
+                text: "样式",
+                type: "select",
+                defaultValue: "none",
+                options: [
+                  { text: "none", value: "none" },
+                  { text: "hidden", value: "hidden" },
+                  { text: "dotted", value: "dotted" },
+                  { text: "dashed", value: "dashed" },
+                  { text: "solid", value: "solid" },
+                  { text: "double", value: "double" },
+                  { text: "groove", value: "groove" },
+                  { text: "ridge", value: "ridge" },
+                  { text: "inset", value: "inset" },
+                  { text: "outset", value: "outset" }
+                ]
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            legend: "背景",
+            items: [
+              {
+                name: "backgroundImage",
+                text: "背景图"
+              },
+              {
+                name: "backgroundColor",
+                text: "背景颜色",
+                type: "colorPicker"
+              },
+              {
+                name: "backgroundRepeat",
+                text: "背景图重复",
+                type: "select",
+                defaultValue: "no-repeat",
+                options: [
+                  { text: "repeat", value: "repeat" },
+                  { text: "repeat-x", value: "repeat-x" },
+                  { text: "repeat-y", value: "repeat-y" },
+                  { text: "no-repeat", value: "no-repeat" },
+                  { text: "inherit", value: "inherit" }
+                ]
+              },
+              {
+                name: "backgroundSize",
+                text: "背景图大小",
+                defaultValue: "100% 100%"
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            legend: "字体",
+            items: [
+              {
+                name: "color",
+                text: "颜色",
+                type: "colorPicker"
+              },
+              {
+                name: "fontSize",
+                text: "大小"
+              },
+              {
+                name: "fontWeight",
+                text: "粗细"
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            legend: "变形",
+            name: "transform",
+            items: [
+              {
+                name: "rotate",
+                text: "旋转角度"
+              },
+              {
+                name: "scale",
+                text: "缩放"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  const eventTabConfig = {
+    title: "事件",
+    items: [
+      {
+        name: "events",
+        type: "event-select"
+      }
+    ]
+  };
+  const advancedTabConfig = {
+    title: "高级",
+    lazy: true,
+    items: [
+      {
+        name: "created",
+        text: "created",
+        labelWidth: "100px",
+        type: "code-select"
+      },
+      {
+        name: "mounted",
+        text: "mounted",
+        labelWidth: "100px",
+        type: "code-select"
+      }
+    ]
+  };
+  const displayTabConfig = {
+    title: "显示条件",
+    display: (vm, { model }) => model.type !== "page",
+    items: [
+      {
+        type: "groupList",
+        name: "displayConds",
+        items: [
+          {
+            type: "table",
+            name: "cond",
+            items: [
+              {
+                type: "data-source-field-select",
+                name: "field",
+                label: "字段"
+              },
+              {
+                type: "select",
+                options: (mForm, { model }) => {
+                  const [id, field] = model.field;
+                  const ds = dataSourceService.getDataSourceById(id);
+                  const type = ds?.fields.find((f) => f.name === field)?.type;
+                  if (type === "array") {
+                    return arrayOptions;
+                  }
+                  if (type === "boolean") {
+                    return [
+                      { text: "是", value: "is" },
+                      { text: "不是", value: "not" }
+                    ];
+                  }
+                  if (type === "number") {
+                    return [...eqOptions, ...numberOptions];
+                  }
+                  if (type === "string") {
+                    return [...arrayOptions, ...eqOptions];
+                  }
+                  return [...arrayOptions, ...eqOptions, ...numberOptions];
+                },
+                label: "条件",
+                name: "op"
+              },
+              {
+                label: "值",
+                items: [
+                  {
+                    name: "value",
+                    display: (vm, { model }) => !["between", "not_between", "is", "not"].includes(model.op)
+                  },
+                  {
+                    name: "value",
+                    type: "select",
+                    options: [
+                      { text: "true", value: true },
+                      { text: "false", value: false }
+                    ],
+                    display: (vm, { model }) => ["is", "not"].includes(model.op)
+                  },
+                  {
+                    name: "range",
+                    type: "number-range",
+                    display: (vm, { model }) => ["between", "not_between"].includes(model.op) && !["is", "not"].includes(model.op)
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  const fillConfig = (config = []) => [
+    {
+      type: "tab",
+      items: [
+        {
+          title: "属性",
+          labelWidth: "80px",
+          items: [
+            // 组件类型，必须要有
+            {
+              text: "type",
+              name: "type",
+              type: "hidden"
+            },
+            // 组件id，必须要有
+            {
+              name: "id",
+              type: "display",
+              text: "id"
+            },
+            {
+              name: "name",
+              text: "组件名称"
+            },
+            ...config
+          ]
+        },
+        { ...styleTabConfig },
+        { ...eventTabConfig },
+        { ...advancedTabConfig },
+        { ...displayTabConfig }
+      ]
+    }
+  ];
+
+  const log = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("magic editor: ", ...args);
+    }
+  };
+  const info = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.info("magic editor: ", ...args);
+    }
+  };
+  const warn = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.warn("magic editor: ", ...args);
+    }
+  };
+  const debug = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.debug("magic editor: ", ...args);
+    }
+  };
+  const error = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.error("magic editor: ", ...args);
     }
   };
 
@@ -2508,6 +2995,14 @@
     KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
     return KeyBindingCommand2;
   })(KeyBindingCommand || {});
+  var DepTargetType = /* @__PURE__ */ ((DepTargetType2) => {
+    DepTargetType2["DEFAULT"] = "default";
+    DepTargetType2["CODE_BLOCK"] = "code-block";
+    DepTargetType2["DATA_SOURCE"] = "data-source";
+    DepTargetType2["DATA_SOURCE_METHOD"] = "data-source-method";
+    DepTargetType2["DATA_SOURCE_COND"] = "data-source-cond";
+    return DepTargetType2;
+  })(DepTargetType || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
@@ -2684,158 +3179,36 @@
       this.listCursor += 1;
       if (this.elementList.length > this.listMaxSize) {
         this.elementList.shift();
-        this.listCursor -= 1;
-      }
-    }
-    canUndo() {
-      return this.listCursor > 1;
-    }
-    // 返回undo后的当前元素
-    undo() {
-      if (!this.canUndo()) {
-        return null;
-      }
-      this.listCursor -= 1;
-      return this.getCurrentElement();
-    }
-    canRedo() {
-      return this.elementList.length > this.listCursor;
-    }
-    // 返回redo后的当前元素
-    redo() {
-      if (!this.canRedo()) {
-        return null;
-      }
-      this.listCursor += 1;
-      return this.getCurrentElement();
-    }
-    getCurrentElement() {
-      if (this.listCursor < 1) {
-        return null;
-      }
-      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
-    }
-  }
-
-  const compose = (middleware) => {
-    if (!Array.isArray(middleware))
-      throw new TypeError("Middleware 必须是一个数组!");
-    for (const fn of middleware) {
-      if (typeof fn !== "function")
-        throw new TypeError("Middleware 必须由函数组成!");
-    }
-    return (args, next) => {
-      let index = -1;
-      return dispatch(0);
-      function dispatch(i) {
-        if (i <= index)
-          return Promise.reject(new Error("next() 被多次调用"));
-        index = i;
-        let fn = middleware[i];
-        if (i === middleware.length && next)
-          fn = next;
-        if (!fn)
-          return Promise.resolve();
-        try {
-          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
-        } catch (err) {
-          return Promise.reject(err);
-        }
-      }
-    };
-  };
-
-  const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
-  const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-  const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-    try {
-      let beforeArgs = args;
-      for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-        beforeArgs = await beforeMethod(...beforeArgs) || [];
-        if (isError(beforeArgs))
-          throw beforeArgs;
-        if (!Array.isArray(beforeArgs)) {
-          beforeArgs = [beforeArgs];
-        }
-      }
-      let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-      for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-        returnValue = await afterMethod(returnValue, ...beforeArgs);
-        if (isError(returnValue))
-          throw returnValue;
-      }
-      return returnValue;
-    } catch (error) {
-      throw error;
-    }
-  };
-  class BaseService extends events.EventEmitter {
-    pluginOptionsList = {};
-    middleware = {};
-    taskList = [];
-    doingTask = false;
-    constructor(methods = [], serialMethods = []) {
-      super();
-      methods.forEach((propertyName) => {
-        const scope = this;
-        const sourceMethod = scope[propertyName];
-        const beforeMethodName = methodName("before", propertyName);
-        const afterMethodName = methodName("after", propertyName);
-        this.pluginOptionsList[beforeMethodName] = [];
-        this.pluginOptionsList[afterMethodName] = [];
-        this.middleware[propertyName] = [];
-        const fn = compose(this.middleware[propertyName]);
-        Object.defineProperty(scope, propertyName, {
-          value: async (...args) => {
-            if (!serialMethods.includes(propertyName)) {
-              return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
-            }
-            const promise = new Promise((resolve, reject) => {
-              this.taskList.push(async () => {
-                try {
-                  const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
-                  resolve(value);
-                } catch (e) {
-                  reject(e);
-                }
-              });
-            });
-            if (!this.doingTask) {
-              this.doTask();
-            }
-            return promise;
-          }
-        });
-      });
+        this.listCursor -= 1;
+      }
     }
-    use(options) {
-      Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.middleware[methodName2].push(method);
-      });
+    canUndo() {
+      return this.listCursor > 1;
     }
-    usePlugin(options) {
-      Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.pluginOptionsList[methodName2].push(method);
-      });
+    // 返回undo后的当前元素
+    undo() {
+      if (!this.canUndo()) {
+        return null;
+      }
+      this.listCursor -= 1;
+      return this.getCurrentElement();
     }
-    removeAllPlugins() {
-      Object.keys(this.pluginOptionsList).forEach((key) => {
-        this.pluginOptionsList[key] = [];
-      });
-      Object.keys(this.middleware).forEach((key) => {
-        this.middleware[key] = [];
-      });
+    canRedo() {
+      return this.elementList.length > this.listCursor;
     }
-    async doTask() {
-      this.doingTask = true;
-      let task = this.taskList.shift();
-      while (task) {
-        await task();
-        task = this.taskList.shift();
+    // 返回redo后的当前元素
+    redo() {
+      if (!this.canRedo()) {
+        return null;
       }
-      this.doingTask = false;
+      this.listCursor += 1;
+      return this.getCurrentElement();
+    }
+    getCurrentElement() {
+      if (this.listCursor < 1) {
+        return null;
+      }
+      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
     }
   }
 
@@ -3056,7 +3429,7 @@
       this.emit("props-configs-change");
     }
     async fillConfig(config) {
-      return fillConfig$1(config);
+      return fillConfig(config);
     }
     /**
      * 为指定类型组件设置组件属性表单配置
@@ -4094,11 +4467,8 @@
       editorService.sort(ev.src, ev.dist);
     });
     stage.on("remove", (ev) => {
-      editorService.remove(
-        ev.data.map(({ el }) => ({
-          id: el.id
-        }))
-      );
+      const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+      editorService.remove(nodes.filter((node) => Boolean(node)));
     });
     stage.on("select-parent", () => {
       const parent = editorService.get("parent");
@@ -4153,7 +4523,7 @@
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$4
             ])
@@ -4244,7 +4614,7 @@
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$K, {
+            vue.createVNode(_sfc_main$L, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
@@ -4392,7 +4762,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4409,7 +4779,7 @@
               disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4809,7 +5179,7 @@
       const props = __props;
       const { codeBlockService, depService, editorService } = vue.inject("services") || {};
       const codeList = vue.computed(
-        () => Object.values(depService?.targets["code-block"] || {}).map((target) => {
+        () => Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
           const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
             name: dep.name,
             type: "node",
@@ -4916,7 +5286,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$E, {
+                      vue.createVNode(_sfc_main$F, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editCode(data.id), ["stop"])
@@ -4931,7 +5301,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$E, {
+                      vue.createVNode(_sfc_main$F, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5005,7 +5375,7 @@
               ]),
               _: 3
             }, 8, ["custom-error", "onEdit", "onRemove"]),
-            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
               key: 0,
               ref_key: "codeBlockEditor",
               ref: codeBlockEditor,
@@ -5069,6 +5439,7 @@
           ref_key: "fomDrawer",
           ref: fomDrawer,
           "label-width": "80px",
+          "close-on-press-escape": false,
           title: _ctx.title,
           width: size.value,
           config: dataSourceConfig.value,
@@ -5097,18 +5468,43 @@
     setup(__props, { expose: __expose, emit }) {
       const { depService, editorService, dataSourceService } = vue.inject("services") || {};
       const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
+      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
+      const dsDep = vue.computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
+      const dsMethodDep = vue.computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
+      const dsCondDep = vue.computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
+      const getKeyTreeConfig = (dep, type) => dep.keys.map((key) => ({ name: key, id: key, type: "key", isMethod: type === "method", isCond: type === "cond" }));
+      const getNodeTreeConfig = (id, dep, type) => ({
+        name: dep.name,
+        type: "node",
+        id,
+        children: getKeyTreeConfig(dep, type)
+      });
       const list = vue.computed(
-        () => Object.values(depService?.targets["data-source"] || {}).map((target) => ({
-          id: target.id,
-          name: target.name,
-          type: "code",
-          children: Object.entries(target.deps).map(([id, dep]) => ({
-            name: dep.name,
-            type: "node",
-            id,
-            children: dep.keys.map((key) => ({ name: key, id: key, type: "key" }))
-          }))
-        }))
+        () => dataSources.value.map((ds) => {
+          const dsDeps = dsDep.value[ds.id].deps;
+          const dsMethodDeps = dsMethodDep.value[ds.id].deps;
+          const dsCondDeps = dsCondDep.value[ds.id].deps;
+          const children = [];
+          const mergeChildren = (deps, type) => {
+            Object.entries(deps).forEach(([id, dep]) => {
+              const nodeItem = children.find((item) => item.id === id);
+              if (nodeItem) {
+                nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+              } else {
+                children.push(getNodeTreeConfig(id, dep, type));
+              }
+            });
+          };
+          mergeChildren(dsDeps);
+          mergeChildren(dsMethodDeps, "method");
+          mergeChildren(dsCondDeps, "cond");
+          return {
+            id: ds.id,
+            name: ds.title,
+            type: "ds",
+            children
+          };
+        })
       );
       const editHandler = (id) => {
         emit("edit", id);
@@ -5159,27 +5555,27 @@
               class: "list-container"
             }, [
               vue.createElementVNode("div", _hoisted_2$3, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: 0,
                   class: "codeIcon",
                   icon: vue.unref(iconsVue.Coin)
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: 1,
                   class: "compIcon",
                   icon: vue.unref(iconsVue.Aim)
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
                 vue.createElementVNode("span", {
-                  class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
-                }, vue.toDisplayString(data.name) + "（" + vue.toDisplayString(data.id) + "）", 3),
-                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+                  class: vue.normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
+                }, vue.toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
+                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$E, {
+                      vue.createVNode(_sfc_main$F, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -5194,7 +5590,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$E, {
+                      vue.createVNode(_sfc_main$F, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -5380,7 +5776,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -5395,7 +5791,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$E, {
+                              vue.createVNode(_sfc_main$F, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -6158,7 +6554,7 @@
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -6376,14 +6772,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -6399,7 +6795,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$F, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -7424,178 +7820,6 @@
   }
   const componentListService = new ComponentList();
 
-  const BaseFormConfig = [
-    {
-      name: "id",
-      type: "hidden"
-    },
-    {
-      name: "type",
-      text: "类型",
-      type: "select",
-      options: [
-        { text: "基础", value: "base" },
-        { text: "HTTP", value: "http" }
-      ],
-      defaultValue: "base"
-    },
-    {
-      name: "title",
-      text: "名称",
-      rules: [
-        {
-          required: true,
-          message: "请输入名称"
-        }
-      ]
-    },
-    {
-      name: "description",
-      text: "描述"
-    }
-  ];
-
-  const HttpFormConfig = [
-    {
-      name: "autoFetch",
-      text: "自动请求",
-      type: "switch",
-      defaultValue: true
-    },
-    {
-      type: "fieldset",
-      name: "options",
-      legend: "HTTP 配置",
-      items: [
-        {
-          name: "url",
-          text: "URL"
-        },
-        {
-          name: "method",
-          text: "Method",
-          type: "select",
-          options: [
-            { text: "GET", value: "GET" },
-            { text: "POST", value: "POST" },
-            { text: "PUT", value: "PUT" },
-            { text: "DELETE", value: "DELETE" }
-          ]
-        },
-        {
-          name: "params",
-          type: "key-value",
-          defaultValue: {},
-          text: "参数"
-        },
-        {
-          name: "data",
-          type: "key-value",
-          defaultValue: {},
-          text: "请求体"
-        },
-        {
-          name: "headers",
-          type: "key-value",
-          defaultValue: {},
-          text: "请求头"
-        }
-      ]
-    }
-  ];
-
-  const fillConfig = (config) => [
-    ...BaseFormConfig,
-    ...config,
-    {
-      type: "panel",
-      title: "数据定义",
-      items: [
-        {
-          name: "fields",
-          type: "data-source-fields",
-          defaultValue: []
-        }
-      ]
-    },
-    {
-      type: "panel",
-      title: "方法定义",
-      items: [
-        {
-          name: "methods",
-          type: "data-source-methods",
-          defaultValue: []
-        }
-      ]
-    }
-  ];
-  const getFormConfig = (type, configs) => {
-    switch (type) {
-      case "base":
-        return fillConfig([]);
-      case "http":
-        return fillConfig(HttpFormConfig);
-      default:
-        return fillConfig(configs[type] || []);
-    }
-  };
-
-  class DataSource extends BaseService {
-    state = vue.reactive({
-      dataSources: [],
-      editable: true,
-      configs: {}
-    });
-    set(name, value) {
-      this.state[name] = value;
-    }
-    get(name) {
-      return this.state[name];
-    }
-    getFormConfig(type = "base") {
-      return getFormConfig(type, this.get("configs"));
-    }
-    setFormConfig(type, config) {
-      this.get("configs")[type] = config;
-    }
-    add(config) {
-      const newConfig = {
-        ...config,
-        id: this.createId()
-      };
-      this.get("dataSources").push(newConfig);
-      this.emit("add", newConfig);
-    }
-    update(config) {
-      const dataSources = this.get("dataSources");
-      const index = dataSources.findIndex((ds) => ds.id === config.id);
-      dataSources[index] = lodashEs.cloneDeep(config);
-      this.emit("update", config);
-    }
-    remove(id) {
-      const dataSources = this.get("dataSources");
-      const index = dataSources.findIndex((ds) => ds.id === id);
-      dataSources.splice(index, 1);
-      this.emit("remove", id);
-    }
-    getDataSourceById(id) {
-      return this.get("dataSources").find((ds) => ds.id === id);
-    }
-    resetState() {
-      this.set("dataSources", []);
-    }
-    destroy() {
-      this.removeAllListeners();
-      this.resetState();
-      this.removeAllPlugins();
-    }
-    createId() {
-      return `ds_${utils.guid()}`;
-    }
-  }
-  const dataSourceService = new DataSource();
-
   class Target extends events.EventEmitter {
     /**
      * 如何识别目标
@@ -7613,7 +7837,7 @@
     /**
      * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
      */
-    type = "default";
+    type = DepTargetType.DEFAULT;
     /**
      * 依赖详情
      * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
@@ -7696,7 +7920,7 @@
      * @param type 分类
      * @returns Target[]
      */
-    getTargets(type = "default") {
+    getTargets(type = DepTargetType.DEFAULT) {
       return this.targets[type] || {};
     }
     /**
@@ -7755,7 +7979,7 @@
      * @param type 分类
      * @returns void
      */
-    removeTargets(type = "default") {
+    removeTargets(type = DepTargetType.DEFAULT) {
       const targets = this.targets[type];
       if (!targets)
         return;
@@ -7821,9 +8045,11 @@
             this.emit("update-dep", node, fullKey);
           } else if (!keyIsItems && Array.isArray(value)) {
             value.forEach((item, index) => {
-              collectTarget(item, `${fullKey}.${index}`);
+              if (utils.isObject(item)) {
+                collectTarget(item, `${fullKey}.${index}`);
+              }
             });
-          } else if (Object.prototype.toString.call(value) === "[object Object]") {
+          } else if (utils.isObject(value)) {
             collectTarget(value, fullKey);
           }
           if (keyIsItems && deep && Array.isArray(value)) {
@@ -7833,6 +8059,8 @@
           }
         };
         Object.entries(config).forEach(([key, value]) => {
+          if (typeof value === "undefined" || value === "")
+            return;
           doCollect(key, value);
         });
       };
@@ -8268,7 +8496,7 @@
   };
 
   const createCodeBlockTarget = (id, codeBlock) => new Target({
-    type: "code-block",
+    type: DepTargetType.CODE_BLOCK,
     id,
     name: codeBlock.name,
     isTarget: (key, value) => {
@@ -8282,15 +8510,34 @@
       return false;
     }
   });
-  const createDataSourceTarget = (id, ds) => new Target({
-    type: "data-source",
+  const createDataSourceTarget = (id) => new Target({
+    type: DepTargetType.DATA_SOURCE,
     id,
-    name: ds.title || `${id}`,
     isTarget: (key, value) => (
       // 关联数据源对象或者在模板在使用数据源
-      value.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)
+      value?.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)
     )
   });
+  const createDataSourceCondTarget = (id) => new Target({
+    type: DepTargetType.DATA_SOURCE_COND,
+    id,
+    isTarget: (key, value) => {
+      if (!Array.isArray(value) || value[0] !== id)
+        return false;
+      const ds = dataSourceService.getDataSourceById(id);
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    }
+  });
+  const createDataSourceMethodTarget = (id) => new Target({
+    type: DepTargetType.DATA_SOURCE_METHOD,
+    id,
+    isTarget: (key, value) => {
+      if (!Array.isArray(value) || value[0] !== id)
+        return false;
+      const ds = dataSourceService.getDataSourceById(id);
+      return Boolean(ds?.methods?.find((method) => method.name === value[1]));
+    }
+  });
 
   const initServiceState = (props, {
     editorService,
@@ -8393,6 +8640,7 @@
         return;
       if (app.dsl) {
         app.dsl.dataSourceDeps = root.dataSourceDeps;
+        app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
         app.dsl.dataSources = root.dataSources;
       }
       updateDataSoucreSchema();
@@ -8410,21 +8658,30 @@
       });
     };
     const targetAddHandler = (target) => {
-      if (target.type !== "data-source")
-        return;
       const root = editorService.get("root");
       if (!root)
         return;
-      if (!root.dataSourceDeps) {
-        root.dataSourceDeps = {};
+      if (target.type === DepTargetType.DATA_SOURCE) {
+        if (!root.dataSourceDeps) {
+          root.dataSourceDeps = {};
+        }
+        root.dataSourceDeps[target.id] = target.deps;
+      }
+      if (target.type === DepTargetType.DATA_SOURCE_COND) {
+        if (!root.dataSourceCondDeps) {
+          root.dataSourceCondDeps = {};
+        }
+        root.dataSourceCondDeps[target.id] = target.deps;
       }
-      root.dataSourceDeps[target.id] = target.deps;
     };
     const targetRemoveHandler = (id) => {
       const root = editorService.get("root");
-      if (!root?.dataSourceDeps)
-        return;
-      delete root.dataSourceDeps[id];
+      if (root?.dataSourceDeps) {
+        delete root.dataSourceDeps[id];
+      }
+      if (root?.dataSourceCondDeps) {
+        delete root.dataSourceCondDeps[id];
+      }
     };
     const depUpdateHandler = (node) => {
       upateNodeWhenDataSourceChange([node]);
@@ -8436,6 +8693,11 @@
     depService.on("remove-target", targetRemoveHandler);
     depService.on("dep-update", depUpdateHandler);
     depService.on("collected", collectedHandler);
+    const initDataSourceDepTarget = (ds) => {
+      depService.addTarget(createDataSourceTarget(ds.id));
+      depService.addTarget(createDataSourceMethodTarget(ds.id));
+      depService.addTarget(createDataSourceCondTarget(ds.id));
+    };
     const rootChangeHandler = async (value, preValue) => {
       const nodeId = editorService.get("node")?.id || props.defaultSelected;
       let node;
@@ -8458,12 +8720,12 @@
       value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
       dataSourceService.set("dataSources", value.dataSources);
-      depService.removeTargets("code-block");
+      depService.removeTargets(DepTargetType.CODE_BLOCK);
       Object.entries(value.codeBlocks).forEach(([id, code]) => {
         depService.addTarget(createCodeBlockTarget(id, code));
       });
       value.dataSources.forEach((ds) => {
-        depService.addTarget(createDataSourceTarget(ds.id, ds));
+        initDataSourceDepTarget(ds);
       });
       if (value && Array.isArray(value.items)) {
         depService.collect(value.items, true);
@@ -8502,15 +8764,12 @@
     codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
     codeBlockService.on("remove", codeBlockRemoveHandler);
     const dataSourceAddHandler = (config) => {
-      depService.addTarget(createDataSourceTarget(config.id, config));
+      initDataSourceDepTarget(config);
       getApp()?.dataSourceManager?.addDataSource(config);
     };
     const dataSourceUpdateHandler = (config) => {
-      if (config.title) {
-        depService.getTarget(config.id).name = config.title;
-      }
       const root = editorService.get("root");
-      const targets = depService.getTargets("data-source");
+      const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
       const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
       upateNodeWhenDataSourceChange(nodes);
     };
@@ -8712,41 +8971,44 @@
       setConfig(option);
       app.component(Editor.name, Editor);
       app.component("m-fields-ui-select", _sfc_main$v);
-      app.component("m-fields-code-link", _sfc_main$I);
-      app.component("m-fields-vs-code", _sfc_main$J);
-      app.component("magic-code-editor", _sfc_main$K);
-      app.component("m-fields-code-select", _sfc_main$H);
-      app.component("m-fields-code-select-col", _sfc_main$D);
+      app.component("m-fields-code-link", _sfc_main$J);
+      app.component("m-fields-vs-code", _sfc_main$K);
+      app.component("magic-code-editor", _sfc_main$L);
+      app.component("m-fields-code-select", _sfc_main$I);
+      app.component("m-fields-code-select-col", _sfc_main$E);
       app.component("m-fields-event-select", _sfc_main$x);
-      app.component("m-fields-data-source-fields", _sfc_main$C);
+      app.component("m-fields-data-source-fields", _sfc_main$D);
       app.component("m-fields-key-value", _sfc_main$w);
       app.component("m-fields-data-source-input", _sfc_main$B);
       app.component("m-fields-data-source-select", _sfc_main$y);
       app.component("m-fields-data-source-methods", _sfc_main$A);
       app.component("m-fields-data-source-method-select", _sfc_main$z);
+      app.component("m-fields-data-source-field-select", _sfc_main$C);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$G;
+  exports.CodeBlockEditor = _sfc_main$H;
   exports.CodeBlockList = _sfc_main$k;
   exports.CodeBlockListPanel = _sfc_main$j;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$H;
-  exports.CodeSelectCol = _sfc_main$D;
+  exports.CodeSelect = _sfc_main$I;
+  exports.CodeSelectCol = _sfc_main$E;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$f;
   exports.ContentMenu = _sfc_main$e;
-  exports.DataSourceFields = _sfc_main$C;
+  exports.DataSourceFieldSelect = _sfc_main$C;
+  exports.DataSourceFields = _sfc_main$D;
   exports.DataSourceInput = _sfc_main$B;
   exports.DataSourceMethodSelect = _sfc_main$z;
   exports.DataSourceMethods = _sfc_main$A;
   exports.DataSourceSelect = _sfc_main$y;
+  exports.DepTargetType = DepTargetType;
   exports.EventSelect = _sfc_main$x;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$E;
+  exports.Icon = _sfc_main$F;
   exports.KeyBindingCommand = KeyBindingCommand;
   exports.KeyValue = _sfc_main$w;
   exports.Keys = Keys;
@@ -8757,10 +9019,11 @@
   exports.PropsPanel = _sfc_main$o;
   exports.Resizer = _sfc_main$u;
   exports.SplitView = _sfc_main$t;
-  exports.TMagicCodeEditor = _sfc_main$K;
+  exports.TMagicCodeEditor = _sfc_main$L;
   exports.TMagicEditor = Editor;
   exports.ToolButton = _sfc_main$q;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
+  exports.advancedTabConfig = advancedTabConfig;
   exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;
   exports.codeBlockService = codeBlockService;
@@ -8768,10 +9031,12 @@
   exports.debug = debug;
   exports.default = index;
   exports.depService = depService;
+  exports.displayTabConfig = displayTabConfig;
   exports.editorService = editorService;
   exports.error = error;
+  exports.eventTabConfig = eventTabConfig;
   exports.eventsService = eventsService;
-  exports.fillConfig = fillConfig$1;
+  exports.fillConfig = fillConfig;
   exports.fixNodeLeft = fixNodeLeft;
   exports.fixNodePosition = fixNodePosition;
   exports.generatePageName = generatePageName;
@@ -8795,6 +9060,7 @@
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
   exports.storageService = storageService;
+  exports.styleTabConfig = styleTabConfig;
   exports.uiService = uiService;
   exports.useStage = useStage;
   exports.warn = warn;