@tmagic/editor 1.3.0-alpha.12 → 1.3.0-alpha.14

package/dist/tmagic-editor.js

@@ -1,48 +1,228 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, provide, Teleport, onBeforeUnmount, toHandlers } from 'vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, resolveDynamicComponent, toRaw, nextTick, createCommentVNode, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, onBeforeUnmount, toHandlers, provide } from 'vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { throttle, isEmpty, cloneDeep, map, has, mergeWith, isObject, uniq, difference, union, pick, keys } from 'lodash-es';
+import * as monaco from 'monaco-editor';
 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, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicCard, tMagicMessage, TMagicIcon, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
-import { Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
-import { createValues, MFormDialog, MSelect, MForm } from '@tmagic/form';
+import { MFormDrawer, MForm, createValues, MFormDialog, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
-import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
-import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { isPop, getNodePath, isNumber, isPage, toLine, guid, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = {
+  class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
+};
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeEditor"
+  },
+  __name: "CodeEditor",
+  props: {
+    initValues: {},
+    modifiedValues: {},
+    type: {},
+    language: { default: "javascript" },
+    options: { default: () => ({
+      tabSize: 2
+    }) },
+    height: {},
+    autoSave: { type: Boolean, default: true }
+  },
+  emits: ["initd", "save"],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const toString = (v, language) => {
+      let value = "";
+      if (typeof v !== "string") {
+        if (props.language.toLocaleLowerCase() === "json") {
+          value = JSON.stringify(v, null, 2);
+        } else {
+          value = serialize(v, {
+            space: 2,
+            unsafe: true
+          }).replace(/"(\w+)":\s/g, "$1: ");
+        }
+      } else {
+        value = v;
+      }
+      if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
+        value = `(${value})`;
+      }
+      return value;
+    };
+    let vsEditor = null;
+    let vsDiffEditor = null;
+    const values = ref("");
+    const loading = ref(false);
+    const codeEditor = ref();
+    const resizeObserver = new globalThis.ResizeObserver(
+      throttle(() => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300)
+    );
+    const setEditorValue = (v, m) => {
+      values.value = toString(v, props.language);
+      if (props.type === "diff") {
+        const originalModel = monaco.editor.createModel(values.value, "text/javascript");
+        const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
+        return vsDiffEditor?.setModel({
+          original: originalModel,
+          modified: modifiedModel
+        });
+      }
+      return vsEditor?.setValue(values.value);
+    };
+    const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
+    const init = async () => {
+      if (!codeEditor.value)
+        return;
+      const options = {
+        value: values.value,
+        language: props.language,
+        theme: "vs-dark",
+        ...props.options
+      };
+      if (props.type === "diff") {
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+      } else {
+        vsEditor = monaco.editor.create(codeEditor.value, options);
+      }
+      setEditorValue(props.initValues, props.modifiedValues);
+      loading.value = false;
+      emit("initd", vsEditor);
+      codeEditor.value.addEventListener("keydown", (e) => {
+        if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+          e.preventDefault();
+          e.stopPropagation();
+          const newValue = getEditorValue();
+          values.value = newValue;
+          emit("save", newValue);
+        }
+      });
+      if (props.type !== "diff" && props.autoSave) {
+        vsEditor?.onDidBlurEditorWidget(() => {
+          const newValue = getEditorValue();
+          if (values.value !== newValue) {
+            values.value = newValue;
+            emit("save", newValue);
+          }
+        });
+      }
+      resizeObserver.observe(codeEditor.value);
+    };
+    watch(
+      () => props.initValues,
+      (v, preV) => {
+        if (v !== preV) {
+          setEditorValue(props.initValues, props.modifiedValues);
+        }
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    onMounted(async () => {
+      loading.value = true;
+      init();
+    });
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+    const fullScreen = ref(false);
+    const fullScreenHandler = () => {
+      fullScreen.value = !fullScreen.value;
+      setTimeout(() => {
+        vsEditor?.focus();
+        vsEditor?.layout();
+        vsDiffEditor?.focus();
+        vsDiffEditor?.layout();
+      });
+    };
+    __expose({
+      values,
+      getEditor() {
+        return vsEditor || vsDiffEditor;
+      },
+      getVsEditor() {
+        return vsEditor;
+      },
+      getVsDiffEditor() {
+        return vsDiffEditor;
+      },
+      setEditorValue,
+      focus() {
+        vsEditor?.focus();
+        vsDiffEditor?.focus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !fullScreen.value
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(`magic-code-editor-wrapper${fullScreen.value ? " full-screen" : ""}`),
+            style: normalizeStyle(!fullScreen.value && _ctx.height ? `height: ${_ctx.height}` : "100%")
+          }, [
+            createVNode(unref(TMagicButton), {
+              class: "magic-code-editor-full-screen-icon",
+              circle: "",
+              size: "small",
+              icon: unref(FullScreen),
+              onClick: fullScreenHandler
+            }, null, 8, ["icon"]),
+            createElementVNode("div", {
+              ref_key: "codeEditor",
+              ref: codeEditor,
+              class: "magic-code-editor-content"
+            }, null, 512)
+          ], 6)
+        ], 8, ["disabled"]))
+      ]);
+    };
+  }
+});
+
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
   __name: "Code",
   props: {
+    config: {},
     model: {},
     name: {},
-    config: {},
-    prop: {}
+    prop: {},
+    lastValues: {},
+    disabled: { type: Boolean, default: false },
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
-    const language = computed(() => props.config.language || "javascript");
-    const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
     const save = (v) => {
       props.model[props.name] = v;
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createBlock(_component_magic_code_editor, {
-        style: normalizeStyle(`height: ${height.value}`),
+      return openBlock(), createBlock(_sfc_main$K, {
+        height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
-        language: language.value,
-        options: _ctx.config.options,
+        language: _ctx.config.language,
+        options: {
+          ..._ctx.config.options,
+          readOnly: _ctx.disabled
+        },
         onSave: save
-      }, null, 8, ["style", "init-values", "language", "options"]);
+      }, null, 8, ["height", "init-values", "language", "options"]);
     };
   }
 });
@@ -53,7 +233,7 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -127,7 +307,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -142,6 +322,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
+    const services = inject("services");
     const codeConfig = computed(() => ({
       type: "group-list",
       name: "hookData",
@@ -151,7 +332,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       items: [
         {
           type: "code-select-col",
-          labelWidth: 0
+          name: "codeId",
+          labelWidth: 0,
+          disabled: () => !services?.codeBlockService.getEditStatus()
         }
       ]
     }));
@@ -192,7 +375,188 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = ["src"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeBlockEditor"
+  },
+  __name: "CodeBlockEditor",
+  props: {
+    content: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["submit"],
+  setup(__props, { expose: __expose, emit }) {
+    const services = inject("services");
+    const columnWidth = computed(() => services?.uiService.get("columnWidth"));
+    const size = computed(() => columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600);
+    const codeEditorHeight = ref("600px");
+    const defaultParamColConfig = {
+      type: "row",
+      label: "参数类型",
+      items: [
+        {
+          text: "参数类型",
+          labelWidth: "70px",
+          type: "select",
+          name: "type",
+          options: [
+            {
+              text: "数字",
+              label: "数字",
+              value: "number"
+            },
+            {
+              text: "字符串",
+              label: "字符串",
+              value: "text"
+            },
+            {
+              text: "组件",
+              label: "组件",
+              value: "ui-select"
+            }
+          ]
+        }
+      ]
+    };
+    const functionConfig = computed(() => [
+      {
+        text: "名称",
+        name: "name"
+      },
+      {
+        text: "注释",
+        name: "desc"
+      },
+      {
+        type: "table",
+        border: true,
+        text: "参数",
+        enableFullscreen: false,
+        name: "params",
+        maxHeight: "300px",
+        dropSort: false,
+        items: [
+          {
+            type: "text",
+            label: "参数名",
+            name: "name"
+          },
+          {
+            type: "text",
+            label: "注释",
+            name: "extra"
+          },
+          services?.codeBlockService.getParamsColConfig() || defaultParamColConfig
+        ]
+      },
+      {
+        name: "content",
+        type: "vs-code",
+        options: inject("codeOptions", {}),
+        height: codeEditorHeight.value,
+        onChange: (formState, code) => {
+          try {
+            getConfig("parseDSL")(code);
+            return code;
+          } catch (error) {
+            tMagicMessage.error(error.message);
+            throw error;
+          }
+        }
+      }
+    ]);
+    const submitForm = async (values) => {
+      emit("submit", values);
+    };
+    const errorHandler = (error) => {
+      tMagicMessage.error(error.message);
+    };
+    const fomDrawer = ref();
+    const openHandler = () => {
+      setTimeout(() => {
+        if (fomDrawer.value) {
+          const height = fomDrawer.value?.bodyHeight - 468;
+          codeEditorHeight.value = `${height > 100 ? height : 600}px`;
+        }
+      });
+    };
+    __expose({
+      show() {
+        fomDrawer.value?.show();
+      },
+      hide() {
+        fomDrawer.value?.hide();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MFormDrawer), {
+        ref_key: "fomDrawer",
+        ref: fomDrawer,
+        "label-width": "80px",
+        title: _ctx.content.name,
+        width: size.value,
+        config: functionConfig.value,
+        values: _ctx.content,
+        disabled: _ctx.disabled,
+        onSubmit: submitForm,
+        onError: errorHandler,
+        onOpen: openHandler
+      }, null, 8, ["title", "width", "config", "values", "disabled"]);
+    };
+  }
+});
+
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeParams"
+  },
+  __name: "CodeParams",
+  props: {
+    model: {},
+    size: {},
+    disabled: { type: Boolean },
+    name: {},
+    paramsConfig: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const form = ref();
+    const getFormConfig = (items = []) => [
+      {
+        type: "fieldset",
+        items,
+        legend: "参数",
+        labelWidth: "70px",
+        name: props.name
+      }
+    ];
+    const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig));
+    const onParamsChangeHandler = async () => {
+      try {
+        const value = await form.value?.submitForm(true);
+        emit("change", value);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MForm), {
+        ref_key: "form",
+        ref: form,
+        config: codeParamsConfig.value,
+        "init-values": _ctx.model,
+        disabled: _ctx.disabled,
+        size: _ctx.size,
+        "watch-props": false,
+        onChange: onParamsChangeHandler
+      }, null, 8, ["config", "init-values", "disabled", "size"]);
+    };
+  }
+});
+
+const _hoisted_1$q = ["src"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -216,7 +580,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$p)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -235,7 +599,65 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-fields-code-select-col" };
+const useCodeBlockEdit = (codeBlockService) => {
+  const codeConfig = ref();
+  const codeId = ref();
+  const codeBlockEditor = ref();
+  const createCodeBlock = async () => {
+    if (!codeBlockService) {
+      tMagicMessage.error("新增代码块失败");
+      return;
+    }
+    codeConfig.value = {
+      name: "代码块",
+      content: `({app, params}) => {
+  // place your code here
+}`,
+      params: []
+    };
+    codeId.value = await codeBlockService.getUniqueId();
+    await nextTick();
+    codeBlockEditor.value?.show();
+  };
+  const editCode = async (id) => {
+    const codeBlock = await codeBlockService?.getCodeContentById(id);
+    if (!codeBlock) {
+      tMagicMessage.error("获取代码块内容失败");
+      return;
+    }
+    let codeContent = codeBlock.content;
+    if (typeof codeContent !== "string") {
+      codeContent = codeContent.toString();
+    }
+    codeConfig.value = {
+      ...cloneDeep(codeBlock),
+      content: codeContent
+    };
+    codeId.value = id;
+    await nextTick();
+    codeBlockEditor.value?.show();
+  };
+  const deleteCode = async (key) => {
+    codeBlockService?.deleteCodeDslByIds([key]);
+  };
+  const submitCodeBlockHandler = async (values) => {
+    if (!codeId.value)
+      return;
+    await codeBlockService?.setCodeDslById(codeId.value, values);
+    codeBlockEditor.value?.hide();
+  };
+  return {
+    codeId,
+    codeConfig,
+    codeBlockEditor,
+    createCodeBlock,
+    editCode,
+    deleteCode,
+    submitCodeBlockHandler
+  };
+};
+
+const _hoisted_1$p = { class: "m-fields-code-select-col" };
 const _hoisted_2$f = { class: "code-select-container" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
@@ -247,28 +669,33 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     model: {},
     prop: {},
     name: {},
+    lastValues: {},
+    disabled: { type: Boolean, default: false },
     size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
-    const mForm = inject("mForm");
+    const getParamItemsConfig = (codeId) => {
+      if (!codeDsl.value || !codeId)
+        return [];
+      const paramStatements = codeDsl.value[codeId]?.params;
+      if (isEmpty(paramStatements))
+        return [];
+      return paramStatements.map((paramState) => ({
+        labelWidth: "100px",
+        text: paramState.name,
+        ...paramState
+      }));
+    };
     const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-    const editable = computed(() => services?.codeBlockService.getEditStatus());
-    const codeParamsConfig = ref({
-      type: "fieldset",
-      items: [],
-      legend: "参数",
-      labelWidth: "70px",
-      name: "params",
-      display: false
-    });
+    const paramsConfig = ref(getParamItemsConfig(props.model[props.name]));
     const selectConfig = {
       type: "select",
       text: "代码块",
-      name: "codeId",
-      labelWidth: "70px",
+      name: props.name,
+      labelWidth: "80px",
       options: () => {
         if (codeDsl.value) {
           return map(codeDsl.value, (value, key) => ({
@@ -280,56 +707,23 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         return [];
       },
       onChange: (formState, codeId, { model }) => {
-        model.params = {};
-      }
-    };
-    const getParamItemsConfig = (codeId) => {
-      if (!codeDsl.value)
-        return [];
-      const paramStatements = codeDsl.value[codeId]?.params;
-      if (isEmpty(paramStatements))
-        return [];
-      return paramStatements.map((paramState) => ({
-        labelWidth: "100px",
-        text: paramState.name,
-        ...paramState
-      }));
-    };
-    const getCodeParamsConfig = (codeId) => {
-      const paramsConfig = getParamItemsConfig(codeId);
-      if (!props.model.params || isEmpty(props.model.params)) {
-        props.model.params = {};
-        createValues(mForm, paramsConfig, {}, props.model.params);
+        paramsConfig.value = getParamItemsConfig(codeId);
+        if (paramsConfig.value.length) {
+          model.params = createValues(formState, paramsConfig.value, {}, model.params);
+        } else {
+          model.params = {};
+        }
+        return codeId;
       }
-      codeParamsConfig.value = {
-        type: "fieldset",
-        items: paramsConfig,
-        legend: "参数",
-        labelWidth: "70px",
-        name: "params",
-        display: !isEmpty(paramsConfig)
-      };
     };
-    const onParamsChangeHandler = () => {
+    const onParamsChangeHandler = (value) => {
+      props.model.params = value.params;
       emit("change", props.model);
     };
-    watch(
-      () => props.model.codeId,
-      (codeId) => {
-        if (!codeId)
-          return;
-        getCodeParamsConfig(codeId);
-      },
-      {
-        immediate: true
-      }
-    );
-    const editCode = () => {
-      services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
-    };
+    const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createElementVNode("div", _hoisted_2$f, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -337,23 +731,35 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          createVNode(_sfc_main$E, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$E, {
+            key: 0,
             class: "icon",
-            icon: editable.value ? unref(Edit) : unref(View),
-            onClick: editCode
-          }, null, 8, ["icon"])
+            icon: !_ctx.disabled ? unref(Edit) : unref(View),
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
+          }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        createVNode(_component_m_form_container, {
-          config: codeParamsConfig.value,
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$F, {
+          key: 0,
+          name: "params",
           model: _ctx.model,
+          size: _ctx.size,
+          "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
-        }, null, 8, ["config", "model"])
+        }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+          key: 1,
+          ref_key: "codeBlockEditor",
+          ref: codeBlockEditor,
+          disabled: _ctx.disabled,
+          content: unref(codeConfig),
+          onSubmit: unref(submitCodeBlockHandler)
+        }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const _hoisted_1$n = { class: "m-editor-data-source-fields" };
+const _hoisted_1$o = { class: "m-editor-data-source-fields" };
 const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
@@ -364,6 +770,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     config: {},
     model: {},
     prop: {},
+    lastValues: {},
     disabled: { type: Boolean, default: false },
     name: {}
   },
@@ -374,24 +781,20 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const fieldValues = ref({});
     const filedTitle = ref("");
     const newHandler = () => {
-      if (!addDialog.value)
-        return;
       fieldValues.value = {};
       filedTitle.value = "新增属性";
-      addDialog.value.dialogVisible = true;
+      addDialog.value?.show();
     };
     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;
+      addDialog.value?.hide();
       emit("change", props.model[props.name]);
     };
-    const filedColumns = [
+    const fieldColumns = [
       {
         label: "属性名称",
         prop: "title"
@@ -411,14 +814,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           {
             text: "编辑",
             handler: (row, index) => {
-              if (!addDialog.value)
-                return;
               fieldValues.value = {
                 ...row,
                 index
               };
               filedTitle.value = `编辑${row.title}`;
-              addDialog.value.dialogVisible = true;
+              addDialog.value?.show();
             }
           },
           {
@@ -501,10 +902,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
-          columns: filedColumns
+          columns: fieldColumns
         }, null, 8, ["data"]),
         createElementVNode("div", _hoisted_2$e, [
           createVNode(unref(TMagicButton), {
@@ -527,16 +928,17 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           config: dataSourceFieldsConfig,
           values: fieldValues.value,
           parentValues: _ctx.model[_ctx.name],
+          disabled: _ctx.disabled,
           onSubmit: fieldChange
-        }, null, 8, ["title", "values", "parentValues"])
+        }, null, 8, ["title", "values", "parentValues", "disabled"])
       ]);
     };
   }
 });
 
-const _hoisted_1$m = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
 const _hoisted_2$d = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$6 = { class: "el-input__inner" };
+const _hoisted_3$5 = { class: "el-input__inner" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
@@ -759,50 +1161,333 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$E, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$m, [
+          createElementVNode("div", _hoisted_1$n, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$d, toDisplayString(item.value), 1)
           ])
         ]),
-        _: 1
-      }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
-        onMouseup: mouseupHandler
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
-        }, [
-          createElementVNode("div", _hoisted_3$6, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
-              return openBlock(), createElementBlock(Fragment, null, [
-                item.type === "text" ? (openBlock(), createElementBlock("span", {
-                  key: index,
-                  style: { "margin-right": "2px" }
-                }, toDisplayString(item.value), 1)) : createCommentVNode("", true),
-                item.type === "var" ? (openBlock(), createBlock(unref(TMagicTag), {
-                  key: index,
-                  size: _ctx.size
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(item.value), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["size"])) : createCommentVNode("", true)
-              ], 64);
-            }), 256)),
-            createVNode(_sfc_main$E, {
-              class: "tmagic-data-source-input-icon",
-              icon: unref(Coin)
-            }, null, 8, ["icon"])
-          ])
-        ], 2)
-      ], 34));
+        _: 1
+      }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
+        onMouseup: mouseupHandler
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+        }, [
+          createElementVNode("div", _hoisted_3$5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
+              return openBlock(), createElementBlock(Fragment, null, [
+                item.type === "text" ? (openBlock(), createElementBlock("span", {
+                  key: index,
+                  style: { "margin-right": "2px" }
+                }, toDisplayString(item.value), 1)) : createCommentVNode("", true),
+                item.type === "var" ? (openBlock(), createBlock(unref(TMagicTag), {
+                  key: index,
+                  size: _ctx.size
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["size"])) : createCommentVNode("", true)
+              ], 64);
+            }), 256)),
+            createVNode(_sfc_main$E, {
+              class: "tmagic-data-source-input-icon",
+              icon: unref(Coin)
+            }, null, 8, ["icon"])
+          ])
+        ], 2)
+      ], 34));
+    };
+  }
+});
+
+const useDataSourceMethod = () => {
+  const codeConfig = ref();
+  const codeBlockEditor = ref();
+  const dataSource = ref();
+  const dataSourceMethod = ref("");
+  return {
+    codeConfig,
+    codeBlockEditor,
+    createCode: async (model) => {
+      codeConfig.value = {
+        name: "",
+        content: `({ params, dataSource, app }) => {
+  // place your code here
+}`,
+        params: []
+      };
+      await nextTick();
+      dataSource.value = model;
+      dataSourceMethod.value = "";
+      codeBlockEditor.value?.show();
+    },
+    editCode: async (model, methodName) => {
+      const method = model.methods?.find((method2) => method2.name === methodName);
+      if (!method) {
+        tMagicMessage.error("获取数据源方法失败");
+        return;
+      }
+      let codeContent = method.content;
+      if (typeof codeContent !== "string") {
+        codeContent = codeContent.toString();
+      }
+      codeConfig.value = {
+        ...cloneDeep(method),
+        content: codeContent
+      };
+      await nextTick();
+      dataSource.value = model;
+      dataSourceMethod.value = methodName;
+      codeBlockEditor.value?.show();
+    },
+    deleteCode: async (model, methodName) => {
+      if (!model.methods)
+        return;
+      const index = model.methods.findIndex((method) => method.name === methodName);
+      if (index === -1) {
+        return;
+      }
+      model.methods.splice(index, 1);
+    },
+    submitCode: (values) => {
+      if (!dataSource.value)
+        return;
+      if (!dataSource.value.methods) {
+        dataSource.value.methods = [];
+      }
+      if (values.content) {
+        const parseDSL = getConfig("parseDSL");
+        if (typeof values.content === "string") {
+          values.content = parseDSL(values.content);
+        }
+      }
+      if (dataSourceMethod.value) {
+        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
+        dataSource.value.methods.splice(index, 1, values);
+      } else {
+        dataSource.value.methods.push(values);
+      }
+      codeBlockEditor.value?.hide();
+    }
+  };
+};
+
+const _hoisted_1$m = { class: "m-editor-data-source-methods" };
+const _hoisted_2$c = { class: "m-editor-data-source-methods-footer" };
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceMethods"
+  },
+  __name: "DataSourceMethods",
+  props: {
+    config: {},
+    model: {},
+    prop: {},
+    lastValues: {},
+    disabled: { type: Boolean, default: false },
+    name: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+    const methodColumns = [
+      {
+        label: "名称",
+        prop: "name"
+      },
+      {
+        label: "注释",
+        prop: "desc"
+      },
+      {
+        label: "参数",
+        prop: "params",
+        formatter: (params) => params.map((item) => item.name).join(", ")
+      },
+      {
+        label: "操作",
+        fixed: "right",
+        actions: [
+          {
+            text: "编辑",
+            handler: (row) => {
+              editCode(props.model, row.name);
+              emit("change", props.model[props.name]);
+            }
+          },
+          {
+            text: "删除",
+            buttonType: "danger",
+            handler: (row) => {
+              deleteCode(props.model, row.name);
+              emit("change", props.model[props.name]);
+            }
+          }
+        ]
+      }
+    ];
+    const createCodeHandler = () => {
+      createCode(props.model);
+      emit("change", props.model[props.name]);
+    };
+    const submitCodeHandler = (values) => {
+      submitCode(values);
+      emit("change", props.model[props.name]);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createVNode(unref(MagicTable), {
+          data: _ctx.model[_ctx.name],
+          columns: methodColumns
+        }, null, 8, ["data"]),
+        createElementVNode("div", _hoisted_2$c, [
+          createVNode(unref(TMagicButton), {
+            size: "small",
+            type: "primary",
+            disabled: _ctx.disabled,
+            plain: "",
+            onClick: createCodeHandler
+          }, {
+            default: withCtx(() => [
+              createTextVNode("添加")
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+          key: 0,
+          ref_key: "codeBlockEditor",
+          ref: codeBlockEditor,
+          disabled: _ctx.disabled,
+          content: unref(codeConfig),
+          onSubmit: submitCodeHandler
+        }, null, 8, ["disabled", "content"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
+const _hoisted_2$b = { class: "data-source-method-select-container" };
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceMethodSelect"
+  },
+  __name: "DataSourceMethodSelect",
+  props: {
+    config: {},
+    model: {},
+    lastValues: {},
+    prop: {},
+    name: {},
+    disabled: { type: Boolean, default: false },
+    size: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const services = inject("services");
+    const dataSources = computed(() => services?.dataSourceService.get("dataSources"));
+    const getParamItemsConfig = ([dataSourceId, medthodName] = ["", ""]) => {
+      if (!dataSourceId)
+        return [];
+      const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === medthodName)?.params;
+      if (!paramStatements)
+        return [];
+      return paramStatements.map((paramState) => ({
+        labelWidth: "100px",
+        text: paramState.name,
+        ...paramState
+      }));
+    };
+    const paramsConfig = ref(getParamItemsConfig(props.model.dataSourceMethod));
+    const setParamsConfig = (dataSourceMethod, formState = {}) => {
+      paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
+      if (paramsConfig.value.length) {
+        props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
+      } else {
+        props.model.params = {};
+      }
+    };
+    const cascaderConfig = {
+      type: "cascader",
+      text: "数据源方法",
+      name: props.name,
+      labelWidth: "80px",
+      options: () => dataSources.value?.filter((ds) => ds.methods?.length)?.map((ds) => ({
+        label: `${ds.title}（${ds.id}）`,
+        value: ds.id,
+        children: ds.methods?.map((method) => ({
+          label: method.name,
+          value: method.name
+        }))
+      })) || [],
+      onChange: (formState, dataSourceMethod) => {
+        setParamsConfig(dataSourceMethod, formState);
+        return dataSourceMethod;
+      }
+    };
+    const onChangeHandler = (value) => {
+      props.model.params = value.params;
+      emit("change", props.model);
+    };
+    const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
+    const editCodeHandler = () => {
+      const [id, name] = props.model[props.name];
+      const dataSource = services?.dataSourceService.getDataSourceById(id);
+      if (!dataSource)
+        return;
+      editCode(dataSource, name);
+      setParamsConfig([id, name]);
+    };
+    const submitCodeBlockHandler = (value) => {
+      submitCode(value);
+    };
+    return (_ctx, _cache) => {
+      const _component_m_form_container = resolveComponent("m-form-container");
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        createElementVNode("div", _hoisted_2$b, [
+          createVNode(_component_m_form_container, {
+            class: "select",
+            config: cascaderConfig,
+            model: _ctx.model,
+            onChange: onChangeHandler
+          }, null, 8, ["model"]),
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$E, {
+            key: 0,
+            class: "icon",
+            icon: !_ctx.disabled ? unref(Edit) : unref(View),
+            onClick: editCodeHandler
+          }, null, 8, ["icon"])) : createCommentVNode("", true)
+        ]),
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$F, {
+          key: 0,
+          name: "params",
+          model: _ctx.model,
+          size: _ctx.size,
+          disabled: _ctx.disabled,
+          "params-config": paramsConfig.value,
+          onChange: onChangeHandler
+        }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
+          key: 1,
+          ref_key: "codeBlockEditor",
+          ref: codeBlockEditor,
+          disabled: _ctx.disabled,
+          content: unref(codeConfig),
+          onSubmit: submitCodeBlockHandler
+        }, null, 8, ["disabled", "content"])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -855,12 +1540,12 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-fields-event-select" };
-const _hoisted_2$c = {
+const _hoisted_1$k = { class: "m-fields-event-select" };
+const _hoisted_2$a = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -893,7 +1578,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       const defaultActionTypeConfig = {
         name: "actionType",
         text: "联动类型",
-        labelWidth: "70px",
+        labelWidth: "80px",
         type: "select",
         defaultValue: ActionType.COMP,
         options: () => [
@@ -905,7 +1590,14 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           {
             text: "代码",
             label: "代码",
+            disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
             value: ActionType.CODE
+          },
+          {
+            text: "数据源",
+            label: "数据源",
+            disabled: !services?.dataSourceService.get("dataSources")?.filter((ds) => ds.methods?.length).length,
+            value: ActionType.DATA_SOURCE
           }
         ]
       };
@@ -915,7 +1607,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       const defaultTargetCompConfig = {
         name: "to",
         text: "联动组件",
-        labelWidth: "70px",
+        labelWidth: "80px",
         type: "ui-select",
         display: (mForm, { model }) => model.actionType === ActionType.COMP
       };
@@ -925,7 +1617,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       const defaultCompActionConfig = {
         name: "method",
         text: "动作",
-        labelWidth: "70px",
+        labelWidth: "80px",
         type: "select",
         display: (mForm, { model }) => model.actionType === ActionType.COMP,
         options: (mForm, { model }) => {
@@ -944,10 +1636,21 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       const defaultCodeActionConfig = {
         type: "code-select-col",
         labelWidth: 0,
+        name: "codeId",
+        disabled: () => !services?.codeBlockService.getEditStatus(),
         display: (mForm, { model }) => model.actionType === ActionType.CODE
       };
       return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
     });
+    const dataSourceActionConfig = computed(() => {
+      const defaultDataSourceActionConfig = {
+        type: "data-source-method-select",
+        name: "dataSourceMethod",
+        labelWidth: 0,
+        display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE
+      };
+      return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
+    });
     const tableConfig = computed(() => ({
       type: "table",
       name: "events",
@@ -989,7 +1692,13 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           name: "actions",
           expandAll: true,
           enableToggleMode: false,
-          items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value]
+          items: [
+            actionTypeConfig.value,
+            targetCompConfig.value,
+            compActionConfig.value,
+            codeActionConfig.value,
+            dataSourceActionConfig.value
+          ]
         }
       ]
     }));
@@ -1022,7 +1731,7 @@ const _sfc_main$z = /* @__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$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -1031,7 +1740,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           name: "events",
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
+        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$a, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -1073,9 +1782,9 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-key-value" };
-const _hoisted_2$b = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = { class: "m-fields-key-value" };
+const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -1118,7 +1827,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      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",
@@ -1132,7 +1841,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               size: _ctx.size,
               onChange: keyChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            _hoisted_2$b,
+            _hoisted_2$9,
             createVNode(unref(TMagicInput), {
               placeholder: "value",
               modelValue: records.value[index][1],
@@ -1169,7 +1878,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = {
+  key: 1,
+  class: "m-fields-ui-select",
+  style: { "display": "flex" }
+};
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -1222,6 +1936,18 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         mForm?.$emit("field-change", props.prop, "");
       }
     };
+    const selectNode = async (id) => {
+      await services?.editorService.select(id);
+      services?.editorService.get("stage")?.select(id);
+    };
+    const highlight = throttle((id) => {
+      services?.editorService.highlight(id);
+      services?.editorService.get("stage")?.highlight(id);
+    }, 150);
+    const unhightlight = () => {
+      services?.editorService.set("highlightNode", null);
+      services?.editorService.get("stage")?.clearHighlight();
+    };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -1239,195 +1965,70 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon"])
-      ])) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: "m-fields-ui-select",
-        onClick: startSelect,
-        style: { "display": "flex" }
-      }, [
-        val.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-          key: 0,
-          content: "清除"
-        }, {
-          default: withCtx(() => [
-            createVNode(unref(TMagicButton), {
-              style: { "padding": "0" },
-              type: "danger",
-              icon: unref(Close),
-              text: "",
-              onClick: withModifiers(deleteHandler, ["stop"])
-            }, null, 8, ["icon", "onClick"])
-          ]),
-          _: 1
-        })) : createCommentVNode("", true),
-        createVNode(unref(TMagicTooltip), {
-          content: val.value ? toName.value + "_" + val.value : "点击此处选择"
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$i, [
+        val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(unref(TMagicTooltip), {
+            content: "清除",
+            placement: "top"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                style: { "padding": "0" },
+                type: "danger",
+                icon: unref(Close),
+                text: "",
+                onClick: withModifiers(deleteHandler, ["stop"])
+              }, null, 8, ["icon", "onClick"])
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicTooltip), {
+            content: "点击选中组件",
+            placement: "top"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                text: "",
+                style: { "padding": "0", "margin": "0" },
+                onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
+                onMouseenter: _cache[1] || (_cache[1] = ($event) => unref(highlight)(val.value)),
+                onMouseleave: unhightlight
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(`${toName.value}_${val.value}`), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 64)) : (openBlock(), createBlock(unref(TMagicTooltip), {
+          key: 1,
+          content: "点击此处选择",
+          placement: "top"
         }, {
           default: withCtx(() => [
             createVNode(unref(TMagicButton), {
               text: "",
-              style: { "padding": "0", "margin": "0" }
+              style: { "padding": "0", "margin": "0" },
+              onClick: startSelect
             }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["content"])
-      ]));
-    };
-  }
-});
-
-const UISelect_vue_vue_type_style_index_0_lang = '';
-
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorCodeEditor"
-  },
-  __name: "CodeEditor",
-  props: {
-    initValues: {},
-    modifiedValues: {},
-    type: {},
-    language: { default: "javascript" },
-    options: { default: () => ({
-      tabSize: 2
-    }) },
-    autoSave: { type: Boolean, default: true }
-  },
-  emits: ["initd", "save"],
-  setup(__props, { expose: __expose, emit }) {
-    const props = __props;
-    const toString = (v, language) => {
-      let value = "";
-      if (typeof v !== "string") {
-        if (props.language.toLocaleLowerCase() === "json") {
-          value = JSON.stringify(v, null, 2);
-        } else {
-          value = serialize(v, {
-            space: 2,
-            unsafe: true
-          }).replace(/"(\w+)":\s/g, "$1: ");
-        }
-      } else {
-        value = v;
-      }
-      if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
-        value = `(${value})`;
-      }
-      return value;
-    };
-    let vsEditor = null;
-    let vsDiffEditor = null;
-    const values = ref("");
-    const loading = ref(false);
-    const codeEditor = ref();
-    const resizeObserver = new globalThis.ResizeObserver(
-      throttle(() => {
-        vsEditor?.layout();
-        vsDiffEditor?.layout();
-      }, 300)
-    );
-    const setEditorValue = (v, m) => {
-      values.value = toString(v, props.language);
-      if (props.type === "diff") {
-        const originalModel = monaco.editor.createModel(values.value, "text/javascript");
-        const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
-        return vsDiffEditor?.setModel({
-          original: originalModel,
-          modified: modifiedModel
-        });
-      }
-      return vsEditor?.setValue(values.value);
-    };
-    const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
-    const init = async () => {
-      if (!codeEditor.value)
-        return;
-      const options = {
-        value: values.value,
-        language: props.language,
-        theme: "vs-dark",
-        ...props.options
-      };
-      if (props.type === "diff") {
-        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
-      } else {
-        vsEditor = monaco.editor.create(codeEditor.value, options);
-      }
-      setEditorValue(props.initValues, props.modifiedValues);
-      loading.value = false;
-      emit("initd", vsEditor);
-      codeEditor.value.addEventListener("keydown", (e) => {
-        if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
-          e.preventDefault();
-          e.stopPropagation();
-          const newValue = getEditorValue();
-          values.value = newValue;
-          emit("save", newValue);
-        }
-      });
-      if (props.type !== "diff" && props.autoSave) {
-        vsEditor?.onDidBlurEditorWidget(() => {
-          const newValue = getEditorValue();
-          if (values.value !== newValue) {
-            values.value = newValue;
-            emit("save", newValue);
-          }
-        });
-      }
-      resizeObserver.observe(codeEditor.value);
-    };
-    watch(
-      () => props.initValues,
-      (v, preV) => {
-        if (v !== preV) {
-          setEditorValue(props.initValues, props.modifiedValues);
-        }
-      },
-      {
-        deep: true,
-        immediate: true
-      }
-    );
-    onMounted(async () => {
-      loading.value = true;
-      init();
-    });
-    onUnmounted(() => {
-      resizeObserver.disconnect();
-    });
-    __expose({
-      values,
-      getEditor() {
-        return vsEditor || vsDiffEditor;
-      },
-      getVsEditor() {
-        return vsEditor;
-      },
-      getVsDiffEditor() {
-        return vsDiffEditor;
-      },
-      setEditorValue,
-      focus() {
-        vsEditor?.focus();
-        vsDiffEditor?.focus();
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "codeEditor",
-        ref: codeEditor,
-        class: "magic-code-editor"
-      }, null, 512);
+              default: withCtx(() => [
+                createTextVNode("点击此处选择")
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }))
+      ]));
     };
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const UISelect_vue_vue_type_style_index_0_lang = '';
+
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -1469,7 +2070,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -1581,7 +2182,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$v, { onChange: changeLeft })
+          createVNode(_sfc_main$u, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -1590,7 +2191,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$v, { onChange: changeRight }),
+          createVNode(_sfc_main$u, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -3513,10 +4114,10 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$j = { class: "m-editor-empty-panel" };
-const _hoisted_2$a = { class: "m-editor-empty-content" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "m-editor-empty-panel" };
+const _hoisted_2$8 = { class: "m-editor-empty-content" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -3536,8 +4137,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
-        createElementVNode("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        createElementVNode("div", _hoisted_2$8, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
@@ -3545,7 +4146,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             createElementVNode("div", null, [
               createVNode(_sfc_main$E, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$5
+            _hoisted_3$4
           ])
         ])
       ]);
@@ -3553,12 +4154,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { class: "m-editor" };
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -3566,6 +4166,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
+    const content = ref();
     const root = computed(() => editorService?.get("root"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
@@ -3581,13 +4182,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       (length) => {
         const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
         columnWidth.value.left = left;
+        const container = content.value || document.body;
         if (length <= 0) {
           columnWidth.value.right = void 0;
-          columnWidth.value.center = globalThis.document.body.clientWidth - left;
+          columnWidth.value.center = container.clientWidth - left;
         } else {
           const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
           columnWidth.value.right = right;
-          columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+          columnWidth.value.center = container.clientWidth - left - right;
         }
         uiService?.set("columnWidth", columnWidth.value);
       },
@@ -3624,18 +4226,22 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor",
+        ref_key: "content",
+        ref: content
+      }, [
         renderSlot(_ctx.$slots, "header"),
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$w, {
+          createVNode(_sfc_main$K, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$u, {
+        ]) : (openBlock(), createBlock(_sfc_main$t, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -3654,7 +4260,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$t)
+              createVNode(_sfc_main$s)
             ])
           ]),
           _: 2
@@ -3674,17 +4280,17 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ]), 1032, ["left", "right"])),
         renderSlot(_ctx.$slots, "content-after"),
         renderSlot(_ctx.$slots, "footer")
-      ]);
+      ], 512);
     };
   }
 });
 
-const _hoisted_1$h = {
+const _hoisted_1$g = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_2$7 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -3763,7 +4369,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$h, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$g, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -3827,7 +4433,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$9, [
+            createElementVNode("span", _hoisted_2$7, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -3844,7 +4450,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -4006,7 +4612,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$r, {
+              return openBlock(), createBlock(_sfc_main$q, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -4018,8 +4624,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = { class: "m-editor-props-panel" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "m-editor-props-panel" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -4072,7 +4678,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$f, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -4092,7 +4698,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -4127,8 +4733,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_1$e = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
@@ -4138,488 +4744,60 @@ const _hoisted_2$8 = /* @__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$4 = [
-  _hoisted_2$8
+const _hoisted_3$3 = [
+  _hoisted_2$6
 ];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAppManageIcon"
   },
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$f, _hoisted_3$4);
+      return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_3$3);
     };
   }
 });
 
-const _hoisted_1$e = {
+const _hoisted_1$d = {
   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$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
+const _hoisted_2$5 = /* @__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$1 = [
+  _hoisted_2$5
 ];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_4$4);
-    };
-  }
-});
-
-const _hoisted_1$d = {
-  key: 0,
-  class: "m-editor-content-bottom"
-};
-const _hoisted_2$6 = {
-  key: 1,
-  class: "m-editor-content-bottom"
-};
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorCodeDraftEditor"
-  },
-  __name: "CodeDraftEditor",
-  props: {
-    id: {},
-    content: {},
-    editable: { type: Boolean, default: true },
-    autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: {},
-    language: {}
-  },
-  emits: ["close", "saveAndClose"],
-  setup(__props, { expose: __expose, emit }) {
-    const props = __props;
-    const services = inject("services");
-    const codeContent = ref("");
-    const editorContent = ref("");
-    const codeEditor = ref();
-    const originCodeContent = ref("");
-    const isFullScreen = ref(false);
-    const codeOptions = computed(() => ({
-      ...props.codeOptions,
-      readOnly: !props.editable
-    }));
-    watchEffect(() => {
-      codeContent.value = props.content;
-      if (!originCodeContent.value) {
-        originCodeContent.value = codeContent.value;
-      }
-      const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-      if (codeDraft) {
-        codeContent.value = codeDraft;
-      }
-    });
-    const saveCodeDraft = async (codeValue) => {
-      if (!props.autoSaveDraft)
-        return;
-      if (originCodeContent.value === codeValue) {
-        services?.codeBlockService.removeCodeDraft(props.id);
-        return;
-      }
-      services?.codeBlockService.setCodeDraft(props.id, codeValue);
-      tMagicMessage.success(`代码草稿成功保存到本地 ${datetimeFormatter( new Date())}`);
-    };
-    const saveAndClose = () => {
-      if (!codeEditor.value || !props.editable)
-        return;
-      editorContent.value = codeEditor.value.getEditor()?.getValue();
-      emit("saveAndClose", editorContent.value);
-    };
-    const close = async () => {
-      const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-      if (codeDraft) {
-        try {
-          await tMagicMessageBox.confirm("您有代码修改未保存，是否保存后再关闭？", "提示", {
-            confirmButtonText: "保存并关闭",
-            cancelButtonText: "直接关闭",
-            type: "warning",
-            distinguishCancelAndClose: true
-          });
-          saveAndClose();
-        } catch (action) {
-          if (action === "cancel") {
-            services?.codeBlockService.removeCodeDraft(props.id);
-            emit("close");
-          }
-        }
-      } else {
-        emit("close");
-      }
-    };
-    const toggleFullScreen = () => {
-      isFullScreen.value = !isFullScreen.value;
-      if (codeEditor.value) {
-        codeEditor.value.focus();
-      }
-    };
-    __expose({
-      saveAndClose,
-      close
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
-      }, [
-        createVNode(_sfc_main$w, {
-          ref_key: "codeEditor",
-          ref: codeEditor,
-          class: "m-editor-container",
-          "init-values": `${codeContent.value}`,
-          onSave: saveCodeDraft,
-          language: _ctx.language,
-          options: codeOptions.value
-        }, null, 8, ["init-values", "language", "options"]),
-        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
-          createVNode(unref(TMagicButton), {
-            type: "primary",
-            class: "button",
-            onClick: toggleFullScreen
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(unref(TMagicButton), {
-            type: "primary",
-            class: "button",
-            onClick: saveAndClose
-          }, {
-            default: withCtx(() => [
-              createTextVNode("确认")
-            ]),
-            _: 1
-          }),
-          createVNode(unref(TMagicButton), {
-            class: "button",
-            onClick: close
-          }, {
-            default: withCtx(() => [
-              createTextVNode("关闭")
-            ]),
-            _: 1
-          })
-        ])) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
-          createVNode(unref(TMagicButton), {
-            type: "primary",
-            class: "button",
-            onClick: toggleFullScreen
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(unref(TMagicButton), {
-            class: "button",
-            onClick: close
-          }, {
-            default: withCtx(() => [
-              createTextVNode("关闭")
-            ]),
-            _: 1
-          })
-        ]))
-      ], 2);
-    };
-  }
-});
-
-const _hoisted_1$c = { class: "code-name-wrapper" };
-const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
-const _hoisted_3$3 = { class: "code-name-wrapper" };
-const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorFunctionEditor"
-  },
-  __name: "FunctionEditor",
-  props: {
-    id: {},
-    name: {},
-    content: {},
-    editable: { type: Boolean, default: true },
-    autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: {},
-    paramsColConfig: {}
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    provide("mForm", null);
-    const defaultParamColConfig = {
-      type: "row",
-      label: "参数类型",
-      items: [
-        {
-          text: "参数类型",
-          labelWidth: "70px",
-          type: "select",
-          name: "type",
-          options: [
-            {
-              text: "数字",
-              label: "数字",
-              value: "number"
-            },
-            {
-              text: "字符串",
-              label: "字符串",
-              value: "text"
-            }
-          ]
-        }
-      ]
-    };
-    const paramsColConfig = props.paramsColConfig || defaultParamColConfig;
-    const tableConfig = {
-      type: "table",
-      border: true,
-      enableFullscreen: false,
-      name: "params",
-      maxHeight: "300px",
-      dropSort: false,
-      items: [
-        {
-          type: "text",
-          label: "参数名",
-          name: "name",
-          width: 200
-        },
-        {
-          type: "text",
-          label: "参数注释",
-          name: "tip",
-          width: 200
-        },
-        paramsColConfig
-      ]
-    };
-    const services = inject("services");
-    const codeName = ref("");
-    const codeContent = ref("");
-    const evalRes = ref(true);
-    const tableModel = ref();
-    watchEffect(() => {
-      codeName.value = props.name;
-      codeContent.value = props.content;
-    });
-    const initTableModel = () => {
-      const codeDsl = cloneDeep(services?.codeBlockService.getCodeDsl());
-      if (!codeDsl)
-        return;
-      tableModel.value = {
-        params: codeDsl[props.id]?.params || []
-      };
-    };
-    initTableModel();
-    const beforeSave = (codeValue) => {
-      try {
-        getConfig("parseDSL")(codeValue);
-        return true;
-      } catch (e) {
-        tMagicMessage.error(e.stack);
-        return false;
-      }
-    };
-    const saveCode = async (codeValue) => {
-      if (!props.editable)
-        return;
-      evalRes.value = beforeSave(codeValue);
-      if (evalRes.value) {
-        await services?.codeBlockService.setCodeDslById(props.id, {
-          name: codeName.value,
-          content: codeValue,
-          params: tableModel.value?.params || []
-        });
-        tMagicMessage.success("代码成功保存到本地");
-        services?.codeBlockService.removeCodeDraft(props.id);
-      }
-    };
-    const saveAndClose = async (codeValue) => {
-      await saveCode(codeValue);
-      if (evalRes.value) {
-        close();
-      }
-    };
-    const close = () => {
-      services?.codeBlockService.setCodeEditorShowStatus(false);
-    };
-    const codeDraftEditor = ref();
-    __expose({
-      codeDraftEditor
-    });
-    return (_ctx, _cache) => {
-      const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
-        header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$c, [
-            _hoisted_2$5,
-            createVNode(unref(TMagicInput), {
-              class: "code-name-input",
-              modelValue: codeName.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeName.value = $event),
-              disabled: !_ctx.editable
-            }, null, 8, ["modelValue", "disabled"])
-          ]),
-          createElementVNode("div", _hoisted_3$3, [
-            _hoisted_4$3,
-            createVNode(_component_m_form_table, {
-              style: { "width": "800px" },
-              config: tableConfig,
-              model: tableModel.value,
-              enableToggleMode: false,
-              name: "params",
-              prop: "params",
-              size: "small"
-            }, null, 8, ["model"])
-          ])
-        ]),
-        default: withCtx(() => [
-          createVNode(_sfc_main$l, {
-            ref_key: "codeDraftEditor",
-            ref: codeDraftEditor,
-            id: _ctx.id,
-            content: codeContent.value,
-            editable: _ctx.editable,
-            autoSaveDraft: _ctx.autoSaveDraft,
-            codeOptions: _ctx.codeOptions,
-            language: "javascript",
-            onSaveAndClose: saveAndClose,
-            onClose: close
-          }, null, 8, ["id", "content", "editable", "autoSaveDraft", "codeOptions"])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-
-const _hoisted_1$b = {
-  key: 0,
-  class: "m-editor-code-block-editor-panel"
-};
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorCodeBlockEditor"
-  },
-  __name: "CodeBlockEditor",
-  props: {
-    paramsColConfig: {}
-  },
-  setup(__props) {
-    const services = inject("services");
-    const codeOptions = inject("codeOptions", {});
-    const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
-    const left = ref(200);
-    const currentTitle = ref("");
-    const codeConfig = ref(null);
-    const state = reactive({
-      codeList: []
-    });
-    const id = computed(() => services?.codeBlockService.getId() || "");
-    const editable = computed(() => services?.codeBlockService.getEditStatus());
-    const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
-    watchEffect(async () => {
-      codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
-      if (!codeConfig.value)
-        return;
-      codeConfig.value.content = serializeConfig(codeConfig.value.content);
-    });
-    watchEffect(async () => {
-      const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
-      if (!codeDsl)
-        return;
-      state.codeList = [];
-      forIn(codeDsl, (value, key) => {
-        state.codeList.push({
-          id: key,
-          name: value.name
-        });
-      });
-      currentTitle.value = state.codeList[0]?.name || "";
-    });
-    const functionEditor = ref();
-    const handleClose = async () => {
-      await functionEditor.value?.codeDraftEditor?.close();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicDrawer), {
-        class: "code-editor-dialog",
-        "model-value": true,
-        title: currentTitle.value,
-        "close-on-press-escape": true,
-        "append-to-body": true,
-        "show-close": false,
-        "close-on-click-modal": true,
-        size: size.value,
-        "before-close": handleClose
-      }, {
-        default: withCtx(() => [
-          createVNode(_sfc_main$u, {
-            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$b, [
-                renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
-                codeConfig.value ? (openBlock(), createBlock(_sfc_main$k, {
-                  key: 0,
-                  ref_key: "functionEditor",
-                  ref: functionEditor,
-                  id: id.value,
-                  name: codeConfig.value.name,
-                  content: codeConfig.value.content,
-                  paramsColConfig: _ctx.paramsColConfig,
-                  editable: !!editable.value,
-                  autoSaveDraft: true,
-                  codeOptions: unref(codeOptions)
-                }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : createCommentVNode("", true)
-              ])) : createCommentVNode("", true)
-            ]),
-            _: 3
-          }, 8, ["left"])
-        ]),
-        _: 3
-      }, 8, ["title", "size"]);
+      return openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_4$1);
     };
   }
 });
 
-const _hoisted_1$a = { class: "search-wrapper" };
-const _hoisted_2$4 = ["id"];
-const _hoisted_3$2 = { class: "list-item" };
-const _hoisted_4$2 = {
+const _hoisted_1$c = ["id"];
+const _hoisted_2$4 = { class: "list-item" };
+const _hoisted_3$2 = {
   key: 2,
   class: "right-tool"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
   __name: "CodeBlockList",
   props: {
-    customError: { type: Function },
-    paramsColConfig: {}
+    customError: { type: Function }
   },
-  setup(__props) {
+  emits: ["edit", "remove"],
+  setup(__props, { expose: __expose, emit }) {
     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) => {
@@ -4636,54 +4814,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           codeBlockContent: codeBlockService?.getCodeContentById(target.id),
           children: compNodes
         };
-      })
-    );
-    const expandedKeys = computed(() => codeList.value.map((item) => item.id));
-    const editable = computed(() => codeBlockService?.getEditStatus());
-    const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
-    const createCodeBlock = async () => {
-      if (!codeBlockService) {
-        tMagicMessage.error("新增代码块失败");
-        return;
-      }
-      const codeConfig = {
-        name: "代码块",
-        content: `({app, params}) => {
-  // place your code here
-}`,
-        params: []
-      };
-      const id = await codeBlockService.getUniqueId();
-      await codeBlockService.setCodeDslById(id, codeConfig);
-      codeBlockService.setCodeEditorContent(true, id);
-    };
-    const editCode = async (key) => {
-      codeBlockService?.setCodeEditorContent(true, key);
-    };
-    const deleteCode = (key) => {
-      const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
-      const existBinds = Boolean(currentCode?.children.length);
-      const undeleteableList = codeBlockService?.getUndeletableList() || [];
-      if (!existBinds && !undeleteableList.includes(key)) {
-        codeBlockService?.deleteCodeDslByIds([key]);
-      } else {
-        if (typeof props.customError === "function") {
-          props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
-        } else {
-          tMagicMessage.error("代码块删除失败");
-        }
-      }
-    };
-    const tree = ref();
+      })
+    );
+    const expandedKeys = computed(() => codeList.value.map((item) => item.id));
+    const editable = computed(() => codeBlockService?.getEditStatus());
     const filterNode = (value, data) => {
       if (!value) {
         return true;
       }
       return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
     };
-    const filterTextChangeHandler = (val) => {
-      tree.value?.filter(val);
-    };
     const selectComp = (compId) => {
       const stage = editorService?.get("stage");
       editorService?.select(compId);
@@ -4696,106 +4836,166 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         selectComp(node.parent.data.id);
       }
     };
+    const editCode = (id) => {
+      emit("edit", id);
+    };
+    const deleteCode = async (id) => {
+      const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
+      const existBinds = Boolean(currentCode?.children.length);
+      const undeleteableList = codeBlockService?.getUndeletableList() || [];
+      if (!existBinds && !undeleteableList.includes(id)) {
+        await tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        emit("remove", id);
+      } else {
+        if (typeof props.customError === "function") {
+          props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+        } else {
+          tMagicMessage.error("代码块删除失败");
+        }
+      }
+    };
+    const tree = ref();
+    __expose({
+      filter(val) {
+        tree.value?.filter(val);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicTree), {
+        ref_key: "tree",
+        ref: tree,
+        class: "magic-editor-layer-tree",
+        "node-key": "id",
+        "empty-text": "暂无代码块",
+        "default-expanded-keys": expandedKeys.value,
+        "expand-on-click-node": false,
+        data: codeList.value,
+        props: {
+          children: "children",
+          label: "name",
+          value: "id"
+        },
+        "highlight-current": true,
+        "filter-node-method": filterNode,
+        onNodeClick: clickHandler
+      }, {
+        default: withCtx(({ data }) => [
+          createElementVNode("div", {
+            id: data.id,
+            class: "list-container"
+          }, [
+            createElementVNode("div", _hoisted_2$4, [
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$l, {
+                key: 0,
+                class: "codeIcon"
+              })) : createCommentVNode("", true),
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$m, {
+                key: 1,
+                class: "compIcon"
+              })) : createCommentVNode("", true),
+              createElementVNode("span", {
+                class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
+              }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
+              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+                createVNode(unref(TMagicTooltip), {
+                  effect: "dark",
+                  content: editable.value ? "编辑" : "查看",
+                  placement: "bottom"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$E, {
+                      icon: editable.value ? unref(Edit) : unref(View),
+                      class: "edit-icon",
+                      onClick: withModifiers(($event) => editCode(data.id), ["stop"])
+                    }, null, 8, ["icon", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["content"]),
+                editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                  key: 0,
+                  effect: "dark",
+                  content: "删除",
+                  placement: "bottom"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$E, {
+                      icon: unref(Close),
+                      class: "edit-icon",
+                      onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
+                    }, null, 8, ["icon", "onClick"])
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                  id: data.id,
+                  data: data.codeBlockContent
+                })
+              ])) : createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1$c)
+        ]),
+        _: 3
+      }, 8, ["default-expanded-keys", "data"]);
+    };
+  }
+});
+
+const _hoisted_1$b = { class: "search-wrapper" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeBlockListPanel"
+  },
+  __name: "CodeBlockListPanel",
+  props: {
+    customError: { type: Function }
+  },
+  setup(__props) {
+    const { codeBlockService } = inject("services") || {};
+    const editable = computed(() => codeBlockService?.getEditStatus());
+    const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
+    const codeBlockList = ref();
+    const filterTextChangeHandler = (val) => {
+      codeBlockList.value?.filter(val);
+    };
     return (_ctx, _cache) => {
       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$a, [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$b, [
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
                 type: "primary",
                 size: "small",
-                onClick: createCodeBlock
+                onClick: unref(createCodeBlock)
               }, {
                 default: withCtx(() => [
                   createTextVNode("新增")
                 ]),
                 _: 1
-              })) : createCommentVNode("", true)
+              }, 8, ["onClick"])) : createCommentVNode("", true)
             ])
           ]),
-          createVNode(unref(TMagicTree), {
-            ref_key: "tree",
-            ref: tree,
-            class: "magic-editor-layer-tree",
-            "node-key": "id",
-            "empty-text": "暂无代码块",
-            "default-expanded-keys": expandedKeys.value,
-            "expand-on-click-node": false,
-            data: codeList.value,
-            props: treeProps,
-            "highlight-current": true,
-            "filter-node-method": filterNode,
-            onNodeClick: clickHandler
-          }, {
-            default: withCtx(({ data }) => [
-              createElementVNode("div", {
-                id: data.id,
-                class: "list-container"
-              }, [
-                createElementVNode("div", _hoisted_3$2, [
-                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$m, {
-                    key: 0,
-                    class: "codeIcon"
-                  })) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$n, {
-                    key: 1,
-                    class: "compIcon"
-                  })) : 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_4$2, [
-                    createVNode(unref(TMagicTooltip), {
-                      effect: "dark",
-                      content: editable.value ? "编辑" : "查看",
-                      placement: "bottom"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_sfc_main$E, {
-                          icon: editable.value ? unref(Edit) : unref(View),
-                          class: "edit-icon",
-                          onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
-                        }, null, 8, ["icon", "onClick"])
-                      ]),
-                      _: 2
-                    }, 1032, ["content"]),
-                    editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                      key: 0,
-                      effect: "dark",
-                      content: "删除",
-                      placement: "bottom"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_sfc_main$E, {
-                          icon: unref(Close),
-                          class: "edit-icon",
-                          onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
-                        }, null, 8, ["icon", "onClick"])
-                      ]),
-                      _: 2
-                    }, 1024)) : createCommentVNode("", true),
-                    renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                      id: data.id,
-                      data: data.codeBlockContent
-                    })
-                  ])) : createCommentVNode("", true)
-                ])
-              ], 8, _hoisted_2$4)
-            ]),
-            _: 3
-          }, 8, ["default-expanded-keys", "data"]),
-          isShowCodeBlockEditor.value ? (openBlock(), createBlock(_sfc_main$j, {
+          createVNode(_sfc_main$k, {
+            ref_key: "codeBlockList",
+            ref: codeBlockList,
+            "custom-error": _ctx.customError,
+            onEdit: unref(editCode),
+            onRemove: unref(deleteCode)
+          }, null, 8, ["custom-error", "onEdit", "onRemove"]),
+          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$G, {
             key: 0,
-            paramsColConfig: _ctx.paramsColConfig
-          }, {
-            "code-block-edit-panel-header": withCtx(({ id }) => [
-              renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-            ]),
-            _: 3
-          }, 8, ["paramsColConfig"])) : createCommentVNode("", true)
+            ref_key: "codeBlockEditor",
+            ref: codeBlockEditor,
+            disabled: !editable.value,
+            content: unref(codeConfig),
+            onSubmit: unref(submitCodeBlockHandler)
+          }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
         ]),
         _: 3
       });
@@ -4803,14 +5003,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
   __name: "DataSourceConfigPanel",
   props: {
     title: {},
-    values: {}
+    values: {},
+    disabled: { type: Boolean }
   },
   emits: ["submit"],
   setup(__props, { expose: __expose, emit }) {
@@ -4819,7 +5020,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     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 fomDrawer = ref();
     const initValues = ref({});
     watchEffect(() => {
       initValues.value = props.values;
@@ -4832,84 +5033,53 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       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 submitHandler = (values) => {
+      emit("submit", values);
     };
-    const visible = ref(false);
-    const hide = () => {
-      visible.value = false;
+    const errorHandler = (error) => {
+      tMagicMessage.error(error.message);
     };
     __expose({
       show() {
-        visible.value = true;
+        fomDrawer.value?.show();
       },
-      hide
+      hide() {
+        fomDrawer.value?.hide();
+      }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicDrawer), {
-        modelValue: visible.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+      return openBlock(), createBlock(unref(MFormDrawer), {
+        ref_key: "fomDrawer",
+        ref: fomDrawer,
+        "label-width": "80px",
         title: _ctx.title,
-        "close-on-press-escape": true,
-        "append-to-body": true,
-        "show-close": true,
-        "close-on-click-modal": true,
-        size: size.value
-      }, {
-        footer: withCtx(() => [
-          createElementVNode("div", null, [
-            createVNode(unref(TMagicButton), {
-              type: "primary",
-              onClick: submitHandler
-            }, {
-              default: withCtx(() => [
-                createTextVNode("确定")
-              ]),
-              _: 1
-            }),
-            createVNode(unref(TMagicButton), { onClick: hide }, {
-              default: withCtx(() => [
-                createTextVNode("关闭")
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        default: withCtx(() => [
-          createVNode(unref(MForm), {
-            ref_key: "form",
-            ref: form,
-            config: dataSourceConfig.value,
-            "init-values": initValues.value,
-            onChange: changeHandler
-          }, null, 8, ["config", "init-values"])
-        ]),
-        _: 1
-      }, 8, ["modelValue", "title", "size"]);
+        width: size.value,
+        config: dataSourceConfig.value,
+        values: initValues.value,
+        disabled: _ctx.disabled,
+        onChange: changeHandler,
+        onSubmit: submitHandler,
+        onError: errorHandler
+      }, null, 8, ["title", "width", "config", "values", "disabled"]);
     };
   }
 });
 
-const _hoisted_1$9 = { class: "search-wrapper" };
-const _hoisted_2$3 = ["id"];
-const _hoisted_3$1 = { class: "list-item" };
-const _hoisted_4$1 = {
+const _hoisted_1$a = ["id"];
+const _hoisted_2$3 = { class: "list-item" };
+const _hoisted_3$1 = {
   key: 2,
   class: "right-tool"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceListPanel"
+    name: "MEditorDataSourceList"
   },
-  __name: "DataSourceListPanel",
-  setup(__props) {
-    const services = inject("services", {});
-    const { dataSourceService, depService, editorService } = inject("services") || {};
+  __name: "DataSourceList",
+  emits: ["edit", "remove"],
+  setup(__props, { expose: __expose, emit }) {
+    const { depService, editorService, dataSourceService } = inject("services") || {};
+    const editable = computed(() => dataSourceService?.get("editable") ?? true);
     const list = computed(
       () => Object.values(depService?.targets["data-source"] || {}).map((target) => ({
         id: target.id,
@@ -4923,8 +5093,123 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }))
       }))
     );
+    const editHandler = (id) => {
+      emit("edit", id);
+    };
+    const removeHandler = async (id) => {
+      await tMagicMessageBox.confirm("确定删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      });
+      emit("remove", id);
+    };
+    const selectComp = (compId) => {
+      const stage = editorService?.get("stage");
+      editorService?.select(compId);
+      stage?.select(compId);
+    };
+    const clickHandler = (data, node) => {
+      if (data.type === "node") {
+        selectComp(data.id);
+      } else if (data.type === "key") {
+        selectComp(node.parent.data.id);
+      }
+    };
+    const tree = ref();
+    __expose({
+      filter(val) {
+        debugger;
+        tree.value?.filter(val);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(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: list.value,
+        "highlight-current": true,
+        onNodeClick: clickHandler
+      }, {
+        default: withCtx(({ data }) => [
+          createElementVNode("div", {
+            id: data.id,
+            class: "list-container"
+          }, [
+            createElementVNode("div", _hoisted_2$3, [
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$E, {
+                key: 0,
+                class: "codeIcon",
+                icon: unref(Coin)
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$E, {
+                key: 1,
+                class: "compIcon",
+                icon: unref(Aim)
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              createElementVNode("span", {
+                class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
+              }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
+              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+                createVNode(unref(TMagicTooltip), {
+                  effect: "dark",
+                  content: editable.value ? "编辑" : "查看",
+                  placement: "bottom"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$E, {
+                      icon: editable.value ? unref(Edit) : unref(View),
+                      class: "edit-icon",
+                      onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
+                    }, null, 8, ["icon", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["content"]),
+                editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                  key: 0,
+                  effect: "dark",
+                  content: "删除",
+                  placement: "bottom"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$E, {
+                      icon: unref(Close),
+                      class: "edit-icon",
+                      onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
+                    }, null, 8, ["icon", "onClick"])
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                  id: data.id,
+                  data: data.codeBlockContent
+                })
+              ])) : createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1$a)
+        ]),
+        _: 3
+      }, 8, ["data"]);
+    };
+  }
+});
+
+const _hoisted_1$9 = { class: "search-wrapper" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceListPanel"
+  },
+  __name: "DataSourceListPanel",
+  setup(__props) {
+    const { dataSourceService } = inject("services") || {};
     const editDialog = ref();
     const dataSourceValues = ref({});
+    const editable = computed(() => dataSourceService?.get("editable") ?? true);
     const addHandler = () => {
       if (!editDialog.value)
         return;
@@ -4932,24 +5217,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       editDialog.value.show();
     };
     const editHandler = (id) => {
-      if (!editDialog.value || !services)
+      if (!editDialog.value)
         return;
       dataSourceValues.value = {
         ...dataSourceService?.getDataSourceById(id)
       };
       editDialog.value.show();
     };
-    const removeHandler = async (id) => {
-      await tMagicMessageBox.confirm("确定删除?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      });
+    const removeHandler = (id) => {
       dataSourceService?.remove(id);
     };
     const submitDataSourceHandler = (value) => {
-      if (!services)
-        return;
       if (value.id) {
         dataSourceService?.update(value);
       } else {
@@ -4957,28 +5235,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
       editDialog.value?.hide();
     };
-    const tree = ref();
+    const dataSourceList = ref();
     const filterTextChangeHandler = (val) => {
-      tree.value?.filter(val);
-    };
-    const selectComp = (compId) => {
-      const stage = editorService?.get("stage");
-      editorService?.select(compId);
-      stage?.select(compId);
-    };
-    const clickHandler = (data, node) => {
-      if (data.type === "node") {
-        selectComp(data.id);
-      } else if (data.type === "key") {
-        selectComp(node.parent.data.id);
-      }
+      dataSourceList.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$9, [
-            createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-            createVNode(unref(TMagicButton), {
+            createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+            editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+              key: 0,
               type: "primary",
               size: "small",
               onClick: addHandler
@@ -4987,87 +5254,22 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 createTextVNode("新增")
               ]),
               _: 1
-            })
+            })) : createCommentVNode("", true)
           ]),
-          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: list.value,
-            "highlight-current": true,
-            onNodeClick: clickHandler
-          }, {
-            default: withCtx(({ data }) => [
-              createElementVNode("div", {
-                id: data.id,
-                class: "list-container"
-              }, [
-                createElementVNode("div", _hoisted_3$1, [
-                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$E, {
-                    key: 0,
-                    class: "codeIcon",
-                    icon: unref(Coin)
-                  }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$E, {
-                    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_4$1, [
-                    createVNode(unref(TMagicTooltip), {
-                      effect: "dark",
-                      content: "编辑",
-                      placement: "bottom"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_sfc_main$E, {
-                          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$E, {
-                          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_2$3)
-            ]),
-            _: 3
-          }, 8, ["data"]),
           createVNode(_sfc_main$h, {
+            onEdit: editHandler,
+            onRemove: removeHandler
+          }),
+          createVNode(_sfc_main$i, {
             ref_key: "editDialog",
             ref: editDialog,
+            disabled: !editable.value,
             values: dataSourceValues.value,
             title: typeof dataSourceValues.value.id !== "undefined" ? `编辑${dataSourceValues.value.title}` : "新增",
             onSubmit: submitDataSourceHandler
-          }, null, 8, ["values", "title"])
+          }, null, 8, ["disabled", "values", "title"])
         ]),
-        _: 3
+        _: 1
       });
     };
   }
@@ -5153,7 +5355,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -5310,7 +5512,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$r, {
+            return openBlock(), createBlock(_sfc_main$q, {
               "event-type": "mouseup",
               ref_for: true,
               ref_key: "buttons",
@@ -5795,7 +5997,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+          createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
           values.value.length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
             class: "magic-editor-layer-tree",
@@ -5899,7 +6101,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$i,
+          component: _sfc_main$j,
           slots: {}
         },
         "data-source": {
@@ -5993,16 +6195,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     ]),
                     key: "4"
                   } : void 0,
-                  config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
-                    name: "code-block-edit-panel-header",
-                    fn: withCtx(({ id }) => [
-                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-                        key: 0,
-                        id
-                      }) : config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ]),
-                    key: "5"
-                  } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeContent ? {
                     name: "layer-node-content",
                     fn: withCtx(({ data: nodeData, node }) => [
@@ -6016,7 +6208,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         node
                       }, null, 8, ["data", "node"])) : createCommentVNode("", true)
                     ]),
-                    key: "6"
+                    key: "5"
                   } : void 0
                 ]), 1040)) : createCommentVNode("", true)
               ]),
@@ -6262,7 +6454,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$r, {
+                      createVNode(_sfc_main$q, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -6270,7 +6462,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$r, {
+                      createVNode(_sfc_main$q, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -7005,22 +7197,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 
 class CodeBlock extends BaseService {
   state = reactive({
-    isShowCodeEditor: false,
     codeDsl: null,
-    id: "",
     editable: true,
     combineIds: [],
-    undeletableList: []
+    undeletableList: [],
+    paramsColConfig: void 0
   });
   constructor() {
-    super([
-      "setCodeDslById",
-      "setCodeEditorShowStatus",
-      "setEditStatus",
-      "setCombineIds",
-      "setUndeleteableList",
-      "deleteCodeDslByIds"
-    ]);
+    super(["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"]);
   }
   /**
    * 设置活动的代码块dsl数据源
@@ -7067,7 +7251,10 @@ class CodeBlock extends BaseService {
     const codeConfigProcessed = codeConfig;
     if (codeConfig.content) {
       const parseDSL = getConfig("parseDSL");
-      codeConfigProcessed.content = parseDSL(codeConfig.content);
+      if (typeof codeConfig.content === "string") {
+        codeConfig.content = parseDSL(codeConfig.content);
+      }
+      codeConfigProcessed.content = codeConfig.content;
     }
     const existContent = codeDsl[id] || {};
     codeDsl[id] = {
@@ -7085,40 +7272,6 @@ class CodeBlock extends BaseService {
     const codeDsl = this.getCodeDsl();
     return pick(codeDsl, ids);
   }
-  /**
-   * 设置代码编辑面板展示状态
-   * @param {boolean} status 是否展示代码编辑面板
-   * @returns {void}
-   */
-  async setCodeEditorShowStatus(status) {
-    this.state.isShowCodeEditor = status;
-  }
-  /**
-   * 获取代码编辑面板展示状态
-   * @returns {boolean} 是否展示代码编辑面板
-   */
-  getCodeEditorShowStatus() {
-    return this.state.isShowCodeEditor;
-  }
-  /**
-   * 设置代码编辑面板展示状态及展示内容
-   * @param {boolean} status 是否展示代码编辑面板
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  setCodeEditorContent(status, id) {
-    if (!id)
-      return;
-    this.setId(id);
-    this.state.isShowCodeEditor = status;
-  }
-  /**
-   * 获取当前选中的代码块内容
-   * @returns {CodeBlockContent | null}
-   */
-  getCurrentDsl() {
-    return this.getCodeContentById(this.state.id);
-  }
   /**
    * 获取编辑状态
    * @returns {boolean} 是否可编辑
@@ -7134,23 +7287,6 @@ class CodeBlock extends BaseService {
   async setEditStatus(status) {
     this.state.editable = status;
   }
-  /**
-   * 设置当前选中的代码块ID
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  setId(id) {
-    if (!id)
-      return;
-    this.state.id = id;
-  }
-  /**
-   * 获取当前选中的代码块ID
-   * @returns {Id} id 代码块id
-   */
-  getId() {
-    return this.state.id;
-  }
   /**
    * 设置当前选中组件已关联绑定的代码块id数组
    * @param {string[]} ids 代码块id数组
@@ -7212,6 +7348,12 @@ class CodeBlock extends BaseService {
       this.emit("remove", id);
     });
   }
+  setParamsColConfig(config) {
+    this.state.paramsColConfig = config;
+  }
+  getParamsColConfig() {
+    return this.state.paramsColConfig;
+  }
   /**
    * 生成代码块唯一id
    * @returns {Id} 代码块唯一id
@@ -7225,9 +7367,7 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
   resetState() {
-    this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
-    this.state.id = "";
     this.state.editable = true;
     this.state.combineIds = [];
     this.state.undeletableList = [];
@@ -7360,6 +7500,17 @@ const fillConfig = (config) => [
         defaultValue: []
       }
     ]
+  },
+  {
+    type: "panel",
+    title: "方法定义",
+    items: [
+      {
+        name: "methods",
+        type: "data-source-methods",
+        defaultValue: []
+      }
+    ]
   }
 ];
 const getFormConfig = (type, configs) => {
@@ -7376,6 +7527,7 @@ const getFormConfig = (type, configs) => {
 class DataSource extends BaseService {
   state = reactive({
     dataSources: [],
+    editable: true,
     configs: {}
   });
   set(name, value) {
@@ -8371,11 +8523,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
 const _sfc_main = defineComponent({
   name: "MEditor",
   components: {
-    TMagicNavMenu: _sfc_main$q,
+    TMagicNavMenu: _sfc_main$p,
     Sidebar: _sfc_main$a,
     Workspace: _sfc_main$1,
-    PropsPanel: _sfc_main$p,
-    Framework: _sfc_main$s
+    PropsPanel: _sfc_main$o,
+    Framework: _sfc_main$r
   },
   props: editorProps,
   emits: ["props-panel-mounted", "update:modelValue"],
@@ -8478,9 +8630,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               data
             })
           ]),
-          "code-block-edit-panel-header": withCtx(({ id }) => [
-            renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-          ]),
           _: 3
         }, 8, ["data", "layer-content-menu"])
       ])
@@ -8543,19 +8692,21 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$x);
-    app.component("m-fields-code-link", _sfc_main$G);
-    app.component("m-fields-vs-code", _sfc_main$H);
-    app.component("magic-code-editor", _sfc_main$w);
-    app.component("m-fields-code-select", _sfc_main$F);
+    app.component("m-fields-ui-select", _sfc_main$v);
+    app.component("m-fields-code-link", _sfc_main$I);
+    app.component("m-fields-vs-code", _sfc_main$J);
+    app.component("magic-code-editor", _sfc_main$K);
+    app.component("m-fields-code-select", _sfc_main$H);
     app.component("m-fields-code-select-col", _sfc_main$D);
-    app.component("m-fields-event-select", _sfc_main$z);
+    app.component("m-fields-event-select", _sfc_main$x);
     app.component("m-fields-data-source-fields", _sfc_main$C);
-    app.component("m-fields-key-value", _sfc_main$y);
+    app.component("m-fields-key-value", _sfc_main$w);
     app.component("m-fields-data-source-input", _sfc_main$B);
-    app.component("m-fields-data-source-select", _sfc_main$A);
+    app.component("m-fields-data-source-select", _sfc_main$y);
+    app.component("m-fields-data-source-methods", _sfc_main$A);
+    app.component("m-fields-data-source-method-select", _sfc_main$z);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$i as CodeBlockList, CodeDeleteErrorType, _sfc_main$F as CodeSelect, _sfc_main$D as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$e as ContentMenu, _sfc_main$C as DataSourceFields, _sfc_main$B as DataSourceInput, _sfc_main$A as DataSourceSelect, _sfc_main$z as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$E as Icon, KeyBindingCommand, _sfc_main$y as KeyValue, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$u as LayoutContainer, _sfc_main$p as PropsPanel, _sfc_main$v as Resizer, _sfc_main$u as SplitView, _sfc_main$w as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$r as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$G as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$H as CodeSelect, _sfc_main$D as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$e as ContentMenu, _sfc_main$C as DataSourceFields, _sfc_main$B as DataSourceInput, _sfc_main$z as DataSourceMethodSelect, _sfc_main$A as DataSourceMethods, _sfc_main$y as DataSourceSelect, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$E as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$t as LayoutContainer, _sfc_main$o as PropsPanel, _sfc_main$u as Resizer, _sfc_main$t as SplitView, _sfc_main$K as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$q as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map