@tmagic/editor 1.4.6 → 1.4.7

package/dist/tmagic-editor.umd.cjs

@@ -673,48 +673,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",
@@ -854,15 +812,16 @@
      * @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;
+      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);
@@ -877,7 +836,7 @@
           utils.setValueByKeyPath(fullKey, relateTargetId, targetConfig);
         });
         if (config.items && Array.isArray(config.items)) {
-          this.replaceRelateId(config.items, targetConfigs);
+          this.replaceRelateId(config.items, targetConfigs, collectorOptions);
         }
       });
     }
@@ -1423,7 +1382,7 @@
     }
   };
 
-  const beforePaste = (position, config) => {
+  const beforePaste = (position, config, doc) => {
     if (!config[0]?.style)
       return config;
     const curNode = editorService.get("node");
@@ -1432,7 +1391,7 @@
       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 +1421,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
@@ -1991,15 +1950,15 @@
      * @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)
@@ -2025,7 +1984,7 @@
      * @param position 粘贴的坐标
      * @returns 添加后的组件节点配置
      */
-    async paste(position = {}) {
+    async paste(position = {}, collectorOptions) {
       const config = storageService.getItem(COPY_STORAGE_KEY);
       if (!Array.isArray(config))
         return;
@@ -2038,12 +1997,15 @@
         }
       }
       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) {
@@ -2592,16 +2554,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,13 +2715,16 @@
      * @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)
@@ -4638,7 +4607,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 +4617,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 || [];
@@ -5691,13 +5664,17 @@
       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 = [];
@@ -5705,6 +5682,29 @@
               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 +5763,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 +5775,43 @@
         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
+            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
             }));
           }
         };
@@ -7675,7 +7707,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);
       };
@@ -7906,24 +7940,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;
         })
@@ -8238,13 +8286,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 +8302,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 +8317,8 @@
             key: ds.id,
             name: ds.title,
             type: "ds",
-            items
+            // 只有一个页面不显示页面分类
+            items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
           };
         })
       );
@@ -10983,16 +11039,16 @@
      * @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)
@@ -11067,6 +11123,140 @@
   }
   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 {
@@ -11686,15 +11876,11 @@
         delete root.dataSourceCondDeps[id];
       }
     };
-    const depUpdateHandler = (node) => {
-      updateNodeWhenDataSourceChange([node]);
-    };
     const collectedHandler = (nodes) => {
       updateNodeWhenDataSourceChange(nodes);
     };
     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({})));
@@ -11716,7 +11902,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 +11927,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,7 +11976,9 @@
       const root = editorService.get("root");
       removeDataSourceTarget(config.id);
       initDataSourceDepTarget(config);
-      depService.collect(root?.items || [], true);
+      (root?.items || []).forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
       const targets = depService.getTargets(dep.DepTargetType.DATA_SOURCE);
       const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
       updateNodeWhenDataSourceChange(nodes);
@@ -11793,23 +11995,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 +12042,6 @@
       stageRect: {},
       codeOptions: {},
       disabledDragStart: { type: Boolean },
-      collectorOptions: {},
-      collectorOptionsForCode: {},
-      collectorOptionsForDataSource: {},
       guidesOptions: {},
       disabledMultiSelect: { type: Boolean },
       disabledPageFragment: { type: Boolean },