feat: dsl id渲染到dom上的data-tamgic-id,不再是id属性

packages/core/src/EventHelper.ts

@@ -32,7 +32,7 @@ import {
   type EventActionItem,
   type EventConfig,
 } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getIdFromEl } from '@tmagic/utils';
 
 import type { default as TMagicApp } from './App';
 import type { default as TMagicNode } from './Node';
@@ -49,14 +49,16 @@ const getDirectComponent = (element: HTMLElement | null, app: TMagicApp): TMagic
     return;
   }
 
-  if (!element.id) {
+  const id = getIdFromEl()(element);
+
+  if (!id) {
     return getDirectComponent(element.parentElement, app);
   }
 
   const node = app.getNode(
-    element.id,
+    id,
-    element.dataset.iteratorContainerId?.split(','),
+    element.dataset.tmagicIteratorContainerId?.split(','),
-    element.dataset.iteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
+    element.dataset.tmagicIteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
   );
 
   return node;

packages/editor/src/editorProps.ts

@@ -10,6 +10,7 @@ import StageCore, {
   RenderType,
   type UpdateDragEl,
 } from '@tmagic/stage';
+import { getIdFromEl } from '@tmagic/utils';
 
 import type {
   ComponentGroup,
@@ -114,7 +115,7 @@ export const defaultEditorProps = {
   eventMethodList: () => ({}),
   datasourceValues: () => ({}),
   datasourceConfigs: () => ({}),
-  canSelect: (el: HTMLElement) => Boolean(el.id),
+  canSelect: (el: HTMLElement) => Boolean(getIdFromEl()(el)),
   isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
   codeOptions: () => ({}),
 };

packages/editor/src/fields/UISelect.vue

@@ -48,8 +48,9 @@ import { throttle } from 'lodash-es';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
+import { getIdFromEl } from '@tmagic/utils';
 
-import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
+import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsUISelect',
@@ -71,11 +72,12 @@ const cancelHandler = () => {
   globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
-const clickHandler = ({ detail }: Event & { detail: any }) => {
+const clickHandler = ({ detail }: Event & { detail: HTMLElement }) => {
-  if (detail.id) {
+  const id = getIdFromEl()(detail);
-    props.model[props.name] = detail.id;
+  if (id) {
-    emit('change', detail.id);
+    props.model[props.name] = id;
-    mForm?.$emit('field-change', props.prop, detail.id);
+    emit('change', id);
+    mForm?.$emit('field-change', props.prop, id);
   }
 
   if (cancelHandler) {
@@ -104,21 +106,24 @@ const deleteHandler = () => {
 };
 
 const selectNode = async (id: Id) => {
-  await services?.editorService.select(id);
+  if (!services) return;
-  services?.editorService.get('stage')?.select(id);
+  await services.editorService.select(id);
-  services?.stageOverlayService.get('stage')?.select(id);
+  services.editorService.get('stage')?.select(id);
+  services.stageOverlayService.get('stage')?.select(id);
 };
 
 const highlight = throttle((id: Id) => {
-  services?.editorService.highlight(id);
+  if (!services) return;
-  services?.editorService.get('stage')?.highlight(id);
+  services.editorService.highlight(id);
-  services?.stageOverlayService.get('stage')?.highlight(id);
+  services.editorService.get('stage')?.highlight(id);
+  services.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
 const unhighlight = () => {
-  services?.editorService.set('highlightNode', null);
+  if (!services) return;
-  services?.editorService.get('stage')?.clearHighlight();
+  services.editorService.set('highlightNode', null);
-  services?.stageOverlayService.get('stage')?.clearHighlight();
+  services.editorService.get('stage')?.clearHighlight();
+  services.stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>
 

packages/editor/src/hooks/use-stage.ts

@@ -2,6 +2,7 @@ import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
+import { getIdFromEl } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
@@ -71,27 +72,32 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('select', (el: HTMLElement) => {
-    if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
+    const id = getIdFromEl()(el);
-    editorService.select(el.id);
+    if (`${editorService.get('node')?.id}` === id && editorService.get('nodes').length === 1) return;
+    id && editorService.select(id);
   });
 
   stage.on('highlight', (el: HTMLElement) => {
-    editorService.highlight(el.id);
+    const id = getIdFromEl()(el);
+    id && editorService.highlight(id);
   });
 
   stage.on('multi-select', (els: HTMLElement[]) => {
-    editorService.multiSelect(els.map((el) => el.id));
+    const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
+    editorService.multiSelect(ids);
   });
 
   stage.on('update', (ev: UpdateEventData) => {
     if (ev.parentEl) {
       for (const data of ev.data) {
-        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+        const id = getIdFromEl()(data.el);
+        const pId = getIdFromEl()(ev.parentEl);
+        id && pId && editorService.moveToContainer({ id, style: data.style }, pId);
       }
       return;
     }
 
-    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+    editorService.update(ev.data.map((data) => ({ id: getIdFromEl()(data.el) || '', style: data.style })));
   });
 
   stage.on('sort', (ev: SortEventData) => {
@@ -99,7 +105,7 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
-    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(getIdFromEl()(el) || ''));
     editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
   });
 

packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -26,6 +26,7 @@ import { computed, inject, nextTick, ref, watch } from 'vue';
 
 import { TMagicTooltip } from '@tmagic/design';
 import type { MNode } from '@tmagic/schema';
+import { getIdFromEl } from '@tmagic/utils';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -61,7 +62,7 @@ const unWatch = watch(
 
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
       const els = stage.renderer.getElementsFromPoint(event) || [];
-      const ids = els.map((el) => el.id).filter((id) => Boolean(id));
+      const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
 
       buttonVisible.value = ids.length > 3;
 

packages/editor/src/layouts/workspace/viewer/Stage.vue

@@ -46,7 +46,7 @@ import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/schema';
 import StageCore, { getOffset, Runtime } from '@tmagic/stage';
-import { calcValueByFontsize } from '@tmagic/utils';
+import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
@@ -200,8 +200,9 @@ const dropHandler = async (e: DragEvent) => {
   const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
 
   let parent: MContainer | undefined | null = page.value;
-  if (parentEl) {
+  const parentId = getIdFromEl()(parentEl);
-    parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+  if (parentId) {
+    parent = services?.editorService.getNodeById(parentId, false) as MContainer;
   }
 
   if (parent && stageContainer.value && stage) {

packages/editor/src/services/editor.ts

@@ -23,7 +23,7 @@ import { Writable } from 'type-fest';
 import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -759,7 +759,7 @@ class Editor extends BaseService {
     const doc = stage?.renderer.contentWindow?.document;
 
     if (doc) {
-      const el = doc.getElementById(`${node.id}`);
+      const el = getElById()(doc, node.id);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);

packages/editor/src/services/stageOverlay.ts

@@ -2,6 +2,7 @@ import { reactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import StageCore from '@tmagic/stage';
+import { getIdFromEl } from '@tmagic/utils';
 
 import { useStage } from '@editor/hooks/use-stage';
 import BaseService from '@editor/services//BaseService';
@@ -169,7 +170,8 @@ class StageOverlay extends BaseService {
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl.id);
+      const id = getIdFromEl()(contentEl);
+      id && subStage?.select(id);
     }
   }
 

packages/editor/src/utils/editor.ts

@@ -21,9 +21,10 @@ import serialize from 'serialize-javascript';
 import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
+
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 export const COPY_CODE_STORAGE_KEY = '$MagicEditorCopyCode';
 export const COPY_DS_STORAGE_KEY = '$MagicEditorCopyDataSource';
@@ -239,8 +240,8 @@ export const getGuideLineFromCache = (key: string): number[] => {
 export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) => {
   if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
 
-  const el = doc.getElementById(`${config.id}`);
+  const el = getElById()(doc, `${config.id}`);
-  const parentEl = doc.getElementById(`${parent.id}`);
+  const parentEl = getElById()(doc, `${parent.id}`);
 
   const left = Number(config.style?.left) || 0;
   if (el && parentEl) {

packages/editor/src/utils/index.ts

@@ -22,3 +22,7 @@ export * from './logger';
 export * from './editor';
 export * from './operator';
 export * from './data-source';
+export * from './idle-task';
+export * from './scroll-viewer';
+export * from './tree';
+export * from './undo-redo';

packages/editor/src/utils/operator.ts

@@ -2,7 +2,7 @@ import { toRaw } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
-import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import propsService from '@editor/services/props';
@@ -73,7 +73,8 @@ export const beforePaste = (position: PastePosition, config: MNode[], doc?: Docu
  */
 export const getPositionInContainer = (position: PastePosition = {}, id: Id, doc?: Document) => {
   let { left = 0, top = 0 } = position;
-  const parentEl = editorService.get('stage')?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const stageDoc = editorService.get('stage')?.renderer?.contentWindow?.document;
+  const parentEl = stageDoc && getElById()(stageDoc, `${id}`);
   const parentElRect = parentEl?.getBoundingClientRect();
   left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
   top = top - calcValueByFontsize(doc, parentElRect?.top || 0);

packages/stage/src/ActionManager.ts

@@ -23,7 +23,7 @@ import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import { Env } from '@tmagic/core';
 import type { Id } from '@tmagic/schema';
-import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
+import { addClassName, getDocument, getIdFromEl, removeClassNameByClassName } from '@tmagic/utils';
 
 import {
   AbleActionEventType,
@@ -99,13 +99,14 @@ export default class ActionManager extends EventEmitter {
     }
 
     const el = await this.getElementFromPoint(event);
-    if (!el) {
+    const id = getIdFromEl()(el);
+    if (!id) {
       this.clearHighlight();
       return;
     }
 
     this.emit('mousemove', event);
-    this.highlight(el.id);
+    this.highlight(id);
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -118,7 +119,7 @@ export default class ActionManager extends EventEmitter {
     this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
-    this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
+    this.canSelect = config.canSelect || ((el: HTMLElement) => Boolean(getIdFromEl()(el)));
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
 
@@ -187,7 +188,7 @@ export default class ActionManager extends EventEmitter {
    */
   public isSelectedEl(el: HTMLElement): boolean {
     // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
-    return el.id === this.selectedEl?.id;
+    return getIdFromEl()(el) === getIdFromEl()(this.selectedEl);
   }
 
   public setSelectedEl(el: HTMLElement | null): void {
@@ -224,7 +225,7 @@ export default class ActionManager extends EventEmitter {
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
+      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
         if (stopped) break;
         return el;
       }
@@ -344,7 +345,11 @@ export default class ActionManager extends EventEmitter {
     const els = this.getElementsFromPoint(event);
 
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isContainer?.(el)) && !excludeElList.includes(el)) {
+      if (
+        !getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) &&
+        (await this.isContainer?.(el)) &&
+        !excludeElList.includes(el)
+      ) {
         addClassName(el, doc, this.containerHighlightClassName);
         break;
       }
@@ -477,9 +482,9 @@ export default class ActionManager extends EventEmitter {
         if (typeof options === 'function') {
           const cfg: CustomizeMoveableOptionsCallbackConfig = {
             targetEl: this.selectedEl,
-            targetElId: this.selectedEl?.id,
+            targetElId: getIdFromEl()(this.selectedEl),
             targetEls: this.selectedElList,
-            targetElIds: this.selectedElList?.map((item) => item.id),
+            targetElIds: this.selectedElList?.map((item) => getIdFromEl()(item) || ''),
             isMulti,
             document: this.getRenderDocument(),
           };
@@ -507,7 +512,7 @@ export default class ActionManager extends EventEmitter {
     }
 
     // 判断元素是否已在多选列表
-    const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+    const existIndex = this.selectedElList.findIndex((selectedDom) => getIdFromEl()(selectedDom) === getIdFromEl()(el));
     if (existIndex !== -1) {
       // 再次点击取消选中
       if (this.selectedElList.length > 1) {

packages/stage/src/DragResizeHelper.ts

@@ -32,13 +32,15 @@ import type {
 } from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { calcValueByFontsize } from '@tmagic/utils';
+import { calcValueByFontsize, getIdFromEl, setIdToEl } from '@tmagic/utils';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from './const';
 import TargetShadow from './TargetShadow';
 import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
+const getId = getIdFromEl();
+
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@@ -239,15 +241,15 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
 
       if (!isParentIncluded) {
         // 更新页面元素位置
@@ -277,15 +279,18 @@ export default class DragResizeHelper {
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id),
+        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
+        (targetItem) =>
+          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getId(targetItem) &&
+          getId(ev.target)?.endsWith(getId(targetItem)!),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
       if (!isParentIncluded) {
         // 更新页面元素位置
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -312,7 +317,7 @@ export default class DragResizeHelper {
     const shadowEls = this.getShadowEls();
 
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => item.id.endsWith(el.id));
+      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ''));
     }
 
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
@@ -348,13 +353,17 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
-        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
+        (targetItem) =>
+          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || ''),
       );
       if (!matchEventTarget) return;
+
+      const id = getId(matchEventTarget);
+      id &&
         this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
           top: matchEventTarget.offsetTop,
-        id: matchEventTarget.id,
+          id,
         });
     });
   }
@@ -370,7 +379,7 @@ export default class DragResizeHelper {
     const ghostEl = el.cloneNode(true) as HTMLElement;
     this.setGhostElChildrenId(ghostEl);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
     ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
@@ -384,8 +393,10 @@ export default class DragResizeHelper {
 
   private setGhostElChildrenId(el: Element): void {
     for (const child of Array.from(el.children)) {
-      if (child.id) {
+      const el = child as HTMLElement;
-        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      const id = getId(el);
+      if (id) {
+        setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
       }
 
       if (child.children.length) {

packages/stage/src/StageCore.ts

@@ -21,6 +21,7 @@ import { EventEmitter } from 'events';
 import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import type { Id } from '@tmagic/schema';
+import { getIdFromEl } from '@tmagic/utils';
 
 import ActionManager from './ActionManager';
 import { DEFAULT_ZOOM } from './const';
@@ -336,13 +337,14 @@ export default class StageCore extends EventEmitter {
   private initActionManagerEvent(): void {
     this.actionManager
       .on('before-select', (el: HTMLElement, event?: MouseEvent) => {
-        this.select(el.id, event);
+        const id = getIdFromEl()(el);
+        id && this.select(id, event);
       })
       .on('select', (selectedEl: HTMLElement, event: MouseEvent) => {
         this.emit('select', selectedEl, event);
       })
       .on('before-multi-select', (els: HTMLElement[]) => {
-        this.multiSelect(els.map((el) => el.id));
+        this.multiSelect(els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[]);
       })
       .on('multi-select', (selectedElList: HTMLElement[], event: MouseEvent) => {
         this.emit('multi-select', selectedElList, event);

packages/stage/src/StageDragResize.ts

@@ -19,6 +19,8 @@
 /* eslint-disable no-param-reassign */
 import Moveable, { MoveableOptions } from 'moveable';
 
+import { getIdFromEl } from '@tmagic/utils';
+
 import { Mode, StageDragStatus } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
@@ -328,9 +330,11 @@ export default class StageDragResize extends MoveableOptionsManager {
         this.emit('sort', up(deltaTop, this.target));
       }
     } else {
+      const id = getIdFromEl()(this.target);
+      id &&
         this.emit('sort', {
-        src: this.target.id,
+          src: id,
-        dist: this.target.id,
+          dist: id,
         });
     }
   }

packages/stage/src/StageMultiDragResize.ts

@@ -18,6 +18,8 @@
 
 import Moveable from 'moveable';
 
+import { getIdFromEl } from '@tmagic/utils';
+
 import { DRAG_EL_ID_PREFIX, Mode, StageDragStatus } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
@@ -132,7 +134,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
         const { inputTarget, targets } = e;
         // 如果有多个元素被选中，同时点击的元素在选中元素中的其中一项，可能是多选态切换为该元素的单选态，抛事件给上一层继续判断是否切换
         if (targets.length > 1 && targets.includes(inputTarget)) {
-          this.emit('change-to-select', inputTarget.id.replace(DRAG_EL_ID_PREFIX, ''), e.inputEvent);
+          const id = getIdFromEl()(inputTarget as HTMLElement)?.replace(DRAG_EL_ID_PREFIX, '');
+          id && this.emit('change-to-select', id, e.inputEvent);
         }
       });
   }

packages/stage/src/StageRender.ts

@@ -19,7 +19,7 @@
 import { EventEmitter } from 'events';
 
 import { Id } from '@tmagic/schema';
-import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
+import { getElById, getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
 import { DEFAULT_ZOOM, RenderType } from './const';
 import style from './style.css?raw';
@@ -152,7 +152,7 @@ export default class StageRender extends EventEmitter {
   }
 
   public getTargetElement(id: Id): HTMLElement | null {
-    return this.getDocument()?.getElementById(`${id}`) || null;
+    return getElById()(this.getDocument(), id);
   }
 
   /**

packages/stage/src/TargetShadow.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { guid } from '@tmagic/utils';
+import { getElById, getIdFromEl, guid, setIdToEl } from '@tmagic/utils';
 
 import { Mode, ZIndex } from './const';
 import type { TargetElement as ShadowElement, TargetShadowConfig, UpdateDragEl } from './types';
@@ -93,7 +93,7 @@ export default class TargetShadow {
   private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
     const el = src || globalThis.document.createElement('div');
 
-    el.id = `${this.idPrefix}_${target.id}`;
+    setIdToEl()(el, `${this.idPrefix}_${getIdFromEl()(target)}`);
 
     el.style.cssText = getTargetElStyle(target, this.zIndex);
 
@@ -108,7 +108,7 @@ export default class TargetShadow {
       el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
     }
 
-    if (!globalThis.document.getElementById(el.id)) {
+    if (!getElById()(globalThis.document, getIdFromEl()(el))) {
       this.container.append(el);
     }
 

packages/ui-react/src/button/Button.tsx

@@ -34,7 +34,11 @@ const Page: React.FC<ButtonProps> = ({ config }) => {
   const MagicUiText = app.resolveComponent('text');
 
   return (
-    <button className="magic-ui-button" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
+    <button
+      className="magic-ui-button"
+      style={app.transformStyle(config.style || {})}
+      data-tmagic-id={`${config.id || ''}`}
+    >
       <MagicUiText
         config={{
           text: config.text,

packages/ui-react/src/container/Container.tsx

@@ -36,7 +36,7 @@ const Container: React.FC<ContainerProps> = ({ config, id }) => {
 
   return (
     <div
-      id={`${id || config.id || ''}`}
+      data-tmagic-id={`${id || config.id || ''}`}
       className={`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`}
       style={app.transformStyle(config.style || {})}
     >
@@ -50,7 +50,7 @@ const Container: React.FC<ContainerProps> = ({ config, id }) => {
 
         return (
           <MagicUiComp
-            id={`${item.id || ''}`}
+            data-tmagic-id={`${item.id || ''}`}
             key={item.id}
             config={item}
             className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}

packages/ui-react/src/container/formConfig.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { getElById } from '@tmagic/utils';
+
 export default [
   {
     name: 'layout',
@@ -31,7 +33,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        const el = getElById(model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

packages/ui-react/src/img/Img.tsx

@@ -42,7 +42,7 @@ const Img: React.FC<ImgProps> = ({ config }) => {
     <img
       className="magic-ui-img"
       style={app.transformStyle(config.style || {})}
-      id={`${config.id}`}
+      data-tmagic-id={`${config.id}`}
       src={config.src}
       onClick={clickHandler}
     />

packages/ui-react/src/iterator-container/src/IteratorContainer.tsx

@@ -36,7 +36,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({ config, id }) =>
   const MagicUiComp = app?.resolveComponent('container');
   return (
     <div
-      id={`${id || config.id || ''}`}
+      data-tmagic-id={`${id || config.id || ''}`}
       className="magic-ui-iterator-container"
       style={app?.transformStyle(config.style || {})}
     >

packages/ui-react/src/overlay/Overlay.tsx

@@ -72,7 +72,7 @@ const Overlay: React.FC<OverlayProps> = ({ config }) => {
 
   return (
     <MagicUiComp
-      id={config.id}
+      data-tmagic-id={config.id}
       className="magic-ui-overlay"
       config={{ style: config.style, items: config.items }}
     ></MagicUiComp>

packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx

@@ -38,7 +38,7 @@ const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config })
 
   return (
     <div
-      id={`${config.id || ''}`}
+      data-tmagic-id={`${config.id || ''}`}
       className="magic-ui-page-fragment-container"
       style={app.transformStyle(config.style || {})}
     >

packages/ui-react/src/page-fragment/src/PageFragment.tsx

@@ -17,7 +17,7 @@ const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
 
   return (
     <div
-      id={`${config.id || ''}`}
+      data-tmagic-id={`${config.id || ''}`}
       className={`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
         config.className ? ` ${config.className}` : ''
       }`}
@@ -33,7 +33,7 @@ const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
 
         return (
           <MagicUiComp
-            id={`${item.id || ''}`}
+            data-tmagic-id={`${item.id || ''}`}
             key={item.id}
             config={item}
             className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}

packages/ui-react/src/page-fragment/src/formConfig.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { getElById } from '@tmagic/utils';
+
 export default [
   {
     text: '页面片标识',
@@ -40,7 +42,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        const el = getElById(model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

packages/ui-react/src/page/Page.tsx

@@ -54,7 +54,7 @@ const Page: React.FC<PageProps> = ({ config }) => {
 
         return (
           <MagicUiComp
-            id={`${item.id || ''}`}
+            data-tmagic-id={`${item.id || ''}`}
             key={item.id}
             config={item}
             className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}

packages/ui-react/src/page/formConfig.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { getElById } from '@tmagic/utils';
+
 export default [
   {
     text: '页面标识',
@@ -42,7 +44,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        const el = getElById(model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

packages/ui-react/src/qrcode/Qrcode.tsx

@@ -44,7 +44,12 @@ const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
   }, [config.url]);
 
   return (
-    <img className="magic-ui-qrcode" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={imgSrc} />
+    <img
+      className="magic-ui-qrcode"
+      style={app.transformStyle(config.style || {})}
+      data-tmagic-id={`${config.id}`}
+      src={imgSrc}
+    />
   );
 };
 

packages/ui-react/src/text/Text.tsx

@@ -32,7 +32,7 @@ const Text: React.FC<TextProps> = ({ config }) => {
   if (!app) return null;
 
   return (
-    <p className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
+    <p className="magic-ui-text" style={app.transformStyle(config.style || {})} data-tmagic-id={`${config.id || ''}`}>
       {config.text}
     </p>
   );

packages/ui/package.json

@@ -2,7 +2,7 @@
   "version": "1.4.19",
   "name": "@tmagic/ui",
   "type": "module",
-  "main": "src/index.ts",
+  "main": "dist/tmagic-ui.js",
   "types": "types/index.d.ts",
   "exports": {
     "./*": "./*"

packages/utils/src/dom.ts

@@ -122,3 +122,12 @@ export const calcValueByFontsize = (doc: Document | undefined, value: number) =>
 
   return value;
 };
+
+export const getIdFromEl = () => (el?: HTMLElement | SVGElement | null) => el?.dataset?.tmagicId;
+
+export const getElById = () => (doc?: Document, id?: string | number) =>
+  doc?.querySelector(`[data-tmagic-id=${id}]`) as HTMLElement;
+
+export const setIdToEl = () => (el: HTMLElement | SVGElement, id: string | number) => {
+  el.dataset.tmagicId = `${id}`;
+};

pnpm-lock.yaml

@@ -890,23 +890,23 @@ importers:
   runtime/tmagic-form:
     dependencies:
       '@tmagic/core':
-        specifier: '>=1.4.8'
+        specifier: workspace:*
-        version: 1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
+        version: link:../../packages/core
       '@tmagic/editor':
-        specifier: '>=1.4.8'
+        specifier: workspace:*
-        version: 1.4.15(4pfl54jklxllvwdrflyhgd4dtm)
+        version: link:../../packages/editor
       '@tmagic/form':
-        specifier: '>=1.4.8'
+        specifier: workspace:*
-        version: 1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
+        version: link:../../packages/form
       '@tmagic/schema':
-        specifier: '>=1.4.8'
+        specifier: workspace:*
-        version: 1.4.15(typescript@5.5.4)
+        version: link:../../packages/schema
       '@tmagic/stage':
-        specifier: '>=1.4.8'
+        specifier: workspace:*
-        version: 1.4.15(@tmagic/core@1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)
+        version: link:../../packages/stage
       '@tmagic/utils':
-        specifier: '>=1.4.8'
+        specifier: workspace:*
-        version: 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
+        version: link:../../packages/utils
       element-plus:
         specifier: '>=2.7.5'
         version: 2.7.8(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
@@ -1223,6 +1223,9 @@ importers:
       '@tmagic/schema':
         specifier: workspace:*
         version: link:../../packages/schema
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
       '@tmagic/vue-container':
         specifier: workspace:*
         version: link:../container
@@ -1241,6 +1244,9 @@ importers:
       '@tmagic/schema':
         specifier: workspace:*
         version: link:../../packages/schema
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
       '@tmagic/vue-container':
         specifier: workspace:*
         version: link:../container
@@ -2527,18 +2533,6 @@ packages:
   '@sxzz/popperjs-es@2.11.7':
     resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
 
-  '@tmagic/core@1.4.15':
-    resolution: {integrity: sha512-s9FTvE316yIddsCAgBuPC5w7YEmNQUbW3FeQOUHdgTZiCEns3+gWdtaa+8T9FSHrhnUbLdMQsmKux7DJm8MxuA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/data-source': 1.4.15
-      '@tmagic/schema': 1.4.15
-      '@tmagic/utils': 1.4.15
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/core@1.4.19':
     resolution: {integrity: sha512-+bnuHypmODdbp4Wmwpu0eBMBo4mqkt8c8ysd2P0686KiYgoiWJq6Sq6L9vM9HoRugk8wliksGgmKpQD1f3f9MA==}
     engines: {node: '>=18'}
@@ -2562,17 +2556,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/dep@1.4.15':
-    resolution: {integrity: sha512-/DOMiZBxU7TP8LLpHA9mp5OZnqZ7HA7CEA9VJjeifckid5ntpvmJHC6HD3WLheknwqmurDSY01oPCBy14aVMew==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/schema': 1.4.15
-      '@tmagic/utils': 1.4.15
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/dep@1.4.19':
     resolution: {integrity: sha512-8nr+Bv4U9y/NjM1JpA4NyoVMbiKZhH05TCNTJpJs642g40Bn4yZQA6DY3UtMjXsjSIRB6VqC/jd89lfgv/wzqw==}
     engines: {node: '>=18'}
@@ -2594,23 +2577,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/editor@1.4.15':
-    resolution: {integrity: sha512-5QQmDXuxPh91ZZ+NIcnBnIO38cVeGNHMj/XTqj7ud5ZtT+topKEvuh3EOwN5zTCmkDE97xbGjHpfHqtThqqWJw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/core': 1.4.15
-      '@tmagic/design': 1.4.15
-      '@tmagic/form': 1.4.15
-      '@tmagic/schema': 1.4.15
-      '@tmagic/stage': 1.4.15
-      '@tmagic/utils': 1.4.15
-      monaco-editor: ^0.48.0
-      typescript: '*'
-      vue: ^3.4.27
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/editor@1.4.19':
     resolution: {integrity: sha512-dhQrMxmzoByqpPZwKyKdZKSDH85cVVNS63DohvwmPN2RGw6ehqQrj6yXhXwhSGIEBL4K/Fhqm/P9QAPSusm4QQ==}
     engines: {node: '>=18'}
@@ -2639,18 +2605,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/form@1.4.15':
-    resolution: {integrity: sha512-w1vm4Yo/qgWCwy5gmOMiX4RTjMIxqBTc2vACt1kdYA969ablPzRzdOxAH/RZyfKX3Uq2lBpI8OtQ/EEKuAwlrA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/design': 1.4.15
-      '@tmagic/utils': 1.4.15
-      typescript: '*'
-      vue: ^3.4.27
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/form@1.4.19':
     resolution: {integrity: sha512-oqT4rXjADgjpi8dvvFGDHFwHHLc/EdeIOFfXwBMzTk7K5/2y2VrkNvZuhlUbGpszOTYwPponED6Xrfl9wcFdrA==}
     engines: {node: '>=18'}
@@ -2663,15 +2617,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/schema@1.4.15':
-    resolution: {integrity: sha512-AR+z2Pzu81fLZsg4SXZlwoR7/yExEcx5r9VfYJxWdIZtx8dGDGAYZ0vRGneMQJwaydG9empvRDlBabw0h7yNXg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/schema@1.4.19':
     resolution: {integrity: sha512-JvlqseW6WMGRQUPgiwZC8F1R4SMGwU2tgtGXijxwan6fNmEbXQlvTTfCqQbYnarzQlaVN/W0DIcdxp251lrXOw==}
     engines: {node: '>=18'}
@@ -2681,18 +2626,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/stage@1.4.15':
-    resolution: {integrity: sha512-JfvdUWYXflf9lAjTyNu+V5ZCtey3/0iJLG7iAcoR+4GSiHG6w6ByymuDz0qtpVWMXGSyKTaaaxdnbhRYHrMwbg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/core': 1.4.15
-      '@tmagic/schema': 1.4.15
-      '@tmagic/utils': 1.4.15
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/stage@1.4.19':
     resolution: {integrity: sha512-d9w0Q1faJirv1iX8OCaXKpIPxNDODwpgdheUI2yGS44VGEY49F3lW+80KKHitldlpl9Jh4rlwMfb0bWww9Xehw==}
     engines: {node: '>=18'}
@@ -2705,19 +2638,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/table@1.4.15':
-    resolution: {integrity: sha512-ilhG3XOuvqtJHpa+ZRukKsdigfZP49dZIXVhghbJ4VcuQJfyu2ema1LKIvyi1X1dSHxuVyp+hYdmQI8T1FiTiA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/design': 1.4.15
-      '@tmagic/form': 1.4.15
-      '@tmagic/utils': 1.4.15
-      typescript: '*'
-      vue: ^3.4.27
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/table@1.4.19':
     resolution: {integrity: sha512-ygLjTx+S5ekDwZ+Qsf2QBGCyKlr7SO6anYwfcjPRbXxnvRSt3/c6/UqruCklLFyfsQuH7TY+ZJ6ia6Z0tiD8eA==}
     engines: {node: '>=18'}
@@ -2785,16 +2705,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/utils@1.4.15':
-    resolution: {integrity: sha512-J1KP19IAx8FwP1g9HPeh1DJq8AgYYPxpFKyFrlGdXOaFVM2BMBDoM5l2Y/A6hwTNIVbTtYnKbnSbNyHEBEK50A==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/schema': 1.4.15
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/utils@1.4.19':
     resolution: {integrity: sha512-0jM+0UOiGmLWYj0cHTMqo1BawmA63oZDbanzNhEWhwhNJ+wUFbWadvCc8qOithXShVW9tw2BNCzbPyx5kr6eIQ==}
     engines: {node: '>=18'}
@@ -7687,16 +7597,6 @@ snapshots:
 
   '@sxzz/popperjs-es@2.11.7': {}
 
-  '@tmagic/core@1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
-    dependencies:
-      '@tmagic/data-source': 1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-      events: 3.3.0
-      lodash-es: 4.17.21
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/core@1.4.19(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
       '@tmagic/data-source': 1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
@@ -7707,17 +7607,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
-    dependencies:
-      '@tmagic/dep': 1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-      deep-state-observer: 5.5.13
-      events: 3.3.0
-      lodash-es: 4.17.21
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/data-source@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
       '@tmagic/dep': 1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
@@ -7729,20 +7618,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/dep@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
-    dependencies:
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-
-  '@tmagic/dep@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
-    dependencies:
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/dep@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
       '@tmagic/schema': 1.4.19(typescript@5.5.4)
@@ -7756,32 +7631,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/editor@1.4.15(4pfl54jklxllvwdrflyhgd4dtm)':
-    dependencies:
-      '@element-plus/icons-vue': 2.3.1(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/core': 1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/dep': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/design': 1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/form': 1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      '@tmagic/stage': 1.4.15(@tmagic/core@1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)
-      '@tmagic/table': 1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-      buffer: 6.0.3
-      color: 3.2.1
-      emmet-monaco-es: 5.4.0(monaco-editor@0.48.0)
-      events: 3.3.0
-      gesto: 1.19.4
-      keycon: 1.4.0
-      lodash-es: 4.17.21
-      monaco-editor: 0.48.0
-      moveable: 0.53.0
-      serialize-javascript: 6.0.2
-      sortablejs: 1.15.2
-      vue: 3.4.35(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/editor@1.4.19(or2c77hbsho5lo4gy2ohkvwsn4)':
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.35(typescript@5.5.4))
@@ -7815,17 +7664,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/form@1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
-    dependencies:
-      '@element-plus/icons-vue': 2.3.1(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/design': 1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-      lodash-es: 4.17.21
-      sortablejs: 1.15.2
-      vue: 3.4.35(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/form@1.4.19(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.35(typescript@5.5.4))
@@ -7838,30 +7676,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/schema@1.4.15(typescript@5.5.4)':
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/schema@1.4.19(typescript@5.5.4)':
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/stage@1.4.15(@tmagic/core@1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)':
-    dependencies:
-      '@scena/guides': 0.29.2
-      '@tmagic/core': 1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-      events: 3.3.0
-      keycon: 1.4.0
-      lodash-es: 4.17.21
-      moveable: 0.53.0
-      moveable-helper: 0.4.0(scenejs@1.10.3)
-    optionalDependencies:
-      typescript: 5.5.4
-    transitivePeerDependencies:
-      - scenejs
-
   '@tmagic/stage@1.4.19(@tmagic/core@1.4.19(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.19(typescript@5.5.4))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(scenejs@1.10.3)(typescript@5.5.4)':
     dependencies:
       '@scena/guides': 0.29.2
@@ -7878,16 +7696,6 @@ snapshots:
     transitivePeerDependencies:
       - scenejs
 
-  '@tmagic/table@1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
-    dependencies:
-      '@tmagic/design': 1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/form': 1.4.15(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/utils': 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
-      lodash-es: 4.17.21
-      vue: 3.4.35(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/table@1.4.19(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.4.19(@tmagic/design@1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@tmagic/design': 1.4.19(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
@@ -7941,14 +7749,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)':
-    dependencies:
-      '@tmagic/schema': 1.4.15(typescript@5.5.4)
-      dayjs: 1.11.12
-      lodash-es: 4.17.21
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/utils@1.4.19(@tmagic/schema@1.4.19(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
       '@tmagic/schema': 1.4.19(typescript@5.5.4)

runtime/react/playground/main.tsx

@@ -25,7 +25,7 @@ import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
 import type { MApp } from '@tmagic/schema';
 import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
 import { AppContent } from '@tmagic/ui-react';
-import { replaceChildNode } from '@tmagic/utils';
+import { getElById, replaceChildNode } from '@tmagic/utils';
 
 import components from '../.tmagic/comp-entry';
 import dataSources from '../.tmagic/datasource-entry';
@@ -101,12 +101,12 @@ const operations = {
   },
 
   select(id: string) {
-    const el = document.getElementById(id);
+    const el = getElById()(id);
     if (el) return el;
     // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
     return new Promise((resolve) => {
       setTimeout(() => {
-        resolve(document.getElementById(id));
+        resolve(getElById()(document, id));
       }, 0);
     });
   },

runtime/tmagic-form/package.json

@@ -32,12 +32,12 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "peerDependencies": {
-    "@tmagic/core": ">=1.4.8",
+    "@tmagic/core": "workspace:*",
-    "@tmagic/editor": ">=1.4.8",
+    "@tmagic/editor": "workspace:*",
-    "@tmagic/form": ">=1.4.8",
+    "@tmagic/form": "workspace:*",
-    "@tmagic/utils": ">=1.4.8",
+    "@tmagic/utils": "workspace:*",
-    "@tmagic/schema": ">=1.4.8",
+    "@tmagic/schema": "workspace:*",
-    "@tmagic/stage": ">=1.4.8",
+    "@tmagic/stage": "workspace:*",
     "element-plus": ">=2.7.5",
     "vue": ">=3.4.27"
   },

runtime/tmagic-form/src/useFormConfig.ts

@@ -4,7 +4,7 @@ import Core from '@tmagic/core';
 import { type FormConfig, initValue, MForm } from '@tmagic/form';
 import type { Id, MApp, MNode } from '@tmagic/schema';
 import type { RemoveData, UpdateData } from '@tmagic/stage';
-import { getNodePath, replaceChildNode } from '@tmagic/utils';
+import { getElById, getNodePath, replaceChildNode } from '@tmagic/utils';
 
 import { AppProps } from './types';
 
@@ -67,10 +67,10 @@ export const useFormConfig = (props: AppProps) => {
           this.updatePageId?.(id);
         }
 
-        const el = document.getElementById(`${id}`);
+        const el = getElById()(document, `${id}`);
         if (el) return el;
         // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-        return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+        return nextTick().then(() => getElById()(document, `${id}`) as HTMLElement);
       },
 
       add({ config, parentId }: UpdateData) {

runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts

@@ -3,7 +3,7 @@ import { computed, nextTick, reactive, ref, watch } from 'vue-demi';
 import Core from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/schema';
 import type { Magic, RemoveData, UpdateData } from '@tmagic/stage';
-import { getNodePath, replaceChildNode } from '@tmagic/utils';
+import { getElById, getNodePath, replaceChildNode } from '@tmagic/utils';
 
 declare global {
   interface Window {
@@ -48,10 +48,10 @@ export const useEditorDsl = (app: Core | undefined, win = window) => {
         this.updatePageId?.(id);
       }
 
-      const el = document.getElementById(`${id}`);
+      const el = getElById()(document, `${id}`);
       if (el) return el;
       // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-      return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+      return nextTick().then(() => getElById()(document, `${id}`));
     },
 
     add({ config, parentId }: UpdateData) {

vue-components/container/src/Container.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="display(config)"
-    :id="`${config.id}`"
+    :data-tmagic-id="`${config.id}`"
-    :data-iterator-index="iteratorIndex"
+    :data-tmagic-iterator-index="iteratorIndex"
-    :data-iterator-container-id="iteratorContainerId"
+    :data-tmagic-iterator-container-id="iteratorContainerId"
     :class="className"
     :style="app?.transformStyle(config.style || {})"
   >
@@ -13,10 +13,10 @@
           v-if="display(item)"
           :key="item.id"
           :is="`magic-ui-${toLine(item.type)}`"
-          :id="item.id"
+          :data-tmagic-id="item.id"
-          :data-container-index="index"
+          :data-tmagic-container-index="index"
-          :data-iterator-index="iteratorIndex"
+          :data-tmagic-iterator-index="iteratorIndex"
-          :data-iterator-container-id="iteratorContainerId"
+          :data-tmagic-iterator-container-id="iteratorContainerId"
           :class="`${item.className || ''}`"
           :style="app?.transformStyle(item.style || {})"
           :config="{ ...item, [IS_DSL_NODE_KEY]: true }"

vue-components/container/src/formConfig.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { getElById } from '@tmagic/utils';
+
 export default [
   {
     name: 'layout',
@@ -31,7 +33,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

vue-components/iterator-container/src/IteratorContainer.vue

@@ -1,13 +1,13 @@
 <template>
   <div
     class="magic-ui-iterator-container"
-    :data-iterator-index="dataIteratorIndex"
+    :data-iterator-index="dataTmagicIteratorIndex"
-    :data-iterator-container-id="dataIteratorContainerId"
+    :data-iterator-container-id="dataTmagicIteratorContainerId"
   >
     <TMagicContainer
       v-for="(item, index) in configs"
-      :iterator-index="[...(dataIteratorIndex || []), index]"
+      :iterator-index="[...(dataTmagicIteratorIndex || []), index]"
-      :iterator-container-id="[...(dataIteratorContainerId || []), config.id]"
+      :iterator-container-id="[...(dataTmagicIteratorContainerId || []), config.id]"
       :key="index"
       :config="item"
     ></TMagicContainer>
@@ -32,8 +32,8 @@ export default defineComponent({
       type: Object as PropType<MIteratorContainer>,
       required: true,
     },
-    dataIteratorIndex: Array as PropType<number[]>,
+    dataTmagicIteratorIndex: Array as PropType<number[]>,
-    dataIteratorContainerId: Array as PropType<Id[]>,
+    dataTmagicIteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -43,8 +43,8 @@ export default defineComponent({
   setup(props) {
     const { app } = useApp({
       config: props.config,
-      iteratorContainerId: props.dataIteratorContainerId,
+      iteratorContainerId: props.dataTmagicIteratorContainerId,
-      iteratorIndex: props.dataIteratorIndex,
+      iteratorIndex: props.dataTmagicIteratorIndex,
       methods: {},
     });
 
@@ -72,8 +72,8 @@ export default defineComponent({
             itemData,
             items,
             dsField,
-            props.dataIteratorContainerId,
+            props.dataTmagicIteratorContainerId,
-            props.dataIteratorIndex,
+            props.dataTmagicIteratorIndex,
           ) ?? items;
 
         return {
@@ -96,8 +96,8 @@ export default defineComponent({
       (configs) => {
         const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
           props.config.id,
-          props.dataIteratorContainerId,
+          props.dataTmagicIteratorContainerId,
-          props.dataIteratorIndex,
+          props.dataTmagicIteratorIndex,
         );
 
         if (!iteratorContainerNode) {

vue-components/page-fragment/package.json

@@ -17,6 +17,7 @@
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
     "@tmagic/schema": "workspace:*",
     "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",

vue-components/page-fragment/src/formConfig.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { getElById } from '@tmagic/utils';
+
 export default [
   {
     text: '页面片标识',
@@ -40,7 +42,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

vue-components/page/package.json

@@ -17,6 +17,7 @@
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
     "@tmagic/schema": "workspace:*",
     "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",

vue-components/page/src/formConfig.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { getElById } from '@tmagic/utils';
+
 export default [
   {
     text: '页面标识',
@@ -42,7 +44,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }