@tmagic/editor 1.2.14 → 1.3.0-alpha.0

package/dist/tmagic-editor.js

@@ -1,23 +1,24 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, Fragment, renderList, createTextVNode, withModifiers, createCommentVNode, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, createStaticVNode, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, Fragment, renderList, watchEffect, withModifiers, createCommentVNode, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
-import { TMagicCard, TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicInput, tMagicMessageBox, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
+import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicPopover } from '@tmagic/design';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
-import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
-import { createValues, MForm } from '@tmagic/form';
+import { Edit, View, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Coin, Aim, Files, CopyDocument, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { createValues, MFormDialog, MForm } from '@tmagic/form';
+import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
-import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
+import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
 import KeyController from 'keycon';
 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';
 
-const __default__$v = defineComponent({
+const __default__$w = defineComponent({
   name: "MEditorCode"
 });
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
-  ...__default__$v,
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...__default__$w,
   props: {
     model: null,
     name: null,
@@ -46,11 +47,11 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$u = defineComponent({
+const __default__$v = defineComponent({
   name: "MEditorCodeLink"
 });
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  ...__default__$u,
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...__default__$v,
   props: {
     config: null,
     model: null,
@@ -119,11 +120,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$t = defineComponent({
+const __default__$u = defineComponent({
   name: "MEditorCodeSelect"
 });
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
-  ...__default__$t,
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
+  ...__default__$u,
   props: {
     config: null,
     model: null,
@@ -140,7 +141,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       enableToggleMode: false,
       items: [
         {
-          type: "code-select-col"
+          type: "code-select-col",
+          labelWidth: 0
         }
       ]
     }));
@@ -181,12 +183,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = ["src"];
-const __default__$s = defineComponent({
+const _hoisted_1$n = ["src"];
+const __default__$t = defineComponent({
   name: "MEditorIcon"
 });
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  ...__default__$s,
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  ...__default__$t,
   props: {
     icon: null
   },
@@ -205,7 +207,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$j)
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$n)
         ]),
         _: 1
       })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -224,13 +226,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { class: "m-fields-code-select-col" };
-const _hoisted_2$a = { class: "code-select-container" };
-const __default__$r = defineComponent({
+const _hoisted_1$m = { class: "m-fields-code-select-col" };
+const _hoisted_2$e = { class: "code-select-container" };
+const __default__$s = defineComponent({
   name: "MEditorCodeSelectCol"
 });
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  ...__default__$r,
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  ...__default__$s,
   props: {
     config: null,
     model: null,
@@ -318,15 +320,15 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        createElementVNode("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
             model: __props.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          createVNode(_sfc_main$w, {
+          createVNode(_sfc_main$A, {
             class: "icon",
             icon: unref(editable) ? unref(Edit) : unref(View),
             onClick: editCode
@@ -342,17 +344,196 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createTextVNode("添加");
+const _sfc_main$y = /* @__PURE__ */ 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 = ref();
+    const fieldValues = ref({});
+    const filedTitle = 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 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 openBlock(), createElementBlock("div", _hoisted_1$l, [
+        createVNode(unref(MagicTable), {
+          data: __props.model[__props.name],
+          columns: filedColumns
+        }, null, 8, ["data"]),
+        createElementVNode("div", _hoisted_2$d, [
+          createVNode(unref(TMagicButton), {
+            size: "small",
+            type: "primary",
+            disabled: __props.disabled,
+            plain: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+          }, {
+            default: withCtx(() => [
+              _hoisted_3$8
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        createVNode(unref(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__ */ createTextVNode("添加事件");
-const __default__$q = defineComponent({
+const _hoisted_3$7 = /* @__PURE__ */ createTextVNode("添加事件");
+const __default__$r = defineComponent({
   name: "MEditorEventSelect"
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...__default__$q,
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  ...__default__$r,
   props: {
     config: null,
     model: null,
@@ -431,6 +612,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const codeActionConfig = computed(() => {
       const defaultCodeActionConfig = {
         type: "code-select-col",
+        labelWidth: 0,
         display: (mForm, { model }) => model.actionType === ActionType.CODE
       };
       return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -508,7 +690,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         unref(isOldVersion) ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -517,7 +699,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           name: "events",
           config: unref(tableConfig),
           onChange: onChangeHandler
-        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
+        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -525,7 +707,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
           }, {
             default: withCtx(() => [
-              _hoisted_3$5
+              _hoisted_3$7
             ]),
             _: 1
           }),
@@ -559,12 +741,106 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = /* @__PURE__ */ createTextVNode("取消");
-const __default__$p = defineComponent({
+const _hoisted_1$j = { class: "m-fields-key-value" };
+const _hoisted_2$b = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _hoisted_3$6 = /* @__PURE__ */ createTextVNode("添加");
+const _sfc_main$w = /* @__PURE__ */ 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 = ref([]);
+    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 openBlock(), createElementBlock("div", _hoisted_1$j, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            class: "m-fields-key-value-item",
+            key: index
+          }, [
+            createVNode(unref(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,
+            createVNode(unref(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"]),
+            createVNode(unref(TMagicButton), {
+              class: "m-fileds-key-value-delete",
+              type: "danger",
+              size: __props.size,
+              circle: "",
+              plain: "",
+              icon: unref(Delete),
+              onClick: ($event) => deleteHandler(index)
+            }, null, 8, ["size", "icon", "onClick"])
+          ]);
+        }), 128)),
+        createVNode(unref(TMagicButton), {
+          type: "primary",
+          size: __props.size,
+          plain: "",
+          icon: unref(Plus),
+          onClick: addHandler
+        }, {
+          default: withCtx(() => [
+            _hoisted_3$6
+          ]),
+          _: 1
+        }, 8, ["size", "icon"])
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$i = /* @__PURE__ */ createTextVNode("取消");
+const __default__$q = defineComponent({
   name: "MEditorUISelect"
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  ...__default__$p,
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
   props: {
     config: null,
     model: null,
@@ -626,7 +902,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$g
+            _hoisted_1$i
           ]),
           _: 1
         }, 8, ["icon"])
@@ -674,11 +950,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const __default__$o = defineComponent({
+const __default__$p = defineComponent({
   name: "MEditorCodeEditor"
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  ...__default__$o,
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$p,
   props: {
     initValues: null,
     modifiedValues: null,
@@ -807,11 +1083,11 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const __default__$n = defineComponent({
+const __default__$o = defineComponent({
   name: "MEditorResizer"
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
@@ -843,11 +1119,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$m = defineComponent({
+const __default__$n = defineComponent({
   name: "MEditorLayout"
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: {
     left: null,
     right: null,
@@ -955,7 +1231,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$r, { onChange: changeLeft })
+          createVNode(_sfc_main$t, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -964,7 +1240,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$r, { onChange: changeRight }),
+          createVNode(_sfc_main$t, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
             style: normalizeStyle(`width: ${__props.right}px`)
@@ -977,7 +1253,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const fillConfig = (config = []) => [
+const fillConfig$1 = (config = []) => [
   {
     type: "tab",
     items: [
@@ -1133,7 +1409,8 @@ const fillConfig = (config = []) => [
         items: [
           {
             name: "events",
-            type: "event-select"
+            type: "event-select",
+            labelWidth: 0
           }
         ]
       },
@@ -1763,7 +2040,7 @@ class Props extends BaseService {
     this.emit("props-configs-change");
   }
   async fillConfig(config) {
-    return fillConfig(config);
+    return fillConfig$1(config);
   }
   /**
    * 为指定类型组件设置组件属性表单配置
@@ -1829,7 +2106,7 @@ class Props extends BaseService {
     };
   }
   async createId(type) {
-    return `${type}_${this.guid()}`;
+    return `${type}_${guid()}`;
   }
   /**
    * 将组件与组件的子元素配置中的id都设置成一个新的ID
@@ -1872,18 +2149,6 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  guid(digit = 8) {
-    return "x".repeat(digit).replace(/[xy]/g, (c) => {
-      const r = Math.random() * 16 | 0;
-      const v = c === "x" ? r : r & 3 | 8;
-      return v.toString(16);
-    });
-  }
 }
 const propsService = new Props();
 
@@ -2842,14 +3107,14 @@ const useStage = (stageOptions) => {
   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__ */ createElementVNode("p", null, "新增页面", -1);
-const __default__$l = defineComponent({
+const _hoisted_1$h = { class: "m-editor-empty-panel" };
+const _hoisted_2$a = { class: "m-editor-empty-content" };
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
+const __default__$m = defineComponent({
   name: "MEditorAddPageBox"
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   setup(__props) {
     const services = inject("services");
     const clickHandler = () => {
@@ -2865,16 +3130,16 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createElementVNode("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        createElementVNode("div", _hoisted_2$a, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$w, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$A, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$4
+            _hoisted_3$5
           ])
         ])
       ]);
@@ -2882,12 +3147,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = { class: "m-editor" };
-const __default__$k = defineComponent({
+const _hoisted_1$g = { class: "m-editor" };
+const __default__$l = defineComponent({
   name: "MEditorFramework"
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
   props: {
     codeOptions: { default: () => ({}) }
   },
@@ -2956,7 +3221,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
@@ -2964,7 +3229,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$q, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$s, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2983,7 +3248,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$p)
+              createVNode(_sfc_main$r)
             ])
           ]),
           _: 2
@@ -3005,16 +3270,16 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = defineComponent({
+const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+const __default__$k = defineComponent({
   name: "MEditorToolButton"
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: {
     data: { default: () => ({
       type: "text",
@@ -3089,7 +3354,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$d, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -3103,7 +3368,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$w, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$A, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3120,7 +3385,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$w, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$A, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3153,7 +3418,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$7, [
+            createElementVNode("span", _hoisted_2$9, [
               createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -3170,11 +3435,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$i = defineComponent({
+const __default__$j = defineComponent({
   name: "MEditorNavMenu"
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: {
     data: { default: () => ({}) },
     height: { default: 35 }
@@ -3332,7 +3597,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$n, {
+              return openBlock(), createBlock(_sfc_main$p, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3344,12 +3609,12 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = { class: "m-editor-props-panel" };
-const __default__$h = defineComponent({
+const _hoisted_1$e = { class: "m-editor-props-panel" };
+const __default__$i = defineComponent({
   name: "MEditorPropsPanel"
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
     const internalInstance = getCurrentInstance();
@@ -3394,7 +3659,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
     expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -3411,7 +3676,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SearchInput",
   emits: ["search"],
   setup(__props, { emit }) {
@@ -3427,9 +3692,18 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         size: "small",
         placeholder: "输入关键字进行过滤",
         clearable: "",
-        "prefix-icon": unref(Search),
         onInput: filterTextChangeHandler
-      }, null, 8, ["modelValue", "prefix-icon"]);
+      }, {
+        prefix: withCtx(() => [
+          createVNode(unref(TMagicIcon), null, {
+            default: withCtx(() => [
+              createVNode(unref(Search))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
     };
   }
 });
@@ -3442,14 +3716,10 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$j = {};
+const _sfc_main$l = {};
 
-const _hoisted_1$b = {
-  width: "16px",
-  height: "16px",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_2$6 = /*#__PURE__*/createElementVNode("g", {
+const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$8 = /*#__PURE__*/createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
@@ -3459,51 +3729,49 @@ const _hoisted_2$6 = /*#__PURE__*/createElementVNode("g", {
   }),
   /*#__PURE__*/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 (openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_3$3))
+  return (openBlock(), 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 = {
-  width: "32px",
-  height: "32px",
+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__*/createStaticVNode("<title>gsd-icon-line-Universal-code</title><desc>Created with Sketch.</desc><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>", 4);
-const _hoisted_6 = [
-  _hoisted_2$5
+const _hoisted_2$7 = /*#__PURE__*/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 (openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_6))
+  return (openBlock(), 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__ */ createTextVNode("确认");
-const _hoisted_3$2 = /* @__PURE__ */ createTextVNode("关闭");
-const _hoisted_4$2 = {
+const _hoisted_2$6 = /* @__PURE__ */ createTextVNode("确认");
+const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("关闭");
+const _hoisted_4$3 = {
   key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("关闭");
-const __default__$g = defineComponent({
+const _hoisted_5$2 = /* @__PURE__ */ createTextVNode("关闭");
+const __default__$h = defineComponent({
   name: "MEditorCodeDraftEditor"
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   props: {
     id: null,
     content: null,
@@ -3586,7 +3854,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
       }, [
-        createVNode(_sfc_main$s, {
+        createVNode(_sfc_main$u, {
           ref_key: "codeEditor",
           ref: codeEditor,
           class: "m-editor-container",
@@ -3595,7 +3863,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           language: __props.language,
           options: unref(codeOptions)
         }, null, 8, ["init-values", "language", "options"]),
-        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -3612,21 +3880,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onClick: saveAndClose
           }, {
             default: withCtx(() => [
-              _hoisted_2$4
+              _hoisted_2$6
             ]),
             _: 1
           }),
           createVNode(unref(TMagicButton), {
-            type: "primary",
             class: "button",
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_3$2
+              _hoisted_3$3
             ]),
             _: 1
           })
-        ])) : (openBlock(), createElementBlock("div", _hoisted_4$2, [
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4$3, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -3638,12 +3905,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             _: 1
           }),
           createVNode(unref(TMagicButton), {
-            type: "primary",
             class: "button",
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_5$1
+              _hoisted_5$2
             ]),
             _: 1
           })
@@ -3653,15 +3919,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "code-name-wrapper" };
-const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
-const _hoisted_3$1 = { class: "code-name-wrapper" };
-const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-const __default__$f = defineComponent({
+const _hoisted_1$a = { class: "code-name-wrapper" };
+const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
+const _hoisted_3$2 = { class: "code-name-wrapper" };
+const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
+const __default__$g = defineComponent({
   name: "MEditorFunctionEditor"
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
   props: {
     id: null,
     name: null,
@@ -3779,8 +4045,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$8, [
-            _hoisted_2$3,
+          createElementVNode("div", _hoisted_1$a, [
+            _hoisted_2$5,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
               modelValue: codeName.value,
@@ -3788,8 +4054,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               disabled: !__props.editable
             }, null, 8, ["modelValue", "disabled"])
           ]),
-          createElementVNode("div", _hoisted_3$1, [
-            _hoisted_4$1,
+          createElementVNode("div", _hoisted_3$2, [
+            _hoisted_4$2,
             createVNode(_component_m_form_table, {
               style: { "width": "800px" },
               config: tableConfig,
@@ -3802,7 +4068,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createVNode(_sfc_main$h, {
+          createVNode(_sfc_main$j, {
             ref_key: "codeDraftEditor",
             ref: codeDraftEditor,
             id: __props.id,
@@ -3821,15 +4087,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "m-editor-code-block-editor-panel"
 };
-const __default__$e = defineComponent({
+const __default__$f = defineComponent({
   name: "MEditorCodeBlockEditor"
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$f,
   props: {
     paramsColConfig: null
   },
@@ -3882,16 +4148,16 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         "before-close": handleClose
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$q, {
+          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: withCtx(() => [
-              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
-                codeConfig.value ? (openBlock(), createBlock(_sfc_main$g, {
+                codeConfig.value ? (openBlock(), createBlock(_sfc_main$i, {
                   key: 0,
                   ref_key: "functionEditor",
                   ref: functionEditor,
@@ -3914,25 +4180,30 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = { class: "code-header-wrapper" };
-const _hoisted_2$2 = /* @__PURE__ */ 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__ */ 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 = defineComponent({
+const __default__$e = defineComponent({
   name: "MEditorCodeBlockList"
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$g = /* @__PURE__ */ 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 } = inject("services") || {};
     const codeList = computed(
       () => Object.values(depService?.targets["code-block"] || {}).map((target) => {
@@ -4010,11 +4281,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list" }, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$6, [
-              createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$8, [
+              createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
               unref(editable) ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
@@ -4023,7 +4294,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 onClick: createCodeBlock
               }, {
                 default: withCtx(() => [
-                  _hoisted_2$2
+                  _hoisted_2$4
                 ]),
                 _: 1
               })) : createCommentVNode("", true)
@@ -4038,6 +4309,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             "default-expanded-keys": unref(expandedKeys),
             "expand-on-click-node": false,
             data: unref(codeList),
+            props: treeProps,
             "highlight-current": true,
             "filter-node-method": filterNode,
             onNodeClick: clickHandler
@@ -4047,7 +4319,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 id: data.id,
                 class: "list-container"
               }, [
-                createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_4$1, [
                   data.type === "code" ? (openBlock(), createBlock(CodeIcon, {
                     key: 0,
                     class: "codeIcon"
@@ -4057,16 +4329,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     class: "compIcon"
                   })) : createCommentVNode("", true),
                   createElementVNode("span", {
-                    class: normalizeClass(["code-name", { code: data.type === "code", hook: data.type === "key" }])
-                  }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
-                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    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_5$1, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
                       content: unref(editable) ? "编辑" : "查看",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$w, {
+                        createVNode(_sfc_main$A, {
                           icon: unref(editable) ? unref(Edit) : unref(View),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -4081,7 +4353,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$w, {
+                        createVNode(_sfc_main$A, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4095,11 +4367,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     })
                   ])) : createCommentVNode("", true)
                 ])
-              ], 8, _hoisted_3)
+              ], 8, _hoisted_3$1)
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "data"]),
-          unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$f, {
+          unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$h, {
             key: 0,
             paramsColConfig: __props.paramsColConfig
           }, {
@@ -4115,6 +4387,263 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$7 = /* @__PURE__ */ createTextVNode("确定");
+const _hoisted_2$3 = /* @__PURE__ */ createTextVNode("关闭");
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "DataSourceConfigPanel",
+  props: {
+    title: null,
+    values: null
+  },
+  emits: ["submit"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const type = ref("base");
+    const services = inject("services");
+    const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
+    const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
+    const form = ref();
+    const initValues = ref({});
+    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.value?.submitForm();
+        emit("submit", values);
+      } catch (error) {
+        tMagicMessage.error(error.message);
+      }
+    };
+    const visible = ref(false);
+    const hide = () => {
+      visible.value = false;
+    };
+    expose({
+      show() {
+        visible.value = true;
+      },
+      hide
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(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: unref(size)
+      }, {
+        footer: withCtx(() => [
+          createElementVNode("div", null, [
+            createVNode(unref(TMagicButton), {
+              type: "primary",
+              onClick: submitHandler
+            }, {
+              default: withCtx(() => [
+                _hoisted_1$7
+              ]),
+              _: 1
+            }),
+            createVNode(unref(TMagicButton), { onClick: hide }, {
+              default: withCtx(() => [
+                _hoisted_2$3
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(unref(MForm), {
+            ref_key: "form",
+            ref: form,
+            config: 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__ */ createTextVNode("新增");
+const _hoisted_3 = ["id"];
+const _hoisted_4 = { class: "list-item" };
+const _hoisted_5 = {
+  key: 2,
+  class: "right-tool"
+};
+const __default__$d = defineComponent({
+  name: "MEditorDataSourceListPanel"
+});
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
+  setup(__props) {
+    const services = inject("services", {});
+    const { dataSourceService, depService } = inject("services") || {};
+    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" }))
+        }))
+      }))
+    );
+    const editDialog = ref();
+    const dataSourceValues = 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 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 = ref();
+    const filterTextChangeHandler = (val) => {
+      tree.value?.filter(val);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$6, [
+            createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+            createVNode(unref(TMagicButton), {
+              type: "primary",
+              size: "small",
+              onClick: addHandler
+            }, {
+              default: withCtx(() => [
+                _hoisted_2$2
+              ]),
+              _: 1
+            })
+          ]),
+          createVNode(unref(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: unref(list),
+            "highlight-current": true
+          }, {
+            default: withCtx(({ data }) => [
+              createElementVNode("div", {
+                id: data.id,
+                class: "list-container"
+              }, [
+                createElementVNode("div", _hoisted_4, [
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$A, {
+                    key: 0,
+                    class: "codeIcon",
+                    icon: unref(Coin)
+                  }, null, 8, ["icon"])) : createCommentVNode("", true),
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$A, {
+                    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_5, [
+                    createVNode(unref(TMagicTooltip), {
+                      effect: "dark",
+                      content: "编辑",
+                      placement: "bottom"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$A, {
+                          class: "edit-icon",
+                          icon: unref(Edit),
+                          onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
+                        }, null, 8, ["icon", "onClick"])
+                      ]),
+                      _: 2
+                    }, 1024),
+                    createVNode(unref(TMagicTooltip), {
+                      effect: "dark",
+                      content: "删除",
+                      placement: "bottom"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$A, {
+                          icon: unref(Close),
+                          class: "edit-icon",
+                          onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
+                        }, null, 8, ["icon", "onClick"])
+                      ]),
+                      _: 2
+                    }, 1024),
+                    renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                      id: data.id,
+                      data: data.codeBlockContent
+                    })
+                  ])) : createCommentVNode("", true)
+                ])
+              ], 8, _hoisted_3)
+            ]),
+            _: 3
+          }, 8, ["data"]),
+          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 = defineComponent({
   name: "MEditorComponentListPanel"
@@ -4196,7 +4725,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             "model-value": unref(collapseValue)
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -4204,7 +4733,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$w, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$A, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -4219,7 +4748,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$w, {
+                            createVNode(_sfc_main$A, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -4342,7 +4871,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$n, {
+            return openBlock(), createBlock(_sfc_main$p, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -4494,6 +5023,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const clicked = ref(false);
     const treeProps = {
       children: "items",
+      label: "name",
+      value: "id",
       disabled: (data) => Boolean(data.items?.length),
       class: (data) => {
         if (clicked.value || isPage(data))
@@ -4673,7 +5204,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
+          createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
           unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
             class: "magic-editor-layer-tree",
@@ -4742,19 +5273,20 @@ const __default__$8 = defineComponent({
 const _sfc_main$9 = /* @__PURE__ */ 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 }) {
     const props = __props;
-    const uiComponent = getConfig$1("components").tabPane;
+    const tabPaneComponent = getConfig$1("components").tabPane;
+    const tabsComponent = getConfig$1("components").tabs;
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
         "component-list": {
           $key: "component-list",
           type: "component",
-          icon: Coin,
+          icon: Goods,
           text: "组件",
           component: _sfc_main$d,
           slots: {}
@@ -4762,7 +5294,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         layer: {
           $key: "layer",
           type: "component",
-          icon: Files,
+          icon: List,
           text: "已选组件",
           props: {
             layerContentMenu: props.layerContentMenu
@@ -4775,6 +5307,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
+          component: _sfc_main$g,
+          slots: {}
+        },
+        "data-source": {
+          $key: "data-source",
+          type: "component",
+          icon: Coin,
+          text: "数据源",
           component: _sfc_main$e,
           slots: {}
         }
@@ -4792,25 +5332,22 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       activeTabName
     });
     return (_ctx, _cache) => {
-      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicTabs), {
+      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent).component), mergeProps({
         key: 0,
-        class: "m-editor-sidebar",
         modelValue: activeTabName.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-        type: "card",
-        "tab-position": "left"
-      }, {
+        class: "m-editor-sidebar tmagic-design-tabs"
+      }, unref(tabsComponent).props({ type: "card", tabPosition: "left" })), {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
-            return openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
-              key: config.$key || index,
-              name: config.text
-            }, {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent).component), mergeProps(unref(tabPaneComponent).props({ name: config.text }), {
+              key: config.$key || index
+            }), {
               label: withCtx(() => [
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$w, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$A, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4885,11 +5422,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 ]), 1040)) : createCommentVNode("", true)
               ]),
               _: 2
-            }, 1032, ["name"]);
+            }, 1040);
           }), 128))
         ]),
         _: 3
-      }, 8, ["modelValue"])) : createCommentVNode("", true);
+      }, 16, ["modelValue"])) : createCommentVNode("", true);
     };
   }
 });
@@ -5031,14 +5568,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$w, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$A, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         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$w, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$A, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -5054,7 +5591,7 @@ const _sfc_main$7 = /* @__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$w, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$A, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -5126,7 +5663,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$n, {
+                      createVNode(_sfc_main$p, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -5134,7 +5671,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$n, {
+                      createVNode(_sfc_main$p, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -5964,7 +6501,6 @@ class CodeBlock extends BaseService {
    */
   async setCodeDsl(codeDsl2) {
     this.state.codeDsl = codeDsl2;
-    info("[code-block]:code-dsl-change", this.state.codeDsl);
     this.emit("code-dsl-change", this.state.codeDsl);
   }
   /**
@@ -6202,6 +6738,166 @@ 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: []
+      }
+    ]
+  }
+];
+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: [],
+    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 {
   /**
    * 如何识别目标
@@ -6550,6 +7246,10 @@ const editorProps = {
     type: Object,
     default: () => ({})
   },
+  dataScourceConfigs: {
+    type: Object,
+    default: () => ({})
+  },
   /** 画布中组件选中框的移动范围 */
   moveableOptions: {
     type: [Object, Function]
@@ -6605,6 +7305,12 @@ const createCodeBlockTarget = (id, codeBlock) => new Target({
     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,
@@ -6684,7 +7390,26 @@ const initServiceState = (props, {
     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;
@@ -6704,15 +7429,21 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, depSe
       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) => {
@@ -6744,7 +7475,23 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, depSe
   };
   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);
   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);
@@ -6752,17 +7499,20 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, depSe
     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 = 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"],
@@ -6776,7 +7526,8 @@ const _sfc_main = defineComponent({
       uiService,
       storageService,
       codeBlockService,
-      depService
+      depService,
+      dataSourceService
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
@@ -6901,15 +7652,17 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, _sfc_main$x as CodeSelect, _sfc_main$v as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$u as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$w as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$q as LayoutContainer, _sfc_main$l as PropsPanel, _sfc_main$s as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$n as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, depService, editorService, error, 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, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$B as CodeSelect, _sfc_main$z as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$y as DataSourceFields, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$A as Icon, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, 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 };
 //# sourceMappingURL=tmagic-editor.js.map