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

package/dist/tmagic-editor.js

@@ -1,23 +1,29 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, Transition, onBeforeUnmount, toHandlers, provide } from 'vue';
-import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
-import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, difference, union, pick, keys } from 'lodash-es';
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, Transition, onBeforeUnmount, provide, toHandlers, mergeDefaults } from 'vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, ArrowRight, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
+import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
-import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
+import { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, addClassName, removeClassName, getKeys, removeClassNameByClassName, getNodes, isObject as isObject$1 } from '@tmagic/utils';
 import Gesto from 'gesto';
-import { guid, isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName, getNodes, isObject as isObject$1 } from '@tmagic/utils';
 import StageCore, { GuidesType, StageDragStatus, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
+let $TMAGIC_EDITOR = {};
+const setConfig = (option) => {
+  $TMAGIC_EDITOR = option;
+};
+const getConfig = (key) => $TMAGIC_EDITOR[key];
+
 const _hoisted_1$w = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -31,7 +37,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       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 }) {
@@ -39,7 +46,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     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, {
@@ -55,6 +62,15 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
       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 = ref("");
@@ -67,7 +83,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }, 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.editor.createModel(values.value, "text/javascript");
         const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
@@ -102,7 +118,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           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) {
@@ -110,7 +126,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           const newValue = getEditorValue();
           if (values.value !== newValue) {
             values.value = newValue;
-            emit("save", newValue);
+            emit("save", props.parse ? parse(newValue, props.language) : newValue);
           }
         });
       }
@@ -192,7 +208,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -216,7 +232,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$Q, {
+      return openBlock(), createBlock(_sfc_main$S, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -224,19 +240,14 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           ..._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__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -315,7 +326,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -388,10 +399,10 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
 });
 
 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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -610,7 +621,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           fullscreen: ""
         }, {
           footer: withCtx(() => [
-            createElementVNode("span", _hoisted_4$6, [
+            createElementVNode("span", _hoisted_4$7, [
               createVNode(unref(TMagicButton), {
                 size: "small",
                 onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -634,7 +645,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$v, [
-              createElementVNode("div", _hoisted_2$n, [
+              createElementVNode("div", _hoisted_2$p, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "info"
@@ -645,7 +656,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              createElementVNode("div", _hoisted_3$a, [
+              createElementVNode("div", _hoisted_3$b, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "success"
@@ -657,7 +668,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
+            difVisible.value ? (openBlock(), createBlock(_sfc_main$S, {
               key: 0,
               ref_key: "magicVsEditor",
               ref: magicVsEditor,
@@ -798,6 +809,17 @@ const fillConfig$1 = (config) => [
         type: "event-select"
       }
     ]
+  },
+  {
+    type: "panel",
+    title: "mock数据",
+    items: [
+      {
+        name: "mocks",
+        type: "data-source-mocks",
+        defaultValue: () => []
+      }
+    ]
   }
 ];
 const getFormConfig = (type, configs) => {
@@ -979,7 +1001,8 @@ class DataSource extends BaseService {
     editable: true,
     configs: {},
     values: {},
-    events: {}
+    events: {},
+    methods: {}
   });
   set(name, value) {
     this.state[name] = value;
@@ -1005,6 +1028,12 @@ class DataSource extends BaseService {
   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,
@@ -1251,6 +1280,8 @@ const displayTabConfig = {
     {
       type: "groupList",
       name: "displayConds",
+      titlePrefix: "条件组",
+      expandAll: true,
       items: [
         {
           type: "table",
@@ -1259,6 +1290,7 @@ const displayTabConfig = {
             {
               type: "data-source-field-select",
               name: "field",
+              value: "key",
               label: "字段"
             },
             {
@@ -1444,6 +1476,11 @@ var DepTargetType = /* @__PURE__ */ ((DepTargetType2) => {
   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) => {
@@ -1466,9 +1503,9 @@ const generatePageName = (pageNameList) => {
 };
 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,
@@ -1604,6 +1641,15 @@ const serializeConfig = (config) => serialize(config, {
   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;
@@ -1982,7 +2028,7 @@ class Props extends BaseService {
 }
 const propsService = new Props();
 
-let Editor$1 = class Editor extends BaseService {
+class Editor extends BaseService {
   state = reactive({
     root: null,
     page: null,
@@ -2017,7 +2063,8 @@ let Editor$1 = class Editor extends BaseService {
         "move",
         "undo",
         "redo",
-        "highlight"
+        "highlight",
+        "dragTo"
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ["select", "update", "moveLayer"]
@@ -2160,7 +2207,7 @@ let Editor$1 = class Editor extends BaseService {
     const parent = 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);
@@ -2173,7 +2220,7 @@ let Editor$1 = class Editor extends BaseService {
       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);
@@ -2294,7 +2341,7 @@ let Editor$1 = class Editor extends BaseService {
     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);
@@ -2362,7 +2409,7 @@ let Editor$1 = class Editor extends BaseService {
     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);
@@ -2552,7 +2599,7 @@ let Editor$1 = class Editor extends BaseService {
     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);
@@ -2574,6 +2621,38 @@ let Editor$1 = class Editor extends BaseService {
       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: cloneDeep(page),
+        parentId: root.id,
+        root: cloneDeep(root)
+      });
+    }
+    this.addModifiedNodeId(config.id);
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+  }
   /**
    * 撤销当前操作
    * @returns 上一次数据
@@ -2718,8 +2797,8 @@ let Editor$1 = class Editor extends BaseService {
       page
     };
   }
-};
-const editorService = new Editor$1();
+}
+const editorService = new Editor();
 
 const beforePaste = async (position, config) => {
   if (!config[0]?.style)
@@ -2793,7 +2872,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -2843,7 +2922,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$u = ["src"];
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -2944,8 +3023,8 @@ const useCodeBlockEdit = (codeBlockService) => {
 };
 
 const _hoisted_1$t = { class: "m-fields-code-select-col" };
-const _hoisted_2$m = { class: "code-select-container" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_2$o = { class: "code-select-container" };
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -3020,21 +3099,21 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        createElementVNode("div", _hoisted_2$m, [
+        createElementVNode("div", _hoisted_2$o, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
             model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$M, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3042,7 +3121,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3056,8 +3135,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
 });
 
 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__ */ defineComponent({
+const _hoisted_2$n = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -3079,11 +3158,11 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const addDialog = ref();
     const fieldValues = ref({});
-    const filedTitle = ref("");
+    const fieldTitle = ref("");
     const width = 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 }) => {
@@ -3123,7 +3202,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 ...row,
                 index
               };
-              filedTitle.value = `编辑${row.title}`;
+              fieldTitle.value = `编辑${row.title}`;
               addDialog.value?.show();
             }
           },
@@ -3193,12 +3272,16 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       {
         name: "defaultValue",
         text: "默认值",
+        height: "200px",
+        parse: true,
         type: (mForm, { model }) => {
           if (model.type === "number")
             return "number";
           if (model.type === "boolean")
             return "select";
-          return "text";
+          if (model.type === "string")
+            return "text";
+          return "vs-code";
         },
         options: [
           { text: "true", value: true },
@@ -3215,22 +3298,98 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         name: "fields",
         type: "data-source-fields",
         defaultValue: [],
-        display: (formState, { model }) => model.type === "object"
+        display: (formState, { model }) => model.type === "object" || model.type === "array"
+      }
+    ];
+    const addFromJsonDialog = ref();
+    const jsonFromConfig = [
+      {
+        name: "data",
+        type: "vs-code",
+        labelWidth: "0",
+        language: "json",
+        height: "600px",
+        options: inject("codeOptions", {})
       }
     ];
+    const jsonFromValues = 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) {
+        tMagicMessage.error(e.message);
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$l, [
+        createElementVNode("div", _hoisted_2$n, [
+          createVNode(unref(TMagicButton), {
+            size: "small",
+            disabled: _ctx.disabled,
+            plain: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => newFromJsonHandler())
+          }, {
+            default: withCtx(() => [
+              createTextVNode("快速添加")
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
             disabled: _ctx.disabled,
             plain: "",
-            onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+            onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
           }, {
             default: withCtx(() => [
               createTextVNode("添加")
@@ -3242,20 +3401,30 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           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"]),
+        createVNode(unref(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__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3273,18 +3442,25 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     const props = __props;
     const services = inject("services");
     const dataSources = 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 = 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 : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+          children: getOptionChildren(ds.fields)
+        })) || []
+      };
+    });
     const onChangeHandler = (value) => {
       emit("change", value);
     };
@@ -3293,7 +3469,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_component_m_form_container, {
         config: {
           ..._ctx.config,
-          ...cascaderConfig
+          ...cascaderConfig.value
         },
         model: _ctx.model,
         onChange: onChangeHandler
@@ -3303,9 +3479,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
 });
 
 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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -3494,12 +3670,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$K, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$M, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$r, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$k, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$m, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -3511,7 +3687,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$9, [
+          createElementVNode("div", _hoisted_3$a, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -3529,7 +3705,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$K, {
+            createVNode(_sfc_main$M, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -3613,8 +3789,8 @@ const useDataSourceMethod = () => {
 };
 
 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__ */ defineComponent({
+const _hoisted_2$l = { class: "m-editor-data-source-methods-footer" };
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
   },
@@ -3688,7 +3864,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$j, [
+        createElementVNode("div", _hoisted_2$l, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -3702,7 +3878,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3718,8 +3894,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
 });
 
 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__ */ defineComponent({
+const _hoisted_2$k = { class: "data-source-method-select-container" };
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
   },
@@ -3739,7 +3915,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
-    const dataSources = computed(() => services?.dataSourceService.get("dataSources"));
+    const dataSourceService = services?.dataSourceService;
+    const dataSources = computed(() => dataSourceService?.get("dataSources"));
     const getParamItemsConfig = ([dataSourceId, medthodName] = ["", ""]) => {
       if (!dataSourceId)
         return [];
@@ -3761,24 +3938,30 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         props.model.params = {};
       }
     };
-    const cascaderConfig = {
+    const methodsOptions = 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 = 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);
@@ -3786,7 +3969,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     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);
@@ -3798,21 +3981,21 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$k, [
           createVNode(_component_m_form_container, {
             class: "select",
-            config: cascaderConfig,
+            config: cascaderConfig.value,
             model: _ctx.model,
             onChange: onChangeHandler
-          }, null, 8, ["model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
+          }, null, 8, ["config", "model"]),
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$M, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3821,7 +4004,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3834,11 +4017,13 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$D = /* @__PURE__ */ 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__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceSelect"
+    name: "MEditorDataSourceMocks"
   },
-  __name: "DataSourceSelect",
+  __name: "DataSourceMocks",
   props: {
     config: {},
     model: {},
@@ -3851,132 +4036,367 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const { dataSourceService } = inject("services") || {};
-    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
-    const selectConfig = 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 openBlock(), createBlock(unref(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__ */ 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 = inject("services");
-    const eventNameConfig = computed(() => {
-      const defaultEventNameConfig = {
-        name: "name",
-        text: "事件",
-        type: "select",
-        labelWidth: "40px",
-        options: (mForm, { formValue }) => {
-          let events = [];
-          if (!services)
-            return events;
-          if (props.config.src === "component") {
-            events = services.eventsService.getEvent(formValue.type);
-          } else if (props.config.src === "datasource") {
-            events = services.dataSourceService.getFormEvent(formValue.type);
-          }
-          return events.map((option) => ({
-            text: option.label,
-            value: option.value
-          }));
-        }
-      };
-      return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
-    });
-    const actionTypeConfig = computed(() => {
-      const defaultActionTypeConfig = {
-        name: "actionType",
-        text: "联动类型",
-        labelWidth: "80px",
-        type: "select",
-        defaultValue: ActionType.COMP,
-        options: () => [
-          {
-            text: "组件",
-            label: "组件",
-            value: ActionType.COMP
-          },
+    const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
+    const addDialog = ref();
+    const drawerTitle = ref("");
+    const formValues = 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: ActionType.CODE
+            required: true,
+            message: "请输入字段名称"
           },
           {
-            text: "数据源",
-            label: "数据源",
-            disabled: !services?.dataSourceService.get("dataSources")?.filter((ds) => ds.methods?.length).length,
-            value: ActionType.DATA_SOURCE
+            required: true,
+            message: "请输入名称"
           }
         ]
-      };
-      return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
-    });
-    const targetCompConfig = computed(() => {
-      const defaultTargetCompConfig = {
-        name: "to",
-        text: "联动组件",
-        labelWidth: "80px",
-        type: "ui-select",
-        display: (mForm, { model }) => model.actionType === ActionType.COMP
-      };
-      return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
-    });
-    const compActionConfig = computed(() => {
+      },
+      {
+        name: "description",
+        text: "描述"
+      },
+      {
+        name: "enable",
+        text: "启用",
+        type: "switch"
+      },
+      {
+        name: "useInEditor",
+        text: "编辑器中使用",
+        type: "switch"
+      },
+      {
+        name: "data",
+        text: "mock数据",
+        type: "vs-code",
+        language: "json",
+        options: 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: 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: 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 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: 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 openBlock(), createElementBlock("div", _hoisted_1$o, [
+        createVNode(unref(MagicTable), {
+          data: _ctx.model[_ctx.name],
+          columns
+        }, null, 8, ["data"]),
+        createElementVNode("div", _hoisted_2$j, [
+          createVNode(unref(TMagicButton), {
+            size: "small",
+            type: "primary",
+            disabled: _ctx.disabled,
+            plain: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+          }, {
+            default: withCtx(() => [
+              createTextVNode("添加")
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        createVNode(unref(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__ */ 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 } = inject("services") || {};
+    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const selectConfig = 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 openBlock(), createBlock(unref(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__ */ 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 = inject("services");
+    const editorService = services?.editorService;
+    const dataSourceService = services?.dataSourceService;
+    const eventsService = services?.eventsService;
+    const codeBlockService = services?.codeBlockService;
+    const eventNameConfig = 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 = computed(() => {
+      const defaultActionTypeConfig = {
+        name: "actionType",
+        text: "联动类型",
+        labelWidth: "80px",
+        type: "select",
+        defaultValue: ActionType.COMP,
+        options: () => [
+          {
+            text: "组件",
+            label: "组件",
+            value: ActionType.COMP
+          },
+          {
+            text: "代码",
+            label: "代码",
+            disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
+            value: ActionType.CODE
+          },
+          {
+            text: "数据源",
+            label: "数据源",
+            disabled: !dataSourceService?.get("dataSources")?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
+            value: ActionType.DATA_SOURCE
+          }
+        ]
+      };
+      return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
+    });
+    const targetCompConfig = computed(() => {
+      const defaultTargetCompConfig = {
+        name: "to",
+        text: "联动组件",
+        labelWidth: "80px",
+        type: "ui-select",
+        display: (mForm, { model }) => model.actionType === ActionType.COMP
+      };
+      return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
+    });
+    const compActionConfig = computed(() => {
       const defaultCompActionConfig = {
         name: "method",
         text: "动作",
@@ -3984,10 +4404,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         type: "select",
         display: (mForm, { model }) => model.actionType === 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
           }));
@@ -4000,7 +4420,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         type: "code-select-col",
         labelWidth: 0,
         name: "codeId",
-        disabled: () => !services?.codeBlockService.getEditStatus(),
+        disabled: () => !codeBlockService?.getEditStatus(),
         display: (mForm, { model }) => model.actionType === ActionType.CODE
       };
       return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -4022,7 +4442,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           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
           }))
@@ -4037,10 +4457,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           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
             }));
@@ -4094,7 +4514,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -4104,7 +4524,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$h, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$i, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -4153,9 +4573,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-key-value" };
-const _hoisted_2$g = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = { class: "m-fields-key-value" };
+const _hoisted_2$h = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -4200,7 +4620,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -4214,7 +4634,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               size: _ctx.size,
               onChange: keyChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            _hoisted_2$g,
+            _hoisted_2$h,
             createVNode(unref(TMagicInput), {
               placeholder: "value",
               modelValue: records.value[index][1],
@@ -4253,12 +4673,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = {
+const _hoisted_1$l = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -4347,7 +4767,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$m, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$l, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -4444,7 +4864,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -4465,7 +4885,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -4577,7 +4997,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$z, { onChange: changeLeft })
+          createVNode(_sfc_main$A, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -4586,7 +5006,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$z, { onChange: changeRight }),
+          createVNode(_sfc_main$A, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -4599,10 +5019,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-editor-empty-panel" };
-const _hoisted_2$f = { class: "m-editor-empty-content" };
-const _hoisted_3$8 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = { class: "m-editor-empty-panel" };
+const _hoisted_2$g = { class: "m-editor-empty-content" };
+const _hoisted_3$9 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -4622,16 +5042,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
-        createElementVNode("div", _hoisted_2$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("div", _hoisted_2$g, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$M, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$8
+            _hoisted_3$9
           ])
         ])
       ]);
@@ -4643,7 +5063,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -4720,13 +5140,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$Q, {
+          createVNode(_sfc_main$S, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$y, {
+        ]) : (openBlock(), createBlock(_sfc_main$z, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -4745,7 +5165,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$x)
+              createVNode(_sfc_main$y)
             ])
           ]),
           _: 2
@@ -4770,12 +5190,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _hoisted_2$f = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -4854,7 +5274,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$k, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$j, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -4868,7 +5288,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$M, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4886,7 +5306,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$M, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4919,7 +5339,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$e, [
+            createElementVNode("span", _hoisted_2$f, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -4936,7 +5356,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -5098,7 +5518,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$v, {
+              return openBlock(), createBlock(_sfc_main$w, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -5110,8 +5530,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-editor-props-panel" };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = { class: "m-editor-props-panel" };
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -5164,7 +5584,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$i, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -5184,7 +5604,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -5192,8 +5612,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   emits: ["search"],
   setup(__props, { emit }) {
     const filterText = ref("");
+    let timer = null;
     const filterTextChangeHandler = () => {
-      emit("search", filterText.value);
+      timer && clearTimeout(timer);
+      timer = setTimeout(() => {
+        emit("search", filterText.value);
+      }, 300);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicInput), {
@@ -5219,8 +5643,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$d = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_1$h = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
@@ -5230,50 +5654,50 @@ const _hoisted_2$d = /* @__PURE__ */ createElementVNode("g", {
   }),
   /* @__PURE__ */ createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
 ], -1);
-const _hoisted_3$7 = [
-  _hoisted_2$d
+const _hoisted_3$8 = [
+  _hoisted_2$e
 ];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAppManageIcon"
   },
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_3$7);
+      return openBlock(), 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__ */ 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__ */ 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__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_4$5);
+      return openBlock(), 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__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -5374,26 +5798,26 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             id: data.id,
             class: "list-container"
           }, [
-            createElementVNode("div", _hoisted_2$b, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$q, {
+            createElementVNode("div", _hoisted_2$c, [
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$r, {
                 key: 0,
                 class: "codeIcon"
               })) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$r, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$s, {
                 key: 1,
                 class: "compIcon"
               })) : createCommentVNode("", true),
               createElementVNode("span", {
                 class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
               }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
-              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$K, {
+                    createVNode(_sfc_main$M, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editCode(data.id), ["stop"])
@@ -5408,7 +5832,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$K, {
+                    createVNode(_sfc_main$M, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5422,7 +5846,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 })
               ])) : createCommentVNode("", true)
             ])
-          ], 8, _hoisted_1$g)
+          ], 8, _hoisted_1$f)
         ]),
         _: 3
       }, 8, ["default-expanded-keys", "data"]);
@@ -5430,8 +5854,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = { class: "search-wrapper" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = { class: "search-wrapper" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -5451,8 +5875,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$f, [
-              createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$e, [
+              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
@@ -5468,7 +5892,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "code-block-panel-search")
             ])
           ]),
-          createVNode(_sfc_main$p, {
+          createVNode(_sfc_main$q, {
             ref_key: "codeBlockList",
             ref: codeBlockList,
             "custom-error": _ctx.customError,
@@ -5483,7 +5907,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["custom-error", "onEdit", "onRemove"]),
-          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -5498,7 +5922,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -5552,13 +5976,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -5653,13 +6077,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             id: data.id,
             class: "list-container"
           }, [
-            createElementVNode("div", _hoisted_2$a, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$K, {
+            createElementVNode("div", _hoisted_2$b, [
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$M, {
                 key: 0,
                 class: "codeIcon",
                 icon: unref(Coin)
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$K, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$M, {
                 key: 1,
                 class: "compIcon",
                 icon: unref(Aim)
@@ -5667,14 +6091,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               createElementVNode("span", {
                 class: normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
               }, toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$K, {
+                    createVNode(_sfc_main$M, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -5689,7 +6113,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$K, {
+                    createVNode(_sfc_main$M, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -5703,7 +6127,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 })
               ])) : createCommentVNode("", true)
             ])
-          ], 8, _hoisted_1$e)
+          ], 8, _hoisted_1$d)
         ]),
         _: 3
       }, 8, ["data"]);
@@ -5711,9 +6135,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = { class: "search-wrapper" };
-const _hoisted_2$9 = { class: "data-source-list-panel-add-menu" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = { class: "search-wrapper" };
+const _hoisted_2$a = { class: "data-source-list-panel-add-menu" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -5773,8 +6197,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$d, [
-            createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
+          createElementVNode("div", _hoisted_1$c, [
+            createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
             editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
               key: 0,
               placement: "right"
@@ -5791,9 +6215,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 })
               ]),
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_2$9, [
+                createElementVNode("div", _hoisted_2$a, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                    return openBlock(), createBlock(_sfc_main$v, {
+                    return openBlock(), createBlock(_sfc_main$w, {
                       data: {
                         type: "button",
                         text: item.text,
@@ -5809,11 +6233,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               _: 1
             })) : createCommentVNode("", true)
           ]),
-          createVNode(_sfc_main$m, {
+          createVNode(_sfc_main$n, {
             onEdit: editHandler,
             onRemove: removeHandler
           }),
-          createVNode(_sfc_main$n, {
+          createVNode(_sfc_main$o, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -5828,136 +6252,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = ["onClick", "onDragstart"];
-const _hoisted_2$8 = ["title"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorComponentListPanel"
-  },
-  __name: "ComponentListPanel",
-  setup(__props) {
-    const searchText = ref("");
-    const filterTextChangeHandler = (v) => {
-      searchText.value = v;
-    };
-    const services = inject("services");
-    const stageOptions = inject("stageOptions");
-    const stage = computed(() => services?.editorService.get("stage"));
-    const list = computed(
-      () => services?.componentListService.getList().map((group) => ({
-        ...group,
-        items: group.items.filter((item) => item.text.includes(searchText.value))
-      }))
-    );
-    const collapseValue = 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) {
-        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 openBlock(), createBlock(unref(TMagicScrollbar), null, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "component-list-panel-header"),
-          createVNode(unref(TMagicCollapse), {
-            class: "ui-component-panel",
-            "model-value": collapseValue.value
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
-                    key: index,
-                    name: `${index}`
-                  }, {
-                    title: withCtx(() => [
-                      createVNode(_sfc_main$K, { icon: unref(Grid) }, null, 8, ["icon"]),
-                      createTextVNode(toDisplayString(group.title), 1)
-                    ]),
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
-                        return openBlock(), createElementBlock("div", {
-                          class: "component-item",
-                          draggable: "true",
-                          key: item.type,
-                          onClick: ($event) => appendComponent(item),
-                          onDragstart: ($event) => dragstartHandler(item, $event),
-                          onDragend: dragendHandler,
-                          onDrag: dragHandler
-                        }, [
-                          renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$K, {
-                              title: item.text,
-                              icon: item.icon
-                            }, null, 8, ["title", "icon"]),
-                            createElementVNode("span", {
-                              title: item.text
-                            }, toDisplayString(item.text), 9, _hoisted_2$8)
-                          ])
-                        ], 40, _hoisted_1$c);
-                      }), 128))
-                    ]),
-                    _: 2
-                  }, 1032, ["name"])) : createCommentVNode("", true)
-                ], 64);
-              }), 256))
-            ]),
-            _: 3
-          }, 8, ["model-value"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -6034,11 +6329,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
     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) {
@@ -6087,7 +6385,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$v, {
+                return openBlock(), createBlock(_sfc_main$w, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -6130,26 +6428,26 @@ const _hoisted_1$b = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$9 = /* @__PURE__ */ 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__ */ createElementVNode("path", {
+const _hoisted_3$5 = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$4);
+      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$5);
     };
   }
 });
@@ -6229,7 +6527,7 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -6292,7 +6590,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "全部折叠",
-        icon: _sfc_main$i,
+        icon: _sfc_main$k,
         display: () => isPage(node.value),
         handler: () => {
           emit("collapse-all");
@@ -6318,7 +6616,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$j, {
+      return openBlock(), createBlock(_sfc_main$l, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -6328,9 +6626,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "layer-node-tool" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "LayerNode",
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "LayerNodeTool",
   props: {
     data: {}
   },
@@ -6347,342 +6644,673 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      const _component_el_icon = resolveComponent("el-icon");
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", null, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
-        createElementVNode("div", _hoisted_1$a, [
-          _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            _ctx.data.visible === false ? (openBlock(), createBlock(_component_el_icon, {
-              key: 0,
-              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
-              title: "点击显示"
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(Hide))
-              ]),
-              _: 1
-            })) : (openBlock(), createBlock(_component_el_icon, {
-              key: 1,
-              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
-              class: "node-lock",
-              title: "点击隐藏"
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(View))
-              ]),
-              _: 1
-            }))
-          ], 64)) : createCommentVNode("", true)
-        ])
-      ], 64);
+      return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$M, {
+          key: 0,
+          icon: unref(Hide),
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
+          title: "点击显示"
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$M, {
+          key: 1,
+          icon: unref(View),
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
+          class: "node-lock",
+          title: "点击隐藏"
+        }, null, 8, ["icon"]))
+      ], 64)) : createCommentVNode("", true);
     };
   }
 });
 
-const _hoisted_1$9 = ["id", "onMouseenter"];
-const throttleTime = 150;
-const _sfc_main$f = /* @__PURE__ */ 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) => {
+      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";
+      addClassName(labelEl, globalThis.document, "drag-before");
+      removeClassName(labelEl, "drag-after", "drag-inner");
+    } else if (distance > targetHeight * 2 / 3) {
+      dragState.dropType = "after";
+      addClassName(labelEl, globalThis.document, "drag-after");
+      removeClassName(labelEl, "drag-before", "drag-inner");
+    } else if (isContainer) {
+      dragState.dropType = "inner";
+      addClassName(labelEl, globalThis.document, "drag-inner");
+      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];
+    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;
+  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: 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__ */ 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 = inject("services");
+    const nodeStatusMap = inject("nodeStatusMap");
     const editorService = services?.editorService;
-    const keybindingService = services?.keybindingService;
-    const tree = ref();
-    const menu = ref();
-    const checkedKeys = ref([]);
-    const isCtrlKeyDown = ref(false);
-    const expandedKeys = ref([]);
-    const currentNodeKey = ref();
-    const clicked = ref(false);
-    const treeProps = {
-      children: "items",
-      label: "name",
-      value: "id",
-      disabled: (data) => Boolean(data.items?.length),
-      class: (data) => {
-        if (clicked.value || isPage(data))
-          return "";
-        if (data.id === highlightNode?.value?.id && !checkedKeys.value.includes(data.id)) {
-          return "cus-tree-node-hover";
-        }
+    const uiService = services?.uiService;
+    const nodeStatus = computed(
+      () => nodeStatusMap?.value?.get(props.data.id) || {
+        selected: false,
+        expand: false,
+        visible: false
       }
+    );
+    const expanded = computed(() => nodeStatus.value.expand);
+    const selected = computed(() => nodeStatus.value.selected);
+    const visible = computed(() => nodeStatus.value.visible);
+    const hasChilren = computed(() => props.data.items?.length > 0);
+    const nodeEl = 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
+        });
+      }
+      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 = computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
-    const nodes = computed(() => editorService?.get("nodes") || []);
-    const page = computed(() => editorService?.get("page"));
-    const values = computed(() => page.value ? [page.value] : []);
-    const highlightNode = 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 !== NodeType.PAGE && data.type === NodeType.PAGE)
-        return false;
-      if (ingType === NodeType.PAGE && data.type !== 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 = 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 (_ctx, _cache) => {
+      const _component_LayerNode = resolveComponent("LayerNode", true);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: "magic-editor-layer-node",
+        ref_key: "nodeEl",
+        ref: nodeEl,
+        draggable: !unref(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) => unref(handleDragStart) && unref(handleDragStart)(...args)),
+        onDragleave: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(handleDragLeave) && unref(handleDragLeave)(...args)),
+        onDragend: _cache[3] || (_cache[3] = ($event) => unref(handleDragEnd)($event, _ctx.data))
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["layer-node", { selected: selected.value, expanded: expanded.value }]),
+          style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
+          onContextmenu: contextmenuHandler,
+          onMouseenter: _cache[0] || (_cache[0] = ($event) => unref(highlightHandler)())
+        }, [
+          createVNode(_sfc_main$M, {
+            class: "expand-icon",
+            style: normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
+            icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
+            onClick: expandHandler
+          }, null, 8, ["style", "icon"]),
+          createElementVNode("div", {
+            class: "layer-node-content",
+            onClick: nodeClickHandler
+          }, [
+            renderSlot(_ctx.$slots, "layer-node-content", { data: _ctx.data }, () => [
+              createElementVNode("div", _hoisted_2$8, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+              createElementVNode("div", _hoisted_3$4, [
+                createVNode(_sfc_main$i, { data: _ctx.data }, null, 8, ["data"])
+              ])
+            ])
+          ])
+        ], 38),
+        hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
+            return openBlock(), 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": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+              ]),
+              _: 2
+            }, 1032, ["data", "parent", "indent", "filter-text", "is-ctrl-key-down"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 40, _hoisted_1$a)), [
+        [vShow, visible.value]
+      ]);
+    };
+  }
+});
+
+const useKeybinding = (services) => {
+  const keybindingService = services?.keybindingService;
+  const isCtrlKeyDown = 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"]]
+    }
+  ]);
+  onMounted(() => {
+    globalThis.addEventListener("blur", windowBlurHandler);
+  });
+  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 = computed(() => services?.editorService.get("nodes") || []);
+  const nodeStatusMaps = ref(/* @__PURE__ */ new Map());
+  const nodeStatusMap = computed(
+    () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
+  );
+  watch(
+    () => page.value?.id,
+    (pageId) => {
+      if (!pageId || nodeStatusMaps.value.has(pageId)) {
         return;
       }
-      expandedKeys.value = union(
-        expandedKeys.value,
-        getNodePath(data.id, [page.value]).map((node) => node.id)
-      );
-    };
-    const filterNode = (value, data) => {
-      if (!value) {
-        return true;
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(services, pageId));
+    },
+    {
+      immediate: true
+    }
+  );
+  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) {
+          getNodePath(id, page.value?.items).forEach((node) => {
+            updateStatus(nodeStatusMap.value, node.id, {
+              expand: true
+            });
+          });
+        }
       }
-      let name = "";
-      if (data.name) {
-        name = data.name;
-      } else if (data.items) {
-        name = "container";
+    },
+    {
+      immediate: true
+    }
+  );
+  services?.editorService.on("add", (newNodes) => {
+    newNodes.forEach((node) => {
+      nodeStatusMap.value?.set(node.id, {
+        visible: true,
+        expand: Array.isArray(node.items),
+        selected: true
+      });
+    });
+  });
+  services?.editorService.on("remove", (nodes2) => {
+    nodes2.forEach((node) => {
+      nodeStatusMap.value?.delete(node.id);
+    });
+  });
+  return {
+    nodeStatusMaps,
+    nodeStatusMap
+  };
+};
+
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorLayerPanel"
+  },
+  __name: "LayerPanel",
+  props: {
+    layerContentMenu: {}
+  },
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const page = computed(() => editorService?.get("page"));
+    const root = computed(() => editorService?.get("root"));
+    const { nodeStatusMap } = useNodeStatus(services, page);
+    const { isCtrlKeyDown } = useKeybinding(services);
+    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;
       }
-      return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
     };
-    const filterTextChangeHandler = (val) => {
-      tree.value?.filter(val);
-    };
-    watch(nodes, (nodes2) => {
-      const ids = nodes2?.map((node) => node.id) || [];
-      const idsLength = ids.length;
-      const checkedKeysLength = checkedKeys.value.length;
-      if (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 = union(expandedKeys.value, ids);
-      }
-      [currentNodeKey.value] = ids;
-      setTimeout(() => {
-        tree.value?.setCurrentKey(currentNodeKey.value);
+    const menu = ref();
+    const contextmenu = (event) => {
+      event.preventDefault();
+      menu.value?.show(event);
+    };
+    const { handleDragOver } = useDrag(services);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "layer-panel-header"),
+          createVNode(_sfc_main$t, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          createElementVNode("div", {
+            class: "magic-editor-layer-tree",
+            tabindex: "-1",
+            onDragover: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => unref(handleDragOver) && unref(handleDragOver)(...args))
+          }, [
+            page.value && root.value ? (openBlock(), createBlock(_sfc_main$h, {
+              key: 0,
+              data: page.value,
+              "filter-text": unref(filterText),
+              "is-ctrl-key-down": unref(isCtrlKeyDown),
+              onNodeContextmenu: contextmenu
+            }, {
+              "layer-node-content": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+              ]),
+              _: 3
+            }, 8, ["data", "filter-text", "is-ctrl-key-down"])) : createCommentVNode("", true)
+          ], 32),
+          (openBlock(), createBlock(Teleport, { to: "body" }, [
+            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__ */ defineComponent({
+  ...{
+    name: "MEditorComponentListPanel"
+  },
+  __name: "ComponentListPanel",
+  setup(__props) {
+    const searchText = ref("");
+    const filterTextChangeHandler = (v) => {
+      searchText.value = v;
+    };
+    const services = inject("services");
+    const stageOptions = inject("stageOptions");
+    const stage = computed(() => services?.editorService.get("stage"));
+    const list = computed(
+      () => services?.componentListService.getList().map((group) => ({
+        ...group,
+        items: group.items.filter((item) => item.text.includes(searchText.value))
+      }))
+    );
+    const collapseValue = 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
       });
-    });
-    watch(isMultiSelect, (isMultiSelect2) => {
-      if (!isMultiSelect2) {
-        currentNodeKey.value = editorService?.get("node")?.id;
-        tree.value?.setCurrentKey(currentNodeKey.value);
-      }
-    });
-    const editorServiceRemoveHandler = () => {
-      setTimeout(() => {
-        tree.value?.getNode(editorService?.get("node")?.id)?.updateChildren();
-      }, 0);
     };
-    const windowBlurHandler = () => {
-      isCtrlKeyDown.value = false;
-    };
-    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"]]
-      }
-    ]);
-    watch(tree, () => {
-      if (tree.value?.$el) {
-        keybindingService?.registeEl("layer-panel", tree.value.$el);
-        tree.value.$el.addEventListener("blur", windowBlurHandler);
-      } else {
-        keybindingService?.unregisteEl("layer-panel");
-      }
-    });
-    onMounted(() => {
-      editorService?.on("remove", editorServiceRemoveHandler);
-      globalThis.addEventListener("blur", windowBlurHandler);
-    });
-    onBeforeUnmount(() => {
-      tree.value?.$el.removeEventListener("blur", windowBlurHandler);
-    });
-    onUnmounted(() => {
-      editorService?.off("remove", editorServiceRemoveHandler);
-      globalThis.removeEventListener("blur", windowBlurHandler);
-    });
-    const highlightHandler = 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) {
+        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 openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), null, {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
-          values.value.length ? (openBlock(), createBlock(unref(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
+          renderSlot(_ctx.$slots, "component-list-panel-header"),
+          createVNode(unref(TMagicCollapse), {
+            class: "ui-component-panel",
+            "model-value": collapseValue.value
           }, {
-            default: withCtx(({ node, data }) => [
-              createElementVNode("div", {
-                class: "cus-tree-node",
-                id: data.id,
-                onMouseenter: ($event) => unref(highlightHandler)(data)
-              }, [
-                renderSlot(_ctx.$slots, "layer-node-content", {
-                  node,
-                  data
-                }, () => [
-                  createVNode(_sfc_main$g, { data }, null, 8, ["data"])
-                ])
-              ], 40, _hoisted_1$9)
+            default: withCtx(() => [
+              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
+                    key: index,
+                    name: `${index}`
+                  }, {
+                    title: withCtx(() => [
+                      createVNode(_sfc_main$M, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createTextVNode(toDisplayString(group.title), 1)
+                    ]),
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+                        return openBlock(), createElementBlock("div", {
+                          class: "component-item",
+                          draggable: "true",
+                          key: item.type,
+                          onClick: ($event) => appendComponent(item),
+                          onDragstart: ($event) => dragstartHandler(item, $event),
+                          onDragend: dragendHandler,
+                          onDrag: dragHandler
+                        }, [
+                          renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
+                            createVNode(_sfc_main$M, {
+                              title: item.text,
+                              icon: item.icon
+                            }, null, 8, ["title", "icon"]),
+                            createElementVNode("span", {
+                              title: item.text
+                            }, toDisplayString(item.text), 9, _hoisted_2$7)
+                          ])
+                        ], 40, _hoisted_1$9);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["name"])) : createCommentVNode("", true)
+                ], 64);
+              }), 256))
             ]),
             _: 3
-          }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : createCommentVNode("", true),
-          (openBlock(), createBlock(Teleport, { to: "body" }, [
-            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
       });
@@ -6719,7 +7347,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$k,
+          component: _sfc_main$f,
           slots: {}
         },
         layer: {
@@ -6730,7 +7358,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           props: {
             layerContentMenu: props.layerContentMenu
           },
-          component: _sfc_main$f,
+          component: _sfc_main$g,
           slots: {}
         },
         "code-block": {
@@ -6738,7 +7366,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$o,
+          component: _sfc_main$p,
           slots: {}
         },
         "data-source": {
@@ -6746,7 +7374,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$l,
+          component: _sfc_main$m,
           slots: {}
         }
       };
@@ -6771,7 +7399,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               key: config.$key ?? index,
               onClick: ($event) => activeTabName.value = config.text || `${index}`
             }, [
-              config.icon ? (openBlock(), createBlock(_sfc_main$K, {
+              config.icon ? (openBlock(), createBlock(_sfc_main$M, {
                 key: 0,
                 icon: config.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -6832,16 +7460,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               } : void 0,
               config.$key === "layer" || config.slots?.layerNodeContent ? {
                 name: "layer-node-content",
-                fn: withCtx(({ data: nodeData, node }) => [
+                fn: withCtx(({ data: nodeData }) => [
                   config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
                     key: 0,
-                    data: nodeData,
-                    node
+                    data: nodeData
                   }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
                     key: 1,
-                    data: nodeData,
-                    node
-                  }, null, 8, ["data", "node"])) : createCommentVNode("", true)
+                    data: nodeData
+                  }, null, 8, ["data"])) : createCommentVNode("", true)
                 ]),
                 key: "5"
               } : void 0
@@ -7471,7 +8097,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$K, {
+            createVNode(_sfc_main$M, {
               style: { "margin-left": "10px", "cursor": "pointer" },
               icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
               onClick: pinHandler
@@ -7487,7 +8113,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onClick: closeHandler
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$K, { icon: unref(Close) }, null, 8, ["icon"])
+              createVNode(_sfc_main$M, { icon: unref(Close) }, null, 8, ["icon"])
             ]),
             _: 1
           })
@@ -7545,7 +8171,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             return;
           }
           timeout = globalThis.setTimeout(() => {
-            const els = stage2?.renderer.getElementsFromPoint(event);
+            const els = stage2.renderer.getElementsFromPoint(event) || [];
             const nodes = getNodes(
               els.map((el) => el.id),
               page.value?.items
@@ -7614,7 +8240,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       menu.value?.hide();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$j, {
+      return openBlock(), createBlock(_sfc_main$l, {
         ref_key: "menu",
         ref: menu,
         class: "magic-editor-node-list-menu",
@@ -7800,7 +8426,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$j, {
+      return openBlock(), createBlock(_sfc_main$l, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -7895,17 +8521,26 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       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}`);
@@ -7913,18 +8548,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       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";
@@ -7938,14 +8566,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             top = top - 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) => {
@@ -8131,14 +8759,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$M, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$K, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$M, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -8154,7 +8782,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$K, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$M, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -8226,7 +8854,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$v, {
+                      createVNode(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -8234,7 +8862,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$v, {
+                      createVNode(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -9075,119 +9703,23 @@ const keybindingConfig = [
   }
 ];
 
-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: CONTAINER_HIGHLIGHT_CLASS_NAME
-  },
-  containerHighlightDuration: {
-    type: Number,
-    default: 800
-  },
-  containerHighlightType: {
-    type: String,
-    default: 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: CONTAINER_HIGHLIGHT_CLASS_NAME,
+  containerHighlightDuration: 800,
+  containerHighlightType: ContainerHighlightType.DEFAULT,
+  codeOptions: () => ({})
 };
 
 const createCodeBlockTarget = (id, codeBlock) => new Target({
@@ -9208,20 +9740,26 @@ const createCodeBlockTarget = (id, codeBlock) => new Target({
 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(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
+    if (prefixIndex === -1) {
+      return false;
+    }
+    const dsId = prefixId.substring(prefixIndex + 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,
@@ -9248,7 +9786,7 @@ const initServiceState = (props, {
   watch(
     () => props.modelValue,
     (modelValue) => {
-      editorService.set("root", modelValue);
+      editorService.set("root", modelValue || null);
     },
     {
       immediate: true
@@ -9256,28 +9794,28 @@ const initServiceState = (props, {
   );
   watch(
     () => props.componentGroupList,
-    (componentGroupList) => componentListService.setList(componentGroupList),
+    (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
     {
       immediate: true
     }
   );
   watch(
     () => props.datasourceList,
-    (datasourceList) => dataSourceService.set("datasourceTypeList", datasourceList),
+    (datasourceList) => datasourceList && dataSourceService.set("datasourceTypeList", datasourceList),
     {
       immediate: true
     }
   );
   watch(
     () => props.propsConfigs,
-    (configs) => propsService.setPropsConfigs(configs),
+    (configs) => configs && propsService.setPropsConfigs(configs),
     {
       immediate: true
     }
   );
   watch(
     () => props.propsValues,
-    (values) => propsService.setPropsValues(values),
+    (values) => values && propsService.setPropsValues(values),
     {
       immediate: true
     }
@@ -9287,7 +9825,7 @@ const initServiceState = (props, {
     (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;
       });
@@ -9301,7 +9839,7 @@ const initServiceState = (props, {
   watch(
     () => props.datasourceConfigs,
     (configs) => {
-      Object.entries(configs).forEach(([key, value]) => {
+      configs && Object.entries(configs).forEach(([key, value]) => {
         dataSourceService.setFormConfig(key, value);
       });
     },
@@ -9312,7 +9850,7 @@ const initServiceState = (props, {
   watch(
     () => props.datasourceValues,
     (values) => {
-      Object.entries(values).forEach(([key, value]) => {
+      values && Object.entries(values).forEach(([key, value]) => {
         dataSourceService.setFormValue(key, value);
       });
     },
@@ -9320,6 +9858,26 @@ const initServiceState = (props, {
       immediate: true
     }
   );
+  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
+    }
+  );
   watch(
     () => props.defaultSelected,
     (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
@@ -9441,6 +9999,8 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     if (toRaw(value) !== toRaw(preValue)) {
       emit("update:modelValue", value);
     }
+    if (!value)
+      return;
     value.codeBlocks = value.codeBlocks || {};
     value.dataSources = value.dataSources || [];
     codeBlockService.setCodeDsl(value.codeBlocks);
@@ -9523,18 +10083,44 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   });
 };
 
-const _sfc_main = 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__ */ defineComponent({
+  ...{
+    name: "MEditor"
+  },
+  __name: "Editor",
+  props: 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,
@@ -9570,119 +10156,101 @@ const _sfc_main = defineComponent({
         disabledDragStart: props.disabledDragStart
       })
     );
-    return services;
+    __expose(services);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$x, null, {
+        header: withCtx(() => [
+          renderSlot(_ctx.$slots, "header")
+        ]),
+        nav: withCtx(() => [
+          renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
+            createVNode(_sfc_main$v, { data: _ctx.menu }, null, 8, ["data"])
+          ])
+        ]),
+        "content-before": withCtx(() => [
+          renderSlot(_ctx.$slots, "content-before")
+        ]),
+        "src-code": withCtx(() => [
+          renderSlot(_ctx.$slots, "src-code", { editorService: unref(editorService) })
+        ]),
+        sidebar: withCtx(() => [
+          renderSlot(_ctx.$slots, "sidebar", { editorService: unref(editorService) }, () => [
+            createVNode(_sfc_main$e, {
+              data: _ctx.sidebar,
+              "layer-content-menu": _ctx.layerContentMenu
+            }, {
+              "layer-panel-header": withCtx(() => [
+                renderSlot(_ctx.$slots, "layer-panel-header")
+              ]),
+              "layer-node-content": withCtx(({ data }) => [
+                renderSlot(_ctx.$slots, "layer-node-content", { data })
+              ]),
+              "component-list-panel-header": withCtx(() => [
+                renderSlot(_ctx.$slots, "component-list-panel-header")
+              ]),
+              "component-list-item": withCtx(({ component }) => [
+                renderSlot(_ctx.$slots, "component-list-item", { component })
+              ]),
+              "code-block-panel-header": withCtx(() => [
+                renderSlot(_ctx.$slots, "code-block-panel-header")
+              ]),
+              "code-block-panel-tool": withCtx(({ id, data }) => [
+                renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                  id,
+                  data
+                })
+              ]),
+              _: 3
+            }, 8, ["data", "layer-content-menu"])
+          ])
+        ]),
+        workspace: withCtx(() => [
+          renderSlot(_ctx.$slots, "workspace", { editorService: unref(editorService) }, () => [
+            createVNode(_sfc_main$1, { "stage-content-menu": _ctx.stageContentMenu }, {
+              stage: withCtx(() => [
+                renderSlot(_ctx.$slots, "stage")
+              ]),
+              "workspace-content": withCtx(() => [
+                renderSlot(_ctx.$slots, "workspace-content", { editorService: unref(editorService) })
+              ]),
+              "page-bar-title": withCtx(({ page }) => [
+                renderSlot(_ctx.$slots, "page-bar-title", { page })
+              ]),
+              "page-bar-popover": withCtx(({ page }) => [
+                renderSlot(_ctx.$slots, "page-bar-popover", { page })
+              ]),
+              _: 3
+            }, 8, ["stage-content-menu"])
+          ])
+        ]),
+        "props-panel": withCtx(() => [
+          renderSlot(_ctx.$slots, "props-panel", {}, () => [
+            createVNode(_sfc_main$u, {
+              "extend-state": _ctx.extendFormState,
+              onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
+            }, {
+              "props-panel-header": withCtx(() => [
+                renderSlot(_ctx.$slots, "props-panel-header")
+              ]),
+              _: 3
+            }, 8, ["extend-state"])
+          ])
+        ]),
+        empty: withCtx(() => [
+          renderSlot(_ctx.$slots, "empty", { editorService: unref(editorService) })
+        ]),
+        "content-after": withCtx(() => [
+          renderSlot(_ctx.$slots, "content-after")
+        ]),
+        footer: withCtx(() => [
+          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 = resolveComponent("TMagicNavMenu");
-  const _component_Sidebar = resolveComponent("Sidebar");
-  const _component_Workspace = resolveComponent("Workspace");
-  const _component_PropsPanel = resolveComponent("PropsPanel");
-  const _component_Framework = resolveComponent("Framework");
-  return openBlock(), createBlock(_component_Framework, null, {
-    header: withCtx(() => [
-      renderSlot(_ctx.$slots, "header")
-    ]),
-    nav: withCtx(() => [
-      renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
-      ])
-    ]),
-    "content-before": withCtx(() => [
-      renderSlot(_ctx.$slots, "content-before")
-    ]),
-    "src-code": withCtx(() => [
-      renderSlot(_ctx.$slots, "src-code", { editorService: _ctx.editorService })
-    ]),
-    sidebar: withCtx(() => [
-      renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_Sidebar, {
-          data: _ctx.sidebar,
-          "layer-content-menu": _ctx.layerContentMenu
-        }, {
-          "layer-panel-header": withCtx(() => [
-            renderSlot(_ctx.$slots, "layer-panel-header")
-          ]),
-          "layer-node-content": withCtx(({ node, data }) => [
-            renderSlot(_ctx.$slots, "layer-node-content", {
-              data,
-              node
-            })
-          ]),
-          "component-list-panel-header": withCtx(() => [
-            renderSlot(_ctx.$slots, "component-list-panel-header")
-          ]),
-          "component-list-item": withCtx(({ component }) => [
-            renderSlot(_ctx.$slots, "component-list-item", { component })
-          ]),
-          "code-block-panel-header": withCtx(() => [
-            renderSlot(_ctx.$slots, "code-block-panel-header")
-          ]),
-          "code-block-panel-tool": withCtx(({ id, data }) => [
-            renderSlot(_ctx.$slots, "code-block-panel-tool", {
-              id,
-              data
-            })
-          ]),
-          _: 3
-        }, 8, ["data", "layer-content-menu"])
-      ])
-    ]),
-    workspace: withCtx(() => [
-      renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
-          stage: withCtx(() => [
-            renderSlot(_ctx.$slots, "stage")
-          ]),
-          "workspace-content": withCtx(() => [
-            renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
-          ]),
-          "page-bar-title": withCtx(({ page }) => [
-            renderSlot(_ctx.$slots, "page-bar-title", { page })
-          ]),
-          "page-bar-popover": withCtx(({ page }) => [
-            renderSlot(_ctx.$slots, "page-bar-popover", { page })
-          ]),
-          _: 3
-        }, 8, ["stage-content-menu"])
-      ])
-    ]),
-    "props-panel": withCtx(() => [
-      renderSlot(_ctx.$slots, "props-panel", {}, () => [
-        createVNode(_component_PropsPanel, {
-          "extend-state": _ctx.extendFormState,
-          onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
-        }, {
-          "props-panel-header": withCtx(() => [
-            renderSlot(_ctx.$slots, "props-panel-header")
-          ]),
-          _: 3
-        }, 8, ["extend-state"])
-      ])
-    ]),
-    empty: withCtx(() => [
-      renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
-    ]),
-    "content-after": withCtx(() => [
-      renderSlot(_ctx.$slots, "content-after")
-    ]),
-    footer: withCtx(() => [
-      renderSlot(_ctx.$slots, "footer")
-    ]),
-    _: 3
-  });
-}
-const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-
 const index$1 = '';
 
 const defaultInstallOpt = {
@@ -9694,23 +10262,24 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$p as CodeBlockList, _sfc_main$o as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$N as CodeSelect, _sfc_main$J as CodeSelectCol, ColumnLayout, _sfc_main$k as ComponentListPanel, _sfc_main$j as ContentMenu, _sfc_main$H as DataSourceFieldSelect, _sfc_main$I as DataSourceFields, _sfc_main$G as DataSourceInput, _sfc_main$E as DataSourceMethodSelect, _sfc_main$F as DataSourceMethods, _sfc_main$D as DataSourceSelect, DepTargetType, _sfc_main$C as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$K as Icon, KeyBindingCommand, _sfc_main$B as KeyValue, Keys, LayerOffset, _sfc_main$f as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$t as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$Q as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$v as ToolButton, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, styleTabConfig, uiService, useCodeBlockEdit, useDataSourceMethod, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$O as CodeBlockEditor, _sfc_main$q as CodeBlockList, _sfc_main$p as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$P as CodeSelect, _sfc_main$L as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$l as ContentMenu, _sfc_main$J as DataSourceFieldSelect, _sfc_main$K as DataSourceFields, _sfc_main$I as DataSourceInput, _sfc_main$G as DataSourceMethodSelect, _sfc_main$H as DataSourceMethods, _sfc_main$F as DataSourceMocks, _sfc_main$E as DataSourceSelect, DepTargetType, DragType, _sfc_main$D as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$M as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$u as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$S as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$w as ToolButton, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map