From 4f23aebd7f95e2d01535187d50583bec56f5696c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 13 Dec 2024 17:30:48 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=95=99=E7=A8=8B?=
 =?UTF-8?q?=E4=B8=AD=E4=BD=BF=E7=94=A8=E7=9A=84tmagic=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/guide/tutorial/hello-world.md | 14 ++++----------
 docs/guide/tutorial/render.md      |  6 ++----
 docs/guide/tutorial/runtime.md     |  8 ++++----
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/docs/guide/tutorial/hello-world.md b/docs/guide/tutorial/hello-world.md
index 9a9ecd864..b6b2fa7c2 100644
--- a/docs/guide/tutorial/hello-world.md
+++ b/docs/guide/tutorial/hello-world.md
@@ -51,7 +51,7 @@ cd hello-world
 ## 添加依赖
 
 ```bash
-npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tmagic/element-plus-adapter element-plus
+npm install --save @tmagic/editor @tmagic/element-plus-adapter element-plus
 ```
 
 ## 注册组件
@@ -61,25 +61,19 @@ npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tma
 ```ts
 import 'element-plus/dist/index.css';
 import '@tmagic/editor/dist/style.css';
-import '@tmagic/form/dist/style.css';
 
 import { createApp } from 'vue';
 import ElementPlus from 'element-plus';
 
-import TMagicDesign from '@tmagic/design';
 import TMagicEditor from '@tmagic/editor';
 import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter';
-import TMagicForm from '@tmagic/form';
 
 import App from './App.vue';
 
 createApp(App)
   .use(ElementPlus)
-  .use(TMagicDesign, TMagicElementPlusAdapter)
-  .use(TMagicEditor)
-  .use(TMagicForm)
+  .use(TMagicEditor, TMagicElementPlusAdapter)
   .mount('#app');
-
 ```
 
 ## 渲染编辑器
@@ -185,7 +179,7 @@ const render = () => {
 
   createApp(
     {
-      template: '<p v-for="node in config.items" :key="node.id" :id="node.id">hello world</p>',
+      template: '<p v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</p>',
       props: ['config'],
     },
     {
@@ -249,7 +243,7 @@ const render = async ({ renderer }: StageCore) => {
 
   createApp(
     {
-      template: '<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>',
+      template: '<div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>',
       props: ['config'],
     },
     {
diff --git a/docs/guide/tutorial/render.md b/docs/guide/tutorial/render.md
index 6ba9ddf6e..f3fd54250 100644
--- a/docs/guide/tutorial/render.md
+++ b/docs/guide/tutorial/render.md
@@ -4,11 +4,9 @@ tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直
 
 [@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
 
-[@tmagic/ui-vue2](https://www.npmjs.com/package/@tmagic/ui-vue2)
-
 [@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react)
 
-接下来是以vue3为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
+接下来是以vue为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
 
 ## 准备工作
 
@@ -71,7 +69,7 @@ app.component('hello-world', HelloWorld);
 
 ```vue
 <template>
-  <component v-if="config" :is="type" :id="`${id}`" :style="style" :config="config"></component>
+  <component v-if="config" :is="type" :tmagic-data-id="`${id}`" :style="style" :config="config"></component>
 </template>
 
 <script lang=ts setup>
diff --git a/docs/guide/tutorial/runtime.md b/docs/guide/tutorial/runtime.md
index 2423f1713..02ea7c974 100644
--- a/docs/guide/tutorial/runtime.md
+++ b/docs/guide/tutorial/runtime.md
@@ -22,7 +22,7 @@ cd editor-runtime
 按钮需要用的ts types依赖
 
 ```bash
-npm install --save @tmagic/schema @tmagic/stage
+npm install --save @tmagic/core @tmagic/stage
 ```
 
 ## 实现runtime
@@ -33,8 +33,8 @@ npm install --save @tmagic/schema @tmagic/stage
 
 ```vue
 <template>
-  <div v-if="config" :id="config.id" :style="style">
-    <div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>
+  <div v-if="config" :data-tmagic-id="config.id" :style="style">
+    <div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>
   </div>
 </template>
 
@@ -179,8 +179,8 @@ declare global {
 ```
 
 ```ts
+import type { Id, MApp, MNode } from '@tmagic/core';
 import type { RemoveData, UpdateData } from '@tmagic/stage';
-import type { Id, MApp, MNode } from '@tmagic/schema';
 
 const root = ref<MApp>();