@tmagic/editor 1.3.4 → 1.3.6

package/dist/tmagic-editor.js

@@ -1,18 +1,18 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, provide, Transition, toHandlers, mergeDefaults } from 'vue';
-import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, ArrowRight, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
-import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, pick, keys } from 'lodash-es';
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, provide, Transition, toHandlers, onBeforeUnmount, mergeDefaults } from 'vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
+import { throttle, isEmpty, cloneDeep, mergeWith, get, set, isObject, uniq, map, has, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
-import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import { guid, isPop, getNodePath, isNumber, isPage, toLine, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
 import Moveable from 'moveable';
-import { DepTargetType, Watcher, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
+import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
-import StageCore, { GuidesType, StageDragStatus, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, RenderType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
@@ -23,10 +23,10 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _hoisted_1$x = {
+const _hoisted_1$s = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -184,7 +184,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -212,7 +212,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -237,7 +237,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$T, {
+      return openBlock(), createBlock(_sfc_main$Q, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -252,7 +252,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -332,7 +332,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -405,11 +405,11 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -630,7 +630,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           fullscreen: ""
         }, {
           footer: withCtx(() => [
-            createElementVNode("span", _hoisted_4$7, [
+            createElementVNode("span", _hoisted_4$5, [
               createVNode(unref(TMagicButton), {
                 size: "small",
                 onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -653,8 +653,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$w, [
-              createElementVNode("div", _hoisted_2$p, [
+            createElementVNode("div", _hoisted_1$r, [
+              createElementVNode("div", _hoisted_2$j, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "info"
@@ -665,7 +665,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              createElementVNode("div", _hoisted_3$c, [
+              createElementVNode("div", _hoisted_3$7, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "success"
@@ -677,7 +677,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$T, {
+            difVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
               key: 0,
               ref_key: "magicVsEditor",
               ref: magicVsEditor,
@@ -963,7 +963,7 @@ const getDisplayField = (dataSources, key) => {
   return displayState;
 };
 
-const compose = (middleware) => {
+const compose = (middleware, isAsync) => {
   if (!Array.isArray(middleware))
     throw new TypeError("Middleware 必须是一个数组!");
   for (const fn of middleware) {
@@ -974,18 +974,34 @@ const compose = (middleware) => {
     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;
       }
     }
   };
@@ -993,7 +1009,29 @@ const compose = (middleware) => {
 
 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]) {
@@ -1022,7 +1060,7 @@ class BaseService extends EventEmitter {
   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);
@@ -1030,16 +1068,16 @@ class BaseService extends EventEmitter {
       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);
@@ -1050,7 +1088,7 @@ class BaseService extends EventEmitter {
             this.doTask();
           }
           return promise;
-        }
+        } : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn)
       });
     });
   }
@@ -1737,11 +1775,50 @@ const traverseNode = (node, cb, parents = []) => {
   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 Watcher({ initialTargets: reactive({}) });
+  removeTargets(type = DepTargetType.DEFAULT) {
+    this.watcher.removeTargets(type);
+    this.emit("remove-target");
+  }
+  getTargets(type = DepTargetType.DEFAULT) {
+    return this.watcher.getTargets(type);
+  }
+  getTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
+  }
+  addTarget(target) {
+    this.watcher.addTarget(target);
+    this.emit("add-target", target);
+  }
+  removeTarget(id, type = 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 = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
+  }
+  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
+    return this.watcher.hasSpecifiedTypeTarget(type);
+  }
+}
+const depService = new Dep();
+
 class UndoRedo {
   elementList;
   listCursor;
@@ -1883,7 +1960,14 @@ class WebStorage extends BaseService {
   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 }
+    ]);
   }
   /**
    * 获取数据存储对象，可以通过
@@ -1895,24 +1979,25 @@ class WebStorage extends BaseService {
    *    },
    * });
    */
-  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}`)
     );
@@ -1934,22 +2019,24 @@ class WebStorage extends BaseService {
   /**
    * 获取指定索引位置的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 */) {
@@ -1986,18 +2073,19 @@ const storageService = new WebStorage();
 class Props extends BaseService {
   state = 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) {
@@ -2077,11 +2165,17 @@ class Props extends BaseService {
   }
   /**
    * 将组件与组件的子元素配置中的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);
@@ -2111,11 +2205,59 @@ class Props extends BaseService {
     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(DepTargetType.RELATED_COMP_WHEN_COPY, 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 = get(config, fullKey);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId)
+          return;
+        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();
 
@@ -2135,27 +2277,27 @@ class Editor extends BaseService {
   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"]
@@ -2570,12 +2712,46 @@ class Editor extends BaseService {
     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(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
+    const customTarget = depService.getTarget(
+      DepTargetType.RELATED_COMP_WHEN_COPY,
+      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 = 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
     });
   }
@@ -2585,7 +2761,7 @@ class Editor extends BaseService {
    * @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");
@@ -2597,9 +2773,11 @@ class Editor extends BaseService {
       }
     }
     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, cloneDeep(config));
     return pasteConfigs;
   }
@@ -2916,7 +3094,7 @@ const beforePaste = async (position, config) => {
       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))) {
@@ -2970,7 +3148,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3020,8 +3198,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$v = ["src"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["src"];
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -3045,7 +3223,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$v)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -3123,9 +3301,9 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const _hoisted_1$u = { class: "m-fields-code-select-col" };
-const _hoisted_2$o = { class: "code-select-container" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = { class: "m-fields-code-select-col" };
+const _hoisted_2$i = { class: "code-select-container" };
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -3198,8 +3376,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        createElementVNode("div", _hoisted_2$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -3207,14 +3385,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3222,7 +3400,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3235,9 +3413,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -3472,12 +3650,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$n, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -3529,7 +3707,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3584,10 +3762,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -3777,12 +3955,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$K, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$s, [
+          createElementVNode("div", _hoisted_1$n, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$m, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$g, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -3794,7 +3972,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$b, [
+          createElementVNode("div", _hoisted_3$6, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -3812,7 +3990,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$N, {
+            createVNode(_sfc_main$K, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -3895,9 +4073,9 @@ const useDataSourceMethod = () => {
   };
 };
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
   },
@@ -3967,12 +4145,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$l, [
+        createElementVNode("div", _hoisted_2$f, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -3986,7 +4164,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4001,9 +4179,9 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
   },
@@ -4086,22 +4264,22 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
-        createElementVNode("div", _hoisted_2$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: cascaderConfig.value,
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -4110,7 +4288,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4123,9 +4301,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMocks"
   },
@@ -4212,7 +4390,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$T,
+        component: _sfc_main$Q,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -4321,12 +4499,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$j, [
+        createElementVNode("div", _hoisted_2$d, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -4357,7 +4535,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -4414,12 +4592,12 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -4622,7 +4800,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -4632,7 +4810,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$i, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -4682,32 +4860,32 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ 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__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$n, _hoisted_4$6);
+      return openBlock(), 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__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "m-fields-key-value" };
+const _hoisted_2$a = { key: 0 };
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -4765,8 +4943,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -4780,7 +4958,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_3$a,
+              _hoisted_3$5,
               createVNode(unref(TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -4815,7 +4993,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$T, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$Q, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
@@ -4831,7 +5009,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           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"])) : createCommentVNode("", true)
       ]);
@@ -4839,12 +5017,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = {
+const _hoisted_1$g = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -4934,7 +5112,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$l, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$g, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -5001,8 +5179,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UISelect_vue_vue_type_style_index_0_lang = '';
-
 const useGetSo = (target, emit) => {
   let getso;
   const isDraging = ref(false);
@@ -5031,7 +5207,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -5053,7 +5229,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -5180,7 +5356,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$A, { onChange: changeLeft })
+          createVNode(_sfc_main$x, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5189,7 +5365,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$A, { onChange: changeRight }),
+          createVNode(_sfc_main$x, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -5202,10 +5378,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-editor-empty-panel" };
-const _hoisted_2$f = { class: "m-editor-empty-content" };
-const _hoisted_3$9 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "m-editor-empty-panel" };
+const _hoisted_2$9 = { class: "m-editor-empty-content" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -5225,16 +5401,16 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        createElementVNode("div", _hoisted_2$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$9, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$9
+            _hoisted_3$4
           ])
         ])
       ]);
@@ -5246,7 +5422,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -5321,13 +5497,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$T, {
+          createVNode(_sfc_main$Q, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$z, {
+        ]) : (openBlock(), createBlock(_sfc_main$w, {
           key: 1,
           ref_key: "splitView",
           ref: splitView,
@@ -5349,7 +5525,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$y)
+              createVNode(_sfc_main$v)
             ])
           ]),
           _: 2
@@ -5374,12 +5550,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -5458,7 +5634,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$j, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -5472,7 +5648,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5490,7 +5666,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5523,7 +5699,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$e, [
+            createElementVNode("span", _hoisted_2$8, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -5540,7 +5716,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -5702,7 +5878,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$w, {
+              return openBlock(), createBlock(_sfc_main$t, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -5714,8 +5890,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { class: "m-editor-props-panel" };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = { class: "m-editor-props-panel" };
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -5769,7 +5945,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$d, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -5920,7 +6096,7 @@ const useFloatBox = (slideKeys) => {
   };
 };
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -5960,198 +6136,403 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$d = /* @__PURE__ */ createElementVNode("g", {
-  fill: "#7C878E",
-  "fill-rule": "evenodd"
-}, [
-  /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
-  ...{
-    name: "MEditorAppManageIcon"
-  },
-  __name: "AppManageIcon",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_3$8);
-    };
-  }
-});
+const updateStatus = (nodeStatusMap, id, status) => {
+  const nodeStatus = nodeStatusMap.get(id);
+  if (!nodeStatus)
+    return;
+  getKeys(status).forEach((key) => {
+    if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
+      nodeStatus[key] = Boolean(status[key]);
+    }
+  });
+};
 
-const _hoisted_1$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__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ 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 = inject("treeEmit");
     const props = __props;
-    const emit = __emit;
-    const { codeBlockService, depService, editorService } = inject("services") || {};
-    const codeList = computed(
-      () => Object.values(depService?.getTargets(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 = computed(() => codeList.value.map((item) => item.id));
-    const editable = computed(() => codeBlockService?.getEditStatus());
-    const filterNode = (value, data) => {
-      if (!value) {
-        return true;
+    const nodeStatus = 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 = computed(() => nodeStatus.value.expand);
+    const selected = computed(() => nodeStatus.value.selected);
+    const visible = computed(() => nodeStatus.value.visible);
+    const draggable = computed(() => nodeStatus.value.draggable);
+    const hasChilren = computed(() => props.data.items?.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 tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        });
-        emit("remove", id);
-      } else {
-        if (typeof props.customError === "function") {
-          props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
-        } else {
-          tMagicMessage.error("代码块删除失败");
-        }
-      }
+    const mouseenterHandler = (event) => {
+      treeEmit?.("node-mouseenter", event, props.data);
     };
-    const tree = 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 = resolveComponent("TreeNode", true);
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: "m-editor-tree-node",
+        draggable: draggable.value,
+        "data-node-id": _ctx.data.id,
+        "data-is-container": Array.isArray(_ctx.data.items),
+        onDragstart: handleDragStart,
+        onDragleave: handleDragLeave,
+        onDragend: handleDragEnd
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
+          style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
+          onContextmenu: nodeContentmenuHandler,
+          onMouseenter: mouseenterHandler
+        }, [
+          createVNode(_sfc_main$K, {
+            class: "expand-icon",
+            style: normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
+            icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
+            onClick: expandHandler
+          }, null, 8, ["style", "icon"]),
+          createElementVNode("div", {
+            class: "tree-node-content",
+            onClick: nodeClickHandler
+          }, [
+            renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
+              createElementVNode("div", _hoisted_2$7, [
+                renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
+                  createTextVNode(toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
+                ])
+              ]),
+              createElementVNode("div", _hoisted_3$3, [
+                renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
+              ])
+            ])
+          ])
+        ], 38),
+        hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
+            return openBlock(), createBlock(_component_TreeNode, {
+              key: item.id,
+              data: item,
+              "node-status-map": _ctx.nodeStatusMap,
+              indent: _ctx.indent + 11
+            }, {
+              "tree-node-content": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
+              ]),
+              "tree-node-label": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "tree-node-label", { data: nodeData })
+              ]),
+              "tree-node-tool": withCtx(({ data: nodeData }) => [
+                renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
+              ]),
+              _: 2
+            }, 1032, ["data", "node-status-map", "indent"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 40, _hoisted_1$c)), [
+        [vShow, visible.value]
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$b = { key: 1 };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorTree"
+  },
+  __name: "Tree",
+  props: {
+    data: {},
+    nodeStatusMap: {},
+    indent: { default: 0 },
+    emptyText: { default: "暂无数据" }
+  },
+  emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    provide("treeEmit", emit);
+    const handleDragOver = (event) => {
+      emit("node-dragover", event);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-tree",
+        onDragover: handleDragOver
+      }, [
+        _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
+          return openBlock(), createBlock(_sfc_main$p, {
+            key: item.id,
+            data: item,
+            indent: _ctx.indent,
+            "node-status-map": _ctx.nodeStatusMap
+          }, {
+            "tree-node-content": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
+            ]),
+            "tree-node-label": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "tree-node-label", { data: nodeData })
+            ]),
+            "tree-node-tool": withCtx(({ data: nodeData }) => [
+              renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
+            ]),
+            _: 2
+          }, 1032, ["data", "indent", "node-status-map"]);
+        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$b, [
+          createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
+        ]))
+      ], 32);
+    };
+  }
+});
+
+const 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: 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 = ref(/* @__PURE__ */ new Map());
+  watch(
+    nodeData,
+    (nodeData2) => {
+      nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  return {
+    nodeStatusMap
+  };
+};
+
+const _sfc_main$n = /* @__PURE__ */ 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 = inject("services");
+    const { codeBlockService, depService, editorService } = services || {};
+    const codeList = computed(
+      () => Object.values(depService?.getTargets(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 = 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 tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        emit("remove", id);
+      } else {
+        if (typeof props.customError === "function") {
+          props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+        } else {
+          tMagicMessage.error("代码块删除失败");
+        }
       }
+    };
+    __expose({
+      filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(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 openBlock(), createBlock(_sfc_main$o, {
         data: codeList.value,
-        props: {
-          children: "children",
-          label: "name",
-          value: "id"
-        },
-        "highlight-current": true,
-        "filter-node-method": filterNode,
+        "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
       }, {
-        default: withCtx(({ data }) => [
+        "tree-node-label": withCtx(({ data }) => [
           createElementVNode("div", {
-            id: data.id,
-            class: "list-container"
-          }, [
-            createElementVNode("div", _hoisted_2$c, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$D, {
-                key: 0,
-                class: "codeIcon"
-              })) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$s, {
-                key: 1,
-                class: "compIcon"
-              })) : createCommentVNode("", true),
-              createElementVNode("span", {
-                class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
-              }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
-              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-                createVNode(unref(TMagicTooltip), {
-                  effect: "dark",
-                  content: editable.value ? "编辑" : "查看",
-                  placement: "bottom"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$N, {
-                      icon: editable.value ? unref(Edit) : unref(View),
-                      class: "edit-icon",
-                      onClick: withModifiers(($event) => editCode(data.id), ["stop"])
-                    }, null, 8, ["icon", "onClick"])
-                  ]),
-                  _: 2
-                }, 1032, ["content"]),
-                editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                  key: 0,
-                  effect: "dark",
-                  content: "删除",
-                  placement: "bottom"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$N, {
-                      icon: unref(Close),
-                      class: "edit-icon",
-                      onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
-                    }, null, 8, ["icon", "onClick"])
-                  ]),
-                  _: 2
-                }, 1024)) : createCommentVNode("", true),
-                renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                  id: data.id,
-                  data: data.codeBlockContent
-                })
-              ])) : createCommentVNode("", true)
-            ])
-          ], 8, _hoisted_1$g)
+            class: normalizeClass({
+              code: data.type === "code",
+              hook: data.type === "key",
+              disabled: data.type === "key" || data.type === "code"
+            })
+          }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)
+        ]),
+        "tree-node-tool": withCtx(({ data }) => [
+          data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 0,
+            effect: "dark",
+            content: editable.value ? "编辑" : "查看",
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$K, {
+                icon: editable.value ? unref(Edit) : unref(View),
+                class: "edit-icon",
+                onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
+              }, null, 8, ["icon", "onClick"])
+            ]),
+            _: 2
+          }, 1032, ["content"])) : createCommentVNode("", true),
+          data.type === "code" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
+            effect: "dark",
+            content: "删除",
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$K, {
+                icon: unref(Close),
+                class: "edit-icon",
+                onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
+              }, null, 8, ["icon", "onClick"])
+            ]),
+            _: 2
+          }, 1024)) : createCommentVNode("", true),
+          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__ */ defineComponent({
+const _hoisted_1$a = { class: "search-wrapper" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -6170,11 +6551,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
+        createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              createElementVNode("div", _hoisted_1$f, [
-                createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+              createElementVNode("div", _hoisted_1$a, [
+                createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -6190,7 +6571,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$r, {
+            createVNode(_sfc_main$n, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -6208,7 +6589,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -6222,7 +6603,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -6278,13 +6659,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -6298,20 +6673,27 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
     const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
     const dsCondDep = computed(() => depService?.getTargets(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));
         }
       });
     };
@@ -6320,18 +6702,27 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         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);
     };
@@ -6348,95 +6739,71 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       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 = ref();
     __expose({
-      filter(val) {
-        tree.value?.filter(val);
-      }
+      filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(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 openBlock(), createBlock(_sfc_main$o, {
         data: list.value,
-        "highlight-current": true,
+        "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
       }, {
-        default: withCtx(({ data }) => [
+        "tree-node-label": withCtx(({ data }) => [
           createElementVNode("div", {
-            id: data.id,
-            class: "list-container"
-          }, [
-            createElementVNode("div", _hoisted_2$b, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$N, {
-                key: 0,
-                class: "codeIcon",
-                icon: unref(Coin)
-              }, null, 8, ["icon"])) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$N, {
-                key: 1,
-                class: "compIcon",
-                icon: unref(Aim)
-              }, null, 8, ["icon"])) : createCommentVNode("", true),
-              createElementVNode("span", {
-                class: normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
-              }, toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
-                createVNode(unref(TMagicTooltip), {
-                  effect: "dark",
-                  content: editable.value ? "编辑" : "查看",
-                  placement: "bottom"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$N, {
-                      icon: editable.value ? unref(Edit) : unref(View),
-                      class: "edit-icon",
-                      onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
-                    }, null, 8, ["icon", "onClick"])
-                  ]),
-                  _: 2
-                }, 1032, ["content"]),
-                editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                  key: 0,
-                  effect: "dark",
-                  content: "删除",
-                  placement: "bottom"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$N, {
-                      icon: unref(Close),
-                      class: "edit-icon",
-                      onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
-                    }, null, 8, ["icon", "onClick"])
-                  ]),
-                  _: 2
-                }, 1024)) : createCommentVNode("", true),
-                renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
-              ])) : createCommentVNode("", true)
-            ])
-          ], 8, _hoisted_1$e)
+            class: normalizeClass({
+              ds: data.type === "ds",
+              hook: data.type === "key",
+              disabled: data.type === "key" || data.type === "ds"
+            })
+          }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)
+        ]),
+        "tree-node-tool": withCtx(({ data }) => [
+          data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 0,
+            effect: "dark",
+            content: editable.value ? "编辑" : "查看",
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$K, {
+                icon: editable.value ? unref(Edit) : unref(View),
+                class: "edit-icon",
+                onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
+              }, null, 8, ["icon", "onClick"])
+            ]),
+            _: 2
+          }, 1032, ["content"])) : createCommentVNode("", true),
+          data.type === "ds" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
+            effect: "dark",
+            content: "删除",
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$K, {
+                icon: unref(Close),
+                class: "edit-icon",
+                onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
+              }, null, 8, ["icon", "onClick"])
+            ]),
+            _: 2
+          }, 1024)) : createCommentVNode("", true),
+          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__ */ defineComponent({
+const _hoisted_1$9 = { class: "search-wrapper" };
+const _hoisted_2$6 = { class: "data-source-list-panel-add-menu" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -6498,10 +6865,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
+        createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$d, [
-              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$9, [
+              createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -6518,9 +6885,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_2$a, [
+                  createElementVNode("div", _hoisted_2$6, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$w, {
+                      return openBlock(), createBlock(_sfc_main$t, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -6536,14 +6903,14 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true)
             ]),
-            createVNode(_sfc_main$o, {
+            createVNode(_sfc_main$k, {
               onEdit: editHandler,
               onRemove: removeHandler
             })
           ]),
           _: 1
         }),
-        createVNode(_sfc_main$p, {
+        createVNode(_sfc_main$l, {
           ref_key: "editDialog",
           ref: editDialog,
           disabled: !editable.value,
@@ -6557,182 +6924,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const updateStatus = (nodeStatusMap, id, status) => {
-  const nodeStatus = nodeStatusMap.get(id);
-  if (!nodeStatus)
-    return;
-  getKeys(status).forEach((key) => {
-    if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
-      nodeStatus[key] = Boolean(status[key]);
-    }
-  });
-};
-
-const _hoisted_1$c = ["draggable", "data-node-id", "data-is-container"];
-const _hoisted_2$9 = { class: "tree-node-label" };
-const _hoisted_3$5 = { class: "tree-node-tool" };
-const _hoisted_4$5 = {
-  key: 0,
-  class: "m-editor-tree-node-children"
-};
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorTreeNode"
-  },
-  __name: "TreeNode",
-  props: {
-    data: {},
-    nodeStatusMap: {},
-    indent: { default: 0 }
-  },
-  emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
-  setup(__props, { emit: __emit }) {
-    const treeEmit = inject("treeEmit");
-    const props = __props;
-    const nodeStatus = computed(
-      () => props.nodeStatusMap?.get(props.data.id) || {
-        selected: false,
-        expand: false,
-        visible: false,
-        draggable: false
-      }
-    );
-    const expanded = computed(() => nodeStatus.value.expand);
-    const selected = computed(() => nodeStatus.value.selected);
-    const visible = computed(() => nodeStatus.value.visible);
-    const draggable = computed(() => nodeStatus.value.draggable);
-    const hasChilren = computed(() => props.data.items && props.data.items.length > 0);
-    const handleDragStart = (event) => {
-      treeEmit?.("node-dragstart", event, props.data);
-    };
-    const handleDragLeave = (event) => {
-      treeEmit?.("node-dragleave", event, props.data);
-    };
-    const handleDragEnd = (event) => {
-      treeEmit?.("node-dragend", event, props.data);
-    };
-    const nodeContentmenuHandler = (event) => {
-      treeEmit?.("node-contextmenu", event, props.data);
-    };
-    const mouseenterHandler = (event) => {
-      treeEmit?.("node-mouseenter", event, props.data);
-    };
-    const expandHandler = () => {
-      updateStatus(props.nodeStatusMap, props.data.id, {
-        expand: !expanded.value
-      });
-    };
-    const nodeClickHandler = (event) => {
-      treeEmit?.("node-click", event, props.data);
-    };
-    return (_ctx, _cache) => {
-      const _component_TreeNode = resolveComponent("TreeNode", true);
-      return withDirectives((openBlock(), createElementBlock("div", {
-        class: "m-editor-tree-node",
-        draggable: draggable.value,
-        "data-node-id": _ctx.data.id,
-        "data-is-container": Array.isArray(_ctx.data.items),
-        onDragstart: handleDragStart,
-        onDragleave: handleDragLeave,
-        onDragend: handleDragEnd
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
-          style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
-          onContextmenu: nodeContentmenuHandler,
-          onMouseenter: mouseenterHandler
-        }, [
-          createVNode(_sfc_main$N, {
-            class: "expand-icon",
-            style: normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
-            icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
-            onClick: expandHandler
-          }, null, 8, ["style", "icon"]),
-          createElementVNode("div", {
-            class: "tree-node-content",
-            onClick: nodeClickHandler
-          }, [
-            renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-              createElementVNode("div", _hoisted_2$9, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
-              createElementVNode("div", _hoisted_3$5, [
-                renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
-              ])
-            ])
-          ])
-        ], 38),
-        hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
-            return openBlock(), createBlock(_component_TreeNode, {
-              key: item.id,
-              data: item,
-              "node-status-map": _ctx.nodeStatusMap,
-              indent: _ctx.indent + 11
-            }, {
-              "tree-node-content": withCtx(({ data: nodeData }) => [
-                renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
-              ]),
-              "tree-node-tool": withCtx(({ data: nodeData }) => [
-                renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
-              ]),
-              _: 2
-            }, 1032, ["data", "node-status-map", "indent"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ], 40, _hoisted_1$c)), [
-        [vShow, visible.value]
-      ]);
-    };
-  }
-});
-
-const _hoisted_1$b = { key: 1 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorTree"
-  },
-  __name: "Tree",
-  props: {
-    data: {},
-    nodeStatusMap: {},
-    indent: { default: 0 },
-    emptyText: { default: "暂无数据" }
-  },
-  emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    provide("treeEmit", emit);
-    const handleDragOver = (event) => {
-      emit("node-dragover", event);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-tree",
-        onDragover: handleDragOver
-      }, [
-        _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$m, {
-            key: item.id,
-            data: item,
-            indent: _ctx.indent,
-            "node-status-map": _ctx.nodeStatusMap
-          }, {
-            "tree-node-content": withCtx(({ data: nodeData }) => [
-              renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
-            ]),
-            "tree-node-tool": withCtx(({ data: nodeData }) => [
-              renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
-            ]),
-            _: 2
-          }, 1032, ["data", "indent", "node-status-map"]);
-        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$b, [
-          createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
-        ]))
-      ], 32);
-    };
-  }
-});
-
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -6863,7 +7055,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$w, {
+                return openBlock(), createBlock(_sfc_main$t, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -6898,7 +7090,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = {
+const _hoisted_1$8 = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 16 16",
@@ -6906,26 +7098,26 @@ const _hoisted_1$a = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("path", {
   "fill-rule": "evenodd",
   d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
 }, null, -1);
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("path", {
   "fill-rule": "evenodd",
   d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
 }, null, -1);
-const _hoisted_4$4 = [
-  _hoisted_2$8,
-  _hoisted_3$4
+const _hoisted_4$2 = [
+  _hoisted_2$5,
+  _hoisted_3$2
 ];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_4$4);
+      return openBlock(), createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
     };
   }
 });
@@ -6943,7 +7135,6 @@ const useDeleteMenu = () => ({
     nodes && services?.editorService?.remove(nodes);
   }
 });
-const canPaste = ref(false);
 const useCopyMenu = () => ({
   type: "button",
   text: "复制",
@@ -6951,14 +7142,13 @@ const useCopyMenu = () => ({
   handler: (services) => {
     const nodes = services?.editorService?.get("nodes");
     nodes && services?.editorService?.copy(nodes);
-    canPaste.value = true;
   }
 });
 const usePasteMenu = (menu) => ({
   type: "button",
   text: "粘贴",
   icon: markRaw(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)
@@ -7005,7 +7195,7 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -7069,7 +7259,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "全部折叠",
-        icon: _sfc_main$j,
+        icon: _sfc_main$h,
         display: () => isPage(node.value),
         handler: () => {
           emit("collapse-all");
@@ -7095,7 +7285,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$k, {
+      return openBlock(), createBlock(_sfc_main$i, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -7105,7 +7295,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "LayerNodeTool",
   props: {
     data: {}
@@ -7124,12 +7314,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$K, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$K, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -7331,50 +7521,6 @@ const useDrag = (services) => {
   };
 };
 
-const useFilter = (nodeStatusMap, page) => {
-  const filterIsMatch = (value, data) => {
-    if (!value) {
-      return true;
-    }
-    let name = "";
-    if (data.name) {
-      name = data.name;
-    } else if (data.items) {
-      name = "container";
-    }
-    return `${data.id}${name}${data.type}`.includes(value);
-  };
-  const filterNode = (text) => (node, parents) => {
-    if (!nodeStatusMap.value)
-      return;
-    const visible = filterIsMatch(text, node);
-    if (visible && parents.length) {
-      parents.forEach((parent) => {
-        updateStatus(nodeStatusMap.value, parent.id, {
-          visible,
-          expand: true
-        });
-      });
-    }
-    updateStatus(nodeStatusMap.value, node.id, {
-      visible
-    });
-  };
-  const filter = (text) => {
-    if (!page.value?.items?.length)
-      return;
-    page.value.items.forEach((node) => {
-      traverseNode(node, filterNode(text));
-    });
-  };
-  return {
-    filterText: ref(""),
-    filterTextChangeHandler(text) {
-      filter(text);
-    }
-  };
-};
-
 var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
   KeyBindingContainerKey2["STAGE"] = "stage";
   KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
@@ -7537,15 +7683,15 @@ const useKeybinding = (services, contianer) => {
   };
 };
 
-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,
@@ -7560,7 +7706,8 @@ const createPageNodeStatus = (services, pageId, initalLayerNodeStatus) => {
   );
   return map;
 };
-const useNodeStatus = (services, page) => {
+const useNodeStatus = (services) => {
+  const page = computed(() => services?.editorService.get("page"));
   const nodes = computed(() => services?.editorService.get("nodes") || []);
   const nodeStatusMaps = ref(/* @__PURE__ */ new Map());
   const nodeStatusMap = computed(
@@ -7572,7 +7719,7 @@ const useNodeStatus = (services, page) => {
       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
@@ -7623,7 +7770,7 @@ const useNodeStatus = (services, page) => {
   };
 };
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerPanel"
   },
@@ -7636,9 +7783,19 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const editorService = services?.editorService;
     const tree = ref();
     const page = computed(() => editorService?.get("page"));
-    const { nodeStatusMap } = useNodeStatus(services, page);
+    const nodeData = 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;
@@ -7661,13 +7818,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$t, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
+          createVNode(_sfc_main$q, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$o, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
             ref: tree,
-            data: [page.value],
+            data: nodeData.value,
             "node-status-map": unref(nodeStatusMap),
             onNodeDragover: unref(handleDragOver),
             onNodeDragstart: unref(handleDragStart),
@@ -7677,18 +7834,21 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             onNodeMouseenter: unref(mouseenterHandler),
             onNodeClick: unref(nodeClickHandler)
           }, {
-            "tree-node-tool": withCtx(({ data: nodeData }) => [
-              renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [
-                createVNode(_sfc_main$h, { data: nodeData }, null, 8, ["data"])
+            "tree-node-content": withCtx(({ data: nodeData2 }) => [
+              renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData2 })
+            ]),
+            "tree-node-tool": withCtx(({ data: nodeData2 }) => [
+              renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
+                createVNode(_sfc_main$f, { data: nodeData2 }, null, 8, ["data"])
               ])
             ]),
-            "tree-node-content": withCtx(({ data: nodeData }) => [
-              renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
+            "tree-node-label": withCtx(({ data: nodeData2 }) => [
+              renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData2 })
             ]),
             _: 3
           }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$i, {
+            createVNode(_sfc_main$g, {
               ref_key: "menu",
               ref: menu,
               "layer-content-menu": _ctx.layerContentMenu,
@@ -7702,9 +7862,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = ["onClick", "onDragstart"];
-const _hoisted_2$7 = ["title"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = ["onClick", "onDragstart"];
+const _hoisted_2$4 = ["title"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
   },
@@ -7784,7 +7944,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -7792,7 +7952,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$K, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -7813,7 +7973,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                               content: item.desc
                             }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$N, {
+                                createVNode(_sfc_main$K, {
                                   icon: item.icon
                                 }, null, 8, ["icon"])
                               ]),
@@ -7821,9 +7981,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                             }, 1032, ["disabled", "content"]),
                             createElementVNode("span", {
                               title: item.text
-                            }, toDisplayString(item.text), 9, _hoisted_2$7)
+                            }, toDisplayString(item.text), 9, _hoisted_2$4)
                           ])
-                        ], 40, _hoisted_1$9);
+                        ], 40, _hoisted_1$7);
                       }), 128))
                     ]),
                     _: 2
@@ -7840,20 +8000,20 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
   },
@@ -7873,7 +8033,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$f,
+          component: _sfc_main$d,
           slots: {}
         },
         layer: {
@@ -7884,7 +8044,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           props: {
             layerContentMenu: props.layerContentMenu
           },
-          component: _sfc_main$g,
+          component: _sfc_main$e,
           slots: {}
         },
         "code-block": {
@@ -7892,7 +8052,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$q,
+          component: _sfc_main$m,
           slots: {},
           boxComponentConfig: {
             props: {
@@ -7905,7 +8065,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$n,
+          component: _sfc_main$j,
           slots: {},
           boxComponentConfig: {
             props: {
@@ -7948,24 +8108,24 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-          createElementVNode("div", _hoisted_2$6, [
+        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_2$3, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
                 class: 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) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$K, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
-                config.text ? (openBlock(), createElementBlock("div", _hoisted_4$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
-              ], 42, _hoisted_3$3)), [
+                config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+              ], 42, _hoisted_3$1)), [
                 [vShow, !unref(floatBoxStates)?.get(config.$key)?.status]
               ]);
             }), 128))
@@ -8034,6 +8194,19 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   ]),
                   key: "5"
                 } : void 0,
+                config.$key === "layer" || config.slots?.layerNodeLabel ? {
+                  name: "layer-node-label",
+                  fn: withCtx(({ data: nodeData }) => [
+                    config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-label", {
+                      key: 0,
+                      data: nodeData
+                    }) : config.slots?.layerNodeLabel ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+                      key: 1,
+                      data: nodeData
+                    }, null, 8, ["data"])) : createCommentVNode("", true)
+                  ]),
+                  key: "6"
+                } : void 0,
                 config.$key === "layer" || config.slots?.layerNodeTool ? {
                   name: "layer-node-tool",
                   fn: withCtx(({ data: nodeData }) => [
@@ -8045,7 +8218,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       data: nodeData
                     }, null, 8, ["data"])) : createCommentVNode("", true)
                   ]),
-                  key: "6"
+                  key: "7"
                 } : void 0,
                 config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
                   name: "data-source-panel-tool",
@@ -8055,7 +8228,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       data
                     }) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("", true)
                   ]),
-                  key: "7"
+                  key: "8"
                 } : void 0
               ]), 1040)) : createCommentVNode("", true)
             ])), [
@@ -8064,7 +8237,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           }), 128))
         ])) : createCommentVNode("", true),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createElementVNode("div", _hoisted_5$3, [
+          createElementVNode("div", _hoisted_5$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
                 key: config.$key ?? index,
@@ -8083,12 +8256,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => unref(showFloatBox)(config.$key)
                 }, [
                   createElementVNode("div", null, toDisplayString(config.text), 1),
-                  createVNode(_sfc_main$N, {
+                  createVNode(_sfc_main$K, {
                     class: "m-editor-float-box-close",
                     icon: unref(Close),
                     onClick: withModifiers(($event) => unref(closeFloatBox)(config.$key), ["stop"])
                   }, null, 8, ["icon", "onClick"])
-                ], 10, _hoisted_6$2),
+                ], 10, _hoisted_6),
                 createElementVNode("div", _hoisted_7, [
                   config && unref(floatBoxStates)?.get(config.$key)?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
                 ])
@@ -8231,7 +8404,7 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
   },
@@ -8319,9 +8492,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ScrollBar_vue_vue_type_style_index_0_lang = '';
-
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
   },
@@ -8407,14 +8578,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$d, {
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$b, {
           key: 0,
           "scroll-size": scrollHeight.value,
           size: _ctx.wrapHeight,
           pos: vOffset.value,
           onScroll: vScrollHandler
         }, null, 8, ["scroll-size", "size", "pos"])) : createCommentVNode("", true),
-        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$d, {
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$b, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
@@ -8453,7 +8624,10 @@ const state = reactive({
 });
 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;
@@ -8544,6 +8718,7 @@ const useStage = (stageOptions) => {
     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") {
@@ -8609,228 +8784,142 @@ const useStage = (stageOptions) => {
   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__ */ createElementVNode("path", {
-  stroke: "none",
-  d: "M0 0h24v24H0z",
-  fill: "none"
-}, null, -1);
-const _hoisted_3$2 = /* @__PURE__ */ 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__ */ createElementVNode("line", {
-  x1: "9",
-  y1: "15",
-  x2: "4.5",
-  y2: "19.5"
-}, null, -1);
-const _hoisted_5$2 = /* @__PURE__ */ 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__ */ defineComponent({
-  ...{
-    name: "MEditorPinIcon"
-  },
-  __name: "PinIcon",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), 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__ */ createElementVNode("path", {
-  stroke: "none",
-  d: "M0 0h24v24H0z",
-  fill: "none"
-}, null, -1);
-const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("path", { d: "M9 4v6l-2 4v2h10v-2l-2 -4v-6" }, null, -1);
-const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("line", {
-  x1: "12",
-  y1: "16",
-  x2: "12",
-  y2: "21"
-}, null, -1);
-const _hoisted_5$1 = /* @__PURE__ */ 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__ */ defineComponent({
-  ...{
-    name: "MEditorPinnedIcon"
-  },
-  __name: "PinnedIcon",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_6);
-    };
-  }
-});
-
-const _hoisted_1$5 = /* @__PURE__ */ 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__ */ 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 = ref();
+    const dragTarget = ref();
+    const style = 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;
     };
+    watch(
+      () => props.visible,
+      async (visible) => {
+        if (visible) {
+          await nextTick();
+          initMoveable();
+        } else {
+          destroyMoveable();
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onBeforeUnmount(() => {
+      destroyMoveable();
+    });
     const closeHandler = () => {
-      emit("close");
+      emit("update:visible", false);
     };
-    const target = ref();
-    useGetSo(target, emit);
+    __expose({
+      target
+    });
     return (_ctx, _cache) => {
-      return openBlock(), 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 ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: "body"
       }, [
-        createVNode(unref(TMagicTooltip), {
-          placement: "top",
-          content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
-        }, {
-          default: withCtx(() => [
-            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,
-        createElementVNode("div", _hoisted_2$3, [
-          createVNode(unref(TMagicButton), {
-            text: "",
-            size: "small",
-            onClick: closeHandler
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$N, { icon: unref(Close) }, null, 8, ["icon"])
+        createElementVNode("div", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-float-box",
+          style: normalizeStyle(style.value)
+        }, [
+          createElementVNode("div", {
+            ref_key: "dragTarget",
+            ref: dragTarget,
+            class: "m-editor-float-box-title"
+          }, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
             ]),
-            _: 1
-          })
-        ])
-      ], 512);
+            createElementVNode("div", null, [
+              createVNode(unref(TMagicButton), {
+                text: "",
+                size: "small",
+                icon: unref(Close),
+                onClick: closeHandler
+              }, null, 8, ["icon"])
+            ])
+          ], 512),
+          createElementVNode("div", _hoisted_1$5, [
+            renderSlot(_ctx.$slots, "body")
+          ])
+        ], 4)
+      ])) : createCommentVNode("", true);
     };
   }
 });
 
-const PINNED_STATUE_CACHE_KEY = "tmagic-pinned-node-list-pinned-status";
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
-  props: {
-    isMultiSelect: { type: Boolean }
-  },
   setup(__props) {
-    const props = __props;
-    const menu = ref();
-    const nodeList = ref([]);
-    const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
-    const firstShow = ref(true);
     const services = inject("services");
     const editorService = services?.editorService;
-    const componentListService = services?.componentListService;
+    const visible = ref(false);
+    const buttonVisible = ref(false);
+    const button = ref();
+    const box = ref();
     const stage = computed(() => editorService?.get("stage"));
     const page = computed(() => editorService?.get("page"));
-    const node = 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 = computed(() => editorService?.get("nodes") || []);
+    const nodeData = computed(() => !page.value ? [] : [page.value]);
+    const { nodeStatusMap } = useNodeStatus(services);
+    const filterNodeMethod = (value, data) => data.id === value;
+    const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
     const unWatch = watch(
       stage,
       (stage2) => {
         if (!stage2)
           return;
-        stage2.on("drag-start", () => {
-          cancel();
-        });
-        stage2.on("mousemove", (event) => {
-          cancel();
-          if (props.isMultiSelect || stage2.getDragStatus() !== StageDragStatus.END) {
-            return;
-          }
-          timeout = globalThis.setTimeout(() => {
-            const els = stage2.renderer.getElementsFromPoint(event) || [];
-            const nodes = 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();
       },
@@ -8838,75 +8927,75 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
-    const componentMap = computed(() => {
-      const map = {};
-      componentListService?.getList().forEach((group) => {
-        group.items.forEach((item) => {
-          map[item.type] = item;
-        });
-      });
-      return map;
-    });
-    const menuData = 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;
+    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 = ref({
+      left: 0,
+      top: 0
+    });
+    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();
-    };
-    watch(pinned, () => {
-      globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+      }
+      await 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 openBlock(), 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: withCtx(() => [
-          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 openBlock(), createElementBlock(Fragment, null, [
+        page.value && buttonVisible.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          key: 0,
+          content: "点击查看当前位置下的组件"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "button",
+              ref: button,
+              class: "m-editor-stage-float-button",
+              onClick: _cache[0] || (_cache[0] = ($event) => visible.value = true)
+            }, "可选组件", 512)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), 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: withCtx(() => [
+            createVNode(_sfc_main$o, {
+              class: "m-editor-node-list-menu magic-editor-layer-tree",
+              data: nodeData.value,
+              "node-status-map": unref(nodeStatusMap),
+              onNodeClick: clickHandler
+            }, null, 8, ["data", "node-status-map"])
+          ]),
+          _: 1
+        }, 8, ["visible", "position"])) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });
@@ -8968,7 +9057,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const editorService = services?.editorService;
     const menu = ref();
-    const canPaste = ref(false);
     const canCenter = ref(false);
     const node = computed(() => editorService?.get("node"));
     const nodes = computed(() => editorService?.get("nodes"));
@@ -9066,14 +9154,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       },
       { 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 openBlock(), createBlock(_sfc_main$k, {
+      return openBlock(), createBlock(_sfc_main$i, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -9230,7 +9316,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
+      return openBlock(), createBlock(_sfc_main$a, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
@@ -9256,17 +9342,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             onDrop: dropHandler,
             onDragover: dragoverHandler
           }, null, 36),
+          createVNode(_sfc_main$8),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             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"]),
-            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
@@ -9412,14 +9495,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$K, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -9435,7 +9518,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$K, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -9507,7 +9590,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$w, {
+                      createVNode(_sfc_main$t, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -9515,7 +9598,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$w, {
+                      createVNode(_sfc_main$t, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -9582,7 +9665,13 @@ class CodeBlock extends BaseService {
     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数据源
@@ -9785,42 +9874,6 @@ class ComponentList extends BaseService {
 }
 const componentListService = new ComponentList();
 
-class Dep extends BaseService {
-  watcher = new Watcher({ initialTargets: reactive({}) });
-  removeTargets(type = DepTargetType.DEFAULT) {
-    this.watcher.removeTargets(type);
-    this.emit("remove-target");
-  }
-  getTargets(type = 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 = reactive({});
 let methodMap = reactive({});
 class Events extends BaseService {
@@ -10040,7 +10093,8 @@ const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
-  codeOptions: () => ({})
+  codeOptions: () => ({}),
+  renderType: RenderType.IFRAME
 };
 
 const initServiceState = (props, {
@@ -10178,13 +10232,13 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     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)
@@ -10197,7 +10251,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
-    updateDataSoucreSchema();
+    updateDataSourceSchema();
     nodes.forEach((node) => {
       const deps = Object.values(root.dataSourceDeps || {});
       deps.forEach((dep) => {
@@ -10238,10 +10292,10 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     }
   };
   const depUpdateHandler = (node) => {
-    upateNodeWhenDataSourceChange([node]);
+    updateNodeWhenDataSourceChange([node]);
   };
   const collectedHandler = (nodes) => {
-    upateNodeWhenDataSourceChange(nodes);
+    updateNodeWhenDataSourceChange(nodes);
   };
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
@@ -10263,7 +10317,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     Object.entries(value.codeBlocks).forEach(([id, code]) => {
       depService.addTarget(createCodeBlockTarget(id, code));
     });
-    value.dataSources.forEach((ds) => {
+    dataSourceService.get("dataSources").forEach((ds) => {
       initDataSourceDepTarget(ds);
     });
     if (Array.isArray(value.items)) {
@@ -10308,14 +10362,14 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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, DepTargetType.CODE_BLOCK)) {
+      depService.getTarget(id, DepTargetType.CODE_BLOCK).name = codeBlock.name;
       return;
     }
     depService.addTarget(createCodeBlockTarget(id, codeBlock));
   };
   const codeBlockRemoveHandler = (id) => {
-    depService.removeTarget(id);
+    depService.removeTarget(id, DepTargetType.CODE_BLOCK);
   };
   codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
   codeBlockService.on("remove", codeBlockRemoveHandler);
@@ -10325,17 +10379,28 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   const dataSourceUpdateHandler = (config) => {
     const root = editorService.get("root");
+    removeDataSourceTarget(config.id);
+    initDataSourceDepTarget(config);
+    depService.collect(root?.items || [], true);
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
-    upateNodeWhenDataSourceChange(nodes);
+    updateNodeWhenDataSourceChange(nodes);
+  };
+  const removeDataSourceTarget = (id) => {
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_COND);
+    depService.removeTarget(id, 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(DepTargetType.RELATED_COMP_WHEN_COPY)) {
+    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
+  }
   onUnmounted(() => {
     depService.off("add-target", targetAddHandler);
     depService.off("remove-target", targetRemoveHandler);
@@ -10369,6 +10434,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     stageContentMenu: {},
     render: { type: Function },
     runtimeUrl: {},
+    renderType: {},
     autoScrollIntoView: { type: Boolean },
     propsConfigs: {},
     propsValues: {},
@@ -10387,7 +10453,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 }) {
@@ -10425,18 +10492,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
         containerHighlightType: props.containerHighlightType,
-        disabledDragStart: props.disabledDragStart
+        disabledDragStart: props.disabledDragStart,
+        renderType: props.renderType
       })
     );
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$x, null, {
+      return openBlock(), createBlock(_sfc_main$u, null, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$v, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$s, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -10447,7 +10515,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         sidebar: withCtx(() => [
           renderSlot(_ctx.$slots, "sidebar", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$e, {
+            createVNode(_sfc_main$c, {
               data: _ctx.sidebar,
               "layer-content-menu": _ctx.layerContentMenu
             }, {
@@ -10457,6 +10525,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "layer-node-content": withCtx(({ data }) => [
                 renderSlot(_ctx.$slots, "layer-node-content", { data })
               ]),
+              "layer-node-label": withCtx(({ data }) => [
+                renderSlot(_ctx.$slots, "layer-node-label", { data })
+              ]),
               "layer-node-tool": withCtx(({ data }) => [
                 renderSlot(_ctx.$slots, "layer-node-tool", { data })
               ]),
@@ -10503,7 +10574,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$u, {
+            createVNode(_sfc_main$r, {
               "extend-state": _ctx.extendFormState,
               onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
             }, {
@@ -10529,8 +10600,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-const index$1 = '';
-
 const defaultInstallOpt = {
   // eslint-disable-next-line no-eval
   parseDSL: (dsl) => eval(dsl)
@@ -10541,23 +10610,23 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(_sfc_main.name, _sfc_main);
-    app.component("m-fields-ui-select", _sfc_main$B);
-    app.component("m-fields-code-link", _sfc_main$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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$u as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$w as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$n as CodeBlockList, _sfc_main$m as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$N as CodeSelect, _sfc_main$J as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$i as ContentMenu, _sfc_main$H as DataSourceFieldSelect, _sfc_main$I as DataSourceFields, _sfc_main$G as DataSourceInput, _sfc_main$E as DataSourceMethodSelect, _sfc_main$F as DataSourceMethods, _sfc_main$D as DataSourceMocks, _sfc_main$C as DataSourceSelect, DragType, _sfc_main$B as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$K as Icon, KeyBindingCommand, _sfc_main$z as KeyValue, Keys, LayerOffset, _sfc_main$e as LayerPanel, Layout, _sfc_main$w as LayoutContainer, _sfc_main$r as PropsPanel, _sfc_main$x as Resizer, _sfc_main$w as SplitView, _sfc_main$Q as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$t as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map