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

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('@tmagic/table'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', '@tmagic/table', 'monaco-editor', 'gesto', '@tmagic/utils', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.table, global.monaco, global.Gesto, global.utils, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, table, monaco, Gesto, utils, StageCore, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('monaco-editor'), require('serialize-javascript'), require('@tmagic/design'), require('@tmagic/schema'), require('@tmagic/form'), require('@tmagic/table'), require('gesto'), require('@tmagic/utils'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', 'serialize-javascript', '@tmagic/design', '@tmagic/schema', '@tmagic/form', '@tmagic/table', 'gesto', '@tmagic/utils', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.monaco, global.serialize, global.design, global.schema, global.form, global.table, global.Gesto, global.utils, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, monaco, serialize, design, schema, form, table, Gesto, utils, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,35 +23,215 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$r = {
+    class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
+  };
+  const _sfc_main$K = /* @__PURE__ */ vue.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 = vue.ref("");
+      const loading = vue.ref(false);
+      const codeEditor = vue.ref();
+      const resizeObserver = new globalThis.ResizeObserver(
+        lodashEs.throttle(() => {
+          vsEditor?.layout();
+          vsDiffEditor?.layout();
+        }, 300)
+      );
+      const setEditorValue = (v, m) => {
+        values.value = toString(v, props.language);
+        if (props.type === "diff") {
+          const originalModel = monaco__namespace.editor.createModel(values.value, "text/javascript");
+          const modifiedModel = monaco__namespace.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__namespace.editor.createDiffEditor(codeEditor.value, options);
+        } else {
+          vsEditor = monaco__namespace.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);
+      };
+      vue.watch(
+        () => props.initValues,
+        (v, preV) => {
+          if (v !== preV) {
+            setEditorValue(props.initValues, props.modifiedValues);
+          }
+        },
+        {
+          deep: true,
+          immediate: true
+        }
+      );
+      vue.onMounted(async () => {
+        loading.value = true;
+        init();
+      });
+      vue.onUnmounted(() => {
+        resizeObserver.disconnect();
+      });
+      const fullScreen = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+          (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            to: "body",
+            disabled: !fullScreen.value
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(`magic-code-editor-wrapper${fullScreen.value ? " full-screen" : ""}`),
+              style: vue.normalizeStyle(!fullScreen.value && _ctx.height ? `height: ${_ctx.height}` : "100%")
+            }, [
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                class: "magic-code-editor-full-screen-icon",
+                circle: "",
+                size: "small",
+                icon: vue.unref(iconsVue.FullScreen),
+                onClick: fullScreenHandler
+              }, null, 8, ["icon"]),
+              vue.createElementVNode("div", {
+                ref_key: "codeEditor",
+                ref: codeEditor,
+                class: "magic-code-editor-content"
+              }, null, 512)
+            ], 6)
+          ], 8, ["disabled"]))
+        ]);
+      };
+    }
+  });
+
+  const _sfc_main$J = /* @__PURE__ */ vue.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 = vue.computed(() => props.config.language || "javascript");
-      const height = vue.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 = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
-          style: vue.normalizeStyle(`height: ${height.value}`),
+        return vue.openBlock(), vue.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"]);
       };
     }
   });
@@ -62,7 +242,7 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -136,7 +316,7 @@
     }
   });
 
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -151,6 +331,7 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
+      const services = vue.inject("services");
       const codeConfig = vue.computed(() => ({
         type: "group-list",
         name: "hookData",
@@ -160,7 +341,9 @@
         items: [
           {
             type: "code-select-col",
-            labelWidth: 0
+            name: "codeId",
+            labelWidth: 0,
+            disabled: () => !services?.codeBlockService.getEditStatus()
           }
         ]
       }));
@@ -201,7 +384,188 @@
     }
   });
 
-  const _hoisted_1$p = ["src"];
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeBlockEditor"
+    },
+    __name: "CodeBlockEditor",
+    props: {
+      content: {},
+      disabled: { type: Boolean }
+    },
+    emits: ["submit"],
+    setup(__props, { expose: __expose, emit }) {
+      const services = vue.inject("services");
+      const columnWidth = vue.computed(() => services?.uiService.get("columnWidth"));
+      const size = vue.computed(() => columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600);
+      const codeEditorHeight = vue.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 = vue.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: vue.inject("codeOptions", {}),
+          height: codeEditorHeight.value,
+          onChange: (formState, code) => {
+            try {
+              getConfig("parseDSL")(code);
+              return code;
+            } catch (error) {
+              design.tMagicMessage.error(error.message);
+              throw error;
+            }
+          }
+        }
+      ]);
+      const submitForm = async (values) => {
+        emit("submit", values);
+      };
+      const errorHandler = (error) => {
+        design.tMagicMessage.error(error.message);
+      };
+      const fomDrawer = vue.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 vue.openBlock(), vue.createBlock(vue.unref(form.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeParams"
+    },
+    __name: "CodeParams",
+    props: {
+      model: {},
+      size: {},
+      disabled: { type: Boolean },
+      name: {},
+      paramsConfig: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const form$1 = vue.ref();
+      const getFormConfig = (items = []) => [
+        {
+          type: "fieldset",
+          items,
+          legend: "参数",
+          labelWidth: "70px",
+          name: props.name
+        }
+      ];
+      const codeParamsConfig = vue.computed(() => getFormConfig(props.paramsConfig));
+      const onParamsChangeHandler = async () => {
+        try {
+          const value = await form$1.value?.submitForm(true);
+          emit("change", value);
+        } catch (e) {
+          console.log(e);
+        }
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(form.MForm), {
+          ref_key: "form",
+          ref: form$1,
+          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__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -225,7 +589,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$p)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -244,7 +608,65 @@
     }
   });
 
-  const _hoisted_1$o = { class: "m-fields-code-select-col" };
+  const useCodeBlockEdit = (codeBlockService) => {
+    const codeConfig = vue.ref();
+    const codeId = vue.ref();
+    const codeBlockEditor = vue.ref();
+    const createCodeBlock = async () => {
+      if (!codeBlockService) {
+        design.tMagicMessage.error("新增代码块失败");
+        return;
+      }
+      codeConfig.value = {
+        name: "代码块",
+        content: `({app, params}) => {
+  // place your code here
+}`,
+        params: []
+      };
+      codeId.value = await codeBlockService.getUniqueId();
+      await vue.nextTick();
+      codeBlockEditor.value?.show();
+    };
+    const editCode = async (id) => {
+      const codeBlock = await codeBlockService?.getCodeContentById(id);
+      if (!codeBlock) {
+        design.tMagicMessage.error("获取代码块内容失败");
+        return;
+      }
+      let codeContent = codeBlock.content;
+      if (typeof codeContent !== "string") {
+        codeContent = codeContent.toString();
+      }
+      codeConfig.value = {
+        ...lodashEs.cloneDeep(codeBlock),
+        content: codeContent
+      };
+      codeId.value = id;
+      await vue.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__ */ vue.defineComponent({
     ...{
@@ -256,28 +678,33 @@
       model: {},
       prop: {},
       name: {},
+      lastValues: {},
+      disabled: { type: Boolean, default: false },
       size: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
-      const mForm = vue.inject("mForm");
+      const getParamItemsConfig = (codeId) => {
+        if (!codeDsl.value || !codeId)
+          return [];
+        const paramStatements = codeDsl.value[codeId]?.params;
+        if (lodashEs.isEmpty(paramStatements))
+          return [];
+        return paramStatements.map((paramState) => ({
+          labelWidth: "100px",
+          text: paramState.name,
+          ...paramState
+        }));
+      };
       const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDsl());
-      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
-      const codeParamsConfig = vue.ref({
-        type: "fieldset",
-        items: [],
-        legend: "参数",
-        labelWidth: "70px",
-        name: "params",
-        display: false
-      });
+      const paramsConfig = vue.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 lodashEs.map(codeDsl.value, (value, key) => ({
@@ -289,56 +716,23 @@
           return [];
         },
         onChange: (formState, codeId, { model }) => {
-          model.params = {};
-        }
-      };
-      const getParamItemsConfig = (codeId) => {
-        if (!codeDsl.value)
-          return [];
-        const paramStatements = codeDsl.value[codeId]?.params;
-        if (lodashEs.isEmpty(paramStatements))
-          return [];
-        return paramStatements.map((paramState) => ({
-          labelWidth: "100px",
-          text: paramState.name,
-          ...paramState
-        }));
-      };
-      const getCodeParamsConfig = (codeId) => {
-        const paramsConfig = getParamItemsConfig(codeId);
-        if (!props.model.params || lodashEs.isEmpty(props.model.params)) {
-          props.model.params = {};
-          form.createValues(mForm, paramsConfig, {}, props.model.params);
+          paramsConfig.value = getParamItemsConfig(codeId);
+          if (paramsConfig.value.length) {
+            model.params = form.createValues(formState, paramsConfig.value, {}, model.params);
+          } else {
+            model.params = {};
+          }
+          return codeId;
         }
-        codeParamsConfig.value = {
-          type: "fieldset",
-          items: paramsConfig,
-          legend: "参数",
-          labelWidth: "70px",
-          name: "params",
-          display: !lodashEs.isEmpty(paramsConfig)
-        };
       };
-      const onParamsChangeHandler = () => {
+      const onParamsChangeHandler = (value) => {
+        props.model.params = value.params;
         emit("change", props.model);
       };
-      vue.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 = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
           vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -346,23 +740,35 @@
               model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            vue.createVNode(_sfc_main$E, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+              key: 0,
               class: "icon",
-              icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
-              onClick: editCode
-            }, null, 8, ["icon"])
+              icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+              onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          vue.createVNode(_component_m_form_container, {
-            config: codeParamsConfig.value,
+          paramsConfig.value.length ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+            key: 1,
+            ref_key: "codeBlockEditor",
+            ref: codeBlockEditor,
+            disabled: _ctx.disabled,
+            content: vue.unref(codeConfig),
+            onSubmit: vue.unref(submitCodeBlockHandler)
+          }, null, 8, ["disabled", "content", "onSubmit"])) : vue.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__ */ vue.defineComponent({
     ...{
@@ -373,6 +779,7 @@
       config: {},
       model: {},
       prop: {},
+      lastValues: {},
       disabled: { type: Boolean, default: false },
       name: {}
     },
@@ -383,24 +790,20 @@
       const fieldValues = vue.ref({});
       const filedTitle = vue.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"
@@ -420,14 +823,12 @@
             {
               text: "编辑",
               handler: (row, index) => {
-                if (!addDialog.value)
-                  return;
                 fieldValues.value = {
                   ...row,
                   index
                 };
                 filedTitle.value = `编辑${row.title}`;
-                addDialog.value.dialogVisible = true;
+                addDialog.value?.show();
               }
             },
             {
@@ -510,10 +911,10 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
-            columns: filedColumns
+            columns: fieldColumns
           }, null, 8, ["data"]),
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(design.TMagicButton), {
@@ -536,16 +937,17 @@
             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__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
@@ -768,50 +1170,333 @@
             vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$m, [
+            vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$d, vue.toDisplayString(item.value), 1)
             ])
           ]),
-          _: 1
-        }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
-          onMouseup: mouseupHandler
-        }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
-          }, [
-            vue.createElementVNode("div", _hoisted_3$6, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
-                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                  item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
-                    key: index,
-                    style: { "margin-right": "2px" }
-                  }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
-                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
-                    key: index,
-                    size: _ctx.size
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(item.value), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["size"])) : vue.createCommentVNode("", true)
-                ], 64);
-              }), 256)),
-              vue.createVNode(_sfc_main$E, {
-                class: "tmagic-data-source-input-icon",
-                icon: vue.unref(iconsVue.Coin)
-              }, null, 8, ["icon"])
-            ])
-          ], 2)
-        ], 34));
+          _: 1
+        }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
+          onMouseup: mouseupHandler
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+          }, [
+            vue.createElementVNode("div", _hoisted_3$5, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                  item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: index,
+                    style: { "margin-right": "2px" }
+                  }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
+                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
+                    key: index,
+                    size: _ctx.size
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(item.value), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["size"])) : vue.createCommentVNode("", true)
+                ], 64);
+              }), 256)),
+              vue.createVNode(_sfc_main$E, {
+                class: "tmagic-data-source-input-icon",
+                icon: vue.unref(iconsVue.Coin)
+              }, null, 8, ["icon"])
+            ])
+          ], 2)
+        ], 34));
+      };
+    }
+  });
+
+  const useDataSourceMethod = () => {
+    const codeConfig = vue.ref();
+    const codeBlockEditor = vue.ref();
+    const dataSource = vue.ref();
+    const dataSourceMethod = vue.ref("");
+    return {
+      codeConfig,
+      codeBlockEditor,
+      createCode: async (model) => {
+        codeConfig.value = {
+          name: "",
+          content: `({ params, dataSource, app }) => {
+  // place your code here
+}`,
+          params: []
+        };
+        await vue.nextTick();
+        dataSource.value = model;
+        dataSourceMethod.value = "";
+        codeBlockEditor.value?.show();
+      },
+      editCode: async (model, methodName) => {
+        const method = model.methods?.find((method2) => method2.name === methodName);
+        if (!method) {
+          design.tMagicMessage.error("获取数据源方法失败");
+          return;
+        }
+        let codeContent = method.content;
+        if (typeof codeContent !== "string") {
+          codeContent = codeContent.toString();
+        }
+        codeConfig.value = {
+          ...lodashEs.cloneDeep(method),
+          content: codeContent
+        };
+        await vue.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__ */ vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createVNode(vue.unref(table.MagicTable), {
+            data: _ctx.model[_ctx.name],
+            columns: methodColumns
+          }, null, 8, ["data"]),
+          vue.createElementVNode("div", _hoisted_2$c, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              size: "small",
+              type: "primary",
+              disabled: _ctx.disabled,
+              plain: "",
+              onClick: createCodeHandler
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("添加")
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+            key: 0,
+            ref_key: "codeBlockEditor",
+            ref: codeBlockEditor,
+            disabled: _ctx.disabled,
+            content: vue.unref(codeConfig),
+            onSubmit: submitCodeHandler
+          }, null, 8, ["disabled", "content"])) : vue.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__ */ vue.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 = vue.inject("services");
+      const dataSources = vue.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 = vue.ref(getParamItemsConfig(props.model.dataSourceMethod));
+      const setParamsConfig = (dataSourceMethod, formState = {}) => {
+        paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
+        if (paramsConfig.value.length) {
+          props.model.params = form.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 = vue.resolveComponent("m-form-container");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createElementVNode("div", _hoisted_2$b, [
+            vue.createVNode(_component_m_form_container, {
+              class: "select",
+              config: cascaderConfig,
+              model: _ctx.model,
+              onChange: onChangeHandler
+            }, null, 8, ["model"]),
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+              key: 0,
+              class: "icon",
+              icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+              onClick: editCodeHandler
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+          ]),
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+            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"])) : vue.createCommentVNode("", true),
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+            key: 1,
+            ref_key: "codeBlockEditor",
+            ref: codeBlockEditor,
+            disabled: _ctx.disabled,
+            content: vue.unref(codeConfig),
+            onSubmit: submitCodeBlockHandler
+          }, null, 8, ["disabled", "content"])) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -864,12 +1549,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -902,7 +1587,7 @@
         const defaultActionTypeConfig = {
           name: "actionType",
           text: "联动类型",
-          labelWidth: "70px",
+          labelWidth: "80px",
           type: "select",
           defaultValue: schema.ActionType.COMP,
           options: () => [
@@ -914,7 +1599,14 @@
             {
               text: "代码",
               label: "代码",
+              disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
               value: schema.ActionType.CODE
+            },
+            {
+              text: "数据源",
+              label: "数据源",
+              disabled: !services?.dataSourceService.get("dataSources")?.filter((ds) => ds.methods?.length).length,
+              value: schema.ActionType.DATA_SOURCE
             }
           ]
         };
@@ -924,7 +1616,7 @@
         const defaultTargetCompConfig = {
           name: "to",
           text: "联动组件",
-          labelWidth: "70px",
+          labelWidth: "80px",
           type: "ui-select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
         };
@@ -934,7 +1626,7 @@
         const defaultCompActionConfig = {
           name: "method",
           text: "动作",
-          labelWidth: "70px",
+          labelWidth: "80px",
           type: "select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
           options: (mForm, { model }) => {
@@ -953,10 +1645,21 @@
         const defaultCodeActionConfig = {
           type: "code-select-col",
           labelWidth: 0,
+          name: "codeId",
+          disabled: () => !services?.codeBlockService.getEditStatus(),
           display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
         };
         return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
       });
+      const dataSourceActionConfig = vue.computed(() => {
+        const defaultDataSourceActionConfig = {
+          type: "data-source-method-select",
+          name: "dataSourceMethod",
+          labelWidth: 0,
+          display: (mForm, { model }) => model.actionType === schema.ActionType.DATA_SOURCE
+        };
+        return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
+      });
       const tableConfig = vue.computed(() => ({
         type: "table",
         name: "events",
@@ -998,7 +1701,13 @@
             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
+            ]
           }
         ]
       }));
@@ -1031,7 +1740,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -1040,7 +1749,7 @@
             name: "events",
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -1082,9 +1791,9 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-key-value" };
-  const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$j = { class: "m-fields-key-value" };
+  const _hoisted_2$9 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -1127,7 +1836,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -1141,7 +1850,7 @@
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_2$b,
+              _hoisted_2$9,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -1178,7 +1887,12 @@
     }
   });
 
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = {
+    key: 1,
+    class: "m-fields-ui-select",
+    style: { "display": "flex" }
+  };
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -1231,6 +1945,18 @@
           mForm?.$emit("field-change", props.prop, "");
         }
       };
+      const selectNode = async (id) => {
+        await services?.editorService.select(id);
+        services?.editorService.get("stage")?.select(id);
+      };
+      const highlight = lodashEs.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 ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
@@ -1248,195 +1974,70 @@
             ]),
             _: 1
           }, 8, ["icon"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "m-fields-ui-select",
-          onClick: startSelect,
-          style: { "display": "flex" }
-        }, [
-          val.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-            key: 0,
-            content: "清除"
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
-                style: { "padding": "0" },
-                type: "danger",
-                icon: vue.unref(iconsVue.Close),
-                text: "",
-                onClick: vue.withModifiers(deleteHandler, ["stop"])
-              }, null, 8, ["icon", "onClick"])
-            ]),
-            _: 1
-          })) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(design.TMagicTooltip), {
-            content: val.value ? toName.value + "_" + val.value : "点击此处选择"
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+          val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createVNode(vue.unref(design.TMagicTooltip), {
+              content: "清除",
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  style: { "padding": "0" },
+                  type: "danger",
+                  icon: vue.unref(iconsVue.Close),
+                  text: "",
+                  onClick: vue.withModifiers(deleteHandler, ["stop"])
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(design.TMagicTooltip), {
+              content: "点击选中组件",
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  text: "",
+                  style: { "padding": "0", "margin": "0" },
+                  onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
+                  onMouseenter: _cache[1] || (_cache[1] = ($event) => vue.unref(highlight)(val.value)),
+                  onMouseleave: unhightlight
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(`${toName.value}_${val.value}`), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            key: 1,
+            content: "点击此处选择",
+            placement: "top"
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
-                style: { "padding": "0", "margin": "0" }
+                style: { "padding": "0", "margin": "0" },
+                onClick: startSelect
               }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.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__ */ vue.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 = vue.ref("");
-      const loading = vue.ref(false);
-      const codeEditor = vue.ref();
-      const resizeObserver = new globalThis.ResizeObserver(
-        lodashEs.throttle(() => {
-          vsEditor?.layout();
-          vsDiffEditor?.layout();
-        }, 300)
-      );
-      const setEditorValue = (v, m) => {
-        values.value = toString(v, props.language);
-        if (props.type === "diff") {
-          const originalModel = monaco__namespace.editor.createModel(values.value, "text/javascript");
-          const modifiedModel = monaco__namespace.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__namespace.editor.createDiffEditor(codeEditor.value, options);
-        } else {
-          vsEditor = monaco__namespace.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);
-      };
-      vue.watch(
-        () => props.initValues,
-        (v, preV) => {
-          if (v !== preV) {
-            setEditorValue(props.initValues, props.modifiedValues);
-          }
-        },
-        {
-          deep: true,
-          immediate: true
-        }
-      );
-      vue.onMounted(async () => {
-        loading.value = true;
-        init();
-      });
-      vue.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 vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "codeEditor",
-          ref: codeEditor,
-          class: "magic-code-editor"
-        }, null, 512);
+                default: vue.withCtx(() => [
+                  vue.createTextVNode("点击此处选择")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }))
+        ]));
       };
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const UISelect_vue_vue_type_style_index_0_lang = '';
+
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -1478,7 +2079,7 @@
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -1590,7 +2191,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$v, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$u, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -1599,7 +2200,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$v, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$u, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -3522,10 +4123,10 @@
     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__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = { class: "m-editor-empty-panel" };
+  const _hoisted_2$8 = { class: "m-editor-empty-content" };
+  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -3545,8 +4146,8 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.createElementVNode("div", _hoisted_2$8, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
@@ -3554,7 +4155,7 @@
               vue.createElementVNode("div", null, [
                 vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$5
+              _hoisted_3$4
             ])
           ])
         ]);
@@ -3562,12 +4163,11 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -3575,6 +4175,7 @@
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
+      const content = vue.ref();
       const root = vue.computed(() => editorService?.get("root"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
@@ -3590,13 +4191,14 @@
         (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);
         },
@@ -3633,18 +4235,22 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor",
+          ref_key: "content",
+          ref: content
+        }, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$w, {
+            vue.createVNode(_sfc_main$K, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$u, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$t, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -3663,7 +4269,7 @@
             ]),
             center: vue.withCtx(() => [
               pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$t)
+                vue.createVNode(_sfc_main$s)
               ])
             ]),
             _: 2
@@ -3683,17 +4289,17 @@
           ]), 1032, ["left", "right"])),
           vue.renderSlot(_ctx.$slots, "content-after"),
           vue.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__ */ vue.defineComponent({
+  const _hoisted_2$7 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -3772,7 +4378,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -3836,7 +4442,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$9, [
+              vue.createElementVNode("span", _hoisted_2$7, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -3853,7 +4459,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -4015,7 +4621,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$r, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$q, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -4027,8 +4633,8 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-editor-props-panel" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$f = { class: "m-editor-props-panel" };
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -4081,7 +4687,7 @@
       };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -4101,7 +4707,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -4136,8 +4742,8 @@
     }
   });
 
-  const _hoisted_1$f = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$8 = /* @__PURE__ */ vue.createElementVNode("g", {
+  const _hoisted_1$e = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$6 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
@@ -4147,488 +4753,60 @@
     }),
     /* @__PURE__ */ vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
   ], -1);
-  const _hoisted_3$4 = [
-    _hoisted_2$8
+  const _hoisted_3$3 = [
+    _hoisted_2$6
   ];
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAppManageIcon"
     },
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$f, _hoisted_3$4);
+        return vue.openBlock(), vue.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__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-  const _hoisted_4$4 = [
-    _hoisted_2$7
+  const _hoisted_2$5 = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_4$1 = [
+    _hoisted_2$5
   ];
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.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__ */ vue.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 = vue.inject("services");
-      const codeContent = vue.ref("");
-      const editorContent = vue.ref("");
-      const codeEditor = vue.ref();
-      const originCodeContent = vue.ref("");
-      const isFullScreen = vue.ref(false);
-      const codeOptions = vue.computed(() => ({
-        ...props.codeOptions,
-        readOnly: !props.editable
-      }));
-      vue.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);
-        design.tMagicMessage.success(`代码草稿成功保存到本地 ${utils.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 design.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 vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
-        }, [
-          vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
-              type: "primary",
-              class: "button",
-              onClick: toggleFullScreen
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
-              ]),
-              _: 1
-            }),
-            vue.createVNode(vue.unref(design.TMagicButton), {
-              type: "primary",
-              class: "button",
-              onClick: saveAndClose
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode("确认")
-              ]),
-              _: 1
-            }),
-            vue.createVNode(vue.unref(design.TMagicButton), {
-              class: "button",
-              onClick: close
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode("关闭")
-              ]),
-              _: 1
-            })
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
-              type: "primary",
-              class: "button",
-              onClick: toggleFullScreen
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
-              ]),
-              _: 1
-            }),
-            vue.createVNode(vue.unref(design.TMagicButton), {
-              class: "button",
-              onClick: close
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode("关闭")
-              ]),
-              _: 1
-            })
-          ]))
-        ], 2);
-      };
-    }
-  });
-
-  const _hoisted_1$c = { class: "code-name-wrapper" };
-  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
-  const _hoisted_3$3 = { class: "code-name-wrapper" };
-  const _hoisted_4$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-  const _sfc_main$k = /* @__PURE__ */ vue.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;
-      vue.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 = vue.inject("services");
-      const codeName = vue.ref("");
-      const codeContent = vue.ref("");
-      const evalRes = vue.ref(true);
-      const tableModel = vue.ref();
-      vue.watchEffect(() => {
-        codeName.value = props.name;
-        codeContent.value = props.content;
-      });
-      const initTableModel = () => {
-        const codeDsl = lodashEs.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) {
-          design.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 || []
-          });
-          design.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 = vue.ref();
-      __expose({
-        codeDraftEditor
-      });
-      return (_ctx, _cache) => {
-        const _component_m_form_table = vue.resolveComponent("m-form-table");
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
-          header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$c, [
-              _hoisted_2$5,
-              vue.createVNode(vue.unref(design.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"])
-            ]),
-            vue.createElementVNode("div", _hoisted_3$3, [
-              _hoisted_4$3,
-              vue.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: vue.withCtx(() => [
-            vue.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__ */ vue.defineComponent({
-    ...{
-      name: "MEditorCodeBlockEditor"
-    },
-    __name: "CodeBlockEditor",
-    props: {
-      paramsColConfig: {}
-    },
-    setup(__props) {
-      const services = vue.inject("services");
-      const codeOptions = vue.inject("codeOptions", {});
-      const size = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
-      const left = vue.ref(200);
-      const currentTitle = vue.ref("");
-      const codeConfig = vue.ref(null);
-      const state = vue.reactive({
-        codeList: []
-      });
-      const id = vue.computed(() => services?.codeBlockService.getId() || "");
-      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
-      const selectedIds = vue.computed(() => services?.codeBlockService.getCombineIds() || []);
-      vue.watchEffect(async () => {
-        codeConfig.value = lodashEs.cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
-        if (!codeConfig.value)
-          return;
-        codeConfig.value.content = serializeConfig(codeConfig.value.content);
-      });
-      vue.watchEffect(async () => {
-        const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
-        if (!codeDsl)
-          return;
-        state.codeList = [];
-        lodashEs.forIn(codeDsl, (value, key) => {
-          state.codeList.push({
-            id: key,
-            name: value.name
-          });
-        });
-        currentTitle.value = state.codeList[0]?.name || "";
-      });
-      const functionEditor = vue.ref();
-      const handleClose = async () => {
-        await functionEditor.value?.codeDraftEditor?.close();
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-            vue.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: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
-                  codeConfig.value ? (vue.openBlock(), vue.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: vue.unref(codeOptions)
-                  }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : vue.createCommentVNode("", true)
-                ])) : vue.createCommentVNode("", true)
-              ]),
-              _: 3
-            }, 8, ["left"])
-          ]),
-          _: 3
-        }, 8, ["title", "size"]);
+        return vue.openBlock(), vue.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__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.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 } = vue.inject("services") || {};
       const codeList = vue.computed(
         () => Object.values(depService?.targets["code-block"] || {}).map((target) => {
@@ -4645,54 +4823,16 @@
             codeBlockContent: codeBlockService?.getCodeContentById(target.id),
             children: compNodes
           };
-        })
-      );
-      const expandedKeys = vue.computed(() => codeList.value.map((item) => item.id));
-      const editable = vue.computed(() => codeBlockService?.getEditStatus());
-      const isShowCodeBlockEditor = vue.computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
-      const createCodeBlock = async () => {
-        if (!codeBlockService) {
-          design.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 {
-            design.tMagicMessage.error("代码块删除失败");
-          }
-        }
-      };
-      const tree = vue.ref();
+        })
+      );
+      const expandedKeys = vue.computed(() => codeList.value.map((item) => item.id));
+      const editable = vue.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);
@@ -4705,106 +4845,166 @@
           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 design.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          });
+          emit("remove", id);
+        } else {
+          if (typeof props.customError === "function") {
+            props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+          } else {
+            design.tMagicMessage.error("代码块删除失败");
+          }
+        }
+      };
+      const tree = vue.ref();
+      __expose({
+        filter(val) {
+          tree.value?.filter(val);
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(({ data }) => [
+            vue.createElementVNode("div", {
+              id: data.id,
+              class: "list-container"
+            }, [
+              vue.createElementVNode("div", _hoisted_2$4, [
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+                  key: 0,
+                  class: "codeIcon"
+                })) : vue.createCommentVNode("", true),
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+                  key: 1,
+                  class: "compIcon"
+                })) : vue.createCommentVNode("", true),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
+                }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
+                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+                  vue.createVNode(vue.unref(design.TMagicTooltip), {
+                    effect: "dark",
+                    content: editable.value ? "编辑" : "查看",
+                    placement: "bottom"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_sfc_main$E, {
+                        icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                        class: "edit-icon",
+                        onClick: vue.withModifiers(($event) => editCode(data.id), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1032, ["content"]),
+                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                    key: 0,
+                    effect: "dark",
+                    content: "删除",
+                    placement: "bottom"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_sfc_main$E, {
+                        icon: vue.unref(iconsVue.Close),
+                        class: "edit-icon",
+                        onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)) : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                    id: data.id,
+                    data: data.codeBlockContent
+                  })
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ], 8, _hoisted_1$c)
+          ]),
+          _: 3
+        }, 8, ["default-expanded-keys", "data"]);
+      };
+    }
+  });
+
+  const _hoisted_1$b = { class: "search-wrapper" };
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeBlockListPanel"
+    },
+    __name: "CodeBlockListPanel",
+    props: {
+      customError: { type: Function }
+    },
+    setup(__props) {
+      const { codeBlockService } = vue.inject("services") || {};
+      const editable = vue.computed(() => codeBlockService?.getEditStatus());
+      const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
+      const codeBlockList = vue.ref();
+      const filterTextChangeHandler = (val) => {
+        codeBlockList.value?.filter(val);
+      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$a, [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$b, [
+                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
                   type: "primary",
                   size: "small",
-                  onClick: createCodeBlock
+                  onClick: vue.unref(createCodeBlock)
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode("新增")
                   ]),
                   _: 1
-                })) : vue.createCommentVNode("", true)
+                }, 8, ["onClick"])) : vue.createCommentVNode("", true)
               ])
             ]),
-            vue.createVNode(vue.unref(design.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: vue.withCtx(({ data }) => [
-                vue.createElementVNode("div", {
-                  id: data.id,
-                  class: "list-container"
-                }, [
-                  vue.createElementVNode("div", _hoisted_3$2, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
-                      key: 0,
-                      class: "codeIcon"
-                    })) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
-                      key: 1,
-                      class: "compIcon"
-                    })) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", {
-                      class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
-                    }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
-                      vue.createVNode(vue.unref(design.TMagicTooltip), {
-                        effect: "dark",
-                        content: editable.value ? "编辑" : "查看",
-                        placement: "bottom"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$E, {
-                            icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
-                            class: "edit-icon",
-                            onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
-                          }, null, 8, ["icon", "onClick"])
-                        ]),
-                        _: 2
-                      }, 1032, ["content"]),
-                      editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                        key: 0,
-                        effect: "dark",
-                        content: "删除",
-                        placement: "bottom"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$E, {
-                            icon: vue.unref(iconsVue.Close),
-                            class: "edit-icon",
-                            onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
-                          }, null, 8, ["icon", "onClick"])
-                        ]),
-                        _: 2
-                      }, 1024)) : vue.createCommentVNode("", true),
-                      vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                        id: data.id,
-                        data: data.codeBlockContent
-                      })
-                    ])) : vue.createCommentVNode("", true)
-                  ])
-                ], 8, _hoisted_2$4)
-              ]),
-              _: 3
-            }, 8, ["default-expanded-keys", "data"]),
-            isShowCodeBlockEditor.value ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
+            vue.createVNode(_sfc_main$k, {
+              ref_key: "codeBlockList",
+              ref: codeBlockList,
+              "custom-error": _ctx.customError,
+              onEdit: vue.unref(editCode),
+              onRemove: vue.unref(deleteCode)
+            }, null, 8, ["custom-error", "onEdit", "onRemove"]),
+            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
               key: 0,
-              paramsColConfig: _ctx.paramsColConfig
-            }, {
-              "code-block-edit-panel-header": vue.withCtx(({ id }) => [
-                vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-              ]),
-              _: 3
-            }, 8, ["paramsColConfig"])) : vue.createCommentVNode("", true)
+              ref_key: "codeBlockEditor",
+              ref: codeBlockEditor,
+              disabled: !editable.value,
+              content: vue.unref(codeConfig),
+              onSubmit: vue.unref(submitCodeBlockHandler)
+            }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true)
           ]),
           _: 3
         });
@@ -4812,14 +5012,15 @@
     }
   });
 
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
     __name: "DataSourceConfigPanel",
     props: {
       title: {},
-      values: {}
+      values: {},
+      disabled: { type: Boolean }
     },
     emits: ["submit"],
     setup(__props, { expose: __expose, emit }) {
@@ -4828,7 +5029,7 @@
       const services = vue.inject("services");
       const size = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
       const dataSourceConfig = vue.computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
-      const form$1 = vue.ref();
+      const fomDrawer = vue.ref();
       const initValues = vue.ref({});
       vue.watchEffect(() => {
         initValues.value = props.values;
@@ -4841,84 +5042,53 @@
         type.value = value.type || "base";
         initValues.value = value;
       };
-      const submitHandler = async () => {
-        try {
-          const values = await form$1.value?.submitForm();
-          emit("submit", values);
-        } catch (error) {
-          design.tMagicMessage.error(error.message);
-        }
+      const submitHandler = (values) => {
+        emit("submit", values);
       };
-      const visible = vue.ref(false);
-      const hide = () => {
-        visible.value = false;
+      const errorHandler = (error) => {
+        design.tMagicMessage.error(error.message);
       };
       __expose({
         show() {
-          visible.value = true;
+          fomDrawer.value?.show();
         },
-        hide
+        hide() {
+          fomDrawer.value?.hide();
+        }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDrawer), {
-          modelValue: visible.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+        return vue.openBlock(), vue.createBlock(vue.unref(form.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: vue.withCtx(() => [
-            vue.createElementVNode("div", null, [
-              vue.createVNode(vue.unref(design.TMagicButton), {
-                type: "primary",
-                onClick: submitHandler
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode("确定")
-                ]),
-                _: 1
-              }),
-              vue.createVNode(vue.unref(design.TMagicButton), { onClick: hide }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode("关闭")
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(form.MForm), {
-              ref_key: "form",
-              ref: form$1,
-              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__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceListPanel"
+      name: "MEditorDataSourceList"
     },
-    __name: "DataSourceListPanel",
-    setup(__props) {
-      const services = vue.inject("services", {});
-      const { dataSourceService, depService, editorService } = vue.inject("services") || {};
+    __name: "DataSourceList",
+    emits: ["edit", "remove"],
+    setup(__props, { expose: __expose, emit }) {
+      const { depService, editorService, dataSourceService } = vue.inject("services") || {};
+      const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
       const list = vue.computed(
         () => Object.values(depService?.targets["data-source"] || {}).map((target) => ({
           id: target.id,
@@ -4932,8 +5102,123 @@
           }))
         }))
       );
+      const editHandler = (id) => {
+        emit("edit", id);
+      };
+      const removeHandler = async (id) => {
+        await design.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 = vue.ref();
+      __expose({
+        filter(val) {
+          debugger;
+          tree.value?.filter(val);
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
+          ref_key: "tree",
+          ref: tree,
+          class: "magic-editor-layer-tree",
+          "node-key": "id",
+          "empty-text": "暂无代码块",
+          "default-expand-all": "",
+          "expand-on-click-node": false,
+          data: list.value,
+          "highlight-current": true,
+          onNodeClick: clickHandler
+        }, {
+          default: vue.withCtx(({ data }) => [
+            vue.createElementVNode("div", {
+              id: data.id,
+              class: "list-container"
+            }, [
+              vue.createElementVNode("div", _hoisted_2$3, [
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                  key: 0,
+                  class: "codeIcon",
+                  icon: vue.unref(iconsVue.Coin)
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                  key: 1,
+                  class: "compIcon",
+                  icon: vue.unref(iconsVue.Aim)
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
+                }, vue.toDisplayString(data.name) + "（" + vue.toDisplayString(data.id) + "）", 3),
+                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+                  vue.createVNode(vue.unref(design.TMagicTooltip), {
+                    effect: "dark",
+                    content: editable.value ? "编辑" : "查看",
+                    placement: "bottom"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_sfc_main$E, {
+                        icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                        class: "edit-icon",
+                        onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1032, ["content"]),
+                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                    key: 0,
+                    effect: "dark",
+                    content: "删除",
+                    placement: "bottom"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_sfc_main$E, {
+                        icon: vue.unref(iconsVue.Close),
+                        class: "edit-icon",
+                        onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)) : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                    id: data.id,
+                    data: data.codeBlockContent
+                  })
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ], 8, _hoisted_1$a)
+          ]),
+          _: 3
+        }, 8, ["data"]);
+      };
+    }
+  });
+
+  const _hoisted_1$9 = { class: "search-wrapper" };
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorDataSourceListPanel"
+    },
+    __name: "DataSourceListPanel",
+    setup(__props) {
+      const { dataSourceService } = vue.inject("services") || {};
       const editDialog = vue.ref();
       const dataSourceValues = vue.ref({});
+      const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
       const addHandler = () => {
         if (!editDialog.value)
           return;
@@ -4941,24 +5226,17 @@
         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 design.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 {
@@ -4966,28 +5244,17 @@
         }
         editDialog.value?.hide();
       };
-      const tree = vue.ref();
+      const dataSourceList = vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$9, [
-              vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+              editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                key: 0,
                 type: "primary",
                 size: "small",
                 onClick: addHandler
@@ -4996,87 +5263,22 @@
                   vue.createTextVNode("新增")
                 ]),
                 _: 1
-              })
+              })) : vue.createCommentVNode("", true)
             ]),
-            vue.createVNode(vue.unref(design.TMagicTree), {
-              ref_key: "tree",
-              ref: tree,
-              class: "magic-editor-layer-tree",
-              "node-key": "id",
-              "empty-text": "暂无代码块",
-              "default-expand-all": "",
-              "expand-on-click-node": false,
-              data: list.value,
-              "highlight-current": true,
-              onNodeClick: clickHandler
-            }, {
-              default: vue.withCtx(({ data }) => [
-                vue.createElementVNode("div", {
-                  id: data.id,
-                  class: "list-container"
-                }, [
-                  vue.createElementVNode("div", _hoisted_3$1, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
-                      key: 0,
-                      class: "codeIcon",
-                      icon: vue.unref(iconsVue.Coin)
-                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
-                      key: 1,
-                      class: "compIcon",
-                      icon: vue.unref(iconsVue.Aim)
-                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", {
-                      class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
-                    }, vue.toDisplayString(data.name) + "（" + vue.toDisplayString(data.id) + "）", 3),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
-                      vue.createVNode(vue.unref(design.TMagicTooltip), {
-                        effect: "dark",
-                        content: "编辑",
-                        placement: "bottom"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$E, {
-                            class: "edit-icon",
-                            icon: vue.unref(iconsVue.Edit),
-                            onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
-                          }, null, 8, ["icon", "onClick"])
-                        ]),
-                        _: 2
-                      }, 1024),
-                      vue.createVNode(vue.unref(design.TMagicTooltip), {
-                        effect: "dark",
-                        content: "删除",
-                        placement: "bottom"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$E, {
-                            icon: vue.unref(iconsVue.Close),
-                            class: "edit-icon",
-                            onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
-                          }, null, 8, ["icon", "onClick"])
-                        ]),
-                        _: 2
-                      }, 1024),
-                      vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
-                        id: data.id,
-                        data: data.codeBlockContent
-                      })
-                    ])) : vue.createCommentVNode("", true)
-                  ])
-                ], 8, _hoisted_2$3)
-              ]),
-              _: 3
-            }, 8, ["data"]),
             vue.createVNode(_sfc_main$h, {
+              onEdit: editHandler,
+              onRemove: removeHandler
+            }),
+            vue.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
         });
       };
     }
@@ -5162,7 +5364,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -5319,7 +5521,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$r, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$q, {
                 "event-type": "mouseup",
                 ref_for: true,
                 ref_key: "buttons",
@@ -5804,7 +6006,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
             values.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
               class: "magic-editor-layer-tree",
@@ -5908,7 +6110,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$i,
+            component: _sfc_main$j,
             slots: {}
           },
           "data-source": {
@@ -6002,16 +6204,6 @@
                       ]),
                       key: "4"
                     } : void 0,
-                    config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
-                      name: "code-block-edit-panel-header",
-                      fn: vue.withCtx(({ id }) => [
-                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-                          key: 0,
-                          id
-                        }) : config.slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ]),
-                      key: "5"
-                    } : void 0,
                     config.$key === "layer" || config.slots?.layerNodeContent ? {
                       name: "layer-node-content",
                       fn: vue.withCtx(({ data: nodeData, node }) => [
@@ -6025,7 +6217,7 @@
                           node
                         }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
                       ]),
-                      key: "6"
+                      key: "5"
                     } : void 0
                   ]), 1040)) : vue.createCommentVNode("", true)
                 ]),
@@ -6271,7 +6463,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$r, {
+                        vue.createVNode(_sfc_main$q, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -6279,7 +6471,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$r, {
+                        vue.createVNode(_sfc_main$q, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -7014,22 +7206,14 @@
 
   class CodeBlock extends BaseService {
     state = vue.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数据源
@@ -7076,7 +7260,10 @@
       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] = {
@@ -7094,40 +7281,6 @@
       const codeDsl = this.getCodeDsl();
       return lodashEs.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} 是否可编辑
@@ -7143,23 +7296,6 @@
     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数组
@@ -7221,6 +7357,12 @@
         this.emit("remove", id);
       });
     }
+    setParamsColConfig(config) {
+      this.state.paramsColConfig = config;
+    }
+    getParamsColConfig() {
+      return this.state.paramsColConfig;
+    }
     /**
      * 生成代码块唯一id
      * @returns {Id} 代码块唯一id
@@ -7234,9 +7376,7 @@
       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 = [];
@@ -7369,6 +7509,17 @@
           defaultValue: []
         }
       ]
+    },
+    {
+      type: "panel",
+      title: "方法定义",
+      items: [
+        {
+          name: "methods",
+          type: "data-source-methods",
+          defaultValue: []
+        }
+      ]
     }
   ];
   const getFormConfig = (type, configs) => {
@@ -7385,6 +7536,7 @@
   class DataSource extends BaseService {
     state = vue.reactive({
       dataSources: [],
+      editable: true,
       configs: {}
     });
     set(name, value) {
@@ -8380,11 +8532,11 @@
   const _sfc_main = vue.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"],
@@ -8487,9 +8639,6 @@
                 data
               })
             ]),
-            "code-block-edit-panel-header": vue.withCtx(({ id }) => [
-              vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-            ]),
             _: 3
           }, 8, ["data", "layer-content-menu"])
         ])
@@ -8552,49 +8701,55 @@
       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);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockList = _sfc_main$i;
+  exports.CodeBlockEditor = _sfc_main$G;
+  exports.CodeBlockList = _sfc_main$k;
+  exports.CodeBlockListPanel = _sfc_main$j;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$F;
+  exports.CodeSelect = _sfc_main$H;
   exports.CodeSelectCol = _sfc_main$D;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$f;
   exports.ContentMenu = _sfc_main$e;
   exports.DataSourceFields = _sfc_main$C;
   exports.DataSourceInput = _sfc_main$B;
-  exports.DataSourceSelect = _sfc_main$A;
-  exports.EventSelect = _sfc_main$z;
+  exports.DataSourceMethodSelect = _sfc_main$z;
+  exports.DataSourceMethods = _sfc_main$A;
+  exports.DataSourceSelect = _sfc_main$y;
+  exports.EventSelect = _sfc_main$x;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
   exports.Icon = _sfc_main$E;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$y;
+  exports.KeyValue = _sfc_main$w;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$b;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$u;
-  exports.PropsPanel = _sfc_main$p;
-  exports.Resizer = _sfc_main$v;
-  exports.SplitView = _sfc_main$u;
-  exports.TMagicCodeEditor = _sfc_main$w;
+  exports.LayoutContainer = _sfc_main$t;
+  exports.PropsPanel = _sfc_main$o;
+  exports.Resizer = _sfc_main$u;
+  exports.SplitView = _sfc_main$t;
+  exports.TMagicCodeEditor = _sfc_main$K;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$r;
+  exports.ToolButton = _sfc_main$q;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;