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

2025-04-05 19:41:40 +08:00 · 2024-08-12 16:38:00 +08:00 · 2024-08-12 16:38:00 +08:00 · 9e4da0a5c2
commit 9e4da0a5c2
parent b00e7aec13
45 changed files with 231 additions and 350 deletions
--- a/packages/core/src/EventHelper.ts
+++ b/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,
-    element.dataset.iteratorContainerId?.split(','),
-    element.dataset.iteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
+    id,
+    element.dataset.tmagicIteratorContainerId?.split(','),
+    element.dataset.tmagicIteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
  );

  return node;
--- a/packages/editor/src/editorProps.ts
+++ b/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: () => ({}),
 };
--- a/packages/editor/src/fields/UISelect.vue
+++ b/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 }) => {
-  if (detail.id) {
-    props.model[props.name] = detail.id;
-    emit('change', detail.id);
-    mForm?.$emit('field-change', props.prop, detail.id);
+const clickHandler = ({ detail }: Event & { detail: HTMLElement }) => {
+  const id = getIdFromEl()(detail);
+  if (id) {
+    props.model[props.name] = 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);
-  services?.editorService.get('stage')?.select(id);
-  services?.stageOverlayService.get('stage')?.select(id);
+  if (!services) return;
+  await services.editorService.select(id);
+  services.editorService.get('stage')?.select(id);
+  services.stageOverlayService.get('stage')?.select(id);
 };

 const highlight = throttle((id: Id) => {
-  services?.editorService.highlight(id);
-  services?.editorService.get('stage')?.highlight(id);
-  services?.stageOverlayService.get('stage')?.highlight(id);
+  if (!services) return;
+  services.editorService.highlight(id);
+  services.editorService.get('stage')?.highlight(id);
+  services.stageOverlayService.get('stage')?.highlight(id);
 }, 150);

 const unhighlight = () => {
-  services?.editorService.set('highlightNode', null);
-  services?.editorService.get('stage')?.clearHighlight();
-  services?.stageOverlayService.get('stage')?.clearHighlight();
+  if (!services) return;
+  services.editorService.set('highlightNode', null);
+  services.editorService.get('stage')?.clearHighlight();
+  services.stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>

--- a/packages/editor/src/hooks/use-stage.ts
+++ b/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;
-    editorService.select(el.id);
+    const id = getIdFromEl()(el);
+    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[]);
  });

--- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+++ b/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;

--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/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) {
-    parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+  const parentId = getIdFromEl()(parentEl);
+  if (parentId) {
+    parent = services?.editorService.getNodeById(parentId, false) as MContainer;
  }

  if (parent && stageContainer.value && stage) {
--- a/packages/editor/src/services/editor.ts
+++ b/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);
--- a/packages/editor/src/services/stageOverlay.ts
+++ b/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);
    }
  }

--- a/packages/editor/src/utils/editor.ts
+++ b/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 parentEl = doc.getElementById(`${parent.id}`);
+  const el = getElById()(doc, `${config.id}`);
+  const parentEl = getElById()(doc, `${parent.id}`);

  const left = Number(config.style?.left) || 0;
  if (el && parentEl) {
--- a/packages/editor/src/utils/index.ts
+++ b/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';
--- a/packages/editor/src/utils/operator.ts
+++ b/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);
--- a/packages/stage/src/ActionManager.ts
+++ b/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) {
--- a/packages/stage/src/DragResizeHelper.ts
+++ b/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) {
-        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      const el = child as HTMLElement;
+      const id = getId(el);
+      if (id) {
+        setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
      }

      if (child.children.length) {
--- a/packages/stage/src/StageCore.ts
+++ b/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);
--- a/packages/stage/src/StageDragResize.ts
+++ b/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,
-        dist: this.target.id,
+          src: id,
+          dist: id,
        });
    }
  }
--- a/packages/stage/src/StageMultiDragResize.ts
+++ b/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);
        }
      });
  }
--- a/packages/stage/src/StageRender.ts
+++ b/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);
  }

  /**
--- a/packages/stage/src/TargetShadow.ts
+++ b/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);
    }

--- a/packages/ui-react/src/button/Button.tsx
+++ b/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,
--- a/packages/ui-react/src/container/Container.tsx
+++ b/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}` : ''}`}
--- a/packages/ui-react/src/container/formConfig.ts
+++ b/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;
        }
--- a/packages/ui-react/src/img/Img.tsx
+++ b/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}
    />
--- a/packages/ui-react/src/iterator-container/src/IteratorContainer.tsx
+++ b/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 || {})}
    >
--- a/packages/ui-react/src/overlay/Overlay.tsx
+++ b/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>
--- a/packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx
+++ b/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 || {})}
    >
--- a/packages/ui-react/src/page-fragment/src/PageFragment.tsx
+++ b/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}` : ''}`}
--- a/packages/ui-react/src/page-fragment/src/formConfig.ts
+++ b/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;
        }
--- a/packages/ui-react/src/page/Page.tsx
+++ b/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}` : ''}`}
--- a/packages/ui-react/src/page/formConfig.ts
+++ b/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;
        }
--- a/packages/ui-react/src/qrcode/Qrcode.tsx
+++ b/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}
+    />
  );
 };

--- a/packages/ui-react/src/text/Text.tsx
+++ b/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>
  );
--- a/packages/ui/package.json
+++ b/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": {
    "./*": "./*"
--- a/packages/utils/src/dom.ts
+++ b/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}`;
+};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -890,23 +890,23 @@ importers:
  runtime/tmagic-form:
    dependencies:
      '@tmagic/core':
-        specifier: '>=1.4.8'
-        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)
+        specifier: workspace:*
+        version: link:../../packages/core
      '@tmagic/editor':
-        specifier: '>=1.4.8'
-        version: 1.4.15(4pfl54jklxllvwdrflyhgd4dtm)
+        specifier: workspace:*
+        version: link:../../packages/editor
      '@tmagic/form':
-        specifier: '>=1.4.8'
-        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))
+        specifier: workspace:*
+        version: link:../../packages/form
      '@tmagic/schema':
-        specifier: '>=1.4.8'
-        version: 1.4.15(typescript@5.5.4)
+        specifier: workspace:*
+        version: link:../../packages/schema
      '@tmagic/stage':
-        specifier: '>=1.4.8'
-        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)
+        specifier: workspace:*
+        version: link:../../packages/stage
      '@tmagic/utils':
-        specifier: '>=1.4.8'
-        version: 1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4)
+        specifier: workspace:*
+        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)
--- a/runtime/react/playground/main.tsx
+++ b/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);
    });
  },
--- a/runtime/tmagic-form/package.json
+++ b/runtime/tmagic-form/package.json
@ -32,12 +32,12 @@
    "url": "https://github.com/Tencent/tmagic-editor.git"
  },
  "peerDependencies": {
-    "@tmagic/core": ">=1.4.8",
-    "@tmagic/editor": ">=1.4.8",
-    "@tmagic/form": ">=1.4.8",
-    "@tmagic/utils": ">=1.4.8",
-    "@tmagic/schema": ">=1.4.8",
-    "@tmagic/stage": ">=1.4.8",
+    "@tmagic/core": "workspace:*",
+    "@tmagic/editor": "workspace:*",
+    "@tmagic/form": "workspace:*",
+    "@tmagic/utils": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/stage": "workspace:*",
    "element-plus": ">=2.7.5",
    "vue": ">=3.4.27"
  },
--- a/runtime/tmagic-form/src/useFormConfig.ts
+++ b/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) {
--- a/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
+++ b/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) {
--- a/vue-components/container/src/Container.vue
+++ b/vue-components/container/src/Container.vue
@ -1,9 +1,9 @@
 <template>
  <div
    v-if="display(config)"
-    :id="`${config.id}`"
-    :data-iterator-index="iteratorIndex"
-    :data-iterator-container-id="iteratorContainerId"
+    :data-tmagic-id="`${config.id}`"
+    :data-tmagic-iterator-index="iteratorIndex"
+    :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-container-index="index"
-          :data-iterator-index="iteratorIndex"
-          :data-iterator-container-id="iteratorContainerId"
+          :data-tmagic-id="item.id"
+          :data-tmagic-container-index="index"
+          :data-tmagic-iterator-index="iteratorIndex"
+          :data-tmagic-iterator-container-id="iteratorContainerId"
          :class="`${item.className || ''}`"
          :style="app?.transformStyle(item.style || {})"
          :config="{ ...item, [IS_DSL_NODE_KEY]: true }"
--- a/vue-components/container/src/formConfig.ts
+++ b/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;
        }
--- a/vue-components/iterator-container/src/IteratorContainer.vue
+++ b/vue-components/iterator-container/src/IteratorContainer.vue
@ -1,13 +1,13 @@
 <template>
  <div
    class="magic-ui-iterator-container"
-    :data-iterator-index="dataIteratorIndex"
-    :data-iterator-container-id="dataIteratorContainerId"
+    :data-iterator-index="dataTmagicIteratorIndex"
+    :data-iterator-container-id="dataTmagicIteratorContainerId"
  >
    <TMagicContainer
      v-for="(item, index) in configs"
-      :iterator-index="[...(dataIteratorIndex || []), index]"
-      :iterator-container-id="[...(dataIteratorContainerId || []), config.id]"
+      :iterator-index="[...(dataTmagicIteratorIndex || []), index]"
+      :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[]>,
-    dataIteratorContainerId: Array as PropType<Id[]>,
+    dataTmagicIteratorIndex: Array as PropType<number[]>,
+    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,
-      iteratorIndex: props.dataIteratorIndex,
+      iteratorContainerId: props.dataTmagicIteratorContainerId,
+      iteratorIndex: props.dataTmagicIteratorIndex,
      methods: {},
    });

@ -72,8 +72,8 @@ export default defineComponent({
            itemData,
            items,
            dsField,
-            props.dataIteratorContainerId,
-            props.dataIteratorIndex,
+            props.dataTmagicIteratorContainerId,
+            props.dataTmagicIteratorIndex,
          ) ?? items;

        return {
@ -96,8 +96,8 @@ export default defineComponent({
      (configs) => {
        const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
          props.config.id,
-          props.dataIteratorContainerId,
-          props.dataIteratorIndex,
+          props.dataTmagicIteratorContainerId,
+          props.dataTmagicIteratorIndex,
        );

        if (!iteratorContainerNode) {
--- a/vue-components/page-fragment/package.json
+++ b/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:*",
--- a/vue-components/page-fragment/src/formConfig.ts
+++ b/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;
        }
--- a/vue-components/page/package.json
+++ b/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:*",
--- a/vue-components/page/src/formConfig.ts
+++ b/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;
        }