@tmagic/editor 1.4.6 → 1.4.8

package/dist/tmagic-editor.js

@@ -8,9 +8,9 @@ import * as monaco from 'monaco-editor';
 import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Watcher, DepTargetType, createRelatedTargetForCopy, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
+import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
@@ -148,8 +148,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
     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,
@@ -362,8 +361,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
     );
     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]})`);
@@ -506,11 +504,9 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 });
 
 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;
@@ -525,8 +521,7 @@ const compose = (middleware, isAsync) => {
       }
       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();
@@ -556,8 +551,7 @@ const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName,
     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];
       }
@@ -565,8 +559,7 @@ const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName,
     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) {
@@ -578,8 +571,7 @@ const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterM
     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];
       }
@@ -587,8 +579,7 @@ const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterM
     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) {
@@ -639,14 +630,12 @@ class BaseService extends EventEmitter {
    */
   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() {
@@ -668,48 +657,6 @@ class BaseService extends EventEmitter {
   }
 }
 
-class Dep extends BaseService {
-  watcher = new Watcher({ initialTargets: reactive({}) });
-  removeTargets(type = DepTargetType.DEFAULT) {
-    this.watcher.removeTargets(type);
-    this.emit("remove-target");
-  }
-  getTargets(type = DepTargetType.DEFAULT) {
-    return this.watcher.getTargets(type);
-  }
-  getTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.getTarget(id, type);
-  }
-  addTarget(target) {
-    this.watcher.addTarget(target);
-    this.emit("add-target", target);
-  }
-  removeTarget(id, type = DepTargetType.DEFAULT) {
-    this.watcher.removeTarget(id, type);
-    this.emit("remove-target");
-  }
-  clearTargets() {
-    this.watcher.clearTargets();
-  }
-  collect(nodes, deep = false, type) {
-    this.watcher.collect(nodes, deep, type);
-    this.emit("collected", nodes, deep);
-  }
-  clear(nodes) {
-    return this.watcher.clear(nodes);
-  }
-  clearByType(type, nodes) {
-    return this.watcher.clearByType(type, nodes);
-  }
-  hasTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.hasTarget(id, type);
-  }
-  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
-    return this.watcher.hasSpecifiedTypeTarget(type);
-  }
-}
-const depService = new Dep();
-
 const canUsePluginMethods$6 = {
   async: [
     "setPropsConfig",
@@ -743,7 +690,11 @@ class Props extends BaseService {
     return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
   }
   async setPropsConfig(type, config) {
-    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+    let c = config;
+    if (typeof config === "function") {
+      c = config({ editorService });
+    }
+    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
   }
   /**
    * 获取指点类型的组件属性表单配置
@@ -767,7 +718,11 @@ class Props extends BaseService {
    * @param value 组件初始值
    */
   async setPropsValue(type, value) {
-    this.state.propsValueMap[toLine(type)] = value;
+    let v = value;
+    if (typeof value === "function") {
+      v = value({ editorService });
+    }
+    this.state.propsValueMap[toLine(type)] = v;
   }
   /**
    * 获取指定类型的组件初始值
@@ -849,30 +804,28 @@ class Props extends BaseService {
    * @param originConfigs 原组件配置
    * @param targetConfigs 待替换的组件配置
    */
-  replaceRelateId(originConfigs, targetConfigs) {
+  replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
     const relateIdMap = this.getRelateIdMap();
-    if (Object.keys(relateIdMap).length === 0)
-      return;
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(originConfigs, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target)
-      return;
+    if (Object.keys(relateIdMap).length === 0) return;
+    const target = new Target({
+      ...collectorOptions
+    });
+    const coperWatcher = new Watcher();
+    coperWatcher.addTarget(target);
+    coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
     originConfigs.forEach((config) => {
       const newId = relateIdMap[config.id];
       const path = getNodePath(newId, targetConfigs);
       const targetConfig = path[path.length - 1];
-      if (!targetConfig)
-        return;
+      if (!targetConfig) return;
       target.deps[config.id]?.keys?.forEach((fullKey) => {
         const relateOriginId = getValueByKeyPath(fullKey, config);
         const relateTargetId = relateIdMap[relateOriginId];
-        if (!relateTargetId)
-          return;
+        if (!relateTargetId) return;
         setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
       if (config.items && Array.isArray(config.items)) {
-        this.replaceRelateId(config.items, targetConfigs);
+        this.replaceRelateId(config.items, targetConfigs, collectorOptions);
       }
     });
   }
@@ -978,8 +931,7 @@ class History extends BaseService {
     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();
@@ -1001,24 +953,21 @@ class History extends BaseService {
   }
   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;
@@ -1029,8 +978,7 @@ class History extends BaseService {
     this.removeAllPlugins();
   }
   getUndoRedo() {
-    if (!this.state.pageId)
-      return null;
+    if (!this.state.pageId) return null;
     return this.state.pageSteps[this.state.pageId];
   }
   setCanUndoRedo() {
@@ -1091,8 +1039,7 @@ class WebStorage extends BaseService {
     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})`);
@@ -1233,24 +1180,19 @@ const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 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) => 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) => 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;
@@ -1272,8 +1214,7 @@ const getRelativeStyle = (style = {}) => ({
 });
 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 (!isNumber(height)) {
     height = 0;
   }
@@ -1309,11 +1250,9 @@ const setChildrenLayout = (node, layout) => {
   return node;
 };
 const setLayout = (node, layout) => {
-  if (isPop(node))
-    return;
+  if (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 {
@@ -1367,8 +1306,7 @@ const Fixed2Other = async (node, root, getLayout) => {
   return getRelativeStyle(style);
 };
 const getGuideLineFromCache = (key) => {
-  if (!key)
-    return [];
+  if (!key) return [];
   const guideLineCacheData = globalThis.localStorage.getItem(key);
   if (guideLineCacheData) {
     try {
@@ -1380,8 +1318,7 @@ const getGuideLineFromCache = (key) => {
   return [];
 };
 const fixNodeLeft = (config, parent, doc) => {
-  if (!doc || !config.style || !isNumber(config.style.left))
-    return config.style?.left;
+  if (!doc || !config.style || !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;
@@ -1410,24 +1347,39 @@ const serializeConfig = (config) => serialize(config, {
 }).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 (!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;
@@ -1457,12 +1409,12 @@ const beforePaste = (position, config) => {
   });
   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 - calcValueByFontsize(doc, parentElRect?.left || 0);
+  top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
   return {
     left,
     top
@@ -1590,15 +1542,13 @@ class Editor extends BaseService {
       parent: null,
       page: null
     };
-    if (!root)
-      return info;
+    if (!root) return info;
     if (id === root.id) {
       info.node = root;
       return info;
     }
     const path = 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];
@@ -1634,8 +1584,7 @@ class Editor extends BaseService {
    * 只有容器拥有布局
    */
   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;
     }
@@ -1675,11 +1624,9 @@ class Editor extends BaseService {
   }
   async selectNextNode() {
     const node = toRaw(this.get("node"));
-    if (!node || isPage(node) || node.type === NodeType.ROOT)
-      return node;
+    if (!node || isPage(node) || node.type === NodeType.ROOT) return node;
     const parent = 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);
@@ -1689,10 +1636,8 @@ class Editor extends BaseService {
   async selectNextPage() {
     const root = toRaw(this.get("root"));
     const page = 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);
@@ -1707,8 +1652,7 @@ class Editor extends BaseService {
   highlight(config) {
     const { node } = this.selectedConfigExceptionHandler(config);
     const currentHighlightNode = this.get("highlightNode");
-    if (currentHighlightNode === node)
-      return;
+    if (currentHighlightNode === node) return;
     this.set("highlightNode", node);
   }
   /**
@@ -1721,16 +1665,14 @@ class Editor extends BaseService {
     const idsUnique = 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);
@@ -1739,12 +1681,10 @@ class Editor extends BaseService {
   }
   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 === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
       throw new Error("app下不能添加组件");
     }
@@ -1781,8 +1721,7 @@ class Editor extends BaseService {
     const addNodes = [];
     if (!Array.isArray(addNode)) {
       const { type, inputEvent, ...config } = addNode;
-      if (!type)
-        throw new Error("组件类型不能为空");
+      if (!type) throw new Error("组件类型不能为空");
       addNodes.push({ ...toRaw(await propsService.getPropsValue(type, config)) });
     } else {
       addNodes.push(...addNode);
@@ -1794,8 +1733,7 @@ class Editor extends BaseService {
           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);
       })
     );
@@ -1821,14 +1759,11 @@ class Editor extends BaseService {
   }
   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: cloneDeep(root) });
@@ -1872,13 +1807,10 @@ class Editor extends BaseService {
   }
   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 = cloneDeep(toRaw(info.node));
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
@@ -1892,19 +1824,16 @@ class Editor extends BaseService {
         return srcValue;
       }
     });
-    if (!newConfig.type)
-      throw new Error("配置缺少type值");
+    if (!newConfig.type) throw new Error("配置缺少type值");
     if (newConfig.type === 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) {
@@ -1948,17 +1877,13 @@ class Editor extends BaseService {
    */
   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 = cloneDeep(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);
@@ -1986,19 +1911,18 @@ class Editor extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  copyWithRelated(config) {
+  copyWithRelated(config, collectorOptions) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_COMP_WHEN_COPY,
-      DepTargetType.RELATED_COMP_WHEN_COPY
-    );
-    if (customTarget) {
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new 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 = get(node, key);
           const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
@@ -2020,10 +1944,9 @@ class Editor extends BaseService {
    * @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) {
@@ -2033,25 +1956,26 @@ class Editor extends BaseService {
       }
     }
     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, cloneDeep(config));
+    const doc = this.get("stage")?.renderer.contentWindow?.document;
+    const pasteConfigs = beforePaste(position, 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 = cloneDeep(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) {
@@ -2090,14 +2014,11 @@ class Editor extends BaseService {
    */
   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);
@@ -2159,28 +2080,35 @@ class Editor extends BaseService {
     }
   }
   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");
@@ -2191,10 +2119,8 @@ class Editor extends BaseService {
         root: 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 });
   }
   /**
    * 撤销当前操作
@@ -2216,11 +2142,9 @@ class Editor extends BaseService {
   }
   async move(left, top) {
     const node = toRaw(this.get("node"));
-    if (!node || isPage(node))
-      return;
+    if (!node || 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,
@@ -2279,6 +2203,15 @@ class Editor extends BaseService {
   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);
@@ -2297,14 +2230,12 @@ class Editor extends BaseService {
     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);
@@ -2332,8 +2263,7 @@ class Editor extends BaseService {
       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("不能选根节点");
     }
@@ -2578,8 +2508,7 @@ const getDisplayField = (dataSources, key) => {
   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)
@@ -2587,16 +2516,20 @@ const getDisplayField = (dataSources, key) => {
     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 (isNumber(item)) {
+        dsText += `[${item}]`;
+      } else {
+        const field = fields?.find((field2) => field2.name === item);
+        fields = field?.fields;
+        dsText += `.${field?.title || item}`;
+      }
     });
     displayState.push({
       type: "var",
@@ -2744,17 +2677,19 @@ class DataSource extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  copyWithRelated(config) {
+  copyWithRelated(config, collectorOptions) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_DS_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_DS_WHEN_COPY);
-    const customTarget = depService.getTarget(DepTargetType.RELATED_DS_WHEN_COPY, DepTargetType.RELATED_DS_WHEN_COPY);
     const copyData = [];
-    if (customTarget) {
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new 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] = get(node, key);
           const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
@@ -3349,11 +3284,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       () => (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 (isEmpty(paramStatements))
-        return [];
+      if (isEmpty(paramStatements)) return [];
       return paramStatements.map((paramState) => ({
         labelWidth: "100px",
         text: paramState.name,
@@ -3653,8 +3586,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     codeBlockService?.deleteCodeDslByIds([key]);
   };
   const submitCodeBlockHandler = async (values) => {
-    if (!codeId.value)
-      return;
+    if (!codeId.value) return;
     await codeBlockService?.setCodeDslById(codeId.value, values);
     codeBlockEditor.value?.hide();
   };
@@ -3710,8 +3642,7 @@ const useDataSourceMethod = () => {
       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;
@@ -3719,8 +3650,7 @@ const useDataSourceMethod = () => {
       model.methods.splice(index, 1);
     },
     submitCode: (values) => {
-      if (!dataSource.value)
-        return;
+      if (!dataSource.value) return;
       if (!dataSource.value.methods) {
         dataSource.value.methods = [];
       }
@@ -3804,14 +3734,12 @@ class Ui extends BaseService {
   }
   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 = convertToNumber(stageRect.width, width);
     let stageHeight = convertToNumber(stageRect.height, height);
     stageWidth = stageWidth + 30;
@@ -3866,8 +3794,7 @@ const useStage = (stageOptions) => {
     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 }));
@@ -3898,8 +3825,7 @@ const useStage = (stageOptions) => {
     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) => {
@@ -3926,15 +3852,13 @@ const useStage = (stageOptions) => {
   });
   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 === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
     );
@@ -3977,8 +3901,7 @@ const useFloatBox = (slideKeys) => {
     isDragging.value = false;
   };
   document.body.addEventListener("dragover", (e) => {
-    if (!isDragging.value)
-      return;
+    if (!isDragging.value) return;
     e.preventDefault();
   });
   watch(
@@ -4031,8 +3954,7 @@ const useEditorContentHeight = () => {
   watch(
     editorContentHeight,
     () => {
-      if (height.value > 0 && height.value === editorContentHeight.value)
-        return;
+      if (height.value > 0 && height.value === editorContentHeight.value) return;
       height.value = editorContentHeight.value;
     },
     {
@@ -4225,12 +4147,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         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: [
@@ -4270,23 +4189,16 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       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);
@@ -4476,10 +4388,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           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 = computed(() => {
@@ -4487,8 +4397,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         return MCascader;
       }
       const component = 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) => {
@@ -4583,9 +4492,15 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     const mouseupHandler = async () => {
+      const selection = globalThis.document.getSelection();
+      const anchorOffset = selection?.anchorOffset || 0;
+      const focusOffset = selection?.focusOffset || 0;
       isFocused.value = true;
       await nextTick();
       autocomplete.value?.focus();
+      if (focusOffset && input.value) {
+        input.value.setSelectionRange(anchorOffset, focusOffset);
+      }
     };
     const blurHandler = () => {
       isFocused.value = false;
@@ -4633,7 +4548,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     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) {
@@ -4643,6 +4558,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       let fields = ds.fields || [];
       let key = keys.shift();
       while (key) {
+        if (isNumber(key)) {
+          key = keys.shift();
+          continue;
+        }
         for (const field of fields) {
           if (field.name === key) {
             fields = field.fields || [];
@@ -5220,11 +5139,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       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
@@ -5269,8 +5186,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     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) => {
@@ -5381,15 +5297,13 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         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();
@@ -5617,12 +5531,10 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
     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) => {
@@ -5686,20 +5598,46 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     const eventsService = services?.eventsService;
     const codeBlockService = services?.codeBlockService;
     const eventNameConfig = 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
@@ -5758,7 +5696,11 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         name: "to",
         text: "联动组件",
         type: "ui-select",
-        display: (mForm, { model }) => model.actionType === ActionType.COMP
+        display: (mForm, { model }) => model.actionType === ActionType.COMP,
+        onChange: (MForm, v, { model }) => {
+          model.method = "";
+          return v;
+        }
       };
       return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
     });
@@ -5766,15 +5708,42 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       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 === 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
           }));
         }
       };
@@ -5824,8 +5793,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           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
@@ -5854,8 +5822,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       ]
     }));
     const isOldVersion = computed(() => {
-      if (props.model[props.name].length === 0)
-        return false;
+      if (props.model[props.name].length === 0) return false;
       return !has(props.model[props.name][0], "actions");
     });
     const addEvent = () => {
@@ -5870,8 +5837,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       onChangeHandler();
     };
     const removeEvent = (index) => {
-      if (!props.name)
-        return;
+      if (!props.name) return;
       props.model[props.name].splice(index, 1);
       onChangeHandler();
     };
@@ -6196,8 +6162,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     const val = computed(() => props.model[props.name]);
     const uiSelectMode = 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);
@@ -6217,8 +6182,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       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);
@@ -6335,14 +6299,12 @@ const useGetSo = (target, emit) => {
   let getso;
   const isDraging = ref(false);
   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;
@@ -6458,13 +6420,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       });
     } else {
       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) {
@@ -6479,8 +6439,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       });
     };
     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) {
@@ -6565,28 +6524,23 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const props = __props;
     const services = inject("services");
     const disabled = 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 = 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);
       }
@@ -6597,22 +6551,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
     };
     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);
       }
@@ -6729,11 +6680,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const editorService = services?.editorService;
     const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
     const addPage = () => {
-      if (!editorService)
-        return;
+      if (!editorService) return;
       const root = 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),
@@ -6791,8 +6740,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     });
     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;
@@ -7097,11 +7045,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const clickHandler = (type) => {
       const { editorService } = services || {};
-      if (!editorService)
-        return;
+      if (!editorService) return;
       const root = toRaw(editorService.get("root"));
-      if (!root)
-        throw new Error("root 不能为空");
+      if (!root) throw new Error("root 不能为空");
       editorService.add({
         type,
         name: generatePageNameByApp(root, type),
@@ -7573,6 +7519,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         }, 8, ["type"])) : createCommentVNode("", true),
         showSrc.value ? (openBlock(), createBlock(_sfc_main$T, {
           key: 1,
+          class: "m-editor-props-panel-src-code",
           height: `${unref(editorContentHeight)}px`,
           "init-values": values.value,
           options: unref(codeOptions),
@@ -7628,8 +7575,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
 
 const updateStatus = (nodeStatusMap, id, status) => {
   const nodeStatus = nodeStatusMap.get(id);
-  if (!nodeStatus)
-    return;
+  if (!nodeStatus) return;
   getKeys(status).forEach((key) => {
     if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
       nodeStatus[key] = Boolean(status[key]);
@@ -7670,7 +7616,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const selected = computed(() => nodeStatus.value.selected);
     const visible = computed(() => nodeStatus.value.visible);
     const draggable = computed(() => nodeStatus.value.draggable);
-    const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+    const hasChildren = 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);
     };
@@ -7823,12 +7771,10 @@ const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
     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) => {
@@ -7901,24 +7847,38 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const { codeBlockService, depService, editorService } = services || {};
     const codeList = computed(
-      () => Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
-        const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
-          name: dep.name,
+      () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+        const target = depService?.getTarget(codeId, 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;
       })
@@ -8104,8 +8064,7 @@ const useDataSourceEdit = (dataSourceService) => {
   const dataSourceValues = ref({});
   const editable = computed(() => dataSourceService?.get("editable") ?? true);
   const editHandler = (id) => {
-    if (!editDialog.value)
-      return;
+    if (!editDialog.value) return;
     dataSourceValues.value = {
       ...dataSourceService?.getDataSourceById(id)
     };
@@ -8233,13 +8192,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       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));
         }
       });
     };
@@ -8248,7 +8208,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         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");
@@ -8257,7 +8223,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           key: ds.id,
           name: ds.title,
           type: "ds",
-          items
+          // 只有一个页面不显示页面分类
+          items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
         };
       })
     );
@@ -8365,8 +8332,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       ].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 = mergeWith(
         { type, title: datasourceType?.text },
@@ -8483,20 +8449,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     }));
     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;
@@ -8553,13 +8516,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       emit("mouseenter");
     };
     onMounted(() => {
-      if (props.isSubMenu)
-        return;
+      if (props.isSubMenu) return;
       globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
     });
     onBeforeUnmount(() => {
-      if (props.isSubMenu)
-        return;
+      if (props.isSubMenu) return;
       globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
     });
     __expose({
@@ -8680,8 +8641,7 @@ const usePasteMenu = (menu) => ({
   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();
@@ -8695,12 +8655,10 @@ const usePasteMenu = (menu) => ({
   }
 });
 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);
 };
@@ -8840,8 +8798,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const editorService = services?.editorService;
     const setNodeVisible = (visible) => {
-      if (!editorService)
-        return;
+      if (!editorService) return;
       editorService.update({
         id: props.data.id,
         visible
@@ -8899,17 +8856,19 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
   };
   const throttleTime = 300;
-  const highlightHandler = throttle((event, data) => {
-    highlight(data);
-  }, throttleTime);
+  const highlightHandler = 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;
@@ -8953,8 +8912,7 @@ const getNodeEl = (el) => {
   }
 };
 const removeStatusClass = (el) => {
-  if (!el)
-    return;
+  if (!el) return;
   ["drag-before", "drag-after", "drag-inner"].forEach((className) => {
     el.querySelectorAll(`.${className}`).forEach((el2) => {
       removeClassName(el2, className);
@@ -8963,11 +8921,9 @@ const removeStatusClass = (el) => {
 };
 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(
@@ -8980,14 +8936,11 @@ const useDrag = (services) => {
     }
   };
   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";
@@ -9012,20 +8965,16 @@ const useDrag = (services) => {
     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];
     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) {
@@ -9034,8 +8983,7 @@ const useDrag = (services) => {
       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;
@@ -9046,7 +8994,12 @@ const useDrag = (services) => {
       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 = "";
@@ -9267,8 +9220,7 @@ const useNodeStatus = (services) => {
   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) {
@@ -9286,8 +9238,7 @@ const useNodeStatus = (services) => {
   );
   services?.editorService.on("add", (newNodes) => {
     newNodes.forEach((node) => {
-      if (isPage(node) || isPageFragment(node))
-        return;
+      if (isPage(node) || isPageFragment(node)) return;
       traverseNode(node, (node2) => {
         nodeStatusMap.value?.set(node2.id, {
           visible: true,
@@ -9339,8 +9290,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
     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) {
@@ -9474,8 +9424,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }
         return;
       }
-      if (timeout || !stage.value)
-        return;
+      if (timeout || !stage.value) return;
       timeout = stage.value.delayedMarkContainer(e);
     };
     return (_ctx, _cache) => {
@@ -9639,8 +9588,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         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 = "";
@@ -9895,8 +9843,7 @@ class ScrollViewer extends EventEmitter {
   }
   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);
@@ -9989,8 +9936,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     }));
     let gesto;
     onMounted(() => {
-      if (!thumb.value)
-        return;
+      if (!thumb.value) return;
       const thumbEl = thumb.value;
       gesto = new Gesto(thumbEl, {
         container: window
@@ -10004,8 +9950,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       bar.value?.addEventListener("wheel", wheelHandler, false);
     });
     onBeforeUnmount(() => {
-      if (gesto)
-        gesto.off();
+      if (gesto) gesto.off();
       bar.value?.removeEventListener("wheel", wheelHandler, false);
     });
     const wheelHandler = (e) => {
@@ -10084,8 +10029,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const scrollHeight = ref(0);
     let scrollViewer;
     onMounted(() => {
-      if (!container.value || !el.value)
-        return;
+      if (!container.value || !el.value) return;
       scrollViewer = new ScrollViewer({
         container: container.value,
         target: el.value,
@@ -10178,8 +10122,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const unWatch = watch(
       stage,
       (stage2) => {
-        if (!stage2)
-          return;
+        if (!stage2) return;
         nextTick(() => unWatch());
         stage2.on("select", (el, event) => {
           const els = stage2.renderer.getElementsFromPoint(event) || [];
@@ -10195,8 +10138,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     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);
         }
@@ -10290,8 +10232,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     });
     watch(stageOverlay, (stageOverlay2) => {
-      if (!services)
-        return;
+      if (!services) return;
       const subStage = services.stageOverlayService.createStage(stageOptions);
       services?.stageOverlayService.set("stage", subStage);
       if (stageOverlay2 && subStage) {
@@ -10406,8 +10347,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             icon: markRaw(_sfc_main$5),
             display: () => canCenter.value,
             handler: () => {
-              if (!nodes.value)
-                return;
+              if (!nodes.value) return;
               editorService?.alignCenter(nodes.value);
             }
           },
@@ -10417,8 +10357,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             type: "divider",
             direction: "horizontal",
             display: () => {
-              if (!node.value)
-                return false;
+              if (!node.value) return false;
               return !isPage(node.value) && !isPageFragment(node.value);
             }
           },
@@ -10484,8 +10423,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     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(
@@ -10536,12 +10474,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const zoom = computed(() => services?.uiService.get("zoom") || 1);
     const node = computed(() => services?.editorService.get("node"));
     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();
@@ -10561,8 +10496,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       });
     });
     watch(zoom, (zoom2) => {
-      if (!stage || !zoom2)
-        return;
+      if (!stage || !zoom2) return;
       stage.setZoom(zoom2);
     });
     watch(page, (page2) => {
@@ -10607,20 +10541,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       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}`);
@@ -10825,11 +10755,9 @@ class CodeBlock extends BaseService {
    * @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;
   }
   /**
@@ -10854,8 +10782,7 @@ class CodeBlock extends BaseService {
     if (!codeDsl) {
       throw new Error("dsl中没有codeBlocks");
     }
-    if (codeDsl[id] && !force)
-      return;
+    if (codeDsl[id] && !force) return;
     const codeConfigProcessed = cloneDeep(codeConfig);
     if (codeConfigProcessed.content) {
       const parseDSL = getConfig("parseDSL");
@@ -10948,8 +10875,7 @@ class CodeBlock extends BaseService {
    */
   async deleteCodeDslByIds(codeIds) {
     const currentDsl = await this.getCodeDsl();
-    if (!currentDsl)
-      return;
+    if (!currentDsl) return;
     codeIds.forEach((id) => {
       delete currentDsl[id];
       this.emit("remove", id);
@@ -10969,8 +10895,7 @@ class CodeBlock extends BaseService {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     const dsl = await this.getCodeDsl();
     const existedIds = keys(dsl);
-    if (!existedIds.includes(newId))
-      return newId;
+    if (!existedIds.includes(newId)) return newId;
     return await this.getUniqueId();
   }
   /**
@@ -10978,20 +10903,19 @@ class CodeBlock extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  copyWithRelated(config) {
+  copyWithRelated(config, collectorOptions) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_CODE_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_CODE_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_CODE_WHEN_COPY,
-      DepTargetType.RELATED_CODE_WHEN_COPY
-    );
     const copyData = {};
-    if (customTarget) {
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new 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 = get(node, key);
           const isExist = Object.keys(copyData).find((codeId) => codeId === relateCodeId);
@@ -11062,6 +10986,139 @@ class ComponentList extends BaseService {
 }
 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 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 Watcher({ initialTargets: reactive({}) });
+  removeTargets(type = 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 = DepTargetType.DEFAULT) {
+    return this.watcher.getTargets(type);
+  }
+  getTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
+  }
+  addTarget(target) {
+    this.watcher.addTarget(target);
+    this.emit("add-target", target);
+  }
+  removeTarget(id, type = DepTargetType.DEFAULT) {
+    this.watcher.removeTarget(id, type);
+    this.emit("remove-target", 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 (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 = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
+  }
+  hasSpecifiedTypeTarget(type = 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 = reactive({});
 let methodMap = reactive({});
 class Events extends BaseService {
@@ -11122,8 +11179,7 @@ class Keybinding extends BaseService {
   commands = {
     [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get("nodes");
-      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0]))
-        return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.remove(nodes);
     },
     [KeyBindingCommand.COPY_NODE]: () => {
@@ -11132,8 +11188,7 @@ class Keybinding extends BaseService {
     },
     [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get("nodes");
-      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0]))
-        return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.copy(nodes);
       editorService.remove(nodes);
     },
@@ -11322,8 +11377,7 @@ class StageOverlay extends BaseService {
   }
   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);
@@ -11350,8 +11404,7 @@ class StageOverlay extends BaseService {
   }
   updateOverlay() {
     const sourceEl = this.get("sourceEl");
-    if (!sourceEl)
-      return;
+    if (!sourceEl) return;
     const { scrollWidth, scrollHeight } = sourceEl;
     this.set("wrapWidth", scrollWidth);
     this.set("wrapHeight", scrollHeight);
@@ -11384,8 +11437,7 @@ class StageOverlay extends BaseService {
   }
   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";
@@ -11407,8 +11459,7 @@ class StageOverlay extends BaseService {
     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;
@@ -11628,37 +11679,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       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: cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: cloneDeep(root)
-          });
-        }
-      });
-    });
-  };
   const targetAddHandler = (target) => {
     const root = editorService.get("root");
-    if (!root)
-      return;
+    if (!root) return;
     if (target.type === DepTargetType.DATA_SOURCE) {
       if (!root.dataSourceDeps) {
         root.dataSourceDeps = {};
@@ -11681,15 +11704,44 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       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: cloneDeep(node),
+          parentId: editorService.getParentById(node.id)?.id,
+          root: 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(createDataSourceTarget(ds, reactive({})));
@@ -11697,8 +11749,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
   const rootChangeHandler = async (value, preValue) => {
-    if (!value)
-      return;
+    if (!value) return;
     value.codeBlocks = value.codeBlocks || {};
     value.dataSources = value.dataSources || [];
     codeBlockService.setCodeDsl(value.codeBlocks);
@@ -11711,7 +11762,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       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;
@@ -11734,17 +11787,29 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       emit("update:modelValue", value);
     }
   };
+  const collectIdle = (nodes, deep) => {
+    nodes.forEach((node) => {
+      let pageId;
+      if (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);
@@ -11771,10 +11836,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     const root = editorService.get("root");
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
-    depService.collect(root?.items || [], true);
-    const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
-    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
-    updateNodeWhenDataSourceChange(nodes);
+    (root?.items || []).forEach((page) => {
+      depService.collectIdle([page], { pageId: page.id }, true);
+    });
   };
   const removeDataSourceTarget = (id) => {
     depService.removeTarget(id, DepTargetType.DATA_SOURCE);
@@ -11788,23 +11852,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   dataSourceService.on("add", dataSourceAddHandler);
   dataSourceService.on("update", dataSourceUpdateHandler);
   dataSourceService.on("remove", dataSourceRemoveHandler);
-  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedTargetForCopy(props.collectorOptions, DepTargetType.RELATED_COMP_WHEN_COPY));
-  }
-  if (props.collectorOptionsForCode && !depService.hasTarget(DepTargetType.RELATED_CODE_WHEN_COPY)) {
-    depService.addTarget(
-      createRelatedTargetForCopy(props.collectorOptionsForCode, DepTargetType.RELATED_CODE_WHEN_COPY)
-    );
-  }
-  if (props.collectorOptionsForDataSource && !depService.hasTarget(DepTargetType.RELATED_DS_WHEN_COPY)) {
-    depService.addTarget(
-      createRelatedTargetForCopy(props.collectorOptionsForDataSource, DepTargetType.RELATED_DS_WHEN_COPY)
-    );
-  }
   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);
@@ -11849,9 +11899,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     stageRect: {},
     codeOptions: {},
     disabledDragStart: { type: Boolean },
-    collectorOptions: {},
-    collectorOptionsForCode: {},
-    collectorOptionsForDataSource: {},
     guidesOptions: {},
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },
@@ -12057,4 +12104,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, moveItemsInContainer, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };