diff --git a/package.json b/package.json
index 44da2b54..e6cbc7b7 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "@types/node": "^18.15.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-c8": "^0.30.0",
     "c8": "^7.11.3",
     "chalk": "^4.1.0",
@@ -79,7 +79,7 @@
     "vite": "^4.3.8",
     "vitepress": "1.0.0-beta.1",
     "vitest": "^0.31.1",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "config": {
     "commitizen": {
diff --git a/packages/design/package.json b/packages/design/package.json
index eac7427a..e282bbc0 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -36,20 +36,19 @@
     "typescript"
   ],
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^15.12.4",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.5"
   }
 }
diff --git a/packages/design/src/Autocomplete.vue b/packages/design/src/Autocomplete.vue
index 53588673..19b6c427 100644
--- a/packages/design/src/Autocomplete.vue
+++ b/packages/design/src/Autocomplete.vue
@@ -26,23 +26,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMAutocomplete">
+<script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
 import { getConfig } from './config';
+import type { AutocompleteProps } from './types';
 
-const props = defineProps<{
-  modelValue?: string;
-  placeholder?: string;
-  label?: string;
-  clearable?: boolean;
-  disabled?: boolean;
-  triggerOnFocus?: boolean;
-  valueKey?: string;
-  debounce?: number;
-  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
-  fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
-}>();
+defineOptions({
+  name: 'TMAutocomplete',
+});
+
+const props = defineProps<AutocompleteProps>();
 
 const uiComponent = getConfig('components').autocomplete;
 
diff --git a/packages/design/src/Badge.vue b/packages/design/src/Badge.vue
index 046c3bbe..65b9a685 100644
--- a/packages/design/src/Badge.vue
+++ b/packages/design/src/Badge.vue
@@ -4,18 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMBadge">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { BadgeProps } from './types';
 
-const props = defineProps<{
-  value?: string | number;
-  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
-  max?: number;
-  isDot?: boolean;
-  hidden?: boolean;
-}>();
+defineOptions({
+  name: 'TMBadge',
+});
+
+const props = defineProps<BadgeProps>();
 
 const uiComponent = getConfig('components').badge;
 
diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
index a77c21c1..971479ee 100644
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@@ -6,17 +6,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMButton">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { ButtonProps } from './types';
 
-const props = defineProps<{
-  type?: string;
-  size?: 'large' | 'default' | 'small';
-  text?: boolean;
-  icon?: any;
-}>();
+defineOptions({
+  name: 'TMButton',
+});
+
+const props = defineProps<ButtonProps>();
 
 const uiComponent = getConfig('components').button;
 
diff --git a/packages/design/src/Card.vue b/packages/design/src/Card.vue
index c5f4d94e..7dc85e10 100644
--- a/packages/design/src/Card.vue
+++ b/packages/design/src/Card.vue
@@ -10,16 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCard">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CardProps } from './types';
 
-const props = defineProps<{
-  bodyStyle?: Record<string, any>;
-  shadow?: string;
-  header?: string;
-}>();
+defineOptions({
+  name: 'TMCard',
+});
+
+const props = defineProps<CardProps>();
 
 const uiComponent = getConfig('components').card;
 
diff --git a/packages/design/src/Cascader.vue b/packages/design/src/Cascader.vue
index ba5f0822..5a14c518 100644
--- a/packages/design/src/Cascader.vue
+++ b/packages/design/src/Cascader.vue
@@ -9,28 +9,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMCascader">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
-import { CascaderOption } from './type';
+import { CascaderProps } from './types';
 
-const props = defineProps<{
-  modelValue?: any;
-  placeholder?: string;
-  disabled?: boolean;
-  clearable?: boolean;
-  filterable?: boolean;
-  options?: CascaderOption[];
-  size?: 'large' | 'default' | 'small';
-  props: {
-    expandTrigger?: 'click' | 'hover';
-    multiple?: boolean;
-    checkStrictly?: boolean;
-    emitPath?: boolean;
-    lazy?: boolean;
-  };
-}>();
+defineOptions({
+  name: 'TMCascader',
+});
+
+const props = defineProps<CascaderProps>();
 
 const uiComponent = getConfig('components').cascader;
 
diff --git a/packages/design/src/Checkbox.vue b/packages/design/src/Checkbox.vue
index f5e0708f..d6ebb11f 100644
--- a/packages/design/src/Checkbox.vue
+++ b/packages/design/src/Checkbox.vue
@@ -12,25 +12,20 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCheckbox">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CheckboxProps } from './types';
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number | boolean;
-    label?: any;
-    trueLabel?: string | number | boolean;
-    falseLabel?: string | number | boolean;
-    disabled?: boolean;
-    size?: 'large' | 'default' | 'small';
-  }>(),
-  {
-    trueLabel: undefined,
-    falseLabel: undefined,
-  },
-);
+defineOptions({
+  name: 'TMCheckbox',
+});
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  trueLabel: undefined,
+  falseLabel: undefined,
+});
 
 const uiComponent = getConfig('components').checkbox;
 
diff --git a/packages/design/src/CheckboxGroup.vue b/packages/design/src/CheckboxGroup.vue
index 2d017825..e08b411d 100644
--- a/packages/design/src/CheckboxGroup.vue
+++ b/packages/design/src/CheckboxGroup.vue
@@ -10,17 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCheckboxGroup">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CheckboxGroupProps } from './types';
 
-const props = defineProps<{
-  modelValue?: any[];
-  label?: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-}>();
+defineOptions({
+  name: 'TMCheckboxGroup',
+});
+
+const props = defineProps<CheckboxGroupProps>();
 
 const uiComponent = getConfig('components').checkboxGroup;
 
diff --git a/packages/design/src/Col.vue b/packages/design/src/Col.vue
index 84239d41..10db7740 100644
--- a/packages/design/src/Col.vue
+++ b/packages/design/src/Col.vue
@@ -4,14 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCol">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { ColProps } from './types';
 
-const props = defineProps<{
-  span?: number;
-}>();
+defineOptions({
+  name: 'TMCol',
+});
+
+const props = defineProps<ColProps>();
 
 const uiComponent = getConfig('components').col;
 
diff --git a/packages/design/src/Collapse.vue b/packages/design/src/Collapse.vue
index 779a4c07..33198a5d 100644
--- a/packages/design/src/Collapse.vue
+++ b/packages/design/src/Collapse.vue
@@ -10,15 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCollapse">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CollapseProps } from './types';
 
-const props = defineProps<{
-  modelValue?: string | string[];
-  accordion?: boolean;
-}>();
+defineOptions({
+  name: 'TMCollapse',
+});
+
+const props = defineProps<CollapseProps>();
 
 const uiComponent = getConfig('components').collapse;
 
diff --git a/packages/design/src/CollapseItem.vue b/packages/design/src/CollapseItem.vue
index aebbbff0..7ee3731a 100644
--- a/packages/design/src/CollapseItem.vue
+++ b/packages/design/src/CollapseItem.vue
@@ -16,16 +16,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCollapseItem">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CollapseItemProps } from './types';
 
-const props = defineProps<{
-  name?: string | number;
-  title?: string;
-  disabled?: boolean;
-}>();
+defineOptions({
+  name: 'TMCollapseItem',
+});
+
+const props = defineProps<CollapseItemProps>();
 
 const uiComponent = getConfig('components').collapseItem;
 
diff --git a/packages/design/src/ColorPicker.vue b/packages/design/src/ColorPicker.vue
index 3ce02fbc..49d6da30 100644
--- a/packages/design/src/ColorPicker.vue
+++ b/packages/design/src/ColorPicker.vue
@@ -9,23 +9,20 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMColorPicker">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { ColorPickerProps } from './types';
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string;
-    disabled?: boolean;
-    showAlpha?: boolean;
-    size?: 'large' | 'default' | 'small';
-  }>(),
-  {
-    showAlpha: false,
-    disabled: false,
-  },
-);
+defineOptions({
+  name: 'TMColorPicker',
+});
+
+const props = withDefaults(defineProps<ColorPickerProps>(), {
+  showAlpha: false,
+  disabled: false,
+});
 
 const uiComponent = getConfig('components').colorPicker;
 
diff --git a/packages/design/src/DatePicker.vue b/packages/design/src/DatePicker.vue
index 64e1d610..2ad6a022 100644
--- a/packages/design/src/DatePicker.vue
+++ b/packages/design/src/DatePicker.vue
@@ -9,32 +9,19 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDatePicker">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DatePickerProps } from './types';
 
-const props = withDefaults(
-  defineProps<{
-    type?: string;
-    modelValue?: any;
-    disabled?: boolean;
-    placeholder?: string;
-    rangeSeparator?: string;
-    startPlaceholder?: string;
-    endPlaceholder?: string;
-    format?: string;
-    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
-    valueFormat?: string;
-    /** 在范围选择器里取消两个日期面板之间的联动 */
-    unlinkPanels?: boolean;
-    defaultTime?: any;
-    size?: 'large' | 'default' | 'small';
-  }>(),
-  {
-    type: 'date',
-  },
-);
+defineOptions({
+  name: 'TMDatePicker',
+});
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  type: 'date',
+});
 
 const uiComponent = getConfig('components').datePicker;
 
diff --git a/packages/design/src/Dialog.vue b/packages/design/src/Dialog.vue
index 486d4c65..d53c5937 100644
--- a/packages/design/src/Dialog.vue
+++ b/packages/design/src/Dialog.vue
@@ -14,21 +14,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDialog">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DialogProps } from './types';
 
-const props = defineProps<{
-  modelValue?: boolean;
-  appendToBody?: boolean;
-  beforeClose?: any;
-  title?: string;
-  width?: string | number;
-  fullscreen?: boolean;
-  closeOnClickModal?: boolean;
-  closeOnPressEscape?: boolean;
-}>();
+defineOptions({
+  name: 'TMDialog',
+});
+
+const props = defineProps<DialogProps>();
 
 const uiComponent = getConfig('components').dialog;
 
diff --git a/packages/design/src/Divider.vue b/packages/design/src/Divider.vue
index e6f75432..c69f10be 100644
--- a/packages/design/src/Divider.vue
+++ b/packages/design/src/Divider.vue
@@ -4,16 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDivider">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DividerProps } from './types';
 
-const props = defineProps<{
-  direction?: string;
-  borderStyle?: string;
-  contentPosition?: string;
-}>();
+defineOptions({
+  name: 'TMDivider',
+});
+
+const props = defineProps<DividerProps>();
 
 const uiComponent = getConfig('components').divider;
 
diff --git a/packages/design/src/Drawer.vue b/packages/design/src/Drawer.vue
index d9022fec..951bf42e 100644
--- a/packages/design/src/Drawer.vue
+++ b/packages/design/src/Drawer.vue
@@ -21,29 +21,24 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDrawer">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DrawerProps } from './types';
 
-const props = defineProps<{
-  modelValue?: boolean;
-  appendToBody?: boolean;
-  beforeClose?: any;
-  title?: string;
-  size?: string | number;
-  fullscreen?: boolean;
-  closeOnClickModal?: boolean;
-  closeOnPressEscape?: boolean;
-  direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
-}>();
+defineOptions({
+  name: 'TMDrawer',
+});
+
+const props = defineProps<DrawerProps>();
+
+const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
 
 const uiComponent = getConfig('components').drawer;
 
 const uiProps = computed(() => uiComponent.props(props));
 
-const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
-
 const openHandler = (...args: any[]) => {
   emit('open', ...args);
 };
diff --git a/packages/design/src/Dropdown.vue b/packages/design/src/Dropdown.vue
index ae397c69..63cf05b0 100644
--- a/packages/design/src/Dropdown.vue
+++ b/packages/design/src/Dropdown.vue
@@ -8,26 +8,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDropdown">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DropdownProps } from './types';
 
-const props = defineProps<{
-  type?: string;
-  size?: string;
-  maxHeight?: string | number;
-  splitButton?: boolean;
-  disable?: boolean;
-  placement?: string;
-  trigger?: string;
-  hideOnClick?: boolean;
-  showTimeout?: number;
-  role?: string;
-  tabindex?: number;
-  popperClass?: string;
-  popperOptions?: any;
-}>();
+defineOptions({
+  name: 'TMDropdown',
+});
+
+const props = defineProps<DropdownProps>();
 
 const uiComponent = getConfig('components').dropdown;
 
diff --git a/packages/design/src/DropdownItem.vue b/packages/design/src/DropdownItem.vue
index 82f51d5f..d47c08fc 100644
--- a/packages/design/src/DropdownItem.vue
+++ b/packages/design/src/DropdownItem.vue
@@ -4,17 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDropdownItem">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DropdownItemProps } from './types';
 
-const props = defineProps<{
-  command?: any;
-  disabled?: boolean;
-  divided?: boolean;
-  icon?: any;
-}>();
+defineOptions({
+  name: 'TMDropdownItem',
+});
+
+const props = defineProps<DropdownItemProps>();
 
 const uiComponent = getConfig('components').dropdownItem;
 
diff --git a/packages/design/src/DropdownMenu.vue b/packages/design/src/DropdownMenu.vue
index 38f13afc..880b37d4 100644
--- a/packages/design/src/DropdownMenu.vue
+++ b/packages/design/src/DropdownMenu.vue
@@ -4,8 +4,12 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDropdownMenu">
+<script setup lang="ts">
 import { getConfig } from './config';
 
+defineOptions({
+  name: 'TMDropdownMenu',
+});
+
 const uiComponent = getConfig('components').dropdownMenu;
 </script>
diff --git a/packages/design/src/Form.vue b/packages/design/src/Form.vue
index 20dec0a0..1c139851 100644
--- a/packages/design/src/Form.vue
+++ b/packages/design/src/Form.vue
@@ -4,25 +4,24 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMForm">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { FormProps } from './types';
 
-const form = ref<any>();
+defineOptions({
+  name: 'TMForm',
+});
 
-const props = defineProps<{
-  model?: any;
-  labelWidth?: string | number;
-  disabled?: boolean;
-  inline?: boolean;
-  labelPosition?: string;
-}>();
+const props = defineProps<FormProps>();
 
 const uiComponent = getConfig('components').form;
 
 const uiProps = computed(() => uiComponent.props(props));
 
+const form = ref<any>();
+
 defineExpose({
   validate() {
     return form.value?.validate();
diff --git a/packages/design/src/FormItem.vue b/packages/design/src/FormItem.vue
index 7924f228..42aa06b0 100644
--- a/packages/design/src/FormItem.vue
+++ b/packages/design/src/FormItem.vue
@@ -7,15 +7,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMFormItem">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
-const props = defineProps<{
-  prop?: string;
-  labelWidth?: string | number;
-  rules?: any;
-}>();
+import type { FormItemProps } from './types';
+
+defineOptions({
+  name: 'TMFormItem',
+});
+
+const props = defineProps<FormItemProps>();
 
 const uiComponent = getConfig('components').formItem;
 
diff --git a/packages/design/src/Icon.vue b/packages/design/src/Icon.vue
index 9f6a6471..47dd2a58 100644
--- a/packages/design/src/Icon.vue
+++ b/packages/design/src/Icon.vue
@@ -4,8 +4,12 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMIcon">
+<script setup lang="ts">
 import { getConfig } from './config';
 
+defineOptions({
+  name: 'TMIcon',
+});
+
 const uiComponent = getConfig('components').icon;
 </script>
diff --git a/packages/design/src/Input.vue b/packages/design/src/Input.vue
index 4613243d..00e765d6 100644
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@@ -22,19 +22,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMInput">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { InputProps } from './types';
 
-const props = defineProps<{
-  modelValue?: string | number;
-  clearable?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  type?: string;
-  size?: 'large' | 'default' | 'small';
-}>();
+defineOptions({
+  name: 'TMInput',
+});
+
+const props = defineProps<InputProps>();
 
 const uiComponent = getConfig('components').input;
 
diff --git a/packages/design/src/InputNumber.vue b/packages/design/src/InputNumber.vue
index cb583de8..70d130e7 100644
--- a/packages/design/src/InputNumber.vue
+++ b/packages/design/src/InputNumber.vue
@@ -9,22 +9,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMInputNumber">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { InputNumberProps } from './types';
 
-const props = defineProps<{
-  modelValue?: string | number | boolean;
-  clearable?: boolean;
-  controlsPosition?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  step?: number;
-  min?: number;
-  max?: number;
-  size?: 'large' | 'default' | 'small';
-}>();
+defineOptions({
+  name: 'TMInputNumber',
+});
+
+const props = defineProps<InputNumberProps>();
 
 const uiComponent = getConfig('components').inputNumber;
 
diff --git a/packages/design/src/Option.vue b/packages/design/src/Option.vue
index 699f3eed..5ce2a7be 100644
--- a/packages/design/src/Option.vue
+++ b/packages/design/src/Option.vue
@@ -4,16 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMOption">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { OptionProps } from './types';
 
-const props = defineProps<{
-  value?: any;
-  label?: string;
-  disabled?: boolean;
-}>();
+defineOptions({
+  name: 'TMOption',
+});
+
+const props = defineProps<OptionProps>();
 
 const uiComponent = getConfig('components').option;
 
diff --git a/packages/design/src/OptionGroup.vue b/packages/design/src/OptionGroup.vue
index 7f054eb7..f7235f9d 100644
--- a/packages/design/src/OptionGroup.vue
+++ b/packages/design/src/OptionGroup.vue
@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMOptionGroup">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { OptionGroupProps } from './types';
 
-const props = defineProps<{
-  label?: string;
-  disabled?: boolean;
-}>();
+defineOptions({
+  name: 'TMOptionGroup',
+});
+
+const props = defineProps<OptionGroupProps>();
 
 const uiComponent = getConfig('components').optionGroup;
 
diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue
index 8dd59d01..b016d4fb 100644
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@@ -9,19 +9,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMPagination">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { PaginationProps } from './types';
 
-const props = defineProps<{
-  layout?: string;
-  hideOnSinglePage?: boolean;
-  curPage?: number;
-  pageSizes?: number[];
-  pagesize?: number;
-  total?: number;
-}>();
+defineOptions({
+  name: 'TMPagination',
+});
+
+const props = defineProps<PaginationProps>();
 
 const uiComponent = getConfig('components').pagination;
 
diff --git a/packages/design/src/Popover.vue b/packages/design/src/Popover.vue
index 38f5d70d..125852b3 100644
--- a/packages/design/src/Popover.vue
+++ b/packages/design/src/Popover.vue
@@ -8,21 +8,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMPopover">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { PopoverProps } from './types';
 
-const props = defineProps<{
-  placement?: string;
-  width?: string | number;
-  title?: string;
-  trigger?: string;
-  effect?: string;
-  content?: string;
-  disabled?: boolean;
-  popperClass?: string;
-}>();
+defineOptions({
+  name: 'TMPopover',
+});
+
+const props = defineProps<PopoverProps>();
 
 const uiComponent = getConfig('components').popover;
 
diff --git a/packages/design/src/Radio.vue b/packages/design/src/Radio.vue
index 2eb5f8e0..23896da6 100644
--- a/packages/design/src/Radio.vue
+++ b/packages/design/src/Radio.vue
@@ -4,14 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRadio">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { RadioProps } from './types';
 
-const props = defineProps<{
-  label?: string | number | boolean;
-}>();
+defineOptions({
+  name: 'TMRadio',
+});
+
+const props = defineProps<RadioProps>();
 
 const uiComponent = getConfig('components').radio;
 
diff --git a/packages/design/src/RadioButton.vue b/packages/design/src/RadioButton.vue
index 717d89fb..b6797454 100644
--- a/packages/design/src/RadioButton.vue
+++ b/packages/design/src/RadioButton.vue
@@ -4,16 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRadioButton">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { RadioButtonProps } from './types';
 
-const props = defineProps<{
-  label?: string | number | boolean;
-  disabled?: boolean;
-  name?: string;
-}>();
+defineOptions({
+  name: 'TMRadioButton',
+});
+
+const props = defineProps<RadioButtonProps>();
 
 const uiComponent = getConfig('components').radioButton;
 
diff --git a/packages/design/src/RadioGroup.vue b/packages/design/src/RadioGroup.vue
index c63f3106..930d71d8 100644
--- a/packages/design/src/RadioGroup.vue
+++ b/packages/design/src/RadioGroup.vue
@@ -10,16 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRadioGroup">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { RadioGroupProps } from './types';
 
-const props = defineProps<{
-  modelValue?: string | number | boolean;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-}>();
+defineOptions({
+  name: 'TMRadioGroup',
+});
+
+const props = defineProps<RadioGroupProps>();
 
 const uiComponent = getConfig('components').radioGroup;
 
diff --git a/packages/design/src/Row.vue b/packages/design/src/Row.vue
index c7ee252a..dd31c930 100644
--- a/packages/design/src/Row.vue
+++ b/packages/design/src/Row.vue
@@ -4,8 +4,12 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRow">
+<script setup lang="ts">
 import { getConfig } from './config';
 
+defineOptions({
+  name: 'TMRow',
+});
+
 const uiComponent = getConfig('components').row;
 </script>
diff --git a/packages/design/src/Scrollbar.vue b/packages/design/src/Scrollbar.vue
index 5c77e94a..a825b42d 100644
--- a/packages/design/src/Scrollbar.vue
+++ b/packages/design/src/Scrollbar.vue
@@ -1,17 +1,15 @@
 <template>
-  <component class="tmagic-design-scrollbar" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-scrollbar" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>
 
-<script setup lang="ts" name="TMScrollbar">
-import { computed } from 'vue';
-
+<script setup lang="ts">
 import { getConfig } from './config';
 
-const props = defineProps();
+defineOptions({
+  name: 'TMScrollbar',
+});
 
 const uiComponent = getConfig('components').scrollbar;
-
-const uiProps = computed(() => uiComponent.props(props));
 </script>
diff --git a/packages/design/src/Select.vue b/packages/design/src/Select.vue
index f33cc3fc..684b88b9 100644
--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@@ -13,28 +13,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMSelect">
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 
 import { getConfig } from './config';
+import type { SelectProps } from './types';
 
-const select = ref<any>();
+defineOptions({
+  name: 'TMSelect',
+});
 
-const props = defineProps<{
-  modelValue?: any;
-  clearable?: boolean;
-  filterable?: boolean;
-  popperClass?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  remote?: boolean;
-  multiple?: boolean;
-  allowCreate?: boolean;
-  valueKey?: string;
-  remoteMethod?: any;
-  loading?: boolean;
-  size?: 'large' | 'default' | 'small';
-}>();
+const props = defineProps<SelectProps>();
 
 const uiComponent = getConfig('components').select;
 
@@ -42,6 +31,8 @@ const uiProps = computed(() => uiComponent.props(props));
 
 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
 
+const select = ref<any>();
+
 const changeHandler = (...args: any[]) => {
   emit('change', ...args);
 };
diff --git a/packages/design/src/Step.vue b/packages/design/src/Step.vue
index 154a9e66..a2878b70 100644
--- a/packages/design/src/Step.vue
+++ b/packages/design/src/Step.vue
@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMStep">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { StepProps } from './types';
 
-const props = defineProps<{
-  title?: string;
-  active?: number;
-}>();
+defineOptions({
+  name: 'TMStep',
+});
+
+const props = defineProps<StepProps>();
 
 const emit = defineEmits(['click']);
 
diff --git a/packages/design/src/Steps.vue b/packages/design/src/Steps.vue
index a5261469..3d2971aa 100644
--- a/packages/design/src/Steps.vue
+++ b/packages/design/src/Steps.vue
@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMSteps">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { StepsProps } from './types';
 
-const props = defineProps<{
-  active?: number;
-  space?: number | string;
-}>();
+defineOptions({
+  name: 'TMSteps',
+});
+
+const props = defineProps<StepsProps>();
 
 const uiComponent = getConfig('components').steps;
 
diff --git a/packages/design/src/Switch.vue b/packages/design/src/Switch.vue
index cc2c4b94..dcd5e4cd 100644
--- a/packages/design/src/Switch.vue
+++ b/packages/design/src/Switch.vue
@@ -12,19 +12,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMSwitch">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { SwitchProps } from './types';
 
-const props = defineProps<{
-  modelValue?: string | number | boolean;
-  label?: any;
-  activeValue?: string | number | boolean;
-  inactiveValue?: string | number | boolean;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-}>();
+defineOptions({
+  name: 'TMSwitch',
+});
+
+const props = defineProps<SwitchProps>();
 
 const uiComponent = getConfig('components').switch;
 
diff --git a/packages/design/src/TabPane.vue b/packages/design/src/TabPane.vue
index 3441c81b..e269fd3e 100644
--- a/packages/design/src/TabPane.vue
+++ b/packages/design/src/TabPane.vue
@@ -10,16 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTabPane">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TabPaneProps } from './types';
 
-const props = defineProps<{
-  name?: string;
-  label?: string;
-  lazy?: boolean;
-}>();
+defineOptions({
+  name: 'TMTabPane',
+});
+
+const props = defineProps<TabPaneProps>();
 const uiComponent = getConfig('components').tabPane;
 
 const uiProps = computed(() => uiComponent.props(props));
diff --git a/packages/design/src/Table.vue b/packages/design/src/Table.vue
index 6f51e476..b201208b 100644
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@@ -13,22 +13,19 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTable">
+<script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
 import { getConfig } from './config';
+import type { TableProps } from './types';
 
-const props = withDefaults(
-  defineProps<{
-    data?: any[];
-    border?: boolean;
-    maxHeight?: number | string;
-    defaultExpandAll?: boolean;
-  }>(),
-  {
-    data: () => [],
-  },
-);
+defineOptions({
+  name: 'TMTable',
+});
+
+const props = withDefaults(defineProps<TableProps>(), {
+  data: () => [],
+});
 
 const uiComponent = getConfig('components').table;
 
diff --git a/packages/design/src/TableColumn.vue b/packages/design/src/TableColumn.vue
index b44b7eaf..e5630b27 100644
--- a/packages/design/src/TableColumn.vue
+++ b/packages/design/src/TableColumn.vue
@@ -1,22 +1,23 @@
 <template>
   <component :is="uiComponent.component" v-bind="uiProps">
     <template #default="{ $index, row }">
+      <!-- eslint-disable-next-line vue/valid-attribute-name -->
       <slot :$index="$index" :row="row"></slot>
     </template>
   </component>
 </template>
 
-<script setup lang="ts" name="TMTableColumn">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TableColumnProps } from './types';
 
-const props = defineProps<{
-  label?: string;
-  align?: string;
-  fixed?: string | boolean;
-  width?: string | number;
-}>();
+defineOptions({
+  name: 'TMTableColumn',
+});
+
+const props = defineProps<TableColumnProps>();
 
 const uiComponent = getConfig('components').tableColumn;
 
diff --git a/packages/design/src/Tabs.vue b/packages/design/src/Tabs.vue
index 7096eecc..971c5713 100644
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@@ -14,17 +14,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTabs">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TabsProps } from './types';
 
-const props = defineProps<{
-  type?: string;
-  editable?: boolean;
-  tabPosition?: string;
-  modelValue?: string | number;
-}>();
+defineOptions({
+  name: 'TMTabs',
+});
+
+const props = defineProps<TabsProps>();
 
 const uiComponent = getConfig('components').tabs;
 
diff --git a/packages/design/src/Tag.vue b/packages/design/src/Tag.vue
index 253a6503..e28dcaca 100644
--- a/packages/design/src/Tag.vue
+++ b/packages/design/src/Tag.vue
@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTag">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TagProps } from './types';
 
-const props = defineProps<{
-  type?: string;
-  disableTransition?: boolean;
-}>();
+defineOptions({
+  name: 'TMTag',
+});
+
+const props = defineProps<TagProps>();
 
 const uiComponent = getConfig('components').tag;
 
diff --git a/packages/design/src/TimePicker.vue b/packages/design/src/TimePicker.vue
index 6e86e1c1..2ed42cd5 100644
--- a/packages/design/src/TimePicker.vue
+++ b/packages/design/src/TimePicker.vue
@@ -9,17 +9,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTimePicker">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TimePickerProps } from './types';
 
-const props = defineProps<{
-  modelValue?: any;
-  disabled?: boolean;
-  placeholder?: string;
-  size?: 'large' | 'default' | 'small';
-}>();
+defineOptions({
+  name: 'TMTimePicker',
+});
+
+const props = defineProps<TimePickerProps>();
 
 const uiComponent = getConfig('components').timePicker;
 
diff --git a/packages/design/src/Tooltip.vue b/packages/design/src/Tooltip.vue
index 27b564c3..0eb0ed4a 100644
--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@@ -7,19 +7,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTooltip">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TooltipProps } from './types';
 
-const props = defineProps<{
-  placement?: string;
-  disabled?: boolean;
-  content?: string;
-  effect?: string;
-  transition?: string;
-  offset?: number;
-}>();
+defineOptions({
+  name: 'TMTooltip',
+});
+
+const props = defineProps<TooltipProps>();
 
 const uiComponent = getConfig('components').tooltip;
 
diff --git a/packages/design/src/Tree.vue b/packages/design/src/Tree.vue
index ed7a77d7..2576eb6b 100644
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@@ -19,37 +19,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTree">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { TreeProps } from './types';
 
-const props = defineProps<{
-  data?: any[];
-  emptyText?: string;
-  nodeKey?: string;
-  props?: any;
-  renderAfterExpand?: boolean;
-  load?: any;
-  renderContent?: any;
-  highlightCurrent?: boolean;
-  defaultExpandAll?: boolean;
-  checkOnClickNode?: boolean;
-  autoExpandParent?: boolean;
-  defaultExpandedKeys?: any[];
-  showCheckbox?: boolean;
-  checkStrictly?: boolean;
-  defaultCheckedKeys?: any[];
-  currentNodeKey?: string | number;
-  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
-  accordion?: boolean;
-  indent?: number;
-  icon?: any;
-  lazy?: boolean;
-  draggable?: boolean;
-  allowDrag?: (node: any) => boolean;
-  allowDrop?: any;
-}>();
+defineOptions({
+  name: 'TMTree',
+});
+
+const props = defineProps<TreeProps>();
 
 const uiComponent = getConfig('components').tree;
 
diff --git a/packages/design/src/Upload.vue b/packages/design/src/Upload.vue
index 52bc75f7..6db6fb93 100644
--- a/packages/design/src/Upload.vue
+++ b/packages/design/src/Upload.vue
@@ -8,16 +8,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMUpload">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { UploadProps } from './types';
 
-const props = defineProps<{
-  action?: string;
-  autoUpload?: boolean;
-  disabled?: boolean;
-}>();
+defineOptions({
+  name: 'TMUpload',
+});
+
+const props = defineProps<UploadProps>();
 
 const emit = defineEmits(['change']);
 
diff --git a/packages/design/src/config.ts b/packages/design/src/config.ts
index 1a7b958b..ab320f68 100644
--- a/packages/design/src/config.ts
+++ b/packages/design/src/config.ts
@@ -17,7 +17,7 @@
  */
 
 import defaultAdapter from './defaultAdapter';
-import { PluginOptions } from './type';
+import { PluginOptions } from './types';
 
 let $MAGIC_DESIGN: PluginOptions = {};
 
diff --git a/packages/design/src/defaultAdapter.ts b/packages/design/src/defaultAdapter.ts
index d7e1843c..700b21c3 100644
--- a/packages/design/src/defaultAdapter.ts
+++ b/packages/design/src/defaultAdapter.ts
@@ -1,228 +1,272 @@
+import type {
+  AutocompleteProps,
+  BadgeProps,
+  ButtonProps,
+  CardProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  CollapseItemProps,
+  CollapseProps,
+  ColorPickerProps,
+  ColProps,
+  DatePickerProps,
+  DialogProps,
+  DividerProps,
+  DrawerProps,
+  DropdownItemProps,
+  DropdownProps,
+  FormItemProps,
+  FormProps,
+  InputNumberProps,
+  InputProps,
+  OptionGroupProps,
+  OptionProps,
+  PaginationProps,
+  PopoverProps,
+  RadioButtonProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  StepProps,
+  StepsProps,
+  SwitchProps,
+  TableColumnProps,
+  TableProps,
+  TabPaneProps,
+  TabsProps,
+  TagProps,
+  TimePickerProps,
+  TooltipProps,
+  TreeProps,
+  UploadProps,
+} from './types';
+
 export default {
   components: {
     badge: {
       component: 'el-badge',
-      props: (props: any) => props,
+      props: (props: BadgeProps) => props,
     },
 
     autocomplete: {
       component: 'el-autocomplete',
-      props: (props: any) => props,
+      props: (props: AutocompleteProps) => props,
     },
 
     button: {
       component: 'el-button',
-      props: (props: any) => props,
+      props: (props: ButtonProps) => props,
     },
 
     card: {
       component: 'el-card',
-      props: (props: any) => props,
+      props: (props: CardProps) => props,
     },
 
     cascader: {
       component: 'el-cascader',
-      props: (props: any) => props,
+      props: (props: CascaderProps) => props,
     },
 
     checkbox: {
       component: 'el-checkbox',
-      props: (props: any) => props,
+      props: (props: CheckboxProps) => props,
     },
 
     checkboxGroup: {
       component: 'el-checkbox-group',
-      props: (props: any) => props,
+      props: (props: CheckboxGroupProps) => props,
     },
 
     col: {
       component: 'el-col',
-      props: (props: any) => props,
+      props: (props: ColProps) => props,
     },
 
     collapse: {
       component: 'el-collapse',
-      props: (props: any) => props,
+      props: (props: CollapseProps) => props,
     },
 
     collapseItem: {
       component: 'el-collapse-item',
-      props: (props: any) => props,
+      props: (props: CollapseItemProps) => props,
     },
 
     colorPicker: {
       component: 'el-color-picker',
-      props: (props: any) => props,
+      props: (props: ColorPickerProps) => props,
     },
 
     datePicker: {
       component: 'el-date-picker',
-      props: (props: any) => props,
+      props: (props: DatePickerProps) => props,
     },
 
     dialog: {
       component: 'el-dialog',
-      props: (props: any) => props,
+      props: (props: DialogProps) => props,
     },
 
     divider: {
       component: 'el-divider',
-      props: (props: any) => props,
+      props: (props: DividerProps) => props,
     },
 
     drawer: {
       component: 'el-drawer',
-      props: (props: any) => props,
+      props: (props: DrawerProps) => props,
     },
 
     dropdown: {
       component: 'el-dropdown',
-      props: (props: any) => props,
+      props: (props: DropdownProps) => props,
     },
 
     dropdownItem: {
       component: 'dropdown-item',
-      props: (props: any) => props,
+      props: (props: DropdownItemProps) => props,
     },
 
     dropdownMenu: {
       component: 'dropdown-menu',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     form: {
       component: 'el-form',
-      props: (props: any) => props,
+      props: (props: FormProps) => props,
     },
 
     formItem: {
       component: 'el-form-item',
-      props: (props: any) => props,
+      props: (props: FormItemProps) => props,
     },
 
     icon: {
       component: 'el-icon',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     input: {
       component: 'el-input',
-      props: (props: any) => props,
+      props: (props: InputProps) => props,
     },
 
     inputNumber: {
       component: 'el-input-number',
-      props: (props: any) => props,
+      props: (props: InputNumberProps) => props,
     },
 
     option: {
       component: 'el-option',
-      props: (props: any) => props,
+      props: (props: OptionProps) => props,
     },
 
     optionGroup: {
       component: 'el-option-group',
-      props: (props: any) => props,
+      props: (props: OptionGroupProps) => props,
     },
 
     pagination: {
       component: 'el-pagination',
-      props: (props: any) => props,
+      props: (props: PaginationProps) => props,
     },
 
     popover: {
       component: 'el-popover',
-      props: (props: any) => props,
+      props: (props: PopoverProps) => props,
     },
 
     radio: {
       component: 'el-radio',
-      props: (props: any) => props,
+      props: (props: RadioProps) => props,
     },
 
     radioButton: {
       component: 'el-radio-button',
-      props: (props: any) => props,
+      props: (props: RadioButtonProps) => props,
     },
 
     radioGroup: {
       component: 'el-radio-group',
-      props: (props: any) => props,
+      props: (props: RadioGroupProps) => props,
     },
 
     row: {
       component: 'el-row',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     scrollbar: {
       component: 'el-scrollbar',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     select: {
       component: 'el-select',
-      props: (props: any) => props,
+      props: (props: SelectProps) => props,
     },
 
     step: {
       component: 'el-step',
-      props: (props: any) => props,
+      props: (props: StepProps) => props,
     },
 
     steps: {
       component: 'el-steps',
-      props: (props: any) => props,
+      props: (props: StepsProps) => props,
     },
 
     switch: {
       component: 'el-switch',
-      props: (props: any) => props,
+      props: (props: SwitchProps) => props,
     },
 
     table: {
       component: 'el-table',
-      props: (props: any) => props,
+      props: (props: TableProps) => props,
     },
 
     tableColumn: {
       component: 'el-table-column',
-      props: (props: any) => props,
+      props: (props: TableColumnProps) => props,
     },
 
     tabPane: {
       component: 'el-tab-pane',
-      props: (props: any) => props,
+      props: (props: TabPaneProps) => props,
     },
 
     tabs: {
       component: 'el-tabs',
-      props: (props: any) => props,
+      props: (props: TabsProps) => props,
     },
 
     tag: {
       component: 'el-tag',
-      props: (props: any) => props,
+      props: (props: TagProps) => props,
     },
 
     timePicker: {
       component: 'el-time-picker',
-      props: (props: any) => props,
+      props: (props: TimePickerProps) => props,
     },
 
     tooltip: {
       component: 'el-tooltip',
-      props: (props: any) => props,
+      props: (props: TooltipProps) => props,
     },
 
     tree: {
       component: 'el-tree',
-      props: (props: any) => props,
+      props: (props: TreeProps) => props,
     },
 
     upload: {
       component: 'el-upload',
-      props: (props: any) => props,
+      props: (props: UploadProps) => props,
     },
   },
 };
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index 1a1e2b86..87fffbae 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -1,9 +1,9 @@
 import { App } from 'vue';
 
 import { setConfig } from './config';
-import { PluginOptions, TMagicMessage, TMagicMessageBox } from './type';
+import { PluginOptions, TMagicMessage, TMagicMessageBox } from './types';
 
-export * from './type';
+export * from './types';
 export * from './config';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
diff --git a/packages/design/src/type.ts b/packages/design/src/type.ts
deleted file mode 100644
index a3e8df81..00000000
--- a/packages/design/src/type.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Directive } from 'vue';
-
-export interface CascaderOption {
-  /** 指定选项的值为选项对象的某个属性值 */
-  value: any;
-  /** 指定选项标签为选项对象的某个属性值 */
-  label: string;
-  /** 指定选项的子选项为选项对象的某个属性值 */
-  children?: CascaderOption[];
-}
-
-export interface TMagicMessage {
-  success: (msg: string) => void;
-  warning: (msg: string) => void;
-  info: (msg: string) => void;
-  error: (msg: string) => void;
-  closeAll: () => void;
-}
-
-export type ElMessageBoxShortcutMethod = ((
-  message: string,
-  title: string,
-  options?: any,
-  appContext?: any | null,
-) => Promise<any>) &
-  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
-
-export interface TMagicMessageBox {
-  alert: ElMessageBoxShortcutMethod;
-
-  confirm: ElMessageBoxShortcutMethod;
-
-  prompt: ElMessageBoxShortcutMethod;
-
-  close(): void;
-}
-
-export type LoadingBinding = boolean;
-
-const INSTANCE_KEY = Symbol('TdesignLoading');
-
-export interface ElementLoading extends HTMLElement {
-  [INSTANCE_KEY]?: {
-    instance: any;
-  };
-}
-
-export interface PluginOptions {
-  message?: TMagicMessage;
-  messageBox?: TMagicMessageBox;
-  components?: Record<string, any>;
-  loading?: Directive<ElementLoading, LoadingBinding>;
-  [key: string]: any;
-}
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
new file mode 100644
index 00000000..e4a4e996
--- /dev/null
+++ b/packages/design/src/types.ts
@@ -0,0 +1,416 @@
+import { Directive } from 'vue';
+
+export interface CascaderOption {
+  /** 指定选项的值为选项对象的某个属性值 */
+  value: any;
+  /** 指定选项标签为选项对象的某个属性值 */
+  label: string;
+  /** 指定选项的子选项为选项对象的某个属性值 */
+  children?: CascaderOption[];
+}
+
+export interface TMagicMessage {
+  success: (msg: string) => void;
+  warning: (msg: string) => void;
+  info: (msg: string) => void;
+  error: (msg: string) => void;
+  closeAll: () => void;
+}
+
+export type ElMessageBoxShortcutMethod = ((
+  message: string,
+  title: string,
+  options?: any,
+  appContext?: any | null,
+) => Promise<any>) &
+  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
+
+export interface TMagicMessageBox {
+  alert: ElMessageBoxShortcutMethod;
+
+  confirm: ElMessageBoxShortcutMethod;
+
+  prompt: ElMessageBoxShortcutMethod;
+
+  close(): void;
+}
+
+export type LoadingBinding = boolean;
+
+const INSTANCE_KEY = Symbol('TdesignLoading');
+
+export interface ElementLoading extends HTMLElement {
+  [INSTANCE_KEY]?: {
+    instance: any;
+  };
+}
+
+export interface PluginOptions {
+  message?: TMagicMessage;
+  messageBox?: TMagicMessageBox;
+  components?: Record<string, any>;
+  loading?: Directive<ElementLoading, LoadingBinding>;
+  [key: string]: any;
+}
+
+export type FieldSize = 'large' | 'default' | 'small';
+
+export interface AutocompleteProps {
+  modelValue?: string;
+  placeholder?: string;
+  label?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  triggerOnFocus?: boolean;
+  valueKey?: string;
+  debounce?: number;
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+  fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
+}
+
+export interface BadgeProps {
+  value?: string | number;
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  max?: number;
+  isDot?: boolean;
+  hidden?: boolean;
+}
+
+export interface ButtonProps {
+  type?: string;
+  size?: FieldSize;
+  text?: boolean;
+  icon?: any;
+}
+
+export interface CardProps {
+  bodyStyle?: Record<string, any>;
+  shadow?: string;
+  header?: string;
+}
+
+export interface CascaderProps {
+  modelValue?: any;
+  placeholder?: string;
+  disabled?: boolean;
+  clearable?: boolean;
+  filterable?: boolean;
+  options?: CascaderOption[];
+  size?: FieldSize;
+  props: {
+    expandTrigger?: 'click' | 'hover';
+    multiple?: boolean;
+    checkStrictly?: boolean;
+    emitPath?: boolean;
+    lazy?: boolean;
+  };
+}
+
+export interface CheckboxProps {
+  modelValue?: string | number | boolean;
+  value?: string | number | boolean;
+  label?: any;
+  trueLabel?: string | number | boolean;
+  falseLabel?: string | number | boolean;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface CheckboxGroupProps {
+  modelValue?: any[];
+  label?: string;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface ColProps {
+  span?: number;
+}
+
+export interface CollapseProps {
+  modelValue?: string | string[];
+  accordion?: boolean;
+}
+
+export interface CollapseItemProps {
+  name?: string | number;
+  title?: string;
+  disabled?: boolean;
+}
+
+export interface ColorPickerProps {
+  modelValue?: string;
+  disabled?: boolean;
+  showAlpha?: boolean;
+  size?: FieldSize;
+}
+
+export interface DatePickerProps {
+  type?: string;
+  modelValue?: any;
+  disabled?: boolean;
+  placeholder?: string;
+  rangeSeparator?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
+  format?: string;
+  /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
+  valueFormat?: string;
+  /** 在范围选择器里取消两个日期面板之间的联动 */
+  unlinkPanels?: boolean;
+  defaultTime?: any;
+  size?: FieldSize;
+}
+
+export interface DialogProps {
+  modelValue?: boolean;
+  appendToBody?: boolean;
+  beforeClose?: any;
+  title?: string;
+  width?: string | number;
+  fullscreen?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+}
+
+export interface DividerProps {
+  direction?: string;
+  borderStyle?: string;
+  contentPosition?: string;
+}
+
+export interface DrawerProps {
+  modelValue?: boolean;
+  appendToBody?: boolean;
+  beforeClose?: any;
+  title?: string;
+  size?: string | number;
+  fullscreen?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+  direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
+}
+
+export interface DropdownProps {
+  type?: string;
+  size?: string;
+  maxHeight?: string | number;
+  splitButton?: boolean;
+  disable?: boolean;
+  placement?: string;
+  trigger?: string;
+  hideOnClick?: boolean;
+  showTimeout?: number;
+  role?: string;
+  tabindex?: number;
+  popperClass?: string;
+  popperOptions?: any;
+}
+
+export interface DropdownItemProps {
+  command?: any;
+  disabled?: boolean;
+  divided?: boolean;
+  icon?: any;
+}
+
+export interface FormProps {
+  model?: any;
+  labelWidth?: string | number;
+  disabled?: boolean;
+  inline?: boolean;
+  labelPosition?: string;
+}
+
+export interface FormItemProps {
+  prop?: string;
+  labelWidth?: string | number;
+  rules?: any;
+}
+
+export interface InputProps {
+  modelValue?: string | number;
+  clearable?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  type?: string;
+  size?: FieldSize;
+}
+
+export interface InputNumberProps {
+  modelValue?: string | number | boolean;
+  clearable?: boolean;
+  controlsPosition?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  step?: number;
+  min?: number;
+  max?: number;
+  size?: FieldSize;
+}
+
+export interface OptionProps {
+  value?: any;
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface OptionGroupProps {
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface PaginationProps {
+  layout?: string;
+  hideOnSinglePage?: boolean;
+  curPage?: number;
+  pageSizes?: number[];
+  pagesize?: number;
+  total?: number;
+}
+
+export interface PopoverProps {
+  placement?: string;
+  width?: string | number;
+  title?: string;
+  trigger?: string;
+  effect?: string;
+  content?: string;
+  disabled?: boolean;
+  popperClass?: string;
+}
+
+export interface RadioProps {
+  label?: string | number | boolean;
+}
+
+export interface RadioButtonProps {
+  label?: string | number | boolean;
+  disabled?: boolean;
+  name?: string;
+}
+
+export interface RadioGroupProps {
+  modelValue?: string | number | boolean;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface SelectProps {
+  modelValue?: any;
+  clearable?: boolean;
+  filterable?: boolean;
+  popperClass?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  remote?: boolean;
+  multiple?: boolean;
+  allowCreate?: boolean;
+  valueKey?: string;
+  remoteMethod?: any;
+  loading?: boolean;
+  size?: FieldSize;
+  onSearch?: any;
+}
+
+export interface StepProps {
+  title?: string;
+  active?: number;
+  props?: any;
+  status?: any;
+}
+
+export interface StepsProps {
+  active?: number;
+  space?: number | string;
+}
+
+export interface SwitchProps {
+  modelValue?: string | number | boolean;
+  label?: any;
+  activeValue?: string | number | boolean;
+  inactiveValue?: string | number | boolean;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface TableProps {
+  data?: any[];
+  border?: boolean;
+  maxHeight?: number | string;
+  defaultExpandAll?: boolean;
+}
+
+export interface TableColumnProps {
+  label?: string;
+  align?: string;
+  fixed?: string | boolean;
+  width?: string | number;
+}
+
+export interface TabPaneProps {
+  name?: string;
+  label?: string;
+  lazy?: boolean;
+}
+
+export interface TabsProps {
+  type?: string;
+  editable?: boolean;
+  tabPosition?: string;
+  modelValue?: string | number;
+}
+
+export interface TagProps {
+  type?: string;
+  disableTransition?: boolean;
+}
+
+export interface TimePickerProps {
+  modelValue?: any;
+  disabled?: boolean;
+  placeholder?: string;
+  size?: FieldSize;
+}
+
+export interface TooltipProps {
+  placement?: string;
+  disabled?: boolean;
+  content?: string;
+  effect?: string;
+  transition?: string;
+  offset?: number;
+}
+
+export interface TreeProps {
+  data?: any[];
+  emptyText?: string;
+  nodeKey?: string;
+  props?: any;
+  renderAfterExpand?: boolean;
+  load?: any;
+  renderContent?: any;
+  highlightCurrent?: boolean;
+  defaultExpandAll?: boolean;
+  checkOnClickNode?: boolean;
+  autoExpandParent?: boolean;
+  defaultExpandedKeys?: any[];
+  showCheckbox?: boolean;
+  checkStrictly?: boolean;
+  defaultCheckedKeys?: any[];
+  currentNodeKey?: string | number;
+  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
+  accordion?: boolean;
+  indent?: number;
+  icon?: any;
+  lazy?: boolean;
+  draggable?: boolean;
+  allowDrag?: (node: any) => boolean;
+  allowDrop?: any;
+}
+
+export interface UploadProps {
+  action?: string;
+  autoUpload?: boolean;
+  disabled?: boolean;
+}
diff --git a/packages/design/vite.config.ts b/packages/design/vite.config.ts
index 2afaa030..bc6fb8c6 100644
--- a/packages/design/vite.config.ts
+++ b/packages/design/vite.config.ts
@@ -17,13 +17,12 @@
  */
 
 import { defineConfig } from 'vite';
-import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue(), VueSetupExtend()],
+  plugins: [vue()],
 
   optimizeDeps: {
     esbuildOptions: {
diff --git a/packages/editor/package.json b/packages/editor/package.json
index f639c2bf..aa9fb4c4 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -61,28 +61,27 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "@tmagic/design": "1.2.15",
     "@tmagic/form": "1.2.15",
     "monaco-editor": "^0.34.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.0.11"
+    "vue-tsc": "^1.6.5"
   }
 }
diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 9ac4cfeb..72df41c1 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -86,7 +86,7 @@ import { initServiceEvents, initServiceState } from './initService';
 import type { Services } from './type';
 
 export default defineComponent({
-  name: 'm-editor',
+  name: 'MEditor',
 
   components: {
     TMagicNavMenu: NavMenu,
diff --git a/packages/editor/src/components/CodeDraftEditor.vue b/packages/editor/src/components/CodeDraftEditor.vue
index 141402d9..33a06026 100644
--- a/packages/editor/src/components/CodeDraftEditor.vue
+++ b/packages/editor/src/components/CodeDraftEditor.vue
@@ -23,7 +23,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="MEditorCodeDraftEditor">
+<script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
 import type * as monaco from 'monaco-editor';
 
@@ -34,6 +34,10 @@ import { datetimeFormatter } from '@tmagic/utils';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeDraftEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 代码id */
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index 22ea46f7..016da0bd 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -22,13 +22,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorContentMenu">
+<script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 
+defineOptions({
+  name: 'MEditorContentMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     menuData?: (MenuButton | MenuComponent)[];
diff --git a/packages/editor/src/components/FunctionEditor.vue b/packages/editor/src/components/FunctionEditor.vue
index cdbdffe8..a3c9558f 100644
--- a/packages/editor/src/components/FunctionEditor.vue
+++ b/packages/editor/src/components/FunctionEditor.vue
@@ -32,7 +32,7 @@
     ></CodeDraftEditor>
   </TMagicCard>
 </template>
-<script lang="ts" setup name="MEditorFunctionEditor">
+<script lang="ts" setup>
 import { inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -43,6 +43,11 @@ import { CodeParam, Id } from '@tmagic/schema';
 import type { Services } from '@editor/type';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
+
+defineOptions({
+  name: 'MEditorFunctionEditor',
+});
+
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',
diff --git a/packages/editor/src/components/Icon.vue b/packages/editor/src/components/Icon.vue
index 249fb837..54b1e551 100644
--- a/packages/editor/src/components/Icon.vue
+++ b/packages/editor/src/components/Icon.vue
@@ -7,12 +7,16 @@
   <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup name="MEditorIcon">
+<script lang="ts" setup>
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorIcon',
+});
+
 defineProps<{
   icon?: any;
 }>();
diff --git a/packages/editor/src/components/Layout.vue b/packages/editor/src/components/Layout.vue
index 4c018132..30db2ae2 100644
--- a/packages/editor/src/components/Layout.vue
+++ b/packages/editor/src/components/Layout.vue
@@ -20,11 +20,15 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorLayout">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from '@editor/layouts/Resizer.vue';
 
+defineOptions({
+  name: 'MEditorLayout',
+});
+
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 
 const props = withDefaults(
diff --git a/packages/editor/src/components/ScrollBar.vue b/packages/editor/src/components/ScrollBar.vue
index 195a8962..567b3b9e 100644
--- a/packages/editor/src/components/ScrollBar.vue
+++ b/packages/editor/src/components/ScrollBar.vue
@@ -4,10 +4,14 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollBar">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorScrollBar',
+});
+
 const props = defineProps<{
   size: number;
   scrollSize: number;
diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index d61ea939..9bc36e0e 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollViewer">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import type { ScrollViewerEvent } from '@editor/type';
@@ -30,6 +30,10 @@ import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
 
+defineOptions({
+  name: 'MEditorScrollViewer',
+});
+
 const props = withDefaults(
   defineProps<{
     width?: number;
diff --git a/packages/editor/src/components/SearchInput.vue b/packages/editor/src/components/SearchInput.vue
index 51b4038c..35f31c65 100644
--- a/packages/editor/src/components/SearchInput.vue
+++ b/packages/editor/src/components/SearchInput.vue
@@ -19,6 +19,10 @@ import { Search } from '@element-plus/icons-vue';
 
 import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorSearchInput',
+});
+
 const emit = defineEmits(['search']);
 
 const filterText = ref('');
diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index a1a6b4f6..80d1894e 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorToolButton">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
@@ -60,6 +60,10 @@ import {
 import MIcon from '../components/Icon.vue';
 import type { MenuButton, MenuComponent, Services } from '../type';
 
+defineOptions({
+  name: 'MEditorToolButton',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuButton | MenuComponent;
diff --git a/packages/editor/src/fields/Code.vue b/packages/editor/src/fields/Code.vue
index b1afc1f0..3639b825 100644
--- a/packages/editor/src/fields/Code.vue
+++ b/packages/editor/src/fields/Code.vue
@@ -8,9 +8,13 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup name="MEditorCode">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
+defineOptions({
+  name: 'MEditorCode',
+});
+
 const emit = defineEmits(['change']);
 
 const props = defineProps<{
diff --git a/packages/editor/src/fields/CodeLink.vue b/packages/editor/src/fields/CodeLink.vue
index 48a0e3aa..9e6d9d30 100644
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/packages/editor/src/fields/CodeLink.vue
@@ -2,10 +2,14 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup name="MEditorCodeLink">
+<script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeLink',
+});
+
 const props = defineProps<{
   config: {
     type: 'code-link';
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 4d7354f2..efdf1626 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -6,13 +6,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelect">
-import { computed, defineEmits, defineProps, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import { HookType } from '@tmagic/schema';
 
+defineOptions({
+  name: 'MEditorCodeSelect',
+});
+
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue
index ac98840c..934c7528 100644
--- a/packages/editor/src/fields/CodeSelectCol.vue
+++ b/packages/editor/src/fields/CodeSelectCol.vue
@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelectCol">
-import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
+<script lang="ts" setup name="">
+import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
@@ -27,6 +27,10 @@ import { Id } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import type { CodeParamStatement, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeSelectCol',
+});
+
 const services = inject<Services>('services');
 const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
diff --git a/packages/editor/src/fields/DataSourceFields.vue b/packages/editor/src/fields/DataSourceFields.vue
index c90d66bd..efe192a0 100644
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/packages/editor/src/fields/DataSourceFields.vue
@@ -24,6 +24,10 @@ import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
 import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+defineOptions({
+  name: 'MEditorDataSourceFields',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index d522fa8a..7dba888f 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -50,6 +50,10 @@ import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceInput',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 4beb118a..21a42088 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -33,8 +33,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorEventSelect">
-import { computed, defineProps, inject } from 'vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
@@ -44,7 +44,9 @@ import { ActionType } from '@tmagic/schema';
 
 import type { EventSelectConfig, Services } from '@editor/type';
 
-const services = inject<Services>('services');
+defineOptions({
+  name: 'MEditorEventSelect',
+});
 
 const props = defineProps<{
   config: EventSelectConfig;
@@ -53,8 +55,11 @@ const props = defineProps<{
   name: string;
   size: 'small' | 'default' | 'large';
 }>();
+
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {
diff --git a/packages/editor/src/fields/KeyValue.vue b/packages/editor/src/fields/KeyValue.vue
index 58f16c9f..40d61686 100644
--- a/packages/editor/src/fields/KeyValue.vue
+++ b/packages/editor/src/fields/KeyValue.vue
@@ -38,6 +38,10 @@ import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorKeyValue',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index e934fe9f..0a9df7b7 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorUISelect">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import { FormState } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorUISelect',
+});
+
 const props = defineProps<{
   config: any;
   model: any;
diff --git a/packages/editor/src/icons/AppManageIcon.vue b/packages/editor/src/icons/AppManageIcon.vue
index 85047145..f7162487 100644
--- a/packages/editor/src/icons/AppManageIcon.vue
+++ b/packages/editor/src/icons/AppManageIcon.vue
@@ -8,4 +8,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorAppManageIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>
diff --git a/packages/editor/src/icons/CodeIcon.vue b/packages/editor/src/icons/CodeIcon.vue
index 5690490a..73f63e80 100644
--- a/packages/editor/src/icons/CodeIcon.vue
+++ b/packages/editor/src/icons/CodeIcon.vue
@@ -23,4 +23,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorCodeIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>
diff --git a/packages/editor/src/layouts/AddPageBox.vue b/packages/editor/src/layouts/AddPageBox.vue
index 8f1db9e2..99f42ad7 100644
--- a/packages/editor/src/layouts/AddPageBox.vue
+++ b/packages/editor/src/layouts/AddPageBox.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorAddPageBox">
+<script lang="ts" setup>
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
+defineOptions({
+  name: 'MEditorAddPageBox',
+});
+
 const services = inject<Services>('services');
 
 const clickHandler = () => {
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 2f1982e0..30975f7a 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -2,12 +2,16 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeEditor">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     initValues?: string | Object;
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 48239b49..4e162780 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorFramework">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
@@ -52,6 +52,10 @@ import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
 
+defineOptions({
+  name: 'MEditorFramework',
+});
+
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index 02ad9364..62a7ab3e 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorNavMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
@@ -15,6 +15,10 @@ import { NodeType } from '@tmagic/schema';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorNavMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuBarData;
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 6bce2cb2..c5f8e8d3 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorPropsPanel">
+<script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
@@ -22,6 +22,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();
diff --git a/packages/editor/src/layouts/Resizer.vue b/packages/editor/src/layouts/Resizer.vue
index 33cb95db..bfd6d0ab 100644
--- a/packages/editor/src/layouts/Resizer.vue
+++ b/packages/editor/src/layouts/Resizer.vue
@@ -4,10 +4,14 @@
   </span>
 </template>
 
-<script lang="ts" setup name="MEditorResizer">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorResizer',
+});
+
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index 30260a55..bd1265bb 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -31,7 +31,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorComponentListPanel">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
@@ -43,6 +43,10 @@ import MIcon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorComponentListPanel',
+});
+
 const searchText = ref('');
 
 const filterTextChangeHandler = (v: string) => {
diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue
index 1f7ba491..b644245f 100644
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue
@@ -2,7 +2,7 @@
   <ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
 </template>
 
-<script lang="ts" setup name="MEditorLayerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref } from 'vue';
 import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
 
@@ -11,6 +11,10 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorLayerMenu',
+});
+
 const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index 40b645a2..2722dc91 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -48,7 +48,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorLayerPanel">
+<script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 import KeyController from 'keycon';
 import { difference, throttle, union } from 'lodash-es';
@@ -64,6 +64,10 @@ import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
+defineOptions({
+  name: 'MEditorLayerPanel',
+});
+
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index bf8c60d4..2e7367eb 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -83,7 +83,7 @@
   </component>
 </template>
 
-<script lang="ts" setup name="MEditorSidebar">
+<script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
@@ -98,6 +98,10 @@ import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
+defineOptions({
+  name: 'MEditorSidebar',
+});
+
 const props = withDefaults(
   defineProps<{
     data: SideBarData;
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 027eb6fa..e84a3646 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -32,7 +32,7 @@
   </TMagicDrawer>
 </template>
 
-<script lang="ts" setup name="MEditorCodeBlockEditor">
+<script lang="ts" setup>
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
@@ -45,6 +45,10 @@ import Layout from '@editor/components/Layout.vue';
 import type { ListState, Services } from '@editor/type';
 import { serializeConfig } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
 
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index da09655a..98a437e1 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -55,7 +55,7 @@
   </TMagicScrollbar>
 </template>
 
-<script setup lang="ts" name="MEditorCodeBlockList">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
@@ -71,6 +71,10 @@ import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
 
+defineOptions({
+  name: 'MEditorCodeBlockList',
+});
+
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
   paramsColConfig?: ColumnConfig;
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
index abd28c18..f7becefa 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
@@ -27,6 +27,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceConfigPanel',
+});
+
 const props = defineProps<{
   title?: string;
   values: any;
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 2d3f71b3..7ebd9b22 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -61,6 +61,10 @@ import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 
+defineOptions({
+  name: 'MEditorDataSourceListPanel',
+});
+
 const services = inject<Partial<Services>>('services', {});
 const { dataSourceService, depService } = inject<Services>('services') || {};
 
diff --git a/packages/editor/src/layouts/workspace/Breadcrumb.vue b/packages/editor/src/layouts/workspace/Breadcrumb.vue
index bcde3686..23538d36 100644
--- a/packages/editor/src/layouts/workspace/Breadcrumb.vue
+++ b/packages/editor/src/layouts/workspace/Breadcrumb.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorBreadcrumb">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -16,6 +16,10 @@ import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorBreadcrumb',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index 9b87e208..91e16b53 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup name="MEditorPageBar">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
@@ -58,6 +58,10 @@ import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
diff --git a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
index fce6c37d..831c6e1f 100644
--- a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorPageBarScrollContainer">
+<script setup lang="ts">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
@@ -36,6 +36,10 @@ import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index cd713a27..45cf7716 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -26,7 +26,7 @@
   </ScrollViewer>
 </template>
 
-<script lang="ts" setup name="MEditorStage">
+<script lang="ts" setup>
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -39,6 +39,10 @@ import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineOptions({
+  name: 'MEditorStage',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();
diff --git a/packages/editor/src/layouts/workspace/ViewerMenu.vue b/packages/editor/src/layouts/workspace/ViewerMenu.vue
index 1c82ba8f..f1ae919a 100644
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup name="MEditorViewerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
@@ -14,6 +14,10 @@ import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorViewerMenu',
+});
+
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
   { isMultiSelect: false },
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index 9d598fdc..14766687 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorWorkspace">
+<script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
@@ -27,6 +27,10 @@ import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
+defineOptions({
+  name: 'MEditorWorkspace',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
index 0d22aa27..4a0892dc 100644
--- a/packages/editor/vite.config.ts
+++ b/packages/editor/vite.config.ts
@@ -19,13 +19,12 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue(), VueSetupExtend()],
+  plugins: [vue()],
 
   resolve: {
     alias:
diff --git a/packages/element-plus-adapter/package.json b/packages/element-plus-adapter/package.json
index 24fc9c47..46b1ea44 100644
--- a/packages/element-plus-adapter/package.json
+++ b/packages/element-plus-adapter/package.json
@@ -36,12 +36,14 @@
     "typescript"
   ],
   "dependencies": {
+    "@tmagic/design": "^1.2.15",
     "element-plus": "^2.2.32",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
+    "@tmagic/design": "^1.2.15",
     "element-plus": "^2.2.32",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^15.12.4",
diff --git a/packages/element-plus-adapter/src/index.ts b/packages/element-plus-adapter/src/index.ts
index 14ed5ad2..44649159 100644
--- a/packages/element-plus-adapter/src/index.ts
+++ b/packages/element-plus-adapter/src/index.ts
@@ -48,233 +48,277 @@ import {
   ElUpload,
 } from 'element-plus';
 
+import type {
+  AutocompleteProps,
+  BadgeProps,
+  ButtonProps,
+  CardProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  CollapseItemProps,
+  CollapseProps,
+  ColorPickerProps,
+  ColProps,
+  DatePickerProps,
+  DialogProps,
+  DividerProps,
+  DrawerProps,
+  DropdownItemProps,
+  DropdownProps,
+  FormItemProps,
+  FormProps,
+  InputNumberProps,
+  InputProps,
+  OptionGroupProps,
+  OptionProps,
+  PaginationProps,
+  PopoverProps,
+  RadioButtonProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  StepProps,
+  StepsProps,
+  SwitchProps,
+  TableColumnProps,
+  TableProps,
+  TabPaneProps,
+  TabsProps,
+  TagProps,
+  TimePickerProps,
+  TooltipProps,
+  TreeProps,
+  UploadProps,
+} from '@tmagic/design';
+
 const adapter: any = {
   message: ElMessage,
   messageBox: ElMessageBox,
   components: {
     autocomplete: {
       component: ElAutocomplete,
-      props: (props: any) => props,
+      props: (props: AutocompleteProps) => props,
     },
 
     badge: {
       component: ElBadge,
-      props: (props: any) => props,
+      props: (props: BadgeProps) => props,
     },
 
     button: {
       component: ElButton,
-      props: (props: any) => props,
+      props: (props: ButtonProps) => props,
     },
 
     card: {
       component: ElCard,
-      props: (props: any) => props,
+      props: (props: CardProps) => props,
     },
 
     cascader: {
       component: ElCascader,
-      props: (props: any) => props,
+      props: (props: CascaderProps) => props,
     },
 
     checkbox: {
       component: ElCheckbox,
-      props: (props: any) => props,
+      props: (props: CheckboxProps) => props,
     },
 
     checkboxGroup: {
       component: ElCheckboxGroup,
-      props: (props: any) => props,
+      props: (props: CheckboxGroupProps) => props,
     },
 
     col: {
       component: ElCol,
-      props: (props: any) => props,
+      props: (props: ColProps) => props,
     },
 
     collapse: {
       component: ElCollapse,
-      props: (props: any) => props,
+      props: (props: CollapseProps) => props,
     },
 
     collapseItem: {
       component: ElCollapseItem,
-      props: (props: any) => props,
+      props: (props: CollapseItemProps) => props,
     },
 
     colorPicker: {
       component: ElColorPicker,
-      props: (props: any) => props,
+      props: (props: ColorPickerProps) => props,
     },
 
     datePicker: {
       component: ElDatePicker,
-      props: (props: any) => props,
+      props: (props: DatePickerProps) => props,
     },
 
     dialog: {
       component: ElDialog,
-      props: (props: any) => props,
+      props: (props: DialogProps) => props,
     },
 
     divider: {
       component: ElDivider,
-      props: (props: any) => props,
+      props: (props: DividerProps) => props,
     },
 
     drawer: {
       component: ElDrawer,
-      props: (props: any) => props,
+      props: (props: DrawerProps) => props,
     },
 
     dropdown: {
       component: ElDropdown,
-      props: (props: any) => props,
+      props: (props: DropdownProps) => props,
     },
 
     dropdownItem: {
       component: ElDropdownItem,
-      props: (props: any) => props,
+      props: (props: DropdownItemProps) => props,
     },
 
     dropdownMenu: {
       component: ElDropdownMenu,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     form: {
       component: ElForm,
-      props: (props: any) => props,
+      props: (props: FormProps) => props,
     },
 
     formItem: {
       component: ElFormItem,
-      props: (props: any) => props,
+      props: (props: FormItemProps) => props,
     },
 
     icon: {
       component: ElIcon,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     input: {
       component: ElInput,
-      props: (props: any) => props,
+      props: (props: InputProps) => props,
     },
 
     inputNumber: {
       component: ElInputNumber,
-      props: (props: any) => props,
+      props: (props: InputNumberProps) => props,
     },
 
     option: {
       component: ElOption,
-      props: (props: any) => props,
+      props: (props: OptionProps) => props,
     },
 
     optionGroup: {
       component: ElOptionGroup,
-      props: (props: any) => props,
+      props: (props: OptionGroupProps) => props,
     },
 
     pagination: {
       component: ElPagination,
-      props: (props: any) => props,
+      props: (props: PaginationProps) => props,
     },
 
     popover: {
       component: ElPopover,
-      props: (props: any) => props,
+      props: (props: PopoverProps) => props,
     },
 
     radio: {
       component: ElRadio,
-      props: (props: any) => props,
+      props: (props: RadioProps) => props,
     },
 
     radioButton: {
       component: ElRadioButton,
-      props: (props: any) => props,
+      props: (props: RadioButtonProps) => props,
     },
 
     radioGroup: {
       component: ElRadioGroup,
-      props: (props: any) => props,
+      props: (props: RadioGroupProps) => props,
     },
 
     row: {
       component: ElRow,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     scrollbar: {
       component: ElScrollbar,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     select: {
       component: ElSelect,
-      props: (props: any) => props,
+      props: (props: SelectProps) => props,
     },
 
     step: {
       component: ElStep,
-      props: (props: any) => props,
+      props: (props: StepProps) => props,
     },
 
     steps: {
       component: ElSteps,
-      props: (props: any) => props,
+      props: (props: StepsProps) => props,
     },
 
     switch: {
       component: ElSwitch,
-      props: (props: any) => props,
+      props: (props: SwitchProps) => props,
     },
 
     table: {
       component: ElTable,
-      props: (props: any) => props,
+      props: (props: TableProps) => props,
     },
 
     tableColumn: {
       component: ElTableColumn,
-      props: (props: any) => props,
+      props: (props: TableColumnProps) => props,
     },
 
     tabPane: {
       component: ElTabPane,
-      props: (props: any) => props,
+      props: (props: TabPaneProps) => props,
     },
 
     tabs: {
       component: ElTabs,
-      props: (props: any) => props,
+      props: (props: TabsProps) => props,
     },
 
     tag: {
       component: ElTag,
-      props: (props: any) => props,
+      props: (props: TagProps) => props,
     },
 
     timePicker: {
       component: ElTimePicker,
-      props: (props: any) => props,
+      props: (props: TimePickerProps) => props,
     },
 
     tooltip: {
       component: ElTooltip,
-      props: (props: any) => props,
+      props: (props: TooltipProps) => props,
     },
 
     tree: {
       component: ElTree,
-      props: (props: any) => props,
+      props: (props: TreeProps) => props,
     },
 
     upload: {
       component: ElUpload,
-      props: (props: any) => props,
+      props: (props: UploadProps) => props,
     },
   },
 };
diff --git a/packages/form/package.json b/packages/form/package.json
index 5f4a198a..29742987 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -40,24 +40,23 @@
     "@tmagic/utils": "1.2.15",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.5"
   }
 }
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 37f9ff04..021e1aa9 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -26,7 +26,7 @@
   </TMagicForm>
 </template>
 
-<script setup lang="ts" name="MForm">
+<script setup lang="ts">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
 import { isEqual } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
@@ -38,6 +38,10 @@ import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
 
+defineOptions({
+  name: 'MForm',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */
diff --git a/packages/form/src/FormDialog.vue b/packages/form/src/FormDialog.vue
index 83881940..dc9719c1 100644
--- a/packages/form/src/FormDialog.vue
+++ b/packages/form/src/FormDialog.vue
@@ -56,7 +56,7 @@
   </TMagicDialog>
 </template>
 
-<script setup lang="ts" name="MFormDialog">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
@@ -64,6 +64,10 @@ import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design
 import Form from './Form.vue';
 import { FormConfig, StepConfig } from './schema';
 
+defineOptions({
+  name: 'MFormDialog',
+});
+
 const props = withDefaults(
   defineProps<{
     config?: FormConfig;
diff --git a/packages/form/src/containers/Col.vue b/packages/form/src/containers/Col.vue
index 409f9352..b3683c65 100644
--- a/packages/form/src/containers/Col.vue
+++ b/packages/form/src/containers/Col.vue
@@ -16,7 +16,7 @@
   </TMagicCol>
 </template>
 
-<script setup lang="ts" name="MFormCol">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
@@ -26,6 +26,10 @@ import { display as displayFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormCol',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index 31f31ff3..64ea11fa 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -218,7 +218,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormContainer">
+<script setup lang="ts">
 import { computed, inject, ref, resolveComponent, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
@@ -228,6 +228,10 @@ import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
+defineOptions({
+  name: 'MFormContainer',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单值 */
diff --git a/packages/form/src/containers/Fieldset.vue b/packages/form/src/containers/Fieldset.vue
index 2cf96d84..adb84627 100644
--- a/packages/form/src/containers/Fieldset.vue
+++ b/packages/form/src/containers/Fieldset.vue
@@ -61,7 +61,7 @@
   </fieldset>
 </template>
 
-<script lang="ts" setup name="MFormFieldset">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -70,6 +70,10 @@ import { FieldsetConfig, FormState } from '../schema';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormFieldset',
+});
+
 const props = withDefaults(
   defineProps<{
     labelWidth?: string;
diff --git a/packages/form/src/containers/GroupList.vue b/packages/form/src/containers/GroupList.vue
index e46a2df1..6c3eaca7 100644
--- a/packages/form/src/containers/GroupList.vue
+++ b/packages/form/src/containers/GroupList.vue
@@ -31,7 +31,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupList">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 
@@ -42,6 +42,10 @@ import { initValue } from '../utils/form';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
+defineOptions({
+  name: 'MFormGroupList',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;
diff --git a/packages/form/src/containers/GroupListItem.vue b/packages/form/src/containers/GroupListItem.vue
index 4cc74c48..e637e044 100644
--- a/packages/form/src/containers/GroupListItem.vue
+++ b/packages/form/src/containers/GroupListItem.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupListItem">
+<script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
@@ -53,6 +53,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormGroupListItem',
+});
+
 const props = defineProps<{
   model: any;
   lastValues: any;
diff --git a/packages/form/src/containers/Panel.vue b/packages/form/src/containers/Panel.vue
index a4ddda5d..ee2f9d7f 100644
--- a/packages/form/src/containers/Panel.vue
+++ b/packages/form/src/containers/Panel.vue
@@ -57,7 +57,7 @@
   </TMagicCard>
 </template>
 
-<script setup lang="ts" name="MFormPanel">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
@@ -68,6 +68,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormPanel',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;
diff --git a/packages/form/src/containers/Row.vue b/packages/form/src/containers/Row.vue
index b009601b..82de1193 100644
--- a/packages/form/src/containers/Row.vue
+++ b/packages/form/src/containers/Row.vue
@@ -19,7 +19,7 @@
   </TMagicRow>
 </template>
 
-<script setup lang="ts" name="MFormRow">
+<script setup lang="ts">
 import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
@@ -28,6 +28,10 @@ import { FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
+defineOptions({
+  name: 'MFormRow',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;
diff --git a/packages/form/src/containers/Step.vue b/packages/form/src/containers/Step.vue
index 21722eac..19e1d19b 100644
--- a/packages/form/src/containers/Step.vue
+++ b/packages/form/src/containers/Step.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormStep">
+<script setup lang="ts">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
@@ -41,6 +41,10 @@ import { FormState, StepConfig } from '../schema';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormStep',
+});
+
 const props = withDefaults(
   defineProps<{
     model: any;
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index d295f999..f4fa6025 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -174,7 +174,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormTable">
+<script setup lang="ts">
 import { computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
@@ -197,6 +197,10 @@ import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormTable',
+});
+
 const props = withDefaults(
   defineProps<{
     model: any;
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index 1817a6ed..5e1e1e47 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -67,7 +67,7 @@
   </component>
 </template>
 
-<script setup lang="ts" name="MFormTabs">
+<script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
@@ -78,6 +78,10 @@ import { display as displayFunc, filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormTabs',
+});
+
 type DiffCount = {
   [tabIndex: number]: number;
 };
diff --git a/packages/form/src/fields/Cascader.vue b/packages/form/src/fields/Cascader.vue
index bc4399a5..ac5744b7 100644
--- a/packages/form/src/fields/Cascader.vue
+++ b/packages/form/src/fields/Cascader.vue
@@ -14,7 +14,7 @@
   ></TMagicCascader>
 </template>
 
-<script setup lang="ts" name="MFormCascader">
+<script setup lang="ts">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
@@ -23,6 +23,10 @@ import { CascaderConfig, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormCascader',
+});
+
 const props = defineProps<{
   config: CascaderConfig;
   model: any;
diff --git a/packages/form/src/fields/Checkbox.vue b/packages/form/src/fields/Checkbox.vue
index fc1474bf..352b73d1 100644
--- a/packages/form/src/fields/Checkbox.vue
+++ b/packages/form/src/fields/Checkbox.vue
@@ -10,7 +10,7 @@
   >
 </template>
 
-<script setup lang="ts" name="MFormCheckbox">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -18,6 +18,10 @@ import { TMagicCheckbox } from '@tmagic/design';
 import { CheckboxConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormCheckbox',
+});
+
 const props = defineProps<{
   config: CheckboxConfig;
   model: any;
diff --git a/packages/form/src/fields/CheckboxGroup.vue b/packages/form/src/fields/CheckboxGroup.vue
index a8ae6cc0..0381b979 100644
--- a/packages/form/src/fields/CheckboxGroup.vue
+++ b/packages/form/src/fields/CheckboxGroup.vue
@@ -11,14 +11,18 @@
   </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts" setup name="MFormCheckGroup">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
 import { CheckboxGroupConfig, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
-import { filterFunction } from '..';
+
+defineOptions({
+  name: 'MFormCheckGroup',
+});
 
 const props = defineProps<{
   config: CheckboxGroupConfig;
diff --git a/packages/form/src/fields/ColorPicker.vue b/packages/form/src/fields/ColorPicker.vue
index bc55bccf..6d81083b 100644
--- a/packages/form/src/fields/ColorPicker.vue
+++ b/packages/form/src/fields/ColorPicker.vue
@@ -8,12 +8,16 @@
   ></TMagicColorPicker>
 </template>
 
-<script lang="ts" setup name="MFormColorPicker">
+<script lang="ts" setup>
 import { TMagicColorPicker } from '@tmagic/design';
 
 import { ColorPickConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormColorPicker',
+});
+
 const props = defineProps<{
   config: ColorPickConfig;
   model: any;
diff --git a/packages/form/src/fields/Date.vue b/packages/form/src/fields/Date.vue
index f134dc4c..e848176c 100644
--- a/packages/form/src/fields/Date.vue
+++ b/packages/form/src/fields/Date.vue
@@ -11,13 +11,17 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDate">
+<script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DateConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDate',
+});
+
 const props = defineProps<{
   config: DateConfig;
   model: any;
diff --git a/packages/form/src/fields/DateTime.vue b/packages/form/src/fields/DateTime.vue
index 51aee1c9..42130f18 100644
--- a/packages/form/src/fields/DateTime.vue
+++ b/packages/form/src/fields/DateTime.vue
@@ -13,13 +13,17 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDateTime">
+<script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DateTimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDateTime',
+});
+
 const props = defineProps<{
   config: DateTimeConfig;
   model: any;
diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index 1c03ddb4..6700958b 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/packages/form/src/fields/Daterange.vue
@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDateRange">
+<script lang="ts" setup>
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
@@ -22,6 +22,10 @@ import { datetimeFormatter } from '@tmagic/utils';
 import { DaterangeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDateRange',
+});
+
 const props = defineProps<{
   config: DaterangeConfig;
   model: any;
diff --git a/packages/form/src/fields/Display.vue b/packages/form/src/fields/Display.vue
index 3f654b0e..af2ed2fb 100644
--- a/packages/form/src/fields/Display.vue
+++ b/packages/form/src/fields/Display.vue
@@ -2,10 +2,14 @@
   <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script setup lang="ts" name="MFormDisplay">
+<script setup lang="ts">
 import { DisplayConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDisplay',
+});
+
 const props = defineProps<{
   config: DisplayConfig;
   model: any;
diff --git a/packages/form/src/fields/DynamicField.vue b/packages/form/src/fields/DynamicField.vue
index 493d6246..6efb7ad8 100644
--- a/packages/form/src/fields/DynamicField.vue
+++ b/packages/form/src/fields/DynamicField.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MFormDynamicField">
+<script lang="ts" setup>
 /**
  * 动态表单，目前只支持input类型字段
  * inputType: 'dynamic-field',
@@ -31,6 +31,10 @@ import { DynamicFieldConfig } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDynamicField',
+});
+
 const props = defineProps<{
   config: DynamicFieldConfig;
   model: any;
diff --git a/packages/form/src/fields/Hidden.vue b/packages/form/src/fields/Hidden.vue
index 231fe52b..8df1d121 100644
--- a/packages/form/src/fields/Hidden.vue
+++ b/packages/form/src/fields/Hidden.vue
@@ -2,10 +2,14 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts" name="MFormHidden">
+<script setup lang="ts">
 import { HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormHidden',
+});
+
 const props = defineProps<{
   config: HiddenConfig;
   model: any;
diff --git a/packages/form/src/fields/Link.vue b/packages/form/src/fields/Link.vue
index e6d81cd2..b939f633 100644
--- a/packages/form/src/fields/Link.vue
+++ b/packages/form/src/fields/Link.vue
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MFormLink">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -25,6 +25,10 @@ import FormDialog from '../FormDialog.vue';
 import { FormState, LinkConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormLink',
+});
+
 const props = defineProps<{
   config: LinkConfig;
   model: any;
diff --git a/packages/form/src/fields/Number.vue b/packages/form/src/fields/Number.vue
index 6645936c..48d11bf5 100644
--- a/packages/form/src/fields/Number.vue
+++ b/packages/form/src/fields/Number.vue
@@ -15,7 +15,7 @@
   ></TMagicInputNumber>
 </template>
 
-<script lang="ts" setup name="MFormNumber">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
@@ -23,6 +23,10 @@ import { TMagicInputNumber } from '@tmagic/design';
 import { FormState, NumberConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormNumber',
+});
+
 const props = defineProps<{
   config: NumberConfig;
   model: any;
diff --git a/packages/form/src/fields/RadioGroup.vue b/packages/form/src/fields/RadioGroup.vue
index 3c1e95ef..75ea07a6 100644
--- a/packages/form/src/fields/RadioGroup.vue
+++ b/packages/form/src/fields/RadioGroup.vue
@@ -10,12 +10,16 @@
   </TMagicRadioGroup>
 </template>
 
-<script lang="ts" setup name="MFormRadioGroup">
+<script lang="ts" setup>
 import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
 import { RadioGroupConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormRadioGroup',
+});
+
 const props = defineProps<{
   config: RadioGroupConfig;
   model: any;
diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index f5d1064a..4773bf84 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -25,7 +25,7 @@
   </TMagicSelect>
 </template>
 
-<script lang="ts" setup name="MFormSelect">
+<script lang="ts" setup>
 import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
@@ -38,6 +38,10 @@ import { useAddField } from '../utils/useAddField';
 import SelectOptionGroups from './SelectOptionGroups.vue';
 import SelectOptions from './SelectOptions.vue';
 
+defineOptions({
+  name: 'MFormSelect',
+});
+
 const props = defineProps<{
   config: SelectConfig;
   model: any;
diff --git a/packages/form/src/fields/SelectOptionGroups.vue b/packages/form/src/fields/SelectOptionGroups.vue
index 9252abe3..e28e6964 100644
--- a/packages/form/src/fields/SelectOptionGroups.vue
+++ b/packages/form/src/fields/SelectOptionGroups.vue
@@ -12,11 +12,15 @@
   </TMagicOptionGroup>
 </template>
 
-<script lang="ts" setup name="MFormSelectOptionGroups">
+<script lang="ts" setup>
 import { getConfig, TMagicOptionGroup } from '@tmagic/design';
 
 import { SelectGroupOption } from '../schema';
 
+defineOptions({
+  name: 'MFormSelectOptionGroups',
+});
+
 defineProps<{
   options: SelectGroupOption[];
 }>();
diff --git a/packages/form/src/fields/SelectOptions.vue b/packages/form/src/fields/SelectOptions.vue
index e920c2a5..3c65028a 100644
--- a/packages/form/src/fields/SelectOptions.vue
+++ b/packages/form/src/fields/SelectOptions.vue
@@ -8,11 +8,15 @@
   ></TMagicOption>
 </template>
 
-<script lang="ts" setup name="MFormSelectOptions">
+<script lang="ts" setup>
 import { TMagicOption } from '@tmagic/design';
 
 import { SelectOption } from '../schema';
 
+defineOptions({
+  name: 'MFormSelectOptions',
+});
+
 defineProps<{
   options: SelectOption[];
   valueKey?: string;
diff --git a/packages/form/src/fields/Switch.vue b/packages/form/src/fields/Switch.vue
index 7df52776..b042f00c 100644
--- a/packages/form/src/fields/Switch.vue
+++ b/packages/form/src/fields/Switch.vue
@@ -9,7 +9,7 @@
   ></TMagicSwitch>
 </template>
 
-<script lang="ts" setup name="MFormSwitch">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
@@ -17,6 +17,10 @@ import { TMagicSwitch } from '@tmagic/design';
 import { SwitchConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormSwitch',
+});
+
 const props = defineProps<{
   config: SwitchConfig;
   model: any;
diff --git a/packages/form/src/fields/Text.vue b/packages/form/src/fields/Text.vue
index 59d3fa2c..74855023 100644
--- a/packages/form/src/fields/Text.vue
+++ b/packages/form/src/fields/Text.vue
@@ -23,7 +23,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup name="MFormText">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
@@ -32,6 +32,10 @@ import { isNumber } from '@tmagic/utils';
 import { FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormText',
+});
+
 const props = defineProps<{
   config: TextConfig;
   model: any;
diff --git a/packages/form/src/fields/Textarea.vue b/packages/form/src/fields/Textarea.vue
index 29432238..8f897a2b 100644
--- a/packages/form/src/fields/Textarea.vue
+++ b/packages/form/src/fields/Textarea.vue
@@ -12,7 +12,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup name="MFormTextarea">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
@@ -20,6 +20,10 @@ import { TMagicInput } from '@tmagic/design';
 import { FormState, TextareaConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormTextarea',
+});
+
 const props = defineProps<{
   config: TextareaConfig;
   model: any;
diff --git a/packages/form/src/fields/Time.vue b/packages/form/src/fields/Time.vue
index 0959ff45..6ba9fc77 100644
--- a/packages/form/src/fields/Time.vue
+++ b/packages/form/src/fields/Time.vue
@@ -10,12 +10,16 @@
   ></TMagicTimePicker>
 </template>
 
-<script lang="ts" setup name="MFormTime">
+<script lang="ts" setup>
 import { TMagicTimePicker } from '@tmagic/design';
 
 import { TimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormTime',
+});
+
 const props = defineProps<{
   config: TimeConfig;
   model: any;
diff --git a/packages/form/vite.config.ts b/packages/form/vite.config.ts
index 35c7734b..41fcbb81 100644
--- a/packages/form/vite.config.ts
+++ b/packages/form/vite.config.ts
@@ -19,13 +19,12 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue(), VueSetupExtend()],
+  plugins: [vue()],
 
   resolve: {
     alias:
diff --git a/packages/table/package.json b/packages/table/package.json
index ddd4c6ce..75458463 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -37,24 +37,23 @@
     "@tmagic/form": "1.2.15",
     "@tmagic/utils": "1.2.15",
     "lodash-es": "^4.17.21",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "@tmagic/form": "1.2.15",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.5"
   }
 }
diff --git a/packages/table/src/ActionsColumn.vue b/packages/table/src/ActionsColumn.vue
index 06fb960e..72548346 100644
--- a/packages/table/src/ActionsColumn.vue
+++ b/packages/table/src/ActionsColumn.vue
@@ -35,11 +35,15 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTableActionsColumn">
+<script lang="ts" setup>
 import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
 
+defineOptions({
+  name: 'MTableActionsColumn',
+});
+
 const props = withDefaults(
   defineProps<{
     columns: any[];
diff --git a/packages/table/src/ExpandColumn.vue b/packages/table/src/ExpandColumn.vue
index 08ca4d80..db6d1aeb 100644
--- a/packages/table/src/ExpandColumn.vue
+++ b/packages/table/src/ExpandColumn.vue
@@ -18,13 +18,17 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTableExpandColumn">
+<script lang="ts" setup>
 import { TMagicTableColumn } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 
 import { ColumnConfig } from './schema';
 import MTable from './Table.vue';
 
+defineOptions({
+  name: 'MTableExpandColumn',
+});
+
 const props = withDefaults(
   defineProps<{
     config: ColumnConfig;
diff --git a/packages/table/src/PopoverColumn.vue b/packages/table/src/PopoverColumn.vue
index aed3052a..bab2908d 100644
--- a/packages/table/src/PopoverColumn.vue
+++ b/packages/table/src/PopoverColumn.vue
@@ -21,13 +21,17 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTablePopoverColumn">
+<script lang="ts" setup>
 import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import MTable from './Table.vue';
 import { formatter } from './utils';
 
+defineOptions({
+  name: 'MTablePopoverColumn',
+});
+
 withDefaults(
   defineProps<{
     config: ColumnConfig;
diff --git a/packages/table/src/Table.vue b/packages/table/src/Table.vue
index 7b81df7d..3911b887 100644
--- a/packages/table/src/Table.vue
+++ b/packages/table/src/Table.vue
@@ -57,7 +57,7 @@
   </TMagicTable>
 </template>
 
-<script lang="ts" setup name="MTable">
+<script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -68,6 +68,10 @@ import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';
 
+defineOptions({
+  name: 'MTable',
+});
+
 const props = withDefaults(
   defineProps<{
     data: any[];
diff --git a/packages/table/src/TextColumn.vue b/packages/table/src/TextColumn.vue
index 74f105e6..4f0a0580 100644
--- a/packages/table/src/TextColumn.vue
+++ b/packages/table/src/TextColumn.vue
@@ -57,12 +57,16 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTableColumn">
+<script lang="ts" setup>
 import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
 
+defineOptions({
+  name: 'MTableColumn',
+});
+
 withDefaults(
   defineProps<{
     config: ColumnConfig;
diff --git a/packages/table/vite.config.ts b/packages/table/vite.config.ts
index 4e84a7bb..d9e19011 100644
--- a/packages/table/vite.config.ts
+++ b/packages/table/vite.config.ts
@@ -19,13 +19,12 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue(), VueSetupExtend()],
+  plugins: [vue()],
 
   resolve: {
     alias:
diff --git a/packages/tdesign-vue-next-adapter/package.json b/packages/tdesign-vue-next-adapter/package.json
index 4a02bb81..1f0ab9ec 100644
--- a/packages/tdesign-vue-next-adapter/package.json
+++ b/packages/tdesign-vue-next-adapter/package.json
@@ -36,16 +36,18 @@
     "typescript"
   ],
   "dependencies": {
-    "tdesign-vue-next": "^1.3.1",
-    "vue": "^3.2.37"
+    "@tmagic/design": "^1.2.15",
+    "tdesign-vue-next": "^1.3.4",
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "tdesign-vue-next": "^1.3.1",
-    "vue": "^3.2.37"
+    "@tmagic/design": "^1.2.15",
+    "tdesign-vue-next": "^1.3.4",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
     "@types/node": "^15.12.4",
     "rimraf": "^3.0.2",
     "typescript": "^5.0.4",
diff --git a/packages/tdesign-vue-next-adapter/src/DatePicker.vue b/packages/tdesign-vue-next-adapter/src/DatePicker.vue
index 4af3d061..c95ea7e8 100644
--- a/packages/tdesign-vue-next-adapter/src/DatePicker.vue
+++ b/packages/tdesign-vue-next-adapter/src/DatePicker.vue
@@ -31,23 +31,14 @@
 import { computed } from 'vue';
 import { DatePicker as TDatePicker, DateRangePicker as TDateRangePicker } from 'tdesign-vue-next';
 
+import type { DatePickerProps } from '@tmagic/design';
+
 const props = withDefaults(
-  defineProps<{
-    type?: any;
-    modelValue?: any;
-    disabled?: boolean;
-    placeholder?: string;
-    rangeSeparator?: string;
-    startPlaceholder?: string;
-    endPlaceholder?: string;
-    format?: string;
-    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
-    valueFormat?: any;
-    /** 在范围选择器里取消两个日期面板之间的联动 */
-    unlinkPanels?: boolean;
-    defaultTime?: any;
-    size?: 'large' | 'default' | 'small';
-  }>(),
+  defineProps<
+    DatePickerProps & {
+      valueFormat: any;
+    }
+  >(),
   {
     type: 'date',
   },
diff --git a/packages/tdesign-vue-next-adapter/src/Input.vue b/packages/tdesign-vue-next-adapter/src/Input.vue
index c2205eb7..742e6fe2 100644
--- a/packages/tdesign-vue-next-adapter/src/Input.vue
+++ b/packages/tdesign-vue-next-adapter/src/Input.vue
@@ -31,14 +31,13 @@
 <script lang="ts" setup>
 import { Input as TInput, Textarea as TTextarea } from 'tdesign-vue-next';
 
-defineProps<{
-  modelValue?: string;
-  clearable?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  type?: string;
-  size?: 'large' | 'default' | 'small';
-}>();
+import type { InputProps } from '@tmagic/design';
+
+defineProps<
+  InputProps & {
+    modelValue: string;
+  }
+>();
 
 const emit = defineEmits(['change', 'input', 'update:modelValue']);
 
diff --git a/packages/tdesign-vue-next-adapter/src/Tree.vue b/packages/tdesign-vue-next-adapter/src/Tree.vue
index ba566472..14c72cb6 100644
--- a/packages/tdesign-vue-next-adapter/src/Tree.vue
+++ b/packages/tdesign-vue-next-adapter/src/Tree.vue
@@ -27,32 +27,9 @@
 import { computed, h, ref } from 'vue';
 import { Tree as TTree, TreeNodeModel, TreeNodeValue } from 'tdesign-vue-next';
 
-const props = defineProps<{
-  data?: any[];
-  emptyText?: string;
-  nodeKey?: string;
-  props?: any;
-  renderAfterExpand?: boolean;
-  load?: any;
-  renderContent?: any;
-  highlightCurrent?: boolean;
-  defaultExpandAll?: boolean;
-  checkOnClickNode?: boolean;
-  autoExpandParent?: boolean;
-  defaultExpandedKeys?: any[];
-  showCheckbox?: boolean;
-  checkStrictly?: boolean;
-  defaultCheckedKeys?: any[];
-  currentNodeKey?: string | number;
-  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
-  accordion?: boolean;
-  indent?: number;
-  icon?: any;
-  lazy?: boolean;
-  draggable?: boolean;
-  allowDrag?: (node: any) => boolean;
-  allowDrop?: any;
-}>();
+import type { TreeProps } from '@tmagic/design';
+
+const props = defineProps<TreeProps>();
 
 const nodeKeys = computed(() => ({
   value: props.props?.value || 'value',
diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts
index 886854db..97c8ec7c 100644
--- a/packages/tdesign-vue-next-adapter/src/index.ts
+++ b/packages/tdesign-vue-next-adapter/src/index.ts
@@ -42,6 +42,48 @@ import {
   Upload as TUpload,
 } from 'tdesign-vue-next';
 
+import type {
+  BadgeProps,
+  ButtonProps,
+  CardProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  CollapseItemProps,
+  CollapseProps,
+  ColorPickerProps,
+  ColProps,
+  DatePickerProps,
+  DialogProps,
+  DrawerProps,
+  DropdownItemProps,
+  DropdownProps,
+  FormItemProps,
+  FormProps,
+  InputNumberProps,
+  InputProps,
+  OptionGroupProps,
+  OptionProps,
+  PaginationProps,
+  PopoverProps,
+  RadioButtonProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  StepProps,
+  StepsProps,
+  SwitchProps,
+  TableColumnProps,
+  TableProps,
+  TabPaneProps,
+  TabsProps,
+  TagProps,
+  TimePickerProps,
+  TooltipProps,
+  TreeProps,
+  UploadProps,
+} from '@tmagic/design';
+
 import DatePicker from './DatePicker.vue';
 import Icon from './Icon.vue';
 import Input from './Input.vue';
@@ -71,7 +113,7 @@ const adapter: any = {
   components: {
     badge: {
       component: TBadge,
-      props: (props: any) => ({
+      props: (props: BadgeProps) => ({
         count: props.value,
         dot: props.isDot,
         maxCount: props.max,
@@ -80,7 +122,7 @@ const adapter: any = {
 
     button: {
       component: TButton,
-      props: (props: any) => ({
+      props: (props: ButtonProps) => ({
         theme: props.type,
         size: props.size === 'default' ? 'medium' : props.size,
         icon: () => (props.icon ? h(props.icon) : null),
@@ -90,7 +132,7 @@ const adapter: any = {
 
     card: {
       component: TCard,
-      props: (props: any) => ({
+      props: (props: CardProps) => ({
         shadow: props.shadow !== 'never',
         hoverShadow: props.shadow === 'hover',
         header: props.header,
@@ -99,7 +141,7 @@ const adapter: any = {
 
     cascader: {
       component: TCascader,
-      props: (props: any) => ({
+      props: (props: CascaderProps) => ({
         modelValue: props.modelValue,
         placeholder: props.placeholder,
         disabled: props.disabled,
@@ -117,7 +159,7 @@ const adapter: any = {
 
     checkbox: {
       component: TCheckbox,
-      props: (props: any) => ({
+      props: (props: CheckboxProps) => ({
         modelValue: props.modelValue,
         label: props.label,
         value: props.value,
@@ -127,7 +169,7 @@ const adapter: any = {
 
     checkboxGroup: {
       component: TCheckboxGroup,
-      props: (props: any) => ({
+      props: (props: CheckboxGroupProps) => ({
         modelValue: props.modelValue,
         label: props.label,
         disabled: props.disabled,
@@ -136,14 +178,14 @@ const adapter: any = {
 
     col: {
       component: TCol,
-      props: (props: any) => ({
+      props: (props: ColProps) => ({
         span: props.span,
       }),
     },
 
     collapse: {
       component: TCollapse,
-      props: (props: any) => ({
+      props: (props: CollapseProps) => ({
         value: props.modelValue,
         expandIconPlacement: 'right',
       }),
@@ -151,7 +193,7 @@ const adapter: any = {
 
     collapseItem: {
       component: TCollapsePanel,
-      props: (props: any) => ({
+      props: (props: CollapseItemProps) => ({
         value: props.name,
         header: props.title,
         disabled: props.disabled,
@@ -160,7 +202,7 @@ const adapter: any = {
 
     colorPicker: {
       component: TColorPicker,
-      props: (props: any) => ({
+      props: (props: ColorPickerProps) => ({
         modelValue: props.modelValue,
         disabled: props.disabled,
         size: props.size === 'default' ? 'medium' : props.size,
@@ -171,12 +213,12 @@ const adapter: any = {
 
     datePicker: {
       component: DatePicker,
-      props: (props: any) => props,
+      props: (props: DatePickerProps) => props,
     },
 
     dialog: {
       component: TDialog,
-      props: (props: any) => ({
+      props: (props: DialogProps) => ({
         visible: props.modelValue,
         attach: props.appendToBody ? 'body' : '',
         header: props.title,
@@ -196,7 +238,7 @@ const adapter: any = {
 
     drawer: {
       component: TDrawer,
-      props: (props: any) => ({
+      props: (props: DrawerProps) => ({
         visible: props.modelValue,
         size: props.size,
         closeOnEscKeydown: props.closeOnPressEscape,
@@ -213,7 +255,7 @@ const adapter: any = {
 
     dropdown: {
       component: TDropdown,
-      props: (props: any) => ({
+      props: (props: DropdownProps) => ({
         maxHeight: props.maxHeight,
         disabled: props.disable,
         direction: props.placement,
@@ -228,7 +270,7 @@ const adapter: any = {
 
     dropdownItem: {
       component: TDropdownItem,
-      props: (props: any) => ({
+      props: (props: DropdownItemProps) => ({
         disabled: props.disabled,
         divider: props.divided,
         prefixIcon: props.icon && (() => h(props.icon)),
@@ -238,12 +280,12 @@ const adapter: any = {
 
     dropdownMenu: {
       component: TDropdown,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     form: {
       component: TForm,
-      props: (props: any) => ({
+      props: (props: FormProps) => ({
         data: props.model,
         labelWidth: props.labelWidth,
         disabled: props.disabled,
@@ -254,7 +296,7 @@ const adapter: any = {
 
     formItem: {
       component: TFormItem,
-      props: (props: any) => ({
+      props: (props: FormItemProps) => ({
         labelWidth: props.labelWidth,
         name: props.prop,
         rules: props.rules,
@@ -263,17 +305,17 @@ const adapter: any = {
 
     icon: {
       component: Icon,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     input: {
       component: Input,
-      props: (props: any) => props,
+      props: (props: InputProps) => props,
     },
 
     inputNumber: {
       component: TInputNumber,
-      props: (props: any) => ({
+      props: (props: InputNumberProps) => ({
         modelValue: props.modelValue,
         align: props.controlsPosition,
         disabled: props.disabled,
@@ -287,7 +329,7 @@ const adapter: any = {
 
     option: {
       component: TOption,
-      props: (props: any) => ({
+      props: (props: OptionProps) => ({
         value: props.value,
         label: props.label,
         disabled: props.disabled,
@@ -296,12 +338,12 @@ const adapter: any = {
 
     optionGroup: {
       component: TOptionGroup,
-      props: (props: any) => props,
+      props: (props: OptionGroupProps) => props,
     },
 
     pagination: {
       component: TPagination,
-      props: (props: any) => ({
+      props: (props: PaginationProps) => ({
         current: props.curPage,
         pageSizeOptions: props.pageSizes,
         pageSize: props.pagesize,
@@ -311,7 +353,7 @@ const adapter: any = {
 
     popover: {
       component: TPopup,
-      props: (props: any) => ({
+      props: (props: PopoverProps) => ({
         placement: props.placement,
         trigger: props.trigger,
         content: props.content,
@@ -322,21 +364,21 @@ const adapter: any = {
 
     radio: {
       component: TRadio,
-      props: (props: any) => ({
+      props: (props: RadioProps) => ({
         label: props.label,
       }),
     },
 
     radioButton: {
       component: TRadioButton,
-      props: (props: any) => ({
+      props: (props: RadioButtonProps) => ({
         label: props.label,
       }),
     },
 
     radioGroup: {
       component: TRadioGroup,
-      props: (props: any) => ({
+      props: (props: RadioGroupProps) => ({
         modelValue: props.modelValue,
         disabled: props.disabled,
         size: props.size === 'default' ? 'medium' : props.size,
@@ -349,12 +391,12 @@ const adapter: any = {
 
     scrollbar: {
       component: Scrollbar,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     select: {
       component: TSelect,
-      props: (props: any) => ({
+      props: (props: SelectProps) => ({
         modelValue: props.modelValue,
         clearable: props.clearable,
         filterable: props.filterable,
@@ -372,7 +414,7 @@ const adapter: any = {
 
     step: {
       component: TStepItem,
-      props: (props: any) => ({
+      props: (props: StepProps) => ({
         title: props.props,
         value: props.status,
       }),
@@ -380,14 +422,14 @@ const adapter: any = {
 
     steps: {
       component: TSteps,
-      props: (props: any) => ({
+      props: (props: StepsProps) => ({
         current: props.active,
       }),
     },
 
     switch: {
       component: TSwitch,
-      props: (props: any) => ({
+      props: (props: SwitchProps) => ({
         modelValue: props.modelValue,
         disabled: props.disabled,
         label: props.label,
@@ -398,17 +440,17 @@ const adapter: any = {
 
     table: {
       component: TTable,
-      props: (props: any) => props,
+      props: (props: TableProps) => props,
     },
 
     tableColumn: {
       component: TableColumn,
-      props: (props: any) => props,
+      props: (props: TableColumnProps) => props,
     },
 
     tabPane: {
       component: TTabPanel,
-      props: (props: any) => ({
+      props: (props: TabPaneProps) => ({
         label: props.label,
         value: props.name,
       }),
@@ -416,7 +458,7 @@ const adapter: any = {
 
     tabs: {
       component: TTabs,
-      props: (props: any) => ({
+      props: (props: TabsProps) => ({
         addable: props.editable,
         theme: props.type === 'card' ? 'card' : 'normal',
         placement: props.tabPosition,
@@ -426,14 +468,14 @@ const adapter: any = {
 
     tag: {
       component: TTag,
-      props: (props: any) => ({
+      props: (props: TagProps) => ({
         theme: props.type ? props.type : 'default',
       }),
     },
 
     timePicker: {
       component: TTimePicker,
-      props: (props: any) => ({
+      props: (props: TimePickerProps) => ({
         modelValue: props.modelValue,
         disabled: props.disabled,
         size: props.size === 'default' ? 'medium' : props.size,
@@ -443,7 +485,7 @@ const adapter: any = {
 
     tooltip: {
       component: TTooltip,
-      props: (props: any) => ({
+      props: (props: TooltipProps) => ({
         placement: props.placement,
         content: props.content,
       }),
@@ -451,7 +493,7 @@ const adapter: any = {
 
     tree: {
       component: Tree,
-      props: (props: any) => ({
+      props: (props: TreeProps) => ({
         ...props,
         data: props.data,
         draggable: props.draggable,
@@ -477,7 +519,7 @@ const adapter: any = {
 
     upload: {
       component: TUpload,
-      props: (props: any) => ({
+      props: (props: UploadProps) => ({
         action: props.action,
         disabled: props.disabled,
         autoUpload: props.autoUpload,
diff --git a/packages/ui/package.json b/packages/ui/package.json
index dddb8e02..7c558733 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,16 +18,16 @@
     "delegate": "^3.2.0",
     "qrcode": "^1.5.0",
     "tiny-emitter": "^2.1.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "qrcode": "^1.5.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@testing-library/vue": "^6.4.2",
     "@types/qrcode": "^1.4.2",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0"
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2"
   }
 }
diff --git a/playground/package.json b/playground/package.json
index 3492f499..b02e0548 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -24,7 +24,7 @@
     "element-plus": "^2.2.32",
     "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
     "vue-router": "^4.0.10"
   },
   "devDependencies": {
@@ -32,15 +32,15 @@
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-legacy": "^4.0.3",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-sfc": "^3.3.4",
     "sass": "^1.35.1",
     "terser": "^5.14.2",
     "typescript": "^5.0.4",
     "unplugin-auto-import": "^0.12.0",
     "unplugin-vue-components": "^0.22.11",
     "vite": "^4.3.8",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b28ab259..a93a0615 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,8 +26,8 @@ importers:
         specifier: ^5.57.1
         version: 5.57.1(eslint@8.38.0)(typescript@5.0.4)
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vitest/coverage-c8':
         specifier: ^0.30.0
         version: 0.30.0(vitest@0.31.1)
@@ -48,7 +48,7 @@ importers:
         version: 3.3.0
       element-plus:
         specifier: ^2.2.32
-        version: 2.2.32(vue@3.2.37)
+        version: 2.2.32(vue@3.3.4)
       enquirer:
         specifier: ^2.3.6
         version: 2.3.6
@@ -119,8 +119,8 @@ importers:
         specifier: ^0.31.1
         version: 0.31.1(jsdom@19.0.0)
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
 
   packages/cli:
     dependencies:
@@ -221,21 +221,21 @@ importers:
   packages/design:
     dependencies:
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@types/node':
         specifier: ^15.12.4
         version: 15.12.4
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
-        specifier: ^2.0.0
-        version: 2.0.0(vue@3.2.37)
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.3.4)
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -245,12 +245,9 @@ importers:
       vite:
         specifier: ^4.3.8
         version: 4.3.8(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)
-      vite-plugin-vue-setup-extend:
-        specifier: ^0.4.0
-        version: 0.4.0(vite@4.3.8)
       vue-tsc:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.0.4)
+        specifier: ^1.6.5
+        version: 1.6.5(typescript@5.0.4)
 
   packages/editor:
     dependencies:
@@ -259,7 +256,7 @@ importers:
         version: 7.18.0
       '@element-plus/icons-vue':
         specifier: ^2.0.9
-        version: 2.0.9(vue@3.2.37)
+        version: 2.0.9(vue@3.3.4)
       '@tmagic/core':
         specifier: 1.2.15
         version: link:../core
@@ -306,8 +303,8 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@types/events':
         specifier: ^3.0.0
@@ -322,14 +319,14 @@ importers:
         specifier: ^5.0.1
         version: 5.0.1
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
-        specifier: ^2.0.0
-        version: 2.0.0(vue@3.2.37)
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.3.4)
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -345,21 +342,21 @@ importers:
       vite:
         specifier: ^4.3.8
         version: 4.3.8(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)
-      vite-plugin-vue-setup-extend:
-        specifier: ^0.4.0
-        version: 0.4.0(vite@4.3.8)
       vue-tsc:
-        specifier: ^1.0.11
-        version: 1.2.0(typescript@5.0.4)
+        specifier: ^1.6.5
+        version: 1.6.5(typescript@5.0.4)
 
   packages/element-plus-adapter:
     dependencies:
+      '@tmagic/design':
+        specifier: ^1.2.15
+        version: link:../design
       element-plus:
         specifier: ^2.2.32
-        version: 2.2.32(vue@3.2.37)
+        version: 2.2.32(vue@3.3.4)
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@types/node':
         specifier: ^15.12.4
@@ -378,7 +375,7 @@ importers:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.0.9
-        version: 2.0.9(vue@3.2.37)
+        version: 2.0.9(vue@3.3.4)
       '@tmagic/design':
         specifier: 1.2.15
         version: link:../design
@@ -392,8 +389,8 @@ importers:
         specifier: ^1.14.0
         version: 1.14.0
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@babel/core':
         specifier: ^7.18.0
@@ -408,14 +405,14 @@ importers:
         specifier: ^1.10.7
         version: 1.10.7
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
-        specifier: ^2.0.0
-        version: 2.0.0(vue@3.2.37)
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.3.4)
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -428,12 +425,9 @@ importers:
       vite:
         specifier: ^4.3.8
         version: 4.3.8(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)
-      vite-plugin-vue-setup-extend:
-        specifier: ^0.4.0
-        version: 0.4.0(vite@4.3.8)
       vue-tsc:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.0.4)
+        specifier: ^1.6.5
+        version: 1.6.5(typescript@5.0.4)
 
   packages/schema:
     devDependencies:
@@ -517,8 +511,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@types/color':
         specifier: ^3.0.1
@@ -530,14 +524,14 @@ importers:
         specifier: ^15.12.4
         version: 15.12.4
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
-        specifier: ^2.0.0
-        version: 2.0.0(vue@3.2.37)
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.3.4)
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -550,31 +544,31 @@ importers:
       vite:
         specifier: ^4.3.8
         version: 4.3.8(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)
-      vite-plugin-vue-setup-extend:
-        specifier: ^0.4.0
-        version: 0.4.0(vite@4.3.8)
       vue-tsc:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.0.4)
+        specifier: ^1.6.5
+        version: 1.6.5(typescript@5.0.4)
 
   packages/tdesign-vue-next-adapter:
     dependencies:
+      '@tmagic/design':
+        specifier: ^1.2.15
+        version: link:../design
       tdesign-vue-next:
-        specifier: ^1.3.1
-        version: 1.3.1(vue@3.2.37)
+        specifier: ^1.3.4
+        version: 1.3.4(vue@3.3.4)
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@types/node':
         specifier: ^15.12.4
         version: 15.12.4
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.2.1)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.2.1)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -606,21 +600,21 @@ importers:
         specifier: ^2.1.0
         version: 2.1.0
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@testing-library/vue':
         specifier: ^6.4.2
-        version: 6.4.2(@vue/compiler-sfc@3.2.37)(vue@3.2.37)
+        version: 6.4.2(@vue/compiler-sfc@3.3.4)(vue@3.3.4)
       '@types/qrcode':
         specifier: ^1.4.2
         version: 1.4.2
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
-        specifier: ^2.0.0
-        version: 2.0.0(vue@3.2.37)
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.3.4)
 
   packages/ui-react:
     dependencies:
@@ -701,7 +695,7 @@ importers:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.0.9
-        version: 2.0.9(vue@3.2.37)
+        version: 2.0.9(vue@3.3.4)
       '@tmagic/core':
         specifier: 1.2.15
         version: link:../packages/core
@@ -728,7 +722,7 @@ importers:
         version: link:../packages/utils
       element-plus:
         specifier: ^2.2.32
-        version: 2.2.32(vue@3.2.37)
+        version: 2.2.32(vue@3.3.4)
       monaco-editor:
         specifier: ^0.34.0
         version: 0.34.0
@@ -736,11 +730,11 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       vue-router:
         specifier: ^4.0.10
-        version: 4.0.10(vue@3.2.37)
+        version: 4.0.10(vue@3.3.4)
     devDependencies:
       '@babel/preset-env':
         specifier: ^7.21.4
@@ -755,14 +749,14 @@ importers:
         specifier: ^4.0.3
         version: 4.0.3(terser@5.14.2)(vite@4.3.8)
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.0.1
-        version: 3.0.1(vite@4.3.8)(vue@3.2.37)
+        version: 3.0.1(vite@4.3.8)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       sass:
         specifier: ^1.35.1
         version: 1.35.1
@@ -777,13 +771,13 @@ importers:
         version: 0.12.0
       unplugin-vue-components:
         specifier: ^0.22.11
-        version: 0.22.11(vue@3.2.37)
+        version: 0.22.11(vue@3.3.4)
       vite:
         specifier: ^4.3.8
         version: 4.3.8(@types/node@15.12.4)(sass@1.35.1)(terser@5.14.2)
       vue-tsc:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.0.4)
+        specifier: ^1.6.5
+        version: 1.6.5(typescript@5.0.4)
 
   runtime/react:
     dependencies:
@@ -934,8 +928,8 @@ importers:
         specifier: ^0.25.0
         version: 0.25.0
       vue:
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
     devDependencies:
       '@babel/preset-env':
         specifier: ^7.21.4
@@ -947,17 +941,17 @@ importers:
         specifier: ^4.0.3
         version: 4.0.3(terser@5.14.2)(vite@4.3.8)
       '@vitejs/plugin-vue':
-        specifier: ^4.1.0
-        version: 4.1.0(vite@4.3.8)(vue@3.2.37)
+        specifier: ^4.2.3
+        version: 4.2.3(vite@4.3.8)(vue@3.3.4)
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.0.1
-        version: 3.0.1(vite@4.3.8)(vue@3.2.37)
+        version: 3.0.1(vite@4.3.8)(vue@3.3.4)
       '@vue/compiler-sfc':
-        specifier: ^3.2.37
-        version: 3.2.37
+        specifier: ^3.3.4
+        version: 3.3.4
       '@vue/test-utils':
-        specifier: ^2.0.0
-        version: 2.0.0(vue@3.2.37)
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.3.4)
       recast:
         specifier: ^0.20.4
         version: 0.20.4
@@ -980,8 +974,8 @@ importers:
         specifier: ^4.3.8
         version: 4.3.8(@types/node@15.12.4)(sass@1.35.1)(terser@5.14.2)
       vue-tsc:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@4.3.4)
+        specifier: ^1.6.5
+        version: 1.6.5(typescript@4.3.4)
 
 packages:
 
@@ -2681,12 +2675,12 @@ packages:
     resolution: {integrity: sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==}
     dev: false
 
-  /@element-plus/icons-vue@2.0.9(vue@3.2.37):
+  /@element-plus/icons-vue@2.0.9(vue@3.3.4):
     resolution: {integrity: sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      vue: 3.2.37
+      vue: 3.3.4
 
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
@@ -3130,7 +3124,7 @@ packages:
       pretty-format: 26.6.2
     dev: true
 
-  /@testing-library/vue@6.4.2(@vue/compiler-sfc@3.2.37)(vue@3.2.37):
+  /@testing-library/vue@6.4.2(@vue/compiler-sfc@3.3.4)(vue@3.3.4):
     resolution: {integrity: sha512-L+yFRVu+zc/kwYWRaEF3gkEwUcoxhKNz74aya1NmAni2xrJORMqpY7URKxjfiJb4YchLgA47qEZ3irE11/x/+A==}
     engines: {node: '>10.18'}
     peerDependencies:
@@ -3139,9 +3133,9 @@ packages:
     dependencies:
       '@babel/runtime': 7.21.0
       '@testing-library/dom': 7.31.2
-      '@vue/compiler-sfc': 3.2.37
-      '@vue/test-utils': 2.0.0(vue@3.2.37)
-      vue: 3.2.37
+      '@vue/compiler-sfc': 3.3.4
+      '@vue/test-utils': 2.3.2(vue@3.3.4)
+      vue: 3.3.4
     dev: true
 
   /@tootallnate/once@2.0.0:
@@ -3518,7 +3512,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.8)(vue@3.2.37):
+  /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.8)(vue@3.3.4):
     resolution: {integrity: sha512-+Jb7ggL48FSPS1uhPnJbJwWa9Sr90vQ+d0InW+AhBM22n+cfuYqJZDckBc+W3QSHe1WDvewMZfa4wZOtk5pRgw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -3529,7 +3523,7 @@ packages:
       '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.21.4)
       '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.4)
       vite: 4.3.8(@types/node@15.12.4)(sass@1.35.1)(terser@5.14.2)
-      vue: 3.2.37
+      vue: 3.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3545,26 +3539,15 @@ packages:
       vue: 2.7.4
     dev: true
 
-  /@vitejs/plugin-vue@4.1.0(vite@4.2.1)(vue@3.2.37):
-    resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
+  /@vitejs/plugin-vue@4.2.3(vite@4.2.1)(vue@3.3.4):
+    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
       vite: 4.2.1(@types/node@18.15.11)(terser@5.14.2)
-      vue: 3.2.37
-    dev: true
-
-  /@vitejs/plugin-vue@4.1.0(vite@4.3.8)(vue@3.2.37):
-    resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.3.8(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)
-      vue: 3.2.37
+      vue: 3.3.4
     dev: true
 
   /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
@@ -3628,43 +3611,68 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@volar/language-core@1.3.0-alpha.0:
-    resolution: {integrity: sha512-W3uMzecHPcbwddPu4SJpUcPakRBK/y/BP+U0U6NiPpUX1tONLC4yCawt+QBJqtgJ+sfD6ztf5PyvPL3hQRqfOA==}
+  /@volar/language-core@1.4.1:
+    resolution: {integrity: sha512-EIY+Swv+TjsWpxOxujjMf1ZXqOjg9MT2VMXZ+1dKva0wD8W0L6EtptFFcCJdBbcKmGMFkr57Qzz9VNMWhs3jXQ==}
     dependencies:
-      '@volar/source-map': 1.3.0-alpha.0
+      '@volar/source-map': 1.4.1
     dev: true
 
-  /@volar/source-map@1.3.0-alpha.0:
-    resolution: {integrity: sha512-jSdizxWFvDTvkPYZnO6ew3sBZUnS0abKCbuopkc0JrIlFbznWC/fPH3iPFIMS8/IIkRxq1Jh9VVG60SmtsdaMQ==}
+  /@volar/source-map@1.4.1:
+    resolution: {integrity: sha512-bZ46ad72dsbzuOWPUtJjBXkzSQzzSejuR3CT81+GvTEI2E994D8JPXzM3tl98zyCNnjgs4OkRyliImL1dvJ5BA==}
     dependencies:
       muggle-string: 0.2.2
     dev: true
 
-  /@volar/typescript@1.3.0-alpha.0:
-    resolution: {integrity: sha512-5UItyW2cdH2mBLu4RrECRNJRgtvvzKrSCn2y3v/D61QwIDkGx4aeil6x8RFuUL5TFtV6QvVHXnsOHxNgd+sCow==}
+  /@volar/typescript@1.4.1-patch.2(typescript@4.3.4):
+    resolution: {integrity: sha512-lPFYaGt8OdMEzNGJJChF40uYqMO4Z/7Q9fHPQC/NRVtht43KotSXLrkPandVVMf9aPbiJ059eAT+fwHGX16k4w==}
+    peerDependencies:
+      typescript: '*'
     dependencies:
-      '@volar/language-core': 1.3.0-alpha.0
+      '@volar/language-core': 1.4.1
+      typescript: 4.3.4
     dev: true
 
-  /@volar/vue-language-core@1.2.0:
-    resolution: {integrity: sha512-w7yEiaITh2WzKe6u8ZdeLKCUz43wdmY/OqAmsB/PGDvvhTcVhCJ6f0W/RprZL1IhqH8wALoWiwEh/Wer7ZviMQ==}
+  /@volar/typescript@1.4.1-patch.2(typescript@5.0.4):
+    resolution: {integrity: sha512-lPFYaGt8OdMEzNGJJChF40uYqMO4Z/7Q9fHPQC/NRVtht43KotSXLrkPandVVMf9aPbiJ059eAT+fwHGX16k4w==}
+    peerDependencies:
+      typescript: '*'
     dependencies:
-      '@volar/language-core': 1.3.0-alpha.0
-      '@volar/source-map': 1.3.0-alpha.0
-      '@vue/compiler-dom': 3.2.47
-      '@vue/compiler-sfc': 3.2.47
-      '@vue/reactivity': 3.2.47
-      '@vue/shared': 3.2.47
-      minimatch: 6.2.0
+      '@volar/language-core': 1.4.1
+      typescript: 5.0.4
+    dev: true
+
+  /@volar/vue-language-core@1.6.5:
+    resolution: {integrity: sha512-IF2b6hW4QAxfsLd5mePmLgtkXzNi+YnH6ltCd80gb7+cbdpFMjM1I+w+nSg2kfBTyfu+W8useCZvW89kPTBpzg==}
+    dependencies:
+      '@volar/language-core': 1.4.1
+      '@volar/source-map': 1.4.1
+      '@vue/compiler-dom': 3.3.4
+      '@vue/compiler-sfc': 3.3.4
+      '@vue/reactivity': 3.3.4
+      '@vue/shared': 3.3.4
+      minimatch: 9.0.1
       muggle-string: 0.2.2
       vue-template-compiler: 2.7.14
     dev: true
 
-  /@volar/vue-typescript@1.2.0:
-    resolution: {integrity: sha512-zjmRi9y3J1EkG+pfuHp8IbHmibihrKK485cfzsHjiuvJMGrpkWvlO5WVEk8oslMxxeGC5XwBFE9AOlvh378EPA==}
+  /@volar/vue-typescript@1.6.5(typescript@4.3.4):
+    resolution: {integrity: sha512-er9rVClS4PHztMUmtPMDTl+7c7JyrxweKSAEe/o/Noeq2bQx6v3/jZHVHBe8ZNUti5ubJL/+Tg8L3bzmlalV8A==}
+    peerDependencies:
+      typescript: '*'
     dependencies:
-      '@volar/typescript': 1.3.0-alpha.0
-      '@volar/vue-language-core': 1.2.0
+      '@volar/typescript': 1.4.1-patch.2(typescript@4.3.4)
+      '@volar/vue-language-core': 1.6.5
+      typescript: 4.3.4
+    dev: true
+
+  /@volar/vue-typescript@1.6.5(typescript@5.0.4):
+    resolution: {integrity: sha512-er9rVClS4PHztMUmtPMDTl+7c7JyrxweKSAEe/o/Noeq2bQx6v3/jZHVHBe8ZNUti5ubJL/+Tg8L3bzmlalV8A==}
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/typescript': 1.4.1-patch.2(typescript@5.0.4)
+      '@volar/vue-language-core': 1.6.5
+      typescript: 5.0.4
     dev: true
 
   /@vue/babel-helper-vue-transform-on@1.0.2:
@@ -3688,23 +3696,6 @@ packages:
       - supports-color
     dev: true
 
-  /@vue/compiler-core@3.2.37:
-    resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
-    dependencies:
-      '@babel/parser': 7.21.4
-      '@vue/shared': 3.2.37
-      estree-walker: 2.0.2
-      source-map: 0.6.1
-
-  /@vue/compiler-core@3.2.47:
-    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
-    dependencies:
-      '@babel/parser': 7.21.4
-      '@vue/shared': 3.2.47
-      estree-walker: 2.0.2
-      source-map: 0.6.1
-    dev: true
-
   /@vue/compiler-core@3.3.4:
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
     dependencies:
@@ -3712,27 +3703,12 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: true
-
-  /@vue/compiler-dom@3.2.37:
-    resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
-    dependencies:
-      '@vue/compiler-core': 3.2.37
-      '@vue/shared': 3.2.37
-
-  /@vue/compiler-dom@3.2.47:
-    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
-    dependencies:
-      '@vue/compiler-core': 3.2.47
-      '@vue/shared': 3.2.47
-    dev: true
 
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/compiler-sfc@2.7.4:
     resolution: {integrity: sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==}
@@ -3741,35 +3717,6 @@ packages:
       postcss: 8.4.23
       source-map: 0.6.1
 
-  /@vue/compiler-sfc@3.2.37:
-    resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==}
-    dependencies:
-      '@babel/parser': 7.21.4
-      '@vue/compiler-core': 3.2.37
-      '@vue/compiler-dom': 3.2.37
-      '@vue/compiler-ssr': 3.2.37
-      '@vue/reactivity-transform': 3.2.37
-      '@vue/shared': 3.2.37
-      estree-walker: 2.0.2
-      magic-string: 0.25.9
-      postcss: 8.4.21
-      source-map: 0.6.1
-
-  /@vue/compiler-sfc@3.2.47:
-    resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
-    dependencies:
-      '@babel/parser': 7.21.4
-      '@vue/compiler-core': 3.2.47
-      '@vue/compiler-dom': 3.2.47
-      '@vue/compiler-ssr': 3.2.47
-      '@vue/reactivity-transform': 3.2.47
-      '@vue/shared': 3.2.47
-      estree-walker: 2.0.2
-      magic-string: 0.25.9
-      postcss: 8.4.23
-      source-map: 0.6.1
-    dev: true
-
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
     dependencies:
@@ -3783,50 +3730,16 @@ packages:
       magic-string: 0.30.0
       postcss: 8.4.23
       source-map-js: 1.0.2
-    dev: true
-
-  /@vue/compiler-ssr@3.2.37:
-    resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==}
-    dependencies:
-      '@vue/compiler-dom': 3.2.37
-      '@vue/shared': 3.2.37
-
-  /@vue/compiler-ssr@3.2.47:
-    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
-    dependencies:
-      '@vue/compiler-dom': 3.2.47
-      '@vue/shared': 3.2.47
-    dev: true
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
     dependencies:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
 
-  /@vue/reactivity-transform@3.2.37:
-    resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
-    dependencies:
-      '@babel/parser': 7.21.4
-      '@vue/compiler-core': 3.2.37
-      '@vue/shared': 3.2.37
-      estree-walker: 2.0.2
-      magic-string: 0.25.9
-
-  /@vue/reactivity-transform@3.2.47:
-    resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
-    dependencies:
-      '@babel/parser': 7.21.4
-      '@vue/compiler-core': 3.2.47
-      '@vue/shared': 3.2.47
-      estree-walker: 2.0.2
-      magic-string: 0.25.9
-    dev: true
-
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
@@ -3835,44 +3748,17 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.0
-    dev: true
-
-  /@vue/reactivity@3.2.37:
-    resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==}
-    dependencies:
-      '@vue/shared': 3.2.37
-
-  /@vue/reactivity@3.2.47:
-    resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
-    dependencies:
-      '@vue/shared': 3.2.47
-    dev: true
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
-    dev: true
-
-  /@vue/runtime-core@3.2.37:
-    resolution: {integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==}
-    dependencies:
-      '@vue/reactivity': 3.2.37
-      '@vue/shared': 3.2.37
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
-
-  /@vue/runtime-dom@3.2.37:
-    resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
-    dependencies:
-      '@vue/runtime-core': 3.2.37
-      '@vue/shared': 3.2.37
-      csstype: 2.6.21
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -3880,16 +3766,6 @@ packages:
       '@vue/runtime-core': 3.3.4
       '@vue/shared': 3.3.4
       csstype: 3.1.2
-    dev: true
-
-  /@vue/server-renderer@3.2.37(vue@3.2.37):
-    resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
-    peerDependencies:
-      vue: 3.2.37
-    dependencies:
-      '@vue/compiler-ssr': 3.2.37
-      '@vue/shared': 3.2.37
-      vue: 3.2.37
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -3899,25 +3775,20 @@ packages:
       '@vue/compiler-ssr': 3.3.4
       '@vue/shared': 3.3.4
       vue: 3.3.4
-    dev: true
-
-  /@vue/shared@3.2.37:
-    resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
-
-  /@vue/shared@3.2.47:
-    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
-    dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
-    dev: true
 
-  /@vue/test-utils@2.0.0(vue@3.2.37):
-    resolution: {integrity: sha512-zL5kygNq7hONrO1CzaUGprEAklAX+pH8J1MPMCU3Rd2xtSYkZ+PmKU3oEDRg8VAGdL5lNJHzDgrud5amFPtirw==}
+  /@vue/test-utils@2.3.2(vue@3.3.4):
+    resolution: {integrity: sha512-hJnVaYhbrIm0yBS0+e1Y0Sj85cMyAi+PAbK4JHqMRUZ6S622Goa+G7QzkRSyvCteG8wop7tipuEbHoZo26wsSA==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:
-      vue: 3.2.37
+      js-beautify: 1.14.6
+      vue: 3.3.4
+    optionalDependencies:
+      '@vue/compiler-dom': 3.3.4
+      '@vue/server-renderer': 3.3.4(vue@3.3.4)
     dev: true
 
   /@vueuse/core@10.1.2(vue@3.3.4):
@@ -3932,13 +3803,13 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/core@9.13.0(vue@3.2.37):
+  /@vueuse/core@9.13.0(vue@3.3.4):
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.2.37)
-      vue-demi: 0.13.11(vue@3.2.37)
+      '@vueuse/shared': 9.13.0(vue@3.3.4)
+      vue-demi: 0.13.11(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4009,10 +3880,10 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/shared@9.13.0(vue@3.2.37):
+  /@vueuse/shared@9.13.0(vue@3.3.4):
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.2.37)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4029,6 +3900,10 @@ packages:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
     dev: true
 
+  /abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+    dev: true
+
   /acorn-globals@6.0.0:
     resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
     dependencies:
@@ -4701,6 +4576,13 @@ packages:
       well-known-symbols: 2.0.0
     dev: true
 
+  /config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+    dev: true
+
   /conventional-changelog-angular@5.0.13:
     resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
     engines: {node: '>=10'}
@@ -4991,9 +4873,6 @@ packages:
       cssom: 0.3.8
     dev: true
 
-  /csstype@2.6.21:
-    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
-
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
@@ -5191,21 +5070,31 @@ packages:
       is-obj: 2.0.0
     dev: true
 
+  /editorconfig@0.15.3:
+    resolution: {integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+      lru-cache: 4.1.5
+      semver: 5.7.1
+      sigmund: 1.0.1
+    dev: true
+
   /electron-to-chromium@1.4.356:
     resolution: {integrity: sha512-nEftV1dRX3omlxAj42FwqRZT0i4xd2dIg39sog/CnCJeCcL1TRd2Uh0i9Oebgv8Ou0vzTPw++xc+Z20jzS2B6A==}
 
-  /element-plus@2.2.32(vue@3.2.37):
+  /element-plus@2.2.32(vue@3.3.4):
     resolution: {integrity: sha512-DTJMhYOy6MApbmh6z/95hPTK5WrBiNHGzV4IN+uEkup1WoimQ+Qyt8RxKdTe/X1LWEJ8YgWv/Cl8P4ocrt5z5g==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': 3.6.0
-      '@element-plus/icons-vue': 2.0.9(vue@3.2.37)
+      '@element-plus/icons-vue': 2.0.9(vue@3.3.4)
       '@floating-ui/dom': 1.2.6
       '@popperjs/core': /@sxzz/popperjs-es@2.11.7
       '@types/lodash': 4.14.192
       '@types/lodash-es': 4.17.7
-      '@vueuse/core': 9.13.0(vue@3.2.37)
+      '@vueuse/core': 9.13.0(vue@3.3.4)
       async-validator: 4.2.5
       dayjs: 1.11.4
       escape-html: 1.0.3
@@ -5214,7 +5103,7 @@ packages:
       lodash-unified: 1.0.3(@types/lodash-es@4.17.7)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
-      vue: 3.2.37
+      vue: 3.3.4
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -6247,6 +6136,17 @@ packages:
       path-is-absolute: 1.0.1
     dev: true
 
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
   /global-dirs@0.1.1:
     resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
     engines: {node: '>=4'}
@@ -6772,6 +6672,17 @@ packages:
       istanbul-lib-report: 3.0.0
     dev: true
 
+  /js-beautify@1.14.6:
+    resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 0.15.3
+      glob: 8.1.0
+      nopt: 6.0.0
+    dev: true
+
   /js-sdsl@4.4.0:
     resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==}
     dev: true
@@ -7102,6 +7013,13 @@ packages:
       get-func-name: 2.0.0
     dev: true
 
+  /lru-cache@4.1.5:
+    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
+    dependencies:
+      pseudomap: 1.0.2
+      yallist: 2.1.2
+    dev: true
+
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -7123,6 +7041,7 @@ packages:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
       sourcemap-codec: 1.4.8
+    dev: true
 
   /magic-string@0.26.7:
     resolution: {integrity: sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==}
@@ -7143,7 +7062,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -7258,9 +7176,9 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
-  /minimatch@6.2.0:
-    resolution: {integrity: sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==}
-    engines: {node: '>=10'}
+  /minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
     dev: true
@@ -7366,6 +7284,14 @@ packages:
   /node-releases@2.0.10:
     resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
 
+  /nopt@6.0.0:
+    resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      abbrev: 1.1.1
+    dev: true
+
   /normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
@@ -7702,6 +7628,7 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
 
   /postcss@8.4.23:
     resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
@@ -7761,6 +7688,14 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
+  /proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+    dev: true
+
+  /pseudomap@1.0.2:
+    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
+    dev: true
+
   /psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: true
@@ -8308,6 +8243,14 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /semver@7.5.1:
+    resolution: {integrity: sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
     dependencies:
@@ -8369,6 +8312,10 @@ packages:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
     dev: true
 
+  /sigmund@1.0.1:
+    resolution: {integrity: sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==}
+    dev: true
+
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
@@ -8427,6 +8374,7 @@ packages:
   /sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
+    dev: true
 
   /spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
@@ -8632,17 +8580,17 @@ packages:
     resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==}
     dev: true
 
-  /tdesign-icons-vue-next@0.1.8(vue@3.2.37):
+  /tdesign-icons-vue-next@0.1.8(vue@3.3.4):
     resolution: {integrity: sha512-ssI/KJHlhUMYbf+dk+7Ab3LQbWc5wJBjWF9GaGZWPlMU0Yhui9oa2Dvm97Pbx8Ba6drTEDKwfmtJV2R4V6e84Q==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       '@babel/runtime': 7.21.0
-      vue: 3.2.37
+      vue: 3.3.4
     dev: false
 
-  /tdesign-vue-next@1.3.1(vue@3.2.37):
-    resolution: {integrity: sha512-KHnDu9DX20mEIXIXM6jrYTbeD5mIxyDIsUUjXBY2cdyXn1oAneQJwg6Ceph8Ih7a3sm4/Q8dQVFpqo1/12aWGw==}
+  /tdesign-vue-next@1.3.4(vue@3.3.4):
+    resolution: {integrity: sha512-6rCEvH4JQoKJZH7MWhF+i1cFBa+GybuulHI4/Wto4GWjeTNG+OnJwjYD3ZLcpGZHuVadP01/oYOFbMZoOQlllg==}
     peerDependencies:
       vue: '>=3.1.0'
     dependencies:
@@ -8656,10 +8604,10 @@ packages:
       lodash: 4.17.21
       mitt: 3.0.0
       sortablejs: 1.15.0
-      tdesign-icons-vue-next: 0.1.8(vue@3.2.37)
+      tdesign-icons-vue-next: 0.1.8(vue@3.3.4)
       tinycolor2: 1.6.0
       validator: 13.9.0
-      vue: 3.2.37
+      vue: 3.3.4
     dev: false
 
   /temp-dir@2.0.0:
@@ -9020,7 +8968,7 @@ packages:
       - rollup
     dev: true
 
-  /unplugin-vue-components@0.22.11(vue@3.2.37):
+  /unplugin-vue-components@0.22.11(vue@3.3.4):
     resolution: {integrity: sha512-GTzqPl0Ek8fq8qMufjR6hvtnjnSwMpJ1Rg2Ez9AcKZVp1piWoU/Q4FDnI9wHVKX8eenYL0nqAF3ejYAk1TUfqQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -9040,7 +8988,7 @@ packages:
       minimatch: 5.1.6
       resolve: 1.22.2
       unplugin: 1.3.1
-      vue: 3.2.37
+      vue: 3.3.4
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -9134,16 +9082,6 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-vue-setup-extend@0.4.0(vite@4.3.8):
-    resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
-    peerDependencies:
-      vite: '>=2.0.0'
-    dependencies:
-      '@vue/compiler-sfc': 3.2.37
-      magic-string: 0.25.9
-      vite: 4.3.8(@types/node@18.15.11)(sass@1.35.1)(terser@5.14.2)
-    dev: true
-
   /vite@3.2.5(@types/node@15.12.4):
     resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -9434,7 +9372,7 @@ packages:
     resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
     dev: true
 
-  /vue-demi@0.13.11(vue@3.2.37):
+  /vue-demi@0.13.11(vue@3.3.4):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
     hasBin: true
@@ -9446,21 +9384,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.2.37
-
-  /vue-demi@0.14.5(vue@3.2.37):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.2.37
+      vue: 3.3.4
 
   /vue-demi@0.14.5(vue@3.3.4):
     resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
@@ -9475,7 +9399,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
-    dev: true
 
   /vue-eslint-parser@9.1.1(eslint@8.38.0):
     resolution: {integrity: sha512-C2aI/r85Q6tYcz4dpgvrs4wH/MqVrRAVIdpYedrxnATDHHkb+TroeRcDpKWGZCx/OcECMWfz7tVwQ8e+Opy6rA==}
@@ -9495,13 +9418,13 @@ packages:
       - supports-color
     dev: true
 
-  /vue-router@4.0.10(vue@3.2.37):
+  /vue-router@4.0.10(vue@3.3.4):
     resolution: {integrity: sha512-YbPf6QnZpyyWfnk7CUt2Bme+vo7TLfg1nGZNkvYqKYh4vLaFw6Gn8bPGdmt5m4qrGnKoXLqc4htAsd3dIukICA==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       '@vue/devtools-api': 6.5.0
-      vue: 3.2.37
+      vue: 3.3.4
     dev: false
 
   /vue-template-compiler@2.7.14:
@@ -9518,25 +9441,27 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.2.0(typescript@4.3.4):
-    resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
+  /vue-tsc@1.6.5(typescript@4.3.4):
+    resolution: {integrity: sha512-Wtw3J7CC+JM2OR56huRd5iKlvFWpvDiU+fO1+rqyu4V2nMTotShz4zbOZpW5g9fUOcjnyZYfBo5q5q+D/q27JA==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-language-core': 1.2.0
-      '@volar/vue-typescript': 1.2.0
+      '@volar/vue-language-core': 1.6.5
+      '@volar/vue-typescript': 1.6.5(typescript@4.3.4)
+      semver: 7.5.1
       typescript: 4.3.4
     dev: true
 
-  /vue-tsc@1.2.0(typescript@5.0.4):
-    resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
+  /vue-tsc@1.6.5(typescript@5.0.4):
+    resolution: {integrity: sha512-Wtw3J7CC+JM2OR56huRd5iKlvFWpvDiU+fO1+rqyu4V2nMTotShz4zbOZpW5g9fUOcjnyZYfBo5q5q+D/q27JA==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-language-core': 1.2.0
-      '@volar/vue-typescript': 1.2.0
+      '@volar/vue-language-core': 1.6.5
+      '@volar/vue-typescript': 1.6.5(typescript@5.0.4)
+      semver: 7.5.1
       typescript: 5.0.4
     dev: true
 
@@ -9546,15 +9471,6 @@ packages:
       '@vue/compiler-sfc': 2.7.4
       csstype: 3.1.2
 
-  /vue@3.2.37:
-    resolution: {integrity: sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==}
-    dependencies:
-      '@vue/compiler-dom': 3.2.37
-      '@vue/compiler-sfc': 3.2.37
-      '@vue/runtime-dom': 3.2.37
-      '@vue/server-renderer': 3.2.37(vue@3.2.37)
-      '@vue/shared': 3.2.37
-
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies:
@@ -9563,7 +9479,6 @@ packages:
       '@vue/runtime-dom': 3.3.4
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
-    dev: true
 
   /w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
@@ -9742,6 +9657,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /yallist@2.1.2:
+    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
+    dev: true
+
   /yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
diff --git a/runtime/vue3/package.json b/runtime/vue3/package.json
index e85c6cdf..5b781071 100644
--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@@ -28,16 +28,16 @@
     "@tmagic/stage": "1.2.15",
     "@tmagic/utils": "1.2.15",
     "axios": "^0.25.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.4",
     "@types/node": "^15.12.4",
     "@vitejs/plugin-legacy": "^4.0.3",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "recast": "^0.20.4",
     "rollup": "^2.25.0",
     "rollup-plugin-external-globals": "^0.6.1",
@@ -45,6 +45,6 @@
     "terser": "^5.14.2",
     "typescript": "^4.3.4",
     "vite": "^4.3.8",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.5"
   }
 }