@tmagic/editor 1.3.0-beta.6 → 1.3.0-beta.8

package/dist/tmagic-editor.umd.cjs

@@ -29,10 +29,10 @@
   };
   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"
     },
@@ -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,
@@ -2964,7 +2964,7 @@
     return newNode;
   };
 
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3013,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"
     },
@@ -3038,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", {
@@ -3115,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"
     },
@@ -3189,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",
@@ -3198,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,
@@ -3213,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,
@@ -3226,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"
     },
@@ -3459,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
@@ -3516,7 +3516,7 @@
     }
   });
 
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3570,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"
     },
@@ -3762,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)
             ])
@@ -3797,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"])
@@ -3880,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"
     },
@@ -3951,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
@@ -3970,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,
@@ -3985,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"
     },
@@ -4069,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",
@@ -4077,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,
@@ -4093,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,
@@ -4106,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"
     },
@@ -4194,7 +4194,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$S,
+          component: _sfc_main$T,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -4303,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
@@ -4339,7 +4339,7 @@
     }
   });
 
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -4394,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"
     },
@@ -4601,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",
@@ -4661,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"
     },
@@ -4709,7 +4709,7 @@
         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",
@@ -4762,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"
     },
@@ -4856,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: "清除",
@@ -4953,7 +4953,7 @@
     };
   };
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -4974,7 +4974,7 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -4990,19 +4990,22 @@
       centerClass: {}
     },
     emits: ["update:left", "change", "update:right"],
-    setup(__props, { emit }) {
+    setup(__props, { expose: __expose, emit }) {
       const props = __props;
       const el = vue.ref();
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.computed(() => typeof props.right !== "undefined");
-      const getCenterWidth = (clientWidth2, left, right) => {
+      const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+        let right = r > 0 ? r : 0;
+        let left = l > 0 ? l : 0;
         let center2 = clientWidth2 - left - right;
         if (center2 < props.minCenter) {
           center2 = props.minCenter;
-          if (left < right) {
-            right = clientWidth2 - left - props.minCenter;
+          if (right > center2 + props.minRight) {
+            right = clientWidth2 - left - center2;
           } else {
-            left = clientWidth2 - right - props.minCenter;
+            right = props.minRight;
+            left = clientWidth2 - right - center2;
           }
         }
         return {
@@ -5065,7 +5068,7 @@
         if (clientWidth - (props.left || 0) - right <= 0) {
           right = props.right;
         }
-        const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+        const columnWidth = getCenterWidth(clientWidth, props.left, right);
         center.value = columnWidth.center;
         emit("change", {
           left: columnWidth.left,
@@ -5073,11 +5076,22 @@
           right: columnWidth.right
         });
       };
+      __expose({
+        updateWidth() {
+          const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+          emit("change", {
+            left: columnWidth.left,
+            center: center.value,
+            right: columnWidth.right
+          });
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "el",
           ref: el,
-          class: "m-editor-layout"
+          class: "m-editor-layout",
+          style: vue.normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
         }, [
           hasLeft.value && _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
@@ -5086,7 +5100,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]),
@@ -5095,7 +5109,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`)
@@ -5103,15 +5117,15 @@
               vue.renderSlot(_ctx.$slots, "right")
             ], 6)
           ], 64)) : vue.createCommentVNode("", true)
-        ], 512);
+        ], 4);
       };
     }
   });
 
-  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"
     },
@@ -5131,14 +5145,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
             ])
@@ -5152,7 +5166,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"
     },
@@ -5161,31 +5175,21 @@
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
       const content = vue.ref();
+      const splitView = vue.ref();
       const root = vue.computed(() => editorService?.get("root"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
-      const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
-      const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+      const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+      const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
       const columnWidth = vue.ref({
         left: leftColumnWidthCacheData,
         center: 0,
         right: RightColumnWidthCacheData
       });
       vue.watch(
-        pageLength,
-        (length) => {
-          const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
-          columnWidth.value.left = left;
-          const container = content.value || document.body;
-          if (length <= 0) {
-            columnWidth.value.right = void 0;
-            columnWidth.value.center = container.clientWidth - left;
-          } else {
-            const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
-            columnWidth.value.right = right;
-            columnWidth.value.center = container.clientWidth - left - right;
-          }
-          uiService?.set("columnWidth", columnWidth.value);
+        [pageLength, splitView],
+        () => {
+          splitView.value?.updateWidth();
         },
         {
           immediate: true
@@ -5223,20 +5227,23 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor",
           ref_key: "content",
-          ref: content
+          ref: content,
+          style: { "min-width": "180px" }
         }, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$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,
+            ref_key: "splitView",
+            ref: splitView,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
             "center-class": "m-editor-framework-center",
@@ -5247,6 +5254,7 @@
             "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
             "min-left": 65,
             "min-right": 20,
+            "min-center": 100,
             onChange: columnWidthChange
           }, vue.createSlots({
             left: vue.withCtx(() => [
@@ -5254,7 +5262,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
@@ -5279,12 +5287,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"
     },
@@ -5363,7 +5371,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",
@@ -5377,7 +5385,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),
@@ -5395,7 +5403,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),
@@ -5445,7 +5453,7 @@
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -5607,7 +5615,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"]);
@@ -5619,8 +5627,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"
     },
@@ -5673,7 +5681,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",
@@ -5693,7 +5701,7 @@
     }
   });
 
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -5732,7 +5740,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"
@@ -5746,19 +5754,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",
@@ -5768,25 +5776,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"
     },
@@ -5888,11 +5896,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),
@@ -5906,7 +5914,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"])
@@ -5921,7 +5929,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"])
@@ -5935,7 +5943,7 @@
                   })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$f)
+            ], 8, _hoisted_1$g)
           ]),
           _: 3
         }, 8, ["default-expanded-keys", "data"]);
@@ -5943,8 +5951,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"
     },
@@ -5964,8 +5972,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",
@@ -5981,7 +5989,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,
@@ -5996,7 +6004,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,
@@ -6011,7 +6019,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -6065,13 +6073,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"
     },
@@ -6091,25 +6099,25 @@
         id,
         children: getKeyTreeConfig(dep, type)
       });
+      const mergeChildren = (children, deps, type) => {
+        Object.entries(deps).forEach(([id, dep]) => {
+          const nodeItem = children.find((item) => item.id === id);
+          if (nodeItem) {
+            nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+          } else {
+            children.push(getNodeTreeConfig(id, dep, type));
+          }
+        });
+      };
       const list = vue.computed(
         () => dataSources.value.map((ds) => {
           const dsDeps = dsDep.value[ds.id].deps;
           const dsMethodDeps = dsMethodDep.value[ds.id].deps;
           const dsCondDeps = dsCondDep.value[ds.id].deps;
           const children = [];
-          const mergeChildren = (deps, type) => {
-            Object.entries(deps).forEach(([id, dep]) => {
-              const nodeItem = children.find((item) => item.id === id);
-              if (nodeItem) {
-                nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
-              } else {
-                children.push(getNodeTreeConfig(id, dep, type));
-              }
-            });
-          };
-          mergeChildren(dsDeps);
-          mergeChildren(dsMethodDeps, "method");
-          mergeChildren(dsCondDeps, "cond");
+          mergeChildren(children, dsDeps);
+          mergeChildren(children, dsMethodDeps, "method");
+          mergeChildren(children, dsCondDeps, "cond");
           return {
             id: ds.id,
             name: ds.title,
@@ -6167,12 +6175,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)
@@ -6187,7 +6195,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"])
@@ -6202,7 +6210,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"])
@@ -6210,13 +6218,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"]);
@@ -6224,9 +6229,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"
     },
@@ -6286,8 +6291,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"
@@ -6306,7 +6311,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,
@@ -6322,11 +6327,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,
@@ -6335,13 +6345,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"
     },
@@ -6407,11 +6591,8 @@
       const show = (e) => {
         setTimeout(() => {
           visible.value = true;
-          if (!e) {
-            return;
-          }
           vue.nextTick(() => {
-            setPosition(e);
+            e && setPosition(e);
             emit("show");
           });
         }, 300);
@@ -6474,7 +6655,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",
@@ -6509,7 +6690,7 @@
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$a = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -6517,26 +6698,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);
       };
     }
   });
@@ -6616,7 +6797,7 @@
     };
   };
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -6679,7 +6860,7 @@
         {
           type: "button",
           text: "全部折叠",
-          icon: _sfc_main$k,
+          icon: _sfc_main$j,
           display: () => utils.isPage(node.value),
           handler: () => {
             emit("collapse-all");
@@ -6705,7 +6886,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,
@@ -6715,7 +6896,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNodeTool",
     props: {
       data: {}
@@ -6734,12 +6915,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"])),
@@ -6751,6 +6932,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: "",
@@ -6795,7 +7045,7 @@
       if (!event.target)
         return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl)
+      if (!targetEl?.draggable)
         return;
       const labelEl = targetEl.children[0];
       if (!labelEl)
@@ -6869,16 +7119,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) {
@@ -6923,179 +7163,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";
@@ -7247,7 +7314,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);
@@ -7263,14 +7330,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
         });
       })
     );
@@ -7320,7 +7389,8 @@
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
             expand: Array.isArray(node2.items),
-            selected: true
+            selected: true,
+            draggable: true
           });
         });
       });
@@ -7349,13 +7419,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;
@@ -7367,40 +7435,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,
@@ -7496,7 +7569,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), {
@@ -7504,7 +7577,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(() => [
@@ -7525,7 +7598,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$M, {
+                                  vue.createVNode(_sfc_main$N, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -7600,7 +7673,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$p,
+            component: _sfc_main$q,
             slots: {}
           },
           "data-source": {
@@ -7608,7 +7681,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$m,
+            component: _sfc_main$n,
             slots: {}
           }
         };
@@ -7633,7 +7706,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),
@@ -7704,6 +7777,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)
             ])), [
@@ -8331,7 +8427,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
@@ -8347,7 +8443,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
             })
@@ -8357,6 +8453,7 @@
     }
   });
 
+  const PINNED_STATUE_CACHE_KEY = "tmagic-pinned-node-list-pinned-status";
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
     props: {
@@ -8366,7 +8463,8 @@
       const props = __props;
       const menu = vue.ref();
       const nodeList = vue.ref([]);
-      const pinned = vue.ref(false);
+      const pinned = vue.ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
+      const firstShow = vue.ref(true);
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const componentListService = services?.componentListService;
@@ -8415,7 +8513,8 @@
               }
               nodeList.value = nodes;
               if (nodeList.value.length > 1) {
-                menu.value?.show(pinned.value ? void 0 : event);
+                menu.value?.show(pinned.value && !firstShow.value ? void 0 : event);
+                firstShow.value = false;
               }
             }, 1500);
           });
@@ -8473,8 +8572,11 @@
       const closeHandler = () => {
         menu.value?.hide();
       };
+      vue.watch(pinned, () => {
+        globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+      });
       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",
@@ -8660,7 +8762,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
@@ -8993,14 +9095,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,
@@ -9016,7 +9118,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);
       };
@@ -9088,7 +9190,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: "复制",
@@ -9096,7 +9198,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$w, {
+                        vue.createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -9586,7 +9688,7 @@
         const doCollect = (key, value) => {
           const keyIsItems = key === "items";
           const fullKey = prop ? `${prop}.${key}` : key;
-          if (target.isTarget(key, value)) {
+          if (target.isTarget(fullKey, value)) {
             target.updateDep(node, fullKey);
             this.emit("update-dep", node, fullKey);
           } else if (!keyIsItems && Array.isArray(value)) {
@@ -9874,7 +9976,12 @@
   const createDataSourceCondTarget = (id) => new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key, value) => Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id))
+    isTarget: (key, value) => {
+      if (!Array.isArray(value) || value[0] !== id || !`${key}`.startsWith("displayConds"))
+        return false;
+      const ds = dataSourceService.getDataSourceById(id);
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    }
   });
   const createDataSourceMethodTarget = (id) => new Target({
     type: DepTargetType.DATA_SOURCE_METHOD,
@@ -10273,13 +10380,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(() => [
@@ -10300,6 +10407,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")
                 ]),
@@ -10315,6 +10425,9 @@
                     data
                   })
                 ]),
+                "data-source-panel-tool": vue.withCtx(({ data }) => [
+                  vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+                ]),
                 _: 3
               }, 8, ["data", "layer-content-menu"])
             ])
@@ -10340,7 +10453,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))
               }, {
@@ -10378,61 +10491,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;