@tmagic/editor 1.3.4 → 1.3.6

package/dist/tmagic-editor.umd.cjs

@@ -29,10 +29,10 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _hoisted_1$x = {
+  const _hoisted_1$s = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -190,7 +190,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -218,7 +218,7 @@
     }
   });
 
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -243,7 +243,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$T, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -258,7 +258,7 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -338,7 +338,7 @@
     }
   });
 
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -411,11 +411,11 @@
     }
   });
 
-  const _hoisted_1$w = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$p = { style: { "flex": "1" } };
-  const _hoisted_3$c = { style: { "flex": "1" } };
-  const _hoisted_4$7 = { class: "dialog-footer" };
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_2$j = { style: { "flex": "1" } };
+  const _hoisted_3$7 = { style: { "flex": "1" } };
+  const _hoisted_4$5 = { class: "dialog-footer" };
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -636,7 +636,7 @@
             fullscreen: ""
           }, {
             footer: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_4$7, [
+              vue.createElementVNode("span", _hoisted_4$5, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -659,8 +659,8 @@
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$w, [
-                vue.createElementVNode("div", _hoisted_2$p, [
+              vue.createElementVNode("div", _hoisted_1$r, [
+                vue.createElementVNode("div", _hoisted_2$j, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "info"
@@ -671,7 +671,7 @@
                     _: 1
                   })
                 ]),
-                vue.createElementVNode("div", _hoisted_3$c, [
+                vue.createElementVNode("div", _hoisted_3$7, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "success"
@@ -683,7 +683,7 @@
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -969,7 +969,7 @@
     return displayState;
   };
 
-  const compose = (middleware) => {
+  const compose = (middleware, isAsync) => {
     if (!Array.isArray(middleware))
       throw new TypeError("Middleware 必须是一个数组!");
     for (const fn of middleware) {
@@ -980,18 +980,34 @@
       let index = -1;
       return dispatch(0);
       function dispatch(i) {
-        if (i <= index)
-          return Promise.reject(new Error("next() 被多次调用"));
+        if (i <= index) {
+          const error = new Error("next() 被多次调用");
+          if (isAsync) {
+            return Promise.reject(error);
+          }
+          throw error;
+        }
         index = i;
         let fn = middleware[i];
         if (i === middleware.length && next)
           fn = next;
-        if (!fn)
-          return Promise.resolve();
+        if (!fn) {
+          if (isAsync) {
+            return Promise.resolve();
+          }
+          return;
+        }
+        if (isAsync) {
+          try {
+            return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+          } catch (err) {
+            return Promise.reject(err);
+          }
+        }
         try {
-          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+          return fn(...args, dispatch.bind(null, i + 1));
         } catch (err) {
-          return Promise.reject(err);
+          throw err;
         }
       }
     };
@@ -999,7 +1015,29 @@
 
   const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
   const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-  const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+  const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+    try {
+      let beforeArgs = args;
+      for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+        beforeArgs = beforeMethod(...beforeArgs) || [];
+        if (isError(beforeArgs))
+          throw beforeArgs;
+        if (!Array.isArray(beforeArgs)) {
+          beforeArgs = [beforeArgs];
+        }
+      }
+      let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
+      for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+        returnValue = afterMethod(returnValue, ...beforeArgs);
+        if (isError(returnValue))
+          throw returnValue;
+      }
+      return returnValue;
+    } catch (error) {
+      throw error;
+    }
+  };
+  const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
     try {
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
@@ -1028,7 +1066,7 @@
     doingTask = false;
     constructor(methods = [], serialMethods = []) {
       super();
-      methods.forEach((propertyName) => {
+      methods.forEach(({ name: propertyName, isAsync }) => {
         const scope = this;
         const sourceMethod = scope[propertyName];
         const beforeMethodName = methodName("before", propertyName);
@@ -1036,16 +1074,16 @@
         this.pluginOptionsList[beforeMethodName] = [];
         this.pluginOptionsList[afterMethodName] = [];
         this.middleware[propertyName] = [];
-        const fn = compose(this.middleware[propertyName]);
+        const fn = compose(this.middleware[propertyName], isAsync);
         Object.defineProperty(scope, propertyName, {
-          value: async (...args) => {
+          value: isAsync ? async (...args) => {
             if (!serialMethods.includes(propertyName)) {
-              return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+              return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
             }
             const promise = new Promise((resolve, reject) => {
               this.taskList.push(async () => {
                 try {
-                  const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                  const value = await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
                   resolve(value);
                 } catch (e) {
                   reject(e);
@@ -1056,7 +1094,7 @@
               this.doTask();
             }
             return promise;
-          }
+          } : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn)
         });
       });
     }
@@ -1743,11 +1781,50 @@
     if (node.items?.length) {
       parents.push(node);
       node.items.forEach((item) => {
-        traverseNode(item, cb, parents);
+        traverseNode(item, cb, [...parents]);
       });
     }
   };
 
+  class Dep extends BaseService {
+    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
+    removeTargets(type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTargets(type);
+      this.emit("remove-target");
+    }
+    getTargets(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTargets(type);
+    }
+    getTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTarget(id, type);
+    }
+    addTarget(target) {
+      this.watcher.addTarget(target);
+      this.emit("add-target", target);
+    }
+    removeTarget(id, type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTarget(id, type);
+      this.emit("remove-target");
+    }
+    clearTargets() {
+      this.watcher.clearTargets();
+    }
+    collect(nodes, deep = false, type) {
+      this.watcher.collect(nodes, deep, type);
+      this.emit("collected", nodes, deep);
+    }
+    clear(nodes) {
+      return this.watcher.clear(nodes);
+    }
+    hasTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasTarget(id, type);
+    }
+    hasSpecifiedTypeTarget(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasSpecifiedTypeTarget(type);
+    }
+  }
+  const depService = new Dep();
+
   class UndoRedo {
     elementList;
     listCursor;
@@ -1889,7 +1966,14 @@
     storage = globalThis.localStorage;
     namespace = "tmagic";
     constructor() {
-      super(["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]);
+      super([
+        { name: "getStorage", isAsync: false },
+        { name: "getNamespace", isAsync: false },
+        { name: "clear", isAsync: false },
+        { name: "getItem", isAsync: false },
+        { name: "removeItem", isAsync: false },
+        { name: "setItem", isAsync: false }
+      ]);
     }
     /**
      * 获取数据存储对象，可以通过
@@ -1901,24 +1985,25 @@
      *    },
      * });
      */
-    async getStorage() {
+    getStorage() {
       return this.storage;
     }
-    async getNamespace() {
+    getNamespace() {
       return this.namespace;
     }
     /**
      * 清理，支持storageService.usePlugin
      */
-    async clear() {
-      const storage = await this.getStorage();
+    clear() {
+      const storage = this.getStorage();
       storage.clear();
     }
     /**
      * 获取存储项，支持storageService.usePlugin
      */
-    async getItem(key, options = {}) {
-      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    getItem(key, options = {}) {
+      const storage = this.getStorage();
+      const namespace = this.getNamespace();
       const { protocol = options.protocol, item } = this.getValueAndProtocol(
         storage.getItem(`${options.namespace || namespace}:${key}`)
       );
@@ -1940,22 +2025,24 @@
     /**
      * 获取指定索引位置的key
      */
-    async key(index) {
-      const storage = await this.getStorage();
+    key(index) {
+      const storage = this.getStorage();
       return storage.key(index);
     }
     /**
      * 移除存储项，支持storageService.usePlugin
      */
-    async removeItem(key, options = {}) {
-      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    removeItem(key, options = {}) {
+      const storage = this.getStorage();
+      const namespace = this.getNamespace();
       storage.removeItem(`${options.namespace || namespace}:${key}`);
     }
     /**
      * 设置存储项，支持storageService.usePlugin
      */
-    async setItem(key, value, options = {}) {
-      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    setItem(key, value, options = {}) {
+      const storage = this.getStorage();
+      const namespace = this.getNamespace();
       let item = value;
       const protocol = options.protocol ? `${options.protocol}:` : "";
       if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
@@ -1992,18 +2079,19 @@
   class Props extends BaseService {
     state = vue.reactive({
       propsConfigMap: {},
-      propsValueMap: {}
+      propsValueMap: {},
+      relateIdMap: {}
     });
     constructor() {
       super([
-        "setPropsConfig",
-        "getPropsConfig",
-        "setPropsValue",
-        "getPropsValue",
-        "createId",
-        "setNewItemId",
-        "fillConfig",
-        "getDefaultPropsValue"
+        { name: "setPropsConfig", isAsync: true },
+        { name: "getPropsConfig", isAsync: true },
+        { name: "setPropsValue", isAsync: true },
+        { name: "getPropsValue", isAsync: true },
+        { name: "createId", isAsync: false },
+        { name: "setNewItemId", isAsync: true },
+        { name: "fillConfig", isAsync: true },
+        { name: "getDefaultPropsValue", isAsync: true }
       ]);
     }
     setPropsConfigs(configs) {
@@ -2083,11 +2171,17 @@
     }
     /**
      * 将组件与组件的子元素配置中的id都设置成一个新的ID
+     * 如果没有相同ID并且force为false则保持不变
      * @param {Object} config 组件配置
+     * @param {Boolean} force 是否强制设置新的ID
      */
     /* eslint no-param-reassign: ["error", { "props": false }] */
-    async setNewItemId(config) {
-      config.id = await this.createId(config.type || "component");
+    async setNewItemId(config, force = true) {
+      if (force || editorService.getNodeById(config.id)) {
+        const newId = await this.createId(config.type || "component");
+        this.setRelateId(config.id, newId);
+        config.id = newId;
+      }
       if (config.items && Array.isArray(config.items)) {
         for (const item of config.items) {
           await this.setNewItemId(item);
@@ -2117,11 +2211,59 @@
       this.state.propsConfigMap = {};
       this.state.propsValueMap = {};
     }
+    /**
+     * 替换关联ID
+     * @param originConfigs 原组件配置
+     * @param targetConfigs 待替换的组件配置
+     */
+    replaceRelateId(originConfigs, targetConfigs) {
+      const relateIdMap = this.getRelateIdMap();
+      if (Object.keys(relateIdMap).length === 0)
+        return;
+      const target = depService.getTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
+      if (!target)
+        return;
+      originConfigs.forEach((config) => {
+        const newId = relateIdMap[config.id];
+        const targetConfig = targetConfigs.find((targetConfig2) => targetConfig2.id === newId);
+        if (!targetConfig)
+          return;
+        target.deps[config.id]?.keys?.forEach((fullKey) => {
+          const relateOriginId = lodashEs.get(config, fullKey);
+          const relateTargetId = relateIdMap[relateOriginId];
+          if (!relateTargetId)
+            return;
+          lodashEs.set(targetConfig, fullKey, relateTargetId);
+        });
+      });
+    }
+    /**
+     * 清除setNewItemId前后映射关系
+     */
+    clearRelateId() {
+      this.state.relateIdMap = {};
+    }
     destroy() {
       this.resetState();
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    /**
+     * 获取setNewItemId前后映射关系
+     * @param oldId 原组件ID
+     * @returns 新旧ID映射
+     */
+    getRelateIdMap() {
+      return this.state.relateIdMap;
+    }
+    /**
+     * 记录setNewItemId前后映射关系
+     * @param oldId 原组件ID
+     * @param newId 分配的新ID
+     */
+    setRelateId(oldId, newId) {
+      this.state.relateIdMap[oldId] = newId;
+    }
   }
   const propsService = new Props();
 
@@ -2141,27 +2283,27 @@
     constructor() {
       super(
         [
-          "getLayout",
-          "select",
-          "doAdd",
-          "add",
-          "doRemove",
-          "remove",
-          "doUpdate",
-          "update",
-          "sort",
-          "copy",
-          "paste",
-          "doPaste",
-          "doAlignCenter",
-          "alignCenter",
-          "moveLayer",
-          "moveToContainer",
-          "move",
-          "undo",
-          "redo",
-          "highlight",
-          "dragTo"
+          { name: "getLayout", isAsync: true },
+          { name: "select", isAsync: true },
+          { name: "doAdd", isAsync: true },
+          { name: "add", isAsync: true },
+          { name: "doRemove", isAsync: true },
+          { name: "remove", isAsync: true },
+          { name: "doUpdate", isAsync: true },
+          { name: "update", isAsync: true },
+          { name: "sort", isAsync: true },
+          { name: "copy", isAsync: true },
+          { name: "paste", isAsync: true },
+          { name: "doPaste", isAsync: true },
+          { name: "doAlignCenter", isAsync: true },
+          { name: "alignCenter", isAsync: true },
+          { name: "moveLayer", isAsync: true },
+          { name: "moveToContainer", isAsync: true },
+          { name: "move", isAsync: true },
+          { name: "undo", isAsync: true },
+          { name: "redo", isAsync: true },
+          { name: "highlight", isAsync: true },
+          { name: "dragTo", isAsync: true }
         ],
         // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
         ["select", "update", "moveLayer"]
@@ -2576,12 +2718,46 @@
       this.pushHistoryState();
     }
     /**
-     * 将组将节点配置转化成string，然后存储到localStorage中
+     * 将组件节点配置存储到localStorage中
      * @param config 组件节点配置
-     * @returns 组件节点配置
+     * @returns
+     */
+    copy(config) {
+      storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+        protocol: Protocol.OBJECT
+      });
+    }
+    /**
+     * 复制时会带上组件关联的依赖
+     * @param config 组件节点配置
+     * @returns
      */
-    async copy(config) {
-      await storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+    copyWithRelated(config) {
+      const copyNodes = Array.isArray(config) ? config : [config];
+      depService.getTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
+      const customTarget = depService.getTarget(
+        dep.DepTargetType.RELATED_COMP_WHEN_COPY,
+        dep.DepTargetType.RELATED_COMP_WHEN_COPY
+      );
+      if (customTarget) {
+        Object.keys(customTarget.deps).forEach((nodeId) => {
+          const node = this.getNodeById(nodeId);
+          if (!node)
+            return;
+          customTarget.deps[nodeId].keys.forEach((key) => {
+            const relateNodeId = lodashEs.get(node, key);
+            const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
+            if (!isExist) {
+              const relateNode = this.getNodeById(relateNodeId);
+              if (relateNode) {
+                copyNodes.push(relateNode);
+              }
+            }
+          });
+        });
+      }
+      storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
         protocol: Protocol.OBJECT
       });
     }
@@ -2591,7 +2767,7 @@
      * @returns 添加后的组件节点配置
      */
     async paste(position = {}) {
-      const config = await storageService.getItem(COPY_STORAGE_KEY);
+      const config = storageService.getItem(COPY_STORAGE_KEY);
       if (!Array.isArray(config))
         return;
       const node = this.get("node");
@@ -2603,9 +2779,11 @@
         }
       }
       const pasteConfigs = await this.doPaste(config, position);
+      propsService.replaceRelateId(config, pasteConfigs);
       return this.add(pasteConfigs, parent);
     }
     async doPaste(config, position = {}) {
+      propsService.clearRelateId();
       const pasteConfigs = await beforePaste(position, lodashEs.cloneDeep(config));
       return pasteConfigs;
     }
@@ -2922,7 +3100,7 @@
         if (pastePosition.top && configItem.style?.top) {
           pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
         }
-        const pasteConfig = await propsService.setNewItemId(configItem);
+        const pasteConfig = await propsService.setNewItemId(configItem, false);
         if (pasteConfig.style) {
           const { left, top } = pasteConfig.style;
           if (typeof left === "number" || !!left && !isNaN(Number(left))) {
@@ -2976,7 +3154,7 @@
     return newNode;
   };
 
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3026,8 +3204,8 @@
     }
   });
 
-  const _hoisted_1$v = ["src"];
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$q = ["src"];
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -3051,7 +3229,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$v)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -3129,9 +3307,9 @@
     };
   };
 
-  const _hoisted_1$u = { class: "m-fields-code-select-col" };
-  const _hoisted_2$o = { class: "code-select-container" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$p = { class: "m-fields-code-select-col" };
+  const _hoisted_2$i = { class: "code-select-container" };
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -3204,8 +3382,8 @@
       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$u, [
-          vue.createElementVNode("div", _hoisted_2$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -3213,14 +3391,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
               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$O, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3228,7 +3406,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$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3241,9 +3419,9 @@
     }
   });
 
-  const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$n = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -3478,12 +3656,12 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$n, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -3535,7 +3713,7 @@
     }
   });
 
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3590,10 +3768,10 @@
     }
   });
 
-  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$b = { class: "el-input__inner" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$6 = { class: "el-input__inner" };
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -3783,12 +3961,12 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$s, [
+            vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$m, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$g, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -3800,7 +3978,7 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$b, [
+            vue.createElementVNode("div", _hoisted_3$6, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                   item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -3818,7 +3996,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$N, {
+              vue.createVNode(_sfc_main$K, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -3901,9 +4079,9 @@
     };
   };
 
-  const _hoisted_1$r = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$l = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$m = { class: "m-editor-data-source-methods" };
+  const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
     },
@@ -3973,12 +4151,12 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$l, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3992,7 +4170,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4007,9 +4185,9 @@
     }
   });
 
-  const _hoisted_1$q = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$k = { class: "data-source-method-select-container" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
+  const _hoisted_2$e = { class: "data-source-method-select-container" };
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
     },
@@ -4092,22 +4270,22 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: cascaderConfig.value,
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
               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$O, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4116,7 +4294,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$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4129,9 +4307,9 @@
     }
   });
 
-  const _hoisted_1$p = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMocks"
     },
@@ -4218,7 +4396,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$T,
+          component: _sfc_main$Q,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -4327,12 +4505,12 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -4363,7 +4541,7 @@
     }
   });
 
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -4420,12 +4598,12 @@
     }
   });
 
-  const _hoisted_1$o = { class: "m-fields-event-select" };
-  const _hoisted_2$i = {
+  const _hoisted_1$j = { class: "m-fields-event-select" };
+  const _hoisted_2$c = {
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -4628,7 +4806,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4638,7 +4816,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$i, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -4688,32 +4866,32 @@
     }
   });
 
-  const _hoisted_1$n = {
+  const _hoisted_1$i = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$h = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-  const _hoisted_4$6 = [
-    _hoisted_2$h
+  const _hoisted_2$b = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_4$4 = [
+    _hoisted_2$b
   ];
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$n, _hoisted_4$6);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, _hoisted_4$4);
       };
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-key-value" };
-  const _hoisted_2$g = { key: 0 };
-  const _hoisted_3$a = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = { class: "m-fields-key-value" };
+  const _hoisted_2$a = { key: 0 };
+  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -4771,8 +4949,8 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             (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",
@@ -4786,7 +4964,7 @@
                   size: _ctx.size,
                   onChange: keyChangeHandler
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-                _hoisted_3$a,
+                _hoisted_3$5,
                 vue.createVNode(vue.unref(design.TMagicInput), {
                   placeholder: "value",
                   modelValue: records.value[index][1],
@@ -4821,7 +4999,7 @@
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
@@ -4837,7 +5015,7 @@
             size: "default",
             disabled: _ctx.disabled,
             text: "",
-            icon: _sfc_main$D,
+            icon: _sfc_main$A,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -4845,12 +5023,12 @@
     }
   });
 
-  const _hoisted_1$l = {
+  const _hoisted_1$g = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -4940,7 +5118,7 @@
             ]),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "清除",
@@ -5007,8 +5185,6 @@
     }
   });
 
-  const UISelect_vue_vue_type_style_index_0_lang = '';
-
   const useGetSo = (target, emit) => {
     let getso;
     const isDraging = vue.ref(false);
@@ -5037,7 +5213,7 @@
     };
   };
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -5059,7 +5235,7 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -5186,7 +5362,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$x, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5195,7 +5371,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$x, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -5208,10 +5384,10 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-editor-empty-panel" };
-  const _hoisted_2$f = { class: "m-editor-empty-content" };
-  const _hoisted_3$9 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$f = { class: "m-editor-empty-panel" };
+  const _hoisted_2$9 = { class: "m-editor-empty-content" };
+  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -5231,16 +5407,16 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$9
+              _hoisted_3$4
             ])
           ])
         ]);
@@ -5252,7 +5428,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$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -5327,13 +5503,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$T, {
+            vue.createVNode(_sfc_main$Q, {
               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$w, {
             key: 1,
             ref_key: "splitView",
             ref: splitView,
@@ -5355,7 +5531,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$v)
               ])
             ]),
             _: 2
@@ -5380,12 +5556,12 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$e = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$e = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -5464,7 +5640,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$e, 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",
@@ -5478,7 +5654,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5496,7 +5672,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5529,7 +5705,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$e, [
+              vue.createElementVNode("span", _hoisted_2$8, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -5546,7 +5722,7 @@
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -5708,7 +5884,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$t, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -5720,8 +5896,8 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-editor-props-panel" };
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = { class: "m-editor-props-panel" };
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -5775,7 +5951,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$d, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -5926,7 +6102,7 @@
     };
   };
 
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -5966,198 +6142,403 @@
     }
   });
 
-  const _hoisted_1$h = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$d = /* @__PURE__ */ vue.createElementVNode("g", {
-    fill: "#7C878E",
-    "fill-rule": "evenodd"
-  }, [
-    /* @__PURE__ */ vue.createElementVNode("path", {
-      d: "M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z",
-      "fill-rule": "nonzero"
-    }),
-    /* @__PURE__ */ vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
-  ], -1);
-  const _hoisted_3$8 = [
-    _hoisted_2$d
-  ];
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorAppManageIcon"
-    },
-    __name: "AppManageIcon",
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$h, _hoisted_3$8);
-      };
-    }
-  });
+  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$g = ["id"];
-  const _hoisted_2$c = { class: "list-item" };
-  const _hoisted_3$7 = {
-    key: 2,
-    class: "right-tool"
+  const _hoisted_1$c = ["draggable", "data-node-id", "data-is-container"];
+  const _hoisted_2$7 = { class: "tree-node-label" };
+  const _hoisted_3$3 = { class: "tree-node-tool" };
+  const _hoisted_4$3 = {
+    key: 0,
+    class: "m-editor-tree-node-children"
   };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeBlockList"
+      name: "MEditorTreeNode"
     },
-    __name: "CodeBlockList",
+    __name: "TreeNode",
     props: {
-      customError: { type: Function }
+      data: {},
+      nodeStatusMap: {},
+      indent: { default: 0 }
     },
-    emits: ["edit", "remove"],
-    setup(__props, { expose: __expose, emit: __emit }) {
+    emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
+    setup(__props, { emit: __emit }) {
+      const treeEmit = vue.inject("treeEmit");
       const props = __props;
-      const emit = __emit;
-      const { codeBlockService, depService, editorService } = vue.inject("services") || {};
-      const codeList = vue.computed(
-        () => Object.values(depService?.getTargets(dep.DepTargetType.CODE_BLOCK) || {}).map((target) => {
-          const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
-            name: dep.name,
-            type: "node",
-            id,
-            children: dep.keys.map((key) => ({ name: key, id: key, type: "key" }))
-          }));
-          return {
-            id: target.id,
-            name: target.name,
-            type: "code",
-            codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-            children: compNodes
-          };
-        })
-      );
-      const expandedKeys = vue.computed(() => codeList.value.map((item) => item.id));
-      const editable = vue.computed(() => codeBlockService?.getEditStatus());
-      const filterNode = (value, data) => {
-        if (!value) {
-          return true;
+      const nodeStatus = vue.computed(
+        () => props.nodeStatusMap?.get(props.data.id) || {
+          selected: false,
+          expand: false,
+          visible: false,
+          draggable: false
         }
-        return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
+      );
+      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?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+      const handleDragStart = (event) => {
+        treeEmit?.("node-dragstart", event, props.data);
       };
-      const selectComp = (compId) => {
-        const stage = editorService?.get("stage");
-        editorService?.select(compId);
-        stage?.select(compId);
+      const handleDragLeave = (event) => {
+        treeEmit?.("node-dragleave", event, props.data);
       };
-      const clickHandler = (data, node) => {
-        if (data.type === "node") {
-          selectComp(data.id);
-        } else if (data.type === "key") {
-          selectComp(node.parent.data.id);
-        }
+      const handleDragEnd = (event) => {
+        treeEmit?.("node-dragend", event, props.data);
       };
-      const editCode = (id) => {
-        emit("edit", id);
+      const nodeContentmenuHandler = (event) => {
+        treeEmit?.("node-contextmenu", event, props.data);
       };
-      const deleteCode = async (id) => {
-        const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
-        const existBinds = Boolean(currentCode?.children.length);
-        const undeleteableList = codeBlockService?.getUndeletableList() || [];
-        if (!existBinds && !undeleteableList.includes(id)) {
-          await design.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          });
-          emit("remove", id);
-        } else {
-          if (typeof props.customError === "function") {
-            props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
-          } else {
-            design.tMagicMessage.error("代码块删除失败");
-          }
-        }
+      const mouseenterHandler = (event) => {
+        treeEmit?.("node-mouseenter", event, props.data);
       };
-      const tree = vue.ref();
-      __expose({
-        filter(val) {
-          tree.value?.filter(val);
+      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$K, {
+              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$7, [
+                  vue.renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
+                    vue.createTextVNode(vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
+                  ])
+                ]),
+                vue.createElementVNode("div", _hoisted_3$3, [
+                  vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
+                ])
+              ])
+            ])
+          ], 38),
+          hasChilren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
+            (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-label": vue.withCtx(({ data: nodeData }) => [
+                  vue.renderSlot(_ctx.$slots, "tree-node-label", { 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$o = /* @__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: __emit }) {
+      const emit = __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$p, {
+              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-label": vue.withCtx(({ data: nodeData }) => [
+                vue.renderSlot(_ctx.$slots, "tree-node-label", { 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 useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
+    const filterIsMatch = (value, data) => {
+      const string = !Array.isArray(value) ? [value] : value;
+      if (!string.length) {
+        return true;
+      }
+      return string.some((v) => filterNodeMethod(v, data));
+    };
+    const filter = (text) => {
+      if (!nodeData.value.length)
+        return;
+      nodeData.value.forEach((node) => {
+        traverseNode(node, (node2, parents) => {
+          if (!nodeStatusMap.value)
+            return;
+          const visible = filterIsMatch(text, node2);
+          if (visible && parents.length) {
+            parents.forEach((parent) => {
+              updateStatus(nodeStatusMap.value, parent.id, {
+                visible,
+                expand: true
+              });
+            });
+          }
+          updateStatus(nodeStatusMap.value, node2.id, {
+            visible
+          });
+        });
+      });
+    };
+    return {
+      filterText: vue.ref(""),
+      filterTextChangeHandler(text) {
+        filter(text);
+      }
+    };
+  };
+
+  const createPageNodeStatus$1 = (nodeData, initalLayerNodeStatus) => {
+    const map = /* @__PURE__ */ new Map();
+    nodeData.forEach(
+      (node) => traverseNode(node, (node2) => {
+        map.set(
+          node2.id,
+          initalLayerNodeStatus?.get(node2.id) || {
+            visible: true,
+            expand: false,
+            selected: false,
+            draggable: false
+          }
+        );
+      })
+    );
+    return map;
+  };
+  const useNodeStatus$1 = (nodeData) => {
+    const nodeStatusMap = vue.ref(/* @__PURE__ */ new Map());
+    vue.watch(
+      nodeData,
+      (nodeData2) => {
+        nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      nodeStatusMap
+    };
+  };
+
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeBlockList"
+    },
+    __name: "CodeBlockList",
+    props: {
+      customError: { type: Function }
+    },
+    emits: ["edit", "remove"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const services = vue.inject("services");
+      const { codeBlockService, depService, editorService } = services || {};
+      const codeList = vue.computed(
+        () => Object.values(depService?.getTargets(dep.DepTargetType.CODE_BLOCK) || {}).map((target) => {
+          const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
+            name: dep.name,
+            type: "node",
+            id: `${target.id}_${id}`,
+            key: id,
+            items: dep.keys.map((key) => {
+              const data2 = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: "key" };
+              return data2;
+            })
+          }));
+          const data = {
+            id: target.id,
+            key: target.id,
+            name: target.name,
+            type: "code",
+            codeBlockContent: codeBlockService?.getCodeContentById(target.id),
+            items: compNodes
+          };
+          return data;
+        })
+      );
+      const filterNode = (value, data) => {
+        if (!value) {
+          return true;
+        }
+        return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
+      };
+      const { nodeStatusMap } = useNodeStatus$1(codeList);
+      const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
+      const editable = vue.computed(() => codeBlockService?.getEditStatus());
+      const selectComp = (compId) => {
+        const stage = editorService?.get("stage");
+        editorService?.select(compId);
+        stage?.select(compId);
+      };
+      const clickHandler = (event, data) => {
+        if (data.type === "node") {
+          selectComp(data.key);
+        }
+      };
+      const editCode = (id) => {
+        emit("edit", id);
+      };
+      const deleteCode = async (id) => {
+        const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
+        const existBinds = Boolean(currentCode?.items?.length);
+        const undeleteableList = codeBlockService?.getUndeletableList() || [];
+        if (!existBinds && !undeleteableList.includes(id)) {
+          await design.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          });
+          emit("remove", id);
+        } else {
+          if (typeof props.customError === "function") {
+            props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+          } else {
+            design.tMagicMessage.error("代码块删除失败");
+          }
         }
+      };
+      __expose({
+        filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
-          ref_key: "tree",
-          ref: tree,
-          class: "magic-editor-layer-tree",
-          "node-key": "id",
-          "empty-text": "暂无代码块",
-          "default-expanded-keys": expandedKeys.value,
-          "expand-on-click-node": false,
+        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           data: codeList.value,
-          props: {
-            children: "children",
-            label: "name",
-            value: "id"
-          },
-          "highlight-current": true,
-          "filter-node-method": filterNode,
+          "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
         }, {
-          default: vue.withCtx(({ data }) => [
+          "tree-node-label": vue.withCtx(({ data }) => [
             vue.createElementVNode("div", {
-              id: data.id,
-              class: "list-container"
-            }, [
-              vue.createElementVNode("div", _hoisted_2$c, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
-                  key: 0,
-                  class: "codeIcon"
-                })) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
-                  key: 1,
-                  class: "compIcon"
-                })) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
-                }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
-                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$7, [
-                  vue.createVNode(vue.unref(design.TMagicTooltip), {
-                    effect: "dark",
-                    content: editable.value ? "编辑" : "查看",
-                    placement: "bottom"
-                  }, {
-                    default: vue.withCtx(() => [
-                      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"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1032, ["content"]),
-                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                    key: 0,
-                    effect: "dark",
-                    content: "删除",
-                    placement: "bottom"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$N, {
-                        icon: vue.unref(iconsVue.Close),
-                        class: "edit-icon",
-                        onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1024)) : vue.createCommentVNode("", true),
-                  vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    id: data.id,
-                    data: data.codeBlockContent
-                  })
-                ])) : vue.createCommentVNode("", true)
-              ])
-            ], 8, _hoisted_1$g)
+              class: vue.normalizeClass({
+                code: data.type === "code",
+                hook: data.type === "key",
+                disabled: data.type === "key" || data.type === "code"
+              })
+            }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
+          ]),
+          "tree-node-tool": vue.withCtx(({ data }) => [
+            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 0,
+              effect: "dark",
+              content: editable.value ? "编辑" : "查看",
+              placement: "bottom"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$K, {
+                  icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                  class: "edit-icon",
+                  onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 2
+            }, 1032, ["content"])) : vue.createCommentVNode("", true),
+            data.type === "code" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 1,
+              effect: "dark",
+              content: "删除",
+              placement: "bottom"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$K, {
+                  icon: vue.unref(iconsVue.Close),
+                  class: "edit-icon",
+                  onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 2
+            }, 1024)) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+              id: data.key,
+              data
+            })
           ]),
           _: 3
-        }, 8, ["default-expanded-keys", "data"]);
+        }, 8, ["data", "node-status-map"]);
       };
     }
   });
 
-  const _hoisted_1$f = { class: "search-wrapper" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "search-wrapper" };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -6176,11 +6557,11 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
+          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-                vue.createElementVNode("div", _hoisted_1$f, [
-                  vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+                vue.createElementVNode("div", _hoisted_1$a, [
+                  vue.createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -6196,7 +6577,7 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$r, {
+              vue.createVNode(_sfc_main$n, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
@@ -6214,7 +6595,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -6228,7 +6609,7 @@
     }
   });
 
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -6284,13 +6665,7 @@
     }
   });
 
-  const _hoisted_1$e = ["id"];
-  const _hoisted_2$b = { class: "list-item" };
-  const _hoisted_3$6 = {
-    key: 2,
-    class: "right-tool"
-  };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -6304,20 +6679,27 @@
       const dsDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE) || {});
       const dsMethodDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE_METHOD) || {});
       const dsCondDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE_COND) || {});
-      const getKeyTreeConfig = (dep, type) => dep.keys.map((key) => ({ name: key, id: key, type: "key", isMethod: type === "method", isCond: type === "cond" }));
-      const getNodeTreeConfig = (id, dep, type) => ({
+      const getKeyTreeConfig = (dep, type, parentKey) => dep.keys.map((key) => ({
+        name: key,
+        id: `${parentKey}_${key}`,
+        type: "key",
+        isMethod: type === "method",
+        isCond: type === "cond"
+      }));
+      const getNodeTreeConfig = (id, dep, type, parentKey) => ({
         name: dep.name,
         type: "node",
-        id,
-        children: getKeyTreeConfig(dep, type)
+        id: `${parentKey}_${id}`,
+        key: id,
+        items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`)
       });
-      const mergeChildren = (children, deps, type) => {
+      const mergeChildren = (dsId, items, deps, type) => {
         Object.entries(deps).forEach(([id, dep]) => {
-          const nodeItem = children.find((item) => item.id === id);
+          const nodeItem = items.find((item) => item.key === id);
           if (nodeItem) {
-            nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+            nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
           } else {
-            children.push(getNodeTreeConfig(id, dep, type));
+            items.push(getNodeTreeConfig(id, dep, type, dsId));
           }
         });
       };
@@ -6326,18 +6708,27 @@
           const dsDeps = dsDep.value[ds.id]?.deps || {};
           const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
           const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
-          const children = [];
-          mergeChildren(children, dsDeps);
-          mergeChildren(children, dsMethodDeps, "method");
-          mergeChildren(children, dsCondDeps, "cond");
+          const items = [];
+          mergeChildren(ds.id, items, dsDeps);
+          mergeChildren(ds.id, items, dsMethodDeps, "method");
+          mergeChildren(ds.id, items, dsCondDeps, "cond");
           return {
             id: ds.id,
+            key: ds.id,
             name: ds.title,
             type: "ds",
-            children
+            items
           };
         })
       );
+      const filterNode = (value, data) => {
+        if (!value) {
+          return true;
+        }
+        return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
+      };
+      const { nodeStatusMap } = useNodeStatus$1(list);
+      const { filterTextChangeHandler } = useFilter(list, nodeStatusMap, filterNode);
       const editHandler = (id) => {
         emit("edit", id);
       };
@@ -6354,95 +6745,71 @@
         editorService?.select(compId);
         stage?.select(compId);
       };
-      const clickHandler = (data, node) => {
+      const clickHandler = (event, data) => {
         if (data.type === "node") {
-          selectComp(data.id);
-        } else if (data.type === "key") {
-          selectComp(node.parent.data.id);
+          selectComp(data.key);
         }
       };
-      const tree = vue.ref();
       __expose({
-        filter(val) {
-          tree.value?.filter(val);
-        }
+        filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
-          ref_key: "tree",
-          ref: tree,
-          class: "magic-editor-layer-tree",
-          "node-key": "id",
-          "empty-text": "暂无代码块",
-          "default-expand-all": "",
-          "expand-on-click-node": false,
+        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           data: list.value,
-          "highlight-current": true,
+          "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
         }, {
-          default: vue.withCtx(({ data }) => [
+          "tree-node-label": vue.withCtx(({ data }) => [
             vue.createElementVNode("div", {
-              id: data.id,
-              class: "list-container"
-            }, [
-              vue.createElementVNode("div", _hoisted_2$b, [
-                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$N, {
-                  key: 1,
-                  class: "compIcon",
-                  icon: vue.unref(iconsVue.Aim)
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
-                }, vue.toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, [
-                  vue.createVNode(vue.unref(design.TMagicTooltip), {
-                    effect: "dark",
-                    content: editable.value ? "编辑" : "查看",
-                    placement: "bottom"
-                  }, {
-                    default: vue.withCtx(() => [
-                      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"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1032, ["content"]),
-                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                    key: 0,
-                    effect: "dark",
-                    content: "删除",
-                    placement: "bottom"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$N, {
-                        icon: vue.unref(iconsVue.Close),
-                        class: "edit-icon",
-                        onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1024)) : vue.createCommentVNode("", true),
-                  vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
-                ])) : vue.createCommentVNode("", true)
-              ])
-            ], 8, _hoisted_1$e)
+              class: vue.normalizeClass({
+                ds: data.type === "ds",
+                hook: data.type === "key",
+                disabled: data.type === "key" || data.type === "ds"
+              })
+            }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
+          ]),
+          "tree-node-tool": vue.withCtx(({ data }) => [
+            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 0,
+              effect: "dark",
+              content: editable.value ? "编辑" : "查看",
+              placement: "bottom"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$K, {
+                  icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                  class: "edit-icon",
+                  onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 2
+            }, 1032, ["content"])) : vue.createCommentVNode("", true),
+            data.type === "ds" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 1,
+              effect: "dark",
+              content: "删除",
+              placement: "bottom"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$K, {
+                  icon: vue.unref(iconsVue.Close),
+                  class: "edit-icon",
+                  onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 2
+            }, 1024)) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
           ]),
           _: 3
-        }, 8, ["data"]);
+        }, 8, ["data", "node-status-map"]);
       };
     }
   });
 
-  const _hoisted_1$d = { class: "search-wrapper" };
-  const _hoisted_2$a = { class: "data-source-list-panel-add-menu" };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$9 = { class: "search-wrapper" };
+  const _hoisted_2$6 = { class: "data-source-list-panel-add-menu" };
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -6504,10 +6871,10 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
+          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$d, [
-                vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$9, [
+                vue.createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
                   placement: "right"
@@ -6524,9 +6891,9 @@
                     })
                   ]),
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_2$a, [
+                    vue.createElementVNode("div", _hoisted_2$6, [
                       (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$t, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -6542,14 +6909,14 @@
                   _: 1
                 })) : vue.createCommentVNode("", true)
               ]),
-              vue.createVNode(_sfc_main$o, {
+              vue.createVNode(_sfc_main$k, {
                 onEdit: editHandler,
                 onRemove: removeHandler
               })
             ]),
             _: 1
           }),
-          vue.createVNode(_sfc_main$p, {
+          vue.createVNode(_sfc_main$l, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -6563,182 +6930,7 @@
     }
   });
 
-  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: __emit }) {
-      const treeEmit = vue.inject("treeEmit");
-      const props = __props;
-      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: __emit }) {
-      const emit = __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({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -6869,7 +7061,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$t, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -6904,7 +7096,7 @@
     }
   });
 
-  const _hoisted_1$a = {
+  const _hoisted_1$8 = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -6912,26 +7104,26 @@
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$8 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
   }, null, -1);
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
   }, null, -1);
-  const _hoisted_4$4 = [
-    _hoisted_2$8,
-    _hoisted_3$4
+  const _hoisted_4$2 = [
+    _hoisted_2$5,
+    _hoisted_3$2
   ];
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, _hoisted_4$4);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
       };
     }
   });
@@ -6949,7 +7141,6 @@
       nodes && services?.editorService?.remove(nodes);
     }
   });
-  const canPaste = vue.ref(false);
   const useCopyMenu = () => ({
     type: "button",
     text: "复制",
@@ -6957,14 +7148,13 @@
     handler: (services) => {
       const nodes = services?.editorService?.get("nodes");
       nodes && services?.editorService?.copy(nodes);
-      canPaste.value = true;
     }
   });
   const usePasteMenu = (menu) => ({
     type: "button",
     text: "粘贴",
     icon: vue.markRaw(iconsVue.DocumentCopy),
-    display: () => canPaste.value,
+    display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
     handler: (services) => {
       const nodes = services?.editorService?.get("nodes");
       if (!nodes || nodes.length === 0)
@@ -7011,7 +7201,7 @@
     };
   };
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -7075,7 +7265,7 @@
         {
           type: "button",
           text: "全部折叠",
-          icon: _sfc_main$j,
+          icon: _sfc_main$h,
           display: () => utils.isPage(node.value),
           handler: () => {
             emit("collapse-all");
@@ -7101,7 +7291,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$k, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$i, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -7111,7 +7301,7 @@
     }
   });
 
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNodeTool",
     props: {
       data: {}
@@ -7130,12 +7320,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$N, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
             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$N, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$K, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -7337,50 +7527,6 @@
     };
   };
 
-  const useFilter = (nodeStatusMap, page) => {
-    const filterIsMatch = (value, data) => {
-      if (!value) {
-        return true;
-      }
-      let name = "";
-      if (data.name) {
-        name = data.name;
-      } else if (data.items) {
-        name = "container";
-      }
-      return `${data.id}${name}${data.type}`.includes(value);
-    };
-    const filterNode = (text) => (node, parents) => {
-      if (!nodeStatusMap.value)
-        return;
-      const visible = filterIsMatch(text, node);
-      if (visible && parents.length) {
-        parents.forEach((parent) => {
-          updateStatus(nodeStatusMap.value, parent.id, {
-            visible,
-            expand: true
-          });
-        });
-      }
-      updateStatus(nodeStatusMap.value, node.id, {
-        visible
-      });
-    };
-    const filter = (text) => {
-      if (!page.value?.items?.length)
-        return;
-      page.value.items.forEach((node) => {
-        traverseNode(node, filterNode(text));
-      });
-    };
-    return {
-      filterText: vue.ref(""),
-      filterTextChangeHandler(text) {
-        filter(text);
-      }
-    };
-  };
-
   var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
     KeyBindingContainerKey2["STAGE"] = "stage";
     KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
@@ -7543,15 +7689,15 @@
     };
   };
 
-  const createPageNodeStatus = (services, pageId, initalLayerNodeStatus) => {
+  const createPageNodeStatus = (page, initalLayerNodeStatus) => {
     const map = /* @__PURE__ */ new Map();
-    map.set(pageId, {
+    map.set(page.id, {
       visible: true,
       expand: true,
       selected: true,
       draggable: false
     });
-    services?.editorService.getNodeById(pageId)?.items.forEach(
+    page.items.forEach(
       (node) => traverseNode(node, (node2) => {
         map.set(
           node2.id,
@@ -7566,7 +7712,8 @@
     );
     return map;
   };
-  const useNodeStatus = (services, page) => {
+  const useNodeStatus = (services) => {
+    const page = vue.computed(() => services?.editorService.get("page"));
     const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
     const nodeStatusMaps = vue.ref(/* @__PURE__ */ new Map());
     const nodeStatusMap = vue.computed(
@@ -7578,7 +7725,7 @@
         if (!page2) {
           return;
         }
-        nodeStatusMaps.value.set(page2.id, createPageNodeStatus(services, page2.id, nodeStatusMaps.value.get(page2.id)));
+        nodeStatusMaps.value.set(page2.id, createPageNodeStatus(page2, nodeStatusMaps.value.get(page2.id)));
       },
       {
         immediate: true
@@ -7629,7 +7776,7 @@
     };
   };
 
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerPanel"
     },
@@ -7642,9 +7789,19 @@
       const editorService = services?.editorService;
       const tree = vue.ref();
       const page = vue.computed(() => editorService?.get("page"));
-      const { nodeStatusMap } = useNodeStatus(services, page);
+      const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
+      const { nodeStatusMap } = useNodeStatus(services);
       const { isCtrlKeyDown } = useKeybinding(services, tree);
-      const { filterTextChangeHandler } = useFilter(nodeStatusMap, page);
+      const filterNodeMethod = (v, data) => {
+        let name = "";
+        if (data.name) {
+          name = data.name;
+        } else if (data.items) {
+          name = "container";
+        }
+        return `${data.id}${name}${data.type}`.includes(v);
+      };
+      const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
       const collapseAllHandler = () => {
         if (!page.value || !nodeStatusMap.value)
           return;
@@ -7667,13 +7824,13 @@
         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"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+            vue.createVNode(_sfc_main$q, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
               ref: tree,
-              data: [page.value],
+              data: nodeData.value,
               "node-status-map": vue.unref(nodeStatusMap),
               onNodeDragover: vue.unref(handleDragOver),
               onNodeDragstart: vue.unref(handleDragStart),
@@ -7683,18 +7840,21 @@
               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: nodeData2 }) => [
+                vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData2 })
+              ]),
+              "tree-node-tool": vue.withCtx(({ data: nodeData2 }) => [
+                vue.renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
+                  vue.createVNode(_sfc_main$f, { data: nodeData2 }, null, 8, ["data"])
                 ])
               ]),
-              "tree-node-content": vue.withCtx(({ data: nodeData }) => [
-                vue.renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+              "tree-node-label": vue.withCtx(({ data: nodeData2 }) => [
+                vue.renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData2 })
               ]),
               _: 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$i, {
+              vue.createVNode(_sfc_main$g, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu,
@@ -7708,9 +7868,9 @@
     }
   });
 
-  const _hoisted_1$9 = ["onClick", "onDragstart"];
-  const _hoisted_2$7 = ["title"];
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = ["onClick", "onDragstart"];
+  const _hoisted_2$4 = ["title"];
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
     },
@@ -7790,7 +7950,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$q, { 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), {
@@ -7798,7 +7958,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -7819,7 +7979,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$N, {
+                                  vue.createVNode(_sfc_main$K, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -7827,9 +7987,9 @@
                               }, 1032, ["disabled", "content"]),
                               vue.createElementVNode("span", {
                                 title: item.text
-                              }, vue.toDisplayString(item.text), 9, _hoisted_2$7)
+                              }, vue.toDisplayString(item.text), 9, _hoisted_2$4)
                             ])
-                          ], 40, _hoisted_1$9);
+                          ], 40, _hoisted_1$7);
                         }), 128))
                       ]),
                       _: 2
@@ -7846,20 +8006,20 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$6 = {
     key: 0,
     class: "m-editor-sidebar"
   };
-  const _hoisted_2$6 = { class: "m-editor-sidebar-header" };
-  const _hoisted_3$3 = ["onClick", "onDragend"];
-  const _hoisted_4$3 = {
+  const _hoisted_2$3 = { class: "m-editor-sidebar-header" };
+  const _hoisted_3$1 = ["onClick", "onDragend"];
+  const _hoisted_4$1 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const _hoisted_5$3 = { class: "m-editor-float-box-list" };
-  const _hoisted_6$2 = ["onClick"];
+  const _hoisted_5$1 = { class: "m-editor-float-box-list" };
+  const _hoisted_6 = ["onClick"];
   const _hoisted_7 = { class: "m-editor-float-box-body" };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
     },
@@ -7879,7 +8039,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$f,
+            component: _sfc_main$d,
             slots: {}
           },
           layer: {
@@ -7890,7 +8050,7 @@
             props: {
               layerContentMenu: props.layerContentMenu
             },
-            component: _sfc_main$g,
+            component: _sfc_main$e,
             slots: {}
           },
           "code-block": {
@@ -7898,7 +8058,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$q,
+            component: _sfc_main$m,
             slots: {},
             boxComponentConfig: {
               props: {
@@ -7911,7 +8071,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$n,
+            component: _sfc_main$j,
             slots: {},
             boxComponentConfig: {
               props: {
@@ -7954,24 +8114,24 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-            vue.createElementVNode("div", _hoisted_2$6, [
+          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+            vue.createElementVNode("div", _hoisted_2$3, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
+                  draggable: "true",
                   key: config.$key ?? index,
                   onClick: ($event) => activeTabName.value = config.text || `${index}`,
-                  draggable: "true",
                   onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                  config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
-                ], 42, _hoisted_3$3)), [
+                  config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                ], 42, _hoisted_3$1)), [
                   [vue.vShow, !vue.unref(floatBoxStates)?.get(config.$key)?.status]
                 ]);
               }), 128))
@@ -8040,6 +8200,19 @@
                     ]),
                     key: "5"
                   } : void 0,
+                  config.$key === "layer" || config.slots?.layerNodeLabel ? {
+                    name: "layer-node-label",
+                    fn: vue.withCtx(({ data: nodeData }) => [
+                      config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-label", {
+                        key: 0,
+                        data: nodeData
+                      }) : config.slots?.layerNodeLabel ? (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 === "layer" || config.slots?.layerNodeTool ? {
                     name: "layer-node-tool",
                     fn: vue.withCtx(({ data: nodeData }) => [
@@ -8051,7 +8224,7 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "6"
+                    key: "7"
                   } : void 0,
                   config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
                     name: "data-source-panel-tool",
@@ -8061,7 +8234,7 @@
                         data
                       }) : config.slots?.DataSourcePanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : vue.createCommentVNode("", true)
                     ]),
-                    key: "7"
+                    key: "8"
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
               ])), [
@@ -8070,7 +8243,7 @@
             }), 128))
           ])) : vue.createCommentVNode("", true),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createElementVNode("div", _hoisted_5$3, [
+            vue.createElementVNode("div", _hoisted_5$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   key: config.$key ?? index,
@@ -8089,12 +8262,12 @@
                     onClick: ($event) => vue.unref(showFloatBox)(config.$key)
                   }, [
                     vue.createElementVNode("div", null, vue.toDisplayString(config.text), 1),
-                    vue.createVNode(_sfc_main$N, {
+                    vue.createVNode(_sfc_main$K, {
                       class: "m-editor-float-box-close",
                       icon: vue.unref(iconsVue.Close),
                       onClick: vue.withModifiers(($event) => vue.unref(closeFloatBox)(config.$key), ["stop"])
                     }, null, 8, ["icon", "onClick"])
-                  ], 10, _hoisted_6$2),
+                  ], 10, _hoisted_6),
                   vue.createElementVNode("div", _hoisted_7, [
                     config && vue.unref(floatBoxStates)?.get(config.$key)?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.boxComponentConfig?.component || config.component), vue.mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
                   ])
@@ -8237,7 +8410,7 @@
     };
   }
 
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollBar"
     },
@@ -8325,9 +8498,7 @@
     }
   });
 
-  const ScrollBar_vue_vue_type_style_index_0_lang = '';
-
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
     },
@@ -8413,14 +8584,14 @@
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
             key: 0,
             "scroll-size": scrollHeight.value,
             size: _ctx.wrapHeight,
             pos: vOffset.value,
             onScroll: vScrollHandler
           }, null, 8, ["scroll-size", "size", "pos"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
             key: 1,
             "is-horizontal": true,
             "scroll-size": scrollWidth.value,
@@ -8459,7 +8630,10 @@
   });
   class Ui extends BaseService {
     constructor() {
-      super(["zoom", "calcZoom"]);
+      super([
+        { name: "zoom", isAsync: true },
+        { name: "calcZoom", isAsync: true }
+      ]);
     }
     set(name, value) {
       const mask = editorService.get("stage")?.mask;
@@ -8550,6 +8724,7 @@
       containerHighlightDuration: stageOptions.containerHighlightDuration,
       containerHighlightType: stageOptions.containerHighlightType,
       disabledDragStart: stageOptions.disabledDragStart,
+      renderType: stageOptions.renderType,
       canSelect: (el, event, stop) => {
         const elCanSelect = stageOptions.canSelect(el);
         if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -8615,228 +8790,142 @@
     return stage;
   };
 
-  const _hoisted_1$7 = {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "icon icon-tabler icon-tabler-pin",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    "stroke-width": "2",
-    stroke: "currentColor",
-    fill: "none",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  };
-  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("path", {
-    stroke: "none",
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }, null, -1);
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" }, null, -1);
-  const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("line", {
-    x1: "9",
-    y1: "15",
-    x2: "4.5",
-    y2: "19.5"
-  }, null, -1);
-  const _hoisted_5$2 = /* @__PURE__ */ vue.createElementVNode("line", {
-    x1: "14.5",
-    y1: "4",
-    x2: "20",
-    y2: "9.5"
-  }, null, -1);
-  const _hoisted_6$1 = [
-    _hoisted_2$5,
-    _hoisted_3$2,
-    _hoisted_4$2,
-    _hoisted_5$2
-  ];
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPinIcon"
-    },
-    __name: "PinIcon",
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, _hoisted_6$1);
-      };
-    }
-  });
-
-  const _hoisted_1$6 = {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "icon icon-tabler icon-tabler-pinned",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    "stroke-width": "2",
-    stroke: "currentColor",
-    fill: "none",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    stroke: "none",
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }, null, -1);
-  const _hoisted_3$1 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M9 4v6l-2 4v2h10v-2l-2 -4v-6" }, null, -1);
-  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("line", {
-    x1: "12",
-    y1: "16",
-    x2: "12",
-    y2: "21"
-  }, null, -1);
-  const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("line", {
-    x1: "8",
-    y1: "4",
-    x2: "16",
-    y2: "4"
-  }, null, -1);
-  const _hoisted_6 = [
-    _hoisted_2$4,
-    _hoisted_3$1,
-    _hoisted_4$1,
-    _hoisted_5$1
-  ];
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPinnedIcon"
-    },
-    __name: "PinnedIcon",
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _hoisted_6);
-      };
-    }
-  });
-
-  const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode("span", null, "可选组件", -1);
-  const _hoisted_2$3 = { style: { "margin-right": "10px" } };
+  const _hoisted_1$5 = { class: "m-editor-float-box-body" };
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorNodeListMenuTitle"
-    },
-    __name: "NodeListMenuTitle",
+    __name: "FloatingBox",
     props: {
-      pinned: { type: Boolean }
+      visible: { type: Boolean, default: false },
+      position: { default: () => ({ left: 0, top: 0 }) },
+      rect: { default: () => ({ width: "auto", height: "auto" }) },
+      title: { default: "" }
     },
-    emits: ["close", "update:pinned", "change"],
-    setup(__props, { emit: __emit }) {
+    emits: ["update:visible"],
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const pinHandler = () => {
-        emit("update:pinned", !props.pinned);
+      const target = vue.ref();
+      const dragTarget = vue.ref();
+      const style = vue.computed(() => ({
+        left: `${props.position.left}px`,
+        top: `${props.position.top}px`,
+        width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
+        height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
+      }));
+      let moveable = null;
+      const initMoveable = () => {
+        moveable = new Moveable(globalThis.document.body, {
+          className: "m-editor-floating-box-moveable",
+          target: target.value,
+          draggable: true,
+          resizable: true,
+          edge: true,
+          keepRatio: false,
+          origin: false,
+          snappable: true,
+          dragTarget: dragTarget.value,
+          dragTargetSelf: false,
+          linePadding: 10,
+          controlPadding: 10
+        });
+        moveable.on("drag", (e) => {
+          e.target.style.transform = e.transform;
+        });
+        moveable.on("resize", (e) => {
+          e.target.style.width = `${e.width}px`;
+          e.target.style.height = `${e.height}px`;
+          e.target.style.transform = e.drag.transform;
+        });
+      };
+      const destroyMoveable = () => {
+        moveable?.destroy();
+        moveable = null;
       };
+      vue.watch(
+        () => props.visible,
+        async (visible) => {
+          if (visible) {
+            await vue.nextTick();
+            initMoveable();
+          } else {
+            destroyMoveable();
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.onBeforeUnmount(() => {
+        destroyMoveable();
+      });
       const closeHandler = () => {
-        emit("close");
+        emit("update:visible", false);
       };
-      const target = vue.ref();
-      useGetSo(target, emit);
+      __expose({
+        target
+      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          style: { "text-align": "center", "padding": "5px 0", "font-size": "14px", "cursor": "move", "display": "flex", "justify-content": "space-between", "align-items": "center" },
-          ref_key: "target",
-          ref: target
+        return _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 0,
+          to: "body"
         }, [
-          vue.createVNode(vue.unref(design.TMagicTooltip), {
-            placement: "top",
-            content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$N, {
-                style: { "margin-left": "10px", "cursor": "pointer" },
-                icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
-                onClick: pinHandler
-              }, null, 8, ["icon"])
-            ]),
-            _: 1
-          }, 8, ["content"]),
-          _hoisted_1$5,
-          vue.createElementVNode("div", _hoisted_2$3, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
-              text: "",
-              size: "small",
-              onClick: closeHandler
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+          vue.createElementVNode("div", {
+            ref_key: "target",
+            ref: target,
+            class: "m-editor-float-box",
+            style: vue.normalizeStyle(style.value)
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "dragTarget",
+              ref: dragTarget,
+              class: "m-editor-float-box-title"
+            }, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
               ]),
-              _: 1
-            })
-          ])
-        ], 512);
+              vue.createElementVNode("div", null, [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  text: "",
+                  size: "small",
+                  icon: vue.unref(iconsVue.Close),
+                  onClick: closeHandler
+                }, null, 8, ["icon"])
+              ])
+            ], 512),
+            vue.createElementVNode("div", _hoisted_1$5, [
+              vue.renderSlot(_ctx.$slots, "body")
+            ])
+          ], 4)
+        ])) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const PINNED_STATUE_CACHE_KEY = "tmagic-pinned-node-list-pinned-status";
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
-    props: {
-      isMultiSelect: { type: Boolean }
-    },
     setup(__props) {
-      const props = __props;
-      const menu = vue.ref();
-      const nodeList = vue.ref([]);
-      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;
+      const visible = vue.ref(false);
+      const buttonVisible = vue.ref(false);
+      const button = vue.ref();
+      const box = vue.ref();
       const stage = vue.computed(() => editorService?.get("stage"));
       const page = vue.computed(() => editorService?.get("page"));
-      const node = vue.computed(() => editorService?.get("node"));
-      let timeout = null;
-      const cancel = () => {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-        }
-        if (pinned.value) {
-          return;
-        }
-        nodeList.value = [];
-        menu.value?.hide();
-      };
-      const clearTimeoutLazy = () => {
-        globalThis.setTimeout(() => {
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-          }
-        }, 300);
-      };
+      const nodes = vue.computed(() => editorService?.get("nodes") || []);
+      const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
+      const { nodeStatusMap } = useNodeStatus(services);
+      const filterNodeMethod = (value, data) => data.id === value;
+      const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
       const unWatch = vue.watch(
         stage,
         (stage2) => {
           if (!stage2)
             return;
-          stage2.on("drag-start", () => {
-            cancel();
-          });
-          stage2.on("mousemove", (event) => {
-            cancel();
-            if (props.isMultiSelect || stage2.getDragStatus() !== StageCore.StageDragStatus.END) {
-              return;
-            }
-            timeout = globalThis.setTimeout(() => {
-              const els = stage2.renderer.getElementsFromPoint(event) || [];
-              const nodes = utils.getNodes(
-                els.map((el) => el.id),
-                page.value?.items
-              );
-              if (pinned.value && nodes.length === 0) {
-                return;
-              }
-              nodeList.value = nodes;
-              if (nodeList.value.length > 1) {
-                menu.value?.show(pinned.value && !firstShow.value ? void 0 : event);
-                firstShow.value = false;
-              }
-            }, 1500);
-          });
-          stage2.on("mouseleave", () => {
-            clearTimeoutLazy();
+          stage2.on("select", (el, event) => {
+            const els = stage2.renderer.getElementsFromPoint(event) || [];
+            const ids = els.map((el2) => el2.id).filter((id) => Boolean(id));
+            buttonVisible.value = ids.length > 3;
+            filterTextChangeHandler(ids);
           });
           unWatch();
         },
@@ -8844,75 +8933,75 @@
           immediate: true
         }
       );
-      const componentMap = vue.computed(() => {
-        const map = {};
-        componentListService?.getList().forEach((group) => {
-          group.items.forEach((item) => {
-            map[item.type] = item;
-          });
-        });
-        return map;
-      });
-      const menuData = vue.computed(
-        () => nodeList.value.map((node2) => {
-          let text = node2.name;
-          let icon;
-          if (node2.type) {
-            const item = componentMap.value[node2.type];
-            text += ` (${item?.text})`;
-            icon = item?.icon;
+      vue.watch(
+        nodes,
+        (nodes2) => {
+          if (!nodeStatusMap.value)
+            return;
+          for (const [id, status] of nodeStatusMap.value.entries()) {
+            status.selected = nodes2.some((node) => node.id === id);
           }
-          return {
-            type: "button",
-            text,
-            id: node2.id,
-            icon,
-            handler: async () => {
-              await editorService?.select(node2);
-              stage.value?.select(node2.id);
-            }
-          };
-        })
+        },
+        {
+          immediate: true
+        }
       );
-      const mouseenterHandler = () => {
-        clearTimeoutLazy();
+      const clickHandler = async (event, data) => {
+        await editorService?.select(data.id);
+        stage.value?.select(data.id);
       };
-      const dragMenuHandler = ({ deltaY, deltaX }) => {
-        if (!menu.value)
+      const menuPosition = vue.ref({
+        left: 0,
+        top: 0
+      });
+      vue.watch(visible, async (visible2) => {
+        if (!button.value || !visible2) {
           return;
-        const { menuPosition } = menu.value;
-        menu.value?.setPosition({
-          clientY: menuPosition.top + deltaY,
-          clientX: menuPosition.left + deltaX
-        });
-      };
-      const closeHandler = () => {
-        menu.value?.hide();
-      };
-      vue.watch(pinned, () => {
-        globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+        }
+        await vue.nextTick();
+        const rect = button.value.getBoundingClientRect();
+        const height = box.value?.target?.clientHeight || 0;
+        menuPosition.value = {
+          left: rect.left + rect.width + 5,
+          top: rect.top - height / 2 + rect.height / 2
+        };
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$k, {
-          ref_key: "menu",
-          ref: menu,
-          class: "magic-editor-node-list-menu",
-          style: { "max-width": "280px" },
-          "menu-data": menuData.value,
-          active: node.value?.id,
-          "auto-hide": !pinned.value,
-          onMouseenter: _cache[1] || (_cache[1] = ($event) => mouseenterHandler())
-        }, {
-          title: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$9, {
-              pinned: pinned.value,
-              "onUpdate:pinned": _cache[0] || (_cache[0] = ($event) => pinned.value = $event),
-              onChange: dragMenuHandler,
-              onClose: closeHandler
-            }, null, 8, ["pinned"])
-          ]),
-          _: 1
-        }, 8, ["menu-data", "active", "auto-hide"]);
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          page.value && buttonVisible.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            key: 0,
+            content: "点击查看当前位置下的组件"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                ref_key: "button",
+                ref: button,
+                class: "m-editor-stage-float-button",
+                onClick: _cache[0] || (_cache[0] = ($event) => visible.value = true)
+              }, "可选组件", 512)
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true),
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+            key: 1,
+            ref_key: "box",
+            ref: box,
+            visible: visible.value,
+            "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+            title: "当前位置下的组件",
+            position: menuPosition.value
+          }, {
+            body: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$o, {
+                class: "m-editor-node-list-menu magic-editor-layer-tree",
+                data: nodeData.value,
+                "node-status-map": vue.unref(nodeStatusMap),
+                onNodeClick: clickHandler
+              }, null, 8, ["data", "node-status-map"])
+            ]),
+            _: 1
+          }, 8, ["visible", "position"])) : vue.createCommentVNode("", true)
+        ], 64);
       };
     }
   });
@@ -8974,7 +9063,6 @@
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const menu = vue.ref();
-      const canPaste = vue.ref(false);
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
       const nodes = vue.computed(() => editorService?.get("nodes"));
@@ -9072,14 +9160,12 @@
         },
         { immediate: true }
       );
-      const show = async (e) => {
+      const show = (e) => {
         menu.value?.show(e);
-        const data = await storageService.getItem(COPY_STORAGE_KEY);
-        canPaste.value = data !== "undefined" && !!data;
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$k, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$i, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -9236,7 +9322,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
@@ -9262,17 +9348,14 @@
               onDrop: dropHandler,
               onDragover: dragoverHandler
             }, null, 36),
+            vue.createVNode(_sfc_main$8),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$6, {
                 ref_key: "menu",
                 ref: menu,
                 "is-multi-select": isMultiSelect.value,
                 "stage-content-menu": _ctx.stageContentMenu
-              }, null, 8, ["is-multi-select", "stage-content-menu"]),
-              vue.createVNode(_sfc_main$8, {
-                ref: "nodeList",
-                "is-multi-select": isMultiSelect.value
-              }, null, 8, ["is-multi-select"])
+              }, null, 8, ["is-multi-select", "stage-content-menu"])
             ]))
           ]),
           _: 1
@@ -9418,14 +9501,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$K, { 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$N, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -9441,7 +9524,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$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -9513,7 +9596,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$t, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -9521,7 +9604,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$w, {
+                        vue.createVNode(_sfc_main$t, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -9588,7 +9671,13 @@
       paramsColConfig: void 0
     });
     constructor() {
-      super(["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"]);
+      super([
+        { name: "setCodeDslById", isAsync: true },
+        { name: "setEditStatus", isAsync: true },
+        { name: "setCombineIds", isAsync: true },
+        { name: "setUndeleteableList", isAsync: true },
+        { name: "deleteCodeDslByIds", isAsync: true }
+      ]);
     }
     /**
      * 设置活动的代码块dsl数据源
@@ -9791,42 +9880,6 @@
   }
   const componentListService = new ComponentList();
 
-  class Dep extends BaseService {
-    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
-    removeTargets(type = dep.DepTargetType.DEFAULT) {
-      this.watcher.removeTargets(type);
-      this.emit("remove-target");
-    }
-    getTargets(type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.getTargets(type);
-    }
-    getTarget(id) {
-      return this.watcher.getTarget(id);
-    }
-    addTarget(target) {
-      this.watcher.addTarget(target);
-      this.emit("add-target", target);
-    }
-    removeTarget(id) {
-      this.watcher.removeTarget(id);
-      this.emit("remove-target");
-    }
-    clearTargets() {
-      this.watcher.clearTargets();
-    }
-    collect(nodes, deep = false) {
-      this.watcher.collect(nodes, deep);
-      this.emit("collected", nodes, deep);
-    }
-    clear(nodes) {
-      return this.watcher.clear(nodes);
-    }
-    hasTarget(id) {
-      return this.watcher.hasTarget(id);
-    }
-  }
-  const depService = new Dep();
-
   let eventMap = vue.reactive({});
   let methodMap = vue.reactive({});
   class Events extends BaseService {
@@ -10046,7 +10099,8 @@
     containerHighlightClassName: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME,
     containerHighlightDuration: 800,
     containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
-    codeOptions: () => ({})
+    codeOptions: () => ({}),
+    renderType: StageCore.RenderType.IFRAME
   };
 
   const initServiceState = (props, {
@@ -10184,13 +10238,13 @@
       const stage = editorService.get("stage");
       return stage?.renderer.runtime?.getApp?.();
     };
-    const updateDataSoucreSchema = () => {
+    const updateDataSourceSchema = () => {
       const root = editorService.get("root");
       if (root?.dataSources) {
         getApp()?.dataSourceManager?.updateSchema(root.dataSources);
       }
     };
-    const upateNodeWhenDataSourceChange = (nodes) => {
+    const updateNodeWhenDataSourceChange = (nodes) => {
       const root = editorService.get("root");
       const stage = editorService.get("stage");
       if (!root || !stage)
@@ -10203,7 +10257,7 @@
         app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
         app.dsl.dataSources = root.dataSources;
       }
-      updateDataSoucreSchema();
+      updateDataSourceSchema();
       nodes.forEach((node) => {
         const deps = Object.values(root.dataSourceDeps || {});
         deps.forEach((dep) => {
@@ -10244,10 +10298,10 @@
       }
     };
     const depUpdateHandler = (node) => {
-      upateNodeWhenDataSourceChange([node]);
+      updateNodeWhenDataSourceChange([node]);
     };
     const collectedHandler = (nodes) => {
-      upateNodeWhenDataSourceChange(nodes);
+      updateNodeWhenDataSourceChange(nodes);
     };
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
@@ -10269,7 +10323,7 @@
       Object.entries(value.codeBlocks).forEach(([id, code]) => {
         depService.addTarget(dep.createCodeBlockTarget(id, code));
       });
-      value.dataSources.forEach((ds) => {
+      dataSourceService.get("dataSources").forEach((ds) => {
         initDataSourceDepTarget(ds);
       });
       if (Array.isArray(value.items)) {
@@ -10314,14 +10368,14 @@
     editorService.on("remove", nodeRemoveHandler);
     editorService.on("update", nodeUpdateHandler);
     const codeBlockAddOrUpdateHandler = (id, codeBlock) => {
-      if (depService.hasTarget(id)) {
-        depService.getTarget(id).name = codeBlock.name;
+      if (depService.hasTarget(id, dep.DepTargetType.CODE_BLOCK)) {
+        depService.getTarget(id, dep.DepTargetType.CODE_BLOCK).name = codeBlock.name;
         return;
       }
       depService.addTarget(dep.createCodeBlockTarget(id, codeBlock));
     };
     const codeBlockRemoveHandler = (id) => {
-      depService.removeTarget(id);
+      depService.removeTarget(id, dep.DepTargetType.CODE_BLOCK);
     };
     codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
     codeBlockService.on("remove", codeBlockRemoveHandler);
@@ -10331,17 +10385,28 @@
     };
     const dataSourceUpdateHandler = (config) => {
       const root = editorService.get("root");
+      removeDataSourceTarget(config.id);
+      initDataSourceDepTarget(config);
+      depService.collect(root?.items || [], true);
       const targets = depService.getTargets(dep.DepTargetType.DATA_SOURCE);
       const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
-      upateNodeWhenDataSourceChange(nodes);
+      updateNodeWhenDataSourceChange(nodes);
+    };
+    const removeDataSourceTarget = (id) => {
+      depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE);
+      depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE_COND);
+      depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE_METHOD);
     };
     const dataSourceRemoveHandler = (id) => {
-      depService.removeTarget(id);
+      removeDataSourceTarget(id);
       getApp()?.dataSourceManager?.removeDataSource(id);
     };
     dataSourceService.on("add", dataSourceAddHandler);
     dataSourceService.on("update", dataSourceUpdateHandler);
     dataSourceService.on("remove", dataSourceRemoveHandler);
+    if (props.collectorOptions && !depService.hasTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY)) {
+      depService.addTarget(dep.createRelatedCompTarget(props.collectorOptions));
+    }
     vue.onUnmounted(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
@@ -10375,6 +10440,7 @@
       stageContentMenu: {},
       render: { type: Function },
       runtimeUrl: {},
+      renderType: {},
       autoScrollIntoView: { type: Boolean },
       propsConfigs: {},
       propsValues: {},
@@ -10393,7 +10459,8 @@
       codeOptions: {},
       updateDragEl: { type: Function },
       disabledDragStart: { type: Boolean },
-      extendFormState: { type: Function }
+      extendFormState: { type: Function },
+      collectorOptions: {}
     }, defaultEditorProps),
     emits: ["props-panel-mounted", "update:modelValue"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -10431,18 +10498,19 @@
           containerHighlightClassName: props.containerHighlightClassName,
           containerHighlightDuration: props.containerHighlightDuration,
           containerHighlightType: props.containerHighlightType,
-          disabledDragStart: props.disabledDragStart
+          disabledDragStart: props.disabledDragStart,
+          renderType: props.renderType
         })
       );
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$x, null, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$u, 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$s, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -10453,7 +10521,7 @@
           ]),
           sidebar: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "sidebar", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$e, {
+              vue.createVNode(_sfc_main$c, {
                 data: _ctx.sidebar,
                 "layer-content-menu": _ctx.layerContentMenu
               }, {
@@ -10463,6 +10531,9 @@
                 "layer-node-content": vue.withCtx(({ data }) => [
                   vue.renderSlot(_ctx.$slots, "layer-node-content", { data })
                 ]),
+                "layer-node-label": vue.withCtx(({ data }) => [
+                  vue.renderSlot(_ctx.$slots, "layer-node-label", { data })
+                ]),
                 "layer-node-tool": vue.withCtx(({ data }) => [
                   vue.renderSlot(_ctx.$slots, "layer-node-tool", { data })
                 ]),
@@ -10509,7 +10580,7 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$u, {
+              vue.createVNode(_sfc_main$r, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
               }, {
@@ -10535,8 +10606,6 @@
     }
   });
 
-  const index$1 = '';
-
   const defaultInstallOpt = {
     // eslint-disable-next-line no-eval
     parseDSL: (dsl) => eval(dsl)
@@ -10547,21 +10616,21 @@
       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$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$C);
-      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);
+      app.component("m-fields-ui-select", _sfc_main$y);
+      app.component("m-fields-code-link", _sfc_main$O);
+      app.component("m-fields-vs-code", _sfc_main$P);
+      app.component("magic-code-editor", _sfc_main$Q);
+      app.component("m-fields-code-select", _sfc_main$N);
+      app.component("m-fields-code-select-col", _sfc_main$J);
+      app.component("m-fields-event-select", _sfc_main$B);
+      app.component("m-fields-data-source-fields", _sfc_main$I);
+      app.component("m-fields-data-source-mocks", _sfc_main$D);
+      app.component("m-fields-key-value", _sfc_main$z);
+      app.component("m-fields-data-source-input", _sfc_main$G);
+      app.component("m-fields-data-source-select", _sfc_main$C);
+      app.component("m-fields-data-source-methods", _sfc_main$F);
+      app.component("m-fields-data-source-method-select", _sfc_main$E);
+      app.component("m-fields-data-source-field-select", _sfc_main$H);
     }
   };
 
@@ -10571,40 +10640,40 @@
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$P;
-  exports.CodeBlockList = _sfc_main$r;
-  exports.CodeBlockListPanel = _sfc_main$q;
+  exports.CodeBlockEditor = _sfc_main$M;
+  exports.CodeBlockList = _sfc_main$n;
+  exports.CodeBlockListPanel = _sfc_main$m;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$Q;
-  exports.CodeSelectCol = _sfc_main$M;
+  exports.CodeSelect = _sfc_main$N;
+  exports.CodeSelectCol = _sfc_main$J;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$f;
-  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.ComponentListPanel = _sfc_main$d;
+  exports.ContentMenu = _sfc_main$i;
+  exports.DataSourceFieldSelect = _sfc_main$H;
+  exports.DataSourceFields = _sfc_main$I;
+  exports.DataSourceInput = _sfc_main$G;
+  exports.DataSourceMethodSelect = _sfc_main$E;
+  exports.DataSourceMethods = _sfc_main$F;
+  exports.DataSourceMocks = _sfc_main$D;
+  exports.DataSourceSelect = _sfc_main$C;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$E;
+  exports.EventSelect = _sfc_main$B;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$N;
+  exports.Icon = _sfc_main$K;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$C;
+  exports.KeyValue = _sfc_main$z;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$g;
+  exports.LayerPanel = _sfc_main$e;
   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$T;
+  exports.LayoutContainer = _sfc_main$w;
+  exports.PropsPanel = _sfc_main$r;
+  exports.Resizer = _sfc_main$x;
+  exports.SplitView = _sfc_main$w;
+  exports.TMagicCodeEditor = _sfc_main$Q;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$w;
+  exports.ToolButton = _sfc_main$t;
   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;