@tmagic/editor 1.4.6 → 1.4.8

package/dist/tmagic-editor.umd.cjs

@@ -153,8 +153,7 @@
       };
       const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
       const init = async () => {
-        if (!codeEditor.value)
-          return;
+        if (!codeEditor.value) return;
         const options = {
           value: values.value,
           language: props.language,
@@ -367,8 +366,7 @@
         }
       );
       const changeHandler = (v) => {
-        if (!props.name || !props.model)
-          return;
+        if (!props.name || !props.model) return;
         try {
           const parseDSL = getConfig("parseDSL");
           props.model[props.name] = parseDSL(`(${v[props.name]})`);
@@ -511,11 +509,9 @@
   });
 
   const compose = (middleware, isAsync) => {
-    if (!Array.isArray(middleware))
-      throw new TypeError("Middleware 必须是一个数组!");
+    if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
     for (const fn of middleware) {
-      if (typeof fn !== "function")
-        throw new TypeError("Middleware 必须由函数组成!");
+      if (typeof fn !== "function") throw new TypeError("Middleware 必须由函数组成!");
     }
     return (args, next) => {
       let index = -1;
@@ -530,8 +526,7 @@
         }
         index = i;
         let fn = middleware[i];
-        if (i === middleware.length && next)
-          fn = next;
+        if (i === middleware.length && next) fn = next;
         if (!fn) {
           if (isAsync) {
             return Promise.resolve();
@@ -561,8 +556,7 @@
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
         beforeArgs = beforeMethod(...beforeArgs) || [];
-        if (isError(beforeArgs))
-          throw beforeArgs;
+        if (isError(beforeArgs)) throw beforeArgs;
         if (!Array.isArray(beforeArgs)) {
           beforeArgs = [beforeArgs];
         }
@@ -570,8 +564,7 @@
       let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
         returnValue = afterMethod(returnValue, ...beforeArgs);
-        if (isError(returnValue))
-          throw returnValue;
+        if (isError(returnValue)) throw returnValue;
       }
       return returnValue;
     } catch (error) {
@@ -583,8 +576,7 @@
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
         beforeArgs = await beforeMethod(...beforeArgs) || [];
-        if (isError(beforeArgs))
-          throw beforeArgs;
+        if (isError(beforeArgs)) throw beforeArgs;
         if (!Array.isArray(beforeArgs)) {
           beforeArgs = [beforeArgs];
         }
@@ -592,8 +584,7 @@
       let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
         returnValue = await afterMethod(returnValue, ...beforeArgs);
-        if (isError(returnValue))
-          throw returnValue;
+        if (isError(returnValue)) throw returnValue;
       }
       return returnValue;
     } catch (error) {
@@ -644,14 +635,12 @@
      */
     use(options) {
       Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.middleware[methodName2].push(method);
+        if (typeof method === "function") this.middleware[methodName2].push(method);
       });
     }
     usePlugin(options) {
       Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.pluginOptionsList[methodName2].push(method);
+        if (typeof method === "function") this.pluginOptionsList[methodName2].push(method);
       });
     }
     removeAllPlugins() {
@@ -673,48 +662,6 @@
     }
   }
 
-  class Dep extends BaseService {
-    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
-    removeTargets(type = dep.DepTargetType.DEFAULT) {
-      this.watcher.removeTargets(type);
-      this.emit("remove-target");
-    }
-    getTargets(type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.getTargets(type);
-    }
-    getTarget(id, type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.getTarget(id, type);
-    }
-    addTarget(target) {
-      this.watcher.addTarget(target);
-      this.emit("add-target", target);
-    }
-    removeTarget(id, type = dep.DepTargetType.DEFAULT) {
-      this.watcher.removeTarget(id, type);
-      this.emit("remove-target");
-    }
-    clearTargets() {
-      this.watcher.clearTargets();
-    }
-    collect(nodes, deep = false, type) {
-      this.watcher.collect(nodes, deep, type);
-      this.emit("collected", nodes, deep);
-    }
-    clear(nodes) {
-      return this.watcher.clear(nodes);
-    }
-    clearByType(type, nodes) {
-      return this.watcher.clearByType(type, nodes);
-    }
-    hasTarget(id, type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.hasTarget(id, type);
-    }
-    hasSpecifiedTypeTarget(type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.hasSpecifiedTypeTarget(type);
-    }
-  }
-  const depService = new Dep();
-
   const canUsePluginMethods$6 = {
     async: [
       "setPropsConfig",
@@ -748,7 +695,11 @@
       return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
     }
     async setPropsConfig(type, config) {
-      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+      let c = config;
+      if (typeof config === "function") {
+        c = config({ editorService });
+      }
+      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
     }
     /**
      * 获取指点类型的组件属性表单配置
@@ -772,7 +723,11 @@
      * @param value 组件初始值
      */
     async setPropsValue(type, value) {
-      this.state.propsValueMap[utils.toLine(type)] = value;
+      let v = value;
+      if (typeof value === "function") {
+        v = value({ editorService });
+      }
+      this.state.propsValueMap[utils.toLine(type)] = v;
     }
     /**
      * 获取指定类型的组件初始值
@@ -854,30 +809,28 @@
      * @param originConfigs 原组件配置
      * @param targetConfigs 待替换的组件配置
      */
-    replaceRelateId(originConfigs, targetConfigs) {
+    replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
       const relateIdMap = this.getRelateIdMap();
-      if (Object.keys(relateIdMap).length === 0)
-        return;
-      depService.clearByType(dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      depService.collect(originConfigs, true, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      const target = depService.getTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      if (!target)
-        return;
+      if (Object.keys(relateIdMap).length === 0) return;
+      const target = new dep.Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new dep.Watcher();
+      coperWatcher.addTarget(target);
+      coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
       originConfigs.forEach((config) => {
         const newId = relateIdMap[config.id];
         const path = utils.getNodePath(newId, targetConfigs);
         const targetConfig = path[path.length - 1];
-        if (!targetConfig)
-          return;
+        if (!targetConfig) return;
         target.deps[config.id]?.keys?.forEach((fullKey) => {
           const relateOriginId = utils.getValueByKeyPath(fullKey, config);
           const relateTargetId = relateIdMap[relateOriginId];
-          if (!relateTargetId)
-            return;
+          if (!relateTargetId) return;
           utils.setValueByKeyPath(fullKey, relateTargetId, targetConfig);
         });
         if (config.items && Array.isArray(config.items)) {
-          this.replaceRelateId(config.items, targetConfigs);
+          this.replaceRelateId(config.items, targetConfigs, collectorOptions);
         }
       });
     }
@@ -983,8 +936,7 @@
       this.state.canUndo = false;
     }
     changePage(page) {
-      if (!page)
-        return;
+      if (!page) return;
       this.state.pageId = page.id;
       if (!this.state.pageSteps[this.state.pageId]) {
         const undoRedo = new UndoRedo();
@@ -1006,24 +958,21 @@
     }
     push(state) {
       const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
+      if (!undoRedo) return null;
       undoRedo.pushElement(state);
       this.emit("change", state);
       return state;
     }
     undo() {
       const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
+      if (!undoRedo) return null;
       const state = undoRedo.undo();
       this.emit("change", state);
       return state;
     }
     redo() {
       const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
+      if (!undoRedo) return null;
       const state = undoRedo.redo();
       this.emit("change", state);
       return state;
@@ -1034,8 +983,7 @@
       this.removeAllPlugins();
     }
     getUndoRedo() {
-      if (!this.state.pageId)
-        return null;
+      if (!this.state.pageId) return null;
       return this.state.pageSteps[this.state.pageId];
     }
     setCanUndoRedo() {
@@ -1096,8 +1044,7 @@
       const { protocol = options.protocol, item } = this.getValueAndProtocol(
         storage.getItem(`${options.namespace || namespace}:${key}`)
       );
-      if (item === null)
-        return null;
+      if (item === null) return null;
       switch (protocol) {
         case "object" /* OBJECT */:
           return getConfig("parseDSL")(`(${item})`);
@@ -1238,24 +1185,19 @@
   const COPY_CODE_STORAGE_KEY = "$MagicEditorCopyCode";
   const COPY_DS_STORAGE_KEY = "$MagicEditorCopyDataSource";
   const getPageList = (root) => {
-    if (!root)
-      return [];
-    if (!Array.isArray(root.items))
-      return [];
+    if (!root) return [];
+    if (!Array.isArray(root.items)) return [];
     return root.items.filter((item) => utils.isPage(item));
   };
   const getPageFragmentList = (root) => {
-    if (!root)
-      return [];
-    if (!Array.isArray(root.items))
-      return [];
+    if (!root) return [];
+    if (!Array.isArray(root.items)) return [];
     return root.items.filter((item) => utils.isPageFragment(item));
   };
   const getPageNameList = (pages) => pages.map((page) => page.name || "index");
   const generatePageName = (pageNameList, type) => {
     let pageLength = pageNameList.length;
-    if (!pageLength)
-      return `${type}_index`;
+    if (!pageLength) return `${type}_index`;
     let pageName = `${type}_${pageLength}`;
     while (pageNameList.includes(pageName)) {
       pageLength += 1;
@@ -1277,8 +1219,7 @@
   });
   const getMiddleTop = (node, parentNode, stage) => {
     let height = node.style?.height || 0;
-    if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
-      return node.style?.top;
+    if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style) return node.style?.top;
     if (!utils.isNumber(height)) {
       height = 0;
     }
@@ -1314,11 +1255,9 @@
     return node;
   };
   const setLayout = (node, layout) => {
-    if (utils.isPop(node))
-      return;
+    if (utils.isPop(node)) return;
     const style = node.style || {};
-    if (style.position === "fixed")
-      return;
+    if (style.position === "fixed") return;
     if (layout !== Layout.RELATIVE) {
       style.position = "absolute";
     } else {
@@ -1372,8 +1311,7 @@
     return getRelativeStyle(style);
   };
   const getGuideLineFromCache = (key) => {
-    if (!key)
-      return [];
+    if (!key) return [];
     const guideLineCacheData = globalThis.localStorage.getItem(key);
     if (guideLineCacheData) {
       try {
@@ -1385,8 +1323,7 @@
     return [];
   };
   const fixNodeLeft = (config, parent, doc) => {
-    if (!doc || !config.style || !utils.isNumber(config.style.left))
-      return config.style?.left;
+    if (!doc || !config.style || !utils.isNumber(config.style.left)) return config.style?.left;
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
     const left = Number(config.style?.left) || 0;
@@ -1415,24 +1352,39 @@
   }).replace(/"(\w+)":\s/g, "$1: ");
   const traverseNode = (node, cb, parents = []) => {
     cb(node, parents);
-    if (node.items?.length) {
+    if (Array.isArray(node.items) && node.items.length) {
       parents.push(node);
       node.items.forEach((item) => {
         traverseNode(item, cb, [...parents]);
       });
     }
   };
+  const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
+    sourceIndices.sort((a, b) => a - b);
+    for (let i = sourceIndices.length - 1; i >= 0; i--) {
+      const sourceIndex = sourceIndices[i];
+      if (sourceIndex === targetIndex) {
+        continue;
+      }
+      const [item] = parent.items.splice(sourceIndex, 1);
+      parent.items.splice(sourceIndex < targetIndex ? targetIndex - 1 : targetIndex, 0, item);
+      for (let j = i - 1; j >= 0; j--) {
+        if (sourceIndices[j] >= targetIndex) {
+          sourceIndices[j] += 1;
+        }
+      }
+    }
+  };
 
-  const beforePaste = (position, config) => {
-    if (!config[0]?.style)
-      return config;
+  const beforePaste = (position, config, doc) => {
+    if (!config[0]?.style) return config;
     const curNode = editorService.get("node");
     const { left: referenceLeft, top: referenceTop } = config[0].style;
     const pasteConfigs = config.map((configItem) => {
       const { offsetX = 0, offsetY = 0, ...positionClone } = position;
       let pastePosition = positionClone;
       if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
-        pastePosition = getPositionInContainer(pastePosition, curNode.id);
+        pastePosition = getPositionInContainer(pastePosition, curNode.id, doc);
       }
       if (pastePosition.left && configItem.style?.left) {
         pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
@@ -1462,12 +1414,12 @@
     });
     return pasteConfigs;
   };
-  const getPositionInContainer = (position = {}, id) => {
+  const getPositionInContainer = (position = {}, id, doc) => {
     let { left = 0, top = 0 } = position;
     const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
     const parentElRect = parentEl?.getBoundingClientRect();
-    left = left - (parentElRect?.left || 0);
-    top = top - (parentElRect?.top || 0);
+    left = left - utils.calcValueByFontsize(doc, parentElRect?.left || 0);
+    top = top - utils.calcValueByFontsize(doc, parentElRect?.top || 0);
     return {
       left,
       top
@@ -1595,15 +1547,13 @@
         parent: null,
         page: null
       };
-      if (!root)
-        return info;
+      if (!root) return info;
       if (id === root.id) {
         info.node = root;
         return info;
       }
       const path = utils.getNodePath(id, root.items);
-      if (!path.length)
-        return info;
+      if (!path.length) return info;
       path.unshift(root);
       info.node = path[path.length - 1];
       info.parent = path[path.length - 2];
@@ -1639,8 +1589,7 @@
      * 只有容器拥有布局
      */
     async getLayout(parent, node) {
-      if (node && typeof node !== "function" && isFixed(node))
-        return Layout.FIXED;
+      if (node && typeof node !== "function" && isFixed(node)) return Layout.FIXED;
       if (parent.layout) {
         return parent.layout;
       }
@@ -1680,11 +1629,9 @@
     }
     async selectNextNode() {
       const node = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT)
-        return node;
+      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT) return node;
       const parent = vue.toRaw(this.getParentById(node.id));
-      if (!parent)
-        return node;
+      if (!parent) return node;
       const index = getNodeIndex(node.id, parent);
       const nextNode = parent.items[index + 1] || parent.items[0];
       await this.select(nextNode);
@@ -1694,10 +1641,8 @@
     async selectNextPage() {
       const root = vue.toRaw(this.get("root"));
       const page = vue.toRaw(this.get("page"));
-      if (!page)
-        throw new Error("page不能为空");
-      if (!root)
-        throw new Error("root不能为空");
+      if (!page) throw new Error("page不能为空");
+      if (!root) throw new Error("root不能为空");
       const index = getNodeIndex(page.id, root);
       const nextPage = root.items[index + 1] || root.items[0];
       await this.select(nextPage);
@@ -1712,8 +1657,7 @@
     highlight(config) {
       const { node } = this.selectedConfigExceptionHandler(config);
       const currentHighlightNode = this.get("highlightNode");
-      if (currentHighlightNode === node)
-        return;
+      if (currentHighlightNode === node) return;
       this.set("highlightNode", node);
     }
     /**
@@ -1726,16 +1670,14 @@
       const idsUnique = lodashEs.uniq(ids);
       idsUnique.forEach((id) => {
         const { node } = this.getNodeInfo(id);
-        if (!node)
-          return;
+        if (!node) return;
         nodes.push(node);
       });
       this.set("nodes", nodes);
     }
     selectRoot() {
       const root = this.get("root");
-      if (!root)
-        return;
+      if (!root) return;
       this.set("nodes", [root]);
       this.set("parent", null);
       this.set("page", null);
@@ -1744,12 +1686,10 @@
     }
     async doAdd(node, parent) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
+      if (!root) throw new Error("root为空");
       const curNode = this.get("node");
       const stage = this.get("stage");
-      if (!curNode)
-        throw new Error("当前选中节点为空");
+      if (!curNode) throw new Error("当前选中节点为空");
       if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
         throw new Error("app下不能添加组件");
       }
@@ -1786,8 +1726,7 @@
       const addNodes = [];
       if (!Array.isArray(addNode)) {
         const { type, inputEvent, ...config } = addNode;
-        if (!type)
-          throw new Error("组件类型不能为空");
+        if (!type) throw new Error("组件类型不能为空");
         addNodes.push({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
       } else {
         addNodes.push(...addNode);
@@ -1799,8 +1738,7 @@
             return this.doAdd(node, root);
           }
           const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
-          if (!parentNode)
-            throw new Error("未找到父元素");
+          if (!parentNode) throw new Error("未找到父元素");
           return this.doAdd(node, parentNode);
         })
       );
@@ -1826,14 +1764,11 @@
     }
     async doRemove(node) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root不能为空");
+      if (!root) throw new Error("root不能为空");
       const { parent, node: curNode } = this.getNodeInfo(node.id, false);
-      if (!parent || !curNode)
-        throw new Error("找不要删除的节点");
+      if (!parent || !curNode) throw new Error("找不要删除的节点");
       const index = getNodeIndex(curNode.id, parent);
-      if (typeof index !== "number" || index === -1)
-        throw new Error("找不要删除的节点");
+      if (typeof index !== "number" || index === -1) throw new Error("找不要删除的节点");
       parent.items?.splice(index, 1);
       const stage = this.get("stage");
       stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
@@ -1877,13 +1812,10 @@
     }
     async doUpdate(config) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
-      if (!config?.id)
-        throw new Error("没有配置或者配置缺少id值");
+      if (!root) throw new Error("root为空");
+      if (!config?.id) throw new Error("没有配置或者配置缺少id值");
       const info = this.getNodeInfo(config.id, false);
-      if (!info.node)
-        throw new Error(`获取不到id为${config.id}的节点`);
+      if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
@@ -1897,19 +1829,16 @@
           return srcValue;
         }
       });
-      if (!newConfig.type)
-        throw new Error("配置缺少type值");
+      if (!newConfig.type) throw new Error("配置缺少type值");
       if (newConfig.type === schema.NodeType.ROOT) {
         this.set("root", newConfig);
         return newConfig;
       }
       const { parent } = info;
-      if (!parent)
-        throw new Error("获取不到父级节点");
+      if (!parent) throw new Error("获取不到父级节点");
       const parentNodeItems = parent.items;
       const index = getNodeIndex(newConfig.id, parent);
-      if (!parentNodeItems || typeof index === "undefined" || index === -1)
-        throw new Error("更新的节点未找到");
+      if (!parentNodeItems || typeof index === "undefined" || index === -1) throw new Error("更新的节点未找到");
       const newLayout = await this.getLayout(newConfig);
       const layout = await this.getLayout(node);
       if (Array.isArray(newConfig.items) && newLayout !== layout) {
@@ -1953,17 +1882,13 @@
      */
     async sort(id1, id2) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
+      if (!root) throw new Error("root为空");
       const node = this.get("node");
-      if (!node)
-        throw new Error("当前节点为空");
+      if (!node) throw new Error("当前节点为空");
       const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
-      if (!parent)
-        throw new Error("父节点为空");
+      if (!parent) throw new Error("父节点为空");
       const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
-      if (index2 < 0)
-        return;
+      if (index2 < 0) return;
       const index1 = parent.items.findIndex((node2) => `${node2.id}` === `${id1}`);
       parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
       await this.update(parent);
@@ -1991,19 +1916,18 @@
      * @param config 组件节点配置
      * @returns
      */
-    copyWithRelated(config) {
+    copyWithRelated(config, collectorOptions) {
       const copyNodes = Array.isArray(config) ? config : [config];
-      depService.clearByType(dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      const customTarget = depService.getTarget(
-        dep.DepTargetType.RELATED_COMP_WHEN_COPY,
-        dep.DepTargetType.RELATED_COMP_WHEN_COPY
-      );
-      if (customTarget) {
+      if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+        const customTarget = new dep.Target({
+          ...collectorOptions
+        });
+        const coperWatcher = new dep.Watcher();
+        coperWatcher.addTarget(customTarget);
+        coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
           const node = this.getNodeById(nodeId);
-          if (!node)
-            return;
+          if (!node) return;
           customTarget.deps[nodeId].keys.forEach((key) => {
             const relateNodeId = lodashEs.get(node, key);
             const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
@@ -2025,10 +1949,9 @@
      * @param position 粘贴的坐标
      * @returns 添加后的组件节点配置
      */
-    async paste(position = {}) {
+    async paste(position = {}, collectorOptions) {
       const config = storageService.getItem(COPY_STORAGE_KEY);
-      if (!Array.isArray(config))
-        return;
+      if (!Array.isArray(config)) return;
       const node = this.get("node");
       let parent = null;
       if (config.length === 1 && config[0].id === node?.id) {
@@ -2038,25 +1961,26 @@
         }
       }
       const pasteConfigs = await this.doPaste(config, position);
-      propsService.replaceRelateId(config, pasteConfigs);
+      if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+        propsService.replaceRelateId(config, pasteConfigs, collectorOptions);
+      }
       return this.add(pasteConfigs, parent);
     }
     async doPaste(config, position = {}) {
       propsService.clearRelateId();
-      const pasteConfigs = beforePaste(position, lodashEs.cloneDeep(config));
+      const doc = this.get("stage")?.renderer.contentWindow?.document;
+      const pasteConfigs = beforePaste(position, lodashEs.cloneDeep(config), doc);
       return pasteConfigs;
     }
     async doAlignCenter(config) {
       const parent = this.getParentById(config.id);
-      if (!parent)
-        throw new Error("找不到父节点");
+      if (!parent) throw new Error("找不到父节点");
       const node = lodashEs.cloneDeep(vue.toRaw(config));
       const layout = await this.getLayout(parent, node);
       if (layout === Layout.RELATIVE) {
         return config;
       }
-      if (!node.style)
-        return config;
+      if (!node.style) return config;
       const stage = this.get("stage");
       const doc = stage?.renderer.contentWindow?.document;
       if (doc) {
@@ -2095,14 +2019,11 @@
      */
     async moveLayer(offset) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
+      if (!root) throw new Error("root为空");
       const parent = this.get("parent");
-      if (!parent)
-        throw new Error("父节点为空");
+      if (!parent) throw new Error("父节点为空");
       const node = this.get("node");
-      if (!node)
-        throw new Error("当前节点为空");
+      if (!node) throw new Error("当前节点为空");
       const brothers = parent.items || [];
       const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
       const layout = await this.getLayout(parent, node);
@@ -2164,28 +2085,35 @@
       }
     }
     async dragTo(config, targetParent, targetIndex) {
-      if (!targetParent || !Array.isArray(targetParent.items))
-        return;
-      const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-      if (!parent || !curNode)
-        throw new Error("找不要删除的节点");
-      const index = getNodeIndex(curNode.id, parent);
-      if (typeof index !== "number" || index === -1)
-        throw new Error("找不要删除的节点");
-      if (parent.id === targetParent.id) {
-        if (index === targetIndex)
-          return;
-        if (index < targetIndex) {
-          targetIndex -= 1;
-        }
-      }
-      const layout = await this.getLayout(parent);
+      if (!targetParent || !Array.isArray(targetParent.items)) return;
+      const configs = Array.isArray(config) ? config : [config];
+      const sourceIndicesInTargetParent = [];
+      const sourceOutTargetParent = [];
       const newLayout = await this.getLayout(targetParent);
-      if (newLayout !== layout) {
-        setLayout(config, newLayout);
+      for (const config2 of configs) {
+        const { parent, node: curNode } = this.getNodeInfo(config2.id, false);
+        if (!parent || !curNode) throw new Error("找不要删除的节点");
+        const index = getNodeIndex(curNode.id, parent);
+        if (parent.id === targetParent.id) {
+          if (typeof index !== "number" || index === -1) {
+            return;
+          }
+          sourceIndicesInTargetParent.push(index);
+        } else {
+          const layout = await this.getLayout(parent);
+          if (newLayout !== layout) {
+            setLayout(config2, newLayout);
+          }
+          parent.items?.splice(index, 1);
+          sourceOutTargetParent.push(config2);
+          this.addModifiedNodeId(parent.id);
+        }
       }
-      parent.items?.splice(index, 1);
-      targetParent.items?.splice(targetIndex, 0, config);
+      moveItemsInContainer(sourceIndicesInTargetParent, targetParent, targetIndex);
+      sourceOutTargetParent.forEach((config2, index) => {
+        targetParent.items?.splice(targetIndex + index, 0, config2);
+        this.addModifiedNodeId(config2.id);
+      });
       const page = this.get("page");
       const root = this.get("root");
       const stage = this.get("stage");
@@ -2196,10 +2124,8 @@
           root: lodashEs.cloneDeep(root)
         });
       }
-      this.addModifiedNodeId(config.id);
-      this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
-      this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
+      this.emit("drag-to", { targetIndex, configs, targetParent });
     }
     /**
      * 撤销当前操作
@@ -2221,11 +2147,9 @@
     }
     async move(left, top) {
       const node = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node))
-        return;
+      if (!node || utils.isPage(node)) return;
       const { style, id, type } = node;
-      if (!style || !["absolute", "fixed"].includes(style.position))
-        return;
+      if (!style || !["absolute", "fixed"].includes(style.position)) return;
       const update = (style2) => this.update({
         id,
         type,
@@ -2284,6 +2208,15 @@
     usePlugin(options) {
       super.usePlugin(options);
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    once(eventName, listener) {
+      return super.once(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     addModifiedNodeId(id) {
       if (!this.isHistoryStateChange) {
         this.get("modifiedNodeIds").set(id, id);
@@ -2302,14 +2235,12 @@
       this.isHistoryStateChange = false;
     }
     async changeHistoryState(value) {
-      if (!value)
-        return;
+      if (!value) return;
       this.isHistoryStateChange = true;
       await this.update(value.data);
       this.set("modifiedNodeIds", value.modifiedNodeIds);
       setTimeout(async () => {
-        if (!value.nodeId)
-          return;
+        if (!value.nodeId) return;
         await this.select(value.nodeId);
         this.get("stage")?.select(value.nodeId);
       }, 0);
@@ -2337,8 +2268,7 @@
         throw new Error("没有ID，无法选中");
       }
       const { node, parent, page } = this.getNodeInfo(id);
-      if (!node)
-        throw new Error("获取不到组件信息");
+      if (!node) throw new Error("获取不到组件信息");
       if (node.id === this.state.root?.id) {
         throw new Error("不能选根节点");
       }
@@ -2583,8 +2513,7 @@
     const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
     let index = 0;
     for (const match of matches) {
-      if (typeof match.index === "undefined")
-        break;
+      if (typeof match.index === "undefined") break;
       displayState.push({
         type: "text",
         value: key.substring(index, match.index)
@@ -2592,16 +2521,20 @@
       let dsText = "";
       let ds;
       let fields;
-      match[1].split(".").forEach((item, index2) => {
+      match[1].replaceAll(/\[(\d+)\]/g, ".$1").split(".").forEach((item, index2) => {
         if (index2 === 0) {
           ds = dataSources.find((ds2) => ds2.id === item);
           dsText += ds?.title || item;
           fields = ds?.fields;
           return;
         }
-        const field = fields?.find((field2) => field2.name === item);
-        fields = field?.fields;
-        dsText += `.${field?.title || item}`;
+        if (utils.isNumber(item)) {
+          dsText += `[${item}]`;
+        } else {
+          const field = fields?.find((field2) => field2.name === item);
+          fields = field?.fields;
+          dsText += `.${field?.title || item}`;
+        }
       });
       displayState.push({
         type: "var",
@@ -2749,17 +2682,19 @@
      * @param config 组件节点配置
      * @returns
      */
-    copyWithRelated(config) {
+    copyWithRelated(config, collectorOptions) {
       const copyNodes = Array.isArray(config) ? config : [config];
-      depService.clearByType(dep.DepTargetType.RELATED_DS_WHEN_COPY);
-      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_DS_WHEN_COPY);
-      const customTarget = depService.getTarget(dep.DepTargetType.RELATED_DS_WHEN_COPY, dep.DepTargetType.RELATED_DS_WHEN_COPY);
       const copyData = [];
-      if (customTarget) {
+      if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+        const customTarget = new dep.Target({
+          ...collectorOptions
+        });
+        const coperWatcher = new dep.Watcher();
+        coperWatcher.addTarget(customTarget);
+        coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
           const node = editorService.getNodeById(nodeId);
-          if (!node)
-            return;
+          if (!node) return;
           customTarget.deps[nodeId].keys.forEach((key) => {
             const [relateDsId] = lodashEs.get(node, key);
             const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
@@ -3354,11 +3289,9 @@
         () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
       );
       const getParamItemsConfig = (codeId) => {
-        if (!codeDsl.value || !codeId)
-          return [];
+        if (!codeDsl.value || !codeId) return [];
         const paramStatements = codeDsl.value[codeId]?.params;
-        if (lodashEs.isEmpty(paramStatements))
-          return [];
+        if (lodashEs.isEmpty(paramStatements)) return [];
         return paramStatements.map((paramState) => ({
           labelWidth: "100px",
           text: paramState.name,
@@ -3658,8 +3591,7 @@
       codeBlockService?.deleteCodeDslByIds([key]);
     };
     const submitCodeBlockHandler = async (values) => {
-      if (!codeId.value)
-        return;
+      if (!codeId.value) return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
       codeBlockEditor.value?.hide();
     };
@@ -3715,8 +3647,7 @@
         codeBlockEditor.value?.show();
       },
       deleteCode: async (model, methodName) => {
-        if (!model.methods)
-          return;
+        if (!model.methods) return;
         const index = model.methods.findIndex((method) => method.name === methodName);
         if (index === -1) {
           return;
@@ -3724,8 +3655,7 @@
         model.methods.splice(index, 1);
       },
       submitCode: (values) => {
-        if (!dataSource.value)
-          return;
+        if (!dataSource.value) return;
         if (!dataSource.value.methods) {
           dataSource.value.methods = [];
         }
@@ -3809,14 +3739,12 @@
     }
     async zoom(zoom) {
       this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
-      if (this.get("zoom") < 0.1)
-        this.set("zoom", 0.1);
+      if (this.get("zoom") < 0.1) this.set("zoom", 0.1);
     }
     async calcZoom() {
       const { stageRect, stageContainerRect } = state;
       const { height, width } = stageContainerRect;
-      if (!width || !height)
-        return 1;
+      if (!width || !height) return 1;
       let stageWidth = utils.convertToNumber(stageRect.width, width);
       let stageHeight = utils.convertToNumber(stageRect.height, height);
       stageWidth = stageWidth + 30;
@@ -3871,8 +3799,7 @@
       disabledDragStart: stageOptions.disabledDragStart,
       renderType: stageOptions.renderType,
       canSelect: (el, event, stop) => {
-        if (!stageOptions.canSelect)
-          return true;
+        if (!stageOptions.canSelect) return true;
         const elCanSelect = stageOptions.canSelect?.(el);
         if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
           document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
@@ -3903,8 +3830,7 @@
       editorService.set("stageLoading", false);
     });
     stage.on("select", (el) => {
-      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
-        return;
+      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1) return;
       editorService.select(el.id);
     });
     stage.on("highlight", (el) => {
@@ -3931,15 +3857,13 @@
     });
     stage.on("select-parent", () => {
       const parent = editorService.get("parent");
-      if (!parent)
-        throw new Error("父节点为空");
+      if (!parent) throw new Error("父节点为空");
       editorService.select(parent);
       editorService.get("stage")?.select(parent.id);
     });
     stage.on("change-guides", (e) => {
       uiService.set("showGuides", true);
-      if (!root.value || !page.value)
-        return;
+      if (!root.value || !page.value) return;
       const storageKey = getGuideLineKey(
         e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
       );
@@ -3982,8 +3906,7 @@
       isDragging.value = false;
     };
     document.body.addEventListener("dragover", (e) => {
-      if (!isDragging.value)
-        return;
+      if (!isDragging.value) return;
       e.preventDefault();
     });
     vue.watch(
@@ -4036,8 +3959,7 @@
     vue.watch(
       editorContentHeight,
       () => {
-        if (height.value > 0 && height.value === editorContentHeight.value)
-          return;
+        if (height.value > 0 && height.value === editorContentHeight.value) return;
         height.value = editorContentHeight.value;
       },
       {
@@ -4230,12 +4152,9 @@
           height: "200px",
           parse: true,
           type: (mForm, { model }) => {
-            if (model.type === "number")
-              return "number";
-            if (model.type === "boolean")
-              return "select";
-            if (model.type === "string")
-              return "text";
+            if (model.type === "number") return "number";
+            if (model.type === "boolean") return "select";
+            if (model.type === "string") return "text";
             return "vs-code";
           },
           options: [
@@ -4275,23 +4194,16 @@
         addFromJsonDialogVisible.value = true;
       };
       const getValueType = (value) => {
-        if (Array.isArray(value))
-          return "array";
-        if (value === null)
-          return "null";
-        if (typeof value === "object")
-          return "object";
-        if (typeof value === "number")
-          return "number";
-        if (typeof value === "boolean")
-          return "boolean";
-        if (typeof value === "string")
-          return "string";
+        if (Array.isArray(value)) return "array";
+        if (value === null) return "null";
+        if (typeof value === "object") return "object";
+        if (typeof value === "number") return "number";
+        if (typeof value === "boolean") return "boolean";
+        if (typeof value === "string") return "string";
         return "any";
       };
       const getFieldsConfig = (value, fields = []) => {
-        if (!value || typeof value !== "object")
-          throw new Error("数据格式错误");
+        if (!value || typeof value !== "object") throw new Error("数据格式错误");
         const newFields = [];
         Object.entries(value).forEach(([key, value2]) => {
           const type = getValueType(value2);
@@ -4481,10 +4393,8 @@
             model: props.model
           });
         }
-        if (type2 === "form")
-          return "";
-        if (type2 === "container")
-          return "";
+        if (type2 === "form") return "";
+        if (type2 === "container") return "";
         return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (props.config.items ? "" : "text");
       });
       const tagName = vue.computed(() => {
@@ -4492,8 +4402,7 @@
           return form.MCascader;
         }
         const component = vue.resolveComponent(`m-${props.config.items ? "form" : "fields"}-${type.value}`);
-        if (typeof component !== "string")
-          return component;
+        if (typeof component !== "string") return component;
         return "m-fields-text";
       });
       const onChangeHandler = (value) => {
@@ -4588,9 +4497,15 @@
         { immediate: true }
       );
       const mouseupHandler = async () => {
+        const selection = globalThis.document.getSelection();
+        const anchorOffset = selection?.anchorOffset || 0;
+        const focusOffset = selection?.focusOffset || 0;
         isFocused.value = true;
         await vue.nextTick();
         autocomplete.value?.focus();
+        if (focusOffset && input.value) {
+          input.value.setSelectionRange(anchorOffset, focusOffset);
+        }
       };
       const blurHandler = () => {
         isFocused.value = false;
@@ -4638,7 +4553,7 @@
       const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
         let result = [];
         const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
-        const keys = dsKey.split(".");
+        const keys = dsKey.replaceAll(/\[(\d+)\]/g, ".$1").split(".");
         const dsId = keys.shift();
         const ds = dataSources.value.find((ds2) => ds2.id === dsId);
         if (!ds) {
@@ -4648,6 +4563,10 @@
         let fields = ds.fields || [];
         let key = keys.shift();
         while (key) {
+          if (utils.isNumber(key)) {
+            key = keys.shift();
+            continue;
+          }
           for (const field of fields) {
             if (field.name === key) {
               fields = field.fields || [];
@@ -5225,11 +5144,9 @@
         return Boolean(dataSource?.methods.find((method) => method.name === name));
       });
       const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
-        if (!dataSourceId)
-          return [];
+        if (!dataSourceId) return [];
         const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
-        if (!paramStatements)
-          return [];
+        if (!paramStatements) return [];
         return paramStatements.map((paramState) => ({
           text: paramState.name,
           ...paramState
@@ -5274,8 +5191,7 @@
       const editCodeHandler = () => {
         const [id] = props.model[props.name];
         const dataSource = dataSourceService?.getDataSourceById(id);
-        if (!dataSource)
-          return;
+        if (!dataSource) return;
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
@@ -5386,15 +5302,13 @@
           defaultValue: "{}",
           height: "400px",
           onChange: (formState, v) => {
-            if (typeof v !== "string")
-              return v;
+            if (typeof v !== "string") return v;
             return JSON.parse(v);
           },
           rules: [
             {
               validator: ({ value, callback }) => {
-                if (typeof value !== "string")
-                  return callback();
+                if (typeof value !== "string") return callback();
                 try {
                   JSON.parse(value);
                   callback();
@@ -5622,12 +5536,10 @@
       };
       const editHandler = () => {
         const value = props.model[props.name];
-        if (!value)
-          return;
+        if (!value) return;
         const id = typeof value === "string" ? value : value.dataSourceId;
         const dataSource = dataSourceService?.getDataSourceById(id);
-        if (!dataSource)
-          return;
+        if (!dataSource) return;
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
@@ -5691,20 +5603,46 @@
       const eventsService = services?.eventsService;
       const codeBlockService = services?.codeBlockService;
       const eventNameConfig = vue.computed(() => {
-        const fieldType = props.config.src === "component" ? "select" : "cascader";
         const defaultEventNameConfig = {
           name: "name",
           text: "事件",
-          type: fieldType,
+          type: (mForm, { formValue }) => {
+            if (props.config.src !== "component" || formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+              return "cascader";
+            }
+            return "select";
+          },
           labelWidth: "40px",
-          checkStrictly: true,
+          checkStrictly: () => props.config.src !== "component",
           valueSeparator: ".",
           options: (mForm, { formValue }) => {
             let events = [];
-            if (!eventsService || !dataSourceService)
-              return events;
+            if (!eventsService || !dataSourceService) return events;
             if (props.config.src === "component") {
               events = eventsService.getEvent(formValue.type);
+              if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+                const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
+                if (pageFragment) {
+                  events = [
+                    {
+                      label: pageFragment.name || "迭代器容器",
+                      value: pageFragment.id,
+                      children: events
+                    }
+                  ];
+                  pageFragment.items.forEach((node) => {
+                    traverseNode(node, (node2) => {
+                      const nodeEvents = node2.type && eventsService.getEvent(node2.type) || [];
+                      events.push({
+                        label: `${node2.name}_${node2.id}`,
+                        value: `${node2.id}`,
+                        children: nodeEvents
+                      });
+                    });
+                  });
+                  return events;
+                }
+              }
               return events.map((option) => ({
                 text: option.label,
                 value: option.value
@@ -5763,7 +5701,11 @@
           name: "to",
           text: "联动组件",
           type: "ui-select",
-          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
+          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
+          onChange: (MForm, v, { model }) => {
+            model.method = "";
+            return v;
+          }
         };
         return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
       });
@@ -5771,15 +5713,42 @@
         const defaultCompActionConfig = {
           name: "method",
           text: "动作",
-          type: "select",
+          type: (mForm, { model }) => {
+            const to = editorService?.getNodeById(model.to);
+            if (to && to.type === "page-fragment-container" && to.pageFragmentId) {
+              return "cascader";
+            }
+            return "select";
+          },
+          checkStrictly: () => props.config.src !== "component",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
           options: (mForm, { model }) => {
             const node = editorService?.getNodeById(model.to);
-            if (!node?.type)
-              return [];
-            return eventsService?.getMethod(node.type).map((option) => ({
-              text: option.label,
-              value: option.value
+            if (!node?.type) return [];
+            let methods = [];
+            methods = eventsService?.getMethod(node.type) || [];
+            if (node.type === "page-fragment-container" && node.pageFragmentId) {
+              const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
+              if (pageFragment) {
+                methods = [];
+                pageFragment.items.forEach((node2) => {
+                  traverseNode(node2, (node3) => {
+                    const nodeMethods = node3.type && eventsService?.getMethod(node3.type) || [];
+                    if (nodeMethods.length) {
+                      methods.push({
+                        label: `${node3.name}_${node3.id}`,
+                        value: `${node3.id}`,
+                        children: nodeMethods
+                      });
+                    }
+                  });
+                });
+                return methods;
+              }
+            }
+            return methods.map((method) => ({
+              text: method.label,
+              value: method.value
             }));
           }
         };
@@ -5829,8 +5798,7 @@
             type: compActionConfig.value.type,
             options: (mForm, { model }) => {
               const node = editorService?.getNodeById(model.to);
-              if (!node?.type)
-                return [];
+              if (!node?.type) return [];
               return eventsService?.getMethod(node.type).map((option) => ({
                 text: option.label,
                 value: option.value
@@ -5859,8 +5827,7 @@
         ]
       }));
       const isOldVersion = vue.computed(() => {
-        if (props.model[props.name].length === 0)
-          return false;
+        if (props.model[props.name].length === 0) return false;
         return !lodashEs.has(props.model[props.name][0], "actions");
       });
       const addEvent = () => {
@@ -5875,8 +5842,7 @@
         onChangeHandler();
       };
       const removeEvent = (index) => {
-        if (!props.name)
-          return;
+        if (!props.name) return;
         props.model[props.name].splice(index, 1);
         onChangeHandler();
       };
@@ -6201,8 +6167,7 @@
       const val = vue.computed(() => props.model[props.name]);
       const uiSelectMode = vue.ref(false);
       const cancelHandler = () => {
-        if (!services?.uiService)
-          return;
+        if (!services?.uiService) return;
         services.uiService.set("uiSelectMode", false);
         uiSelectMode.value = false;
         globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
@@ -6222,8 +6187,7 @@
         return config?.name || "";
       });
       const startSelect = () => {
-        if (!services?.uiService)
-          return;
+        if (!services?.uiService) return;
         services.uiService.set("uiSelectMode", true);
         uiSelectMode.value = true;
         globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
@@ -6340,14 +6304,12 @@
     let getso;
     const isDraging = vue.ref(false);
     vue.onMounted(() => {
-      if (!target.value)
-        return;
+      if (!target.value) return;
       getso = new Gesto(target.value, {
         container: window,
         pinchOutside: true
       }).on("drag", (e) => {
-        if (!target.value)
-          return;
+        if (!target.value) return;
         emit("change", e);
       }).on("dragStart", () => {
         isDraging.value = true;
@@ -6463,13 +6425,11 @@
         });
       } else {
         vue.watchEffect(() => {
-          if (typeof props.width === "number")
-            widthChange(props.width);
+          if (typeof props.width === "number") widthChange(props.width);
         });
       }
       const changeLeft = ({ deltaX }) => {
-        if (typeof props.left === "undefined")
-          return;
+        if (typeof props.left === "undefined") return;
         let left = Math.max(props.left + deltaX, props.minLeft) || 0;
         emit("update:left", left);
         if (clientWidth - left - (props.right || 0) <= 0) {
@@ -6484,8 +6444,7 @@
         });
       };
       const changeRight = ({ deltaX }) => {
-        if (typeof props.right === "undefined")
-          return;
+        if (typeof props.right === "undefined") return;
         let right = Math.max(props.right - deltaX, props.minRight) || 0;
         emit("update:right", right);
         if (clientWidth - (props.left || 0) - right <= 0) {
@@ -6570,28 +6529,23 @@
       const props = __props;
       const services = vue.inject("services");
       const disabled = vue.computed(() => {
-        if (typeof props.data === "string")
-          return false;
-        if (props.data.type === "component")
-          return false;
+        if (typeof props.data === "string") return false;
+        if (props.data.type === "component") return false;
         if (typeof props.data.disabled === "function") {
           return props.data.disabled(services);
         }
         return props.data.disabled;
       });
       const display = vue.computed(() => {
-        if (!props.data)
-          return false;
-        if (typeof props.data === "string")
-          return true;
+        if (!props.data) return false;
+        if (typeof props.data === "string") return true;
         if (typeof props.data.display === "function") {
           return props.data.display(services);
         }
         return props.data.display ?? true;
       });
       const buttonHandler = (item, event) => {
-        if (disabled.value)
-          return;
+        if (disabled.value) return;
         if (typeof item.handler === "function" && services) {
           item.handler?.(services, event);
         }
@@ -6602,22 +6556,19 @@
         }
       };
       const clickHandler = (item, event) => {
-        if (props.eventType !== "click")
-          return;
+        if (props.eventType !== "click") return;
         if (item.type === "button") {
           buttonHandler(item, event);
         }
       };
       const mousedownHandler = (item, event) => {
-        if (props.eventType !== "mousedown")
-          return;
+        if (props.eventType !== "mousedown") return;
         if (item.type === "button") {
           buttonHandler(item, event);
         }
       };
       const mouseupHandler = (item, event) => {
-        if (props.eventType !== "mouseup")
-          return;
+        if (props.eventType !== "mouseup") return;
         if (item.type === "button") {
           buttonHandler(item, event);
         }
@@ -6734,11 +6685,9 @@
       const editorService = services?.editorService;
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
       const addPage = () => {
-        if (!editorService)
-          return;
+        if (!editorService) return;
         const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
+        if (!root) throw new Error("root 不能为空");
         const pageConfig = {
           type: props.type,
           name: generatePageNameByApp(root, props.type),
@@ -6796,8 +6745,7 @@
       });
       let translateLeft = 0;
       const scroll = (type) => {
-        if (!itemsContainer.value)
-          return;
+        if (!itemsContainer.value) return;
         const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
         if (type === "left") {
           translateLeft += 100;
@@ -7102,11 +7050,9 @@
       const services = vue.inject("services");
       const clickHandler = (type) => {
         const { editorService } = services || {};
-        if (!editorService)
-          return;
+        if (!editorService) return;
         const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
+        if (!root) throw new Error("root 不能为空");
         editorService.add({
           type,
           name: generatePageNameByApp(root, type),
@@ -7578,6 +7524,7 @@
           }, 8, ["type"])) : vue.createCommentVNode("", true),
           showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
             key: 1,
+            class: "m-editor-props-panel-src-code",
             height: `${vue.unref(editorContentHeight)}px`,
             "init-values": values.value,
             options: vue.unref(codeOptions),
@@ -7633,8 +7580,7 @@
 
   const updateStatus = (nodeStatusMap, id, status) => {
     const nodeStatus = nodeStatusMap.get(id);
-    if (!nodeStatus)
-      return;
+    if (!nodeStatus) return;
     utils.getKeys(status).forEach((key) => {
       if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
         nodeStatus[key] = Boolean(status[key]);
@@ -7675,7 +7621,9 @@
       const selected = vue.computed(() => nodeStatus.value.selected);
       const visible = vue.computed(() => nodeStatus.value.visible);
       const draggable = vue.computed(() => nodeStatus.value.draggable);
-      const hasChildren = vue.computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+      const hasChildren = vue.computed(
+        () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible)
+      );
       const handleDragStart = (event) => {
         treeEmit?.("node-dragstart", event, props.data);
       };
@@ -7828,12 +7776,10 @@
       return string.some((v) => filterNodeMethod(v, data));
     };
     const filter = (text) => {
-      if (!nodeData.value.length)
-        return;
+      if (!nodeData.value.length) return;
       nodeData.value.forEach((node) => {
         traverseNode(node, (node2, parents) => {
-          if (!nodeStatusMap.value)
-            return;
+          if (!nodeStatusMap.value) return;
           const visible = filterIsMatch(text, node2);
           if (visible && parents.length) {
             parents.forEach((parent) => {
@@ -7906,24 +7852,38 @@
       const services = vue.inject("services");
       const { codeBlockService, depService, editorService } = services || {};
       const codeList = vue.computed(
-        () => Object.values(depService?.getTargets(dep.DepTargetType.CODE_BLOCK) || {}).map((target) => {
-          const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
-            name: dep.name,
+        () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+          const target = depService?.getTarget(codeId, dep.DepTargetType.CODE_BLOCK);
+          const pageList = editorService?.get("root")?.items.map((page) => ({
+            name: page.devconfig?.tabName || page.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;
-            })
-          }));
+            id: `${codeId}_${page.id}`,
+            key: page.id,
+            items: []
+          })) || [];
+          if (target) {
+            Object.entries(target.deps).forEach(([id, dep]) => {
+              const page = pageList.find((page2) => page2.key === dep.data?.pageId);
+              page?.items?.push({
+                name: dep.name,
+                type: "node",
+                id: `${page.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,
+            id: codeId,
+            key: codeId,
+            name: code.name,
             type: "code",
-            codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-            items: compNodes
+            codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+            // 只有一个页面不显示页面分类
+            items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || []
           };
           return data;
         })
@@ -8109,8 +8069,7 @@
     const dataSourceValues = vue.ref({});
     const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
     const editHandler = (id) => {
-      if (!editDialog.value)
-        return;
+      if (!editDialog.value) return;
       dataSourceValues.value = {
         ...dataSourceService?.getDataSourceById(id)
       };
@@ -8238,13 +8197,14 @@
         key: id,
         items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`)
       });
-      const mergeChildren = (dsId, items, deps, type) => {
+      const mergeChildren = (dsId, pageItems, deps, type) => {
         Object.entries(deps).forEach(([id, dep]) => {
-          const nodeItem = items.find((item) => item.key === id);
+          const page = pageItems.find((page2) => page2.key === dep.data?.pageId);
+          const nodeItem = page?.items.find((item) => item.key === id);
           if (nodeItem) {
             nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
           } else {
-            items.push(getNodeTreeConfig(id, dep, type, dsId));
+            page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
           }
         });
       };
@@ -8253,7 +8213,13 @@
           const dsDeps = dsDep.value[ds.id]?.deps || {};
           const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
           const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
-          const items = [];
+          const items = editorService?.get("root")?.items.map((page) => ({
+            name: page.devconfig?.tabName || page.name,
+            type: "node",
+            id: `${ds.id}_${page.id}`,
+            key: page.id,
+            items: []
+          })) || [];
           mergeChildren(ds.id, items, dsDeps);
           mergeChildren(ds.id, items, dsMethodDeps, "method");
           mergeChildren(ds.id, items, dsCondDeps, "cond");
@@ -8262,7 +8228,8 @@
             key: ds.id,
             name: ds.title,
             type: "ds",
-            items
+            // 只有一个页面不显示页面分类
+            items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
           };
         })
       );
@@ -8370,8 +8337,7 @@
         ].concat(dataSourceService?.get("datasourceTypeList") ?? [])
       );
       const addHandler = (type) => {
-        if (!editDialog.value)
-          return;
+        if (!editDialog.value) return;
         const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
         dataSourceValues.value = lodashEs.mergeWith(
           { type, title: datasourceType?.text },
@@ -8488,20 +8454,17 @@
       }));
       const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
       const hide = () => {
-        if (!visible.value)
-          return;
+        if (!visible.value) return;
         visible.value = false;
         subMenu.value?.hide();
         emit("hide");
       };
       const clickHandler = () => {
-        if (!props.autoHide)
-          return;
+        if (!props.autoHide) return;
         hide();
       };
       const outsideClickHideHandler = (e) => {
-        if (!props.autoHide)
-          return;
+        if (!props.autoHide) return;
         const target = e.target;
         if (!visible.value || !target) {
           return;
@@ -8558,13 +8521,11 @@
         emit("mouseenter");
       };
       vue.onMounted(() => {
-        if (props.isSubMenu)
-          return;
+        if (props.isSubMenu) return;
         globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
       });
       vue.onBeforeUnmount(() => {
-        if (props.isSubMenu)
-          return;
+        if (props.isSubMenu) return;
         globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
       });
       __expose({
@@ -8685,8 +8646,7 @@
     display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
     handler: (services) => {
       const nodes = services?.editorService?.get("nodes");
-      if (!nodes || nodes.length === 0)
-        return;
+      if (!nodes || nodes.length === 0) return;
       if (menu?.value?.$el) {
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
@@ -8700,12 +8660,10 @@
     }
   });
   const moveTo = (id, services) => {
-    if (!services?.editorService)
-      return;
+    if (!services?.editorService) return;
     const nodes = services.editorService.get("nodes") || [];
     const parent = services.editorService.getNodeById(id);
-    if (!parent)
-      return;
+    if (!parent) return;
     services?.editorService.add(nodes, parent);
     services?.editorService.remove(nodes);
   };
@@ -8845,8 +8803,7 @@
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const setNodeVisible = (visible) => {
-        if (!editorService)
-          return;
+        if (!editorService) return;
         editorService.update({
           id: props.data.id,
           visible
@@ -8904,17 +8861,19 @@
       services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
     };
     const throttleTime = 300;
-    const highlightHandler = lodashEs.throttle((event, data) => {
-      highlight(data);
-    }, throttleTime);
+    const highlightHandler = lodashEs.throttle(
+      (event, data) => {
+        highlight(data);
+      },
+      throttleTime
+    );
     const highlight = (data) => {
       services?.editorService?.highlight(data);
       services?.editorService?.get("stage")?.highlight(data.id);
       services?.stageOverlayService?.get("stage")?.highlight(data.id);
     };
     const nodeClickHandler = (event, data) => {
-      if (!nodeStatusMap?.value)
-        return;
+      if (!nodeStatusMap?.value) return;
       if (services?.uiService.get("uiSelectMode")) {
         document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
         return;
@@ -8958,8 +8917,7 @@
     }
   };
   const removeStatusClass = (el) => {
-    if (!el)
-      return;
+    if (!el) return;
     ["drag-before", "drag-after", "drag-inner"].forEach((className) => {
       el.querySelectorAll(`.${className}`).forEach((el2) => {
         utils.removeClassName(el2, className);
@@ -8968,11 +8926,9 @@
   };
   const useDrag = (services) => {
     const handleDragStart = (event) => {
-      if (!event.dataTransfer || !event.target || !event.currentTarget)
-        return;
+      if (!event.dataTransfer || !event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl || targetEl !== event.currentTarget)
-        return;
+      if (!targetEl || targetEl !== event.currentTarget) return;
       event.dataTransfer.effectAllowed = "move";
       try {
         event.dataTransfer.setData(
@@ -8985,14 +8941,11 @@
       }
     };
     const handleDragOver = (event) => {
-      if (!event.target)
-        return;
+      if (!event.target) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl?.draggable)
-        return;
+      if (!targetEl?.draggable) return;
       const labelEl = targetEl.children[0];
-      if (!labelEl)
-        return;
+      if (!labelEl) return;
       const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
       const distance = event.clientY - targetTop;
       const isContainer = targetEl.dataset.isContainer === "true";
@@ -9017,20 +8970,16 @@
       event.preventDefault();
     };
     const handleDragLeave = (event) => {
-      if (!event.target || !event.currentTarget)
-        return;
+      if (!event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl || targetEl !== event.currentTarget)
-        return;
+      if (!targetEl || targetEl !== event.currentTarget) return;
       const labelEl = targetEl.children[0];
       utils.removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
     };
     const handleDragEnd = (event, node) => {
-      if (!event.target || !event.currentTarget)
-        return;
+      if (!event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl || targetEl !== event.currentTarget)
-        return;
+      if (!targetEl || targetEl !== event.currentTarget) return;
       removeStatusClass(dragState.container);
       if (node && dragState.dragOverNodeId && dragState.dropType && services) {
         if (dragState.dragOverNodeId === node.id) {
@@ -9039,8 +8988,7 @@
         const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
         const targetNode = targetInfo.node;
         let targetParent = targetInfo.parent;
-        if (!targetParent || !targetNode)
-          return;
+        if (!targetParent || !targetNode) return;
         let targetIndex = -1;
         if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
           targetIndex = targetNode.items.length;
@@ -9051,7 +8999,12 @@
         if (dragState.dropType === "after") {
           targetIndex += 1;
         }
-        services?.editorService.dragTo(node, targetParent, targetIndex);
+        const selectedNodes = services.editorService.get("nodes");
+        if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
+          services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
+        } else {
+          services.editorService.dragTo([node], targetParent, targetIndex);
+        }
       }
       dragState.dragOverNodeId = "";
       dragState.dropType = "";
@@ -9272,8 +9225,7 @@
     vue.watch(
       nodes,
       (nodes2) => {
-        if (!nodeStatusMap.value)
-          return;
+        if (!nodeStatusMap.value) return;
         for (const [id, status] of nodeStatusMap.value.entries()) {
           status.selected = nodes2.some((node) => node.id === id);
           if (status.selected) {
@@ -9291,8 +9243,7 @@
     );
     services?.editorService.on("add", (newNodes) => {
       newNodes.forEach((node) => {
-        if (utils.isPage(node) || utils.isPageFragment(node))
-          return;
+        if (utils.isPage(node) || utils.isPageFragment(node)) return;
         traverseNode(node, (node2) => {
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
@@ -9344,8 +9295,7 @@
       };
       const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
       const collapseAllHandler = () => {
-        if (!page.value || !nodeStatusMap.value)
-          return;
+        if (!page.value || !nodeStatusMap.value) return;
         const items = nodeStatusMap.value.entries();
         for (const [id, status] of items) {
           if (id === page.value.id) {
@@ -9479,8 +9429,7 @@
           }
           return;
         }
-        if (timeout || !stage.value)
-          return;
+        if (timeout || !stage.value) return;
         timeout = stage.value.delayedMarkContainer(e);
       };
       return (_ctx, _cache) => {
@@ -9644,8 +9593,7 @@
           const isActiveTabShow = showingBoxKeys.value.some(
             (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text
           );
-          if (!isActiveTabShow && activeTabName.value)
-            return;
+          if (!isActiveTabShow && activeTabName.value) return;
           const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
           if (!nextSlideBarItem) {
             activeTabName.value = "";
@@ -9900,8 +9848,7 @@
     }
     wheelHandler = (event) => {
       const { deltaX, deltaY, currentTarget } = event;
-      if (currentTarget !== this.container)
-        return;
+      if (currentTarget !== this.container) return;
       let top;
       if (this.scrollHeight > this.height) {
         top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
@@ -9994,8 +9941,7 @@
       }));
       let gesto;
       vue.onMounted(() => {
-        if (!thumb.value)
-          return;
+        if (!thumb.value) return;
         const thumbEl = thumb.value;
         gesto = new Gesto(thumbEl, {
           container: window
@@ -10009,8 +9955,7 @@
         bar.value?.addEventListener("wheel", wheelHandler, false);
       });
       vue.onBeforeUnmount(() => {
-        if (gesto)
-          gesto.off();
+        if (gesto) gesto.off();
         bar.value?.removeEventListener("wheel", wheelHandler, false);
       });
       const wheelHandler = (e) => {
@@ -10089,8 +10034,7 @@
       const scrollHeight = vue.ref(0);
       let scrollViewer;
       vue.onMounted(() => {
-        if (!container.value || !el.value)
-          return;
+        if (!container.value || !el.value) return;
         scrollViewer = new ScrollViewer({
           container: container.value,
           target: el.value,
@@ -10183,8 +10127,7 @@
       const unWatch = vue.watch(
         stage,
         (stage2) => {
-          if (!stage2)
-            return;
+          if (!stage2) return;
           vue.nextTick(() => unWatch());
           stage2.on("select", (el, event) => {
             const els = stage2.renderer.getElementsFromPoint(event) || [];
@@ -10200,8 +10143,7 @@
       vue.watch(
         nodes,
         (nodes2) => {
-          if (!nodeStatusMap.value)
-            return;
+          if (!nodeStatusMap.value) return;
           for (const [id, status] of nodeStatusMap.value.entries()) {
             status.selected = nodes2.some((node) => node.id === id);
           }
@@ -10295,8 +10237,7 @@
         }
       });
       vue.watch(stageOverlay, (stageOverlay2) => {
-        if (!services)
-          return;
+        if (!services) return;
         const subStage = services.stageOverlayService.createStage(stageOptions);
         services?.stageOverlayService.set("stage", subStage);
         if (stageOverlay2 && subStage) {
@@ -10411,8 +10352,7 @@
               icon: vue.markRaw(_sfc_main$5),
               display: () => canCenter.value,
               handler: () => {
-                if (!nodes.value)
-                  return;
+                if (!nodes.value) return;
                 editorService?.alignCenter(nodes.value);
               }
             },
@@ -10422,8 +10362,7 @@
               type: "divider",
               direction: "horizontal",
               display: () => {
-                if (!node.value)
-                  return false;
+                if (!node.value) return false;
                 return !utils.isPage(node.value) && !utils.isPageFragment(node.value);
               }
             },
@@ -10489,8 +10428,7 @@
       vue.watch(
         parent,
         async () => {
-          if (!parent.value || !editorService)
-            return canCenter.value = false;
+          if (!parent.value || !editorService) return canCenter.value = false;
           const layout = await editorService.getLayout(parent.value);
           const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
           const isTypeConform = nodes.value?.every(
@@ -10541,12 +10479,9 @@
       const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
       vue.watchEffect(() => {
-        if (stage || !page.value)
-          return;
-        if (!stageContainer.value)
-          return;
-        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
-          return;
+        if (stage || !page.value) return;
+        if (!stageContainer.value) return;
+        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
         stage = useStage(stageOptions);
         stage.on("select", () => {
           stageWrap.value?.container?.focus();
@@ -10566,8 +10501,7 @@
         });
       });
       vue.watch(zoom, (zoom2) => {
-        if (!stage || !zoom2)
-          return;
+        if (!stage || !zoom2) return;
         stage.setZoom(zoom2);
       });
       vue.watch(page, (page2) => {
@@ -10612,20 +10546,16 @@
         menu.value?.show(e);
       };
       const dragoverHandler = (e) => {
-        if (!e.dataTransfer)
-          return;
+        if (!e.dataTransfer) return;
         e.preventDefault();
         e.dataTransfer.dropEffect = "move";
       };
       const dropHandler = async (e) => {
-        if (!e.dataTransfer)
-          return;
+        if (!e.dataTransfer) return;
         const data = e.dataTransfer.getData("text/json");
-        if (!data)
-          return;
+        if (!data) return;
         const config = parseDSL(`(${data})`);
-        if (!config || config.dragType !== DragType.COMPONENT_LIST)
-          return;
+        if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
         e.preventDefault();
         const doc = stage?.renderer.contentWindow?.document;
         const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
@@ -10830,11 +10760,9 @@
      * @returns {CodeBlockContent | null}
      */
     getCodeContentById(id) {
-      if (!id)
-        return null;
+      if (!id) return null;
       const totalCodeDsl = this.getCodeDsl();
-      if (!totalCodeDsl)
-        return null;
+      if (!totalCodeDsl) return null;
       return totalCodeDsl[id] ?? null;
     }
     /**
@@ -10859,8 +10787,7 @@
       if (!codeDsl) {
         throw new Error("dsl中没有codeBlocks");
       }
-      if (codeDsl[id] && !force)
-        return;
+      if (codeDsl[id] && !force) return;
       const codeConfigProcessed = lodashEs.cloneDeep(codeConfig);
       if (codeConfigProcessed.content) {
         const parseDSL = getConfig("parseDSL");
@@ -10953,8 +10880,7 @@
      */
     async deleteCodeDslByIds(codeIds) {
       const currentDsl = await this.getCodeDsl();
-      if (!currentDsl)
-        return;
+      if (!currentDsl) return;
       codeIds.forEach((id) => {
         delete currentDsl[id];
         this.emit("remove", id);
@@ -10974,8 +10900,7 @@
       const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
       const dsl = await this.getCodeDsl();
       const existedIds = lodashEs.keys(dsl);
-      if (!existedIds.includes(newId))
-        return newId;
+      if (!existedIds.includes(newId)) return newId;
       return await this.getUniqueId();
     }
     /**
@@ -10983,20 +10908,19 @@
      * @param config 组件节点配置
      * @returns
      */
-    copyWithRelated(config) {
+    copyWithRelated(config, collectorOptions) {
       const copyNodes = Array.isArray(config) ? config : [config];
-      depService.clearByType(dep.DepTargetType.RELATED_CODE_WHEN_COPY);
-      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_CODE_WHEN_COPY);
-      const customTarget = depService.getTarget(
-        dep.DepTargetType.RELATED_CODE_WHEN_COPY,
-        dep.DepTargetType.RELATED_CODE_WHEN_COPY
-      );
       const copyData = {};
-      if (customTarget) {
+      if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+        const customTarget = new dep.Target({
+          ...collectorOptions
+        });
+        const coperWatcher = new dep.Watcher();
+        coperWatcher.addTarget(customTarget);
+        coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
           const node = editorService.getNodeById(nodeId);
-          if (!node)
-            return;
+          if (!node) return;
           customTarget.deps[nodeId].keys.forEach((key) => {
             const relateCodeId = lodashEs.get(node, key);
             const isExist = Object.keys(copyData).find((codeId) => codeId === relateCodeId);
@@ -11067,6 +10991,139 @@
   }
   const componentListService = new ComponentList();
 
+  globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
+    const start = Date.now();
+    return setTimeout(() => {
+      cb({
+        didTimeout: false,
+        timeRemaining() {
+          return Math.max(0, 50 - (Date.now() - start));
+        }
+      });
+    }, 1);
+  };
+  class IdleTask extends events.EventEmitter {
+    taskList = [];
+    taskHandle = null;
+    enqueueTask(taskHandler, taskData) {
+      this.taskList.push({
+        handler: taskHandler,
+        data: taskData
+      });
+      if (!this.taskHandle) {
+        this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+      }
+    }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    once(eventName, listener) {
+      return super.once(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
+    runTaskQueue(deadline) {
+      while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+        const task = this.taskList.shift();
+        task.handler(task.data);
+      }
+      if (this.taskList.length) {
+        this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+      } else {
+        this.taskHandle = 0;
+        this.emit("finish");
+      }
+    }
+  }
+
+  const idleTask = new IdleTask();
+  class Dep extends BaseService {
+    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
+    removeTargets(type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTargets(type);
+      const targets = this.watcher.getTargets(type);
+      if (!targets) return;
+      for (const target of Object.values(targets)) {
+        this.emit("remove-target", target.id);
+      }
+    }
+    getTargets(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTargets(type);
+    }
+    getTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTarget(id, type);
+    }
+    addTarget(target) {
+      this.watcher.addTarget(target);
+      this.emit("add-target", target);
+    }
+    removeTarget(id, type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTarget(id, type);
+      this.emit("remove-target", id);
+    }
+    clearTargets() {
+      this.watcher.clearTargets();
+    }
+    collect(nodes, depExtendedData = {}, deep = false, type) {
+      this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+        this.collectNode(node, target, depExtendedData, deep);
+      });
+      this.emit("collected", nodes, deep);
+    }
+    collectIdle(nodes, depExtendedData = {}, deep = false, type) {
+      this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+        idleTask.enqueueTask(
+          ({ node: node2, deep: deep2, target: target2 }) => {
+            this.collectNode(node2, target2, depExtendedData, deep2);
+          },
+          {
+            node,
+            deep,
+            target
+          }
+        );
+      });
+      idleTask.once("finish", () => {
+        this.emit("collected", nodes, deep);
+      });
+    }
+    collectNode(node, target, depExtendedData = {}, deep = false) {
+      if (utils.isPage(node)) {
+        Object.entries(target.deps).forEach(([depKey, dep]) => {
+          if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
+            delete target.deps[depKey];
+          }
+        });
+      } else {
+        this.watcher.removeTargetDep(target, node);
+      }
+      this.watcher.collectItem(node, target, depExtendedData, deep);
+    }
+    clear(nodes) {
+      return this.watcher.clear(nodes);
+    }
+    clearByType(type, nodes) {
+      return this.watcher.clearByType(type, nodes);
+    }
+    hasTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasTarget(id, type);
+    }
+    hasSpecifiedTypeTarget(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasSpecifiedTypeTarget(type);
+    }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    once(eventName, listener) {
+      return super.once(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
+  }
+  const depService = new Dep();
+
   let eventMap = vue.reactive({});
   let methodMap = vue.reactive({});
   class Events extends BaseService {
@@ -11127,8 +11184,7 @@
     commands = {
       [KeyBindingCommand.DELETE_NODE]: () => {
         const nodes = editorService.get("nodes");
-        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))
-          return;
+        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0])) return;
         editorService.remove(nodes);
       },
       [KeyBindingCommand.COPY_NODE]: () => {
@@ -11137,8 +11193,7 @@
       },
       [KeyBindingCommand.CUT_NODE]: () => {
         const nodes = editorService.get("nodes");
-        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))
-          return;
+        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0])) return;
         editorService.copy(nodes);
         editorService.remove(nodes);
       },
@@ -11327,8 +11382,7 @@
     }
     openOverlay(el) {
       const stageOptions = this.get("stageOptions");
-      if (!el || !stageOptions)
-        return;
+      if (!el || !stageOptions) return;
       this.set("sourceEl", el);
       this.createContentEl();
       this.set("stageOverlayVisible", true);
@@ -11355,8 +11409,7 @@
     }
     updateOverlay() {
       const sourceEl = this.get("sourceEl");
-      if (!sourceEl)
-        return;
+      if (!sourceEl) return;
       const { scrollWidth, scrollHeight } = sourceEl;
       this.set("wrapWidth", scrollWidth);
       this.set("wrapHeight", scrollHeight);
@@ -11389,8 +11442,7 @@
     }
     createContentEl() {
       const sourceEl = this.get("sourceEl");
-      if (!sourceEl)
-        return;
+      if (!sourceEl) return;
       const contentEl = sourceEl.cloneNode(true);
       this.set("contentEl", contentEl);
       contentEl.style.position = "static";
@@ -11412,8 +11464,7 @@
       const wrapDiv = this.get("wrapDiv");
       const subStage = this.get("stage");
       const stageOptions = this.get("stageOptions");
-      if (!contentEl)
-        return;
+      if (!contentEl) return;
       wrapDiv.style.cssText = `
       width: ${sourceEl?.scrollWidth}px;
       height: ${sourceEl?.scrollHeight}px;
@@ -11633,37 +11684,9 @@
         getApp()?.dataSourceManager?.updateSchema(root.dataSources);
       }
     };
-    const updateNodeWhenDataSourceChange = (nodes) => {
-      const root = editorService.get("root");
-      const stage = editorService.get("stage");
-      if (!root || !stage)
-        return;
-      const app = getApp();
-      if (!app)
-        return;
-      if (app.dsl) {
-        app.dsl.dataSourceDeps = root.dataSourceDeps;
-        app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-        app.dsl.dataSources = root.dataSources;
-      }
-      updateDataSourceSchema();
-      nodes.forEach((node) => {
-        const deps = Object.values(root.dataSourceDeps || {});
-        deps.forEach((dep) => {
-          if (dep[node.id]) {
-            stage.update({
-              config: lodashEs.cloneDeep(node),
-              parentId: editorService.getParentById(node.id)?.id,
-              root: lodashEs.cloneDeep(root)
-            });
-          }
-        });
-      });
-    };
     const targetAddHandler = (target) => {
       const root = editorService.get("root");
-      if (!root)
-        return;
+      if (!root) return;
       if (target.type === dep.DepTargetType.DATA_SOURCE) {
         if (!root.dataSourceDeps) {
           root.dataSourceDeps = {};
@@ -11686,15 +11709,44 @@
         delete root.dataSourceCondDeps[id];
       }
     };
-    const depUpdateHandler = (node) => {
-      updateNodeWhenDataSourceChange([node]);
-    };
-    const collectedHandler = (nodes) => {
-      updateNodeWhenDataSourceChange(nodes);
+    const collectedHandler = (nodes, deep) => {
+      const root = editorService.get("root");
+      const stage = editorService.get("stage");
+      if (!root || !stage) return;
+      const app = getApp();
+      if (!app) return;
+      if (app.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+        app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+        app.dsl.dataSources = root.dataSources;
+      }
+      updateDataSourceSchema();
+      const allNodes = [];
+      if (deep) {
+        nodes.forEach((node) => {
+          traverseNode(node, (node2) => {
+            if (!allNodes.includes(node2)) {
+              allNodes.push(node2);
+            }
+          });
+        });
+      } else {
+        allNodes.push(...nodes);
+      }
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        Object.keys(dep).forEach((id) => {
+          const node = allNodes.find((node2) => node2.id === id);
+          node && stage.update({
+            config: lodashEs.cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: lodashEs.cloneDeep(root)
+          });
+        });
+      });
     };
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
-    depService.on("dep-update", depUpdateHandler);
     depService.on("collected", collectedHandler);
     const initDataSourceDepTarget = (ds) => {
       depService.addTarget(dep.createDataSourceTarget(ds, vue.reactive({})));
@@ -11702,8 +11754,7 @@
       depService.addTarget(dep.createDataSourceCondTarget(ds, vue.reactive({})));
     };
     const rootChangeHandler = async (value, preValue) => {
-      if (!value)
-        return;
+      if (!value) return;
       value.codeBlocks = value.codeBlocks || {};
       value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
@@ -11716,7 +11767,9 @@
         initDataSourceDepTarget(ds);
       });
       if (Array.isArray(value.items)) {
-        depService.collect(value.items, true);
+        value.items.forEach((page) => {
+          depService.collectIdle([page], { pageId: page.id }, true);
+        });
       } else {
         depService.clear();
         delete value.dataSourceDeps;
@@ -11739,17 +11792,29 @@
         emit("update:modelValue", value);
       }
     };
+    const collectIdle = (nodes, deep) => {
+      nodes.forEach((node) => {
+        let pageId;
+        if (utils.isPage(node)) {
+          pageId = node.id;
+        } else {
+          const info = editorService.getNodeInfo(node.id);
+          pageId = info.page?.id;
+        }
+        depService.collectIdle([node], { pageId }, deep);
+      });
+    };
     const nodeAddHandler = (nodes) => {
-      depService.collect(nodes);
+      collectIdle(nodes, true);
     };
     const nodeUpdateHandler = (nodes) => {
-      depService.collect(nodes);
+      collectIdle(nodes, false);
     };
     const nodeRemoveHandler = (nodes) => {
       depService.clear(nodes);
     };
     const historyChangeHandler = (page) => {
-      depService.collect([page], true);
+      depService.collectIdle([page], { pageId: page.id }, true);
     };
     editorService.on("history-change", historyChangeHandler);
     editorService.on("root-change", rootChangeHandler);
@@ -11776,10 +11841,9 @@
       const root = editorService.get("root");
       removeDataSourceTarget(config.id);
       initDataSourceDepTarget(config);
-      depService.collect(root?.items || [], true);
-      const targets = depService.getTargets(dep.DepTargetType.DATA_SOURCE);
-      const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
-      updateNodeWhenDataSourceChange(nodes);
+      (root?.items || []).forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
     };
     const removeDataSourceTarget = (id) => {
       depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE);
@@ -11793,23 +11857,9 @@
     dataSourceService.on("add", dataSourceAddHandler);
     dataSourceService.on("update", dataSourceUpdateHandler);
     dataSourceService.on("remove", dataSourceRemoveHandler);
-    if (props.collectorOptions && !depService.hasTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY)) {
-      depService.addTarget(dep.createRelatedTargetForCopy(props.collectorOptions, dep.DepTargetType.RELATED_COMP_WHEN_COPY));
-    }
-    if (props.collectorOptionsForCode && !depService.hasTarget(dep.DepTargetType.RELATED_CODE_WHEN_COPY)) {
-      depService.addTarget(
-        dep.createRelatedTargetForCopy(props.collectorOptionsForCode, dep.DepTargetType.RELATED_CODE_WHEN_COPY)
-      );
-    }
-    if (props.collectorOptionsForDataSource && !depService.hasTarget(dep.DepTargetType.RELATED_DS_WHEN_COPY)) {
-      depService.addTarget(
-        dep.createRelatedTargetForCopy(props.collectorOptionsForDataSource, dep.DepTargetType.RELATED_DS_WHEN_COPY)
-      );
-    }
     vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
-      depService.off("dep-update", depUpdateHandler);
       depService.off("collected", collectedHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
@@ -11854,9 +11904,6 @@
       stageRect: {},
       codeOptions: {},
       disabledDragStart: { type: Boolean },
-      collectorOptions: {},
-      collectorOptionsForCode: {},
-      collectorOptionsForDataSource: {},
       guidesOptions: {},
       disabledMultiSelect: { type: Boolean },
       disabledPageFragment: { type: Boolean },
@@ -12147,6 +12194,7 @@
   exports.info = info;
   exports.isFixed = isFixed;
   exports.log = log;
+  exports.moveItemsInContainer = moveItemsInContainer;
   exports.propsService = propsService;
   exports.serializeConfig = serializeConfig;
   exports.setChildrenLayout = setChildrenLayout;