diff --git a/.eslintignore b/.eslintignore
index fe308b20..31f5c478 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,6 +4,7 @@ entry-dist
 coverage
 node_modules
 dest
+types
 
 comp-entry.ts
 config-entry.ts
diff --git a/.gitignore b/.gitignore
index c9dd99d7..9ee629b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 dist
+types
 
 .temp
 .cache
diff --git a/magic-admin/web/tsconfig.json b/magic-admin/web/tsconfig.json
index f78f9f5f..a6e358d3 100644
--- a/magic-admin/web/tsconfig.json
+++ b/magic-admin/web/tsconfig.json
@@ -15,7 +15,7 @@
     "types": [
       "webpack-env",
       "jest",
-      "./types",
+      "./typings",
       "node"
     ],
     "paths": {
diff --git a/magic-admin/web/types/axios-jsonp/index.d.ts b/magic-admin/web/typings/axios-jsonp/index.d.ts
similarity index 100%
rename from magic-admin/web/types/axios-jsonp/index.d.ts
rename to magic-admin/web/typings/axios-jsonp/index.d.ts
diff --git a/magic-admin/web/types/index.d.ts b/magic-admin/web/typings/index.d.ts
similarity index 100%
rename from magic-admin/web/types/index.d.ts
rename to magic-admin/web/typings/index.d.ts
diff --git a/magic-admin/web/types/shims-vue.d.ts b/magic-admin/web/typings/shims-vue.d.ts
similarity index 100%
rename from magic-admin/web/types/shims-vue.d.ts
rename to magic-admin/web/typings/shims-vue.d.ts
diff --git a/package.json b/package.json
index f8dcee42..fdaa91e9 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 */**/admin-dist */**/entry-dist */dist coverage dwt*",
+    "clean:top": "rimraf */**/dist */**/types */**/admin-dist */**/entry-dist */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",
diff --git a/packages/core/package.json b/packages/core/package.json
index b2c9c95b..1dcbe08b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -6,7 +6,7 @@
   ],
   "main": "dist/tmagic-core.umd.js",
   "module": "dist/tmagic-core.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-core.mjs",
@@ -20,7 +20,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -39,8 +41,8 @@
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
   }
 }
diff --git a/packages/core/tsconfig.build.json b/packages/core/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/core/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
index 0e9355d4..b64aa7f3 100644
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@@ -19,21 +19,10 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
   resolve: {
     alias:
       process.env.NODE_ENV === 'production'
diff --git a/packages/editor/package.json b/packages/editor/package.json
index ec7a417b..fb26e9f0 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -8,7 +8,7 @@
   "main": "dist/tmagic-editor.umd.js",
   "module": "dist/tmagic-editor.mjs",
   "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-editor.mjs",
@@ -22,7 +22,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -73,10 +75,10 @@
     "@vitejs/plugin-vue": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
   }
 }
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index 4adf5df8..b9771ece 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -22,119 +22,107 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuItem } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 
-export default defineComponent({
-  components: { ToolButton },
-
-  props: {
-    menuData: {
-      type: Array as PropType<MenuItem[]>,
-      default: () => [],
-    },
-
-    isSubMenu: {
-      type: Boolean,
-      default: false,
-    },
+const props = withDefaults(
+  defineProps<{
+    menuData?: MenuItem[];
+    isSubMenu?: boolean;
+  }>(),
+  {
+    menuData: () => [],
+    isSubMenu: false,
   },
+);
 
-  emits: ['hide', 'show'],
+const emit = defineEmits(['hide', 'show']);
 
-  setup(props, { emit }) {
-    const menu = ref<HTMLDivElement>();
-    const subMenu = ref<any>();
-    const visible = ref(false);
-    const subMenuData = ref<MenuItem[]>([]);
-    const menuStyle = ref({
-      left: '0',
-      top: '0',
-    });
+const menu = ref<HTMLDivElement>();
+const subMenu = ref<any>();
+const visible = ref(false);
+const subMenuData = ref<MenuItem[]>([]);
+const menuStyle = ref({
+  left: '0',
+  top: '0',
+});
 
-    const hide = () => {
-      if (!visible.value) return;
+const hide = () => {
+  if (!visible.value) return;
 
-      visible.value = false;
-      subMenu.value?.hide();
+  visible.value = false;
+  subMenu.value?.hide();
 
-      emit('hide');
-    };
+  emit('hide');
+};
 
-    const hideHandler = (e: MouseEvent) => {
-      const target = e.target as HTMLElement | undefined;
-      if (!visible.value || !target) {
-        return;
+const hideHandler = (e: MouseEvent) => {
+  const target = e.target as HTMLElement | undefined;
+  if (!visible.value || !target) {
+    return;
+  }
+  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+    return;
+  }
+  hide();
+};
+
+const show = (e: MouseEvent) => {
+  // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+  setTimeout(() => {
+    visible.value = true;
+
+    nextTick(() => {
+      const menuHeight = menu.value?.clientHeight || 0;
+
+      let top = e.clientY;
+      if (menuHeight + e.clientY > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight;
       }
-      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
-        return;
-      }
-      hide();
-    };
 
-    onMounted(() => {
-      if (props.isSubMenu) return;
+      menuStyle.value = {
+        top: `${top}px`,
+        left: `${e.clientX}px`,
+      };
 
-      globalThis.addEventListener('mousedown', hideHandler, true);
+      emit('show');
     });
+  }, 300);
+};
 
-    onUnmounted(() => {
-      if (props.isSubMenu) return;
+const showSubMenu = (item: MenuItem) => {
+  const menuItem = item as MenuButton;
+  if (typeof item !== 'object' || !menuItem.items?.length) {
+    return;
+  }
 
-      globalThis.removeEventListener('mousedown', hideHandler, true);
+  subMenuData.value = menuItem.items;
+  if (menu.value) {
+    subMenu.value.show({
+      clientX: menu.value.offsetLeft + menu.value.clientWidth,
+      clientY: menu.value.offsetTop,
     });
+  }
+};
 
-    return {
-      menu,
-      subMenu,
-      visible,
-      menuStyle,
-      subMenuData,
+onMounted(() => {
+  if (props.isSubMenu) return;
 
-      hide,
+  globalThis.addEventListener('mousedown', hideHandler, true);
+});
 
-      show(e: MouseEvent) {
-        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
-        setTimeout(() => {
-          visible.value = true;
+onUnmounted(() => {
+  if (props.isSubMenu) return;
 
-          nextTick(() => {
-            const menuHeight = menu.value?.clientHeight || 0;
+  globalThis.removeEventListener('mousedown', hideHandler, true);
+});
 
-            let top = e.clientY;
-            if (menuHeight + e.clientY > document.body.clientHeight) {
-              top = document.body.clientHeight - menuHeight;
-            }
-
-            menuStyle.value = {
-              top: `${top}px`,
-              left: `${e.clientX}px`,
-            };
-
-            emit('show');
-          });
-        }, 300);
-      },
-
-      showSubMenu(item: MenuItem) {
-        const menuItem = item as MenuButton;
-        if (typeof item !== 'object' || !menuItem.items?.length) {
-          return;
-        }
-
-        subMenuData.value = menuItem.items;
-        if (menu.value) {
-          subMenu.value.show({
-            clientX: menu.value.offsetLeft + menu.value.clientWidth,
-            clientY: menu.value.offsetTop,
-          });
-        }
-      },
-    };
-  },
+defineExpose({
+  hide,
+  show,
 });
 </script>
diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index 0d72d689..80db7521 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -50,8 +50,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, PropType } from 'vue';
 import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -59,171 +59,154 @@ import { NodeType } from '@tmagic/schema';
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
-export default defineComponent({
-  components: { MIcon, ArrowDown },
-
-  props: {
-    data: {
-      type: [Object, String] as PropType<MenuItem | string>,
-      require: true,
-      default: () => ({
-        type: 'text',
-        display: false,
-      }),
-    },
-
-    eventType: {
-      type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
-      default: 'click',
-    },
+const props = defineProps({
+  data: {
+    type: [Object, String] as PropType<MenuItem | string>,
+    require: true,
+    default: () => ({
+      type: 'text',
+      display: false,
+    }),
   },
 
-  setup(props) {
-    const services = inject<Services>('services');
-    const uiService = services?.uiService;
-
-    const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
-    const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
-    const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
-
-    const zoomInHandler = () => uiService?.zoom(0.1);
-    const zoomOutHandler = () => uiService?.zoom(-0.1);
-
-    const item = computed((): MenuButton | MenuComponent => {
-      if (typeof props.data !== 'string') {
-        return props.data;
-      }
-      switch (props.data) {
-        case '/':
-          return {
-            type: 'divider',
-          };
-        case 'zoom':
-          return {
-            type: 'zoom',
-          };
-        case 'delete':
-          return {
-            type: 'button',
-            icon: markRaw(Delete),
-            tooltip: '刪除',
-            disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
-            handler: () => services?.editorService.remove(services?.editorService.get('node')),
-          };
-        case 'undo':
-          return {
-            type: 'button',
-            icon: markRaw(Back),
-            tooltip: '后退',
-            disabled: () => !services?.historyService.state.canUndo,
-            handler: () => services?.editorService.undo(),
-          };
-        case 'redo':
-          return {
-            type: 'button',
-            icon: markRaw(Right),
-            tooltip: '前进',
-            disabled: () => !services?.historyService.state.canRedo,
-            handler: () => services?.editorService.redo(),
-          };
-        case 'zoom-in':
-          return {
-            type: 'button',
-            icon: markRaw(ZoomIn),
-            tooltip: '放大',
-            handler: zoomInHandler,
-          };
-        case 'zoom-out':
-          return {
-            type: 'button',
-            icon: markRaw(ZoomOut),
-            tooltip: '縮小',
-            handler: zoomOutHandler,
-          };
-        case 'rule':
-          return {
-            type: 'button',
-            icon: markRaw(ScaleToOriginal),
-            tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
-            handler: () => uiService?.set('showRule', !showRule.value),
-          };
-        case 'guides':
-          return {
-            type: 'button',
-            icon: markRaw(Grid),
-            tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
-            handler: () => uiService?.set('showGuides', !showGuides.value),
-          };
-        default:
-          return {
-            type: 'text',
-            text: props.data,
-          };
-      }
-    });
-
-    const disabled = computed(() => {
-      if (typeof item.value === 'string') return false;
-      if (item.value.type === 'component') return false;
-      if (typeof item.value.disabled === 'function') {
-        return item.value.disabled(services);
-      }
-      return item.value.disabled;
-    });
-
-    const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
-      if (disabled.value) return;
-      if (typeof (item as MenuButton).handler === 'function' && services) {
-        (item as MenuButton).handler?.(services, event);
-      }
-    };
-
-    return {
-      ZoomIn: markRaw(ZoomIn),
-      ZoomOut: markRaw(ZoomOut),
-
-      item,
-      zoom,
-      disabled,
-      display: computed(() => {
-        if (!item.value) return false;
-        if (typeof item.value === 'string') return true;
-        if (typeof item.value.display === 'function') {
-          return item.value.display(services);
-        }
-        return item.value.display ?? true;
-      }),
-
-      zoomInHandler,
-      zoomOutHandler,
-
-      dropdownHandler(command: any) {
-        if (command.item.handler) {
-          command.item.handler(services);
-        }
-      },
-
-      clickHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
-        if (props.eventType !== 'click') return;
-        if (item.type === 'button') {
-          buttonHandler(item, event);
-        }
-      },
-
-      mousedownHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
-        if (props.eventType !== 'mousedown') return;
-        if (item.type === 'button') {
-          buttonHandler(item, event);
-        }
-      },
-
-      mouseupHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
-        if (props.eventType !== 'mouseup') return;
-        if (item.type === 'button') {
-          buttonHandler(item, event);
-        }
-      },
-    };
+  eventType: {
+    type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
+    default: 'click',
   },
 });
+
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+
+const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+
+const zoomInHandler = () => uiService?.zoom(0.1);
+const zoomOutHandler = () => uiService?.zoom(-0.1);
+
+const item = computed((): MenuButton | MenuComponent => {
+  if (typeof props.data !== 'string') {
+    return props.data;
+  }
+  switch (props.data) {
+    case '/':
+      return {
+        type: 'divider',
+      };
+    case 'zoom':
+      return {
+        type: 'zoom',
+      };
+    case 'delete':
+      return {
+        type: 'button',
+        icon: markRaw(Delete),
+        tooltip: '刪除',
+        disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
+        handler: () => services?.editorService.remove(services?.editorService.get('node')),
+      };
+    case 'undo':
+      return {
+        type: 'button',
+        icon: markRaw(Back),
+        tooltip: '后退',
+        disabled: () => !services?.historyService.state.canUndo,
+        handler: () => services?.editorService.undo(),
+      };
+    case 'redo':
+      return {
+        type: 'button',
+        icon: markRaw(Right),
+        tooltip: '前进',
+        disabled: () => !services?.historyService.state.canRedo,
+        handler: () => services?.editorService.redo(),
+      };
+    case 'zoom-in':
+      return {
+        type: 'button',
+        icon: markRaw(ZoomIn),
+        tooltip: '放大',
+        handler: zoomInHandler,
+      };
+    case 'zoom-out':
+      return {
+        type: 'button',
+        icon: markRaw(ZoomOut),
+        tooltip: '縮小',
+        handler: zoomOutHandler,
+      };
+    case 'rule':
+      return {
+        type: 'button',
+        icon: markRaw(ScaleToOriginal),
+        tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
+        handler: () => uiService?.set('showRule', !showRule.value),
+      };
+    case 'guides':
+      return {
+        type: 'button',
+        icon: markRaw(Grid),
+        tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
+        handler: () => uiService?.set('showGuides', !showGuides.value),
+      };
+    default:
+      return {
+        type: 'text',
+        text: props.data,
+      };
+  }
+});
+
+const disabled = computed(() => {
+  if (typeof item.value === 'string') return false;
+  if (item.value.type === 'component') return false;
+  if (typeof item.value.disabled === 'function') {
+    return item.value.disabled(services);
+  }
+  return item.value.disabled;
+});
+
+const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (disabled.value) return;
+  if (typeof (item as MenuButton).handler === 'function' && services) {
+    (item as MenuButton).handler?.(services, event);
+  }
+};
+
+const display = computed(() => {
+  if (!item.value) return false;
+  if (typeof item.value === 'string') return true;
+  if (typeof item.value.display === 'function') {
+    return item.value.display(services);
+  }
+  return item.value.display ?? true;
+});
+
+const dropdownHandler = (command: any) => {
+  if (command.item.handler) {
+    command.item.handler(services);
+  }
+};
+
+const clickHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'click') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+
+const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'mousedown') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+
+const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'mouseup') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
 </script>
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 37eb9865..6511cfff 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -12,89 +12,69 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Close, Delete } from '@element-plus/icons-vue';
 
 import { FormState } from '@tmagic/form';
 
 import { Services } from '@editor/type';
 
-export default defineComponent({
-  name: 'm-fields-ui-select',
+const props = defineProps<{
+  labelWidth: string;
+  config: any;
+  model: any;
+  prop: string;
+  name: string;
+}>();
 
-  props: {
-    labelWidth: String,
-    config: Object,
-    model: Object,
-    prop: {
-      type: String,
-      default() {
-        return '';
-      },
-    },
-    name: String,
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change'],
+const services = inject<Services>('services');
+const mForm = inject<FormState>('mForm');
+const val = computed(() => props.model[props.name]);
+const uiSelectMode = ref(false);
 
-  setup(props: any, { emit }) {
-    const services = inject<Services>('services');
-    const mForm = inject<FormState>('mForm');
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
+const cancelHandler = () => {
+  if (!services?.uiService) return;
+  services.uiService.set<boolean>('uiSelectMode', false);
+  uiSelectMode.value = false;
+  globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+};
 
-    const cancelHandler = () => {
-      if (!services?.uiService) return;
-      services.uiService.set<boolean>('uiSelectMode', false);
-      uiSelectMode.value = false;
-      globalThis.document.removeEventListener('ui-select', 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: any }) => {
-      if (detail.id) {
-        props.model[props.name] = detail.id;
-        emit('change', detail.id);
-        mForm?.$emit('field-change', props.prop, detail.id);
-      }
+  if (cancelHandler) {
+    cancelHandler();
+  }
+};
 
-      if (cancelHandler) {
-        cancelHandler();
-      }
-    };
-
-    return {
-      Delete: markRaw(Delete),
-      Pointer: markRaw(Pointer),
-      Close: markRaw(Close),
-
-      val,
-      uiSelectMode,
-      toName: computed(() => {
-        const config = services?.editorService.getNodeById(val.value);
-        return config?.name || '';
-      }),
-
-      startSelect() {
-        if (!services?.uiService) return;
-        services.uiService.set<boolean>('uiSelectMode', true);
-        uiSelectMode.value = true;
-        globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
-      },
-
-      cancelHandler,
-
-      deleteHandler() {
-        if (props.model) {
-          props.model[props.name] = '';
-          emit('change', '');
-          mForm?.$emit('field-change', props.prop, '');
-        }
-      },
-    };
-  },
+const toName = computed(() => {
+  const config = services?.editorService.getNodeById(val.value);
+  return config?.name || '';
 });
+
+const startSelect = () => {
+  if (!services?.uiService) return;
+  services.uiService.set<boolean>('uiSelectMode', true);
+  uiSelectMode.value = true;
+  globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+};
+
+const deleteHandler = () => {
+  if (props.model) {
+    props.model[props.name] = '';
+    emit('change', '');
+    mForm?.$emit('field-change', props.prop, '');
+  }
+};
 </script>
+
 <style lang="scss">
 .m-fields-ui-select {
   cursor: pointer;
diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index e18a2608..91d53ae4 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -3,10 +3,19 @@
     <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
       <el-icon><plus></plus></el-icon>
     </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
+    <div
+      v-if="scrollState.canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="scrollState.scroll('left')"
+    >
       <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
     </div>
-    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
+    <div
+      v-if="root"
+      class="m-editor-page-bar-items"
+      ref="itemsContainer"
+      :style="`width: ${scrollState.itemsContainerWidth}px`"
+    >
       <div
         v-for="item in root.items"
         :key="item.key"
@@ -51,25 +60,18 @@
         </el-popover>
       </div>
     </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+    <div
+      v-if="scrollState.canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="scrollState.scroll('right')"
+    >
       <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  inject,
-  markRaw,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
+<script lang="ts" setup>
+import { computed, ComputedRef, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';
 
 import type { MApp, MPage } from '@tmagic/schema';
@@ -163,49 +165,36 @@ const useScroll = (root: ComputedRef<MApp | undefined>) => {
   };
 };
 
-export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
+const services = inject<Services>('services');
+const editorService = services?.editorService;
 
-  setup() {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
+const root = computed(() => editorService?.get<MApp>('root'));
 
-    const root = computed(() => editorService?.get<MApp>('root'));
+const scrollState = useScroll(root);
+const page = computed(() => editorService?.get('page'));
 
-    return {
-      Delete: markRaw(Delete),
-      DocumentCopy: markRaw(DocumentCopy),
+const switchPage = (page: MPage) => {
+  editorService?.select(page);
+};
 
-      ...useScroll(root),
+const addPage = () => {
+  if (!editorService) return;
+  const pageConfig = {
+    type: NodeType.PAGE,
+    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+  };
+  editorService.add(pageConfig);
+};
 
-      root,
-      page: computed(() => editorService?.get('page')),
+const copy = (node: MPage) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
+  });
+};
 
-      switchPage(page: MPage) {
-        editorService?.select(page);
-      },
-
-      addPage() {
-        if (!editorService) return;
-        const pageConfig = {
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get('root'))),
-        };
-        editorService.add(pageConfig);
-      },
-
-      copy(node: MPage) {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0,
-        });
-      },
-
-      remove(node: MPage) {
-        editorService?.remove(node);
-      },
-    };
-  },
-});
+const remove = (node: MPage) => {
+  editorService?.remove(node);
+};
 </script>
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index 64e88a01..54be7415 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -20,19 +20,8 @@
   </scroll-viewer>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  markRaw,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRaw,
-  watch,
-  watchEffect,
-} from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -58,224 +47,202 @@ import { getGuideLineFromCache } from '@editor/utils';
 
 import ViewerMenu from './ViewerMenu.vue';
 
-export default defineComponent({
-  name: 'magic-stage',
+let stage: StageCore | null = null;
+let runtime: Runtime | null = null;
 
-  components: {
-    ViewerMenu,
-    ScrollViewer,
-  },
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
 
-  setup() {
-    let stage: StageCore | null = null;
-    let runtime: Runtime | null = null;
+const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
+const stageContainer = ref<HTMLDivElement>();
+const menu = ref<InstanceType<typeof ViewerMenu>>();
 
-    const services = inject<Services>('services');
-    const stageOptions = inject<StageOptions>('stageOptions');
+const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
+const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
+const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
+const root = computed(() => services?.editorService.get<MApp>('root'));
+const page = computed(() => services?.editorService.get<MPage>('page'));
+const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
+const node = computed(() => services?.editorService.get<MNode>('node'));
 
-    const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
-    const stageContainer = ref<HTMLDivElement>();
-    const menu = ref<InstanceType<typeof ViewerMenu>>();
+const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
 
-    const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
-    const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
-    const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
-    const root = computed(() => services?.editorService.get<MApp>('root'));
-    const page = computed(() => services?.editorService.get<MPage>('page'));
-    const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
-    const node = computed(() => services?.editorService.get<MNode>('node'));
+watchEffect(() => {
+  if (stage) return;
 
-    const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
+  if (!stageContainer.value) return;
+  if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
-    watchEffect(() => {
-      if (stage) return;
-
-      if (!stageContainer.value) return;
-      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
-
-      stage = new StageCore({
-        render: stageOptions.render,
-        runtimeUrl: stageOptions.runtimeUrl,
-        zoom: zoom.value,
-        autoScrollIntoView: stageOptions.autoScrollIntoView,
-        isContainer: stageOptions.isContainer,
-        containerHighlightClassName: stageOptions.containerHighlightClassName,
-        containerHighlightDuration: stageOptions.containerHighlightDuration,
-        canSelect: (el, event, stop) => {
-          const elCanSelect = stageOptions.canSelect(el);
-          // 在组件联动过程中不能再往下选择，返回并触发 ui-select
-          if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
-            document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
-            return stop();
-          }
-
-          return elCanSelect;
-        },
-        moveableOptions: stageOptions.moveableOptions,
-        updateDragEl: stageOptions.updateDragEl,
-      });
-
-      services?.editorService.set('stage', markRaw(stage));
-
-      stage?.mount(stageContainer.value);
-
-      stage.mask.setGuides([
-        getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-        getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
-      ]);
-
-      stage?.on('select', (el: HTMLElement) => {
-        services?.editorService.select(el.id);
-      });
-
-      stage?.on('highlight', (el: HTMLElement) => {
-        services?.editorService.highlight(el.id);
-      });
-
-      stage?.on('multiSelect', (els: HTMLElement[]) => {
-        services?.editorService.multiSelect(els.map((el) => el.id));
-      });
-
-      stage?.on('update', (ev: UpdateEventData) => {
-        if (ev.parentEl) {
-          services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
-          return;
-        }
-        services?.editorService.update({ id: ev.el.id, style: ev.style });
-      });
-
-      stage?.on('sort', (ev: SortEventData) => {
-        services?.editorService.sort(ev.src, ev.dist);
-      });
-
-      stage?.on('changeGuides', (e) => {
-        services?.uiService.set('showGuides', true);
-
-        if (!root.value || !page.value) return;
-
-        const storageKey = getGuideLineKey(
-          e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
-        );
-        if (e.guides.length) {
-          globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
-        } else {
-          globalThis.localStorage.removeItem(storageKey);
-        }
-      });
-
-      if (!node.value?.id) return;
-      stage?.on('runtime-ready', (rt) => {
-        runtime = rt;
-        // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
-        page.value?.id && runtime?.updatePageId?.(page.value.id);
-        setTimeout(() => {
-          node.value && stage?.select(toRaw(node.value.id));
-        });
-      });
-    });
-
-    watch(zoom, (zoom) => {
-      if (!stage || !zoom) return;
-      stage.setZoom(zoom);
-    });
-
-    watch(root, (root) => {
-      if (runtime && root) {
-        runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+  stage = new StageCore({
+    render: stageOptions.render,
+    runtimeUrl: stageOptions.runtimeUrl,
+    zoom: zoom.value,
+    autoScrollIntoView: stageOptions.autoScrollIntoView,
+    isContainer: stageOptions.isContainer,
+    containerHighlightClassName: stageOptions.containerHighlightClassName,
+    containerHighlightDuration: stageOptions.containerHighlightDuration,
+    canSelect: (el, event, stop) => {
+      const elCanSelect = stageOptions.canSelect(el);
+      // 在组件联动过程中不能再往下选择，返回并触发 ui-select
+      if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
+        document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
+        return stop();
       }
+
+      return elCanSelect;
+    },
+    moveableOptions: stageOptions.moveableOptions,
+    updateDragEl: stageOptions.updateDragEl,
+  });
+
+  services?.editorService.set('stage', markRaw(stage));
+
+  stage?.mount(stageContainer.value);
+
+  stage.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
+  ]);
+
+  stage?.on('select', (el: HTMLElement) => {
+    services?.editorService.select(el.id);
+  });
+
+  stage?.on('highlight', (el: HTMLElement) => {
+    services?.editorService.highlight(el.id);
+  });
+
+  stage?.on('multiSelect', (els: HTMLElement[]) => {
+    services?.editorService.multiSelect(els.map((el) => el.id));
+  });
+
+  stage?.on('update', (ev: UpdateEventData) => {
+    if (ev.parentEl) {
+      services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+      return;
+    }
+    services?.editorService.update({ id: ev.el.id, style: ev.style });
+  });
+
+  stage?.on('sort', (ev: SortEventData) => {
+    services?.editorService.sort(ev.src, ev.dist);
+  });
+
+  stage?.on('changeGuides', (e) => {
+    services?.uiService.set('showGuides', true);
+
+    if (!root.value || !page.value) return;
+
+    const storageKey = getGuideLineKey(
+      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
+    );
+    if (e.guides.length) {
+      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+    } else {
+      globalThis.localStorage.removeItem(storageKey);
+    }
+  });
+
+  if (!node.value?.id) return;
+  stage?.on('runtime-ready', (rt) => {
+    runtime = rt;
+    // toRaw返回的值是一个引用而非快照，需要cloneDeep
+    root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
+    page.value?.id && runtime?.updatePageId?.(page.value.id);
+    setTimeout(() => {
+      node.value && stage?.select(toRaw(node.value.id));
     });
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        services?.uiService.set('stageContainerRect', {
-          width: contentRect.width,
-          height: contentRect.height,
-        });
-      }
-    });
-
-    onMounted(() => {
-      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
-    });
-
-    onUnmounted(() => {
-      stage?.destroy();
-      resizeObserver.disconnect();
-      services?.editorService.set('stage', null);
-    });
-
-    return {
-      stageWrap,
-      stageContainer,
-      menu,
-      stageRect,
-      zoom,
-      isMultiSelect,
-
-      contextmenuHandler(e: MouseEvent) {
-        e.preventDefault();
-        menu.value?.show(e);
-      },
-
-      dragoverHandler(e: DragEvent) {
-        e.preventDefault();
-        if (e.dataTransfer) {
-          e.dataTransfer.dropEffect = 'move';
-        }
-      },
-
-      async dropHandler(e: DragEvent) {
-        e.preventDefault();
-
-        const doc = stage?.renderer.contentWindow?.document;
-        const parentEl: HTMLElement | null | undefined = doc?.querySelector(
-          `.${stageOptions?.containerHighlightClassName}`,
-        );
-
-        let parent: MContainer | undefined = page.value;
-        if (parentEl) {
-          parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
-        }
-
-        if (e.dataTransfer && parent && stageContainer.value && stage) {
-          // eslint-disable-next-line no-eval
-          const config = eval(`(${e.dataTransfer.getData('data')})`);
-          const layout = await services?.editorService.getLayout(parent);
-
-          const containerRect = stageContainer.value.getBoundingClientRect();
-          const { scrollTop, scrollLeft } = stage.mask;
-          const { style = {} } = config;
-
-          let top = 0;
-          let left = 0;
-          let position = 'relative';
-
-          if (layout === Layout.ABSOLUTE) {
-            position = 'absolute';
-            top = e.clientY - containerRect.top + scrollTop;
-            left = e.clientX - containerRect.left + scrollLeft;
-
-            if (parentEl && doc) {
-              const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-              left = left - calcValueByFontsize(doc, parentLeft);
-              top = top - calcValueByFontsize(doc, parentTop);
-            }
-          }
-
-          config.style = {
-            ...style,
-            position,
-            top,
-            left,
-          };
-
-          config.inputEvent = e;
-
-          services?.editorService.add(config, parent);
-        }
-      },
-    };
-  },
+  });
 });
+
+watch(zoom, (zoom) => {
+  if (!stage || !zoom) return;
+  stage.setZoom(zoom);
+});
+
+watch(root, (root) => {
+  if (runtime && root) {
+    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+  }
+});
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const { contentRect } of entries) {
+    services?.uiService.set('stageContainerRect', {
+      width: contentRect.width,
+      height: contentRect.height,
+    });
+  }
+});
+
+onMounted(() => {
+  stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+});
+
+onUnmounted(() => {
+  stage?.destroy();
+  resizeObserver.disconnect();
+  services?.editorService.set('stage', null);
+});
+
+const contextmenuHandler = (e: MouseEvent) => {
+  e.preventDefault();
+  menu.value?.show(e);
+};
+
+const dragoverHandler = (e: DragEvent) => {
+  e.preventDefault();
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = 'move';
+  }
+};
+
+const dropHandler = async (e: DragEvent) => {
+  e.preventDefault();
+
+  const doc = stage?.renderer.contentWindow?.document;
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+
+  let parent: MContainer | undefined = page.value;
+  if (parentEl) {
+    parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+  }
+
+  if (e.dataTransfer && parent && stageContainer.value && stage) {
+    // eslint-disable-next-line no-eval
+    const config = eval(`(${e.dataTransfer.getData('data')})`);
+    const layout = await services?.editorService.getLayout(parent);
+
+    const containerRect = stageContainer.value.getBoundingClientRect();
+    const { scrollTop, scrollLeft } = stage.mask;
+    const { style = {} } = config;
+
+    let top = 0;
+    let left = 0;
+    let position = 'relative';
+
+    if (layout === Layout.ABSOLUTE) {
+      position = 'absolute';
+      top = e.clientY - containerRect.top + scrollTop;
+      left = e.clientX - containerRect.left + scrollLeft;
+
+      if (parentEl && doc) {
+        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+        left = left - calcValueByFontsize(doc, parentLeft);
+        top = top - calcValueByFontsize(doc, parentTop);
+      }
+    }
+
+    config.style = {
+      ...style,
+      position,
+      top,
+      left,
+    };
+
+    config.inputEvent = e;
+
+    services?.editorService.add(config, parent);
+  }
+};
 </script>
diff --git a/packages/editor/src/layouts/workspace/ViewerMenu.vue b/packages/editor/src/layouts/workspace/ViewerMenu.vue
index 040f30fa..f3f35c62 100644
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@@ -2,8 +2,8 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { MNode, NodeType } from '@tmagic/schema';
@@ -15,159 +15,146 @@ import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
-export default defineComponent({
-  components: { ContentMenu },
+const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
 
-  props: {
-    isMultiSelect: {
-      type: Boolean,
-      default: false,
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const canPaste = ref(false);
+const canCenter = ref(false);
+
+const node = computed(() => editorService?.get<MNode>('node'));
+const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
+const parent = computed(() => editorService?.get('parent'));
+const stage = computed(() => editorService?.get<StageCore>('stage'));
+
+const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
+
+const menuData = reactive<MenuItem[]>([
+  {
+    type: 'button',
+    text: '水平居中',
+    display: () => canCenter.value && !props.isMultiSelect,
+    handler: () => {
+      if (!node.value) return;
+      editorService?.alignCenter(node.value);
     },
   },
-
-  setup(props) {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
-    const menu = ref<InstanceType<typeof ContentMenu>>();
-    const canPaste = ref(false);
-    const canCenter = ref(false);
-
-    const node = computed(() => editorService?.get<MNode>('node'));
-    const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
-    const parent = computed(() => editorService?.get('parent'));
-    const stage = computed(() => editorService?.get<StageCore>('stage'));
-
-    const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
-
-    const menuData = reactive<MenuItem[]>([
-      {
-        type: 'button',
-        text: '水平居中',
-        display: () => canCenter.value && !props.isMultiSelect,
-        handler: () => {
-          if (!node.value) return;
-          editorService?.alignCenter(node.value);
-        },
-      },
-      {
-        type: 'button',
-        text: '复制',
-        icon: markRaw(DocumentCopy),
-        handler: () => {
-          nodes.value && editorService?.copy(nodes.value);
-          canPaste.value = true;
-        },
-      },
-      {
-        type: 'button',
-        text: '粘贴',
-        display: () => canPaste.value,
-        handler: () => {
-          const rect = menu.value?.$el.getBoundingClientRect();
-          const parentRect = stage.value?.container?.getBoundingClientRect();
-          const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
-          const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
-
-          if (!nodes.value || nodes.value.length === 0) return;
-          editorService?.paste({ left: initialLeft, top: initialTop });
-        },
-      },
-      {
-        type: 'divider',
-        direction: 'horizontal',
-        display: () => {
-          if (!node.value) return false;
-          return !isPage(node.value);
-        },
-      },
-      {
-        type: 'button',
-        text: '上移一层',
-        icon: markRaw(Top),
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(1);
-        },
-      },
-      {
-        type: 'button',
-        text: '下移一层',
-        icon: markRaw(Bottom),
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(-1);
-        },
-      },
-      {
-        type: 'button',
-        text: '置顶',
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(LayerOffset.TOP);
-        },
-      },
-      {
-        type: 'button',
-        text: '置底',
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(LayerOffset.BOTTOM);
-        },
-      },
-      {
-        type: 'divider',
-        direction: 'horizontal',
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-      },
-      {
-        type: 'button',
-        text: '删除',
-        icon: Delete,
-        display: () => !isPage(node.value),
-        handler: () => {
-          nodes.value && editorService?.remove(nodes.value);
-        },
-      },
-      {
-        type: 'divider',
-        direction: 'horizontal',
-      },
-      {
-        type: 'button',
-        text: '清空参考线',
-        handler: () => {
-          editorService?.get<StageCore>('stage').clearGuides();
-        },
-      },
-      ...stageContentMenu,
-    ]);
-
-    onMounted(async () => {
-      const data = await storageService.getItem(COPY_STORAGE_KEY);
-      canPaste.value = data !== 'undefined' && !!data;
-    });
-
-    watch(
-      parent,
-      async () => {
-        if (!parent.value || !editorService) return (canCenter.value = false);
-        const layout = await editorService.getLayout(parent.value);
-        const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
-        const isTypeConform = nodes.value?.every(
-          (selectedNode) => ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${selectedNode?.type}`),
-        );
-        canCenter.value = isLayoutConform && !!isTypeConform;
-      },
-      { immediate: true },
-    );
-
-    return {
-      menu,
-      menuData,
-      show(e: MouseEvent) {
-        menu.value?.show(e);
-      },
-    };
+  {
+    type: 'button',
+    text: '复制',
+    icon: markRaw(DocumentCopy),
+    handler: () => {
+      nodes.value && editorService?.copy(nodes.value);
+      canPaste.value = true;
+    },
   },
+  {
+    type: 'button',
+    text: '粘贴',
+    display: () => canPaste.value,
+    handler: () => {
+      const rect = menu.value?.$el.getBoundingClientRect();
+      const parentRect = stage.value?.container?.getBoundingClientRect();
+      const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
+      const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
+
+      if (!nodes.value || nodes.value.length === 0) return;
+      editorService?.paste({ left: initialLeft, top: initialTop });
+    },
+  },
+  {
+    type: 'divider',
+    direction: 'horizontal',
+    display: () => {
+      if (!node.value) return false;
+      return !isPage(node.value);
+    },
+  },
+  {
+    type: 'button',
+    text: '上移一层',
+    icon: markRaw(Top),
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+    handler: () => {
+      editorService?.moveLayer(1);
+    },
+  },
+  {
+    type: 'button',
+    text: '下移一层',
+    icon: markRaw(Bottom),
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+    handler: () => {
+      editorService?.moveLayer(-1);
+    },
+  },
+  {
+    type: 'button',
+    text: '置顶',
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+    handler: () => {
+      editorService?.moveLayer(LayerOffset.TOP);
+    },
+  },
+  {
+    type: 'button',
+    text: '置底',
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+    handler: () => {
+      editorService?.moveLayer(LayerOffset.BOTTOM);
+    },
+  },
+  {
+    type: 'divider',
+    direction: 'horizontal',
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+  },
+  {
+    type: 'button',
+    text: '删除',
+    icon: Delete,
+    display: () => !isPage(node.value),
+    handler: () => {
+      nodes.value && editorService?.remove(nodes.value);
+    },
+  },
+  {
+    type: 'divider',
+    direction: 'horizontal',
+  },
+  {
+    type: 'button',
+    text: '清空参考线',
+    handler: () => {
+      editorService?.get<StageCore>('stage').clearGuides();
+    },
+  },
+  ...stageContentMenu,
+]);
+
+onMounted(async () => {
+  const data = await storageService.getItem(COPY_STORAGE_KEY);
+  canPaste.value = data !== 'undefined' && !!data;
 });
+
+watch(
+  parent,
+  async () => {
+    if (!parent.value || !editorService) return (canCenter.value = false);
+    const layout = await editorService.getLayout(parent.value);
+    const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+    const isTypeConform = nodes.value?.every(
+      (selectedNode) => ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${selectedNode?.type}`),
+    );
+    canCenter.value = isLayoutConform && !!isTypeConform;
+  },
+  { immediate: true },
+);
+
+const show = (e: MouseEvent) => {
+  menu.value?.show(e);
+};
+
+defineExpose({ show });
 </script>
diff --git a/packages/editor/src/services/componentList.ts b/packages/editor/src/services/componentList.ts
index 1c98899c..8dc447c2 100644
--- a/packages/editor/src/services/componentList.ts
+++ b/packages/editor/src/services/componentList.ts
@@ -34,11 +34,11 @@ class ComponentList extends BaseService {
   /**
    * @param componentGroupList 组件列表配置
    */
-  public setList(componentGroupList: ComponentGroup[]) {
+  public setList(componentGroupList: ComponentGroup[]): void {
     this.state.list = componentGroupList;
   }
 
-  public getList() {
+  public getList(): ComponentGroup[] {
     return this.state.list;
   }
 }
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 27f7d93b..8e812335 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -42,7 +42,7 @@ import { beforeAdd, beforePaste, beforeRemove, notifyAddToStage } from '@editor/
 import BaseService from './BaseService';
 
 class Editor extends BaseService {
-  public state = reactive<StoreState>({
+  public state: StoreState = reactive({
     root: null,
     page: null,
     parent: null,
diff --git a/packages/editor/tsconfig.build.json b/packages/editor/tsconfig.build.json
new file mode 100644
index 00000000..48d9abdc
--- /dev/null
+++ b/packages/editor/tsconfig.build.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@editor/*": ["src/*"],
+    },
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
index dc873b32..341a505a 100644
--- a/packages/editor/vite.config.ts
+++ b/packages/editor/vite.config.ts
@@ -19,7 +19,6 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
@@ -27,16 +26,7 @@ import pkg from './package.json';
 const alias = [{ find: /@editor/, replacement: path.join(__dirname, './src') }];
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
+  plugins: [vue()],
 
   resolve: {
     alias:
@@ -67,12 +57,7 @@ export default defineConfig({
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖
       external(id: string) {
-        return (
-          /^vue/.test(id) ||
-          /^element-plus/.test(id) ||
-          /^@tmagic\//.test(id) ||
-          Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id))
-        );
+        return Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id));
       },
 
       output: {
diff --git a/packages/form/package.json b/packages/form/package.json
index 7dbcc968..0deb99f5 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -8,7 +8,7 @@
   "main": "dist/tmagic-form.umd.js",
   "module": "dist/tmagic-form.mjs",
   "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-form.mjs",
@@ -22,7 +22,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -52,10 +54,10 @@
     "@vitejs/plugin-vue": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
   }
 }
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 454cfbb3..c8d7b3d9 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -26,22 +26,17 @@
 
 <script lang="ts">
 import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
-import { ElForm } from 'element-plus';
 import { cloneDeep, isEqual } from 'lodash-es';
 
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import { FormConfig, FormState, FormValue } from './schema';
 
-export interface ValidateError {
+interface ValidateError {
   message: string;
   field: string;
 }
 
-export interface FieldErrorList {
-  [field: string]: ValidateError[];
-}
-
 export default defineComponent({
   name: 'm-form',
 
@@ -112,7 +107,8 @@ export default defineComponent({
   emits: ['change', 'field-input', 'field-change'],
 
   setup(props, { emit }) {
-    const elForm = ref<InstanceType<typeof ElForm>>();
+    // InstanceType<typeof ElForm>，构建types的时候会出错
+    const elForm = ref<any>();
     const initialized = ref(false);
     const values = ref<FormValue>({});
     const fields = new Map<string, any>();
diff --git a/packages/form/src/fields/Cascader.vue b/packages/form/src/fields/Cascader.vue
index b668e3af..7eed7eac 100644
--- a/packages/form/src/fields/Cascader.vue
+++ b/packages/form/src/fields/Cascader.vue
@@ -24,11 +24,9 @@ import {
   getCurrentInstance,
   inject,
   PropType,
-  Ref,
   ref,
   watchEffect,
 } from 'vue';
-import { ElCascader, ElDialog } from 'element-plus';
 
 import { CascaderConfig, FormState } from '../schema';
 import { getConfig } from '../utils/config';
@@ -56,11 +54,11 @@ export default defineComponent({
 
     const requestFunc = getConfig('request') as Function;
 
-    const cascader: Ref<null | typeof ElCascader> = ref(null);
-    const dialog: Ref<null | typeof ElDialog> = ref(null);
+    const cascader = ref<any>();
+    const dialog = ref<any>();
 
     const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
-    const remoteData: Ref<any> = ref(null);
+    const remoteData = ref<any>(null);
 
     const setRemoteOptions = async function () {
       const { config } = props;
diff --git a/packages/form/src/fields/ColorPicker.vue b/packages/form/src/fields/ColorPicker.vue
index b99d1bcf..4f49c7bc 100644
--- a/packages/form/src/fields/ColorPicker.vue
+++ b/packages/form/src/fields/ColorPicker.vue
@@ -1,36 +1,29 @@
 <template>
-  <div v-if="model">
-    <el-color-picker
-      v-model="model[name]"
-      :size="size"
-      :disabled="disabled"
-      :showAlpha="true"
-      @change="changeHandler"
-    ></el-color-picker>
-  </div>
+  <el-color-picker
+    v-model="model[name]"
+    :size="size"
+    :disabled="disabled"
+    :showAlpha="true"
+    @change="changeHandler"
+  ></el-color-picker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import { ColorPickConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
-import { useAddField } from '../utils/useAddField';
-export default defineComponent({
-  name: 'm-fields-color-picker',
-});
-</script>
-
 <script lang="ts" setup>
-const emit = defineEmits(['change']);
+import { ColorPickConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
 
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<ColorPickConfig>,
-    required: true,
-  },
-});
+const props = defineProps<{
+  config: ColorPickConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
diff --git a/packages/form/src/fields/Display.vue b/packages/form/src/fields/Display.vue
index 707ec41c..21706fdf 100644
--- a/packages/form/src/fields/Display.vue
+++ b/packages/form/src/fields/Display.vue
@@ -1,33 +1,23 @@
 <template>
-  <span v-if="model">{{ model[n] }}</span>
+  <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 import { DisplayConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-display',
-});
-</script>
+const props = defineProps<{
+  config: DisplayConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();
 
-<script setup lang="ts">
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<DisplayConfig>,
-    required: true,
-  },
-});
-
-const n = computed(() => props.name || props.config.name || '');
-
-if (props.config.initValue && n.value && props.model) {
-  // eslint-disable-next-line no-param-reassign,vue/no-setup-props-destructure
-  props.model[n.value] = props.config.initValue;
+if (props.config.initValue && props.model) {
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  props.model[props.name] = props.config.initValue;
 }
 
 useAddField(props.prop);
diff --git a/packages/form/src/fields/Hidden.vue b/packages/form/src/fields/Hidden.vue
index de6d83d4..cbf24bf8 100644
--- a/packages/form/src/fields/Hidden.vue
+++ b/packages/form/src/fields/Hidden.vue
@@ -1,29 +1,19 @@
 <template>
-  <input v-if="model" v-model="model[n]" type="hidden" />
+  <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 import { HiddenConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-hidden',
-});
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<HiddenConfig>,
-    required: true,
-  },
-});
-
-const n = computed(() => props.name || props.config.name || '');
+const props = defineProps<{
+  config: HiddenConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();
 
 useAddField(props.prop);
 </script>
diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index b3a6ec9c..159c6f35 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -27,7 +27,6 @@
 
 <script lang="ts">
 import { defineComponent, inject, onBeforeMount, onMounted, PropType, Ref, ref, watch } from 'vue';
-import { ElSelect } from 'element-plus';
 
 import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
@@ -56,7 +55,7 @@ export default defineComponent({
     if (!props.model) throw new Error('不能没有model');
     useAddField(props.prop);
 
-    const select = ref<typeof ElSelect>();
+    const select = ref<any>();
     const mForm = inject<FormState | undefined>('mForm');
     const options = ref<SelectOption[] | SelectGroupOption[]>([]);
     const localOptions = ref<SelectOption[] | SelectGroupOption[]>([]);
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 3b5377f4..14b3dba2 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -105,17 +105,17 @@ const install = (app: App, opt: any) => {
   app.component(Text.name, Text);
   app.component(Number.name, Number);
   app.component(Textarea.name, Textarea);
-  app.component(Hidden.name, Hidden);
+  app.component('m-fields-hidden', Hidden);
   app.component(Date.name, Date);
   app.component(DateTime.name, DateTime);
   app.component(Time.name, Time);
   app.component(Checkbox.name, Checkbox);
   app.component(Switch.name, Switch);
   app.component(Daterange.name, Daterange);
-  app.component(ColorPicker.name, ColorPicker);
+  app.component('m-fields-color-picker', ColorPicker);
   app.component(CheckboxGroup.name, CheckboxGroup);
   app.component(RadioGroup.name, RadioGroup);
-  app.component(Display.name, Display);
+  app.component('m-fields-display', Display);
   app.component(Link.name, Link);
   app.component(Select.name, Select);
   app.component(Cascader.name, Cascader);
diff --git a/packages/form/tsconfig.build.json b/packages/form/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/form/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/form/tsconfig.json b/packages/form/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/form/tsconfig.json
+++ b/packages/form/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/form/vite.config.ts b/packages/form/vite.config.ts
index 67611c24..12e56879 100644
--- a/packages/form/vite.config.ts
+++ b/packages/form/vite.config.ts
@@ -19,22 +19,12 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
+  plugins: [vue()],
 
   resolve: {
     alias:
diff --git a/packages/schema/package.json b/packages/schema/package.json
index d2ceeddc..593eb1ce 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -4,7 +4,7 @@
   "sideEffects": false,
   "main": "dist/tmagic-schema.umd.js",
   "module": "dist/tmagic-schema.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-schema.mjs",
@@ -13,7 +13,9 @@
     "./*": "./*"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -25,8 +27,8 @@
   },
   "devDependencies": {
     "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
   }
 }
diff --git a/packages/schema/tsconfig.build.json b/packages/schema/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/schema/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/schema/tsconfig.json b/packages/schema/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/schema/tsconfig.json
+++ b/packages/schema/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/schema/vite.config.ts b/packages/schema/vite.config.ts
index ecc81791..3ac1c156 100644
--- a/packages/schema/vite.config.ts
+++ b/packages/schema/vite.config.ts
@@ -1,17 +1,6 @@
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
   build: {
     sourcemap: true,
 
diff --git a/packages/stage/package.json b/packages/stage/package.json
index e7e6ac72..09613b1d 100644
--- a/packages/stage/package.json
+++ b/packages/stage/package.json
@@ -6,7 +6,7 @@
   ],
   "main": "dist/tmagic-stage.umd.js",
   "module": "dist/tmagic-stage.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-stage.mjs",
@@ -16,7 +16,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -40,9 +42,9 @@
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
   }
 }
diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts
index 0f4d5784..2f49c28f 100644
--- a/packages/stage/src/StageDragResize.ts
+++ b/packages/stage/src/StageDragResize.ts
@@ -484,7 +484,7 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private setGhostElChildrenId(el: Element) {
-    for (const child of el.children) {
+    for (const child of Array.from(el.children)) {
       if (child.id) {
         child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
       }
diff --git a/packages/stage/tsconfig.build.json b/packages/stage/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/stage/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/stage/tsconfig.json b/packages/stage/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/stage/tsconfig.json
+++ b/packages/stage/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/stage/vite.config.ts b/packages/stage/vite.config.ts
index e2cd896c..5be3f14a 100644
--- a/packages/stage/vite.config.ts
+++ b/packages/stage/vite.config.ts
@@ -19,21 +19,10 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
   resolve: {
     alias:
       process.env.NODE_ENV === 'production'
diff --git a/packages/table/package.json b/packages/table/package.json
index 6d174fb6..fafa734d 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -6,7 +6,7 @@
   ],
   "main": "dist/tmagic-table.umd.js",
   "module": "dist/tmagic-table.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-table.mjs",
@@ -20,7 +20,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -31,6 +33,7 @@
   },
   "dependencies": {
     "@tmagic/form": "1.1.0-beta.5",
+    "@tmagic/utils": "1.1.0-beta.5",
     "element-plus": "^2.2.6",
     "lodash-es": "^4.17.21",
     "vue": "^3.2.37"
@@ -47,10 +50,10 @@
     "@vitejs/plugin-vue": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
   }
 }
diff --git a/packages/table/tsconfig.build.json b/packages/table/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/table/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/table/tsconfig.json b/packages/table/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/table/tsconfig.json
+++ b/packages/table/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/table/vite.config.ts b/packages/table/vite.config.ts
index e4c6f7cf..47f82035 100644
--- a/packages/table/vite.config.ts
+++ b/packages/table/vite.config.ts
@@ -19,22 +19,12 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
+  plugins: [vue()],
 
   resolve: {
     alias:
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 79ac747b..2b1c0940 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -3,7 +3,7 @@
   "name": "@tmagic/utils",
   "main": "dist/tmagic-utils.umd.js",
   "module": "dist/tmagic-utils.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/tmagic-utils.mjs",
@@ -12,7 +12,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -28,7 +30,7 @@
   "devDependencies": {
     "@types/node": "^15.12.4",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "rimraf": "^3.0.2",
+    "vite": "^3.0.4"
   }
 }
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 897c89e2..57159ba5 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -31,7 +31,7 @@ export const sleep = (ms: number): Promise<void> =>
     }, ms);
   });
 
-export const datetimeFormatter = (v: string | Date, defaultValue = '-', f = 'YYYY-MM-DD HH:mm:ss') => {
+export const datetimeFormatter = (v: string | Date, defaultValue = '-', f = 'YYYY-MM-DD HH:mm:ss'): any => {
   let format = f;
   if (format === 'timestamp') {
     format = 'x';
diff --git a/packages/utils/tsconfig.build.json b/packages/utils/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/utils/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
index a80ed035..6c40cf1e 100644
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
diff --git a/packages/utils/vite.config.ts b/packages/utils/vite.config.ts
index ab29511b..aed96f62 100644
--- a/packages/utils/vite.config.ts
+++ b/packages/utils/vite.config.ts
@@ -17,23 +17,12 @@
  */
 
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 
 import pkg from './package.json';
 
 const deps = Object.keys(pkg.dependencies);
 
 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
   build: {
     cssCodeSplit: false,
     sourcemap: true,
diff --git a/playground/package.json b/playground/package.json
index 7d9d87f4..2a48ef72 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -34,6 +34,6 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.0.4",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d90e1474..1e304bae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,18 +138,18 @@ importers:
       '@types/events': ^3.0.0
       '@types/node': ^15.12.4
       events: ^3.3.0
+      rimraf: ^3.0.2
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
     dependencies:
       '@tmagic/schema': link:../schema
       events: 3.3.0
     devDependencies:
       '@types/events': 3.0.0
       '@types/node': 15.14.9
+      rimraf: 3.0.2
       typescript: 4.7.4
       vite: 3.0.4
-      vite-plugin-dts: 0.9.10_vite@3.0.4
 
   packages/editor:
     specifiers:
@@ -175,13 +175,13 @@ importers:
       keycon: ^1.1.2
       lodash-es: ^4.17.21
       monaco-editor: ^0.32.1
+      rimraf: ^3.0.2
       sass: ^1.35.1
       serialize-javascript: ^6.0.0
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
       vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
     dependencies:
       '@babel/core': 7.18.2
       '@element-plus/icons-vue': 2.0.6_vue@3.2.37
@@ -208,11 +208,11 @@ importers:
       '@vitejs/plugin-vue': 3.0.1_vite@3.0.4+vue@3.2.37
       '@vue/compiler-sfc': 3.2.37
       '@vue/test-utils': 2.0.0_vue@3.2.37
+      rimraf: 3.0.2
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4
 
   packages/form:
     specifiers:
@@ -228,13 +228,13 @@ importers:
       element-plus: ^2.2.6
       lodash-es: ^4.17.21
       moment: ^2.29.2
+      rimraf: ^3.0.2
       sass: ^1.35.1
       sortablejs: ^1.14.0
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
       vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
     dependencies:
       '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@tmagic/utils': link:../utils
@@ -251,23 +251,23 @@ importers:
       '@vitejs/plugin-vue': 3.0.1_vite@3.0.4+vue@3.2.37
       '@vue/compiler-sfc': 3.2.37
       '@vue/test-utils': 2.0.0_vue@3.2.37
+      rimraf: 3.0.2
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4
 
   packages/schema:
     specifiers:
       '@types/node': ^15.12.4
+      rimraf: ^3.0.2
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
     devDependencies:
       '@types/node': 15.14.9
+      rimraf: 3.0.2
       typescript: 4.7.4
       vite: 3.0.4
-      vite-plugin-dts: 0.9.10_vite@3.0.4
 
   packages/stage:
     specifiers:
@@ -283,10 +283,10 @@ importers:
       lodash-es: ^4.17.21
       moveable: ^0.30.0
       moveable-helper: ^0.4.0
+      rimraf: ^3.0.2
       sass: ^1.35.1
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
     dependencies:
       '@scena/guides': 0.17.0
       '@tmagic/core': link:../core
@@ -301,14 +301,15 @@ importers:
       '@types/events': 3.0.0
       '@types/lodash-es': 4.17.6
       '@types/node': 15.14.9
+      rimraf: 3.0.2
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
 
   packages/table:
     specifiers:
       '@tmagic/form': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
       '@types/color': ^3.0.1
       '@types/lodash-es': ^4.17.4
       '@types/node': ^15.12.4
@@ -317,14 +318,15 @@ importers:
       '@vue/test-utils': ^2.0.0
       element-plus: ^2.2.6
       lodash-es: ^4.17.21
+      rimraf: ^3.0.2
       sass: ^1.35.1
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
       vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
     dependencies:
       '@tmagic/form': link:../form
+      '@tmagic/utils': link:../utils
       element-plus: 2.2.6_vue@3.2.37
       lodash-es: 4.17.21
       vue: 3.2.37
@@ -335,11 +337,11 @@ importers:
       '@vitejs/plugin-vue': 3.0.1_vite@3.0.4+vue@3.2.37
       '@vue/compiler-sfc': 3.2.37
       '@vue/test-utils': 2.0.0_vue@3.2.37
+      rimraf: 3.0.2
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4
 
   packages/ui:
     specifiers:
@@ -413,17 +415,17 @@ importers:
       '@tmagic/schema': 1.1.0-beta.5
       '@types/node': ^15.12.4
       moment: ^2.29.2
+      rimraf: ^3.0.2
       typescript: ^4.7.4
       vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
     dependencies:
       '@tmagic/schema': link:../schema
       moment: 2.29.3
     devDependencies:
       '@types/node': 15.14.9
+      rimraf: 3.0.2
       typescript: 4.7.4
       vite: 3.0.4
-      vite-plugin-dts: 0.9.10_vite@3.0.4
 
   playground:
     specifiers:
@@ -448,7 +450,7 @@ importers:
       vite: ^3.0.4
       vue: ^3.2.37
       vue-router: ^4.0.10
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
     dependencies:
       '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@tmagic/editor': link:../packages/editor
@@ -472,7 +474,7 @@ importers:
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.0.4_sass@1.52.2+terser@5.14.2
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4
 
   runtime/react:
     specifiers:
@@ -577,7 +579,7 @@ importers:
       typescript: ^4.3.4
       vite: ^3.0.4
       vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
     dependencies:
       '@tmagic/cli': link:../../packages/cli
       '@tmagic/core': link:../../packages/core
@@ -601,7 +603,7 @@ importers:
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.0.4_sass@1.52.2+terser@5.14.2
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4
 
 packages:
 
@@ -1441,15 +1443,6 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  /@ts-morph/common/0.12.3:
-    resolution: {integrity: sha512-4tUmeLyXJnJWvTFOKtcNJ1yh0a3SsTLi2MUoyj8iUNznFRN1ZquaNe7Oukqrnki2FzZkm0J9adCNLDZxUzvj+w==}
-    dependencies:
-      fast-glob: 3.2.11
-      minimatch: 3.1.2
-      mkdirp: 1.0.4
-      path-browserify: 1.0.1
-    dev: true
-
   /@tsconfig/node10/1.0.8:
     resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
     dev: true
@@ -1794,36 +1787,50 @@ packages:
       vue: 2.7.4
     dev: true
 
-  /@volar/code-gen/0.38.2:
-    resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
+  /@volar/code-gen/0.39.4:
+    resolution: {integrity: sha512-2RoDdktnN5ovhJoL1NgxKwKhfgP2TzcKVWp8+1Lb67sZ+hvWRL5GjHGkvlPkS91cElpwuURUHnbNNDT+uEqXuA==}
     dependencies:
-      '@volar/source-map': 0.38.2
+      '@volar/source-map': 0.39.4
     dev: true
 
-  /@volar/source-map/0.38.2:
-    resolution: {integrity: sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==}
+  /@volar/source-map/0.39.4:
+    resolution: {integrity: sha512-0zp7v0Ta1rZ2nKC4RcsU94Q/wJVVDWD0AJIqRGFU8rlEs2QO+RpBgotTL6wnKyJjyTzXxhcz/7AHUcwFs2oRnw==}
     dev: true
 
-  /@volar/vue-code-gen/0.38.2:
-    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
+  /@volar/typescript-faster/0.39.4:
+    resolution: {integrity: sha512-nVwTr1MSeUOjm+piJge3WW8PE+JyYbkfpEsf54P0e4P+8PUPHbGRIgr2TSpAh3802JSqg2SHCoDionECT5aXYw==}
     dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
+      semver: 7.3.7
+    dev: true
+
+  /@volar/vue-code-gen/0.39.4:
+    resolution: {integrity: sha512-jQwweKAgtKhX7kDvsVcBRieyNtEywoxZFN+XTyPRvtY57Z2B7Ei9zQb/01n1l2lI+FPuskxaXdZKCn4txSKojQ==}
+    dependencies:
+      '@volar/code-gen': 0.39.4
+      '@volar/source-map': 0.39.4
       '@vue/compiler-core': 3.2.37
       '@vue/compiler-dom': 3.2.37
       '@vue/shared': 3.2.37
     dev: true
 
-  /@volar/vue-typescript/0.38.2:
-    resolution: {integrity: sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==}
+  /@volar/vue-language-core/0.39.4:
+    resolution: {integrity: sha512-ua4HAT8VYSf3EgY4Fl/mfpOQcUWz3gokJ8qsGIGfgKq3MxORnpp+RzKOEpMo1q+Ic550i+x0fh6Ylde76zOLww==}
     dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
-      '@volar/vue-code-gen': 0.38.2
+      '@volar/code-gen': 0.39.4
+      '@volar/source-map': 0.39.4
+      '@volar/vue-code-gen': 0.39.4
       '@vue/compiler-sfc': 3.2.37
       '@vue/reactivity': 3.2.37
     dev: true
 
+  /@volar/vue-typescript/0.39.4:
+    resolution: {integrity: sha512-ZIWg8EvTq53+P4DQVlrW5y+bo5v9VTOASBTrojBo0yK2frNbv/Gs7Ml4V+NmlsvIggtrPtDC/hIQChFiS5B3SA==}
+    dependencies:
+      '@volar/code-gen': 0.39.4
+      '@volar/typescript-faster': 0.39.4
+      '@volar/vue-language-core': 0.39.4
+    dev: true
+
   /@vue/babel-helper-vue-transform-on/1.0.2:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
 
@@ -2746,12 +2753,6 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
-  /code-block-writer/11.0.0:
-    resolution: {integrity: sha512-GEqWvEWWsOvER+g9keO4ohFoD3ymwyCnqY3hoTr7GZipYFwEhMHJw+TtV0rfgRhNImM6QWZGO2XYjlJVyYT62w==}
-    dependencies:
-      tslib: 2.3.1
-    dev: true
-
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -5258,12 +5259,6 @@ packages:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
     dev: true
 
-  /mkdirp/1.0.4:
-    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dev: true
-
   /modify-values/1.0.1:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
     engines: {node: '>=0.10.0'}
@@ -5564,10 +5559,6 @@ packages:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
 
-  /path-browserify/1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-    dev: true
-
   /path-exists/3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
@@ -6580,13 +6571,6 @@ packages:
     resolution: {integrity: sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg==}
     dev: true
 
-  /ts-morph/13.0.3:
-    resolution: {integrity: sha512-pSOfUMx8Ld/WUreoSzvMFQG5i9uEiWIsBYjpU9+TTASOeUa89j5HykomeqVULm1oqWtBdleI3KEFRLrlA3zGIw==}
-    dependencies:
-      '@ts-morph/common': 0.12.3
-      code-block-writer: 11.0.0
-    dev: true
-
   /ts-node/10.8.1_7oqjshy4scgohh2k2lzivplbau:
     resolution: {integrity: sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==}
     hasBin: true
@@ -6631,10 +6615,6 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
-  /tslib/2.3.1:
-    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
-    dev: true
-
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -6770,18 +6750,6 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-plugin-dts/0.9.10_vite@3.0.4:
-    resolution: {integrity: sha512-dNfFJXRsm3YW8k+Wm8SesSaEGOaicKdgFz5PoUpT9zUh6URr5cwu5NMOBhJgiofrzcuYtOU2Ez7JQtg68RII8g==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      vite: '>=2.4.4'
-    dependencies:
-      fast-glob: 3.2.11
-      fs-extra: 10.1.0
-      ts-morph: 13.0.3
-      vite: 3.0.4
-    dev: true
-
   /vite/2.9.14:
     resolution: {integrity: sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==}
     engines: {node: '>=12.2.0'}
@@ -7009,13 +6977,14 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc/0.38.2_typescript@4.7.4:
-    resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
+  /vue-tsc/0.39.4_typescript@4.7.4:
+    resolution: {integrity: sha512-oGFuAdSt8Q1NatnyyJheW0P/8Sk9RDMWPNzeMHXl1OOnoXrbjz2miMcccujySCpA48+AhzdtyFY1PL0XTPsOSg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-typescript': 0.38.2
+      '@volar/vue-language-core': 0.39.4
+      '@volar/vue-typescript': 0.39.4
       typescript: 4.7.4
     dev: true
 
diff --git a/runtime/vue3/package.json b/runtime/vue3/package.json
index 68661c6b..b511896a 100644
--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@@ -39,6 +39,6 @@
     "sass": "^1.35.1",
     "typescript": "^4.3.4",
     "vite": "^3.0.4",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 39c239bb..83bff6f0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ESNext",
+    "module": "ESNext",
     "strict": true,
     "jsx": "preserve",
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -13,13 +13,9 @@
     "emitDecoratorMetadata": true,
     "resolveJsonModule": true,
     "sourceMap": true,
+    "useDefineForClassFields": true,
     "baseUrl": ".",
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
+    "lib": ["ESNext", "DOM"],
     "paths": {
       // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
       "@tmagic/*": ["packages/*/src"],
@@ -31,6 +27,7 @@
     ],
   },
   "exclude": [
-    "**/dist/**/*"
+    "**/dist/**/*",
+    "**/node_modules/**/*",
   ],
 }