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

package/dist/tmagic-editor.umd.cjs

@@ -29,16 +29,16 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _hoisted_1$w = {
+  const _hoisted_1$x = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
     __name: "CodeEditor",
     props: {
-      initValues: {},
+      initValues: { default: "" },
       modifiedValues: {},
       type: {},
       language: { default: "javascript" },
@@ -189,7 +189,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -217,7 +217,7 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -241,7 +241,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$S, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$T, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -256,7 +256,7 @@
     }
   });
 
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -335,7 +335,7 @@
     }
   });
 
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -407,11 +407,11 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -653,7 +653,7 @@
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$v, [
+              vue.createElementVNode("div", _hoisted_1$w, [
                 vue.createElementVNode("div", _hoisted_2$p, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
@@ -677,7 +677,7 @@
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$S, {
+              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -786,47 +786,72 @@
     ...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"
+            }
+          ]
         }
       ]
     }
@@ -841,6 +866,62 @@
         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);
@@ -1026,7 +1107,7 @@
       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;
@@ -2883,7 +2964,7 @@
     return newNode;
   };
 
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -2932,8 +3013,8 @@
     }
   });
 
-  const _hoisted_1$u = ["src"];
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$v = ["src"];
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -2957,7 +3038,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$u)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$v)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -3034,9 +3115,9 @@
     };
   };
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -3108,7 +3189,7 @@
       const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
           vue.createElementVNode("div", _hoisted_2$o, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -3117,14 +3198,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3132,7 +3213,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3145,9 +3226,9 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -3378,7 +3459,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
@@ -3435,7 +3516,7 @@
     }
   });
 
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3489,10 +3570,10 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -3681,10 +3762,10 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$r, [
+            vue.createElementVNode("div", _hoisted_1$s, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$m, vue.toDisplayString(item.value), 1)
             ])
@@ -3716,7 +3797,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$M, {
+              vue.createVNode(_sfc_main$N, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -3799,9 +3880,9 @@
     };
   };
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
     },
@@ -3870,7 +3951,7 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
@@ -3889,7 +3970,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3904,9 +3985,9 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
     },
@@ -3988,7 +4069,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           vue.createElementVNode("div", _hoisted_2$k, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -3996,14 +4077,14 @@
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4012,7 +4093,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4025,9 +4106,9 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMocks"
     },
@@ -4113,7 +4194,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$S,
+          component: _sfc_main$T,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -4222,7 +4303,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
@@ -4258,7 +4339,7 @@
     }
   });
 
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -4313,12 +4394,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -4520,7 +4601,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4580,9 +4661,9 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-key-value" };
+  const _hoisted_1$n = { class: "m-fields-key-value" };
   const _hoisted_2$h = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -4625,9 +4706,10 @@
       };
       const deleteHandler = (index) => {
         records.value.splice(index, 1);
+        emit("change", getValue());
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -4680,12 +4762,12 @@
     }
   });
 
-  const _hoisted_1$l = {
+  const _hoisted_1$m = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -4774,7 +4856,7 @@
             ]),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "清除",
@@ -4871,7 +4953,7 @@
     };
   };
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -4892,7 +4974,7 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -5004,7 +5086,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$B, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5013,7 +5095,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$A, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$B, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -5026,10 +5108,10 @@
     }
   });
 
-  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__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -5049,14 +5131,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", _hoisted_2$g, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$9
             ])
@@ -5070,7 +5152,7 @@
   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__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -5147,13 +5229,13 @@
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$S, {
+            vue.createVNode(_sfc_main$T, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -5172,7 +5254,7 @@
             ]),
             center: vue.withCtx(() => [
               pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$y)
+                vue.createVNode(_sfc_main$z)
               ])
             ]),
             _: 2
@@ -5197,12 +5279,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -5281,7 +5363,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -5295,7 +5377,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5313,7 +5395,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5363,7 +5445,7 @@
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -5525,7 +5607,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -5537,8 +5619,8 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-editor-props-panel" };
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$j = { class: "m-editor-props-panel" };
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -5591,7 +5673,7 @@
       };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -5611,7 +5693,7 @@
     }
   });
 
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -5650,7 +5732,7 @@
     }
   });
 
-  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__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
@@ -5664,19 +5746,19 @@
   const _hoisted_3$8 = [
     _hoisted_2$e
   ];
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAppManageIcon"
     },
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$h, _hoisted_3$8);
+        return vue.openBlock(), vue.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",
@@ -5686,25 +5768,25 @@
   const _hoisted_4$6 = [
     _hoisted_2$d
   ];
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$g, _hoisted_4$6);
+        return vue.openBlock(), vue.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__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -5806,11 +5888,11 @@
               class: "list-container"
             }, [
               vue.createElementVNode("div", _hoisted_2$c, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                   key: 0,
                   class: "codeIcon"
                 })) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
                   key: 1,
                   class: "compIcon"
                 })) : vue.createCommentVNode("", true),
@@ -5824,7 +5906,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$M, {
+                      vue.createVNode(_sfc_main$N, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editCode(data.id), ["stop"])
@@ -5839,7 +5921,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$M, {
+                      vue.createVNode(_sfc_main$N, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5853,7 +5935,7 @@
                   })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$f)
+            ], 8, _hoisted_1$g)
           ]),
           _: 3
         }, 8, ["default-expanded-keys", "data"]);
@@ -5861,8 +5943,8 @@
     }
   });
 
-  const _hoisted_1$e = { class: "search-wrapper" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$f = { class: "search-wrapper" };
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -5882,8 +5964,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$e, [
-                vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$f, [
+                vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -5899,7 +5981,7 @@
                 vue.renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            vue.createVNode(_sfc_main$q, {
+            vue.createVNode(_sfc_main$r, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -5914,7 +5996,7 @@
               ]),
               _: 3
             }, 8, ["custom-error", "onEdit", "onRemove"]),
-            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
               key: 0,
               ref_key: "codeBlockEditor",
               ref: codeBlockEditor,
@@ -5929,7 +6011,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -5983,13 +6065,13 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -6085,12 +6167,12 @@
               class: "list-container"
             }, [
               vue.createElementVNode("div", _hoisted_2$b, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 0,
                   class: "codeIcon",
                   icon: vue.unref(iconsVue.Coin)
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 1,
                   class: "compIcon",
                   icon: vue.unref(iconsVue.Aim)
@@ -6105,7 +6187,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$M, {
+                      vue.createVNode(_sfc_main$N, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -6120,7 +6202,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$M, {
+                      vue.createVNode(_sfc_main$N, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -6128,13 +6210,10 @@
                     ]),
                     _: 2
                   }, 1024)) : vue.createCommentVNode("", true),
-                  vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
-                    id: data.id,
-                    data: data.codeBlockContent
-                  })
+                  vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$d)
+            ], 8, _hoisted_1$e)
           ]),
           _: 3
         }, 8, ["data"]);
@@ -6142,9 +6221,9 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -6204,8 +6283,8 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$c, [
-              vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+            vue.createElementVNode("div", _hoisted_1$d, [
+              vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
               editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -6224,7 +6303,7 @@
                 default: vue.withCtx(() => [
                   vue.createElementVNode("div", _hoisted_2$a, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -6240,11 +6319,16 @@
                 _: 1
               })) : vue.createCommentVNode("", true)
             ]),
-            vue.createVNode(_sfc_main$n, {
+            vue.createVNode(_sfc_main$o, {
               onEdit: editHandler,
               onRemove: removeHandler
+            }, {
+              "data-source-panel-tool": vue.withCtx(({ data }) => [
+                vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+              ]),
+              _: 3
             }),
-            vue.createVNode(_sfc_main$o, {
+            vue.createVNode(_sfc_main$p, {
               ref_key: "editDialog",
               ref: editDialog,
               disabled: !editable.value,
@@ -6253,13 +6337,187 @@
               onSubmit: submitDataSourceHandler
             }, null, 8, ["disabled", "values", "title"])
           ]),
-          _: 1
+          _: 3
         });
       };
     }
   });
 
+  const updateStatus = (nodeStatusMap, id, status) => {
+    const nodeStatus = nodeStatusMap.get(id);
+    if (!nodeStatus)
+      return;
+    utils.getKeys(status).forEach((key) => {
+      if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
+        nodeStatus[key] = Boolean(status[key]);
+      }
+    });
+  };
+
+  const _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__ */ vue.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 = vue.inject("treeEmit");
+      const nodeStatus = vue.computed(
+        () => props.nodeStatusMap?.get(props.data.id) || {
+          selected: false,
+          expand: false,
+          visible: false,
+          draggable: false
+        }
+      );
+      const expanded = vue.computed(() => nodeStatus.value.expand);
+      const selected = vue.computed(() => nodeStatus.value.selected);
+      const visible = vue.computed(() => nodeStatus.value.visible);
+      const draggable = vue.computed(() => nodeStatus.value.draggable);
+      const hasChilren = vue.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 = vue.resolveComponent("TreeNode", true);
+        return vue.withDirectives((vue.openBlock(), vue.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
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
+            style: vue.normalizeStyle(`padding-left: ${_ctx.indent}px`),
+            onContextmenu: nodeContentmenuHandler,
+            onMouseenter: mouseenterHandler
+          }, [
+            vue.createVNode(_sfc_main$N, {
+              class: "expand-icon",
+              style: vue.normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
+              icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
+              onClick: expandHandler
+            }, null, 8, ["style", "icon"]),
+            vue.createElementVNode("div", {
+              class: "tree-node-content",
+              onClick: nodeClickHandler
+            }, [
+              vue.renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
+                vue.createElementVNode("div", _hoisted_2$9, vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+                vue.createElementVNode("div", _hoisted_3$5, [
+                  vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
+                ])
+              ])
+            ])
+          ], 38),
+          hasChilren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item) => {
+              return vue.openBlock(), vue.createBlock(_component_TreeNode, {
+                key: item.id,
+                data: item,
+                "node-status-map": _ctx.nodeStatusMap,
+                indent: _ctx.indent + 11
+              }, {
+                "tree-node-content": vue.withCtx(({ data: nodeData }) => [
+                  vue.renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
+                ]),
+                "tree-node-tool": vue.withCtx(({ data: nodeData }) => [
+                  vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
+                ]),
+                _: 2
+              }, 1032, ["data", "node-status-map", "indent"]);
+            }), 128))
+          ])) : vue.createCommentVNode("", true)
+        ], 40, _hoisted_1$c)), [
+          [vue.vShow, visible.value]
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$b = { key: 1 };
   const _sfc_main$l = /* @__PURE__ */ vue.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 }) {
+      vue.provide("treeEmit", emit);
+      const handleDragOver = (event) => {
+        emit("node-dragover", event);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-tree",
+          onDragover: handleDragOver
+        }, [
+          _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
+            return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+              key: item.id,
+              data: item,
+              indent: _ctx.indent,
+              "node-status-map": _ctx.nodeStatusMap
+            }, {
+              "tree-node-content": vue.withCtx(({ data: nodeData }) => [
+                vue.renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
+              ]),
+              "tree-node-tool": vue.withCtx(({ data: nodeData }) => [
+                vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
+              ]),
+              _: 2
+            }, 1032, ["data", "indent", "node-status-map"]);
+          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+            vue.createElementVNode("p", null, vue.toDisplayString(_ctx.emptyText), 1)
+          ]))
+        ], 32);
+      };
+    }
+  });
+
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -6392,7 +6650,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               vue.createElementVNode("div", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -6427,7 +6685,7 @@
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$a = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -6435,26 +6693,26 @@
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$9 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_2$8 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
   }, null, -1);
-  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
   }, null, -1);
-  const _hoisted_4$5 = [
-    _hoisted_2$9,
-    _hoisted_3$5
+  const _hoisted_4$4 = [
+    _hoisted_2$8,
+    _hoisted_3$4
   ];
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$5);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, _hoisted_4$4);
       };
     }
   });
@@ -6534,7 +6792,7 @@
     };
   };
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -6597,7 +6855,7 @@
         {
           type: "button",
           text: "全部折叠",
-          icon: _sfc_main$k,
+          icon: _sfc_main$j,
           display: () => utils.isPage(node.value),
           handler: () => {
             emit("collapse-all");
@@ -6623,7 +6881,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$k, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -6633,7 +6891,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNodeTool",
     props: {
       data: {}
@@ -6652,12 +6910,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -6669,6 +6927,75 @@
     }
   });
 
+  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 = lodashEs.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
+        });
+      }
+      vue.nextTick(() => {
+        select(data);
+      });
+    };
+    const menu = vue.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: "",
@@ -6713,7 +7040,7 @@
       if (!event.target)
         return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl)
+      if (!targetEl?.draggable)
         return;
       const labelEl = targetEl.children[0];
       if (!labelEl)
@@ -6787,16 +7114,6 @@
     };
   };
 
-  const updateStatus = (nodeStatusMap, id, status) => {
-    const nodeStatus = nodeStatusMap.get(id);
-    if (!nodeStatus)
-      return;
-    utils.getKeys(status).forEach((key) => {
-      if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
-        nodeStatus[key] = Boolean(status[key]);
-      }
-    });
-  };
   const useFilter = (nodeStatusMap, page) => {
     const filterIsMatch = (value, data) => {
       if (!value) {
@@ -6841,179 +7158,6 @@
     };
   };
 
-  const _hoisted_1$a = ["draggable", "data-node-id", "data-is-container"];
-  const _hoisted_2$8 = { class: "layer-node-label" };
-  const _hoisted_3$4 = { class: "layer-node-tool" };
-  const _hoisted_4$4 = {
-    key: 0,
-    class: "magic-editor-layer-node-children"
-  };
-  const throttleTime = 300;
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "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 = vue.inject("services");
-      const nodeStatusMap = vue.inject("nodeStatusMap");
-      const editorService = services?.editorService;
-      const uiService = services?.uiService;
-      const nodeStatus = vue.computed(
-        () => nodeStatusMap?.value?.get(props.data.id) || {
-          selected: false,
-          expand: false,
-          visible: false
-        }
-      );
-      const expanded = vue.computed(() => nodeStatus.value.expand);
-      const selected = vue.computed(() => nodeStatus.value.selected);
-      const visible = vue.computed(() => nodeStatus.value.visible);
-      const hasChilren = vue.computed(() => props.data.items?.length > 0);
-      const nodeEl = vue.ref();
-      const { handleDragStart, handleDragEnd, handleDragLeave } = useDrag(services);
-      const expandHandler = () => {
-        if (!nodeStatusMap?.value)
-          return;
-        updateStatus(nodeStatusMap.value, props.data.id, {
-          expand: !expanded.value
-        });
-      };
-      const nodeClickHandler = () => {
-        if (!nodeStatusMap?.value)
-          return;
-        if (uiService?.get("uiSelectMode")) {
-          document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
-          return;
-        }
-        if (hasChilren.value && !props.isCtrlKeyDown) {
-          updateStatus(nodeStatusMap.value, props.data.id, {
-            expand: true
-          });
-        }
-        vue.nextTick(() => {
-          select(props.data);
-        });
-      };
-      const contextmenuHandler = (event) => {
-        event.preventDefault();
-        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 = lodashEs.throttle(() => {
-        highlight();
-      }, throttleTime);
-      const highlight = () => {
-        editorService?.highlight(props.data);
-        editorService?.get("stage")?.highlight(props.data.id);
-      };
-      return (_ctx, _cache) => {
-        const _component_LayerNode = vue.resolveComponent("LayerNode", true);
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          class: "magic-editor-layer-node",
-          ref_key: "nodeEl",
-          ref: nodeEl,
-          draggable: !vue.unref(utils.isPage)(_ctx.data),
-          "data-node-id": _ctx.data.id,
-          "data-is-container": Array.isArray(_ctx.data.items),
-          onDragstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => vue.unref(handleDragStart) && vue.unref(handleDragStart)(...args)),
-          onDragleave: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => vue.unref(handleDragLeave) && vue.unref(handleDragLeave)(...args)),
-          onDragend: _cache[3] || (_cache[3] = ($event) => vue.unref(handleDragEnd)($event, _ctx.data))
-        }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(["layer-node", { selected: selected.value, expanded: expanded.value }]),
-            style: vue.normalizeStyle(`padding-left: ${_ctx.indent}px`),
-            onContextmenu: contextmenuHandler,
-            onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(highlightHandler)())
-          }, [
-            vue.createVNode(_sfc_main$M, {
-              class: "expand-icon",
-              style: vue.normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
-              icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
-              onClick: expandHandler
-            }, null, 8, ["style", "icon"]),
-            vue.createElementVNode("div", {
-              class: "layer-node-content",
-              onClick: nodeClickHandler
-            }, [
-              vue.renderSlot(_ctx.$slots, "layer-node-content", { data: _ctx.data }, () => [
-                vue.createElementVNode("div", _hoisted_2$8, vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
-                vue.createElementVNode("div", _hoisted_3$4, [
-                  vue.createVNode(_sfc_main$i, { data: _ctx.data }, null, 8, ["data"])
-                ])
-              ])
-            ])
-          ], 38),
-          hasChilren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item) => {
-              return vue.openBlock(), vue.createBlock(_component_LayerNode, {
-                data: item,
-                parent: _ctx.data,
-                key: item.id,
-                indent: _ctx.indent + 11,
-                "filter-text": _ctx.filterText,
-                "is-ctrl-key-down": _ctx.isCtrlKeyDown,
-                onNodeContextmenu: nodeContentmenuHandler
-              }, {
-                "layer-node-content": vue.withCtx(({ data: nodeData }) => [
-                  vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
-                ]),
-                _: 2
-              }, 1032, ["data", "parent", "indent", "filter-text", "is-ctrl-key-down"]);
-            }), 128))
-          ])) : vue.createCommentVNode("", true)
-        ], 40, _hoisted_1$a)), [
-          [vue.vShow, visible.value]
-        ]);
-      };
-    }
-  });
-
   var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
     KeyBindingContainerKey2["STAGE"] = "stage";
     KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
@@ -7165,7 +7309,7 @@
     vue.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);
@@ -7181,14 +7325,16 @@
     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
         });
       })
     );
@@ -7238,7 +7384,8 @@
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
             expand: Array.isArray(node2.items),
-            selected: true
+            selected: true,
+            draggable: true
           });
         });
       });
@@ -7267,13 +7414,11 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
-      const layerTreeContainer = vue.ref();
+      const tree = vue.ref();
       const page = vue.computed(() => editorService?.get("page"));
-      const root = vue.computed(() => editorService?.get("root"));
       const { nodeStatusMap } = useNodeStatus(services, page);
-      const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer);
-      vue.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;
@@ -7285,40 +7430,45 @@
           status.expand = false;
         }
       };
-      const menu = vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$t, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            vue.createElementVNode("div", {
-              class: "magic-editor-layer-tree",
-              ref_key: "layerTreeContainer",
-              ref: layerTreeContainer,
+            vue.createVNode(_sfc_main$u, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+              key: 0,
               tabindex: "-1",
-              onDragover: _cache[0] || (_cache[0] = //@ts-ignore
-              (...args) => vue.unref(handleDragOver) && vue.unref(handleDragOver)(...args))
-            }, [
-              page.value && root.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
-                key: 0,
-                data: page.value,
-                "filter-text": vue.unref(filterText),
-                "is-ctrl-key-down": vue.unref(isCtrlKeyDown),
-                onNodeContextmenu: contextmenu
-              }, {
-                "layer-node-content": vue.withCtx(({ data: nodeData }) => [
-                  vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
-                ]),
-                _: 3
-              }, 8, ["data", "filter-text", "is-ctrl-key-down"])) : vue.createCommentVNode("", true)
-            ], 544),
+              ref_key: "tree",
+              ref: tree,
+              data: [page.value],
+              "node-status-map": vue.unref(nodeStatusMap),
+              onNodeDragover: vue.unref(handleDragOver),
+              onNodeDragstart: vue.unref(handleDragStart),
+              onNodeDragleave: vue.unref(handleDragLeave),
+              onNodeDragend: vue.unref(handleDragEnd),
+              onNodeContextmenu: vue.unref(nodeContentmenuHandler),
+              onNodeMouseenter: vue.unref(mouseenterHandler),
+              onNodeClick: vue.unref(nodeClickHandler)
+            }, {
+              "tree-node-tool": vue.withCtx(({ data: nodeData }) => [
+                vue.renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [
+                  vue.createVNode(_sfc_main$h, { data: nodeData }, null, 8, ["data"])
+                ])
+              ]),
+              "tree-node-content": vue.withCtx(({ data: nodeData }) => [
+                vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+              ]),
+              _: 3
+            }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$j, {
+              vue.createVNode(_sfc_main$i, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu,
@@ -7414,7 +7564,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -7422,7 +7572,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -7443,7 +7593,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$M, {
+                                  vue.createVNode(_sfc_main$N, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -7518,7 +7668,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$p,
+            component: _sfc_main$q,
             slots: {}
           },
           "data-source": {
@@ -7526,7 +7676,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$m,
+            component: _sfc_main$n,
             slots: {}
           }
         };
@@ -7551,7 +7701,7 @@
                 key: config.$key ?? index,
                 onClick: ($event) => activeTabName.value = config.text || `${index}`
               }, [
-                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -7622,6 +7772,29 @@
                     }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                   ]),
                   key: "5"
+                } : void 0,
+                config.$key === "layer" || config.slots?.layerNodeTool ? {
+                  name: "layer-node-tool",
+                  fn: vue.withCtx(({ data: nodeData }) => [
+                    config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-tool", {
+                      key: 0,
+                      data: nodeData
+                    }) : config.slots?.layerNodeTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeTool), {
+                      key: 1,
+                      data: nodeData
+                    }, null, 8, ["data"])) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "6"
+                } : void 0,
+                config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
+                  name: "data-source-panel-tool",
+                  fn: vue.withCtx(({ data }) => [
+                    config.$key === "data-source" ? vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                      key: 0,
+                      data
+                    }) : config.slots?.DataSourcePanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                  ]),
+                  key: "7"
                 } : void 0
               ]), 1040)) : vue.createCommentVNode("", true)
             ])), [
@@ -8249,7 +8422,7 @@
             content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$M, {
+              vue.createVNode(_sfc_main$N, {
                 style: { "margin-left": "10px", "cursor": "pointer" },
                 icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
                 onClick: pinHandler
@@ -8265,7 +8438,7 @@
               onClick: closeHandler
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
               ]),
               _: 1
             })
@@ -8392,7 +8565,7 @@
         menu.value?.hide();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$k, {
           ref_key: "menu",
           ref: menu,
           class: "magic-editor-node-list-menu",
@@ -8578,7 +8751,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$k, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -8911,14 +9084,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -8934,7 +9107,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$M, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -9006,7 +9179,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$w, {
+                        vue.createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -9014,7 +9187,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$w, {
+                        vue.createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -10191,13 +10364,13 @@
       );
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$x, null, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$y, null, {
           header: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$v, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$w, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -10218,6 +10391,9 @@
                 "layer-node-content": vue.withCtx(({ data }) => [
                   vue.renderSlot(_ctx.$slots, "layer-node-content", { data })
                 ]),
+                "layer-node-tool": vue.withCtx(({ data }) => [
+                  vue.renderSlot(_ctx.$slots, "layer-node-tool", { data })
+                ]),
                 "component-list-panel-header": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "component-list-panel-header")
                 ]),
@@ -10233,6 +10409,9 @@
                     data
                   })
                 ]),
+                "data-source-panel-tool": vue.withCtx(({ data }) => [
+                  vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+                ]),
                 _: 3
               }, 8, ["data", "layer-content-menu"])
             ])
@@ -10258,7 +10437,7 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$u, {
+              vue.createVNode(_sfc_main$v, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
               }, {
@@ -10296,61 +10475,61 @@
       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);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$O;
-  exports.CodeBlockList = _sfc_main$q;
-  exports.CodeBlockListPanel = _sfc_main$p;
+  exports.CodeBlockEditor = _sfc_main$P;
+  exports.CodeBlockList = _sfc_main$r;
+  exports.CodeBlockListPanel = _sfc_main$q;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$P;
-  exports.CodeSelectCol = _sfc_main$L;
+  exports.CodeSelect = _sfc_main$Q;
+  exports.CodeSelectCol = _sfc_main$M;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$f;
-  exports.ContentMenu = _sfc_main$l;
-  exports.DataSourceFieldSelect = _sfc_main$J;
-  exports.DataSourceFields = _sfc_main$K;
-  exports.DataSourceInput = _sfc_main$I;
-  exports.DataSourceMethodSelect = _sfc_main$G;
-  exports.DataSourceMethods = _sfc_main$H;
-  exports.DataSourceMocks = _sfc_main$F;
-  exports.DataSourceSelect = _sfc_main$E;
+  exports.ContentMenu = _sfc_main$k;
+  exports.DataSourceFieldSelect = _sfc_main$K;
+  exports.DataSourceFields = _sfc_main$L;
+  exports.DataSourceInput = _sfc_main$J;
+  exports.DataSourceMethodSelect = _sfc_main$H;
+  exports.DataSourceMethods = _sfc_main$I;
+  exports.DataSourceMocks = _sfc_main$G;
+  exports.DataSourceSelect = _sfc_main$F;
   exports.DepTargetType = DepTargetType;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$D;
+  exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$M;
+  exports.Icon = _sfc_main$N;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$C;
+  exports.KeyValue = _sfc_main$D;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$g;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$z;
-  exports.PropsPanel = _sfc_main$u;
-  exports.Resizer = _sfc_main$A;
-  exports.SplitView = _sfc_main$z;
-  exports.TMagicCodeEditor = _sfc_main$S;
+  exports.LayoutContainer = _sfc_main$A;
+  exports.PropsPanel = _sfc_main$v;
+  exports.Resizer = _sfc_main$B;
+  exports.SplitView = _sfc_main$A;
+  exports.TMagicCodeEditor = _sfc_main$T;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$w;
+  exports.ToolButton = _sfc_main$x;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
@@ -10376,6 +10555,7 @@
   exports.getDefaultConfig = getDefaultConfig;
   exports.getDisplayField = getDisplayField;
   exports.getFormConfig = getFormConfig;
+  exports.getFormValue = getFormValue;
   exports.getGuideLineFromCache = getGuideLineFromCache;
   exports.getInitPositionStyle = getInitPositionStyle;
   exports.getNodeIndex = getNodeIndex;