From 60d2b64aa5a321c0b3d8845e5862673d20c8d83d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 13 Aug 2024 20:24:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BF=AD=E4=BB=A3=E5=99=A8=E5=86=85?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E4=BA=86=E5=A3=B0?=
 =?UTF-8?q?=E6=98=8E=E5=91=A8=E6=9C=9F=E4=BB=A3=E7=A0=81=E5=9D=97=E6=97=A0?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/data-source/src/DataSourceManager.ts | 21 ++----
 packages/schema/src/index.ts                  |  5 ++
 packages/utils/src/index.ts                   |  5 +-
 runtime/vue-runtime-help/package.json         |  2 +-
 .../src/{useApp.ts => hooks/use-app.ts}       | 14 ++--
 runtime/vue-runtime-help/src/index.ts         |  2 +-
 vue-components/button/src/index.vue           | 15 ++--
 vue-components/container/src/Container.vue    | 33 ++++++---
 vue-components/img/src/index.vue              | 15 ++--
 .../iterator-container/package.json           |  1 -
 .../src/IteratorContainer.vue                 | 72 +++++++++----------
 vue-components/overlay/package.json           |  1 -
 vue-components/overlay/src/index.vue          | 20 +++---
 vue-components/overlay/src/initValue.ts       |  1 +
 .../page-fragment-container/package.json      |  1 -
 .../src/PageFragmentContainer.vue             | 25 ++++---
 vue-components/page-fragment/package.json     |  1 -
 .../page-fragment/src/PageFragment.vue        | 18 +++--
 vue-components/page/package.json              |  1 -
 vue-components/page/src/index.vue             | 13 ++--
 vue-components/qrcode/src/index.vue           | 16 ++++-
 vue-components/text/src/index.vue             | 14 +++-
 22 files changed, 163 insertions(+), 133 deletions(-)
 rename runtime/vue-runtime-help/src/{useApp.ts => hooks/use-app.ts} (75%)

diff --git a/packages/data-source/src/DataSourceManager.ts b/packages/data-source/src/DataSourceManager.ts
index 4007c961..433421b2 100644
--- a/packages/data-source/src/DataSourceManager.ts
+++ b/packages/data-source/src/DataSourceManager.ts
@@ -20,7 +20,7 @@ import EventEmitter from 'events';
 
 import { cloneDeep } from 'lodash-es';
 
-import type { default as TMagicApp, IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
+import type { default as TMagicApp } from '@tmagic/core';
 import type { DataSourceSchema, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/schema';
 import { compiledNode } from '@tmagic/utils';
 
@@ -227,7 +227,7 @@ class DataSourceManager extends EventEmitter {
    * @returns {boolean}是否显示
    */
   public compliedIteratorItemConds(
-    itemData: any[],
+    itemData: any,
     node: { [NODE_CONDS_KEY]?: DisplayCond[] },
     dataSourceField: string[] = [],
   ) {
@@ -239,23 +239,10 @@ class DataSourceManager extends EventEmitter {
     return compliedConditions(node, ctxData);
   }
 
-  public compliedIteratorItems(
-    nodeId: Id,
-    itemData: any,
-    nodes: MNode[],
-    dataSourceField: string[] = [],
-    dataIteratorContainerId?: Id[],
-    dataIteratorIndex?: number[],
-  ) {
-    const iteratorContainer = this.app.getNode<TMagicIteratorContainer>(
-      nodeId,
-      dataIteratorContainerId,
-      dataIteratorIndex,
-    );
-
+  public compliedIteratorItems(itemData: any, nodes: MNode[], dataSourceField: string[] = []): MNode[] {
     const [dsId, ...keys] = dataSourceField;
     const ds = this.get(dsId);
-    if (!ds || !iteratorContainer) return nodes;
+    if (!ds) return nodes;
 
     const ctxData = createIteratorContentData(itemData, ds.id, keys, this.data);
 
diff --git a/packages/schema/src/index.ts b/packages/schema/src/index.ts
index 0974ba97..93f07227 100644
--- a/packages/schema/src/index.ts
+++ b/packages/schema/src/index.ts
@@ -206,6 +206,11 @@ export interface PastePosition {
 
 export type MNode = MComponent | MContainer | MIteratorContainer | MPage | MApp | MPageFragment;
 
+export interface MNodeInstance extends Omit<MNode, 'id'> {
+  id?: Id;
+  type?: string;
+}
+
 export enum HookType {
   /** 代码块钩子标识 */
   CODE = 'code',
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 115054cc..89134869 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -20,7 +20,7 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep, set as objectSet } from 'lodash-es';
 
-import type { DataSchema, DataSourceDeps, Id, MComponent, MNode } from '@tmagic/schema';
+import type { DataSchema, DataSourceDeps, Id, MComponent, MNode, MNodeInstance } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 
 export * from './dom';
@@ -449,3 +449,6 @@ export const addParamToUrl = (obj: Record<string, any>, global = globalThis, nee
 };
 
 export const dataSourceTemplateRegExp = /\$\{([\s\S]+?)\}/g;
+
+export const isDslNode = (config: MNodeInstance) =>
+  typeof config[IS_DSL_NODE_KEY] === 'undefined' || config[IS_DSL_NODE_KEY] === true;
diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json
index 5c20f54c..3437ce18 100644
--- a/runtime/vue-runtime-help/package.json
+++ b/runtime/vue-runtime-help/package.json
@@ -7,7 +7,7 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./*": "./*"
diff --git a/runtime/vue-runtime-help/src/useApp.ts b/runtime/vue-runtime-help/src/hooks/use-app.ts
similarity index 75%
rename from runtime/vue-runtime-help/src/useApp.ts
rename to runtime/vue-runtime-help/src/hooks/use-app.ts
index 34329cc8..04111342 100644
--- a/runtime/vue-runtime-help/src/useApp.ts
+++ b/runtime/vue-runtime-help/src/hooks/use-app.ts
@@ -19,10 +19,10 @@
 import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
-import type { Id, MNode } from '@tmagic/schema';
-import { IS_DSL_NODE_KEY } from '@tmagic/utils';
+import type { Id, MNodeInstance } from '@tmagic/schema';
+import { isDslNode } from '@tmagic/utils';
 
-interface UseAppOptions<T extends MNode = MNode> {
+interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
   config: T;
   iteratorContainerId?: Id[];
   iteratorIndex?: number[];
@@ -31,9 +31,7 @@ interface UseAppOptions<T extends MNode = MNode> {
   };
 }
 
-const isDslNode = (config: MNode) => typeof config[IS_DSL_NODE_KEY] === 'undefined' || config[IS_DSL_NODE_KEY] === true;
-
-export default ({ methods, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
+export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
   const app: TMagicApp | undefined = inject('app');
 
   const emitData = {
@@ -41,7 +39,7 @@ export default ({ methods, config, iteratorContainerId, iteratorIndex }: UseAppO
     ...methods,
   };
 
-  const display = <T extends MNode>(config: T) => {
+  const display = <T extends MNodeInstance>(config: T) => {
     if (config.visible === false) return false;
     if (config.condResult === false) return false;
 
@@ -54,7 +52,7 @@ export default ({ methods, config, iteratorContainerId, iteratorIndex }: UseAppO
     return displayCfg !== false;
   };
 
-  const node = isDslNode(config) ? app?.getNode(config.id || '', iteratorContainerId, iteratorIndex) : undefined;
+  const node = isDslNode(config) && config.id ? app?.getNode(config.id, iteratorContainerId, iteratorIndex) : undefined;
 
   if (node) {
     node.emit('created', emitData);
diff --git a/runtime/vue-runtime-help/src/index.ts b/runtime/vue-runtime-help/src/index.ts
index f3f9685c..2898095d 100644
--- a/runtime/vue-runtime-help/src/index.ts
+++ b/runtime/vue-runtime-help/src/index.ts
@@ -1,3 +1,3 @@
 export * from './hooks/use-editor-dsl';
 export * from './hooks/use-dsl';
-export { default as useApp } from './useApp';
+export * from './hooks/use-app';
diff --git a/vue-components/button/src/index.vue b/vue-components/button/src/index.vue
index 72c27a35..5e27a758 100644
--- a/vue-components/button/src/index.vue
+++ b/vue-components/button/src/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <button class="magic-ui-button">
+  <button>
     <slot>
-      <p>{{ config?.text || '' }}</p>
+      {{ config?.text || '' }}
     </slot>
   </button>
 </template>
@@ -9,11 +9,12 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MComponent } from '@tmagic/schema';
+import type { Id, MComponent } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
-interface ButtonSchema extends MComponent {
-  type: 'button';
+interface ButtonSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'button';
   text: string;
 }
 
@@ -23,6 +24,8 @@ export default defineComponent({
       type: Object as PropType<ButtonSchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -33,6 +36,8 @@ export default defineComponent({
     useApp({
       config: props.config,
       methods: {},
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
     });
   },
 });
diff --git a/vue-components/container/src/Container.vue b/vue-components/container/src/Container.vue
index 0ba3715e..d4072e3e 100644
--- a/vue-components/container/src/Container.vue
+++ b/vue-components/container/src/Container.vue
@@ -1,12 +1,5 @@
 <template>
-  <div
-    v-if="display(config)"
-    :data-tmagic-id="`${config.id}`"
-    :data-tmagic-iterator-index="iteratorIndex"
-    :data-tmagic-iterator-container-id="iteratorContainerId"
-    :class="className"
-    :style="app?.transformStyle(config.style || {})"
-  >
+  <div v-if="display(config)" :class="className" :style="style">
     <slot>
       <template v-for="(item, index) in config.items">
         <component
@@ -14,12 +7,15 @@
           :key="item.id"
           :is="`magic-ui-${toLine(item.type)}`"
           :data-tmagic-id="item.id"
-          :data-tmagic-container-index="index"
           :data-tmagic-iterator-index="iteratorIndex"
           :data-tmagic-iterator-container-id="iteratorContainerId"
-          :class="`${item.className || ''}`"
+          :data-container-index="index"
+          :class="item.className ? `${item.className} magic-ui-${toLine(item.type)}` : `magic-ui-${toLine(item.type)}`"
           :style="app?.transformStyle(item.style || {})"
           :config="{ ...item, [IS_DSL_NODE_KEY]: true }"
+          :container-index="index"
+          :iterator-index="iteratorIndex"
+          :iterator-container-id="iteratorContainerId"
         ></component>
       </template>
     </slot>
@@ -33,10 +29,15 @@ import type { Id, MContainer } from '@tmagic/schema';
 import { IS_DSL_NODE_KEY, toLine } from '@tmagic/utils';
 import { useApp } from '@tmagic/vue-runtime-help';
 
+interface ContainerSchema extends Omit<MContainer, 'id'> {
+  id?: Id;
+  type?: 'container';
+}
+
 export default defineComponent({
   props: {
     config: {
-      type: Object as PropType<MContainer>,
+      type: Object as PropType<ContainerSchema>,
       required: true,
     },
     iteratorIndex: Array as PropType<number[]>,
@@ -50,6 +51,8 @@ export default defineComponent({
   setup(props) {
     const { display, app } = useApp({
       config: props.config,
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
       methods: {},
     });
 
@@ -64,9 +67,17 @@ export default defineComponent({
       return list.join(' ');
     });
 
+    const style = computed(() => {
+      if (props.config[IS_DSL_NODE_KEY]) {
+        return {};
+      }
+      return app?.transformStyle(props.config.style || {});
+    });
+
     return {
       app,
       className,
+      style,
       IS_DSL_NODE_KEY,
 
       display,
diff --git a/vue-components/img/src/index.vue b/vue-components/img/src/index.vue
index 77556625..787de911 100644
--- a/vue-components/img/src/index.vue
+++ b/vue-components/img/src/index.vue
@@ -1,17 +1,18 @@
 <template>
-  <img class="magic-ui-img" :src="config.src" @click="clickHandler" />
+  <img :src="config.src" @click="clickHandler" />
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MComponent } from '@tmagic/schema';
+import type { Id, MComponent } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
-interface ImgSchema extends MComponent {
-  type: 'img';
+interface ImgSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'img';
   src: string;
-  url: string;
+  url?: string;
 }
 
 export default defineComponent({
@@ -20,6 +21,8 @@ export default defineComponent({
       type: Object as PropType<ImgSchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -33,6 +36,8 @@ export default defineComponent({
 
     useApp({
       config: props.config,
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
       methods: {},
     });
 
diff --git a/vue-components/iterator-container/package.json b/vue-components/iterator-container/package.json
index 2b3f413f..87130309 100644
--- a/vue-components/iterator-container/package.json
+++ b/vue-components/iterator-container/package.json
@@ -20,7 +20,6 @@
     "@tmagic/core": "workspace:*",
     "@tmagic/schema": "workspace:*",
     "@tmagic/utils": "workspace:*",
-    "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",
     "@vue/composition-api": ">=1.7.2",
     "typescript": "*",
diff --git a/vue-components/iterator-container/src/IteratorContainer.vue b/vue-components/iterator-container/src/IteratorContainer.vue
index 539e5527..1483e368 100644
--- a/vue-components/iterator-container/src/IteratorContainer.vue
+++ b/vue-components/iterator-container/src/IteratorContainer.vue
@@ -1,16 +1,12 @@
 <template>
-  <div
-    class="magic-ui-iterator-container"
-    :data-iterator-index="dataTmagicIteratorIndex"
-    :data-iterator-container-id="dataTmagicIteratorContainerId"
-  >
-    <TMagicContainer
+  <div>
+    <magic-ui-container
       v-for="(item, index) in configs"
-      :iterator-index="[...(dataTmagicIteratorIndex || []), index]"
-      :iterator-container-id="[...(dataTmagicIteratorContainerId || []), config.id]"
+      :iterator-index="[...(iteratorIndex || []), index]"
+      :iterator-container-id="[...(iteratorContainerId || []), config.id]"
       :key="index"
       :config="item"
-    ></TMagicContainer>
+    ></magic-ui-container>
   </div>
 </template>
 
@@ -18,22 +14,30 @@
 import { computed, defineComponent, type PropType, watch } from 'vue-demi';
 
 import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
-import { type Id, type MIteratorContainer, NodeType } from '@tmagic/schema';
-import TMagicContainer from '@tmagic/vue-container';
+import type { Id, MIteratorContainer, MNode } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
-  components: {
-    TMagicContainer,
-  },
+interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
+  id?: Id;
+  type?: 'iterator-container';
+}
 
+interface IteratorItemSchema {
+  items: MNode[];
+  condResult: boolean;
+  style: {
+    [key: string]: any;
+  };
+}
+
+export default defineComponent({
   props: {
     config: {
-      type: Object as PropType<MIteratorContainer>,
+      type: Object as PropType<IteratorContainerSchema>,
       required: true,
     },
-    dataTmagicIteratorIndex: Array as PropType<number[]>,
-    dataTmagicIteratorContainerId: Array as PropType<Id[]>,
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -43,14 +47,14 @@ export default defineComponent({
   setup(props) {
     const { app } = useApp({
       config: props.config,
-      iteratorContainerId: props.dataTmagicIteratorContainerId,
-      iteratorIndex: props.dataTmagicIteratorIndex,
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
       methods: {},
     });
 
-    const configs = computed(() => {
+    const configs = computed<IteratorItemSchema[]>(() => {
       let { iteratorData = [] } = props.config;
-      const { id, itemConfig, dsField, items } = props.config;
+      const { itemConfig, dsField, items } = props.config;
 
       if (!Array.isArray(iteratorData)) {
         iteratorData = [];
@@ -60,32 +64,22 @@ export default defineComponent({
         iteratorData.push({});
       }
 
-      return iteratorData.map((itemData) => {
+      return iteratorData.map((itemData: any) => {
         const condResult =
           app?.platform !== 'editor'
             ? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
             : true;
 
-        const newItems =
-          app?.dataSourceManager?.compliedIteratorItems(
-            id,
-            itemData,
-            items,
-            dsField,
-            props.dataTmagicIteratorContainerId,
-            props.dataTmagicIteratorIndex,
-          ) ?? items;
+        const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
 
         return {
           items: newItems,
-          id: '',
-          type: NodeType.CONTAINER,
           condResult,
           style: {
-            ...itemConfig.style,
             position: 'relative',
             left: 0,
             top: 0,
+            ...itemConfig.style,
           },
         };
       });
@@ -94,10 +88,14 @@ export default defineComponent({
     watch(
       configs,
       (configs) => {
+        if (!props.config.id) {
+          return;
+        }
+
         const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
           props.config.id,
-          props.dataTmagicIteratorContainerId,
-          props.dataTmagicIteratorIndex,
+          props.iteratorContainerId,
+          props.iteratorIndex,
         );
 
         if (!iteratorContainerNode) {
diff --git a/vue-components/overlay/package.json b/vue-components/overlay/package.json
index d99c4204..42145840 100644
--- a/vue-components/overlay/package.json
+++ b/vue-components/overlay/package.json
@@ -18,7 +18,6 @@
   },
   "peerDependencies": {
     "@tmagic/schema": "workspace:*",
-    "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",
     "vue-demi": ">=0.14.7",
     "typescript": "*"
diff --git a/vue-components/overlay/src/index.vue b/vue-components/overlay/src/index.vue
index 6b4ce4b0..c63fa653 100644
--- a/vue-components/overlay/src/index.vue
+++ b/vue-components/overlay/src/index.vue
@@ -1,30 +1,28 @@
 <template>
-  <TMagicContainer v-if="visible" class="magic-ui-overlay" :config="{ items: config.items }">
+  <magic-ui-container v-if="visible" :config="{ items: config.items }">
     <slot></slot>
-  </TMagicContainer>
+  </magic-ui-container>
 </template>
 
 <script lang="ts">
 import { defineComponent, onBeforeUnmount, type PropType, ref } from 'vue-demi';
 
-import type { MContainer, MNode, MPage } from '@tmagic/schema';
-import TMagicContainer from '@tmagic/vue-container';
+import type { Id, MContainer, MNode, MPage } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
-interface OverlaySchema extends MContainer {
-  type: 'overlay';
+interface OverlaySchema extends Omit<MContainer, 'id'> {
+  id?: Id;
+  type?: 'overlay';
 }
 
 export default defineComponent({
-  components: {
-    TMagicContainer,
-  },
-
   props: {
     config: {
       type: Object as PropType<OverlaySchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -36,6 +34,8 @@ export default defineComponent({
 
     const { app, node } = useApp({
       config: props.config,
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
       methods: {
         openOverlay() {
           visible.value = true;
diff --git a/vue-components/overlay/src/initValue.ts b/vue-components/overlay/src/initValue.ts
index a4c6ffc1..d212deec 100644
--- a/vue-components/overlay/src/initValue.ts
+++ b/vue-components/overlay/src/initValue.ts
@@ -6,6 +6,7 @@ export default {
     top: 0,
     left: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    zIndex: 100,
   },
   items: [],
 };
diff --git a/vue-components/page-fragment-container/package.json b/vue-components/page-fragment-container/package.json
index ecf55261..da6ee003 100644
--- a/vue-components/page-fragment-container/package.json
+++ b/vue-components/page-fragment-container/package.json
@@ -18,7 +18,6 @@
   },
   "peerDependencies": {
     "@tmagic/schema": "workspace:*",
-    "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",
     "typescript": "*"
   },
diff --git a/vue-components/page-fragment-container/src/PageFragmentContainer.vue b/vue-components/page-fragment-container/src/PageFragmentContainer.vue
index 1d3a1c51..44158b2d 100644
--- a/vue-components/page-fragment-container/src/PageFragmentContainer.vue
+++ b/vue-components/page-fragment-container/src/PageFragmentContainer.vue
@@ -1,26 +1,28 @@
 <template>
-  <div :id="`${config.id || ''}`" class="magic-ui-page-fragment-container">
-    <TMagicContainer :config="containerConfig" :model="model"></TMagicContainer>
+  <div>
+    <magic-ui-container
+      :iterator-index="iteratorIndex"
+      :iterator-container-id="iteratorContainerId"
+      :config="containerConfig"
+      :model="model"
+    ></magic-ui-container>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType } from 'vue-demi';
 
-import { type MComponent, type MNode, NodeType } from '@tmagic/schema';
-import TMagicContainer from '@tmagic/vue-container';
+import { type Id, type MComponent, type MNode, NodeType } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
-  components: {
-    TMagicContainer,
-  },
-
   props: {
     config: {
       type: Object as PropType<MComponent>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -31,6 +33,8 @@ export default defineComponent({
     const { app } = useApp({
       config: props.config,
       methods: {},
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
     });
 
     const fragment = computed(() => app?.dsl?.items?.find((page) => page.id === props.config.pageFragmentId));
@@ -42,7 +46,6 @@ export default defineComponent({
       const itemsWithoutId = items.map((item: MNode) => {
         const { id, ...otherConfig } = item;
         return {
-          id: '',
           ...otherConfig,
         };
       });
@@ -51,16 +54,12 @@ export default defineComponent({
         return {
           ...others,
           items: itemsWithoutId,
-          id: '',
-          type: NodeType.CONTAINER,
         };
       }
 
       return {
         ...others,
         items,
-        id: '',
-        type: NodeType.CONTAINER,
       };
     });
 
diff --git a/vue-components/page-fragment/package.json b/vue-components/page-fragment/package.json
index b8280620..3734efa3 100644
--- a/vue-components/page-fragment/package.json
+++ b/vue-components/page-fragment/package.json
@@ -19,7 +19,6 @@
   "peerDependencies": {
     "@tmagic/utils": "workspace:*",
     "@tmagic/schema": "workspace:*",
-    "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",
     "typescript": "*"
   },
diff --git a/vue-components/page-fragment/src/PageFragment.vue b/vue-components/page-fragment/src/PageFragment.vue
index c542153a..9c6b1e16 100644
--- a/vue-components/page-fragment/src/PageFragment.vue
+++ b/vue-components/page-fragment/src/PageFragment.vue
@@ -1,19 +1,19 @@
 <template>
-  <TMagicContainer class="magic-ui-page-fragment" :config="config"></TMagicContainer>
+  <magic-ui-container
+    class="magic-ui-page-fragment"
+    :data-tmagic-id="config.id"
+    :config="config"
+    :style="app?.transformStyle(config.style || {})"
+  ></magic-ui-container>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
 import type { MPageFragment } from '@tmagic/schema';
-import TMagicContainer from '@tmagic/vue-container';
 import { useApp } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
-  components: {
-    TMagicContainer,
-  },
-
   props: {
     config: {
       type: Object as PropType<MPageFragment>,
@@ -26,10 +26,14 @@ export default defineComponent({
   },
 
   setup(props) {
-    useApp({
+    const { app } = useApp({
       config: props.config,
       methods: {},
     });
+
+    return {
+      app,
+    };
   },
 });
 </script>
diff --git a/vue-components/page/package.json b/vue-components/page/package.json
index 547a0bd5..a03c5c10 100644
--- a/vue-components/page/package.json
+++ b/vue-components/page/package.json
@@ -19,7 +19,6 @@
   "peerDependencies": {
     "@tmagic/utils": "workspace:*",
     "@tmagic/schema": "workspace:*",
-    "@tmagic/vue-container": "workspace:*",
     "@tmagic/vue-runtime-help": "workspace:*",
     "typescript": "*"
   },
diff --git a/vue-components/page/src/index.vue b/vue-components/page/src/index.vue
index b01f03ff..db334beb 100644
--- a/vue-components/page/src/index.vue
+++ b/vue-components/page/src/index.vue
@@ -1,19 +1,14 @@
 <template>
-  <TMagicContainer class="magic-ui-page" :config="config"></TMagicContainer>
+  <magic-ui-container class="magic-ui-page" :data-tmagic-id="config.id" :config="config"></magic-ui-container>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
 import type { MPage } from '@tmagic/schema';
-import TMagicContainer from '@tmagic/vue-container';
 import { useApp } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
-  components: {
-    TMagicContainer,
-  },
-
   props: {
     config: {
       type: Object as PropType<MPage>,
@@ -30,10 +25,14 @@ export default defineComponent({
       window.location.reload();
     };
 
-    useApp({
+    const { app } = useApp({
       config: props.config,
       methods: { refresh },
     });
+
+    return {
+      app,
+    };
   },
 });
 </script>
diff --git a/vue-components/qrcode/src/index.vue b/vue-components/qrcode/src/index.vue
index 3dc476d2..71798f35 100644
--- a/vue-components/qrcode/src/index.vue
+++ b/vue-components/qrcode/src/index.vue
@@ -1,20 +1,28 @@
 <template>
-  <img class="magic-ui-qrcode" :src="imgUrl" />
+  <img :src="imgUrl" />
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType, ref, watch } from 'vue-demi';
 import QRCode from 'qrcode';
 
-import type { MComponent } from '@tmagic/schema';
+import type { Id, MComponent } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
+interface QrCodeSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'qrcode';
+  url: string;
+}
+
 export default defineComponent({
   props: {
     config: {
-      type: Object as PropType<MComponent>,
+      type: Object as PropType<QrCodeSchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -40,6 +48,8 @@ export default defineComponent({
     useApp({
       config: props.config,
       methods: {},
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
     });
 
     return {
diff --git a/vue-components/text/src/index.vue b/vue-components/text/src/index.vue
index 19a5db71..cd480fdc 100644
--- a/vue-components/text/src/index.vue
+++ b/vue-components/text/src/index.vue
@@ -5,15 +5,23 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MComponent } from '@tmagic/schema';
+import type { Id, MComponent } from '@tmagic/schema';
 import { useApp } from '@tmagic/vue-runtime-help';
 
+interface TextSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'text';
+  text: string;
+}
+
 export default defineComponent({
   props: {
     config: {
-      type: Object as PropType<MComponent & { type: 'text'; text: string }>,
+      type: Object as PropType<TextSchema>,
       required: true,
     },
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
     model: {
       type: Object,
       default: () => ({}),
@@ -24,6 +32,8 @@ export default defineComponent({
     useApp({
       config: props.config,
       methods: {},
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
     });
   },
 });