@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.3

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  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';
+  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('@tmagic/utils'), require('gesto'), 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', '@tmagic/utils', 'gesto', '@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.utils, global.Gesto, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, monaco, serialize, design, schema, form, table, utils, Gesto, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,10 +23,16 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
+  let $TMAGIC_EDITOR = {};
+  const setConfig = (option) => {
+    $TMAGIC_EDITOR = option;
+  };
+  const getConfig = (key) => $TMAGIC_EDITOR[key];
+
   const _hoisted_1$w = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -40,7 +46,8 @@
         tabSize: 2
       }) },
       height: {},
-      autoSave: { type: Boolean, default: true }
+      autoSave: { type: Boolean, default: true },
+      parse: { type: Boolean, default: false }
     },
     emits: ["initd", "save"],
     setup(__props, { expose: __expose, emit }) {
@@ -48,7 +55,7 @@
       const toString = (v, language) => {
         let value = "";
         if (typeof v !== "string") {
-          if (props.language.toLocaleLowerCase() === "json") {
+          if (language === "json") {
             value = JSON.stringify(v, null, 2);
           } else {
             value = serialize(v, {
@@ -64,6 +71,15 @@
         }
         return value;
       };
+      const parse = (v, language) => {
+        if (typeof v !== "string") {
+          return v;
+        }
+        if (language === "json") {
+          return JSON.parse(v);
+        }
+        return getConfig("parseDSL")(v);
+      };
       let vsEditor = null;
       let vsDiffEditor = null;
       const values = vue.ref("");
@@ -76,7 +92,7 @@
         }, 300)
       );
       const setEditorValue = (v, m) => {
-        values.value = toString(v, props.language);
+        values.value = toString(v, props.language.toLocaleLowerCase());
         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");
@@ -111,7 +127,7 @@
             e.stopPropagation();
             const newValue = getEditorValue();
             values.value = newValue;
-            emit("save", newValue);
+            emit("save", props.parse ? parse(newValue, props.language) : newValue);
           }
         });
         if (props.type !== "diff" && props.autoSave) {
@@ -119,7 +135,7 @@
             const newValue = getEditorValue();
             if (values.value !== newValue) {
               values.value = newValue;
-              emit("save", newValue);
+              emit("save", props.parse ? parse(newValue, props.language) : newValue);
             }
           });
         }
@@ -201,7 +217,7 @@
     }
   });
 
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -225,7 +241,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$S, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -233,19 +249,14 @@
             ..._ctx.config.options,
             readOnly: _ctx.disabled
           },
+          parse: _ctx.config.parse,
           onSave: save
-        }, null, 8, ["height", "init-values", "language", "options"]);
+        }, null, 8, ["height", "init-values", "language", "options", "parse"]);
       };
     }
   });
 
-  let $TMAGIC_EDITOR = {};
-  const setConfig = (option) => {
-    $TMAGIC_EDITOR = option;
-  };
-  const getConfig = (key) => $TMAGIC_EDITOR[key];
-
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -324,7 +335,7 @@
     }
   });
 
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -397,10 +408,10 @@
   });
 
   const _hoisted_1$v = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$n = { style: { "flex": "1" } };
-  const _hoisted_3$a = { style: { "flex": "1" } };
-  const _hoisted_4$6 = { class: "dialog-footer" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$p = { style: { "flex": "1" } };
+  const _hoisted_3$b = { style: { "flex": "1" } };
+  const _hoisted_4$7 = { class: "dialog-footer" };
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -619,7 +630,7 @@
             fullscreen: ""
           }, {
             footer: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_4$6, [
+              vue.createElementVNode("span", _hoisted_4$7, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -643,7 +654,7 @@
             ]),
             default: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_1$v, [
-                vue.createElementVNode("div", _hoisted_2$n, [
+                vue.createElementVNode("div", _hoisted_2$p, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "info"
@@ -654,7 +665,7 @@
                     _: 1
                   })
                 ]),
-                vue.createElementVNode("div", _hoisted_3$a, [
+                vue.createElementVNode("div", _hoisted_3$b, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "success"
@@ -666,7 +677,7 @@
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$S, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -795,6 +806,29 @@
           defaultValue: () => []
         }
       ]
+    },
+    {
+      type: "panel",
+      title: "事件配置",
+      display: false,
+      items: [
+        {
+          name: "events",
+          src: "datasource",
+          type: "event-select"
+        }
+      ]
+    },
+    {
+      type: "panel",
+      title: "mock数据",
+      items: [
+        {
+          name: "mocks",
+          type: "data-source-mocks",
+          defaultValue: () => []
+        }
+      ]
     }
   ];
   const getFormConfig = (type, configs) => {
@@ -975,7 +1009,9 @@
       dataSources: [],
       editable: true,
       configs: {},
-      values: {}
+      values: {},
+      events: {},
+      methods: {}
     });
     set(name, value) {
       this.state[name] = value;
@@ -995,6 +1031,18 @@
     setFormValue(type, value) {
       this.get("values")[type] = value;
     }
+    getFormEvent(type = "base") {
+      return this.get("events")[type] || [];
+    }
+    setFormEvent(type, value = []) {
+      this.get("events")[type] = value;
+    }
+    getFormMethod(type = "base") {
+      return this.get("methods")[type] || [];
+    }
+    setFormMethod(type, value = []) {
+      this.get("methods")[type] = value;
+    }
     add(config) {
       const newConfig = {
         ...config,
@@ -1211,6 +1259,7 @@
     items: [
       {
         name: "events",
+        src: "component",
         type: "event-select"
       }
     ]
@@ -1240,6 +1289,8 @@
       {
         type: "groupList",
         name: "displayConds",
+        titlePrefix: "条件组",
+        expandAll: true,
         items: [
           {
             type: "table",
@@ -1248,6 +1299,7 @@
               {
                 type: "data-source-field-select",
                 name: "field",
+                value: "key",
                 label: "字段"
               },
               {
@@ -1433,6 +1485,11 @@
     DepTargetType2["DATA_SOURCE_COND"] = "data-source-cond";
     return DepTargetType2;
   })(DepTargetType || {});
+  var DragType = /* @__PURE__ */ ((DragType2) => {
+    DragType2["COMPONENT_LIST"] = "component-list";
+    DragType2["LAYER_TREE"] = "layer-tree";
+    return DragType2;
+  })(DragType || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
@@ -1455,9 +1512,9 @@
   };
   const generatePageNameByApp = (app) => generatePageName(getPageNameList(getPageList(app)));
   const isFixed = (node) => node.style?.position === "fixed";
-  const getNodeIndex = (node, parent) => {
+  const getNodeIndex = (id, parent) => {
     const items = parent?.items || [];
-    return items.findIndex((item) => `${item.id}` === `${node.id}`);
+    return items.findIndex((item) => `${item.id}` === `${id}`);
   };
   const getRelativeStyle = (style = {}) => ({
     ...style,
@@ -1593,6 +1650,15 @@
     space: 2,
     unsafe: true
   }).replace(/"(\w+)":\s/g, "$1: ");
+  const traverseNode = (node, cb, parents = []) => {
+    cb(node, parents);
+    if (node.items?.length) {
+      parents.push(node);
+      node.items.forEach((item) => {
+        traverseNode(item, cb, parents);
+      });
+    }
+  };
 
   class UndoRedo {
     elementList;
@@ -1971,7 +2037,7 @@
   }
   const propsService = new Props();
 
-  let Editor$1 = class Editor extends BaseService {
+  class Editor extends BaseService {
     state = vue.reactive({
       root: null,
       page: null,
@@ -2006,7 +2072,8 @@
           "move",
           "undo",
           "redo",
-          "highlight"
+          "highlight",
+          "dragTo"
         ],
         // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
         ["select", "update", "moveLayer"]
@@ -2149,7 +2216,7 @@
       const parent = vue.toRaw(this.getParentById(node.id));
       if (!parent)
         return node;
-      const index = getNodeIndex(node, parent);
+      const index = getNodeIndex(node.id, parent);
       const nextNode = parent.items[index + 1] || parent.items[0];
       await this.select(nextNode);
       this.get("stage")?.select(nextNode.id);
@@ -2162,7 +2229,7 @@
         throw new Error("page不能为空");
       if (!root)
         throw new Error("root不能为空");
-      const index = getNodeIndex(page, root);
+      const index = getNodeIndex(page.id, root);
       const nextPage = root.items[index + 1] || root.items[0];
       await this.select(nextPage);
       this.get("stage")?.select(nextPage.id);
@@ -2283,7 +2350,7 @@
       const { parent, node: curNode } = this.getNodeInfo(node.id);
       if (!parent || !curNode)
         throw new Error("找不要删除的节点");
-      const index = getNodeIndex(curNode, parent);
+      const index = getNodeIndex(curNode.id, parent);
       if (typeof index !== "number" || index === -1)
         throw new Error("找不要删除的节点");
       parent.items?.splice(index, 1);
@@ -2351,7 +2418,7 @@
       if (!parent)
         throw new Error("获取不到父级节点");
       const parentNodeItems = parent.items;
-      const index = getNodeIndex(newConfig, parent);
+      const index = getNodeIndex(newConfig.id, parent);
       if (!parentNodeItems || typeof index === "undefined" || index === -1)
         throw new Error("更新的节点未找到");
       const newLayout = await this.getLayout(newConfig);
@@ -2541,7 +2608,7 @@
       const target = this.getNodeById(targetId, false);
       const stage = this.get("stage");
       if (root && node && parent && stage) {
-        const index = getNodeIndex(node, parent);
+        const index = getNodeIndex(node.id, parent);
         parent.items?.splice(index, 1);
         await stage.remove({ id: node.id, parentId: parent.id, root });
         const layout = await this.getLayout(target);
@@ -2563,6 +2630,38 @@
         return newConfig;
       }
     }
+    async dragTo(config, targetParent, targetIndex) {
+      if (!targetParent || !Array.isArray(targetParent.items))
+        return;
+      const { parent, node: curNode } = this.getNodeInfo(config.id, false);
+      if (!parent || !curNode)
+        throw new Error("找不要删除的节点");
+      const index = getNodeIndex(curNode.id, parent);
+      if (typeof index !== "number" || index === -1)
+        throw new Error("找不要删除的节点");
+      if (parent.id === targetParent.id) {
+        if (index === targetIndex)
+          return;
+        if (index < targetIndex) {
+          targetIndex -= 1;
+        }
+      }
+      parent.items?.splice(index, 1);
+      targetParent.items?.splice(targetIndex, 0, config);
+      const page = this.get("page");
+      const root = this.get("root");
+      const stage = this.get("stage");
+      if (stage && page && root) {
+        stage.update({
+          config: lodashEs.cloneDeep(page),
+          parentId: root.id,
+          root: lodashEs.cloneDeep(root)
+        });
+      }
+      this.addModifiedNodeId(config.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+    }
     /**
      * 撤销当前操作
      * @returns 上一次数据
@@ -2707,8 +2806,8 @@
         page
       };
     }
-  };
-  const editorService = new Editor$1();
+  }
+  const editorService = new Editor();
 
   const beforePaste = async (position, config) => {
     if (!config[0]?.style)
@@ -2782,7 +2881,7 @@
     return newNode;
   };
 
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -2832,7 +2931,7 @@
   });
 
   const _hoisted_1$u = ["src"];
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -2933,8 +3032,8 @@
   };
 
   const _hoisted_1$t = { class: "m-fields-code-select-col" };
-  const _hoisted_2$m = { class: "code-select-container" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$o = { class: "code-select-container" };
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -3009,21 +3108,21 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-          vue.createElementVNode("div", _hoisted_2$m, [
+          vue.createElementVNode("div", _hoisted_2$o, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
               model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
               key: 0,
               class: "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)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3031,7 +3130,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3045,8 +3144,8 @@
   });
 
   const _hoisted_1$s = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$l = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$n = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -3068,11 +3167,11 @@
       const services = vue.inject("services");
       const addDialog = vue.ref();
       const fieldValues = vue.ref({});
-      const filedTitle = vue.ref("");
+      const fieldTitle = vue.ref("");
       const width = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
       const newHandler = () => {
         fieldValues.value = {};
-        filedTitle.value = "新增属性";
+        fieldTitle.value = "新增属性";
         addDialog.value?.show();
       };
       const fieldChange = ({ index, ...value }) => {
@@ -3112,7 +3211,7 @@
                   ...row,
                   index
                 };
-                filedTitle.value = `编辑${row.title}`;
+                fieldTitle.value = `编辑${row.title}`;
                 addDialog.value?.show();
               }
             },
@@ -3182,12 +3281,16 @@
         {
           name: "defaultValue",
           text: "默认值",
+          height: "200px",
+          parse: true,
           type: (mForm, { model }) => {
             if (model.type === "number")
               return "number";
             if (model.type === "boolean")
               return "select";
-            return "string";
+            if (model.type === "string")
+              return "text";
+            return "vs-code";
           },
           options: [
             { text: "true", value: true },
@@ -3204,22 +3307,98 @@
           name: "fields",
           type: "data-source-fields",
           defaultValue: [],
-          display: (formState, { model }) => model.type === "object"
+          display: (formState, { model }) => model.type === "object" || model.type === "array"
+        }
+      ];
+      const addFromJsonDialog = vue.ref();
+      const jsonFromConfig = [
+        {
+          name: "data",
+          type: "vs-code",
+          labelWidth: "0",
+          language: "json",
+          height: "600px",
+          options: vue.inject("codeOptions", {})
         }
       ];
+      const jsonFromValues = vue.ref({
+        data: {}
+      });
+      const newFromJsonHandler = () => {
+        addFromJsonDialog.value?.show();
+      };
+      const getValueType = (value) => {
+        if (Array.isArray(value))
+          return "array";
+        if (value === null)
+          return "null";
+        if (typeof value === "object")
+          return "object";
+        if (typeof value === "number")
+          return "number";
+        if (typeof value === "boolean")
+          return "boolean";
+        if (typeof value === "string")
+          return "string";
+        return "any";
+      };
+      const getFieldsConfig = (value) => {
+        if (!value || typeof value !== "object")
+          throw new Error("数据格式错误");
+        const fields = [];
+        Object.entries(value).forEach(([key, value2]) => {
+          const type = getValueType(value2);
+          let childFields = [];
+          if (Array.isArray(value2) && value2.length > 0) {
+            childFields = getFieldsConfig(value2[0]);
+          } else if (type === "object") {
+            childFields = getFieldsConfig(value2);
+          }
+          fields.push({
+            name: key,
+            title: key,
+            type,
+            defaultValue: value2,
+            fields: childFields
+          });
+        });
+        return fields;
+      };
+      const addFromJsonFromChange = ({ data }) => {
+        console.log(data);
+        try {
+          const value = JSON.parse(data);
+          props.model[props.name] = getFieldsConfig(value);
+          addFromJsonDialog.value?.hide();
+          emit("change", props.model[props.name]);
+        } catch (e) {
+          design.tMagicMessage.error(e.message);
+        }
+      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$l, [
+          vue.createElementVNode("div", _hoisted_2$n, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              size: "small",
+              disabled: _ctx.disabled,
+              plain: "",
+              onClick: _cache[0] || (_cache[0] = ($event) => newFromJsonHandler())
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("快速添加")
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
               disabled: _ctx.disabled,
               plain: "",
-              onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+              onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
             }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode("添加")
@@ -3231,20 +3410,30 @@
             ref_key: "addDialog",
             ref: addDialog,
             "label-width": "80px",
-            title: filedTitle.value,
+            title: fieldTitle.value,
             config: dataSourceFieldsConfig,
             values: fieldValues.value,
             parentValues: _ctx.model[_ctx.name],
             disabled: _ctx.disabled,
             width: width.value,
             onSubmit: fieldChange
-          }, null, 8, ["title", "values", "parentValues", "disabled", "width"])
+          }, null, 8, ["title", "values", "parentValues", "disabled", "width"]),
+          vue.createVNode(vue.unref(form.MFormDrawer), {
+            ref_key: "addFromJsonDialog",
+            ref: addFromJsonDialog,
+            title: "快速添加数据定义",
+            config: jsonFromConfig,
+            values: jsonFromValues.value,
+            disabled: _ctx.disabled,
+            width: width.value,
+            onSubmit: addFromJsonFromChange
+          }, null, 8, ["values", "disabled", "width"])
         ]);
       };
     }
   });
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3262,18 +3451,25 @@
       const props = __props;
       const services = vue.inject("services");
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
-      const cascaderConfig = {
-        type: "cascader",
-        name: props.name,
-        options: () => dataSources.value?.filter((ds) => ds.fields?.length)?.map((ds) => ({
-          label: ds.title || ds.id,
-          value: ds.id,
-          children: ds.fields?.map((field) => ({
-            label: field.title,
-            value: field.name
-          }))
-        })) || []
-      };
+      const getOptionChildren = (fields = []) => fields.map((field) => ({
+        label: field.title || field.name,
+        value: field.name,
+        children: field.type === "array" ? [] : getOptionChildren(field.fields)
+      }));
+      const cascaderConfig = vue.computed(() => {
+        const valueIsKey = props.config.value === "key";
+        return {
+          type: "cascader",
+          name: props.name,
+          checkStrictly: !valueIsKey,
+          text: "",
+          options: () => dataSources.value?.filter((ds) => ds.fields?.length)?.map((ds) => ({
+            label: ds.title || ds.id,
+            value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+            children: getOptionChildren(ds.fields)
+          })) || []
+        };
+      });
       const onChangeHandler = (value) => {
         emit("change", value);
       };
@@ -3282,7 +3478,7 @@
         return vue.openBlock(), vue.createBlock(_component_m_form_container, {
           config: {
             ..._ctx.config,
-            ...cascaderConfig
+            ...cascaderConfig.value
           },
           model: _ctx.model,
           onChange: onChangeHandler
@@ -3292,9 +3488,9 @@
   });
 
   const _hoisted_1$r = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-  const _hoisted_2$k = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-  const _hoisted_3$9 = { class: "el-input__inner" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$m = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$a = { class: "el-input__inner" };
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -3483,12 +3679,12 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$r, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$k, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$m, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -3500,7 +3696,7 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$9, [
+            vue.createElementVNode("div", _hoisted_3$a, [
               (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", {
@@ -3518,7 +3714,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$K, {
+              vue.createVNode(_sfc_main$M, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -3602,8 +3798,8 @@
   };
 
   const _hoisted_1$q = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$j = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$l = { class: "m-editor-data-source-methods-footer" };
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
     },
@@ -3677,7 +3873,7 @@
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_2$l, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3691,7 +3887,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3707,8 +3903,8 @@
   });
 
   const _hoisted_1$p = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$i = { class: "data-source-method-select-container" };
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$k = { class: "data-source-method-select-container" };
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
     },
@@ -3728,7 +3924,8 @@
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
-      const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
+      const dataSourceService = services?.dataSourceService;
+      const dataSources = vue.computed(() => dataSourceService?.get("dataSources"));
       const getParamItemsConfig = ([dataSourceId, medthodName] = ["", ""]) => {
         if (!dataSourceId)
           return [];
@@ -3750,24 +3947,30 @@
           props.model.params = {};
         }
       };
-      const cascaderConfig = {
+      const methodsOptions = vue.computed(
+        () => dataSources.value?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)?.map((ds) => ({
+          label: ds.title || ds.id,
+          value: ds.id,
+          children: [
+            ...dataSourceService?.getFormMethod(ds.type) || [],
+            ...(ds.methods || []).map((method) => ({
+              label: method.name,
+              value: method.name
+            }))
+          ]
+        })) || []
+      );
+      const cascaderConfig = vue.computed(() => ({
         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
-          }))
-        })) || [],
+        options: methodsOptions.value,
         onChange: (formState, dataSourceMethod) => {
           setParamsConfig(dataSourceMethod, formState);
           return dataSourceMethod;
         }
-      };
+      }));
       const onChangeHandler = (value) => {
         props.model.params = value.params;
         emit("change", props.model);
@@ -3775,7 +3978,7 @@
       const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
       const editCodeHandler = () => {
         const [id, name] = props.model[props.name];
-        const dataSource = services?.dataSourceService.getDataSourceById(id);
+        const dataSource = dataSourceService?.getDataSourceById(id);
         if (!dataSource)
           return;
         editCode(dataSource, name);
@@ -3787,21 +3990,21 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+          vue.createElementVNode("div", _hoisted_2$k, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
-              config: cascaderConfig,
+              config: cascaderConfig.value,
               model: _ctx.model,
               onChange: onChangeHandler
-            }, null, 8, ["model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+            }, null, 8, ["config", "model"]),
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
               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$L, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3810,7 +4013,7 @@
             "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$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3823,11 +4026,13 @@
     }
   });
 
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceSelect"
+      name: "MEditorDataSourceMocks"
     },
-    __name: "DataSourceSelect",
+    __name: "DataSourceMocks",
     props: {
       config: {},
       model: {},
@@ -3840,122 +4045,367 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
-      const props = __props;
-      const { dataSourceService } = vue.inject("services") || {};
-      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
-      const selectConfig = vue.computed(() => {
-        const { type, dataSourceType, ...config } = props.config;
-        return {
-          ...config,
-          type: "select",
-          valueKey: "dataSourceId",
-          options: dataSources.value.filter((ds) => !dataSourceType || ds.type === dataSourceType).map((ds) => ({
-            value: {
-              isBindDataSource: true,
-              dataSourceType: ds.type,
-              dataSourceId: ds.id
-            },
-            text: ds.title || ds.id
-          }))
-        };
-      });
-      const changeHandler = (value) => {
-        emit("change", value);
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(form.MSelect), {
-          model: _ctx.model,
-          name: _ctx.name,
-          size: _ctx.size,
-          prop: _ctx.prop,
-          disabled: _ctx.disabled,
-          config: selectConfig.value,
-          "last-values": _ctx.lastValues,
-          onChange: changeHandler
-        }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]);
-      };
-    }
-  });
-
-  const _hoisted_1$o = { class: "m-fields-event-select" };
-  const _hoisted_2$h = {
-    key: 1,
-    class: "fullWidth"
-  };
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorEventSelect"
-    },
-    __name: "EventSelect",
-    props: {
-      config: {},
-      model: {},
-      initValues: {},
-      values: {},
-      name: {},
-      prop: {},
-      disabled: { type: Boolean },
-      size: {},
-      lastValues: {}
-    },
-    emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
-      const eventNameConfig = vue.computed(() => {
-        const defaultEventNameConfig = {
-          name: "name",
-          text: "事件",
-          type: "select",
-          labelWidth: "40px",
-          options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
-            text: option.label,
-            value: option.value
-          }))
-        };
-        return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
-      });
-      const actionTypeConfig = vue.computed(() => {
-        const defaultActionTypeConfig = {
-          name: "actionType",
-          text: "联动类型",
-          labelWidth: "80px",
-          type: "select",
-          defaultValue: schema.ActionType.COMP,
-          options: () => [
-            {
-              text: "组件",
-              label: "组件",
-              value: schema.ActionType.COMP
-            },
+      const width = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
+      const addDialog = vue.ref();
+      const drawerTitle = vue.ref("");
+      const formValues = vue.ref({});
+      const formConfig = [
+        { name: "index", type: "hidden", filter: "number", defaultValue: -1 },
+        {
+          name: "title",
+          text: "名称",
+          rules: [
             {
-              text: "代码",
-              label: "代码",
-              disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
-              value: schema.ActionType.CODE
+              required: true,
+              message: "请输入字段名称"
             },
             {
-              text: "数据源",
-              label: "数据源",
-              disabled: !services?.dataSourceService.get("dataSources")?.filter((ds) => ds.methods?.length).length,
-              value: schema.ActionType.DATA_SOURCE
+              required: true,
+              message: "请输入名称"
             }
           ]
-        };
-        return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
-      });
-      const targetCompConfig = vue.computed(() => {
-        const defaultTargetCompConfig = {
-          name: "to",
-          text: "联动组件",
-          labelWidth: "80px",
-          type: "ui-select",
-          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
-        };
-        return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
-      });
-      const compActionConfig = vue.computed(() => {
+        },
+        {
+          name: "description",
+          text: "描述"
+        },
+        {
+          name: "enable",
+          text: "启用",
+          type: "switch"
+        },
+        {
+          name: "useInEditor",
+          text: "编辑器中使用",
+          type: "switch"
+        },
+        {
+          name: "data",
+          text: "mock数据",
+          type: "vs-code",
+          language: "json",
+          options: vue.inject("codeOptions", {}),
+          defaultValue: "{}",
+          height: "400px",
+          onChange: (formState, v) => {
+            if (typeof v !== "string")
+              return v;
+            return JSON.parse(v);
+          },
+          rules: [
+            {
+              validator: ({ value, callback }) => {
+                if (typeof value !== "string")
+                  return callback();
+                try {
+                  JSON.parse(value);
+                  callback();
+                } catch (error) {
+                  callback(error);
+                }
+              }
+            }
+          ]
+        }
+      ];
+      const columns = [
+        {
+          type: "expand",
+          component: _sfc_main$S,
+          props: (row) => ({
+            initValues: row.data,
+            language: "json",
+            height: "150px",
+            options: {
+              readOnly: true
+            }
+          })
+        },
+        {
+          label: "名称",
+          prop: "title"
+        },
+        {
+          label: "描述",
+          prop: "description"
+        },
+        {
+          label: "是否启用",
+          prop: "enable",
+          type: "component",
+          component: design.TMagicSwitch,
+          props: (row) => ({
+            modelValue: row.enable,
+            activeValue: true,
+            inactiveValue: false
+          }),
+          listeners: (row, index) => ({
+            "update:modelValue": (v) => {
+              toggleValue(row, "enable", v, index);
+            }
+          })
+        },
+        {
+          label: "编辑器中使用",
+          prop: "useInEditor",
+          type: "component",
+          component: design.TMagicSwitch,
+          props: (row) => ({
+            modelValue: row.useInEditor,
+            activeValue: true,
+            inactiveValue: false
+          }),
+          listeners: (row, index) => ({
+            "update:modelValue": (v) => {
+              toggleValue(row, "useInEditor", v, index);
+            }
+          })
+        },
+        {
+          label: "操作",
+          fixed: "right",
+          actions: [
+            {
+              text: "编辑",
+              handler: (row, index) => {
+                formValues.value = {
+                  ...row,
+                  index
+                };
+                drawerTitle.value = `编辑${row.title}`;
+                addDialog.value?.show();
+              }
+            },
+            {
+              text: "删除",
+              buttonType: "danger",
+              handler: async (row, index) => {
+                await design.tMagicMessageBox.confirm(`确定删除${row.title}?`, "提示");
+                props.model[props.name].splice(index, 1);
+                emit("change", props.model[props.name]);
+              }
+            }
+          ]
+        }
+      ];
+      const newHandler = () => {
+        const isFirstRow = props.model[props.name].length === 0;
+        formValues.value = {
+          data: utils.getDefaultValueFromFields(props.model.fields || []),
+          useInEditor: isFirstRow,
+          enable: isFirstRow
+        };
+        drawerTitle.value = "新增Mock";
+        addDialog.value?.show();
+      };
+      const formChangeHandler = ({ index, ...value }) => {
+        if (index > -1) {
+          props.model[props.name][index] = value;
+        } else {
+          props.model[props.name].push(value);
+        }
+        addDialog.value?.hide();
+        emit("change", props.model[props.name]);
+      };
+      const toggleValue = (row, key, value, index) => {
+        if (value) {
+          props.model[props.name].forEach((item) => {
+            item[key] = false;
+          });
+        }
+        formChangeHandler({
+          ...row,
+          [key]: value,
+          index
+        });
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          vue.createVNode(vue.unref(table.MagicTable), {
+            data: _ctx.model[_ctx.name],
+            columns
+          }, null, 8, ["data"]),
+          vue.createElementVNode("div", _hoisted_2$j, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              size: "small",
+              type: "primary",
+              disabled: _ctx.disabled,
+              plain: "",
+              onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("添加")
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          vue.createVNode(vue.unref(form.MFormDrawer), {
+            ref_key: "addDialog",
+            ref: addDialog,
+            "label-width": "120px",
+            title: drawerTitle.value,
+            config: formConfig,
+            values: formValues.value,
+            parentValues: _ctx.model[_ctx.name],
+            disabled: _ctx.disabled,
+            width: width.value,
+            onSubmit: formChangeHandler
+          }, null, 8, ["title", "values", "parentValues", "disabled", "width"])
+        ]);
+      };
+    }
+  });
+
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorDataSourceSelect"
+    },
+    __name: "DataSourceSelect",
+    props: {
+      config: {},
+      model: {},
+      initValues: {},
+      values: {},
+      name: {},
+      prop: {},
+      disabled: { type: Boolean, default: false },
+      size: {},
+      lastValues: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const { dataSourceService } = vue.inject("services") || {};
+      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
+      const selectConfig = vue.computed(() => {
+        const { type, dataSourceType, ...config } = props.config;
+        return {
+          ...config,
+          type: "select",
+          valueKey: "dataSourceId",
+          options: dataSources.value.filter((ds) => !dataSourceType || ds.type === dataSourceType).map((ds) => ({
+            value: {
+              isBindDataSource: true,
+              dataSourceType: ds.type,
+              dataSourceId: ds.id
+            },
+            text: ds.title || ds.id
+          }))
+        };
+      });
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(form.MSelect), {
+          model: _ctx.model,
+          name: _ctx.name,
+          size: _ctx.size,
+          prop: _ctx.prop,
+          disabled: _ctx.disabled,
+          config: selectConfig.value,
+          "last-values": _ctx.lastValues,
+          onChange: changeHandler
+        }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]);
+      };
+    }
+  });
+
+  const _hoisted_1$n = { class: "m-fields-event-select" };
+  const _hoisted_2$i = {
+    key: 1,
+    class: "fullWidth"
+  };
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorEventSelect"
+    },
+    __name: "EventSelect",
+    props: {
+      config: {},
+      model: {},
+      initValues: {},
+      values: {},
+      name: {},
+      prop: {},
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const dataSourceService = services?.dataSourceService;
+      const eventsService = services?.eventsService;
+      const codeBlockService = services?.codeBlockService;
+      const eventNameConfig = vue.computed(() => {
+        const defaultEventNameConfig = {
+          name: "name",
+          text: "事件",
+          type: "select",
+          labelWidth: "40px",
+          options: (mForm, { formValue }) => {
+            let events = [];
+            if (!eventsService || !dataSourceService)
+              return events;
+            if (props.config.src === "component") {
+              events = eventsService.getEvent(formValue.type);
+            } else if (props.config.src === "datasource") {
+              events = dataSourceService.getFormEvent(formValue.type);
+            }
+            return events.map((option) => ({
+              text: option.label,
+              value: option.value
+            }));
+          }
+        };
+        return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
+      });
+      const actionTypeConfig = vue.computed(() => {
+        const defaultActionTypeConfig = {
+          name: "actionType",
+          text: "联动类型",
+          labelWidth: "80px",
+          type: "select",
+          defaultValue: schema.ActionType.COMP,
+          options: () => [
+            {
+              text: "组件",
+              label: "组件",
+              value: schema.ActionType.COMP
+            },
+            {
+              text: "代码",
+              label: "代码",
+              disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
+              value: schema.ActionType.CODE
+            },
+            {
+              text: "数据源",
+              label: "数据源",
+              disabled: !dataSourceService?.get("dataSources")?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
+              value: schema.ActionType.DATA_SOURCE
+            }
+          ]
+        };
+        return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
+      });
+      const targetCompConfig = vue.computed(() => {
+        const defaultTargetCompConfig = {
+          name: "to",
+          text: "联动组件",
+          labelWidth: "80px",
+          type: "ui-select",
+          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
+        };
+        return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
+      });
+      const compActionConfig = vue.computed(() => {
         const defaultCompActionConfig = {
           name: "method",
           text: "动作",
@@ -3963,10 +4413,10 @@
           type: "select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
           options: (mForm, { model }) => {
-            const node = services?.editorService.getNodeById(model.to);
+            const node = editorService?.getNodeById(model.to);
             if (!node?.type)
               return [];
-            return services?.eventsService.getMethod(node.type).map((option) => ({
+            return eventsService?.getMethod(node.type).map((option) => ({
               text: option.label,
               value: option.value
             }));
@@ -3979,7 +4429,7 @@
           type: "code-select-col",
           labelWidth: 0,
           name: "codeId",
-          disabled: () => !services?.codeBlockService.getEditStatus(),
+          disabled: () => !codeBlockService?.getEditStatus(),
           display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
         };
         return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -4001,7 +4451,7 @@
             name: "name",
             label: "事件名",
             type: eventNameConfig.value.type,
-            options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
+            options: (mForm, { formValue }) => eventsService?.getEvent(formValue.type).map((option) => ({
               text: option.label,
               value: option.value
             }))
@@ -4016,10 +4466,10 @@
             label: "动作",
             type: compActionConfig.value.type,
             options: (mForm, { model }) => {
-              const node = services?.editorService.getNodeById(model.to);
+              const node = editorService?.getNodeById(model.to);
               if (!node?.type)
                 return [];
-              return services?.eventsService.getMethod(node.type).map((option) => ({
+              return eventsService?.getMethod(node.type).map((option) => ({
                 text: option.label,
                 value: option.value
               }));
@@ -4073,7 +4523,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$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4083,7 +4533,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -4132,9 +4582,9 @@
     }
   });
 
-  const _hoisted_1$n = { class: "m-fields-key-value" };
-  const _hoisted_2$g = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$m = { class: "m-fields-key-value" };
+  const _hoisted_2$h = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -4179,7 +4629,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           (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",
@@ -4193,7 +4643,7 @@
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_2$g,
+              _hoisted_2$h,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -4232,12 +4682,12 @@
     }
   });
 
-  const _hoisted_1$m = {
+  const _hoisted_1$l = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -4326,7 +4776,7 @@
             ]),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "清除",
@@ -4423,7 +4873,7 @@
     };
   };
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -4444,7 +4894,7 @@
     }
   });
 
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -4556,7 +5006,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -4565,7 +5015,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$A, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -4578,10 +5028,10 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-editor-empty-panel" };
-  const _hoisted_2$f = { class: "m-editor-empty-content" };
-  const _hoisted_3$8 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$k = { class: "m-editor-empty-panel" };
+  const _hoisted_2$g = { class: "m-editor-empty-content" };
+  const _hoisted_3$9 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -4601,16 +5051,16 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+          vue.createElementVNode("div", _hoisted_2$g, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$8
+              _hoisted_3$9
             ])
           ])
         ]);
@@ -4622,7 +5072,7 @@
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
   const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -4699,13 +5149,13 @@
           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$Q, {
+            vue.createVNode(_sfc_main$S, {
               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$y, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$z, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -4724,7 +5174,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$x)
+                vue.createVNode(_sfc_main$y)
               ])
             ]),
             _: 2
@@ -4749,12 +5199,12 @@
     }
   });
 
-  const _hoisted_1$k = {
+  const _hoisted_1$j = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$e = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$f = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -4833,7 +5283,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$k, 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$j, 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",
@@ -4847,7 +5297,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4861,17 +5311,18 @@
               key: 1,
               size: "small",
               text: "",
-              disabled: disabled.value
+              disabled: disabled.value,
+              title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
                 vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
               ]),
               _: 1
-            }, 8, ["disabled"]))
+            }, 8, ["disabled", "title"]))
           ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
             key: 3,
             trigger: "click",
@@ -4897,7 +5348,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$e, [
+              vue.createElementVNode("span", _hoisted_2$f, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -4914,7 +5365,7 @@
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -5076,7 +5527,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$v, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -5088,8 +5539,8 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-editor-props-panel" };
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = { class: "m-editor-props-panel" };
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -5142,7 +5593,7 @@
       };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -5162,7 +5613,7 @@
     }
   });
 
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -5170,8 +5621,12 @@
     emits: ["search"],
     setup(__props, { emit }) {
       const filterText = vue.ref("");
+      let timer = null;
       const filterTextChangeHandler = () => {
-        emit("search", filterText.value);
+        timer && clearTimeout(timer);
+        timer = setTimeout(() => {
+          emit("search", filterText.value);
+        }, 300);
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicInput), {
@@ -5197,8 +5652,8 @@
     }
   });
 
-  const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$d = /* @__PURE__ */ vue.createElementVNode("g", {
+  const _hoisted_1$h = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$e = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
@@ -5208,50 +5663,50 @@
     }),
     /* @__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$7 = [
-    _hoisted_2$d
+  const _hoisted_3$8 = [
+    _hoisted_2$e
   ];
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAppManageIcon"
     },
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, _hoisted_3$7);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$h, _hoisted_3$8);
       };
     }
   });
 
-  const _hoisted_1$h = {
+  const _hoisted_1$g = {
     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$c = /* @__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$5 = [
-    _hoisted_2$c
+  const _hoisted_2$d = /* @__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$6 = [
+    _hoisted_2$d
   ];
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$h, _hoisted_4$5);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$g, _hoisted_4$6);
       };
     }
   });
 
-  const _hoisted_1$g = ["id"];
-  const _hoisted_2$b = { class: "list-item" };
-  const _hoisted_3$6 = {
+  const _hoisted_1$f = ["id"];
+  const _hoisted_2$c = { class: "list-item" };
+  const _hoisted_3$7 = {
     key: 2,
     class: "right-tool"
   };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -5352,26 +5807,26 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$b, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
+              vue.createElementVNode("div", _hoisted_2$c, [
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
                   key: 0,
                   class: "codeIcon"
                 })) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                   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$6, [
+                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$7, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$K, {
+                      vue.createVNode(_sfc_main$M, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editCode(data.id), ["stop"])
@@ -5386,7 +5841,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$K, {
+                      vue.createVNode(_sfc_main$M, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5400,7 +5855,7 @@
                   })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$g)
+            ], 8, _hoisted_1$f)
           ]),
           _: 3
         }, 8, ["default-expanded-keys", "data"]);
@@ -5408,8 +5863,8 @@
     }
   });
 
-  const _hoisted_1$f = { class: "search-wrapper" };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$e = { class: "search-wrapper" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -5429,8 +5884,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$f, [
-                vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$e, [
+                vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -5446,7 +5901,7 @@
                 vue.renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            vue.createVNode(_sfc_main$p, {
+            vue.createVNode(_sfc_main$q, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -5461,7 +5916,7 @@
               ]),
               _: 3
             }, 8, ["custom-error", "onEdit", "onRemove"]),
-            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 0,
               ref_key: "codeBlockEditor",
               ref: codeBlockEditor,
@@ -5476,7 +5931,7 @@
     }
   });
 
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -5530,13 +5985,13 @@
     }
   });
 
-  const _hoisted_1$e = ["id"];
-  const _hoisted_2$a = { class: "list-item" };
-  const _hoisted_3$5 = {
+  const _hoisted_1$d = ["id"];
+  const _hoisted_2$b = { class: "list-item" };
+  const _hoisted_3$6 = {
     key: 2,
     class: "right-tool"
   };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -5631,13 +6086,13 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$a, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+              vue.createElementVNode("div", _hoisted_2$b, [
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
                   key: 0,
                   class: "codeIcon",
                   icon: vue.unref(iconsVue.Coin)
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
                   key: 1,
                   class: "compIcon",
                   icon: vue.unref(iconsVue.Aim)
@@ -5645,14 +6100,14 @@
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
                 }, vue.toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
+                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$K, {
+                      vue.createVNode(_sfc_main$M, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -5667,7 +6122,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$K, {
+                      vue.createVNode(_sfc_main$M, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -5681,7 +6136,7 @@
                   })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$e)
+            ], 8, _hoisted_1$d)
           ]),
           _: 3
         }, 8, ["data"]);
@@ -5689,9 +6144,9 @@
     }
   });
 
-  const _hoisted_1$d = { class: "search-wrapper" };
-  const _hoisted_2$9 = { class: "data-source-list-panel-add-menu" };
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$c = { class: "search-wrapper" };
+  const _hoisted_2$a = { class: "data-source-list-panel-add-menu" };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -5751,8 +6206,8 @@
       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$d, [
-              vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
+            vue.createElementVNode("div", _hoisted_1$c, [
+              vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
               editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -5769,9 +6224,9 @@
                   })
                 ]),
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_2$9, [
+                  vue.createElementVNode("div", _hoisted_2$a, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -5787,11 +6242,11 @@
                 _: 1
               })) : vue.createCommentVNode("", true)
             ]),
-            vue.createVNode(_sfc_main$m, {
+            vue.createVNode(_sfc_main$n, {
               onEdit: editHandler,
               onRemove: removeHandler
             }),
-            vue.createVNode(_sfc_main$n, {
+            vue.createVNode(_sfc_main$o, {
               ref_key: "editDialog",
               ref: editDialog,
               disabled: !editable.value,
@@ -5806,136 +6261,7 @@
     }
   });
 
-  const _hoisted_1$c = ["onClick", "onDragstart"];
-  const _hoisted_2$8 = ["title"];
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorComponentListPanel"
-    },
-    __name: "ComponentListPanel",
-    setup(__props) {
-      const searchText = vue.ref("");
-      const filterTextChangeHandler = (v) => {
-        searchText.value = v;
-      };
-      const services = vue.inject("services");
-      const stageOptions = vue.inject("stageOptions");
-      const stage = vue.computed(() => services?.editorService.get("stage"));
-      const list = vue.computed(
-        () => services?.componentListService.getList().map((group) => ({
-          ...group,
-          items: group.items.filter((item) => item.text.includes(searchText.value))
-        }))
-      );
-      const collapseValue = vue.computed(
-        () => Array(list.value?.length).fill(1).map((x, i) => `${i}`)
-      );
-      let timeout;
-      let clientX;
-      let clientY;
-      const appendComponent = ({ text, type, data = {} }) => {
-        services?.editorService.add({
-          name: text,
-          type,
-          ...data
-        });
-      };
-      const dragstartHandler = ({ text, type, data = {} }, e) => {
-        if (e.dataTransfer) {
-          e.dataTransfer.setData(
-            "text/json",
-            serialize({
-              name: text,
-              type,
-              ...data
-            })
-          );
-        }
-      };
-      const dragendHandler = () => {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-          timeout = void 0;
-        }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      };
-      const dragHandler = (e) => {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = void 0;
-          }
-          return;
-        }
-        if (timeout || !stage.value)
-          return;
-        timeout = stage.value.delayedMarkContainer(e);
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), null, {
-          default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
-            vue.createVNode(vue.unref(design.TMagicCollapse), {
-              class: "ui-component-panel",
-              "model-value": collapseValue.value
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$s, { 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), {
-                      key: index,
-                      name: `${index}`
-                    }, {
-                      title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
-                        vue.createTextVNode(vue.toDisplayString(group.title), 1)
-                      ]),
-                      default: vue.withCtx(() => [
-                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
-                          return vue.openBlock(), vue.createElementBlock("div", {
-                            class: "component-item",
-                            draggable: "true",
-                            key: item.type,
-                            onClick: ($event) => appendComponent(item),
-                            onDragstart: ($event) => dragstartHandler(item, $event),
-                            onDragend: dragendHandler,
-                            onDrag: dragHandler
-                          }, [
-                            vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$K, {
-                                title: item.text,
-                                icon: item.icon
-                              }, null, 8, ["title", "icon"]),
-                              vue.createElementVNode("span", {
-                                title: item.text
-                              }, vue.toDisplayString(item.text), 9, _hoisted_2$8)
-                            ])
-                          ], 40, _hoisted_1$c);
-                        }), 128))
-                      ]),
-                      _: 2
-                    }, 1032, ["name"])) : vue.createCommentVNode("", true)
-                  ], 64);
-                }), 256))
-              ]),
-              _: 3
-            }, 8, ["model-value"])
-          ]),
-          _: 3
-        });
-      };
-    }
-  });
-
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -6012,11 +6338,14 @@
       };
       const showSubMenu = (item, index) => {
         const menuItem = item;
-        if (typeof item !== "object" || !menuItem.items?.length) {
+        if (typeof item !== "object") {
           return;
         }
         subMenuData.value = menuItem.items || [];
         setTimeout(() => {
+          if (!visible.value) {
+            return;
+          }
           if (menu.value) {
             let y = menu.value.offsetTop;
             if (buttons.value?.[index].$el) {
@@ -6065,7 +6394,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               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$v, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -6108,26 +6437,26 @@
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$7 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_2$9 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
   }, null, -1);
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
   }, null, -1);
-  const _hoisted_4$4 = [
-    _hoisted_2$7,
-    _hoisted_3$4
+  const _hoisted_4$5 = [
+    _hoisted_2$9,
+    _hoisted_3$5
   ];
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$4);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$5);
       };
     }
   });
@@ -6207,7 +6536,7 @@
     };
   };
 
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -6270,7 +6599,7 @@
         {
           type: "button",
           text: "全部折叠",
-          icon: _sfc_main$i,
+          icon: _sfc_main$k,
           display: () => utils.isPage(node.value),
           handler: () => {
             emit("collapse-all");
@@ -6296,7 +6625,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$j, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -6306,9 +6635,8 @@
     }
   });
 
-  const _hoisted_1$a = { class: "layer-node-tool" };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    __name: "LayerNode",
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+    __name: "LayerNodeTool",
     props: {
       data: {}
     },
@@ -6325,342 +6653,673 @@
         });
       };
       return (_ctx, _cache) => {
-        const _component_el_icon = vue.resolveComponent("el-icon");
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createElementVNode("div", null, vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
-          vue.createElementVNode("div", _hoisted_1$a, [
-            _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-                key: 0,
-                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
-                title: "点击显示"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(iconsVue.Hide))
-                ]),
-                _: 1
-              })) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
-                key: 1,
-                onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
-                class: "node-lock",
-                title: "点击隐藏"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(iconsVue.View))
-                ]),
-                _: 1
-              }))
-            ], 64)) : vue.createCommentVNode("", true)
-          ])
-        ], 64);
+        return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+            key: 0,
+            icon: vue.unref(iconsVue.Hide),
+            onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
+            title: "点击显示"
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+            key: 1,
+            icon: vue.unref(iconsVue.View),
+            onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
+            class: "node-lock",
+            title: "点击隐藏"
+          }, null, 8, ["icon"]))
+        ], 64)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _hoisted_1$9 = ["id", "onMouseenter"];
-  const throttleTime = 150;
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const dragState = {
+    dragOverNodeId: "",
+    dropType: "",
+    container: null
+  };
+  const getNodeEl = (el) => {
+    if (el.dataset.nodeId) {
+      return el;
+    }
+    if (el.parentElement) {
+      return getNodeEl(el.parentElement);
+    }
+  };
+  const removeStatusClass = (el) => {
+    if (!el)
+      return;
+    ["drag-before", "drag-after", "drag-inner"].forEach((className) => {
+      el.querySelectorAll(`.${className}`).forEach((el2) => {
+        utils.removeClassName(el2, className);
+      });
+    });
+  };
+  const useDrag = (services) => {
+    const handleDragStart = (event) => {
+      if (!event.dataTransfer || !event.target || !event.currentTarget)
+        return;
+      const targetEl = getNodeEl(event.target);
+      if (!targetEl || targetEl !== event.currentTarget)
+        return;
+      event.dataTransfer.effectAllowed = "move";
+      try {
+        event.dataTransfer.setData(
+          "text/json",
+          JSON.stringify({
+            dragType: DragType.LAYER_TREE
+          })
+        );
+      } catch {
+      }
+    };
+    const handleDragOver = (event) => {
+      if (!event.target)
+        return;
+      const targetEl = getNodeEl(event.target);
+      if (!targetEl)
+        return;
+      const labelEl = targetEl.children[0];
+      if (!labelEl)
+        return;
+      const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
+      const distance = event.clientY - targetTop;
+      const isContainer = targetEl.dataset.isContainer === "true";
+      if (distance < targetHeight / 3) {
+        dragState.dropType = "before";
+        utils.addClassName(labelEl, globalThis.document, "drag-before");
+        utils.removeClassName(labelEl, "drag-after", "drag-inner");
+      } else if (distance > targetHeight * 2 / 3) {
+        dragState.dropType = "after";
+        utils.addClassName(labelEl, globalThis.document, "drag-after");
+        utils.removeClassName(labelEl, "drag-before", "drag-inner");
+      } else if (isContainer) {
+        dragState.dropType = "inner";
+        utils.addClassName(labelEl, globalThis.document, "drag-inner");
+        utils.removeClassName(labelEl, "drag-before", "drag-after");
+      }
+      if (!dragState.dropType) {
+        return;
+      }
+      dragState.dragOverNodeId = targetEl.dataset.nodeId || "";
+      dragState.container = event.currentTarget;
+      event.preventDefault();
+    };
+    const handleDragLeave = (event) => {
+      if (!event.target || !event.currentTarget)
+        return;
+      const targetEl = getNodeEl(event.target);
+      if (!targetEl || targetEl !== event.currentTarget)
+        return;
+      const labelEl = targetEl.children[0];
+      utils.removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
+    };
+    const handleDragEnd = (event, node) => {
+      if (!event.target || !event.currentTarget)
+        return;
+      const targetEl = getNodeEl(event.target);
+      if (!targetEl || targetEl !== event.currentTarget)
+        return;
+      removeStatusClass(dragState.container);
+      if (node && dragState.dragOverNodeId && dragState.dropType && services) {
+        const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
+        const targetNode = targetInfo.node;
+        let targetParent = targetInfo.parent;
+        if (!targetParent || !targetNode)
+          return;
+        let targetIndex = -1;
+        if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
+          targetIndex = targetNode.items.length;
+          targetParent = targetNode;
+        } else {
+          targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
+        }
+        if (dragState.dropType === "after") {
+          targetIndex += 1;
+        }
+        services?.editorService.dragTo(node, targetParent, targetIndex);
+      }
+      dragState.dragOverNodeId = "";
+      dragState.dropType = "";
+      dragState.container = null;
+    };
+    return {
+      handleDragStart,
+      handleDragEnd,
+      handleDragLeave,
+      handleDragOver
+    };
+  };
+
+  const updateStatus = (nodeStatusMap, id, status) => {
+    const nodeStatus = nodeStatusMap.get(id);
+    if (!nodeStatus)
+      return;
+    utils.getKeys(status).forEach((key) => {
+      if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
+        nodeStatus[key] = Boolean(status[key]);
+      }
+    });
+  };
+  const useFilter = (nodeStatusMap, page) => {
+    const filterIsMatch = (value, data) => {
+      if (!value) {
+        return true;
+      }
+      let name = "";
+      if (data.name) {
+        name = data.name;
+      } else if (data.items) {
+        name = "container";
+      }
+      return `${data.id}${name}${data.type}`.includes(value);
+    };
+    const filterNode = (text) => (node, parents) => {
+      if (!nodeStatusMap.value)
+        return;
+      const visible = filterIsMatch(text, node);
+      if (visible && parents.length) {
+        parents.forEach((parent) => {
+          updateStatus(nodeStatusMap.value, parent.id, {
+            visible,
+            expand: true
+          });
+        });
+      }
+      updateStatus(nodeStatusMap.value, node.id, {
+        visible
+      });
+    };
+    const filter = (text) => {
+      if (!page.value?.items?.length)
+        return;
+      page.value.items.forEach((node) => {
+        traverseNode(node, filterNode(text));
+      });
+    };
+    return {
+      filterText: vue.ref(""),
+      filterTextChangeHandler(text) {
+        filter(text);
+      }
+    };
+  };
+
+  const _hoisted_1$a = ["draggable", "data-node-id", "data-is-container"];
+  const _hoisted_2$8 = { class: "layer-node-label" };
+  const _hoisted_3$4 = { class: "layer-node-tool" };
+  const _hoisted_4$4 = {
+    key: 0,
+    class: "magic-editor-layer-node-children"
+  };
+  const throttleTime = 300;
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorLayerPanel"
+      name: "MEditorLayerNode"
     },
-    __name: "LayerPanel",
+    __name: "LayerNode",
     props: {
-      layerContentMenu: {}
+      data: {},
+      parent: {},
+      indent: { default: 0 },
+      filterText: { default: "" },
+      isCtrlKeyDown: { type: Boolean, default: false }
     },
-    setup(__props) {
+    emits: ["node-contextmenu"],
+    setup(__props, { emit }) {
+      const props = __props;
       const services = vue.inject("services");
+      const nodeStatusMap = vue.inject("nodeStatusMap");
       const editorService = services?.editorService;
-      const keybindingService = services?.keybindingService;
-      const tree = vue.ref();
-      const menu = vue.ref();
-      const checkedKeys = vue.ref([]);
-      const isCtrlKeyDown = vue.ref(false);
-      const expandedKeys = vue.ref([]);
-      const currentNodeKey = vue.ref();
-      const clicked = vue.ref(false);
-      const treeProps = {
-        children: "items",
-        label: "name",
-        value: "id",
-        disabled: (data) => Boolean(data.items?.length),
-        class: (data) => {
-          if (clicked.value || utils.isPage(data))
-            return "";
-          if (data.id === highlightNode?.value?.id && !checkedKeys.value.includes(data.id)) {
-            return "cus-tree-node-hover";
-          }
+      const uiService = services?.uiService;
+      const nodeStatus = vue.computed(
+        () => nodeStatusMap?.value?.get(props.data.id) || {
+          selected: false,
+          expand: false,
+          visible: false
         }
+      );
+      const expanded = vue.computed(() => nodeStatus.value.expand);
+      const selected = vue.computed(() => nodeStatus.value.selected);
+      const visible = vue.computed(() => nodeStatus.value.visible);
+      const hasChilren = vue.computed(() => props.data.items?.length > 0);
+      const nodeEl = vue.ref();
+      const { handleDragStart, handleDragEnd, handleDragLeave } = useDrag(services);
+      const expandHandler = () => {
+        if (!nodeStatusMap?.value)
+          return;
+        updateStatus(nodeStatusMap.value, props.data.id, {
+          expand: !expanded.value
+        });
+      };
+      const nodeClickHandler = () => {
+        if (!nodeStatusMap?.value)
+          return;
+        if (uiService?.get("uiSelectMode")) {
+          document.dispatchEvent(new CustomEvent("ui-select", { detail: props.data }));
+          return;
+        }
+        if (hasChilren.value && !props.isCtrlKeyDown) {
+          updateStatus(nodeStatusMap.value, props.data.id, {
+            expand: true
+          });
+        }
+        vue.nextTick(() => {
+          select(props.data);
+        });
+      };
+      const contextmenuHandler = (event) => {
+        event.preventDefault();
+        nodeClickHandler();
+        emit("node-contextmenu", event, props.data);
+      };
+      const nodeContentmenuHandler = (event, node) => {
+        emit("node-contextmenu", event, node);
       };
-      const isMultiSelect = vue.computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
-      const page = vue.computed(() => editorService?.get("page"));
-      const values = vue.computed(() => page.value ? [page.value] : []);
-      const highlightNode = vue.computed(() => editorService?.get("highlightNode"));
       const select = async (data) => {
         if (!data.id) {
           throw new Error("没有id");
         }
-        await editorService?.select(data);
-        editorService?.get("stage")?.select(data.id);
+        if (props.isCtrlKeyDown) {
+          multiSelect(data);
+        } else {
+          await editorService?.select(data);
+          editorService?.get("stage")?.select(data.id);
+        }
       };
       const multiSelect = async (data) => {
-        await editorService?.multiSelect(data);
-        editorService?.get("stage")?.multiSelect(data);
-      };
-      const highlight = (data) => {
-        if (!data?.id) {
-          throw new Error("没有id");
+        const nodes = editorService?.get("nodes") || [];
+        const newNodes = [];
+        let isCancel = false;
+        nodes.forEach((node) => {
+          if (node.id === data.id) {
+            isCancel = true;
+            return;
+          }
+          newNodes.push(node.id);
+        });
+        if (!isCancel || newNodes.length === 0) {
+          newNodes.push(data.id);
         }
-        editorService?.highlight(data);
-        editorService?.get("stage")?.highlight(data.id);
+        await editorService?.multiSelect(newNodes);
+        editorService?.get("stage")?.multiSelect(newNodes);
       };
-      const allowDrop = (draggingNode, dropNode, type) => {
-        const { data } = dropNode || {};
-        const { data: ingData } = draggingNode;
-        const { type: ingType } = ingData;
-        if (ingType !== schema.NodeType.PAGE && data.type === schema.NodeType.PAGE)
-          return false;
-        if (ingType === schema.NodeType.PAGE && data.type !== schema.NodeType.PAGE)
-          return false;
-        if (!data?.type)
-          return false;
-        if (["prev", "next"].includes(type))
-          return true;
-        if (data.items || data.type === "container")
-          return true;
-        return false;
+      const highlightHandler = lodashEs.throttle(() => {
+        highlight();
+      }, throttleTime);
+      const highlight = () => {
+        editorService?.highlight(props.data);
+        editorService?.get("stage")?.highlight(props.data.id);
       };
-      const handleDragEnd = async (e) => {
-        if (!tree.value)
-          return;
-        const { data: node } = e;
-        const parent = editorService?.getParentById(node.id, false);
-        const layout = await editorService?.getLayout(parent, node);
-        node.style.position = layout;
-        if (layout === Layout.RELATIVE) {
-          node.style.top = 0;
-          node.style.left = 0;
-        }
-        const data = tree.value.getData();
-        const [page2] = data;
-        editorService?.update(page2);
-      };
-      const handleCollapse = (data) => {
-        expandedKeys.value = expandedKeys.value.filter((id) => id !== data.id);
-      };
-      const handleExpand = (data) => {
-        if (!page.value) {
-          expandedKeys.value = [];
-          return;
-        }
-        expandedKeys.value = lodashEs.union(
-          expandedKeys.value,
-          utils.getNodePath(data.id, [page.value]).map((node) => node.id)
-        );
+      return (_ctx, _cache) => {
+        const _component_LayerNode = vue.resolveComponent("LayerNode", true);
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          class: "magic-editor-layer-node",
+          ref_key: "nodeEl",
+          ref: nodeEl,
+          draggable: !vue.unref(utils.isPage)(_ctx.data),
+          "data-node-id": _ctx.data.id,
+          "data-is-container": Array.isArray(_ctx.data.items),
+          onDragstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => vue.unref(handleDragStart) && vue.unref(handleDragStart)(...args)),
+          onDragleave: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => vue.unref(handleDragLeave) && vue.unref(handleDragLeave)(...args)),
+          onDragend: _cache[3] || (_cache[3] = ($event) => vue.unref(handleDragEnd)($event, _ctx.data))
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["layer-node", { selected: selected.value, expanded: expanded.value }]),
+            style: vue.normalizeStyle(`padding-left: ${_ctx.indent}px`),
+            onContextmenu: contextmenuHandler,
+            onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(highlightHandler)())
+          }, [
+            vue.createVNode(_sfc_main$M, {
+              class: "expand-icon",
+              style: vue.normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
+              icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
+              onClick: expandHandler
+            }, null, 8, ["style", "icon"]),
+            vue.createElementVNode("div", {
+              class: "layer-node-content",
+              onClick: nodeClickHandler
+            }, [
+              vue.renderSlot(_ctx.$slots, "layer-node-content", { data: _ctx.data }, () => [
+                vue.createElementVNode("div", _hoisted_2$8, vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+                vue.createElementVNode("div", _hoisted_3$4, [
+                  vue.createVNode(_sfc_main$i, { data: _ctx.data }, null, 8, ["data"])
+                ])
+              ])
+            ])
+          ], 38),
+          hasChilren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item) => {
+              return vue.openBlock(), vue.createBlock(_component_LayerNode, {
+                data: item,
+                parent: _ctx.data,
+                key: item.id,
+                indent: _ctx.indent + 11,
+                "filter-text": _ctx.filterText,
+                "is-ctrl-key-down": _ctx.isCtrlKeyDown,
+                onNodeContextmenu: nodeContentmenuHandler
+              }, {
+                "layer-node-content": vue.withCtx(({ data: nodeData }) => [
+                  vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+                ]),
+                _: 2
+              }, 1032, ["data", "parent", "indent", "filter-text", "is-ctrl-key-down"]);
+            }), 128))
+          ])) : vue.createCommentVNode("", true)
+        ], 40, _hoisted_1$a)), [
+          [vue.vShow, visible.value]
+        ]);
       };
-      const filterNode = (value, data) => {
-        if (!value) {
-          return true;
+    }
+  });
+
+  const useKeybinding = (services) => {
+    const keybindingService = services?.keybindingService;
+    const isCtrlKeyDown = vue.ref(false);
+    const windowBlurHandler = () => {
+      isCtrlKeyDown.value = false;
+    };
+    keybindingService?.registeCommand("layer-panel-global-keyup", () => {
+      isCtrlKeyDown.value = false;
+    });
+    keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
+      isCtrlKeyDown.value = true;
+    });
+    keybindingService?.registe([
+      {
+        command: "layer-panel-global-keydwon",
+        keybinding: "ctrl",
+        when: [["global", "keydown"]]
+      },
+      {
+        command: "layer-panel-global-keyup",
+        keybinding: "ctrl",
+        when: [["global", "keyup"]]
+      }
+    ]);
+    vue.onMounted(() => {
+      globalThis.addEventListener("blur", windowBlurHandler);
+    });
+    vue.onBeforeUnmount(() => {
+      globalThis.removeEventListener("blur", windowBlurHandler);
+    });
+    return {
+      isCtrlKeyDown
+    };
+  };
+
+  const createPageNodeStatus = (services, pageId) => {
+    const map = /* @__PURE__ */ new Map();
+    map.set(pageId, {
+      visible: true,
+      expand: true,
+      selected: true
+    });
+    services?.editorService.getNodeById(pageId)?.items.forEach(
+      (node) => traverseNode(node, (node2) => {
+        map.set(node2.id, {
+          visible: true,
+          expand: false,
+          selected: false
+        });
+      })
+    );
+    return map;
+  };
+  const useNodeStatus = (services, page) => {
+    const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
+    const nodeStatusMaps = vue.ref(/* @__PURE__ */ new Map());
+    const nodeStatusMap = vue.computed(
+      () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
+    );
+    vue.watch(
+      () => page.value?.id,
+      (pageId) => {
+        if (!pageId || nodeStatusMaps.value.has(pageId)) {
+          return;
         }
-        let name = "";
-        if (data.name) {
-          name = data.name;
-        } else if (data.items) {
-          name = "container";
+        nodeStatusMaps.value.set(pageId, createPageNodeStatus(services, pageId));
+      },
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      nodes,
+      (nodes2) => {
+        if (!nodeStatusMap.value)
+          return;
+        for (const [id, status] of nodeStatusMap.value.entries()) {
+          status.selected = nodes2.some((node) => node.id === id);
+          if (status.selected) {
+            utils.getNodePath(id, page.value?.items).forEach((node) => {
+              updateStatus(nodeStatusMap.value, node.id, {
+                expand: true
+              });
+            });
+          }
         }
-        return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
-      };
-      const filterTextChangeHandler = (val) => {
-        tree.value?.filter(val);
-      };
-      vue.watch(nodes, (nodes2) => {
-        const ids = nodes2?.map((node) => node.id) || [];
-        const idsLength = ids.length;
-        const checkedKeysLength = checkedKeys.value.length;
-        if (lodashEs.difference(
-          idsLength > checkedKeysLength ? ids : checkedKeys.value,
-          idsLength > checkedKeysLength ? checkedKeys.value : ids
-        ).length) {
-          tree.value?.setCheckedKeys([], false);
-          checkedKeys.value = ids.filter((id) => id !== page.value?.id);
-          expandedKeys.value = lodashEs.union(expandedKeys.value, ids);
-        }
-        [currentNodeKey.value] = ids;
-        setTimeout(() => {
-          tree.value?.setCurrentKey(currentNodeKey.value);
+      },
+      {
+        immediate: true
+      }
+    );
+    services?.editorService.on("add", (newNodes) => {
+      newNodes.forEach((node) => {
+        nodeStatusMap.value?.set(node.id, {
+          visible: true,
+          expand: Array.isArray(node.items),
+          selected: true
         });
       });
-      vue.watch(isMultiSelect, (isMultiSelect2) => {
-        if (!isMultiSelect2) {
-          currentNodeKey.value = editorService?.get("node")?.id;
-          tree.value?.setCurrentKey(currentNodeKey.value);
-        }
+    });
+    services?.editorService.on("remove", (nodes2) => {
+      nodes2.forEach((node) => {
+        nodeStatusMap.value?.delete(node.id);
       });
-      const editorServiceRemoveHandler = () => {
-        setTimeout(() => {
-          tree.value?.getNode(editorService?.get("node")?.id)?.updateChildren();
-        }, 0);
+    });
+    return {
+      nodeStatusMaps,
+      nodeStatusMap
+    };
+  };
+
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorLayerPanel"
+    },
+    __name: "LayerPanel",
+    props: {
+      layerContentMenu: {}
+    },
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const page = vue.computed(() => editorService?.get("page"));
+      const root = vue.computed(() => editorService?.get("root"));
+      const { nodeStatusMap } = useNodeStatus(services, page);
+      const { isCtrlKeyDown } = useKeybinding(services);
+      vue.provide("nodeStatusMap", nodeStatusMap);
+      const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
+      const collapseAllHandler = () => {
+        if (!page.value || !nodeStatusMap.value)
+          return;
+        const items = nodeStatusMap.value.entries();
+        for (const [id, status] of items) {
+          if (id === page.value.id) {
+            continue;
+          }
+          status.expand = false;
+        }
+      };
+      const menu = vue.ref();
+      const contextmenu = (event) => {
+        event.preventDefault();
+        menu.value?.show(event);
       };
-      const windowBlurHandler = () => {
-        isCtrlKeyDown.value = false;
+      const { handleDragOver } = useDrag(services);
+      return (_ctx, _cache) => {
+        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$t, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            vue.createElementVNode("div", {
+              class: "magic-editor-layer-tree",
+              tabindex: "-1",
+              onDragover: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => vue.unref(handleDragOver) && vue.unref(handleDragOver)(...args))
+            }, [
+              page.value && root.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+                key: 0,
+                data: page.value,
+                "filter-text": vue.unref(filterText),
+                "is-ctrl-key-down": vue.unref(isCtrlKeyDown),
+                onNodeContextmenu: contextmenu
+              }, {
+                "layer-node-content": vue.withCtx(({ data: nodeData }) => [
+                  vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+                ]),
+                _: 3
+              }, 8, ["data", "filter-text", "is-ctrl-key-down"])) : vue.createCommentVNode("", true)
+            ], 32),
+            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+              vue.createVNode(_sfc_main$j, {
+                ref_key: "menu",
+                ref: menu,
+                "layer-content-menu": _ctx.layerContentMenu,
+                onCollapseAll: collapseAllHandler
+              }, null, 8, ["layer-content-menu"])
+            ]))
+          ]),
+          _: 3
+        });
+      };
+    }
+  });
+
+  const _hoisted_1$9 = ["onClick", "onDragstart"];
+  const _hoisted_2$7 = ["title"];
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorComponentListPanel"
+    },
+    __name: "ComponentListPanel",
+    setup(__props) {
+      const searchText = vue.ref("");
+      const filterTextChangeHandler = (v) => {
+        searchText.value = v;
+      };
+      const services = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
+      const stage = vue.computed(() => services?.editorService.get("stage"));
+      const list = vue.computed(
+        () => services?.componentListService.getList().map((group) => ({
+          ...group,
+          items: group.items.filter((item) => item.text.includes(searchText.value))
+        }))
+      );
+      const collapseValue = vue.computed(
+        () => Array(list.value?.length).fill(1).map((x, i) => `${i}`)
+      );
+      let timeout;
+      let clientX;
+      let clientY;
+      const appendComponent = ({ text, type, data = {} }) => {
+        services?.editorService.add({
+          name: text,
+          type,
+          ...data
+        });
       };
-      keybindingService?.registeCommand("layer-panel-not-ctrl-keydown", (e) => {
-        if (e.key !== keybindingService.ctrlKey) {
-          isCtrlKeyDown.value = false;
-        }
-      });
-      keybindingService?.registeCommand("layer-panel-ctrl-keydown", () => {
-        isCtrlKeyDown.value = true;
-      });
-      keybindingService?.registeCommand("layer-panel-ctrl-keyup", () => {
-        isCtrlKeyDown.value = false;
-      });
-      keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
-        if (!tree.value?.$el.contains(document.activeElement)) {
-          isCtrlKeyDown.value = false;
-        }
-      });
-      keybindingService?.registe([
-        {
-          command: "layer-panel-not-ctrl-keydown",
-          when: [["layer-panel", "keydown"]]
-        },
-        {
-          command: "layer-panel-ctrl-keydown",
-          keybinding: "ctrl",
-          when: [["layer-panel", "keydown"]]
-        },
-        {
-          command: "layer-panel-ctrl-keyup",
-          keybinding: "ctrl",
-          when: [["layer-panel", "keyup"]]
-        },
-        {
-          command: "layer-panel-global-keydwon",
-          keybinding: "ctrl",
-          when: [["global", "keydown"]]
-        }
-      ]);
-      vue.watch(tree, () => {
-        if (tree.value?.$el) {
-          keybindingService?.registeEl("layer-panel", tree.value.$el);
-          tree.value.$el.addEventListener("blur", windowBlurHandler);
-        } else {
-          keybindingService?.unregisteEl("layer-panel");
-        }
-      });
-      vue.onMounted(() => {
-        editorService?.on("remove", editorServiceRemoveHandler);
-        globalThis.addEventListener("blur", windowBlurHandler);
-      });
-      vue.onBeforeUnmount(() => {
-        tree.value?.$el.removeEventListener("blur", windowBlurHandler);
-      });
-      vue.onUnmounted(() => {
-        editorService?.off("remove", editorServiceRemoveHandler);
-        globalThis.removeEventListener("blur", windowBlurHandler);
-      });
-      const highlightHandler = lodashEs.throttle((data) => {
-        highlight(data);
-      }, throttleTime);
-      const toggleClickFlag = () => {
-        clicked.value = !clicked.value;
+      const dragstartHandler = ({ text, type, data = {} }, e) => {
+        e.dataTransfer?.setData(
+          "text/json",
+          serialize({
+            dragType: DragType.COMPONENT_LIST,
+            data: {
+              name: text,
+              type,
+              ...data
+            }
+          })
+        );
       };
-      const checkHandler = (data, { checkedNodes }) => {
-        if (!isCtrlKeyDown.value && nodes.value.length < 2) {
-          return;
+      const dragendHandler = () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
         }
-        if (checkedNodes.length > 0) {
-          multiSelect(checkedNodes.map((node) => node.id));
-        } else {
-          multiSelect(nodes.value.map((node) => node.id));
+        const doc = stage.value?.renderer.contentWindow?.document;
+        if (doc && stageOptions) {
+          utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
         }
+        clientX = 0;
+        clientY = 0;
       };
-      const clickHandler = (data) => {
-        if (isCtrlKeyDown.value) {
-          return;
-        }
-        if (services?.uiService.get("uiSelectMode")) {
-          document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
+      const dragHandler = (e) => {
+        if (e.clientX !== clientX || e.clientY !== clientY) {
+          clientX = e.clientX;
+          clientY = e.clientY;
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = void 0;
+          }
           return;
         }
-        select(data);
-      };
-      const contextmenu = async (event, data) => {
-        event.preventDefault();
-        if (nodes.value.length < 2) {
-          await select(data);
-        }
-        menu.value?.show(event);
-      };
-      const collapseAllHandler = () => {
-        const page2 = editorService?.get("page");
-        if (!tree.value || !page2)
+        if (timeout || !stage.value)
           return;
-        const rootNode = tree.value.getNode(page2.id);
-        rootNode.childNodes.forEach((node) => {
-          node.collapse();
-          handleCollapse(node.data);
-        });
+        timeout = stage.value.delayedMarkContainer(e);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), null, {
           default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
-            values.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
-              key: 0,
-              class: "magic-editor-layer-tree",
-              ref_key: "tree",
-              ref: tree,
-              "node-key": "id",
-              "empty-text": "页面空荡荡的",
-              tabindex: "-1",
-              draggable: "",
-              "default-expanded-keys": expandedKeys.value,
-              "default-checked-keys": checkedKeys.value,
-              "current-node-key": currentNodeKey.value,
-              data: values.value,
-              "expand-on-click-node": false,
-              "highlight-current": !isMultiSelect.value,
-              "check-on-click-node": true,
-              props: treeProps,
-              "filter-node-method": filterNode,
-              "allow-drop": allowDrop,
-              "show-checkbox": isMultiSelect.value,
-              onNodeClick: clickHandler,
-              onNodeContextmenu: contextmenu,
-              onNodeDragEnd: handleDragEnd,
-              onNodeCollapse: handleCollapse,
-              onNodeExpand: handleExpand,
-              onCheck: checkHandler,
-              onMousedown: toggleClickFlag,
-              onMouseup: toggleClickFlag
+            vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
+            vue.createVNode(vue.unref(design.TMagicCollapse), {
+              class: "ui-component-panel",
+              "model-value": collapseValue.value
             }, {
-              default: vue.withCtx(({ node, data }) => [
-                vue.createElementVNode("div", {
-                  class: "cus-tree-node",
-                  id: data.id,
-                  onMouseenter: ($event) => vue.unref(highlightHandler)(data)
-                }, [
-                  vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                    node,
-                    data
-                  }, () => [
-                    vue.createVNode(_sfc_main$g, { data }, null, 8, ["data"])
-                  ])
-                ], 40, _hoisted_1$9)
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$t, { 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), {
+                      key: index,
+                      name: `${index}`
+                    }, {
+                      title: vue.withCtx(() => [
+                        vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createTextVNode(vue.toDisplayString(group.title), 1)
+                      ]),
+                      default: vue.withCtx(() => [
+                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
+                          return vue.openBlock(), vue.createElementBlock("div", {
+                            class: "component-item",
+                            draggable: "true",
+                            key: item.type,
+                            onClick: ($event) => appendComponent(item),
+                            onDragstart: ($event) => dragstartHandler(item, $event),
+                            onDragend: dragendHandler,
+                            onDrag: dragHandler
+                          }, [
+                            vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
+                              vue.createVNode(_sfc_main$M, {
+                                title: item.text,
+                                icon: item.icon
+                              }, null, 8, ["title", "icon"]),
+                              vue.createElementVNode("span", {
+                                title: item.text
+                              }, vue.toDisplayString(item.text), 9, _hoisted_2$7)
+                            ])
+                          ], 40, _hoisted_1$9);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["name"])) : vue.createCommentVNode("", true)
+                  ], 64);
+                }), 256))
               ]),
               _: 3
-            }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : vue.createCommentVNode("", true),
-            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$h, {
-                ref_key: "menu",
-                ref: menu,
-                "layer-content-menu": _ctx.layerContentMenu,
-                onCollapseAll: collapseAllHandler
-              }, null, 8, ["layer-content-menu"])
-            ]))
+            }, 8, ["model-value"])
           ]),
           _: 3
         });
@@ -6697,7 +7356,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$k,
+            component: _sfc_main$f,
             slots: {}
           },
           layer: {
@@ -6708,7 +7367,7 @@
             props: {
               layerContentMenu: props.layerContentMenu
             },
-            component: _sfc_main$f,
+            component: _sfc_main$g,
             slots: {}
           },
           "code-block": {
@@ -6716,7 +7375,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$o,
+            component: _sfc_main$p,
             slots: {}
           },
           "data-source": {
@@ -6724,7 +7383,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$l,
+            component: _sfc_main$m,
             slots: {}
           }
         };
@@ -6749,7 +7408,7 @@
                 key: config.$key ?? index,
                 onClick: ($event) => activeTabName.value = config.text || `${index}`
               }, [
-                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -6810,16 +7469,14 @@
                 } : void 0,
                 config.$key === "layer" || config.slots?.layerNodeContent ? {
                   name: "layer-node-content",
-                  fn: vue.withCtx(({ data: nodeData, node }) => [
+                  fn: vue.withCtx(({ data: nodeData }) => [
                     config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
                       key: 0,
-                      data: nodeData,
-                      node
+                      data: nodeData
                     }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
                       key: 1,
-                      data: nodeData,
-                      node
-                    }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
+                      data: nodeData
+                    }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                   ]),
                   key: "5"
                 } : void 0
@@ -7449,7 +8106,7 @@
             content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$K, {
+              vue.createVNode(_sfc_main$M, {
                 style: { "margin-left": "10px", "cursor": "pointer" },
                 icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
                 onClick: pinHandler
@@ -7465,7 +8122,7 @@
               onClick: closeHandler
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
               ]),
               _: 1
             })
@@ -7502,6 +8159,13 @@
         nodeList.value = [];
         menu.value?.hide();
       };
+      const clearTimeoutLazy = () => {
+        globalThis.setTimeout(() => {
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+          }
+        }, 300);
+      };
       const unWatch = vue.watch(
         stage,
         (stage2) => {
@@ -7516,7 +8180,7 @@
               return;
             }
             timeout = globalThis.setTimeout(() => {
-              const els = stage2?.renderer.getElementsFromPoint(event);
+              const els = stage2.renderer.getElementsFromPoint(event) || [];
               const nodes = utils.getNodes(
                 els.map((el) => el.id),
                 page.value?.items
@@ -7531,7 +8195,7 @@
             }, 1500);
           });
           stage2.on("mouseleave", () => {
-            cancel();
+            clearTimeoutLazy();
           });
           unWatch();
         },
@@ -7570,11 +8234,7 @@
         })
       );
       const mouseenterHandler = () => {
-        globalThis.setTimeout(() => {
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-          }
-        }, 300);
+        clearTimeoutLazy();
       };
       const dragMenuHandler = ({ deltaY, deltaX }) => {
         if (!menu.value)
@@ -7589,9 +8249,11 @@
         menu.value?.hide();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$j, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           ref_key: "menu",
           ref: menu,
+          class: "magic-editor-node-list-menu",
+          style: { "max-width": "280px" },
           "menu-data": menuData.value,
           active: node.value?.id,
           "auto-hide": !pinned.value,
@@ -7773,7 +8435,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$j, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -7868,17 +8530,26 @@
         services?.editorService.set("stage", null);
         services?.keybindingService.unregisteEl("stage");
       });
+      const parseDSL = getConfig("parseDSL");
       const contextmenuHandler = (e) => {
         e.preventDefault();
         menu.value?.show(e);
       };
       const dragoverHandler = (e) => {
-        e.preventDefault();
         if (!e.dataTransfer)
           return;
+        e.preventDefault();
         e.dataTransfer.dropEffect = "move";
       };
       const dropHandler = async (e) => {
+        if (!e.dataTransfer)
+          return;
+        const data = e.dataTransfer.getData("text/json");
+        if (!data)
+          return;
+        const config = parseDSL(`(${data})`);
+        if (!config || config.dragType !== DragType.COMPONENT_LIST)
+          return;
         e.preventDefault();
         const doc = stage?.renderer.contentWindow?.document;
         const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
@@ -7886,18 +8557,11 @@
         if (parentEl) {
           parent = services?.editorService.getNodeById(parentEl.id, false);
         }
-        if (e.dataTransfer && parent && stageContainer.value && stage) {
-          const parseDSL = getConfig("parseDSL");
-          const data = e.dataTransfer.getData("text/json");
-          if (!data)
-            return;
-          const config = parseDSL(`(${data})`);
-          if (!config)
-            return;
+        if (parent && stageContainer.value && stage) {
           const layout = await services?.editorService.getLayout(parent);
           const containerRect = stageContainer.value.getBoundingClientRect();
           const { scrollTop, scrollLeft } = stage.mask;
-          const { style = {} } = config;
+          const { style = {} } = config.data;
           let top = 0;
           let left = 0;
           let position = "relative";
@@ -7911,14 +8575,14 @@
               top = top - StageCore.calcValueByFontsize(doc, parentTop);
             }
           }
-          config.style = {
+          config.data.style = {
             ...style,
             position,
             top: top / zoom.value,
             left: left / zoom.value
           };
-          config.inputEvent = e;
-          services?.editorService.add(config, parent);
+          config.data.inputEvent = e;
+          services?.editorService.add(config.data, parent);
         }
       };
       return (_ctx, _cache) => {
@@ -8104,14 +8768,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -8127,7 +8791,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -8199,7 +8863,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$v, {
+                        vue.createVNode(_sfc_main$w, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -8207,7 +8871,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$v, {
+                        vue.createVNode(_sfc_main$w, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -9048,119 +9712,23 @@
     }
   ];
 
-  const editorProps = {
-    /** 页面初始值 */
-    modelValue: {
-      type: Object,
-      default: () => ({}),
-      require: true
-    },
-    /** 左侧面板中的组件列表 */
-    componentGroupList: {
-      type: Array,
-      default: () => []
-    },
-    /** 左侧面板中的组件列表 */
-    datasourceList: {
-      type: Array,
-      default: () => []
-    },
-    /** 左侧面板配置 */
-    sidebar: {
-      type: Object
-    },
-    /** 顶部工具栏配置 */
-    menu: {
-      type: Object,
-      default: () => ({ left: [], right: [] })
-    },
-    /** 组件树右键菜单 */
-    layerContentMenu: {
-      type: Array,
-      default: () => []
-    },
-    /** 画布右键菜单 */
-    stageContentMenu: {
-      type: Array,
-      default: () => []
-    },
-    /** 中间工作区域中画布渲染的内容 */
-    render: {
-      type: Function
-    },
-    /** 中间工作区域中画布通过iframe渲染时的页面url */
-    runtimeUrl: String,
-    /** 选中时是否自动滚动到可视区域 */
-    autoScrollIntoView: Boolean,
-    /** 组件的属性配置表单的dsl */
-    propsConfigs: {
-      type: Object,
-      default: () => ({})
-    },
-    /** 添加组件时的默认值 */
-    propsValues: {
-      type: Object,
-      default: () => ({})
-    },
-    /** 组件联动事件选项列表 */
-    eventMethodList: {
-      type: Object,
-      default: () => ({})
-    },
-    /** 添加数据源时的默认值 */
-    datasourceValues: {
-      type: Object,
-      default: () => ({})
-    },
-    /** 数据源的属性配置表单的dsl */
-    datasourceConfigs: {
-      type: Object,
-      default: () => ({})
-    },
-    /** 画布中组件选中框的移动范围 */
-    moveableOptions: {
-      type: [Object, Function]
-    },
-    /** 编辑器初始化时默认选中的组件ID */
-    defaultSelected: {
-      type: [Number, String]
-    },
-    canSelect: {
-      type: Function,
-      default: (el) => Boolean(el.id)
-    },
-    isContainer: {
-      type: Function,
-      default: (el) => el.classList.contains("magic-ui-container")
-    },
-    containerHighlightClassName: {
-      type: String,
-      default: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME
-    },
-    containerHighlightDuration: {
-      type: Number,
-      default: 800
-    },
-    containerHighlightType: {
-      type: String,
-      default: StageCore.ContainerHighlightType.DEFAULT
-    },
-    stageRect: {
-      type: [String, Object]
-    },
-    codeOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    updateDragEl: {
-      type: Function
-    },
-    disabledDragStart: {
-      type: Boolean
-    },
-    extendFormState: {
-      type: Function
-    }
+  const defaultEditorProps = {
+    componentGroupList: () => [],
+    datasourceList: () => [],
+    menu: () => ({ left: [], right: [] }),
+    layerContentMenu: () => [],
+    stageContentMenu: () => [],
+    propsConfigs: () => ({}),
+    propsValues: () => ({}),
+    eventMethodList: () => ({}),
+    datasourceValues: () => ({}),
+    datasourceConfigs: () => ({}),
+    canSelect: (el) => Boolean(el.id),
+    isContainer: (el) => el.classList.contains("magic-ui-container"),
+    containerHighlightClassName: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME,
+    containerHighlightDuration: 800,
+    containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
+    codeOptions: () => ({})
   };
 
   const createCodeBlockTarget = (id, codeBlock) => new Target({
@@ -9181,20 +9749,26 @@
   const createDataSourceTarget = (id) => new Target({
     type: DepTargetType.DATA_SOURCE,
     id,
-    isTarget: (key, value) => (
-      // 关联数据源对象或者在模板在使用数据源
-      value?.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)
-    )
+    isTarget: (key, value) => {
+      if (value?.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)) {
+        return true;
+      }
+      if (!Array.isArray(value) || typeof value[0] !== "string") {
+        return false;
+      }
+      const [prefixId] = value;
+      const prefixIndex = prefixId.indexOf(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
+      if (prefixIndex === -1) {
+        return false;
+      }
+      const dsId = prefixId.substring(prefixIndex + utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);
+      return dsId === id && Boolean(dataSourceService.getDataSourceById(id));
+    }
   });
   const createDataSourceCondTarget = (id) => new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key, value) => {
-      if (!Array.isArray(value) || value[0] !== id)
-        return false;
-      const ds = dataSourceService.getDataSourceById(id);
-      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
-    }
+    isTarget: (key, value) => Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id))
   });
   const createDataSourceMethodTarget = (id) => new Target({
     type: DepTargetType.DATA_SOURCE_METHOD,
@@ -9221,7 +9795,7 @@
     vue.watch(
       () => props.modelValue,
       (modelValue) => {
-        editorService.set("root", modelValue);
+        editorService.set("root", modelValue || null);
       },
       {
         immediate: true
@@ -9229,28 +9803,28 @@
     );
     vue.watch(
       () => props.componentGroupList,
-      (componentGroupList) => componentListService.setList(componentGroupList),
+      (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
       {
         immediate: true
       }
     );
     vue.watch(
       () => props.datasourceList,
-      (datasourceList) => dataSourceService.set("datasourceTypeList", datasourceList),
+      (datasourceList) => datasourceList && dataSourceService.set("datasourceTypeList", datasourceList),
       {
         immediate: true
       }
     );
     vue.watch(
       () => props.propsConfigs,
-      (configs) => propsService.setPropsConfigs(configs),
+      (configs) => configs && propsService.setPropsConfigs(configs),
       {
         immediate: true
       }
     );
     vue.watch(
       () => props.propsValues,
-      (values) => propsService.setPropsValues(values),
+      (values) => values && propsService.setPropsValues(values),
       {
         immediate: true
       }
@@ -9260,7 +9834,7 @@
       (eventMethodList) => {
         const eventsList = {};
         const methodsList = {};
-        Object.keys(eventMethodList).forEach((type) => {
+        eventMethodList && Object.keys(eventMethodList).forEach((type) => {
           eventsList[type] = eventMethodList[type].events;
           methodsList[type] = eventMethodList[type].methods;
         });
@@ -9274,7 +9848,7 @@
     vue.watch(
       () => props.datasourceConfigs,
       (configs) => {
-        Object.entries(configs).forEach(([key, value]) => {
+        configs && Object.entries(configs).forEach(([key, value]) => {
           dataSourceService.setFormConfig(key, value);
         });
       },
@@ -9285,7 +9859,7 @@
     vue.watch(
       () => props.datasourceValues,
       (values) => {
-        Object.entries(values).forEach(([key, value]) => {
+        values && Object.entries(values).forEach(([key, value]) => {
           dataSourceService.setFormValue(key, value);
         });
       },
@@ -9293,6 +9867,26 @@
         immediate: true
       }
     );
+    vue.watch(
+      () => props.datasourceEventMethodList,
+      (eventMethodList) => {
+        const eventsList = {};
+        const methodsList = {};
+        eventMethodList && Object.keys(eventMethodList).forEach((type) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+        Object.entries(eventsList).forEach(([key, value]) => {
+          dataSourceService.setFormEvent(key, value);
+        });
+        Object.entries(methodsList).forEach(([key, value]) => {
+          dataSourceService.setFormMethod(key, value);
+        });
+      },
+      {
+        immediate: true
+      }
+    );
     vue.watch(
       () => props.defaultSelected,
       (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
@@ -9414,6 +10008,8 @@
       if (vue.toRaw(value) !== vue.toRaw(preValue)) {
         emit("update:modelValue", value);
       }
+      if (!value)
+        return;
       value.codeBlocks = value.codeBlocks || {};
       value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
@@ -9496,18 +10092,44 @@
     });
   };
 
-  const _sfc_main = vue.defineComponent({
-    name: "MEditor",
-    components: {
-      TMagicNavMenu: _sfc_main$u,
-      Sidebar: _sfc_main$e,
-      Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$t,
-      Framework: _sfc_main$w
-    },
-    props: editorProps,
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditor"
+    },
+    __name: "Editor",
+    props: vue.mergeDefaults({
+      modelValue: {},
+      componentGroupList: {},
+      datasourceList: {},
+      sidebar: {},
+      menu: {},
+      layerContentMenu: {},
+      stageContentMenu: {},
+      render: { type: Function },
+      runtimeUrl: {},
+      autoScrollIntoView: { type: Boolean },
+      propsConfigs: {},
+      propsValues: {},
+      eventMethodList: {},
+      datasourceValues: {},
+      datasourceConfigs: {},
+      datasourceEventMethodList: {},
+      moveableOptions: { type: Function },
+      defaultSelected: {},
+      canSelect: { type: Function },
+      isContainer: { type: Function },
+      containerHighlightClassName: {},
+      containerHighlightDuration: {},
+      containerHighlightType: {},
+      stageRect: {},
+      codeOptions: {},
+      updateDragEl: { type: Function },
+      disabledDragStart: { type: Boolean },
+      extendFormState: { type: Function }
+    }, defaultEditorProps),
     emits: ["props-panel-mounted", "update:modelValue"],
-    setup(props, { emit }) {
+    setup(__props, { expose: __expose, emit }) {
+      const props = __props;
       const services = {
         componentListService,
         eventsService,
@@ -9543,119 +10165,101 @@
           disabledDragStart: props.disabledDragStart
         })
       );
-      return services;
+      __expose(services);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$x, null, {
+          header: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "header")
+          ]),
+          nav: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
+              vue.createVNode(_sfc_main$v, { data: _ctx.menu }, null, 8, ["data"])
+            ])
+          ]),
+          "content-before": vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "content-before")
+          ]),
+          "src-code": vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "src-code", { editorService: vue.unref(editorService) })
+          ]),
+          sidebar: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "sidebar", { editorService: vue.unref(editorService) }, () => [
+              vue.createVNode(_sfc_main$e, {
+                data: _ctx.sidebar,
+                "layer-content-menu": _ctx.layerContentMenu
+              }, {
+                "layer-panel-header": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "layer-panel-header")
+                ]),
+                "layer-node-content": vue.withCtx(({ data }) => [
+                  vue.renderSlot(_ctx.$slots, "layer-node-content", { data })
+                ]),
+                "component-list-panel-header": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "component-list-panel-header")
+                ]),
+                "component-list-item": vue.withCtx(({ component }) => [
+                  vue.renderSlot(_ctx.$slots, "component-list-item", { component })
+                ]),
+                "code-block-panel-header": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "code-block-panel-header")
+                ]),
+                "code-block-panel-tool": vue.withCtx(({ id, data }) => [
+                  vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                    id,
+                    data
+                  })
+                ]),
+                _: 3
+              }, 8, ["data", "layer-content-menu"])
+            ])
+          ]),
+          workspace: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "workspace", { editorService: vue.unref(editorService) }, () => [
+              vue.createVNode(_sfc_main$1, { "stage-content-menu": _ctx.stageContentMenu }, {
+                stage: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "stage")
+                ]),
+                "workspace-content": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: vue.unref(editorService) })
+                ]),
+                "page-bar-title": vue.withCtx(({ page }) => [
+                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
+                ]),
+                "page-bar-popover": vue.withCtx(({ page }) => [
+                  vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
+                ]),
+                _: 3
+              }, 8, ["stage-content-menu"])
+            ])
+          ]),
+          "props-panel": vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
+              vue.createVNode(_sfc_main$u, {
+                "extend-state": _ctx.extendFormState,
+                onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
+              }, {
+                "props-panel-header": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "props-panel-header")
+                ]),
+                _: 3
+              }, 8, ["extend-state"])
+            ])
+          ]),
+          empty: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "empty", { editorService: vue.unref(editorService) })
+          ]),
+          "content-after": vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "content-after")
+          ]),
+          footer: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "footer")
+          ]),
+          _: 3
+        });
+      };
     }
   });
 
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-
-  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_TMagicNavMenu = vue.resolveComponent("TMagicNavMenu");
-    const _component_Sidebar = vue.resolveComponent("Sidebar");
-    const _component_Workspace = vue.resolveComponent("Workspace");
-    const _component_PropsPanel = vue.resolveComponent("PropsPanel");
-    const _component_Framework = vue.resolveComponent("Framework");
-    return vue.openBlock(), vue.createBlock(_component_Framework, null, {
-      header: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "header")
-      ]),
-      nav: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
-        ])
-      ]),
-      "content-before": vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "content-before")
-      ]),
-      "src-code": vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "src-code", { editorService: _ctx.editorService })
-      ]),
-      sidebar: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_Sidebar, {
-            data: _ctx.sidebar,
-            "layer-content-menu": _ctx.layerContentMenu
-          }, {
-            "layer-panel-header": vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "layer-panel-header")
-            ]),
-            "layer-node-content": vue.withCtx(({ node, data }) => [
-              vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                data,
-                node
-              })
-            ]),
-            "component-list-panel-header": vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "component-list-panel-header")
-            ]),
-            "component-list-item": vue.withCtx(({ component }) => [
-              vue.renderSlot(_ctx.$slots, "component-list-item", { component })
-            ]),
-            "code-block-panel-header": vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "code-block-panel-header")
-            ]),
-            "code-block-panel-tool": vue.withCtx(({ id, data }) => [
-              vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                id,
-                data
-              })
-            ]),
-            _: 3
-          }, 8, ["data", "layer-content-menu"])
-        ])
-      ]),
-      workspace: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
-            stage: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "stage")
-            ]),
-            "workspace-content": vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
-            ]),
-            "page-bar-title": vue.withCtx(({ page }) => [
-              vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
-            ]),
-            "page-bar-popover": vue.withCtx(({ page }) => [
-              vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
-            ]),
-            _: 3
-          }, 8, ["stage-content-menu"])
-        ])
-      ]),
-      "props-panel": vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-          vue.createVNode(_component_PropsPanel, {
-            "extend-state": _ctx.extendFormState,
-            onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
-          }, {
-            "props-panel-header": vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "props-panel-header")
-            ]),
-            _: 3
-          }, 8, ["extend-state"])
-        ])
-      ]),
-      empty: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
-      ]),
-      "content-after": vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "content-after")
-      ]),
-      footer: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "footer")
-      ]),
-      _: 3
-    });
-  }
-  const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-
   const index$1 = '';
 
   const defaultInstallOpt = {
@@ -9667,59 +10271,62 @@
       const option = Object.assign(defaultInstallOpt, opt || {});
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
-      app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$A);
-      app.component("m-fields-code-link", _sfc_main$O);
-      app.component("m-fields-vs-code", _sfc_main$P);
-      app.component("magic-code-editor", _sfc_main$Q);
-      app.component("m-fields-code-select", _sfc_main$N);
-      app.component("m-fields-code-select-col", _sfc_main$J);
-      app.component("m-fields-event-select", _sfc_main$C);
-      app.component("m-fields-data-source-fields", _sfc_main$I);
-      app.component("m-fields-key-value", _sfc_main$B);
-      app.component("m-fields-data-source-input", _sfc_main$G);
-      app.component("m-fields-data-source-select", _sfc_main$D);
-      app.component("m-fields-data-source-methods", _sfc_main$F);
-      app.component("m-fields-data-source-method-select", _sfc_main$E);
-      app.component("m-fields-data-source-field-select", _sfc_main$H);
+      app.component(_sfc_main.name, _sfc_main);
+      app.component("m-fields-ui-select", _sfc_main$B);
+      app.component("m-fields-code-link", _sfc_main$Q);
+      app.component("m-fields-vs-code", _sfc_main$R);
+      app.component("magic-code-editor", _sfc_main$S);
+      app.component("m-fields-code-select", _sfc_main$P);
+      app.component("m-fields-code-select-col", _sfc_main$L);
+      app.component("m-fields-event-select", _sfc_main$D);
+      app.component("m-fields-data-source-fields", _sfc_main$K);
+      app.component("m-fields-data-source-mocks", _sfc_main$F);
+      app.component("m-fields-key-value", _sfc_main$C);
+      app.component("m-fields-data-source-input", _sfc_main$I);
+      app.component("m-fields-data-source-select", _sfc_main$E);
+      app.component("m-fields-data-source-methods", _sfc_main$H);
+      app.component("m-fields-data-source-method-select", _sfc_main$G);
+      app.component("m-fields-data-source-field-select", _sfc_main$J);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$M;
-  exports.CodeBlockList = _sfc_main$p;
-  exports.CodeBlockListPanel = _sfc_main$o;
+  exports.CodeBlockEditor = _sfc_main$O;
+  exports.CodeBlockList = _sfc_main$q;
+  exports.CodeBlockListPanel = _sfc_main$p;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$N;
-  exports.CodeSelectCol = _sfc_main$J;
+  exports.CodeSelect = _sfc_main$P;
+  exports.CodeSelectCol = _sfc_main$L;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$k;
-  exports.ContentMenu = _sfc_main$j;
-  exports.DataSourceFieldSelect = _sfc_main$H;
-  exports.DataSourceFields = _sfc_main$I;
-  exports.DataSourceInput = _sfc_main$G;
-  exports.DataSourceMethodSelect = _sfc_main$E;
-  exports.DataSourceMethods = _sfc_main$F;
-  exports.DataSourceSelect = _sfc_main$D;
+  exports.ComponentListPanel = _sfc_main$f;
+  exports.ContentMenu = _sfc_main$l;
+  exports.DataSourceFieldSelect = _sfc_main$J;
+  exports.DataSourceFields = _sfc_main$K;
+  exports.DataSourceInput = _sfc_main$I;
+  exports.DataSourceMethodSelect = _sfc_main$G;
+  exports.DataSourceMethods = _sfc_main$H;
+  exports.DataSourceMocks = _sfc_main$F;
+  exports.DataSourceSelect = _sfc_main$E;
   exports.DepTargetType = DepTargetType;
-  exports.EventSelect = _sfc_main$C;
+  exports.DragType = DragType;
+  exports.EventSelect = _sfc_main$D;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$K;
+  exports.Icon = _sfc_main$M;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$B;
+  exports.KeyValue = _sfc_main$C;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$f;
+  exports.LayerPanel = _sfc_main$g;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$y;
-  exports.PropsPanel = _sfc_main$t;
-  exports.Resizer = _sfc_main$z;
-  exports.SplitView = _sfc_main$y;
-  exports.TMagicCodeEditor = _sfc_main$Q;
-  exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$v;
+  exports.LayoutContainer = _sfc_main$z;
+  exports.PropsPanel = _sfc_main$u;
+  exports.Resizer = _sfc_main$A;
+  exports.SplitView = _sfc_main$z;
+  exports.TMagicCodeEditor = _sfc_main$S;
+  exports.TMagicEditor = _sfc_main;
+  exports.ToolButton = _sfc_main$w;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
   exports.beforePaste = beforePaste;
@@ -9761,6 +10368,7 @@
   exports.setLayout = setLayout;
   exports.storageService = storageService;
   exports.styleTabConfig = styleTabConfig;
+  exports.traverseNode = traverseNode;
   exports.uiService = uiService;
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;