@tmagic/editor 1.4.7 → 1.4.9

package/dist/tmagic-editor.umd.cjs

@@ -153,8 +153,7 @@
       };
       const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
       const init = async () => {
-        if (!codeEditor.value)
-          return;
+        if (!codeEditor.value) return;
         const options = {
           value: values.value,
           language: props.language,
@@ -367,8 +366,7 @@
         }
       );
       const changeHandler = (v) => {
-        if (!props.name || !props.model)
-          return;
+        if (!props.name || !props.model) return;
         try {
           const parseDSL = getConfig("parseDSL");
           props.model[props.name] = parseDSL(`(${v[props.name]})`);
@@ -511,11 +509,9 @@
   });
 
   const compose = (middleware, isAsync) => {
-    if (!Array.isArray(middleware))
-      throw new TypeError("Middleware 必须是一个数组!");
+    if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
     for (const fn of middleware) {
-      if (typeof fn !== "function")
-        throw new TypeError("Middleware 必须由函数组成!");
+      if (typeof fn !== "function") throw new TypeError("Middleware 必须由函数组成!");
     }
     return (args, next) => {
       let index = -1;
@@ -530,8 +526,7 @@
         }
         index = i;
         let fn = middleware[i];
-        if (i === middleware.length && next)
-          fn = next;
+        if (i === middleware.length && next) fn = next;
         if (!fn) {
           if (isAsync) {
             return Promise.resolve();
@@ -561,8 +556,7 @@
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
         beforeArgs = beforeMethod(...beforeArgs) || [];
-        if (isError(beforeArgs))
-          throw beforeArgs;
+        if (isError(beforeArgs)) throw beforeArgs;
         if (!Array.isArray(beforeArgs)) {
           beforeArgs = [beforeArgs];
         }
@@ -570,8 +564,7 @@
       let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
         returnValue = afterMethod(returnValue, ...beforeArgs);
-        if (isError(returnValue))
-          throw returnValue;
+        if (isError(returnValue)) throw returnValue;
       }
       return returnValue;
     } catch (error) {
@@ -583,8 +576,7 @@
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
         beforeArgs = await beforeMethod(...beforeArgs) || [];
-        if (isError(beforeArgs))
-          throw beforeArgs;
+        if (isError(beforeArgs)) throw beforeArgs;
         if (!Array.isArray(beforeArgs)) {
           beforeArgs = [beforeArgs];
         }
@@ -592,8 +584,7 @@
       let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
         returnValue = await afterMethod(returnValue, ...beforeArgs);
-        if (isError(returnValue))
-          throw returnValue;
+        if (isError(returnValue)) throw returnValue;
       }
       return returnValue;
     } catch (error) {
@@ -644,14 +635,12 @@
      */
     use(options) {
       Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.middleware[methodName2].push(method);
+        if (typeof method === "function") this.middleware[methodName2].push(method);
       });
     }
     usePlugin(options) {
       Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.pluginOptionsList[methodName2].push(method);
+        if (typeof method === "function") this.pluginOptionsList[methodName2].push(method);
       });
     }
     removeAllPlugins() {
@@ -706,7 +695,11 @@
       return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
     }
     async setPropsConfig(type, config) {
-      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+      let c = config;
+      if (typeof config === "function") {
+        c = config({ editorService });
+      }
+      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
     }
     /**
      * 获取指点类型的组件属性表单配置
@@ -730,7 +723,11 @@
      * @param value 组件初始值
      */
     async setPropsValue(type, value) {
-      this.state.propsValueMap[utils.toLine(type)] = value;
+      let v = value;
+      if (typeof value === "function") {
+        v = value({ editorService });
+      }
+      this.state.propsValueMap[utils.toLine(type)] = v;
     }
     /**
      * 获取指定类型的组件初始值
@@ -814,8 +811,7 @@
      */
     replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
       const relateIdMap = this.getRelateIdMap();
-      if (Object.keys(relateIdMap).length === 0)
-        return;
+      if (Object.keys(relateIdMap).length === 0) return;
       const target = new dep.Target({
         ...collectorOptions
       });
@@ -826,13 +822,11 @@
         const newId = relateIdMap[config.id];
         const path = utils.getNodePath(newId, targetConfigs);
         const targetConfig = path[path.length - 1];
-        if (!targetConfig)
-          return;
+        if (!targetConfig) return;
         target.deps[config.id]?.keys?.forEach((fullKey) => {
           const relateOriginId = utils.getValueByKeyPath(fullKey, config);
           const relateTargetId = relateIdMap[relateOriginId];
-          if (!relateTargetId)
-            return;
+          if (!relateTargetId) return;
           utils.setValueByKeyPath(fullKey, relateTargetId, targetConfig);
         });
         if (config.items && Array.isArray(config.items)) {
@@ -942,8 +936,7 @@
       this.state.canUndo = false;
     }
     changePage(page) {
-      if (!page)
-        return;
+      if (!page) return;
       this.state.pageId = page.id;
       if (!this.state.pageSteps[this.state.pageId]) {
         const undoRedo = new UndoRedo();
@@ -965,24 +958,21 @@
     }
     push(state) {
       const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
+      if (!undoRedo) return null;
       undoRedo.pushElement(state);
       this.emit("change", state);
       return state;
     }
     undo() {
       const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
+      if (!undoRedo) return null;
       const state = undoRedo.undo();
       this.emit("change", state);
       return state;
     }
     redo() {
       const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
+      if (!undoRedo) return null;
       const state = undoRedo.redo();
       this.emit("change", state);
       return state;
@@ -993,8 +983,7 @@
       this.removeAllPlugins();
     }
     getUndoRedo() {
-      if (!this.state.pageId)
-        return null;
+      if (!this.state.pageId) return null;
       return this.state.pageSteps[this.state.pageId];
     }
     setCanUndoRedo() {
@@ -1055,8 +1044,7 @@
       const { protocol = options.protocol, item } = this.getValueAndProtocol(
         storage.getItem(`${options.namespace || namespace}:${key}`)
       );
-      if (item === null)
-        return null;
+      if (item === null) return null;
       switch (protocol) {
         case "object" /* OBJECT */:
           return getConfig("parseDSL")(`(${item})`);
@@ -1197,24 +1185,19 @@
   const COPY_CODE_STORAGE_KEY = "$MagicEditorCopyCode";
   const COPY_DS_STORAGE_KEY = "$MagicEditorCopyDataSource";
   const getPageList = (root) => {
-    if (!root)
-      return [];
-    if (!Array.isArray(root.items))
-      return [];
+    if (!root) return [];
+    if (!Array.isArray(root.items)) return [];
     return root.items.filter((item) => utils.isPage(item));
   };
   const getPageFragmentList = (root) => {
-    if (!root)
-      return [];
-    if (!Array.isArray(root.items))
-      return [];
+    if (!root) return [];
+    if (!Array.isArray(root.items)) return [];
     return root.items.filter((item) => utils.isPageFragment(item));
   };
   const getPageNameList = (pages) => pages.map((page) => page.name || "index");
   const generatePageName = (pageNameList, type) => {
     let pageLength = pageNameList.length;
-    if (!pageLength)
-      return `${type}_index`;
+    if (!pageLength) return `${type}_index`;
     let pageName = `${type}_${pageLength}`;
     while (pageNameList.includes(pageName)) {
       pageLength += 1;
@@ -1236,8 +1219,7 @@
   });
   const getMiddleTop = (node, parentNode, stage) => {
     let height = node.style?.height || 0;
-    if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
-      return node.style?.top;
+    if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style) return node.style?.top;
     if (!utils.isNumber(height)) {
       height = 0;
     }
@@ -1273,11 +1255,9 @@
     return node;
   };
   const setLayout = (node, layout) => {
-    if (utils.isPop(node))
-      return;
+    if (utils.isPop(node)) return;
     const style = node.style || {};
-    if (style.position === "fixed")
-      return;
+    if (style.position === "fixed") return;
     if (layout !== Layout.RELATIVE) {
       style.position = "absolute";
     } else {
@@ -1331,8 +1311,7 @@
     return getRelativeStyle(style);
   };
   const getGuideLineFromCache = (key) => {
-    if (!key)
-      return [];
+    if (!key) return [];
     const guideLineCacheData = globalThis.localStorage.getItem(key);
     if (guideLineCacheData) {
       try {
@@ -1344,8 +1323,7 @@
     return [];
   };
   const fixNodeLeft = (config, parent, doc) => {
-    if (!doc || !config.style || !utils.isNumber(config.style.left))
-      return config.style?.left;
+    if (!doc || !config.style || !utils.isNumber(config.style.left)) return config.style?.left;
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
     const left = Number(config.style?.left) || 0;
@@ -1374,17 +1352,32 @@
   }).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, doc) => {
-    if (!config[0]?.style)
-      return config;
+    if (!config[0]?.style) return config;
     const curNode = editorService.get("node");
     const { left: referenceLeft, top: referenceTop } = config[0].style;
     const pasteConfigs = config.map((configItem) => {
@@ -1554,15 +1547,13 @@
         parent: null,
         page: null
       };
-      if (!root)
-        return info;
+      if (!root) return info;
       if (id === root.id) {
         info.node = root;
         return info;
       }
       const path = utils.getNodePath(id, root.items);
-      if (!path.length)
-        return info;
+      if (!path.length) return info;
       path.unshift(root);
       info.node = path[path.length - 1];
       info.parent = path[path.length - 2];
@@ -1598,8 +1589,7 @@
      * 只有容器拥有布局
      */
     async getLayout(parent, node) {
-      if (node && typeof node !== "function" && isFixed(node))
-        return Layout.FIXED;
+      if (node && typeof node !== "function" && isFixed(node)) return Layout.FIXED;
       if (parent.layout) {
         return parent.layout;
       }
@@ -1639,11 +1629,9 @@
     }
     async selectNextNode() {
       const node = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT)
-        return node;
+      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT) return node;
       const parent = vue.toRaw(this.getParentById(node.id));
-      if (!parent)
-        return node;
+      if (!parent) return node;
       const index = getNodeIndex(node.id, parent);
       const nextNode = parent.items[index + 1] || parent.items[0];
       await this.select(nextNode);
@@ -1653,10 +1641,8 @@
     async selectNextPage() {
       const root = vue.toRaw(this.get("root"));
       const page = vue.toRaw(this.get("page"));
-      if (!page)
-        throw new Error("page不能为空");
-      if (!root)
-        throw new Error("root不能为空");
+      if (!page) throw new Error("page不能为空");
+      if (!root) throw new Error("root不能为空");
       const index = getNodeIndex(page.id, root);
       const nextPage = root.items[index + 1] || root.items[0];
       await this.select(nextPage);
@@ -1671,8 +1657,7 @@
     highlight(config) {
       const { node } = this.selectedConfigExceptionHandler(config);
       const currentHighlightNode = this.get("highlightNode");
-      if (currentHighlightNode === node)
-        return;
+      if (currentHighlightNode === node) return;
       this.set("highlightNode", node);
     }
     /**
@@ -1685,16 +1670,14 @@
       const idsUnique = lodashEs.uniq(ids);
       idsUnique.forEach((id) => {
         const { node } = this.getNodeInfo(id);
-        if (!node)
-          return;
+        if (!node) return;
         nodes.push(node);
       });
       this.set("nodes", nodes);
     }
     selectRoot() {
       const root = this.get("root");
-      if (!root)
-        return;
+      if (!root) return;
       this.set("nodes", [root]);
       this.set("parent", null);
       this.set("page", null);
@@ -1703,12 +1686,10 @@
     }
     async doAdd(node, parent) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
+      if (!root) throw new Error("root为空");
       const curNode = this.get("node");
       const stage = this.get("stage");
-      if (!curNode)
-        throw new Error("当前选中节点为空");
+      if (!curNode) throw new Error("当前选中节点为空");
       if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
         throw new Error("app下不能添加组件");
       }
@@ -1745,8 +1726,7 @@
       const addNodes = [];
       if (!Array.isArray(addNode)) {
         const { type, inputEvent, ...config } = addNode;
-        if (!type)
-          throw new Error("组件类型不能为空");
+        if (!type) throw new Error("组件类型不能为空");
         addNodes.push({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
       } else {
         addNodes.push(...addNode);
@@ -1758,8 +1738,7 @@
             return this.doAdd(node, root);
           }
           const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
-          if (!parentNode)
-            throw new Error("未找到父元素");
+          if (!parentNode) throw new Error("未找到父元素");
           return this.doAdd(node, parentNode);
         })
       );
@@ -1785,14 +1764,11 @@
     }
     async doRemove(node) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root不能为空");
+      if (!root) throw new Error("root不能为空");
       const { parent, node: curNode } = this.getNodeInfo(node.id, false);
-      if (!parent || !curNode)
-        throw new Error("找不要删除的节点");
+      if (!parent || !curNode) throw new Error("找不要删除的节点");
       const index = getNodeIndex(curNode.id, parent);
-      if (typeof index !== "number" || index === -1)
-        throw new Error("找不要删除的节点");
+      if (typeof index !== "number" || index === -1) throw new Error("找不要删除的节点");
       parent.items?.splice(index, 1);
       const stage = this.get("stage");
       stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
@@ -1836,13 +1812,10 @@
     }
     async doUpdate(config) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
-      if (!config?.id)
-        throw new Error("没有配置或者配置缺少id值");
+      if (!root) throw new Error("root为空");
+      if (!config?.id) throw new Error("没有配置或者配置缺少id值");
       const info = this.getNodeInfo(config.id, false);
-      if (!info.node)
-        throw new Error(`获取不到id为${config.id}的节点`);
+      if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
@@ -1856,19 +1829,16 @@
           return srcValue;
         }
       });
-      if (!newConfig.type)
-        throw new Error("配置缺少type值");
+      if (!newConfig.type) throw new Error("配置缺少type值");
       if (newConfig.type === schema.NodeType.ROOT) {
         this.set("root", newConfig);
         return newConfig;
       }
       const { parent } = info;
-      if (!parent)
-        throw new Error("获取不到父级节点");
+      if (!parent) throw new Error("获取不到父级节点");
       const parentNodeItems = parent.items;
       const index = getNodeIndex(newConfig.id, parent);
-      if (!parentNodeItems || typeof index === "undefined" || index === -1)
-        throw new Error("更新的节点未找到");
+      if (!parentNodeItems || typeof index === "undefined" || index === -1) throw new Error("更新的节点未找到");
       const newLayout = await this.getLayout(newConfig);
       const layout = await this.getLayout(node);
       if (Array.isArray(newConfig.items) && newLayout !== layout) {
@@ -1912,17 +1882,13 @@
      */
     async sort(id1, id2) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
+      if (!root) throw new Error("root为空");
       const node = this.get("node");
-      if (!node)
-        throw new Error("当前节点为空");
+      if (!node) throw new Error("当前节点为空");
       const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
-      if (!parent)
-        throw new Error("父节点为空");
+      if (!parent) throw new Error("父节点为空");
       const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
-      if (index2 < 0)
-        return;
+      if (index2 < 0) return;
       const index1 = parent.items.findIndex((node2) => `${node2.id}` === `${id1}`);
       parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
       await this.update(parent);
@@ -1961,8 +1927,7 @@
         coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
           const node = this.getNodeById(nodeId);
-          if (!node)
-            return;
+          if (!node) return;
           customTarget.deps[nodeId].keys.forEach((key) => {
             const relateNodeId = lodashEs.get(node, key);
             const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
@@ -1986,8 +1951,7 @@
      */
     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) {
@@ -2010,15 +1974,13 @@
     }
     async doAlignCenter(config) {
       const parent = this.getParentById(config.id);
-      if (!parent)
-        throw new Error("找不到父节点");
+      if (!parent) throw new Error("找不到父节点");
       const node = lodashEs.cloneDeep(vue.toRaw(config));
       const layout = await this.getLayout(parent, node);
       if (layout === Layout.RELATIVE) {
         return config;
       }
-      if (!node.style)
-        return config;
+      if (!node.style) return config;
       const stage = this.get("stage");
       const doc = stage?.renderer.contentWindow?.document;
       if (doc) {
@@ -2057,14 +2019,11 @@
      */
     async moveLayer(offset) {
       const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
+      if (!root) throw new Error("root为空");
       const parent = this.get("parent");
-      if (!parent)
-        throw new Error("父节点为空");
+      if (!parent) throw new Error("父节点为空");
       const node = this.get("node");
-      if (!node)
-        throw new Error("当前节点为空");
+      if (!node) throw new Error("当前节点为空");
       const brothers = parent.items || [];
       const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
       const layout = await this.getLayout(parent, node);
@@ -2126,28 +2085,35 @@
       }
     }
     async dragTo(config, targetParent, targetIndex) {
-      if (!targetParent || !Array.isArray(targetParent.items))
-        return;
-      const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-      if (!parent || !curNode)
-        throw new Error("找不要删除的节点");
-      const index = getNodeIndex(curNode.id, parent);
-      if (typeof index !== "number" || index === -1)
-        throw new Error("找不要删除的节点");
-      if (parent.id === targetParent.id) {
-        if (index === targetIndex)
-          return;
-        if (index < targetIndex) {
-          targetIndex -= 1;
-        }
-      }
-      const layout = await this.getLayout(parent);
+      if (!targetParent || !Array.isArray(targetParent.items)) return;
+      const configs = Array.isArray(config) ? config : [config];
+      const sourceIndicesInTargetParent = [];
+      const sourceOutTargetParent = [];
       const newLayout = await this.getLayout(targetParent);
-      if (newLayout !== layout) {
-        setLayout(config, newLayout);
+      for (const config2 of configs) {
+        const { parent, node: curNode } = this.getNodeInfo(config2.id, false);
+        if (!parent || !curNode) throw new Error("找不要删除的节点");
+        const index = getNodeIndex(curNode.id, parent);
+        if (parent.id === targetParent.id) {
+          if (typeof index !== "number" || index === -1) {
+            return;
+          }
+          sourceIndicesInTargetParent.push(index);
+        } else {
+          const layout = await this.getLayout(parent);
+          if (newLayout !== layout) {
+            setLayout(config2, newLayout);
+          }
+          parent.items?.splice(index, 1);
+          sourceOutTargetParent.push(config2);
+          this.addModifiedNodeId(parent.id);
+        }
       }
-      parent.items?.splice(index, 1);
-      targetParent.items?.splice(targetIndex, 0, config);
+      moveItemsInContainer(sourceIndicesInTargetParent, targetParent, targetIndex);
+      sourceOutTargetParent.forEach((config2, index) => {
+        targetParent.items?.splice(targetIndex + index, 0, config2);
+        this.addModifiedNodeId(config2.id);
+      });
       const page = this.get("page");
       const root = this.get("root");
       const stage = this.get("stage");
@@ -2158,10 +2124,8 @@
           root: lodashEs.cloneDeep(root)
         });
       }
-      this.addModifiedNodeId(config.id);
-      this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
-      this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
+      this.emit("drag-to", { targetIndex, configs, targetParent });
     }
     /**
      * 撤销当前操作
@@ -2183,11 +2147,9 @@
     }
     async move(left, top) {
       const node = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node))
-        return;
+      if (!node || utils.isPage(node)) return;
       const { style, id, type } = node;
-      if (!style || !["absolute", "fixed"].includes(style.position))
-        return;
+      if (!style || !["absolute", "fixed"].includes(style.position)) return;
       const update = (style2) => this.update({
         id,
         type,
@@ -2246,6 +2208,15 @@
     usePlugin(options) {
       super.usePlugin(options);
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    once(eventName, listener) {
+      return super.once(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     addModifiedNodeId(id) {
       if (!this.isHistoryStateChange) {
         this.get("modifiedNodeIds").set(id, id);
@@ -2264,14 +2235,12 @@
       this.isHistoryStateChange = false;
     }
     async changeHistoryState(value) {
-      if (!value)
-        return;
+      if (!value) return;
       this.isHistoryStateChange = true;
       await this.update(value.data);
       this.set("modifiedNodeIds", value.modifiedNodeIds);
       setTimeout(async () => {
-        if (!value.nodeId)
-          return;
+        if (!value.nodeId) return;
         await this.select(value.nodeId);
         this.get("stage")?.select(value.nodeId);
       }, 0);
@@ -2299,8 +2268,7 @@
         throw new Error("没有ID，无法选中");
       }
       const { node, parent, page } = this.getNodeInfo(id);
-      if (!node)
-        throw new Error("获取不到组件信息");
+      if (!node) throw new Error("获取不到组件信息");
       if (node.id === this.state.root?.id) {
         throw new Error("不能选根节点");
       }
@@ -2545,8 +2513,7 @@
     const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
     let index = 0;
     for (const match of matches) {
-      if (typeof match.index === "undefined")
-        break;
+      if (typeof match.index === "undefined") break;
       displayState.push({
         type: "text",
         value: key.substring(index, match.index)
@@ -2727,8 +2694,7 @@
         coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
           const node = editorService.getNodeById(nodeId);
-          if (!node)
-            return;
+          if (!node) return;
           customTarget.deps[nodeId].keys.forEach((key) => {
             const [relateDsId] = lodashEs.get(node, key);
             const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
@@ -3323,11 +3289,9 @@
         () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
       );
       const getParamItemsConfig = (codeId) => {
-        if (!codeDsl.value || !codeId)
-          return [];
+        if (!codeDsl.value || !codeId) return [];
         const paramStatements = codeDsl.value[codeId]?.params;
-        if (lodashEs.isEmpty(paramStatements))
-          return [];
+        if (lodashEs.isEmpty(paramStatements)) return [];
         return paramStatements.map((paramState) => ({
           labelWidth: "100px",
           text: paramState.name,
@@ -3627,8 +3591,7 @@
       codeBlockService?.deleteCodeDslByIds([key]);
     };
     const submitCodeBlockHandler = async (values) => {
-      if (!codeId.value)
-        return;
+      if (!codeId.value) return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
       codeBlockEditor.value?.hide();
     };
@@ -3684,8 +3647,7 @@
         codeBlockEditor.value?.show();
       },
       deleteCode: async (model, methodName) => {
-        if (!model.methods)
-          return;
+        if (!model.methods) return;
         const index = model.methods.findIndex((method) => method.name === methodName);
         if (index === -1) {
           return;
@@ -3693,8 +3655,7 @@
         model.methods.splice(index, 1);
       },
       submitCode: (values) => {
-        if (!dataSource.value)
-          return;
+        if (!dataSource.value) return;
         if (!dataSource.value.methods) {
           dataSource.value.methods = [];
         }
@@ -3778,14 +3739,12 @@
     }
     async zoom(zoom) {
       this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
-      if (this.get("zoom") < 0.1)
-        this.set("zoom", 0.1);
+      if (this.get("zoom") < 0.1) this.set("zoom", 0.1);
     }
     async calcZoom() {
       const { stageRect, stageContainerRect } = state;
       const { height, width } = stageContainerRect;
-      if (!width || !height)
-        return 1;
+      if (!width || !height) return 1;
       let stageWidth = utils.convertToNumber(stageRect.width, width);
       let stageHeight = utils.convertToNumber(stageRect.height, height);
       stageWidth = stageWidth + 30;
@@ -3840,8 +3799,7 @@
       disabledDragStart: stageOptions.disabledDragStart,
       renderType: stageOptions.renderType,
       canSelect: (el, event, stop) => {
-        if (!stageOptions.canSelect)
-          return true;
+        if (!stageOptions.canSelect) return true;
         const elCanSelect = stageOptions.canSelect?.(el);
         if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
           document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
@@ -3872,8 +3830,7 @@
       editorService.set("stageLoading", false);
     });
     stage.on("select", (el) => {
-      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
-        return;
+      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1) return;
       editorService.select(el.id);
     });
     stage.on("highlight", (el) => {
@@ -3900,15 +3857,13 @@
     });
     stage.on("select-parent", () => {
       const parent = editorService.get("parent");
-      if (!parent)
-        throw new Error("父节点为空");
+      if (!parent) throw new Error("父节点为空");
       editorService.select(parent);
       editorService.get("stage")?.select(parent.id);
     });
     stage.on("change-guides", (e) => {
       uiService.set("showGuides", true);
-      if (!root.value || !page.value)
-        return;
+      if (!root.value || !page.value) return;
       const storageKey = getGuideLineKey(
         e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
       );
@@ -3951,8 +3906,7 @@
       isDragging.value = false;
     };
     document.body.addEventListener("dragover", (e) => {
-      if (!isDragging.value)
-        return;
+      if (!isDragging.value) return;
       e.preventDefault();
     });
     vue.watch(
@@ -4005,8 +3959,7 @@
     vue.watch(
       editorContentHeight,
       () => {
-        if (height.value > 0 && height.value === editorContentHeight.value)
-          return;
+        if (height.value > 0 && height.value === editorContentHeight.value) return;
         height.value = editorContentHeight.value;
       },
       {
@@ -4199,12 +4152,9 @@
           height: "200px",
           parse: true,
           type: (mForm, { model }) => {
-            if (model.type === "number")
-              return "number";
-            if (model.type === "boolean")
-              return "select";
-            if (model.type === "string")
-              return "text";
+            if (model.type === "number") return "number";
+            if (model.type === "boolean") return "select";
+            if (model.type === "string") return "text";
             return "vs-code";
           },
           options: [
@@ -4244,23 +4194,16 @@
         addFromJsonDialogVisible.value = true;
       };
       const getValueType = (value) => {
-        if (Array.isArray(value))
-          return "array";
-        if (value === null)
-          return "null";
-        if (typeof value === "object")
-          return "object";
-        if (typeof value === "number")
-          return "number";
-        if (typeof value === "boolean")
-          return "boolean";
-        if (typeof value === "string")
-          return "string";
+        if (Array.isArray(value)) return "array";
+        if (value === null) return "null";
+        if (typeof value === "object") return "object";
+        if (typeof value === "number") return "number";
+        if (typeof value === "boolean") return "boolean";
+        if (typeof value === "string") return "string";
         return "any";
       };
       const getFieldsConfig = (value, fields = []) => {
-        if (!value || typeof value !== "object")
-          throw new Error("数据格式错误");
+        if (!value || typeof value !== "object") throw new Error("数据格式错误");
         const newFields = [];
         Object.entries(value).forEach(([key, value2]) => {
           const type = getValueType(value2);
@@ -4450,10 +4393,8 @@
             model: props.model
           });
         }
-        if (type2 === "form")
-          return "";
-        if (type2 === "container")
-          return "";
+        if (type2 === "form") return "";
+        if (type2 === "container") return "";
         return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (props.config.items ? "" : "text");
       });
       const tagName = vue.computed(() => {
@@ -4461,8 +4402,7 @@
           return form.MCascader;
         }
         const component = vue.resolveComponent(`m-${props.config.items ? "form" : "fields"}-${type.value}`);
-        if (typeof component !== "string")
-          return component;
+        if (typeof component !== "string") return component;
         return "m-fields-text";
       });
       const onChangeHandler = (value) => {
@@ -4557,9 +4497,15 @@
         { immediate: true }
       );
       const mouseupHandler = async () => {
+        const selection = globalThis.document.getSelection();
+        const anchorOffset = selection?.anchorOffset || 0;
+        const focusOffset = selection?.focusOffset || 0;
         isFocused.value = true;
         await vue.nextTick();
         autocomplete.value?.focus();
+        if (focusOffset && input.value) {
+          input.value.setSelectionRange(anchorOffset, focusOffset);
+        }
       };
       const blurHandler = () => {
         isFocused.value = false;
@@ -5198,11 +5144,9 @@
         return Boolean(dataSource?.methods.find((method) => method.name === name));
       });
       const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
-        if (!dataSourceId)
-          return [];
+        if (!dataSourceId) return [];
         const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
-        if (!paramStatements)
-          return [];
+        if (!paramStatements) return [];
         return paramStatements.map((paramState) => ({
           text: paramState.name,
           ...paramState
@@ -5247,8 +5191,7 @@
       const editCodeHandler = () => {
         const [id] = props.model[props.name];
         const dataSource = dataSourceService?.getDataSourceById(id);
-        if (!dataSource)
-          return;
+        if (!dataSource) return;
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
@@ -5359,15 +5302,13 @@
           defaultValue: "{}",
           height: "400px",
           onChange: (formState, v) => {
-            if (typeof v !== "string")
-              return v;
+            if (typeof v !== "string") return v;
             return JSON.parse(v);
           },
           rules: [
             {
               validator: ({ value, callback }) => {
-                if (typeof value !== "string")
-                  return callback();
+                if (typeof value !== "string") return callback();
                 try {
                   JSON.parse(value);
                   callback();
@@ -5595,12 +5536,10 @@
       };
       const editHandler = () => {
         const value = props.model[props.name];
-        if (!value)
-          return;
+        if (!value) return;
         const id = typeof value === "string" ? value : value.dataSourceId;
         const dataSource = dataSourceService?.getDataSourceById(id);
-        if (!dataSource)
-          return;
+        if (!dataSource) return;
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
@@ -5678,8 +5617,7 @@
           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) {
@@ -5786,8 +5724,7 @@
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
           options: (mForm, { model }) => {
             const node = editorService?.getNodeById(model.to);
-            if (!node?.type)
-              return [];
+            if (!node?.type) return [];
             let methods = [];
             methods = eventsService?.getMethod(node.type) || [];
             if (node.type === "page-fragment-container" && node.pageFragmentId) {
@@ -5861,8 +5798,7 @@
             type: compActionConfig.value.type,
             options: (mForm, { model }) => {
               const node = editorService?.getNodeById(model.to);
-              if (!node?.type)
-                return [];
+              if (!node?.type) return [];
               return eventsService?.getMethod(node.type).map((option) => ({
                 text: option.label,
                 value: option.value
@@ -5891,8 +5827,7 @@
         ]
       }));
       const isOldVersion = vue.computed(() => {
-        if (props.model[props.name].length === 0)
-          return false;
+        if (props.model[props.name].length === 0) return false;
         return !lodashEs.has(props.model[props.name][0], "actions");
       });
       const addEvent = () => {
@@ -5907,8 +5842,7 @@
         onChangeHandler();
       };
       const removeEvent = (index) => {
-        if (!props.name)
-          return;
+        if (!props.name) return;
         props.model[props.name].splice(index, 1);
         onChangeHandler();
       };
@@ -6233,8 +6167,7 @@
       const val = vue.computed(() => props.model[props.name]);
       const uiSelectMode = vue.ref(false);
       const cancelHandler = () => {
-        if (!services?.uiService)
-          return;
+        if (!services?.uiService) return;
         services.uiService.set("uiSelectMode", false);
         uiSelectMode.value = false;
         globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
@@ -6254,8 +6187,7 @@
         return config?.name || "";
       });
       const startSelect = () => {
-        if (!services?.uiService)
-          return;
+        if (!services?.uiService) return;
         services.uiService.set("uiSelectMode", true);
         uiSelectMode.value = true;
         globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
@@ -6372,14 +6304,12 @@
     let getso;
     const isDraging = vue.ref(false);
     vue.onMounted(() => {
-      if (!target.value)
-        return;
+      if (!target.value) return;
       getso = new Gesto(target.value, {
         container: window,
         pinchOutside: true
       }).on("drag", (e) => {
-        if (!target.value)
-          return;
+        if (!target.value) return;
         emit("change", e);
       }).on("dragStart", () => {
         isDraging.value = true;
@@ -6495,13 +6425,11 @@
         });
       } else {
         vue.watchEffect(() => {
-          if (typeof props.width === "number")
-            widthChange(props.width);
+          if (typeof props.width === "number") widthChange(props.width);
         });
       }
       const changeLeft = ({ deltaX }) => {
-        if (typeof props.left === "undefined")
-          return;
+        if (typeof props.left === "undefined") return;
         let left = Math.max(props.left + deltaX, props.minLeft) || 0;
         emit("update:left", left);
         if (clientWidth - left - (props.right || 0) <= 0) {
@@ -6516,8 +6444,7 @@
         });
       };
       const changeRight = ({ deltaX }) => {
-        if (typeof props.right === "undefined")
-          return;
+        if (typeof props.right === "undefined") return;
         let right = Math.max(props.right - deltaX, props.minRight) || 0;
         emit("update:right", right);
         if (clientWidth - (props.left || 0) - right <= 0) {
@@ -6602,28 +6529,23 @@
       const props = __props;
       const services = vue.inject("services");
       const disabled = vue.computed(() => {
-        if (typeof props.data === "string")
-          return false;
-        if (props.data.type === "component")
-          return false;
+        if (typeof props.data === "string") return false;
+        if (props.data.type === "component") return false;
         if (typeof props.data.disabled === "function") {
           return props.data.disabled(services);
         }
         return props.data.disabled;
       });
       const display = vue.computed(() => {
-        if (!props.data)
-          return false;
-        if (typeof props.data === "string")
-          return true;
+        if (!props.data) return false;
+        if (typeof props.data === "string") return true;
         if (typeof props.data.display === "function") {
           return props.data.display(services);
         }
         return props.data.display ?? true;
       });
       const buttonHandler = (item, event) => {
-        if (disabled.value)
-          return;
+        if (disabled.value) return;
         if (typeof item.handler === "function" && services) {
           item.handler?.(services, event);
         }
@@ -6634,22 +6556,19 @@
         }
       };
       const clickHandler = (item, event) => {
-        if (props.eventType !== "click")
-          return;
+        if (props.eventType !== "click") return;
         if (item.type === "button") {
           buttonHandler(item, event);
         }
       };
       const mousedownHandler = (item, event) => {
-        if (props.eventType !== "mousedown")
-          return;
+        if (props.eventType !== "mousedown") return;
         if (item.type === "button") {
           buttonHandler(item, event);
         }
       };
       const mouseupHandler = (item, event) => {
-        if (props.eventType !== "mouseup")
-          return;
+        if (props.eventType !== "mouseup") return;
         if (item.type === "button") {
           buttonHandler(item, event);
         }
@@ -6766,11 +6685,9 @@
       const editorService = services?.editorService;
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
       const addPage = () => {
-        if (!editorService)
-          return;
+        if (!editorService) return;
         const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
+        if (!root) throw new Error("root 不能为空");
         const pageConfig = {
           type: props.type,
           name: generatePageNameByApp(root, props.type),
@@ -6828,8 +6745,7 @@
       });
       let translateLeft = 0;
       const scroll = (type) => {
-        if (!itemsContainer.value)
-          return;
+        if (!itemsContainer.value) return;
         const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
         if (type === "left") {
           translateLeft += 100;
@@ -7134,11 +7050,9 @@
       const services = vue.inject("services");
       const clickHandler = (type) => {
         const { editorService } = services || {};
-        if (!editorService)
-          return;
+        if (!editorService) return;
         const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
+        if (!root) throw new Error("root 不能为空");
         editorService.add({
           type,
           name: generatePageNameByApp(root, type),
@@ -7610,6 +7524,7 @@
           }, 8, ["type"])) : vue.createCommentVNode("", true),
           showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
             key: 1,
+            class: "m-editor-props-panel-src-code",
             height: `${vue.unref(editorContentHeight)}px`,
             "init-values": values.value,
             options: vue.unref(codeOptions),
@@ -7665,8 +7580,7 @@
 
   const updateStatus = (nodeStatusMap, id, status) => {
     const nodeStatus = nodeStatusMap.get(id);
-    if (!nodeStatus)
-      return;
+    if (!nodeStatus) return;
     utils.getKeys(status).forEach((key) => {
       if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
         nodeStatus[key] = Boolean(status[key]);
@@ -7862,12 +7776,10 @@
       return string.some((v) => filterNodeMethod(v, data));
     };
     const filter = (text) => {
-      if (!nodeData.value.length)
-        return;
+      if (!nodeData.value.length) return;
       nodeData.value.forEach((node) => {
         traverseNode(node, (node2, parents) => {
-          if (!nodeStatusMap.value)
-            return;
+          if (!nodeStatusMap.value) return;
           const visible = filterIsMatch(text, node2);
           if (visible && parents.length) {
             parents.forEach((parent) => {
@@ -8157,8 +8069,7 @@
     const dataSourceValues = vue.ref({});
     const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
     const editHandler = (id) => {
-      if (!editDialog.value)
-        return;
+      if (!editDialog.value) return;
       dataSourceValues.value = {
         ...dataSourceService?.getDataSourceById(id)
       };
@@ -8426,8 +8337,7 @@
         ].concat(dataSourceService?.get("datasourceTypeList") ?? [])
       );
       const addHandler = (type) => {
-        if (!editDialog.value)
-          return;
+        if (!editDialog.value) return;
         const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
         dataSourceValues.value = lodashEs.mergeWith(
           { type, title: datasourceType?.text },
@@ -8544,20 +8454,17 @@
       }));
       const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
       const hide = () => {
-        if (!visible.value)
-          return;
+        if (!visible.value) return;
         visible.value = false;
         subMenu.value?.hide();
         emit("hide");
       };
       const clickHandler = () => {
-        if (!props.autoHide)
-          return;
+        if (!props.autoHide) return;
         hide();
       };
       const outsideClickHideHandler = (e) => {
-        if (!props.autoHide)
-          return;
+        if (!props.autoHide) return;
         const target = e.target;
         if (!visible.value || !target) {
           return;
@@ -8614,13 +8521,11 @@
         emit("mouseenter");
       };
       vue.onMounted(() => {
-        if (props.isSubMenu)
-          return;
+        if (props.isSubMenu) return;
         globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
       });
       vue.onBeforeUnmount(() => {
-        if (props.isSubMenu)
-          return;
+        if (props.isSubMenu) return;
         globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
       });
       __expose({
@@ -8741,8 +8646,7 @@
     display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
     handler: (services) => {
       const nodes = services?.editorService?.get("nodes");
-      if (!nodes || nodes.length === 0)
-        return;
+      if (!nodes || nodes.length === 0) return;
       if (menu?.value?.$el) {
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
@@ -8756,12 +8660,10 @@
     }
   });
   const moveTo = (id, services) => {
-    if (!services?.editorService)
-      return;
+    if (!services?.editorService) return;
     const nodes = services.editorService.get("nodes") || [];
     const parent = services.editorService.getNodeById(id);
-    if (!parent)
-      return;
+    if (!parent) return;
     services?.editorService.add(nodes, parent);
     services?.editorService.remove(nodes);
   };
@@ -8901,8 +8803,7 @@
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const setNodeVisible = (visible) => {
-        if (!editorService)
-          return;
+        if (!editorService) return;
         editorService.update({
           id: props.data.id,
           visible
@@ -8960,17 +8861,19 @@
       services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
     };
     const throttleTime = 300;
-    const highlightHandler = lodashEs.throttle((event, data) => {
-      highlight(data);
-    }, throttleTime);
+    const highlightHandler = lodashEs.throttle(
+      (event, data) => {
+        highlight(data);
+      },
+      throttleTime
+    );
     const highlight = (data) => {
       services?.editorService?.highlight(data);
       services?.editorService?.get("stage")?.highlight(data.id);
       services?.stageOverlayService?.get("stage")?.highlight(data.id);
     };
     const nodeClickHandler = (event, data) => {
-      if (!nodeStatusMap?.value)
-        return;
+      if (!nodeStatusMap?.value) return;
       if (services?.uiService.get("uiSelectMode")) {
         document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
         return;
@@ -9014,8 +8917,7 @@
     }
   };
   const removeStatusClass = (el) => {
-    if (!el)
-      return;
+    if (!el) return;
     ["drag-before", "drag-after", "drag-inner"].forEach((className) => {
       el.querySelectorAll(`.${className}`).forEach((el2) => {
         utils.removeClassName(el2, className);
@@ -9024,11 +8926,9 @@
   };
   const useDrag = (services) => {
     const handleDragStart = (event) => {
-      if (!event.dataTransfer || !event.target || !event.currentTarget)
-        return;
+      if (!event.dataTransfer || !event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl || targetEl !== event.currentTarget)
-        return;
+      if (!targetEl || targetEl !== event.currentTarget) return;
       event.dataTransfer.effectAllowed = "move";
       try {
         event.dataTransfer.setData(
@@ -9041,14 +8941,11 @@
       }
     };
     const handleDragOver = (event) => {
-      if (!event.target)
-        return;
+      if (!event.target) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl?.draggable)
-        return;
+      if (!targetEl?.draggable) return;
       const labelEl = targetEl.children[0];
-      if (!labelEl)
-        return;
+      if (!labelEl) return;
       const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
       const distance = event.clientY - targetTop;
       const isContainer = targetEl.dataset.isContainer === "true";
@@ -9073,20 +8970,16 @@
       event.preventDefault();
     };
     const handleDragLeave = (event) => {
-      if (!event.target || !event.currentTarget)
-        return;
+      if (!event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl || targetEl !== event.currentTarget)
-        return;
+      if (!targetEl || targetEl !== event.currentTarget) return;
       const labelEl = targetEl.children[0];
       utils.removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
     };
     const handleDragEnd = (event, node) => {
-      if (!event.target || !event.currentTarget)
-        return;
+      if (!event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
-      if (!targetEl || targetEl !== event.currentTarget)
-        return;
+      if (!targetEl || targetEl !== event.currentTarget) return;
       removeStatusClass(dragState.container);
       if (node && dragState.dragOverNodeId && dragState.dropType && services) {
         if (dragState.dragOverNodeId === node.id) {
@@ -9095,8 +8988,7 @@
         const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
         const targetNode = targetInfo.node;
         let targetParent = targetInfo.parent;
-        if (!targetParent || !targetNode)
-          return;
+        if (!targetParent || !targetNode) return;
         let targetIndex = -1;
         if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
           targetIndex = targetNode.items.length;
@@ -9107,7 +8999,12 @@
         if (dragState.dropType === "after") {
           targetIndex += 1;
         }
-        services?.editorService.dragTo(node, targetParent, targetIndex);
+        const selectedNodes = services.editorService.get("nodes");
+        if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
+          services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
+        } else {
+          services.editorService.dragTo([node], targetParent, targetIndex);
+        }
       }
       dragState.dragOverNodeId = "";
       dragState.dropType = "";
@@ -9328,8 +9225,7 @@
     vue.watch(
       nodes,
       (nodes2) => {
-        if (!nodeStatusMap.value)
-          return;
+        if (!nodeStatusMap.value) return;
         for (const [id, status] of nodeStatusMap.value.entries()) {
           status.selected = nodes2.some((node) => node.id === id);
           if (status.selected) {
@@ -9347,8 +9243,7 @@
     );
     services?.editorService.on("add", (newNodes) => {
       newNodes.forEach((node) => {
-        if (utils.isPage(node) || utils.isPageFragment(node))
-          return;
+        if (utils.isPage(node) || utils.isPageFragment(node)) return;
         traverseNode(node, (node2) => {
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
@@ -9400,8 +9295,7 @@
       };
       const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
       const collapseAllHandler = () => {
-        if (!page.value || !nodeStatusMap.value)
-          return;
+        if (!page.value || !nodeStatusMap.value) return;
         const items = nodeStatusMap.value.entries();
         for (const [id, status] of items) {
           if (id === page.value.id) {
@@ -9535,8 +9429,7 @@
           }
           return;
         }
-        if (timeout || !stage.value)
-          return;
+        if (timeout || !stage.value) return;
         timeout = stage.value.delayedMarkContainer(e);
       };
       return (_ctx, _cache) => {
@@ -9700,8 +9593,7 @@
           const isActiveTabShow = showingBoxKeys.value.some(
             (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text
           );
-          if (!isActiveTabShow && activeTabName.value)
-            return;
+          if (!isActiveTabShow && activeTabName.value) return;
           const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
           if (!nextSlideBarItem) {
             activeTabName.value = "";
@@ -9956,8 +9848,7 @@
     }
     wheelHandler = (event) => {
       const { deltaX, deltaY, currentTarget } = event;
-      if (currentTarget !== this.container)
-        return;
+      if (currentTarget !== this.container) return;
       let top;
       if (this.scrollHeight > this.height) {
         top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
@@ -10050,8 +9941,7 @@
       }));
       let gesto;
       vue.onMounted(() => {
-        if (!thumb.value)
-          return;
+        if (!thumb.value) return;
         const thumbEl = thumb.value;
         gesto = new Gesto(thumbEl, {
           container: window
@@ -10065,8 +9955,7 @@
         bar.value?.addEventListener("wheel", wheelHandler, false);
       });
       vue.onBeforeUnmount(() => {
-        if (gesto)
-          gesto.off();
+        if (gesto) gesto.off();
         bar.value?.removeEventListener("wheel", wheelHandler, false);
       });
       const wheelHandler = (e) => {
@@ -10145,8 +10034,7 @@
       const scrollHeight = vue.ref(0);
       let scrollViewer;
       vue.onMounted(() => {
-        if (!container.value || !el.value)
-          return;
+        if (!container.value || !el.value) return;
         scrollViewer = new ScrollViewer({
           container: container.value,
           target: el.value,
@@ -10239,8 +10127,7 @@
       const unWatch = vue.watch(
         stage,
         (stage2) => {
-          if (!stage2)
-            return;
+          if (!stage2) return;
           vue.nextTick(() => unWatch());
           stage2.on("select", (el, event) => {
             const els = stage2.renderer.getElementsFromPoint(event) || [];
@@ -10256,8 +10143,7 @@
       vue.watch(
         nodes,
         (nodes2) => {
-          if (!nodeStatusMap.value)
-            return;
+          if (!nodeStatusMap.value) return;
           for (const [id, status] of nodeStatusMap.value.entries()) {
             status.selected = nodes2.some((node) => node.id === id);
           }
@@ -10351,8 +10237,7 @@
         }
       });
       vue.watch(stageOverlay, (stageOverlay2) => {
-        if (!services)
-          return;
+        if (!services) return;
         const subStage = services.stageOverlayService.createStage(stageOptions);
         services?.stageOverlayService.set("stage", subStage);
         if (stageOverlay2 && subStage) {
@@ -10467,8 +10352,7 @@
               icon: vue.markRaw(_sfc_main$5),
               display: () => canCenter.value,
               handler: () => {
-                if (!nodes.value)
-                  return;
+                if (!nodes.value) return;
                 editorService?.alignCenter(nodes.value);
               }
             },
@@ -10478,8 +10362,7 @@
               type: "divider",
               direction: "horizontal",
               display: () => {
-                if (!node.value)
-                  return false;
+                if (!node.value) return false;
                 return !utils.isPage(node.value) && !utils.isPageFragment(node.value);
               }
             },
@@ -10545,8 +10428,7 @@
       vue.watch(
         parent,
         async () => {
-          if (!parent.value || !editorService)
-            return canCenter.value = false;
+          if (!parent.value || !editorService) return canCenter.value = false;
           const layout = await editorService.getLayout(parent.value);
           const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
           const isTypeConform = nodes.value?.every(
@@ -10597,12 +10479,9 @@
       const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
       vue.watchEffect(() => {
-        if (stage || !page.value)
-          return;
-        if (!stageContainer.value)
-          return;
-        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
-          return;
+        if (stage || !page.value) return;
+        if (!stageContainer.value) return;
+        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
         stage = useStage(stageOptions);
         stage.on("select", () => {
           stageWrap.value?.container?.focus();
@@ -10622,8 +10501,7 @@
         });
       });
       vue.watch(zoom, (zoom2) => {
-        if (!stage || !zoom2)
-          return;
+        if (!stage || !zoom2) return;
         stage.setZoom(zoom2);
       });
       vue.watch(page, (page2) => {
@@ -10668,20 +10546,16 @@
         menu.value?.show(e);
       };
       const dragoverHandler = (e) => {
-        if (!e.dataTransfer)
-          return;
+        if (!e.dataTransfer) return;
         e.preventDefault();
         e.dataTransfer.dropEffect = "move";
       };
       const dropHandler = async (e) => {
-        if (!e.dataTransfer)
-          return;
+        if (!e.dataTransfer) return;
         const data = e.dataTransfer.getData("text/json");
-        if (!data)
-          return;
+        if (!data) return;
         const config = parseDSL(`(${data})`);
-        if (!config || config.dragType !== DragType.COMPONENT_LIST)
-          return;
+        if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
         e.preventDefault();
         const doc = stage?.renderer.contentWindow?.document;
         const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
@@ -10886,11 +10760,9 @@
      * @returns {CodeBlockContent | null}
      */
     getCodeContentById(id) {
-      if (!id)
-        return null;
+      if (!id) return null;
       const totalCodeDsl = this.getCodeDsl();
-      if (!totalCodeDsl)
-        return null;
+      if (!totalCodeDsl) return null;
       return totalCodeDsl[id] ?? null;
     }
     /**
@@ -10915,8 +10787,7 @@
       if (!codeDsl) {
         throw new Error("dsl中没有codeBlocks");
       }
-      if (codeDsl[id] && !force)
-        return;
+      if (codeDsl[id] && !force) return;
       const codeConfigProcessed = lodashEs.cloneDeep(codeConfig);
       if (codeConfigProcessed.content) {
         const parseDSL = getConfig("parseDSL");
@@ -11009,8 +10880,7 @@
      */
     async deleteCodeDslByIds(codeIds) {
       const currentDsl = await this.getCodeDsl();
-      if (!currentDsl)
-        return;
+      if (!currentDsl) return;
       codeIds.forEach((id) => {
         delete currentDsl[id];
         this.emit("remove", id);
@@ -11030,8 +10900,7 @@
       const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
       const dsl = await this.getCodeDsl();
       const existedIds = lodashEs.keys(dsl);
-      if (!existedIds.includes(newId))
-        return newId;
+      if (!existedIds.includes(newId)) return newId;
       return await this.getUniqueId();
     }
     /**
@@ -11051,8 +10920,7 @@
         coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
           const node = editorService.getNodeById(nodeId);
-          if (!node)
-            return;
+          if (!node) return;
           customTarget.deps[nodeId].keys.forEach((key) => {
             const relateCodeId = lodashEs.get(node, key);
             const isExist = Object.keys(copyData).find((codeId) => codeId === relateCodeId);
@@ -11175,8 +11043,7 @@
     removeTargets(type = dep.DepTargetType.DEFAULT) {
       this.watcher.removeTargets(type);
       const targets = this.watcher.getTargets(type);
-      if (!targets)
-        return;
+      if (!targets) return;
       for (const target of Object.values(targets)) {
         this.emit("remove-target", target.id);
       }
@@ -11317,8 +11184,7 @@
     commands = {
       [KeyBindingCommand.DELETE_NODE]: () => {
         const nodes = editorService.get("nodes");
-        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))
-          return;
+        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0])) return;
         editorService.remove(nodes);
       },
       [KeyBindingCommand.COPY_NODE]: () => {
@@ -11327,8 +11193,7 @@
       },
       [KeyBindingCommand.CUT_NODE]: () => {
         const nodes = editorService.get("nodes");
-        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))
-          return;
+        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0])) return;
         editorService.copy(nodes);
         editorService.remove(nodes);
       },
@@ -11517,8 +11382,7 @@
     }
     openOverlay(el) {
       const stageOptions = this.get("stageOptions");
-      if (!el || !stageOptions)
-        return;
+      if (!el || !stageOptions) return;
       this.set("sourceEl", el);
       this.createContentEl();
       this.set("stageOverlayVisible", true);
@@ -11545,8 +11409,7 @@
     }
     updateOverlay() {
       const sourceEl = this.get("sourceEl");
-      if (!sourceEl)
-        return;
+      if (!sourceEl) return;
       const { scrollWidth, scrollHeight } = sourceEl;
       this.set("wrapWidth", scrollWidth);
       this.set("wrapHeight", scrollHeight);
@@ -11579,8 +11442,7 @@
     }
     createContentEl() {
       const sourceEl = this.get("sourceEl");
-      if (!sourceEl)
-        return;
+      if (!sourceEl) return;
       const contentEl = sourceEl.cloneNode(true);
       this.set("contentEl", contentEl);
       contentEl.style.position = "static";
@@ -11602,8 +11464,7 @@
       const wrapDiv = this.get("wrapDiv");
       const subStage = this.get("stage");
       const stageOptions = this.get("stageOptions");
-      if (!contentEl)
-        return;
+      if (!contentEl) return;
       wrapDiv.style.cssText = `
       width: ${sourceEl?.scrollWidth}px;
       height: ${sourceEl?.scrollHeight}px;
@@ -11823,37 +11684,9 @@
         getApp()?.dataSourceManager?.updateSchema(root.dataSources);
       }
     };
-    const updateNodeWhenDataSourceChange = (nodes) => {
-      const root = editorService.get("root");
-      const stage = editorService.get("stage");
-      if (!root || !stage)
-        return;
-      const app = getApp();
-      if (!app)
-        return;
-      if (app.dsl) {
-        app.dsl.dataSourceDeps = root.dataSourceDeps;
-        app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-        app.dsl.dataSources = root.dataSources;
-      }
-      updateDataSourceSchema();
-      nodes.forEach((node) => {
-        const deps = Object.values(root.dataSourceDeps || {});
-        deps.forEach((dep) => {
-          if (dep[node.id]) {
-            stage.update({
-              config: lodashEs.cloneDeep(node),
-              parentId: editorService.getParentById(node.id)?.id,
-              root: lodashEs.cloneDeep(root)
-            });
-          }
-        });
-      });
-    };
     const targetAddHandler = (target) => {
       const root = editorService.get("root");
-      if (!root)
-        return;
+      if (!root) return;
       if (target.type === dep.DepTargetType.DATA_SOURCE) {
         if (!root.dataSourceDeps) {
           root.dataSourceDeps = {};
@@ -11876,8 +11709,41 @@
         delete root.dataSourceCondDeps[id];
       }
     };
-    const collectedHandler = (nodes) => {
-      updateNodeWhenDataSourceChange(nodes);
+    const collectedHandler = (nodes, deep) => {
+      const root = editorService.get("root");
+      const stage = editorService.get("stage");
+      if (!root || !stage) return;
+      const app = getApp();
+      if (!app) return;
+      if (app.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+        app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+        app.dsl.dataSources = root.dataSources;
+      }
+      updateDataSourceSchema();
+      const allNodes = [];
+      if (deep) {
+        nodes.forEach((node) => {
+          traverseNode(node, (node2) => {
+            if (!allNodes.includes(node2)) {
+              allNodes.push(node2);
+            }
+          });
+        });
+      } else {
+        allNodes.push(...nodes);
+      }
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        Object.keys(dep).forEach((id) => {
+          const node = allNodes.find((node2) => node2.id === id);
+          node && stage.update({
+            config: lodashEs.cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: lodashEs.cloneDeep(root)
+          });
+        });
+      });
     };
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
@@ -11888,8 +11754,7 @@
       depService.addTarget(dep.createDataSourceCondTarget(ds, vue.reactive({})));
     };
     const rootChangeHandler = async (value, preValue) => {
-      if (!value)
-        return;
+      if (!value) return;
       value.codeBlocks = value.codeBlocks || {};
       value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
@@ -11979,9 +11844,6 @@
       (root?.items || []).forEach((page) => {
         depService.collectIdle([page], { pageId: page.id }, true);
       });
-      const targets = depService.getTargets(dep.DepTargetType.DATA_SOURCE);
-      const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
-      updateNodeWhenDataSourceChange(nodes);
     };
     const removeDataSourceTarget = (id) => {
       depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE);
@@ -12332,6 +12194,7 @@
   exports.info = info;
   exports.isFixed = isFixed;
   exports.log = log;
+  exports.moveItemsInContainer = moveItemsInContainer;
   exports.propsService = propsService;
   exports.serializeConfig = serializeConfig;
   exports.setChildrenLayout = setChildrenLayout;