@tmagic/editor 1.2.15 → 1.3.0-alpha.0

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('keycon'), require('@tmagic/stage'), require('events'), require('@tmagic/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', 'monaco-editor', 'gesto', '@tmagic/utils', 'keycon', '@tmagic/stage', 'events', '@tmagic/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.monaco, global.Gesto, global.utils, global.KeyController, global.StageCore, global.events, global.core));
-})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, monaco, Gesto, utils, KeyController, StageCore, events, core) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('@tmagic/table'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('keycon'), require('@tmagic/stage'), require('events'), require('@tmagic/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', '@tmagic/table', 'monaco-editor', 'gesto', '@tmagic/utils', 'keycon', '@tmagic/stage', 'events', '@tmagic/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.table, global.monaco, global.Gesto, global.utils, global.KeyController, global.StageCore, global.events, global.core));
+})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, table, monaco, Gesto, utils, KeyController, StageCore, events, core) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,11 +23,11 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const __default__$v = vue.defineComponent({
+  const __default__$w = vue.defineComponent({
     name: "MEditorCode"
   });
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$v,
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$w,
     props: {
       model: null,
       name: null,
@@ -56,11 +56,11 @@
     }
   });
 
-  const __default__$u = vue.defineComponent({
+  const __default__$v = vue.defineComponent({
     name: "MEditorCodeLink"
   });
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$u,
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$v,
     props: {
       config: null,
       model: null,
@@ -129,11 +129,11 @@
     }
   });
 
-  const __default__$t = vue.defineComponent({
+  const __default__$u = vue.defineComponent({
     name: "MEditorCodeSelect"
   });
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$t,
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$u,
     props: {
       config: null,
       model: null,
@@ -150,7 +150,8 @@
         enableToggleMode: false,
         items: [
           {
-            type: "code-select-col"
+            type: "code-select-col",
+            labelWidth: 0
           }
         ]
       }));
@@ -191,12 +192,12 @@
     }
   });
 
-  const _hoisted_1$j = ["src"];
-  const __default__$s = vue.defineComponent({
+  const _hoisted_1$n = ["src"];
+  const __default__$t = vue.defineComponent({
     name: "MEditorIcon"
   });
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$s,
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$t,
     props: {
       icon: null
     },
@@ -215,7 +216,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$j)
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$n)
           ]),
           _: 1
         })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -234,13 +235,13 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-fields-code-select-col" };
-  const _hoisted_2$a = { class: "code-select-container" };
-  const __default__$r = vue.defineComponent({
+  const _hoisted_1$m = { class: "m-fields-code-select-col" };
+  const _hoisted_2$e = { class: "code-select-container" };
+  const __default__$s = vue.defineComponent({
     name: "MEditorCodeSelectCol"
   });
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$r,
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$s,
     props: {
       config: null,
       model: null,
@@ -328,15 +329,15 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
               model: __props.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            vue.createVNode(_sfc_main$w, {
+            vue.createVNode(_sfc_main$A, {
               class: "icon",
               icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCode
@@ -352,17 +353,196 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-event-select" };
-  const _hoisted_2$9 = {
+  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_3$8 = /* @__PURE__ */ vue.createTextVNode("添加");
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+    __name: "DataSourceFields",
+    props: {
+      config: null,
+      model: null,
+      prop: null,
+      disabled: { type: Boolean, default: false },
+      name: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const addDialog = vue.ref();
+      const fieldValues = vue.ref({});
+      const filedTitle = vue.ref("");
+      const newHandler = () => {
+        if (!addDialog.value)
+          return;
+        fieldValues.value = {};
+        filedTitle.value = "新增属性";
+        addDialog.value.dialogVisible = true;
+      };
+      const fieldChange = ({ index, ...value }) => {
+        if (!addDialog.value)
+          return;
+        if (index > -1) {
+          props.model[props.name][index] = value;
+        } else {
+          props.model[props.name].push(value);
+        }
+        addDialog.value.dialogVisible = false;
+        emit("change", props.model[props.name]);
+      };
+      const filedColumns = [
+        {
+          label: "属性名称",
+          prop: "title"
+        },
+        {
+          label: "属性key",
+          prop: "name"
+        },
+        {
+          label: "属性描述",
+          prop: "desc"
+        },
+        {
+          label: "操作",
+          fixed: "right",
+          actions: [
+            {
+              text: "编辑",
+              handler: (row, index) => {
+                if (!addDialog.value)
+                  return;
+                fieldValues.value = {
+                  ...row,
+                  index
+                };
+                filedTitle.value = `编辑${row.title}`;
+                addDialog.value.dialogVisible = true;
+              }
+            },
+            {
+              text: "删除",
+              buttonType: "danger",
+              handler: async (row, index) => {
+                await design.tMagicMessageBox.confirm(`确定删除${row.title}(${row.name})?`, "提示");
+                props.model[props.name].splice(index, 1);
+                emit("change", props.model[props.name]);
+              }
+            }
+          ]
+        }
+      ];
+      const dataSourceFieldsConfig = [
+        { name: "index", type: "hidden", filter: "number", defaultValue: -1 },
+        {
+          name: "type",
+          text: "数据类型",
+          type: "select",
+          defaultValue: "string",
+          options: [
+            { text: "字符串", value: "string" },
+            { text: "数字", value: "number" },
+            { text: "布尔值", value: "boolean" },
+            { text: "对象", value: "object" },
+            { text: "数组", value: "array" },
+            { text: "null", value: "null" },
+            { text: "any", value: "any" }
+          ]
+        },
+        {
+          name: "name",
+          text: "字段名称",
+          rules: [
+            {
+              required: true,
+              message: "请输入字段名称"
+            },
+            {
+              validator: ({ value, callback }, { model, parent }) => {
+                const index = parent.findIndex((item) => item.name === value);
+                if (model.index === -1 && index > -1 || model.index > -1 && index !== model.index) {
+                  return callback(`属性key（${value}）已存在`);
+                }
+                callback();
+              }
+            }
+          ]
+        },
+        {
+          name: "title",
+          text: "展示名称",
+          rules: [
+            {
+              required: true,
+              message: "请输入展示名称"
+            }
+          ]
+        },
+        {
+          name: "description",
+          text: "描述"
+        },
+        {
+          name: "defaultValue",
+          text: "默认值"
+        },
+        {
+          name: "enable",
+          text: "是否可用",
+          type: "switch",
+          defaultValue: true
+        },
+        {
+          name: "fields",
+          type: "data-source-fields",
+          defaultValue: [],
+          display: (formState, { model }) => model.type === "object"
+        }
+      ];
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createVNode(vue.unref(table.MagicTable), {
+            data: __props.model[__props.name],
+            columns: filedColumns
+          }, null, 8, ["data"]),
+          vue.createElementVNode("div", _hoisted_2$d, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              size: "small",
+              type: "primary",
+              disabled: __props.disabled,
+              plain: "",
+              onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_3$8
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          vue.createVNode(vue.unref(form.MFormDialog), {
+            ref_key: "addDialog",
+            ref: addDialog,
+            title: filedTitle.value,
+            config: dataSourceFieldsConfig,
+            values: fieldValues.value,
+            parentValues: __props.model[__props.name],
+            onSubmit: fieldChange
+          }, null, 8, ["title", "values", "parentValues"])
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$k = { class: "m-fields-event-select" };
+  const _hoisted_2$c = {
     key: 1,
     class: "fullWidth"
   };
-  const _hoisted_3$5 = /* @__PURE__ */ vue.createTextVNode("添加事件");
-  const __default__$q = vue.defineComponent({
+  const _hoisted_3$7 = /* @__PURE__ */ vue.createTextVNode("添加事件");
+  const __default__$r = vue.defineComponent({
     name: "MEditorEventSelect"
   });
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$q,
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$r,
     props: {
       config: null,
       model: null,
@@ -441,6 +621,7 @@
       const codeActionConfig = vue.computed(() => {
         const defaultCodeActionConfig = {
           type: "code-select-col",
+          labelWidth: 0,
           display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
         };
         return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -518,7 +699,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.unref(isOldVersion) ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -527,7 +708,7 @@
             name: "events",
             config: vue.unref(tableConfig),
             onChange: onChangeHandler
-          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
+          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -535,7 +716,7 @@
               onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$5
+                _hoisted_3$7
               ]),
               _: 1
             }),
@@ -569,12 +750,106 @@
     }
   });
 
-  const _hoisted_1$g = /* @__PURE__ */ vue.createTextVNode("取消");
-  const __default__$p = vue.defineComponent({
+  const _hoisted_1$j = { class: "m-fields-key-value" };
+  const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _hoisted_3$6 = /* @__PURE__ */ vue.createTextVNode("添加");
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+    __name: "KeyValue",
+    props: {
+      config: null,
+      model: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean, default: false },
+      lastValues: null,
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const records = vue.ref([]);
+      vue.watchEffect(() => {
+        records.value = Object.entries(props.model[props.name] || {});
+      });
+      const getValue = () => {
+        const record = {};
+        records.value.forEach(([key, value]) => {
+          if (key) {
+            record[key] = value;
+          }
+        });
+        return record;
+      };
+      const keyChangeHandler = () => {
+        emit("change", getValue());
+      };
+      const valueChangeHandler = () => {
+        emit("change", getValue());
+      };
+      const addHandler = () => {
+        records.value.push(["", ""]);
+      };
+      const deleteHandler = (index) => {
+        records.value.splice(index, 1);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: "m-fields-key-value-item",
+              key: index
+            }, [
+              vue.createVNode(vue.unref(design.TMagicInput), {
+                placeholder: "key",
+                modelValue: records.value[index][0],
+                "onUpdate:modelValue": ($event) => records.value[index][0] = $event,
+                disabled: __props.disabled,
+                size: __props.size,
+                onChange: keyChangeHandler
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
+              _hoisted_2$b,
+              vue.createVNode(vue.unref(design.TMagicInput), {
+                placeholder: "value",
+                modelValue: records.value[index][1],
+                "onUpdate:modelValue": ($event) => records.value[index][1] = $event,
+                disabled: __props.disabled,
+                size: __props.size,
+                onChange: valueChangeHandler
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                class: "m-fileds-key-value-delete",
+                type: "danger",
+                size: __props.size,
+                circle: "",
+                plain: "",
+                icon: vue.unref(iconsVue.Delete),
+                onClick: ($event) => deleteHandler(index)
+              }, null, 8, ["size", "icon", "onClick"])
+            ]);
+          }), 128)),
+          vue.createVNode(vue.unref(design.TMagicButton), {
+            type: "primary",
+            size: __props.size,
+            plain: "",
+            icon: vue.unref(iconsVue.Plus),
+            onClick: addHandler
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_3$6
+            ]),
+            _: 1
+          }, 8, ["size", "icon"])
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$i = /* @__PURE__ */ vue.createTextVNode("取消");
+  const __default__$q = vue.defineComponent({
     name: "MEditorUISelect"
   });
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$p,
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$q,
     props: {
       config: null,
       model: null,
@@ -636,7 +911,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$g
+              _hoisted_1$i
             ]),
             _: 1
           }, 8, ["icon"])
@@ -684,11 +959,11 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const __default__$o = vue.defineComponent({
+  const __default__$p = vue.defineComponent({
     name: "MEditorCodeEditor"
   });
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$o,
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$p,
     props: {
       initValues: null,
       modifiedValues: null,
@@ -817,11 +1092,11 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const __default__$n = vue.defineComponent({
+  const __default__$o = vue.defineComponent({
     name: "MEditorResizer"
   });
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$n,
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$o,
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
@@ -853,11 +1128,11 @@
     }
   });
 
-  const __default__$m = vue.defineComponent({
+  const __default__$n = vue.defineComponent({
     name: "MEditorLayout"
   });
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$m,
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$n,
     props: {
       left: null,
       right: null,
@@ -965,7 +1240,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$r, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$t, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -974,7 +1249,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$r, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$t, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
               style: vue.normalizeStyle(`width: ${__props.right}px`)
@@ -987,7 +1262,7 @@
     }
   });
 
-  const fillConfig = (config = []) => [
+  const fillConfig$1 = (config = []) => [
     {
       type: "tab",
       items: [
@@ -1143,7 +1418,8 @@
           items: [
             {
               name: "events",
-              type: "event-select"
+              type: "event-select",
+              labelWidth: 0
             }
           ]
         },
@@ -1773,7 +2049,7 @@
       this.emit("props-configs-change");
     }
     async fillConfig(config) {
-      return fillConfig(config);
+      return fillConfig$1(config);
     }
     /**
      * 为指定类型组件设置组件属性表单配置
@@ -2840,14 +3116,14 @@
     return stage;
   };
 
-  const _hoisted_1$f = { class: "m-editor-empty-panel" };
-  const _hoisted_2$8 = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const __default__$l = vue.defineComponent({
+  const _hoisted_1$h = { class: "m-editor-empty-panel" };
+  const _hoisted_2$a = { class: "m-editor-empty-content" };
+  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const __default__$m = vue.defineComponent({
     name: "MEditorAddPageBox"
   });
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$l,
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$m,
     setup(__props) {
       const services = vue.inject("services");
       const clickHandler = () => {
@@ -2863,16 +3139,16 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-          vue.createElementVNode("div", _hoisted_2$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.createElementVNode("div", _hoisted_2$a, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$4
+              _hoisted_3$5
             ])
           ])
         ]);
@@ -2880,12 +3156,12 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor" };
-  const __default__$k = vue.defineComponent({
+  const _hoisted_1$g = { class: "m-editor" };
+  const __default__$l = vue.defineComponent({
     name: "MEditorFramework"
   });
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$k,
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$l,
     props: {
       codeOptions: { default: () => ({}) }
     },
@@ -2954,7 +3230,7 @@
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
           vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
             key: 0,
@@ -2962,7 +3238,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$q, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$s, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2981,7 +3257,7 @@
             ]),
             center: vue.withCtx(() => [
               vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$p)
+                vue.createVNode(_sfc_main$r)
               ])
             ]),
             _: 2
@@ -3003,16 +3279,16 @@
     }
   });
 
-  const _hoisted_1$d = {
+  const _hoisted_1$f = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$7 = { class: "el-dropdown-link menubar-menu-button" };
-  const __default__$j = vue.defineComponent({
+  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+  const __default__$k = vue.defineComponent({
     name: "MEditorToolButton"
   });
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$j,
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$k,
     props: {
       data: { default: () => ({
         type: "text",
@@ -3087,7 +3363,7 @@
           __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             __props.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -3101,7 +3377,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3118,7 +3394,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3151,7 +3427,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$7, [
+              vue.createElementVNode("span", _hoisted_2$9, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -3168,11 +3444,11 @@
     }
   });
 
-  const __default__$i = vue.defineComponent({
+  const __default__$j = vue.defineComponent({
     name: "MEditorNavMenu"
   });
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$i,
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$j,
     props: {
       data: { default: () => ({}) },
       height: { default: 35 }
@@ -3330,7 +3606,7 @@
               style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$p, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -3342,12 +3618,12 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor-props-panel" };
-  const __default__$h = vue.defineComponent({
+  const _hoisted_1$e = { class: "m-editor-props-panel" };
+  const __default__$i = vue.defineComponent({
     name: "MEditorPropsPanel"
   });
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$h,
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$i,
     emits: ["mounted"],
     setup(__props, { expose, emit }) {
       const internalInstance = vue.getCurrentInstance();
@@ -3392,7 +3668,7 @@
       };
       expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -3409,7 +3685,7 @@
     }
   });
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "SearchInput",
     emits: ["search"],
     setup(__props, { emit }) {
@@ -3449,10 +3725,10 @@
     return target;
   };
 
-  const _sfc_main$j = {};
+  const _sfc_main$l = {};
 
-  const _hoisted_1$b = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$6 = /*#__PURE__*/vue.createElementVNode("g", {
+  const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$8 = /*#__PURE__*/vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
@@ -3462,49 +3738,49 @@
     }),
     /*#__PURE__*/vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
   ], -1);
-  const _hoisted_3$3 = [
-    _hoisted_2$6
+  const _hoisted_3$4 = [
+    _hoisted_2$8
   ];
 
   function _sfc_render$2(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_3$3))
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_3$4))
   }
-  const AppManageIcon = /*#__PURE__*/_export_sfc(_sfc_main$j, [['render',_sfc_render$2]]);
+  const AppManageIcon = /*#__PURE__*/_export_sfc(_sfc_main$l, [['render',_sfc_render$2]]);
 
-  const _sfc_main$i = {};
+  const _sfc_main$k = {};
 
-  const _hoisted_1$a = {
+  const _hoisted_1$c = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$5 = /*#__PURE__*/vue.createStaticVNode("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2);
-  const _hoisted_4$3 = [
-    _hoisted_2$5
+  const _hoisted_2$7 = /*#__PURE__*/vue.createStaticVNode("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2);
+  const _hoisted_4$4 = [
+    _hoisted_2$7
   ];
 
   function _sfc_render$1(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, _hoisted_4$3))
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_4$4))
   }
-  const CodeIcon = /*#__PURE__*/_export_sfc(_sfc_main$i, [['render',_sfc_render$1]]);
+  const CodeIcon = /*#__PURE__*/_export_sfc(_sfc_main$k, [['render',_sfc_render$1]]);
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$b = {
     key: 0,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.createTextVNode("确认");
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const _hoisted_4$2 = {
+  const _hoisted_2$6 = /* @__PURE__ */ vue.createTextVNode("确认");
+  const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("关闭");
+  const _hoisted_4$3 = {
     key: 1,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const __default__$g = vue.defineComponent({
+  const _hoisted_5$2 = /* @__PURE__ */ vue.createTextVNode("关闭");
+  const __default__$h = vue.defineComponent({
     name: "MEditorCodeDraftEditor"
   });
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$g,
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$h,
     props: {
       id: null,
       content: null,
@@ -3587,7 +3863,7 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
         }, [
-          vue.createVNode(_sfc_main$s, {
+          vue.createVNode(_sfc_main$u, {
             ref_key: "codeEditor",
             ref: codeEditor,
             class: "m-editor-container",
@@ -3596,7 +3872,7 @@
             language: __props.language,
             options: vue.unref(codeOptions)
           }, null, 8, ["init-values", "language", "options"]),
-          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -3613,21 +3889,20 @@
               onClick: saveAndClose
             }, {
               default: vue.withCtx(() => [
-                _hoisted_2$4
+                _hoisted_2$6
               ]),
               _: 1
             }),
             vue.createVNode(vue.unref(design.TMagicButton), {
-              type: "primary",
               class: "button",
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$2
+                _hoisted_3$3
               ]),
               _: 1
             })
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -3639,12 +3914,11 @@
               _: 1
             }),
             vue.createVNode(vue.unref(design.TMagicButton), {
-              type: "primary",
               class: "button",
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_5$1
+                _hoisted_5$2
               ]),
               _: 1
             })
@@ -3654,15 +3928,15 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "code-name-wrapper" };
-  const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
-  const _hoisted_3$1 = { class: "code-name-wrapper" };
-  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-  const __default__$f = vue.defineComponent({
+  const _hoisted_1$a = { class: "code-name-wrapper" };
+  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
+  const _hoisted_3$2 = { class: "code-name-wrapper" };
+  const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
+  const __default__$g = vue.defineComponent({
     name: "MEditorFunctionEditor"
   });
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$f,
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$g,
     props: {
       id: null,
       name: null,
@@ -3780,8 +4054,8 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$8, [
-              _hoisted_2$3,
+            vue.createElementVNode("div", _hoisted_1$a, [
+              _hoisted_2$5,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 class: "code-name-input",
                 modelValue: codeName.value,
@@ -3789,8 +4063,8 @@
                 disabled: !__props.editable
               }, null, 8, ["modelValue", "disabled"])
             ]),
-            vue.createElementVNode("div", _hoisted_3$1, [
-              _hoisted_4$1,
+            vue.createElementVNode("div", _hoisted_3$2, [
+              _hoisted_4$2,
               vue.createVNode(_component_m_form_table, {
                 style: { "width": "800px" },
                 config: tableConfig,
@@ -3803,7 +4077,7 @@
             ])
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$h, {
+            vue.createVNode(_sfc_main$j, {
               ref_key: "codeDraftEditor",
               ref: codeDraftEditor,
               id: __props.id,
@@ -3822,15 +4096,15 @@
     }
   });
 
-  const _hoisted_1$7 = {
+  const _hoisted_1$9 = {
     key: 0,
     class: "m-editor-code-block-editor-panel"
   };
-  const __default__$e = vue.defineComponent({
+  const __default__$f = vue.defineComponent({
     name: "MEditorCodeBlockEditor"
   });
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$e,
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$f,
     props: {
       paramsColConfig: null
     },
@@ -3883,16 +4157,16 @@
           "before-close": handleClose
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$q, {
+            vue.createVNode(_sfc_main$s, {
               left: left.value,
               "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
               "min-left": 45,
               class: "code-editor-layout"
             }, {
               center: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
-                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
+                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
                     key: 0,
                     ref_key: "functionEditor",
                     ref: functionEditor,
@@ -3915,25 +4189,30 @@
     }
   });
 
-  const _hoisted_1$6 = { class: "search-wrapper" };
-  const _hoisted_2$2 = /* @__PURE__ */ vue.createTextVNode("新增");
-  const _hoisted_3 = ["id"];
-  const _hoisted_4 = { class: "list-item" };
-  const _hoisted_5 = {
+  const _hoisted_1$8 = { class: "search-wrapper" };
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createTextVNode("新增");
+  const _hoisted_3$1 = ["id"];
+  const _hoisted_4$1 = { class: "list-item" };
+  const _hoisted_5$1 = {
     key: 2,
     class: "right-tool"
   };
-  const __default__$d = vue.defineComponent({
+  const __default__$e = vue.defineComponent({
     name: "MEditorCodeBlockList"
   });
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$d,
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$e,
     props: {
       customError: null,
       paramsColConfig: null
     },
     setup(__props) {
       const props = __props;
+      const treeProps = {
+        children: "children",
+        label: "name",
+        value: "id"
+      };
       const { codeBlockService, depService, editorService } = vue.inject("services") || {};
       const codeList = vue.computed(
         () => Object.values(depService?.targets["code-block"] || {}).map((target) => {
@@ -4014,8 +4293,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$6, [
-                vue.createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$8, [
+                vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -4024,7 +4303,7 @@
                   onClick: createCodeBlock
                 }, {
                   default: vue.withCtx(() => [
-                    _hoisted_2$2
+                    _hoisted_2$4
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("", true)
@@ -4039,6 +4318,7 @@
               "default-expanded-keys": vue.unref(expandedKeys),
               "expand-on-click-node": false,
               data: vue.unref(codeList),
+              props: treeProps,
               "highlight-current": true,
               "filter-node-method": filterNode,
               onNodeClick: clickHandler
@@ -4048,7 +4328,7 @@
                   id: data.id,
                   class: "list-container"
                 }, [
-                  vue.createElementVNode("div", _hoisted_4, [
+                  vue.createElementVNode("div", _hoisted_4$1, [
                     data.type === "code" ? (vue.openBlock(), vue.createBlock(CodeIcon, {
                       key: 0,
                       class: "codeIcon"
@@ -4060,14 +4340,14 @@
                     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_5, [
+                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
                       vue.createVNode(vue.unref(design.TMagicTooltip), {
                         effect: "dark",
                         content: vue.unref(editable) ? "编辑" : "查看",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$w, {
+                          vue.createVNode(_sfc_main$A, {
                             icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -4082,7 +4362,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$w, {
+                          vue.createVNode(_sfc_main$A, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4096,11 +4376,11 @@
                       })
                     ])) : vue.createCommentVNode("", true)
                   ])
-                ], 8, _hoisted_3)
+                ], 8, _hoisted_3$1)
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "data"]),
-            vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+            vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
               key: 0,
               paramsColConfig: __props.paramsColConfig
             }, {
@@ -4116,6 +4396,263 @@
     }
   });
 
+  const _hoisted_1$7 = /* @__PURE__ */ vue.createTextVNode("确定");
+  const _hoisted_2$3 = /* @__PURE__ */ vue.createTextVNode("关闭");
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    __name: "DataSourceConfigPanel",
+    props: {
+      title: null,
+      values: null
+    },
+    emits: ["submit"],
+    setup(__props, { expose, emit }) {
+      const props = __props;
+      const type = vue.ref("base");
+      const services = vue.inject("services");
+      const size = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
+      const dataSourceConfig = vue.computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
+      const form$1 = vue.ref();
+      const initValues = vue.ref({});
+      vue.watchEffect(() => {
+        initValues.value = props.values;
+        type.value = props.values.type || "base";
+      });
+      const changeHandler = (value) => {
+        if (value.type === type.value) {
+          return;
+        }
+        type.value = value.type || "base";
+        initValues.value = value;
+      };
+      const submitHandler = async () => {
+        try {
+          const values = await form$1.value?.submitForm();
+          emit("submit", values);
+        } catch (error) {
+          design.tMagicMessage.error(error.message);
+        }
+      };
+      const visible = vue.ref(false);
+      const hide = () => {
+        visible.value = false;
+      };
+      expose({
+        show() {
+          visible.value = true;
+        },
+        hide
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDrawer), {
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          title: __props.title,
+          "close-on-press-escape": true,
+          "append-to-body": true,
+          "show-close": true,
+          "close-on-click-modal": true,
+          size: vue.unref(size)
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                type: "primary",
+                onClick: submitHandler
+              }, {
+                default: vue.withCtx(() => [
+                  _hoisted_1$7
+                ]),
+                _: 1
+              }),
+              vue.createVNode(vue.unref(design.TMagicButton), { onClick: hide }, {
+                default: vue.withCtx(() => [
+                  _hoisted_2$3
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(form.MForm), {
+              ref_key: "form",
+              ref: form$1,
+              config: vue.unref(dataSourceConfig),
+              "init-values": initValues.value,
+              onChange: changeHandler
+            }, null, 8, ["config", "init-values"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title", "size"]);
+      };
+    }
+  });
+
+  const _hoisted_1$6 = { class: "search-wrapper" };
+  const _hoisted_2$2 = /* @__PURE__ */ vue.createTextVNode("新增");
+  const _hoisted_3 = ["id"];
+  const _hoisted_4 = { class: "list-item" };
+  const _hoisted_5 = {
+    key: 2,
+    class: "right-tool"
+  };
+  const __default__$d = vue.defineComponent({
+    name: "MEditorDataSourceListPanel"
+  });
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$d,
+    setup(__props) {
+      const services = vue.inject("services", {});
+      const { dataSourceService, depService } = vue.inject("services") || {};
+      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" }))
+          }))
+        }))
+      );
+      const editDialog = vue.ref();
+      const dataSourceValues = vue.ref({});
+      const addHandler = () => {
+        if (!editDialog.value)
+          return;
+        dataSourceValues.value = {};
+        editDialog.value.show();
+      };
+      const editHandler = (id) => {
+        if (!editDialog.value || !services)
+          return;
+        dataSourceValues.value = {
+          ...dataSourceService?.getDataSourceById(id)
+        };
+        editDialog.value.show();
+      };
+      const removeHandler = async (id) => {
+        await design.tMagicMessageBox.confirm("确定删除?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        dataSourceService?.remove(id);
+      };
+      const submitDataSourceHandler = (value) => {
+        if (!services)
+          return;
+        if (value.id) {
+          dataSourceService?.update(value);
+        } else {
+          dataSourceService?.add(value);
+        }
+        editDialog.value?.hide();
+      };
+      const tree = vue.ref();
+      const filterTextChangeHandler = (val) => {
+        tree.value?.filter(val);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1$6, [
+              vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                type: "primary",
+                size: "small",
+                onClick: addHandler
+              }, {
+                default: vue.withCtx(() => [
+                  _hoisted_2$2
+                ]),
+                _: 1
+              })
+            ]),
+            vue.createVNode(vue.unref(design.TMagicTree), {
+              ref_key: "tree",
+              ref: tree,
+              class: "magic-editor-layer-tree",
+              "node-key": "id",
+              "empty-text": "暂无代码块",
+              "default-expand-all": "",
+              "expand-on-click-node": false,
+              data: vue.unref(list),
+              "highlight-current": true
+            }, {
+              default: vue.withCtx(({ data }) => [
+                vue.createElementVNode("div", {
+                  id: data.id,
+                  class: "list-container"
+                }, [
+                  vue.createElementVNode("div", _hoisted_4, [
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                      key: 0,
+                      class: "codeIcon",
+                      icon: vue.unref(iconsVue.Coin)
+                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                      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_5, [
+                      vue.createVNode(vue.unref(design.TMagicTooltip), {
+                        effect: "dark",
+                        content: "编辑",
+                        placement: "bottom"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(_sfc_main$A, {
+                            class: "edit-icon",
+                            icon: vue.unref(iconsVue.Edit),
+                            onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
+                          }, null, 8, ["icon", "onClick"])
+                        ]),
+                        _: 2
+                      }, 1024),
+                      vue.createVNode(vue.unref(design.TMagicTooltip), {
+                        effect: "dark",
+                        content: "删除",
+                        placement: "bottom"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(_sfc_main$A, {
+                            icon: vue.unref(iconsVue.Close),
+                            class: "edit-icon",
+                            onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
+                          }, null, 8, ["icon", "onClick"])
+                        ]),
+                        _: 2
+                      }, 1024),
+                      vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                        id: data.id,
+                        data: data.codeBlockContent
+                      })
+                    ])) : vue.createCommentVNode("", true)
+                  ])
+                ], 8, _hoisted_3)
+              ]),
+              _: 3
+            }, 8, ["data"]),
+            vue.createVNode(_sfc_main$f, {
+              ref_key: "editDialog",
+              ref: editDialog,
+              values: dataSourceValues.value,
+              title: typeof dataSourceValues.value.id !== "undefined" ? `编辑${dataSourceValues.value.title}` : "新增",
+              onSubmit: submitDataSourceHandler
+            }, null, 8, ["values", "title"])
+          ]),
+          _: 3
+        });
+      };
+    }
+  });
+
   const _hoisted_1$5 = ["onClick", "onDragstart"];
   const __default__$c = vue.defineComponent({
     name: "MEditorComponentListPanel"
@@ -4197,7 +4734,7 @@
               "model-value": vue.unref(collapseValue)
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -4205,7 +4742,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -4220,7 +4757,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$w, {
+                              vue.createVNode(_sfc_main$A, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -4343,7 +4880,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$p, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -4495,6 +5032,8 @@
       const clicked = vue.ref(false);
       const treeProps = {
         children: "items",
+        label: "name",
+        value: "id",
         disabled: (data) => Boolean(data.items?.length),
         class: (data) => {
           if (clicked.value || utils.isPage(data))
@@ -4674,7 +5213,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
+            vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
             vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
               class: "magic-editor-layer-tree",
@@ -4743,7 +5282,7 @@
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...__default__$8,
     props: {
-      data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block"] }) },
+      data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block", "data-source"] }) },
       layerContentMenu: null
     },
     setup(__props, { expose }) {
@@ -4756,7 +5295,7 @@
           "component-list": {
             $key: "component-list",
             type: "component",
-            icon: iconsVue.Coin,
+            icon: iconsVue.Goods,
             text: "组件",
             component: _sfc_main$d,
             slots: {}
@@ -4764,7 +5303,7 @@
           layer: {
             $key: "layer",
             type: "component",
-            icon: iconsVue.Files,
+            icon: iconsVue.List,
             text: "已选组件",
             props: {
               layerContentMenu: props.layerContentMenu
@@ -4777,6 +5316,14 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
+            component: _sfc_main$g,
+            slots: {}
+          },
+          "data-source": {
+            $key: "data-source",
+            type: "component",
+            icon: iconsVue.Coin,
+            text: "数据源",
             component: _sfc_main$e,
             slots: {}
           }
@@ -4809,7 +5356,7 @@
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5030,14 +5577,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           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$w, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -5053,7 +5600,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$w, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -5125,7 +5672,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$n, {
+                        vue.createVNode(_sfc_main$p, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -5133,7 +5680,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$n, {
+                        vue.createVNode(_sfc_main$p, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -5963,7 +6510,6 @@
      */
     async setCodeDsl(codeDsl2) {
       this.state.codeDsl = codeDsl2;
-      info("[code-block]:code-dsl-change", this.state.codeDsl);
       this.emit("code-dsl-change", this.state.codeDsl);
     }
     /**
@@ -6201,6 +6747,166 @@
   }
   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: []
+        }
+      ]
+    }
+  ];
+  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: [],
+      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 {
     /**
      * 如何识别目标
@@ -6549,6 +7255,10 @@
       type: Object,
       default: () => ({})
     },
+    dataScourceConfigs: {
+      type: Object,
+      default: () => ({})
+    },
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
       type: [Object, Function]
@@ -6604,6 +7314,12 @@
       return false;
     }
   });
+  const createDataSourceTarget = (id, ds) => new Target({
+    type: "data-source",
+    id,
+    name: ds.title || `${id}`,
+    isTarget: (key, value) => typeof value === "string" && value.includes(`${id}`)
+  });
 
   const initServiceState = (props, {
     editorService,
@@ -6683,7 +7399,26 @@
       codeBlockService.resetState();
     });
   };
-  const initServiceEvents = (props, emit, { editorService, codeBlockService, depService }) => {
+  const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
+    const targetAddHandler = (target) => {
+      if (target.type !== "data-source")
+        return;
+      const root = editorService.get("root");
+      if (!root)
+        return;
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    };
+    const targetRemoveHandler = (id) => {
+      const root = editorService.get("root");
+      if (!root?.dataSourceDeps)
+        return;
+      delete root.dataSourceDeps[id];
+    };
+    depService.on("add-target", targetAddHandler);
+    depService.on("remove-target", targetRemoveHandler);
     const rootChangeHandler = async (value, preValue) => {
       const nodeId = editorService.get("node")?.id || props.defaultSelected;
       let node;
@@ -6703,15 +7438,21 @@
         emit("update:modelValue", value);
       }
       value.codeBlocks = value.codeBlocks || {};
+      value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
+      dataSourceService.set("dataSources", value.dataSources);
       depService.removeTargets("code-block");
       Object.entries(value.codeBlocks).forEach(([id, code]) => {
         depService.addTarget(createCodeBlockTarget(id, code));
       });
+      value.dataSources.forEach((ds) => {
+        depService.addTarget(createDataSourceTarget(ds.id, ds));
+      });
       if (value && Array.isArray(value.items)) {
         depService.collect(value.items, true);
       } else {
         depService.clear();
+        delete value.dataSourceDeps;
       }
     };
     const nodeAddHandler = (nodes) => {
@@ -6743,7 +7484,23 @@
     };
     codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
     codeBlockService.on("remove", codeBlockRemoveHandler);
+    const dataSourceAddHandler = (config) => {
+      depService.addTarget(createDataSourceTarget(config.id, config));
+    };
+    const dataSourceUpdateHandler = (config) => {
+      if (config.title) {
+        depService.getTarget(config.id).name = config.title;
+      }
+    };
+    const dataSourceRemoveHandler = (id) => {
+      depService.removeTarget(id);
+    };
+    dataSourceService.on("add", dataSourceAddHandler);
+    dataSourceService.on("update", dataSourceUpdateHandler);
+    dataSourceService.on("remove", dataSourceRemoveHandler);
     vue.onUnmounted(() => {
+      depService.off("add-target", targetAddHandler);
+      depService.off("remove-target", targetRemoveHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
       editorService.off("add", nodeAddHandler);
@@ -6751,17 +7508,20 @@
       editorService.off("update", nodeUpdateHandler);
       codeBlockService.off("addOrUpdate", codeBlockAddOrUpdateHandler);
       codeBlockService.off("remove", codeBlockRemoveHandler);
+      dataSourceService.off("add", dataSourceAddHandler);
+      dataSourceService.off("update", dataSourceUpdateHandler);
+      dataSourceService.off("remove", dataSourceRemoveHandler);
     });
   };
 
   const _sfc_main = vue.defineComponent({
     name: "m-editor",
     components: {
-      TMagicNavMenu: _sfc_main$m,
+      TMagicNavMenu: _sfc_main$o,
       Sidebar: _sfc_main$9,
       Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$l,
-      Framework: _sfc_main$o
+      PropsPanel: _sfc_main$n,
+      Framework: _sfc_main$q
     },
     props: editorProps,
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -6775,7 +7535,8 @@
         uiService,
         storageService,
         codeBlockService,
-        depService
+        depService,
+        dataSourceService
       };
       initServiceEvents(props, emit, services);
       initServiceState(props, services);
@@ -6900,38 +7661,42 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$t);
-      app.component("m-fields-code-link", _sfc_main$y);
-      app.component("m-fields-vs-code", _sfc_main$z);
-      app.component("magic-code-editor", _sfc_main$s);
-      app.component("m-fields-code-select", _sfc_main$x);
-      app.component("m-fields-code-select-col", _sfc_main$v);
-      app.component("m-fields-event-select", _sfc_main$u);
+      app.component("m-fields-ui-select", _sfc_main$v);
+      app.component("m-fields-code-link", _sfc_main$C);
+      app.component("m-fields-vs-code", _sfc_main$D);
+      app.component("magic-code-editor", _sfc_main$u);
+      app.component("m-fields-code-select", _sfc_main$B);
+      app.component("m-fields-code-select-col", _sfc_main$z);
+      app.component("m-fields-event-select", _sfc_main$x);
+      app.component("m-fields-data-source-fields", _sfc_main$y);
+      app.component("m-fields-key-value", _sfc_main$w);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockList = _sfc_main$e;
+  exports.CodeBlockList = _sfc_main$g;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$x;
-  exports.CodeSelectCol = _sfc_main$v;
+  exports.CodeSelect = _sfc_main$B;
+  exports.CodeSelectCol = _sfc_main$z;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
-  exports.EventSelect = _sfc_main$u;
+  exports.DataSourceFields = _sfc_main$y;
+  exports.EventSelect = _sfc_main$x;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$w;
+  exports.Icon = _sfc_main$A;
+  exports.KeyValue = _sfc_main$w;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$a;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$q;
-  exports.PropsPanel = _sfc_main$l;
-  exports.TMagicCodeEditor = _sfc_main$s;
+  exports.LayoutContainer = _sfc_main$s;
+  exports.PropsPanel = _sfc_main$n;
+  exports.TMagicCodeEditor = _sfc_main$u;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$n;
+  exports.ToolButton = _sfc_main$p;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;
@@ -6942,7 +7707,7 @@
   exports.editorService = editorService;
   exports.error = error;
   exports.eventsService = eventsService;
-  exports.fillConfig = fillConfig;
+  exports.fillConfig = fillConfig$1;
   exports.fixNodeLeft = fixNodeLeft;
   exports.fixNodePosition = fixNodePosition;
   exports.generatePageName = generatePageName;