diff --git a/.eslintignore b/.eslintignore
index 31f5c478..423fc1bc 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,4 @@
 dist
-admin-dist
 entry-dist
 coverage
 node_modules
diff --git a/docs/src/admin/introduction.md b/docs/src/admin/introduction.md
index 7c29059d..be900115 100644
--- a/docs/src/admin/introduction.md
+++ b/docs/src/admin/introduction.md
@@ -147,7 +147,7 @@ cd tmatic-editor
 npm run build:runtime:admin
 ```
 
-将/runtime/{vue3 | vue2 | react}/admin-dist 中所有文件以及文件夹复制到 /magic/runtime 目录下
+将/runtime/{vue3 | vue2 | react}/dist 中所有文件以及文件夹复制到 /magic/runtime 目录下
 
 上面的操作我们提供了/magic-admin/setup.sh 脚本文件来实现，开发者可以参考该脚本文件来搭建流水线。
 
diff --git a/package.json b/package.json
index 8699d9e0..bddc86ad 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "packageManager": "pnpm@7.1.9",
   "scripts": {
     "bootstrap": "pnpm i && pnpm build",
-    "clean:top": "rimraf */**/dist */**/types */**/admin-dist */**/entry-dist */dist coverage dwt*",
+    "clean:top": "rimraf */**/dist */**/types */dist coverage dwt*",
     "clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
     "clean:all": "pnpm clean:top && pnpm clean:modules",
     "lint": "eslint . --ext .js,.vue,.ts,.tsx",
@@ -18,8 +18,7 @@
     "pg:react": "pnpm playground:react",
     "build": "pnpm --filter \"@tmagic/*\" build",
     "build:runtime:admin": "pnpm --filter \"runtime-*\" build:admin",
-    "build:playground": "pnpm --filter \"runtime-vue3\" --filter \"tmagic-playground\" build",
-    "postbuild:playground": "shx mkdir playground/dist/runtime && shx cp -r runtime/vue3/dist ./playground/dist/runtime/vue3 && cp -r runtime/vue3/entry-dist/* ./playground/dist/runtime/vue3",
+    "build:playground": "pnpm --filter \"runtime-vue3\" build && pnpm --filter \"tmagic-playground\" build",
     "docs": "pnpm --filter \"docs\" dev",
     "build:docs": "pnpm --filter \"docs\" build",
     "reinstall": "pnpm clean:all && pnpm bootstrap",
diff --git a/playground/.env.react b/playground/.env.react
index f6885129..014401fd 100644
--- a/playground/.env.react
+++ b/playground/.env.react
@@ -1 +1,2 @@
-VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react
\ No newline at end of file
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react
+VITE_ENTRY_PATH=./entry/react
\ No newline at end of file
diff --git a/playground/.env.vue2 b/playground/.env.vue2
index 73679984..7afcec37 100644
--- a/playground/.env.vue2
+++ b/playground/.env.vue2
@@ -1 +1,2 @@
-VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2
\ No newline at end of file
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2
+VITE_ENTRY_PATH=./entry/vue2
\ No newline at end of file
diff --git a/playground/.env.vue3 b/playground/.env.vue3
index 780acb19..cb9893e3 100644
--- a/playground/.env.vue3
+++ b/playground/.env.vue3
@@ -1 +1,2 @@
-VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3
\ No newline at end of file
+VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3
+VITE_ENTRY_PATH=./entry/vue3
\ No newline at end of file
diff --git a/playground/.gitignore b/playground/.gitignore
index 53c37a16..b3f4db28 100644
--- a/playground/.gitignore
+++ b/playground/.gitignore
@@ -1 +1,3 @@
-dist
\ No newline at end of file
+dist
+public/entry
+public/runtime
\ No newline at end of file
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 5f1a8d09..583990d8 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -15,23 +15,18 @@
       :stage-rect="stageRect"
     >
       <template #workspace-content>
-        <device-group v-model="stageRect"></device-group>
+        <DeviceGroup v-model="stageRect"></DeviceGroup>
       </template>
     </m-editor>
 
     <el-dialog v-model="previewVisible" destroy-on-close :width="375" custom-class="pre-viewer" title="预览">
-      <iframe
-        v-if="previewVisible"
-        width="100%"
-        height="817"
-        :src="`${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
-      ></iframe>
+      <iframe v-if="previewVisible" width="100%" height="817" :src="previewUrl"></iframe>
     </el-dialog>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, toRaw } from 'vue';
+<script lang="ts" setup>
+import { computed, ref, toRaw } from 'vue';
 import { useRouter } from 'vue-router';
 import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
@@ -47,145 +42,124 @@ import DeviceGroup from '../components/DeviceGroup.vue';
 import componentGroupList from '../configs/componentGroupList';
 import dsl from '../configs/dsl';
 
-const { VITE_RUNTIME_PATH } = import.meta.env;
+const { VITE_RUNTIME_PATH, VITE_ENTRY_PATH } = import.meta.env;
 
-export default defineComponent({
-  name: 'EditorApp',
+const runtimeUrl = `${VITE_RUNTIME_PATH}/playground/index.html`;
+const router = useRouter();
+const editor = ref<InstanceType<typeof TMagicEditor>>();
+const previewVisible = ref(false);
+const value = ref(dsl);
+const defaultSelected = ref(dsl.items[0].id);
+const propsValues = ref<Record<string, any>>({});
+const propsConfigs = ref<Record<string, any>>({});
+const eventMethodList = ref<Record<string, any>>({});
+const stageRect = ref();
 
-  components: { DeviceGroup },
+const previewUrl = computed(
+  () => `${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor.value?.editorService.get('page').id}`,
+);
 
-  setup() {
-    const router = useRouter();
-    const editor = ref<InstanceType<typeof TMagicEditor>>();
-    const previewVisible = ref(false);
-    const value = ref(dsl);
-    const defaultSelected = ref(dsl.items[0].id);
-    const propsValues = ref<Record<string, any>>({});
-    const propsConfigs = ref<Record<string, any>>({});
-    const eventMethodList = ref<Record<string, any>>({});
-
-    const save = () => {
-      localStorage.setItem(
-        'magicDSL',
-        serialize(toRaw(value.value), {
-          space: 2,
-          unsafe: true,
-        }).replace(/"(\w+)":\s/g, '$1: '),
-      );
-      editor.value?.editorService.resetModifiedNodeId();
-    };
-
-    const menu: MenuBarData = {
-      left: [
-        {
-          type: 'text',
-          text: '魔方',
-        },
-      ],
-      center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
-      right: [
-        {
-          type: 'button',
-          text: 'Form Playground',
-          handler: () => router.push('form'),
-        },
-        {
-          type: 'button',
-          text: 'Table Playground',
-          handler: () => router.push('table'),
-        },
-        '/',
-        {
-          type: 'button',
-          text: '预览',
-          icon: Connection,
-          handler: async (services) => {
-            if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
-              try {
-                await ElMessageBox.confirm('有修改未保存，是否先保存再预览', '提示', {
-                  confirmButtonText: '保存并预览',
-                  cancelButtonText: '预览',
-                  type: 'warning',
-                });
-                save();
-                ElMessage.success('保存成功');
-              } catch (e) {
-                console.error(e);
-              }
-            }
-            previewVisible.value = true;
-          },
-        },
-        {
-          type: 'button',
-          text: '保存',
-          icon: Coin,
-          handler: () => {
+const menu: MenuBarData = {
+  left: [
+    {
+      type: 'text',
+      text: '魔方',
+    },
+  ],
+  center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
+  right: [
+    {
+      type: 'button',
+      text: 'Form Playground',
+      handler: () => router.push('form'),
+    },
+    {
+      type: 'button',
+      text: 'Table Playground',
+      handler: () => router.push('table'),
+    },
+    '/',
+    {
+      type: 'button',
+      text: '预览',
+      icon: Connection,
+      handler: async (services) => {
+        if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
+          try {
+            await ElMessageBox.confirm('有修改未保存，是否先保存再预览', '提示', {
+              confirmButtonText: '保存并预览',
+              cancelButtonText: '预览',
+              type: 'warning',
+            });
             save();
             ElMessage.success('保存成功');
-          },
-        },
-        '/',
-        {
-          type: 'button',
-          icon: Document,
-          tooltip: '源码',
-          handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
-        },
-      ],
-    };
-
-    asyncLoadJs(`${VITE_RUNTIME_PATH}/config-entry/index.umd.js`).then(() => {
-      propsConfigs.value = (globalThis as any).magicPresetConfigs;
-    });
-    asyncLoadJs(`${VITE_RUNTIME_PATH}/value-entry/index.umd.js`).then(() => {
-      propsValues.value = (globalThis as any).magicPresetValues;
-    });
-    asyncLoadJs(`${VITE_RUNTIME_PATH}/event-entry/index.umd.js`).then(() => {
-      eventMethodList.value = (globalThis as any).magicPresetEvents;
-    });
-
-    save();
-
-    return {
-      VITE_RUNTIME_PATH,
-
-      editor,
-      menu,
-      value,
-      defaultSelected,
-      propsValues,
-      propsConfigs,
-      eventMethodList,
-      stageRect: ref(),
-
-      previewVisible,
-
-      runtimeUrl: `${VITE_RUNTIME_PATH}/playground/index.html`,
-
-      componentGroupList,
-
-      moveableOptions: (core?: StageCore): MoveableOptions => {
-        const options: MoveableOptions = {};
-        const id = core?.dr?.target?.id;
-
-        if (!id || !editor.value) return options;
-
-        const node = editor.value.editorService.getNodeById(id);
-
-        if (!node) return options;
-
-        const isPage = node.type === NodeType.PAGE;
-
-        options.draggable = !isPage;
-        options.resizable = !isPage;
-        options.rotatable = !isPage;
-
-        return options;
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        previewVisible.value = true;
       },
-    };
-  },
+    },
+    {
+      type: 'button',
+      text: '保存',
+      icon: Coin,
+      handler: () => {
+        save();
+        ElMessage.success('保存成功');
+      },
+    },
+    '/',
+    {
+      type: 'button',
+      icon: Document,
+      tooltip: '源码',
+      handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
+    },
+  ],
+};
+
+const moveableOptions = (core?: StageCore): MoveableOptions => {
+  const options: MoveableOptions = {};
+  const id = core?.dr?.target?.id;
+
+  if (!id || !editor.value) return options;
+
+  const node = editor.value.editorService.getNodeById(id);
+
+  if (!node) return options;
+
+  const isPage = node.type === NodeType.PAGE;
+
+  options.draggable = !isPage;
+  options.resizable = !isPage;
+  options.rotatable = !isPage;
+
+  return options;
+};
+
+const save = () => {
+  localStorage.setItem(
+    'magicDSL',
+    serialize(toRaw(value.value), {
+      space: 2,
+      unsafe: true,
+    }).replace(/"(\w+)":\s/g, '$1: '),
+  );
+  editor.value?.editorService.resetModifiedNodeId();
+};
+
+asyncLoadJs(`${VITE_ENTRY_PATH}/config/index.umd.js`).then(() => {
+  propsConfigs.value = (globalThis as any).magicPresetConfigs;
 });
+asyncLoadJs(`${VITE_ENTRY_PATH}/value/index.umd.js`).then(() => {
+  propsValues.value = (globalThis as any).magicPresetValues;
+});
+asyncLoadJs(`${VITE_ENTRY_PATH}/event/index.umd.js`).then(() => {
+  eventMethodList.value = (globalThis as any).magicPresetEvents;
+});
+
+save();
 </script>
 
 <style lang="scss">
diff --git a/runtime/react/.gitignore b/runtime/react/.gitignore
index 7ff2a31b..87d1ced2 100644
--- a/runtime/react/.gitignore
+++ b/runtime/react/.gitignore
@@ -1,3 +1,2 @@
 .tmagic
-admin-dist
 entry-dist
diff --git a/runtime/react/build.vite.config.ts b/runtime/react/build.vite.config.ts
index efaab1fd..ca454583 100644
--- a/runtime/react/build.vite.config.ts
+++ b/runtime/react/build.vite.config.ts
@@ -23,18 +23,20 @@ import legacy from '@vitejs/plugin-legacy';
 import reactRefresh from '@vitejs/plugin-react-refresh';
 
 export default defineConfig(({ mode }) => {
-  if (['value', 'config', 'event'].includes(mode)) {
-    const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
+  if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
+    const [type, isAdmin] = mode.split(':');
+    const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
     return {
+      publicDir: './.tmagic/public',
       build: {
         cssCodeSplit: false,
         sourcemap: true,
         minify: false,
         target: 'esnext',
-        outDir: `entry-dist/${mode}-entry`,
+        outDir: isAdmin ? `./dist/entry/react/${type}` : `../../playground/public/entry/react/${type}`,
 
         lib: {
-          entry: `.tmagic/${mode}-entry.ts`,
+          entry: `.tmagic/${type}-entry.ts`,
           name: `magicPreset${capitalToken}s`,
           fileName: 'index',
           formats: ['umd'],
@@ -47,8 +49,8 @@ export default defineConfig(({ mode }) => {
     const [type, isAdmin] = mode.split(':');
     const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/react/${type}`;
     const outDir = isAdmin
-      ? path.resolve(process.cwd(), `./admin-dist/${type}`)
-      : path.resolve(process.cwd(), `./dist/${type}`);
+      ? path.resolve(process.cwd(), `./dist/${type}`)
+      : path.resolve(process.cwd(), `../../playground/public/runtime/react/${type}`);
     return {
       plugins: [
         reactRefresh(),
@@ -59,6 +61,8 @@ export default defineConfig(({ mode }) => {
 
       root: `./${type}/`,
 
+      publicDir: '../public',
+
       base,
 
       build: {
diff --git a/runtime/react/dev.vite.config.ts b/runtime/react/dev.vite.config.ts
index 3a3d0f3f..ae08656e 100644
--- a/runtime/react/dev.vite.config.ts
+++ b/runtime/react/dev.vite.config.ts
@@ -38,7 +38,7 @@ export default defineConfig({
 
   base: '/tmagic-editor/playground/runtime/react/',
 
-  publicDir: 'entry-dist',
+  publicDir: 'public',
 
   server: {
     host: '0.0.0.0',
diff --git a/runtime/react/package.json b/runtime/react/package.json
index 6fefe833..f0dbeecc 100644
--- a/runtime/react/package.json
+++ b/runtime/react/package.json
@@ -5,15 +5,19 @@
   "scripts": {
     "dev:react": "npm run build:libs && vite --config dev.vite.config.ts",
     "build": "npm run build:libs && npm run build:page && npm run build:playground",
-    "build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
+    "build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
     "build:page": "vite build --config build.vite.config.ts --mode page",
     "build:playground": "vite build --config build.vite.config.ts --mode playground",
     "build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
     "build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
     "build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
+    "build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
     "build:config": "vite build --config build.vite.config.ts --mode config",
     "build:value": "vite build --config build.vite.config.ts --mode value",
-    "build:event": "vite build --config build.vite.config.ts --mode event"
+    "build:event": "vite build --config build.vite.config.ts --mode event",
+    "build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
+    "build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
+    "build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
   },
   "dependencies": {
     "@tmagic/cli": "1.1.0-beta.6",
diff --git a/runtime/react/page/index.html b/runtime/react/page/index.html
index 3cf5314a..31b0602b 100644
--- a/runtime/react/page/index.html
+++ b/runtime/react/page/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.png" type="image/png">
     <title>React Page</title>
     <style>
       html,
diff --git a/runtime/react/playground/index.html b/runtime/react/playground/index.html
index e3b3b78e..80855842 100644
--- a/runtime/react/playground/index.html
+++ b/runtime/react/playground/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/favicon.png" type="image/png">
   <title>React Playground</title>
   <style>
      html,body {margin: 0; padding: 0}
diff --git a/runtime/react/public/favicon.png b/runtime/react/public/favicon.png
new file mode 100644
index 00000000..f15894c4
Binary files /dev/null and b/runtime/react/public/favicon.png differ
diff --git a/runtime/vue2/.gitignore b/runtime/vue2/.gitignore
index 7ff2a31b..87d1ced2 100644
--- a/runtime/vue2/.gitignore
+++ b/runtime/vue2/.gitignore
@@ -1,3 +1,2 @@
 .tmagic
-admin-dist
 entry-dist
diff --git a/runtime/vue2/build.vite.config.ts b/runtime/vue2/build.vite.config.ts
index 9e95f562..dd78123c 100644
--- a/runtime/vue2/build.vite.config.ts
+++ b/runtime/vue2/build.vite.config.ts
@@ -25,18 +25,20 @@ import vue from '@vitejs/plugin-vue2';
 import externalGlobals from 'rollup-plugin-external-globals';
 
 export default defineConfig(({ mode }) => {
-  if (['value', 'config', 'event'].includes(mode)) {
-    const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
+  if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
+    const [type, isAdmin] = mode.split(':');
+    const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
     return {
+      publicDir: './.tmagic/public',
       build: {
         cssCodeSplit: false,
         sourcemap: true,
         minify: false,
         target: 'esnext',
-        outDir: `entry-dist/${mode}-entry`,
+        outDir: isAdmin ? `./dist/entry/vue2/${type}` : `../../playground/public/entry/vue2/${type}`,
 
         lib: {
-          entry: `.tmagic/${mode}-entry.ts`,
+          entry: `.tmagic/${type}-entry.ts`,
           name: `magicPreset${capitalToken}s`,
           fileName: 'index',
           formats: ['umd'],
@@ -49,8 +51,8 @@ export default defineConfig(({ mode }) => {
     const [type, isAdmin] = mode.split(':');
     const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue2/${type}`;
     const outDir = isAdmin
-      ? path.resolve(process.cwd(), `./admin-dist/${type}`)
-      : path.resolve(process.cwd(), `./dist/${type}`);
+      ? path.resolve(process.cwd(), `./dist/${type}`)
+      : path.resolve(process.cwd(), `../../playground/public/runtime/vue2/${type}`);
     return {
       plugins: [
         vue(),
@@ -62,6 +64,8 @@ export default defineConfig(({ mode }) => {
 
       root: `./${type}/`,
 
+      publicDir: '../public',
+
       base,
 
       build: {
diff --git a/runtime/vue2/dev.vite.config.ts b/runtime/vue2/dev.vite.config.ts
index 0a214b58..2a2d188e 100644
--- a/runtime/vue2/dev.vite.config.ts
+++ b/runtime/vue2/dev.vite.config.ts
@@ -37,7 +37,7 @@ export default defineConfig({
 
   base: '/tmagic-editor/playground/runtime/vue2/',
 
-  publicDir: 'entry-dist',
+  publicDir: 'public',
 
   server: {
     host: '0.0.0.0',
diff --git a/runtime/vue2/package.json b/runtime/vue2/package.json
index be6afc5c..43bd4e46 100644
--- a/runtime/vue2/package.json
+++ b/runtime/vue2/package.json
@@ -5,15 +5,19 @@
   "scripts": {
     "dev:vue2": "npm run build:libs && vite --config dev.vite.config.ts",
     "build": "npm run build:libs && npm run build:page && npm run build:playground",
-    "build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
+    "build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
     "build:page": "vite build --config build.vite.config.ts --mode page",
     "build:playground": "vite build --config build.vite.config.ts --mode playground",
     "build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
     "build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
     "build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
+    "build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
     "build:config": "vite build --config build.vite.config.ts --mode config",
     "build:value": "vite build --config build.vite.config.ts --mode value",
-    "build:event": "vite build --config build.vite.config.ts --mode event"
+    "build:event": "vite build --config build.vite.config.ts --mode event",
+    "build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
+    "build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
+    "build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
   },
   "dependencies": {
     "@tmagic/cli": "1.1.0-beta.6",
diff --git a/runtime/vue2/page/index.html b/runtime/vue2/page/index.html
index d84e3ebe..8b0c4f68 100644
--- a/runtime/vue2/page/index.html
+++ b/runtime/vue2/page/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.png" type="image/png">
     <title>Vue2 Page</title>
     <style>
       html,
diff --git a/runtime/vue2/playground/index.html b/runtime/vue2/playground/index.html
index 6cf1313a..d414e334 100644
--- a/runtime/vue2/playground/index.html
+++ b/runtime/vue2/playground/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/favicon.png" type="image/png">
   <title>Vue2 Playground</title>
   <style>
    html,body {margin: 0; padding: 0}
diff --git a/runtime/vue2/public/favicon.png b/runtime/vue2/public/favicon.png
new file mode 100644
index 00000000..f15894c4
Binary files /dev/null and b/runtime/vue2/public/favicon.png differ
diff --git a/runtime/vue3/.gitignore b/runtime/vue3/.gitignore
index 7ff2a31b..42fca3c6 100644
--- a/runtime/vue3/.gitignore
+++ b/runtime/vue3/.gitignore
@@ -1,3 +1 @@
 .tmagic
-admin-dist
-entry-dist
diff --git a/runtime/vue3/build.vite.config.ts b/runtime/vue3/build.vite.config.ts
index 4f95706a..09c56dab 100644
--- a/runtime/vue3/build.vite.config.ts
+++ b/runtime/vue3/build.vite.config.ts
@@ -26,18 +26,20 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import externalGlobals from 'rollup-plugin-external-globals';
 
 export default defineConfig(({ mode }) => {
-  if (['value', 'config', 'event'].includes(mode)) {
-    const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
+  if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
+    const [type, isAdmin] = mode.split(':');
+    const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
     return {
+      publicDir: './.tmagic/public',
       build: {
         cssCodeSplit: false,
         sourcemap: true,
         minify: false,
         target: 'esnext',
-        outDir: `entry-dist/${mode}-entry`,
+        outDir: isAdmin ? `./dist/entry/vue3/${type}` : `../../playground/public/entry/vue3/${type}`,
 
         lib: {
-          entry: `.tmagic/${mode}-entry.ts`,
+          entry: `.tmagic/${type}-entry.ts`,
           name: `magicPreset${capitalToken}s`,
           fileName: 'index',
           formats: ['umd'],
@@ -50,8 +52,8 @@ export default defineConfig(({ mode }) => {
     const [type, isAdmin] = mode.split(':');
     const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue3/${type}`;
     const outDir = isAdmin
-      ? path.resolve(process.cwd(), `./admin-dist/${type}`)
-      : path.resolve(process.cwd(), `./dist/${type}`);
+      ? path.resolve(process.cwd(), `./dist/${type}`)
+      : path.resolve(process.cwd(), `../../playground/public/runtime/vue3/${type}`);
     return {
       plugins: [
         vue(),
@@ -64,6 +66,8 @@ export default defineConfig(({ mode }) => {
 
       root: `./${type}/`,
 
+      publicDir: '../public',
+
       base,
 
       build: {
diff --git a/runtime/vue3/dev.vite.config.ts b/runtime/vue3/dev.vite.config.ts
index 923c7bfb..636ac8df 100644
--- a/runtime/vue3/dev.vite.config.ts
+++ b/runtime/vue3/dev.vite.config.ts
@@ -38,7 +38,7 @@ export default defineConfig({
 
   base: '/tmagic-editor/playground/runtime/vue3/',
 
-  publicDir: 'entry-dist',
+  publicDir: 'public',
 
   server: {
     host: '0.0.0.0',
diff --git a/runtime/vue3/package.json b/runtime/vue3/package.json
index 1870f860..ee9db4f8 100644
--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@@ -5,15 +5,19 @@
   "scripts": {
     "dev": "npm run build:libs && vite --config dev.vite.config.ts",
     "build": "npm run build:libs && npm run build:page && npm run build:playground",
-    "build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
+    "build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
     "build:page": "vite build --config build.vite.config.ts --mode page",
     "build:playground": "vite build --config build.vite.config.ts --mode playground",
     "build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
     "build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
-    "build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
+    "build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event",
+    "build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
     "build:config": "vite build --config build.vite.config.ts --mode config",
     "build:value": "vite build --config build.vite.config.ts --mode value",
-    "build:event": "vite build --config build.vite.config.ts --mode event"
+    "build:event": "vite build --config build.vite.config.ts --mode event",
+    "build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
+    "build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
+    "build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
   },
   "dependencies": {
     "@tmagic/cli": "1.1.0-beta.6",
diff --git a/runtime/vue3/page/index.html b/runtime/vue3/page/index.html
index 70bb0617..0e8e2270 100644
--- a/runtime/vue3/page/index.html
+++ b/runtime/vue3/page/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.png" type="image/png">
     <title>Vue3 Page</title>
     <style>
       html,
diff --git a/runtime/vue3/playground/index.html b/runtime/vue3/playground/index.html
index a1133cda..7ffa8465 100644
--- a/runtime/vue3/playground/index.html
+++ b/runtime/vue3/playground/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/favicon.png" type="image/png">
   <title>Vue3 Playground</title>
   <style>
     html,body {margin: 0; padding: 0}
diff --git a/runtime/vue3/public/favicon.png b/runtime/vue3/public/favicon.png
new file mode 100644
index 00000000..f15894c4
Binary files /dev/null and b/runtime/vue3/public/favicon.png differ