@tmagic/editor 1.3.0-beta.5 → 1.3.0-beta.7

package/dist/tmagic-editor.js

@@ -1,5 +1,5 @@
-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, 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 { 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, provide, Transition, toHandlers, mergeDefaults } from 'vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, ArrowRight, 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, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
@@ -7,7 +7,7 @@ import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagi
 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 { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes, isObject as isObject$1 } from '@tmagic/utils';
 import Gesto from 'gesto';
 import StageCore, { GuidesType, StageDragStatus, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
@@ -20,16 +20,16 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _hoisted_1$w = {
+const _hoisted_1$x = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
   __name: "CodeEditor",
   props: {
-    initValues: {},
+    initValues: { default: "" },
     modifiedValues: {},
     type: {},
     language: { default: "javascript" },
@@ -180,7 +180,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -208,7 +208,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -232,7 +232,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$S, {
+      return openBlock(), createBlock(_sfc_main$T, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -247,7 +247,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -326,7 +326,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -398,11 +398,11 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$v = { style: { "display": "flex", "margin-bottom": "10px" } };
+const _hoisted_1$w = { style: { "display": "flex", "margin-bottom": "10px" } };
 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({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -644,7 +644,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$v, [
+            createElementVNode("div", _hoisted_1$w, [
               createElementVNode("div", _hoisted_2$p, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
@@ -668,7 +668,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$S, {
+            difVisible.value ? (openBlock(), createBlock(_sfc_main$T, {
               key: 0,
               ref_key: "magicVsEditor",
               ref: magicVsEditor,
@@ -777,47 +777,72 @@ const fillConfig$1 = (config) => [
   ...BaseFormConfig(),
   ...config,
   {
-    type: "panel",
-    title: "数据定义",
+    type: "tab",
     items: [
       {
-        name: "fields",
-        type: "data-source-fields",
-        defaultValue: () => []
-      }
-    ]
-  },
-  {
-    type: "panel",
-    title: "方法定义",
-    items: [
+        title: "数据定义",
+        items: [
+          {
+            name: "fields",
+            type: "data-source-fields",
+            defaultValue: () => []
+          }
+        ]
+      },
       {
-        name: "methods",
-        type: "data-source-methods",
-        defaultValue: () => []
-      }
-    ]
-  },
-  {
-    type: "panel",
-    title: "事件配置",
-    display: false,
-    items: [
+        title: "方法定义",
+        items: [
+          {
+            name: "methods",
+            type: "data-source-methods",
+            defaultValue: () => []
+          }
+        ]
+      },
       {
-        name: "events",
-        src: "datasource",
-        type: "event-select"
-      }
-    ]
-  },
-  {
-    type: "panel",
-    title: "mock数据",
-    items: [
+        title: "事件配置",
+        display: false,
+        items: [
+          {
+            name: "events",
+            src: "datasource",
+            type: "event-select"
+          }
+        ]
+      },
+      {
+        title: "mock数据",
+        items: [
+          {
+            name: "mocks",
+            type: "data-source-mocks",
+            defaultValue: () => []
+          }
+        ]
+      },
       {
-        name: "mocks",
-        type: "data-source-mocks",
-        defaultValue: () => []
+        title: "请求参数裁剪",
+        display: (formState, { model }) => model.type === "http",
+        items: [
+          {
+            name: "beforeRequest",
+            type: "vs-code",
+            parse: true,
+            height: "600px"
+          }
+        ]
+      },
+      {
+        title: "响应数据裁剪",
+        display: (formState, { model }) => model.type === "http",
+        items: [
+          {
+            name: "afterResponse",
+            type: "vs-code",
+            parse: true,
+            height: "600px"
+          }
+        ]
       }
     ]
   }
@@ -832,6 +857,62 @@ const getFormConfig = (type, configs) => {
       return fillConfig$1(configs[type] || []);
   }
 };
+const getFormValue = (type, values) => {
+  if (type !== "http") {
+    return values;
+  }
+  return {
+    beforeRequest: `(options, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * options: HttpOptions
+   *
+   * interface HttpOptions {
+   *  // 请求链接
+   *  url: string;
+   *  // query参数
+   *  params?: Record<string, string>;
+   *  // body数据
+   *  data?: Record<string, any>;
+   *  // 请求头
+   *  headers?: Record<string, string>;
+   *  // 请求方法 GET/POST
+   *  method?: Method;
+   * }
+   *
+   * context：上下文对象
+   *
+   * interface Content {
+   *  app: AppCore;
+   *  dataSource: HttpDataSource;
+   * }
+   *
+   * return: HttpOptions
+   */
+
+  // 此处的返回值会作为这个接口的入参
+  return options;
+}`,
+    afterResponse: `(response, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
+
+    * context：上下文对象
+    *
+    * interface Content {
+    *  app: AppCore;
+    *  dataSource: HttpDataSource;
+    * }
+    *
+    */
+
+  // 此处的返回值会作为这个接口的返回值
+  return response;
+}`,
+    ...values
+  };
+};
 const getDisplayField = (dataSources, key) => {
   const displayState = [];
   const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
@@ -1017,7 +1098,7 @@ class DataSource extends BaseService {
     this.get("configs")[type] = config;
   }
   getFormValue(type = "base") {
-    return this.get("values")[type];
+    return getFormValue(type, this.get("values")[type]);
   }
   setFormValue(type, value) {
     this.get("values")[type] = value;
@@ -2874,7 +2955,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -2923,8 +3004,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$u = ["src"];
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = ["src"];
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -2948,7 +3029,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$u)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$v)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -3025,9 +3106,9 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const _hoisted_1$t = { class: "m-fields-code-select-col" };
+const _hoisted_1$u = { class: "m-fields-code-select-col" };
 const _hoisted_2$o = { class: "code-select-container" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -3099,7 +3180,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$u, [
         createElementVNode("div", _hoisted_2$o, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -3108,14 +3189,14 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$M, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
             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$N, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3123,7 +3204,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3136,9 +3217,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$s = { class: "m-editor-data-source-fields" };
+const _hoisted_1$t = { class: "m-editor-data-source-fields" };
 const _hoisted_2$n = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -3369,7 +3450,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
@@ -3426,7 +3507,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3480,10 +3561,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_1$s = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
 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({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -3672,10 +3753,10 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$M, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$r, [
+          createElementVNode("div", _hoisted_1$s, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$m, toDisplayString(item.value), 1)
           ])
@@ -3707,7 +3788,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$N, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -3790,9 +3871,9 @@ const useDataSourceMethod = () => {
   };
 };
 
-const _hoisted_1$q = { class: "m-editor-data-source-methods" };
+const _hoisted_1$r = { class: "m-editor-data-source-methods" };
 const _hoisted_2$l = { class: "m-editor-data-source-methods-footer" };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
   },
@@ -3861,7 +3942,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
@@ -3880,7 +3961,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3895,9 +3976,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { class: "m-fields-data-source-method-select" };
+const _hoisted_1$q = { class: "m-fields-data-source-method-select" };
 const _hoisted_2$k = { class: "data-source-method-select-container" };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
   },
@@ -3979,7 +4060,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
         createElementVNode("div", _hoisted_2$k, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -3987,14 +4068,14 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$M, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
             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$N, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -4003,7 +4084,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4016,9 +4097,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-editor-data-source-fields" };
+const _hoisted_1$p = { class: "m-editor-data-source-fields" };
 const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMocks"
   },
@@ -4104,7 +4185,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$S,
+        component: _sfc_main$T,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -4213,7 +4294,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
@@ -4249,7 +4330,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -4304,12 +4385,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-event-select" };
+const _hoisted_1$o = { class: "m-fields-event-select" };
 const _hoisted_2$i = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -4511,7 +4592,7 @@ const _sfc_main$D = /* @__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$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -4571,9 +4652,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { class: "m-fields-key-value" };
+const _hoisted_1$n = { 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({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -4616,9 +4697,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
     const deleteHandler = (index) => {
       records.value.splice(index, 1);
+      emit("change", getValue());
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -4671,12 +4753,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = {
+const _hoisted_1$m = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -4765,7 +4847,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$l, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$m, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -4862,7 +4944,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -4883,7 +4965,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -4995,7 +5077,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$A, { onChange: changeLeft })
+          createVNode(_sfc_main$B, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5004,7 +5086,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$A, { onChange: changeRight }),
+          createVNode(_sfc_main$B, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -5017,10 +5099,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-editor-empty-panel" };
+const _hoisted_1$l = { 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({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -5040,14 +5122,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createElementVNode("div", _hoisted_2$g, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$M, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$9
           ])
@@ -5061,7 +5143,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$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -5138,13 +5220,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$S, {
+          createVNode(_sfc_main$T, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$z, {
+        ]) : (openBlock(), createBlock(_sfc_main$A, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -5163,7 +5245,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$y)
+              createVNode(_sfc_main$z)
             ])
           ]),
           _: 2
@@ -5188,12 +5270,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = {
+const _hoisted_1$k = {
   key: 1,
   class: "menu-item-text"
 };
 const _hoisted_2$f = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -5272,7 +5354,7 @@ const _sfc_main$w = /* @__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$j, 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$k, 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",
@@ -5286,7 +5368,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$M, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5304,7 +5386,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$M, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5354,7 +5436,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -5516,7 +5598,7 @@ const _sfc_main$v = /* @__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$w, {
+              return openBlock(), createBlock(_sfc_main$x, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -5528,8 +5610,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { class: "m-editor-props-panel" };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = { class: "m-editor-props-panel" };
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -5582,7 +5664,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$j, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -5602,7 +5684,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -5641,7 +5723,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
 const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
@@ -5655,19 +5737,19 @@ const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
 const _hoisted_3$8 = [
   _hoisted_2$e
 ];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAppManageIcon"
   },
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_3$8);
+      return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_3$8);
     };
   }
 });
 
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
@@ -5677,25 +5759,25 @@ const _hoisted_2$d = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
 const _hoisted_4$6 = [
   _hoisted_2$d
 ];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$g, _hoisted_4$6);
+      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_4$6);
     };
   }
 });
 
-const _hoisted_1$f = ["id"];
+const _hoisted_1$g = ["id"];
 const _hoisted_2$c = { class: "list-item" };
 const _hoisted_3$7 = {
   key: 2,
   class: "right-tool"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -5797,11 +5879,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             class: "list-container"
           }, [
             createElementVNode("div", _hoisted_2$c, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$r, {
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$s, {
                 key: 0,
                 class: "codeIcon"
               })) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$s, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$t, {
                 key: 1,
                 class: "compIcon"
               })) : createCommentVNode("", true),
@@ -5815,7 +5897,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$M, {
+                    createVNode(_sfc_main$N, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editCode(data.id), ["stop"])
@@ -5830,7 +5912,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$M, {
+                    createVNode(_sfc_main$N, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5844,7 +5926,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 })
               ])) : createCommentVNode("", true)
             ])
-          ], 8, _hoisted_1$f)
+          ], 8, _hoisted_1$g)
         ]),
         _: 3
       }, 8, ["default-expanded-keys", "data"]);
@@ -5852,8 +5934,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = { class: "search-wrapper" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "search-wrapper" };
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -5873,8 +5955,8 @@ const _sfc_main$p = /* @__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$e, [
-              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$f, [
+              createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
@@ -5890,7 +5972,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "code-block-panel-search")
             ])
           ]),
-          createVNode(_sfc_main$q, {
+          createVNode(_sfc_main$r, {
             ref_key: "codeBlockList",
             ref: codeBlockList,
             "custom-error": _ctx.customError,
@@ -5905,7 +5987,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["custom-error", "onEdit", "onRemove"]),
-          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
+          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -5920,7 +6002,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -5974,13 +6056,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = ["id"];
+const _hoisted_1$e = ["id"];
 const _hoisted_2$b = { class: "list-item" };
 const _hoisted_3$6 = {
   key: 2,
   class: "right-tool"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -6076,12 +6158,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             class: "list-container"
           }, [
             createElementVNode("div", _hoisted_2$b, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$M, {
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$N, {
                 key: 0,
                 class: "codeIcon",
                 icon: unref(Coin)
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$M, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$N, {
                 key: 1,
                 class: "compIcon",
                 icon: unref(Aim)
@@ -6096,7 +6178,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$M, {
+                    createVNode(_sfc_main$N, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -6111,7 +6193,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$M, {
+                    createVNode(_sfc_main$N, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -6119,13 +6201,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 2
                 }, 1024)) : createCommentVNode("", true),
-                renderSlot(_ctx.$slots, "data-source-panel-tool", {
-                  id: data.id,
-                  data: data.codeBlockContent
-                })
+                renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
               ])) : createCommentVNode("", true)
             ])
-          ], 8, _hoisted_1$d)
+          ], 8, _hoisted_1$e)
         ]),
         _: 3
       }, 8, ["data"]);
@@ -6133,9 +6212,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = { class: "search-wrapper" };
+const _hoisted_1$d = { class: "search-wrapper" };
 const _hoisted_2$a = { class: "data-source-list-panel-add-menu" };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -6195,8 +6274,8 @@ const _sfc_main$m = /* @__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$c, [
-            createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+          createElementVNode("div", _hoisted_1$d, [
+            createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
             editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
               key: 0,
               placement: "right"
@@ -6215,7 +6294,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createElementVNode("div", _hoisted_2$a, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                    return openBlock(), createBlock(_sfc_main$w, {
+                    return openBlock(), createBlock(_sfc_main$x, {
                       data: {
                         type: "button",
                         text: item.text,
@@ -6231,11 +6310,16 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               _: 1
             })) : createCommentVNode("", true)
           ]),
-          createVNode(_sfc_main$n, {
+          createVNode(_sfc_main$o, {
             onEdit: editHandler,
             onRemove: removeHandler
+          }, {
+            "data-source-panel-tool": withCtx(({ data }) => [
+              renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+            ]),
+            _: 3
           }),
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$p, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -6244,13 +6328,187 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             onSubmit: submitDataSourceHandler
           }, null, 8, ["disabled", "values", "title"])
         ]),
-        _: 1
+        _: 3
       });
     };
   }
 });
 
+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 _hoisted_1$c = ["draggable", "data-node-id", "data-is-container"];
+const _hoisted_2$9 = { class: "tree-node-label" };
+const _hoisted_3$5 = { class: "tree-node-tool" };
+const _hoisted_4$5 = {
+  key: 0,
+  class: "m-editor-tree-node-children"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorTreeNode"
+  },
+  __name: "TreeNode",
+  props: {
+    data: {},
+    nodeStatusMap: {},
+    indent: { default: 0 }
+  },
+  emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const treeEmit = inject("treeEmit");
+    const nodeStatus = computed(
+      () => props.nodeStatusMap?.get(props.data.id) || {
+        selected: false,
+        expand: false,
+        visible: false,
+        draggable: false
+      }
+    );
+    const expanded = computed(() => nodeStatus.value.expand);
+    const selected = computed(() => nodeStatus.value.selected);
+    const visible = computed(() => nodeStatus.value.visible);
+    const draggable = computed(() => nodeStatus.value.draggable);
+    const hasChilren = computed(() => props.data.items && props.data.items.length > 0);
+    const handleDragStart = (event) => {
+      treeEmit?.("node-dragstart", event, props.data);
+    };
+    const handleDragLeave = (event) => {
+      treeEmit?.("node-dragleave", event, props.data);
+    };
+    const handleDragEnd = (event) => {
+      treeEmit?.("node-dragend", event, props.data);
+    };
+    const nodeContentmenuHandler = (event) => {
+      treeEmit?.("node-contextmenu", event, props.data);
+    };
+    const mouseenterHandler = (event) => {
+      treeEmit?.("node-mouseenter", event, props.data);
+    };
+    const expandHandler = () => {
+      updateStatus(props.nodeStatusMap, props.data.id, {
+        expand: !expanded.value
+      });
+    };
+    const nodeClickHandler = (event) => {
+      treeEmit?.("node-click", event, props.data);
+    };
+    return (_ctx, _cache) => {
+      const _component_TreeNode = resolveComponent("TreeNode", true);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: "m-editor-tree-node",
+        draggable: draggable.value,
+        "data-node-id": _ctx.data.id,
+        "data-is-container": Array.isArray(_ctx.data.items),
+        onDragstart: handleDragStart,
+        onDragleave: handleDragLeave,
+        onDragend: handleDragEnd
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
+          style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
+          onContextmenu: nodeContentmenuHandler,
+          onMouseenter: mouseenterHandler
+        }, [
+          createVNode(_sfc_main$N, {
+            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: "tree-node-content",
+            onClick: nodeClickHandler
+          }, [
+            renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
+              createElementVNode("div", _hoisted_2$9, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+              createElementVNode("div", _hoisted_3$5, [
+                renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
+              ])
+            ])
+          ])
+        ], 38),
+        hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
+            return openBlock(), createBlock(_component_TreeNode, {
+              key: item.id,
+              data: item,
+              "node-status-map": _ctx.nodeStatusMap,
+              indent: _ctx.indent + 11
+            }, {
+              "tree-node-content": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
+              ]),
+              "tree-node-tool": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
+              ]),
+              _: 2
+            }, 1032, ["data", "node-status-map", "indent"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 40, _hoisted_1$c)), [
+        [vShow, visible.value]
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$b = { key: 1 };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorTree"
+  },
+  __name: "Tree",
+  props: {
+    data: {},
+    nodeStatusMap: {},
+    indent: { default: 0 },
+    emptyText: { default: "暂无数据" }
+  },
+  emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
+  setup(__props, { emit }) {
+    provide("treeEmit", emit);
+    const handleDragOver = (event) => {
+      emit("node-dragover", event);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-tree",
+        onDragover: handleDragOver
+      }, [
+        _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
+          return openBlock(), createBlock(_sfc_main$m, {
+            key: item.id,
+            data: item,
+            indent: _ctx.indent,
+            "node-status-map": _ctx.nodeStatusMap
+          }, {
+            "tree-node-content": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
+            ]),
+            "tree-node-tool": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
+            ]),
+            _: 2
+          }, 1032, ["data", "indent", "node-status-map"]);
+        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$b, [
+          createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
+        ]))
+      ], 32);
+    };
+  }
+});
+
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -6383,7 +6641,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$w, {
+                return openBlock(), createBlock(_sfc_main$x, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -6418,7 +6676,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$b = {
+const _hoisted_1$a = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 16 16",
@@ -6426,26 +6684,26 @@ const _hoisted_1$b = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$8 = /* @__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$5 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_3$4 = /* @__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$5 = [
-  _hoisted_2$9,
-  _hoisted_3$5
+const _hoisted_4$4 = [
+  _hoisted_2$8,
+  _hoisted_3$4
 ];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$5);
+      return openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_4$4);
     };
   }
 });
@@ -6525,7 +6783,7 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -6588,7 +6846,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "全部折叠",
-        icon: _sfc_main$k,
+        icon: _sfc_main$j,
         display: () => isPage(node.value),
         handler: () => {
           emit("collapse-all");
@@ -6614,7 +6872,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$l, {
+      return openBlock(), createBlock(_sfc_main$k, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -6624,7 +6882,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "LayerNodeTool",
   props: {
     data: {}
@@ -6643,12 +6901,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$M, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$M, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -6660,6 +6918,75 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
+  const select = async (data) => {
+    if (!data.id) {
+      throw new Error("没有id");
+    }
+    if (isCtrlKeyDown.value) {
+      multiSelect(data);
+    } else {
+      await services?.editorService.select(data);
+      services?.editorService.get("stage")?.select(data.id);
+    }
+  };
+  const multiSelect = async (data) => {
+    const nodes = services?.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);
+    }
+    await services?.editorService.multiSelect(newNodes);
+    services?.editorService.get("stage")?.multiSelect(newNodes);
+  };
+  const throttleTime = 300;
+  const highlightHandler = throttle((event, data) => {
+    highlight(data);
+  }, throttleTime);
+  const highlight = (data) => {
+    services?.editorService?.highlight(data);
+    services?.editorService?.get("stage")?.highlight(data.id);
+  };
+  const nodeClickHandler = (event, data) => {
+    if (!nodeStatusMap?.value)
+      return;
+    if (services?.uiService.get("uiSelectMode")) {
+      document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
+      return;
+    }
+    if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
+      updateStatus(nodeStatusMap.value, data.id, {
+        expand: true
+      });
+    }
+    nextTick(() => {
+      select(data);
+    });
+  };
+  const menu = ref();
+  return {
+    menu,
+    nodeClickHandler,
+    nodeContentmenuHandler(event, data) {
+      event.preventDefault();
+      const nodes = services?.editorService.get("nodes") || [];
+      if (nodes.length < 2 || !nodes.includes(data)) {
+        nodeClickHandler(event, data);
+      }
+      menu.value?.show(event);
+    },
+    highlightHandler
+  };
+};
+
 const dragState = {
   dragOverNodeId: "",
   dropType: "",
@@ -6704,7 +7031,7 @@ const useDrag = (services) => {
     if (!event.target)
       return;
     const targetEl = getNodeEl(event.target);
-    if (!targetEl)
+    if (!targetEl?.draggable)
       return;
     const labelEl = targetEl.children[0];
     if (!labelEl)
@@ -6778,16 +7105,6 @@ const useDrag = (services) => {
   };
 };
 
-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) {
@@ -6832,179 +7149,6 @@ const useFilter = (nodeStatusMap, page) => {
   };
 };
 
-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: "MEditorLayerNode"
-  },
-  __name: "LayerNode",
-  props: {
-    data: {},
-    parent: {},
-    indent: { default: 0 },
-    filterText: { default: "" },
-    isCtrlKeyDown: { type: Boolean, default: false }
-  },
-  emits: ["node-contextmenu"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const services = inject("services");
-    const nodeStatusMap = inject("nodeStatusMap");
-    const editorService = services?.editorService;
-    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_MODE_EVENT_NAME, { 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();
-      const nodes = editorService?.get("nodes") || [];
-      if (nodes.length < 2 || !nodes.includes(props.data)) {
-        nodeClickHandler();
-      }
-      emit("node-contextmenu", event, props.data);
-    };
-    const nodeContentmenuHandler = (event, node) => {
-      emit("node-contextmenu", event, node);
-    };
-    const select = async (data) => {
-      if (!data.id) {
-        throw new Error("没有id");
-      }
-      if (props.isCtrlKeyDown) {
-        multiSelect(data);
-      } else {
-        await editorService?.select(data);
-        editorService?.get("stage")?.select(data.id);
-      }
-    };
-    const multiSelect = async (data) => {
-      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);
-      }
-      await editorService?.multiSelect(newNodes);
-      editorService?.get("stage")?.multiSelect(newNodes);
-    };
-    const highlightHandler = throttle(() => {
-      highlight();
-    }, throttleTime);
-    const highlight = () => {
-      editorService?.highlight(props.data);
-      editorService?.get("stage")?.highlight(props.data.id);
-    };
-    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]
-      ]);
-    };
-  }
-});
-
 var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
   KeyBindingContainerKey2["STAGE"] = "stage";
   KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
@@ -7156,7 +7300,7 @@ const useKeybinding = (services, contianer) => {
   watchEffect(() => {
     if (contianer.value) {
       globalThis.addEventListener("blur", windowBlurHandler);
-      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value);
+      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value.$el);
     } else {
       globalThis.removeEventListener("blur", windowBlurHandler);
       keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
@@ -7172,14 +7316,16 @@ const createPageNodeStatus = (services, pageId) => {
   map.set(pageId, {
     visible: true,
     expand: true,
-    selected: true
+    selected: true,
+    draggable: false
   });
   services?.editorService.getNodeById(pageId)?.items.forEach(
     (node) => traverseNode(node, (node2) => {
       map.set(node2.id, {
         visible: true,
         expand: false,
-        selected: false
+        selected: false,
+        draggable: true
       });
     })
   );
@@ -7229,7 +7375,8 @@ const useNodeStatus = (services, page) => {
         nodeStatusMap.value?.set(node2.id, {
           visible: true,
           expand: Array.isArray(node2.items),
-          selected: true
+          selected: true,
+          draggable: true
         });
       });
     });
@@ -7258,13 +7405,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
-    const layerTreeContainer = ref();
+    const tree = ref();
     const page = computed(() => editorService?.get("page"));
-    const root = computed(() => editorService?.get("root"));
     const { nodeStatusMap } = useNodeStatus(services, page);
-    const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer);
-    provide("nodeStatusMap", nodeStatusMap);
-    const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
+    const { isCtrlKeyDown } = useKeybinding(services, tree);
+    const { filterTextChangeHandler } = useFilter(nodeStatusMap, page);
     const collapseAllHandler = () => {
       if (!page.value || !nodeStatusMap.value)
         return;
@@ -7276,40 +7421,45 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         status.expand = false;
       }
     };
-    const menu = ref();
-    const contextmenu = (event) => {
-      event.preventDefault();
-      menu.value?.show(event);
-    };
-    const { handleDragOver } = useDrag(services);
+    const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
+    const {
+      menu,
+      nodeClickHandler,
+      nodeContentmenuHandler,
+      highlightHandler: mouseenterHandler
+    } = useClick(services, isCtrlKeyDown, nodeStatusMap);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-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",
-            ref_key: "layerTreeContainer",
-            ref: layerTreeContainer,
+          createVNode(_sfc_main$u, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
+            key: 0,
             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)
-          ], 544),
+            ref_key: "tree",
+            ref: tree,
+            data: [page.value],
+            "node-status-map": unref(nodeStatusMap),
+            onNodeDragover: unref(handleDragOver),
+            onNodeDragstart: unref(handleDragStart),
+            onNodeDragleave: unref(handleDragLeave),
+            onNodeDragend: unref(handleDragEnd),
+            onNodeContextmenu: unref(nodeContentmenuHandler),
+            onNodeMouseenter: unref(mouseenterHandler),
+            onNodeClick: unref(nodeClickHandler)
+          }, {
+            "tree-node-tool": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [
+                createVNode(_sfc_main$h, { data: nodeData }, null, 8, ["data"])
+              ])
+            ]),
+            "tree-node-content": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+            ]),
+            _: 3
+          }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$j, {
+            createVNode(_sfc_main$i, {
               ref_key: "menu",
               ref: menu,
               "layer-content-menu": _ctx.layerContentMenu,
@@ -7405,7 +7555,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$u, { 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), {
@@ -7413,7 +7563,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$M, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -7434,7 +7584,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                               content: item.desc
                             }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$M, {
+                                createVNode(_sfc_main$N, {
                                   icon: item.icon
                                 }, null, 8, ["icon"])
                               ]),
@@ -7509,7 +7659,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$p,
+          component: _sfc_main$q,
           slots: {}
         },
         "data-source": {
@@ -7517,7 +7667,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$m,
+          component: _sfc_main$n,
           slots: {}
         }
       };
@@ -7542,7 +7692,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               key: config.$key ?? index,
               onClick: ($event) => activeTabName.value = config.text || `${index}`
             }, [
-              config.icon ? (openBlock(), createBlock(_sfc_main$M, {
+              config.icon ? (openBlock(), createBlock(_sfc_main$N, {
                 key: 0,
                 icon: config.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7613,6 +7763,29 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["data"])) : createCommentVNode("", true)
                 ]),
                 key: "5"
+              } : void 0,
+              config.$key === "layer" || config.slots?.layerNodeTool ? {
+                name: "layer-node-tool",
+                fn: withCtx(({ data: nodeData }) => [
+                  config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
+                    key: 0,
+                    data: nodeData
+                  }) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+                    key: 1,
+                    data: nodeData
+                  }, null, 8, ["data"])) : createCommentVNode("", true)
+                ]),
+                key: "6"
+              } : void 0,
+              config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
+                name: "data-source-panel-tool",
+                fn: withCtx(({ data }) => [
+                  config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                    key: 0,
+                    data
+                  }) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("", true)
+                ]),
+                key: "7"
               } : void 0
             ]), 1040)) : createCommentVNode("", true)
           ])), [
@@ -8240,7 +8413,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$N, {
               style: { "margin-left": "10px", "cursor": "pointer" },
               icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
               onClick: pinHandler
@@ -8256,7 +8429,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onClick: closeHandler
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$M, { icon: unref(Close) }, null, 8, ["icon"])
+              createVNode(_sfc_main$N, { icon: unref(Close) }, null, 8, ["icon"])
             ]),
             _: 1
           })
@@ -8383,7 +8556,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       menu.value?.hide();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$l, {
+      return openBlock(), createBlock(_sfc_main$k, {
         ref_key: "menu",
         ref: menu,
         class: "magic-editor-node-list-menu",
@@ -8569,7 +8742,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$l, {
+      return openBlock(), createBlock(_sfc_main$k, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -8902,14 +9075,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$M, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { 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$M, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -8925,7 +9098,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$M, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -8997,7 +9170,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$w, {
+                      createVNode(_sfc_main$x, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -9005,7 +9178,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$w, {
+                      createVNode(_sfc_main$x, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -10182,13 +10355,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$x, null, {
+      return openBlock(), createBlock(_sfc_main$y, 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"])
+            createVNode(_sfc_main$w, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -10209,6 +10382,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "layer-node-content": withCtx(({ data }) => [
                 renderSlot(_ctx.$slots, "layer-node-content", { data })
               ]),
+              "layer-node-tool": withCtx(({ data }) => [
+                renderSlot(_ctx.$slots, "layer-node-tool", { data })
+              ]),
               "component-list-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "component-list-panel-header")
               ]),
@@ -10224,6 +10400,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   data
                 })
               ]),
+              "data-source-panel-tool": withCtx(({ data }) => [
+                renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+              ]),
               _: 3
             }, 8, ["data", "layer-content-menu"])
           ])
@@ -10249,7 +10428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$u, {
+            createVNode(_sfc_main$v, {
               "extend-state": _ctx.extendFormState,
               onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
             }, {
@@ -10287,23 +10466,23 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     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);
+    app.component("m-fields-ui-select", _sfc_main$C);
+    app.component("m-fields-code-link", _sfc_main$R);
+    app.component("m-fields-vs-code", _sfc_main$S);
+    app.component("magic-code-editor", _sfc_main$T);
+    app.component("m-fields-code-select", _sfc_main$Q);
+    app.component("m-fields-code-select-col", _sfc_main$M);
+    app.component("m-fields-event-select", _sfc_main$E);
+    app.component("m-fields-data-source-fields", _sfc_main$L);
+    app.component("m-fields-data-source-mocks", _sfc_main$G);
+    app.component("m-fields-key-value", _sfc_main$D);
+    app.component("m-fields-data-source-input", _sfc_main$J);
+    app.component("m-fields-data-source-select", _sfc_main$F);
+    app.component("m-fields-data-source-methods", _sfc_main$I);
+    app.component("m-fields-data-source-method-select", _sfc_main$H);
+    app.component("m-fields-data-source-field-select", _sfc_main$K);
   }
 };
 
-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, UI_SELECT_MODE_EVENT_NAME, 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 };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DepTargetType, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$v as PropsPanel, _sfc_main$B as Resizer, _sfc_main$A as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, 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, getFormValue, 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