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

package/dist/tmagic-editor.js

@@ -8,7 +8,7 @@ import { HookType, ActionType, NodeType } from '@tmagic/schema';
 import { MFormDrawer, MForm, createValues, MFormDialog, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import Gesto from 'gesto';
-import { isPop, getNodePath, isNumber, isPage, toLine, guid, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { guid, isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName, isObject as isObject$1, getNodes } from '@tmagic/utils';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
@@ -17,7 +17,7 @@ import KeyController from 'keycon';
 const _hoisted_1$r = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -191,7 +191,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -199,11 +199,13 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
     name: {},
     prop: {},
-    lastValues: {},
     disabled: { type: Boolean, default: false },
-    size: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -213,7 +215,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$K, {
+      return openBlock(), createBlock(_sfc_main$L, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -233,7 +235,7 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -241,8 +243,13 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
     name: {},
-    prop: {}
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -307,7 +314,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -315,9 +322,13 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
-    prop: {},
+    initValues: {},
+    values: {},
     name: {},
-    size: {}
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -375,7 +386,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -494,6 +505,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         ref_key: "fomDrawer",
         ref: fomDrawer,
         "label-width": "80px",
+        "close-on-press-escape": false,
         title: _ctx.content.name,
         width: size.value,
         config: functionConfig.value,
@@ -507,7 +519,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -557,7 +569,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$q = ["src"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -659,7 +671,7 @@ const useCodeBlockEdit = (codeBlockService) => {
 
 const _hoisted_1$p = { class: "m-fields-code-select-col" };
 const _hoisted_2$f = { class: "code-select-container" };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -667,11 +679,13 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
-    prop: {},
+    initValues: {},
+    values: {},
     name: {},
-    lastValues: {},
+    prop: {},
     disabled: { type: Boolean, default: false },
-    size: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -731,14 +745,14 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$E, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$F, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$F, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$G, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -746,7 +760,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$H, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -761,7 +775,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -769,10 +783,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
+    name: {},
     prop: {},
-    lastValues: {},
     disabled: { type: Boolean, default: false },
-    name: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -936,6 +953,53 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _sfc_main$C = /* @__PURE__ */ 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 = inject("services");
+    const dataSources = 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 = resolveComponent("m-form-container");
+      return openBlock(), 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" };
@@ -947,11 +1011,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
     name: {},
     prop: {},
     disabled: { type: Boolean, default: false },
-    lastValues: {},
-    size: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1158,7 +1224,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$E, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$F, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$n, [
@@ -1193,7 +1259,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$E, {
+            createVNode(_sfc_main$F, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -1286,10 +1352,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
+    name: {},
     prop: {},
-    lastValues: {},
     disabled: { type: Boolean, default: false },
-    name: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1359,7 +1428,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$H, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -1382,11 +1451,13 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
-    lastValues: {},
-    prop: {},
+    initValues: {},
+    values: {},
     name: {},
+    prop: {},
     disabled: { type: Boolean, default: false },
-    size: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1420,7 +1491,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       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,
@@ -1458,14 +1529,14 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$E, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$F, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$F, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$G, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -1474,7 +1545,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$H, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -1495,11 +1566,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
     name: {},
     prop: {},
     disabled: { type: Boolean, default: false },
-    lastValues: {},
-    size: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1553,9 +1626,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
-    prop: {},
+    initValues: {},
+    values: {},
     name: {},
-    size: {}
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1735,26 +1812,30 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         isOldVersion.value ? (openBlock(), 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"])) : (openBlock(), createElementBlock("div", _hoisted_2$a, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$a, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
-            size: "small",
+            size: _ctx.size,
+            disabled: _ctx.disabled,
             onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
           }, {
             default: withCtx(() => [
               createTextVNode("添加事件")
             ]),
             _: 1
-          }),
+          }, 8, ["size", "disabled"]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model[_ctx.name], (cardItem, index) => {
             return openBlock(), createBlock(_component_m_form_panel, {
               key: index,
+              disabled: _ctx.disabled,
+              size: _ctx.size,
               config: actionsConfig.value,
               model: cardItem,
               onChange: onChangeHandler
@@ -1764,17 +1845,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   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"]),
                 createVNode(unref(TMagicButton), {
                   style: { "color": "#f56c6c" },
                   text: "",
                   icon: unref(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))
         ]))
       ]);
@@ -1792,11 +1877,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
     name: {},
     prop: {},
     disabled: { type: Boolean, default: false },
-    lastValues: {},
-    size: {}
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1854,16 +1941,18 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               class: "m-fileds-key-value-delete",
               type: "danger",
               size: _ctx.size,
+              disabled: _ctx.disabled,
               circle: "",
               plain: "",
               icon: unref(Delete),
               onClick: ($event) => deleteHandler(index)
-            }, null, 8, ["size", "icon", "onClick"])
+            }, null, 8, ["size", "disabled", "icon", "onClick"])
           ]);
         }), 128)),
         createVNode(unref(TMagicButton), {
           type: "primary",
           size: _ctx.size,
+          disabled: _ctx.disabled,
           plain: "",
           icon: unref(Plus),
           onClick: addHandler
@@ -1872,7 +1961,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             createTextVNode("添加")
           ]),
           _: 1
-        }, 8, ["size", "icon"])
+        }, 8, ["size", "disabled", "icon"])
       ]);
     };
   }
@@ -1891,8 +1980,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   props: {
     config: {},
     model: {},
+    initValues: {},
+    values: {},
+    name: {},
     prop: {},
-    name: {}
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -1957,6 +2051,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicButton), {
           type: "danger",
           icon: unref(Delete),
+          disabled: _ctx.disabled,
+          size: _ctx.size,
           text: "",
           style: { "padding": "0" }
         }, {
@@ -1964,7 +2060,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             createTextVNode("取消")
           ]),
           _: 1
-        }, 8, ["icon"])
+        }, 8, ["icon", "disabled", "size"])
       ])) : (openBlock(), createElementBlock("div", _hoisted_1$i, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
@@ -1976,9 +2072,11 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                 style: { "padding": "0" },
                 type: "danger",
                 icon: unref(Close),
+                disabled: _ctx.disabled,
+                size: _ctx.size,
                 text: "",
                 onClick: withModifiers(deleteHandler, ["stop"])
-              }, null, 8, ["icon", "onClick"])
+              }, null, 8, ["icon", "disabled", "size", "onClick"])
             ]),
             _: 1
           }),
@@ -1990,6 +2088,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               createVNode(unref(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) => unref(highlight)(val.value)),
                 onMouseleave: unhightlight
@@ -1998,7 +2098,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                   createTextVNode(toDisplayString(`${toName.value}_${val.value}`), 1)
                 ]),
                 _: 1
-              })
+              }, 8, ["disabled", "size"])
             ]),
             _: 1
           })
@@ -2011,13 +2111,15 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             createVNode(unref(TMagicButton), {
               text: "",
               style: { "padding": "0", "margin": "0" },
+              disabled: _ctx.disabled,
+              size: _ctx.size,
               onClick: startSelect
             }, {
               default: withCtx(() => [
                 createTextVNode("点击此处选择")
               ]),
               _: 1
-            })
+            }, 8, ["disabled", "size"])
           ]),
           _: 1
         }))
@@ -2204,246 +2306,631 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 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 = 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] = 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_${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);
   }
 };
 
@@ -2499,6 +2986,14 @@ var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
   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) => {
@@ -2675,158 +3170,36 @@ class UndoRedo {
     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 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 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 cloneDeep(this.elementList[this.listCursor - 1]);
   }
 }
 
@@ -3047,7 +3420,7 @@ class Props extends BaseService {
     this.emit("props-configs-change");
   }
   async fillConfig(config) {
-    return fillConfig$1(config);
+    return fillConfig(config);
   }
   /**
    * 为指定类型组件设置组件属性表单配置
@@ -4085,11 +4458,8 @@ const useStage = (stageOptions) => {
     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");
@@ -4144,7 +4514,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$E, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$F, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$4
           ])
@@ -4235,7 +4605,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$K, {
+          createVNode(_sfc_main$L, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
@@ -4383,7 +4753,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$E, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$F, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4400,7 +4770,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             disabled: disabled.value
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$E, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$F, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4800,7 +5170,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { codeBlockService, depService, editorService } = inject("services") || {};
     const codeList = 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",
@@ -4907,7 +5277,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$E, {
+                    createVNode(_sfc_main$F, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editCode(data.id), ["stop"])
@@ -4922,7 +5292,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$E, {
+                    createVNode(_sfc_main$F, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4996,7 +5366,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["custom-error", "onEdit", "onRemove"]),
-          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$H, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -5060,6 +5430,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         ref_key: "fomDrawer",
         ref: fomDrawer,
         "label-width": "80px",
+        "close-on-press-escape": false,
         title: _ctx.title,
         width: size.value,
         config: dataSourceConfig.value,
@@ -5088,18 +5459,43 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit }) {
     const { depService, editorService, dataSourceService } = inject("services") || {};
     const editable = computed(() => dataSourceService?.get("editable") ?? true);
+    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
+    const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
+    const dsCondDep = 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 = 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);
@@ -5150,27 +5546,27 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             class: "list-container"
           }, [
             createElementVNode("div", _hoisted_2$3, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$E, {
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$F, {
                 key: 0,
                 class: "codeIcon",
                 icon: unref(Coin)
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$E, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$F, {
                 key: 1,
                 class: "compIcon",
                 icon: unref(Aim)
               }, null, 8, ["icon"])) : createCommentVNode("", true),
               createElementVNode("span", {
-                class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
-              }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
-              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+                class: normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
+              }, toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
+              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$E, {
+                    createVNode(_sfc_main$F, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -5185,7 +5581,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$E, {
+                    createVNode(_sfc_main$F, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -5371,7 +5767,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$E, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$F, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -5386,7 +5782,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$E, {
+                            createVNode(_sfc_main$F, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -6149,7 +6545,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$E, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$F, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -6367,14 +6763,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$E, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$F, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$3)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$E, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$F, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -6390,7 +6786,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$E, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$F, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -7415,178 +7811,6 @@ class ComponentList extends BaseService {
 }
 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 = 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] = 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_${guid()}`;
-  }
-}
-const dataSourceService = new DataSource();
-
 class Target extends EventEmitter {
   /**
    * 如何识别目标
@@ -7604,7 +7828,7 @@ class Target extends EventEmitter {
   /**
    * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
    */
-  type = "default";
+  type = DepTargetType.DEFAULT;
   /**
    * 依赖详情
    * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
@@ -7687,7 +7911,7 @@ class Watcher extends EventEmitter {
    * @param type 分类
    * @returns Target[]
    */
-  getTargets(type = "default") {
+  getTargets(type = DepTargetType.DEFAULT) {
     return this.targets[type] || {};
   }
   /**
@@ -7746,7 +7970,7 @@ class Watcher extends EventEmitter {
    * @param type 分类
    * @returns void
    */
-  removeTargets(type = "default") {
+  removeTargets(type = DepTargetType.DEFAULT) {
     const targets = this.targets[type];
     if (!targets)
       return;
@@ -7812,9 +8036,11 @@ class Watcher extends EventEmitter {
           this.emit("update-dep", node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
-            collectTarget(item, `${fullKey}.${index}`);
+            if (isObject$1(item)) {
+              collectTarget(item, `${fullKey}.${index}`);
+            }
           });
-        } else if (Object.prototype.toString.call(value) === "[object Object]") {
+        } else if (isObject$1(value)) {
           collectTarget(value, fullKey);
         }
         if (keyIsItems && deep && Array.isArray(value)) {
@@ -7824,6 +8050,8 @@ class Watcher extends EventEmitter {
         }
       };
       Object.entries(config).forEach(([key, value]) => {
+        if (typeof value === "undefined" || value === "")
+          return;
         doCollect(key, value);
       });
     };
@@ -8259,7 +8487,7 @@ const editorProps = {
 };
 
 const createCodeBlockTarget = (id, codeBlock) => new Target({
-  type: "code-block",
+  type: DepTargetType.CODE_BLOCK,
   id,
   name: codeBlock.name,
   isTarget: (key, value) => {
@@ -8273,15 +8501,34 @@ const createCodeBlockTarget = (id, codeBlock) => new Target({
     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,
@@ -8384,6 +8631,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       return;
     if (app.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
     updateDataSoucreSchema();
@@ -8401,21 +8649,30 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     });
   };
   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]);
@@ -8427,6 +8684,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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;
@@ -8449,12 +8711,12 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     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);
@@ -8493,15 +8755,12 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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 = getNodes(Object.keys(targets[config.id].deps), root?.items);
     upateNodeWhenDataSourceChange(nodes);
   };
@@ -8703,20 +8962,21 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$G as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$H as CodeSelect, _sfc_main$D as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$e as ContentMenu, _sfc_main$C as DataSourceFields, _sfc_main$B as DataSourceInput, _sfc_main$z as DataSourceMethodSelect, _sfc_main$A as DataSourceMethods, _sfc_main$y as DataSourceSelect, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$E as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$t as LayoutContainer, _sfc_main$o as PropsPanel, _sfc_main$u as Resizer, _sfc_main$t as SplitView, _sfc_main$K as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$q as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$H as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$I as CodeSelect, _sfc_main$E as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$e as ContentMenu, _sfc_main$C as DataSourceFieldSelect, _sfc_main$D as DataSourceFields, _sfc_main$B as DataSourceInput, _sfc_main$z as DataSourceMethodSelect, _sfc_main$A as DataSourceMethods, _sfc_main$y as DataSourceSelect, DepTargetType, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$F as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$t as LayoutContainer, _sfc_main$o as PropsPanel, _sfc_main$u as Resizer, _sfc_main$t as SplitView, _sfc_main$L as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$q as ToolButton, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, styleTabConfig, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map