diff --git a/packages/components/src/components/alert/Alert.vue b/packages/components/src/components/alert/Alert.vue
index 317b69d71..ee56a7f61 100644
--- a/packages/components/src/components/alert/Alert.vue
+++ b/packages/components/src/components/alert/Alert.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Component, PropType } from "vue";
+import type { Component } from "vue";
 import { computed } from "vue";
 import type { Type } from "./interface";
 import {
@@ -18,22 +18,18 @@ const TypeIcons: Record<Type, Component> = {
   error: IconCloseCircle,
 };
 
-const props = defineProps({
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  title: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-  closable: {
-    type: Boolean,
-    default: true,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    type?: Type;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+  }>(),
+  {
+    type: "default",
+    closable: true,
+  }
+);
 
 const emit = defineEmits(["close"]);
 
diff --git a/packages/components/src/components/button/Button.vue b/packages/components/src/components/button/Button.vue
index f9bf15e04..1fd20defd 100644
--- a/packages/components/src/components/button/Button.vue
+++ b/packages/components/src/components/button/Button.vue
@@ -35,41 +35,30 @@
   </button>
 </template>
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 import { useRouter } from "vue-router";
 import type { Size, Type } from "./interface";
 
-const props = defineProps({
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: "md",
-  },
-  circle: {
-    type: Boolean,
-    default: false,
-  },
-  block: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  route: {
-    type: Object as PropType<RouteLocationRaw>,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    type?: Type;
+    size?: Size;
+    circle?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    route?: RouteLocationRaw;
+  }>(),
+  {
+    type: "default",
+    size: "md",
+    circle: false,
+    block: false,
+    disabled: false,
+    loading: false,
+  }
+);
 
 const router = useRouter();
 const emit = defineEmits(["click"]);
diff --git a/packages/components/src/components/card/Card.vue b/packages/components/src/components/card/Card.vue
index 1efac2cd8..b17f8e251 100644
--- a/packages/components/src/components/card/Card.vue
+++ b/packages/components/src/components/card/Card.vue
@@ -1,14 +1,8 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
-
-defineProps({
-  title: {
-    type: String,
-  },
-  bodyClass: {
-    type: Object as PropType<string[]>,
-  },
-});
+defineProps<{
+  title?: string;
+  bodyClass?: string[];
+}>();
 </script>
 
 <template>
diff --git a/packages/components/src/components/checkbox/CheckBox.vue b/packages/components/src/components/checkbox/CheckBox.vue
index 4663f9b3f..be671fd9b 100644
--- a/packages/components/src/components/checkbox/CheckBox.vue
+++ b/packages/components/src/components/checkbox/CheckBox.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-const props = defineProps({
-  checked: {
-    type: Boolean,
-    default: false,
-  },
-  value: {
-    type: [String, Number, Boolean],
-  },
-  label: {
-    type: String,
-  },
-  name: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    checked?: boolean;
+    value?: string | number | boolean;
+    label?: string;
+    name?: string;
+  }>(),
+  {
+    checked: false,
+  }
+);
 
 const id = ["checkbox", props.name, props.value]
   .filter((item) => !!item)
diff --git a/packages/components/src/components/checkbox/CheckBoxGroup.vue b/packages/components/src/components/checkbox/CheckBoxGroup.vue
index a9e91a578..638fbd718 100644
--- a/packages/components/src/components/checkbox/CheckBoxGroup.vue
+++ b/packages/components/src/components/checkbox/CheckBoxGroup.vue
@@ -1,29 +1,20 @@
 <script lang="ts" setup>
 import { VCheckbox } from "./index";
-import type { PropType } from "vue";
 
-const props = defineProps({
-  modelValue: {
-    type: Object as PropType<Array<string>>,
-    default: () => {
-      return [];
-    },
-  },
-  options: {
-    type: Object as PropType<Array<Record<string, string>>>,
-  },
-  valueKey: {
-    type: String,
-    default: "value",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-  name: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string[];
+    options?: Array<Record<string, string>>;
+    valueKey?: string;
+    labelKey?: string;
+    name?: string;
+  }>(),
+  {
+    modelValue: () => [],
+    valueKey: "value",
+    labelKey: "label",
+  }
+);
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/codemirror/Codemirror.vue b/packages/components/src/components/codemirror/Codemirror.vue
index f9cc7108c..f9540670d 100644
--- a/packages/components/src/components/codemirror/Codemirror.vue
+++ b/packages/components/src/components/codemirror/Codemirror.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import type { EditorStateConfig } from "@codemirror/state";
 import { EditorState } from "@codemirror/state";
@@ -12,24 +11,20 @@ const languages = {
   yaml: StreamLanguage.define(yaml),
 };
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  height: {
-    type: String,
-    default: "auto",
-  },
-  language: {
-    type: String as PropType<"yaml">,
-    default: "yaml",
-  },
-  extensions: {
-    type: Array as PropType<EditorStateConfig["extensions"]>,
-    default: () => [],
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    height?: string;
+    language?: "yaml";
+    extensions?: EditorStateConfig["extensions"];
+  }>(),
+  {
+    modelValue: "",
+    height: "auto",
+    language: "yaml",
+    extensions: () => [],
+  }
+);
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void;
diff --git a/packages/components/src/components/dialog/Dialog.vue b/packages/components/src/components/dialog/Dialog.vue
index 09d8ff478..e9f8f6a35 100644
--- a/packages/components/src/components/dialog/Dialog.vue
+++ b/packages/components/src/components/dialog/Dialog.vue
@@ -8,47 +8,32 @@ import {
   IconForbidLine,
   IconInformation,
 } from "@/icons/icons";
-import type { PropType } from "vue";
 import { computed, ref } from "vue";
 import type { Type } from "@/components/dialog/interface";
 import type { Type as ButtonType } from "@/components/button/interface";
 
-const props = defineProps({
-  type: {
-    type: String as PropType<Type>,
-    default: "info",
-  },
-  title: {
-    type: String,
-    default: "提示",
-  },
-  description: {
-    type: String,
-    default: "",
-  },
-  confirmText: {
-    type: String,
-    default: "确定",
-  },
-  confirmType: {
-    type: String as PropType<ButtonType>,
-    default: "primary",
-  },
-  cancelText: {
-    type: String,
-    default: "取消",
-  },
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  onConfirm: {
-    type: Function as PropType<() => void>,
-  },
-  onCancel: {
-    type: Function as PropType<() => void>,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    type?: Type;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    confirmType?: ButtonType;
+    cancelText?: string;
+    visible?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  }>(),
+  {
+    type: "info",
+    title: "提示",
+    description: "",
+    confirmText: "确定",
+    confirmType: "primary",
+    cancelText: "取消",
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/packages/components/src/components/header/PageHeader.vue b/packages/components/src/components/header/PageHeader.vue
index 02f20ccbb..1af92fd3f 100644
--- a/packages/components/src/components/header/PageHeader.vue
+++ b/packages/components/src/components/header/PageHeader.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-  },
-});
+defineProps<{
+  title?: string;
+}>();
 </script>
 <template>
   <div class="flex items-center justify-between bg-white p-4 h-14">
diff --git a/packages/components/src/components/input/Input.vue b/packages/components/src/components/input/Input.vue
index 3790435bb..950b2b562 100644
--- a/packages/components/src/components/input/Input.vue
+++ b/packages/components/src/components/input/Input.vue
@@ -1,24 +1,19 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Size } from "./interface";
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: "md",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    size?: Size;
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    size: "md",
+    disabled: false,
+  }
+);
 
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/packages/components/src/components/menu/Menu.vue b/packages/components/src/components/menu/Menu.vue
index 0653185e7..34f5b933b 100644
--- a/packages/components/src/components/menu/Menu.vue
+++ b/packages/components/src/components/menu/Menu.vue
@@ -1,13 +1,9 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { provide } from "vue";
 
-const props = defineProps({
-  openIds: {
-    type: Object as PropType<string[]>,
-    required: false,
-  },
-});
+const props = defineProps<{
+  openIds?: string[];
+}>();
 
 provide<string[] | undefined>("openIds", props.openIds);
 </script>
diff --git a/packages/components/src/components/menu/MenuItem.vue b/packages/components/src/components/menu/MenuItem.vue
index b76b102c6..21ecd84c6 100644
--- a/packages/components/src/components/menu/MenuItem.vue
+++ b/packages/components/src/components/menu/MenuItem.vue
@@ -2,20 +2,18 @@
 import { IconArrowRight } from "../../icons/icons";
 import { computed, inject, ref, useSlots } from "vue";
 
-const props = defineProps({
-  id: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    title?: string;
+    active?: boolean;
+  }>(),
+  {
+    id: "",
+    title: "",
+    active: false,
+  }
+);
 
 const emit = defineEmits(["select"]);
 
diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index 259914be7..8df244016 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -1,28 +1,21 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed, nextTick, ref, watch } from "vue";
 import { IconClose } from "../../icons/icons";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-  },
-  width: {
-    type: Number,
-    default: 500,
-  },
-  fullscreen: {
-    type: Boolean,
-    default: false,
-  },
-  bodyClass: {
-    type: Object as PropType<string[]>,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean;
+    title?: string;
+    width?: number;
+    fullscreen?: boolean;
+    bodyClass?: string[];
+  }>(),
+  {
+    visible: false,
+    width: 500,
+    fullscreen: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/packages/components/src/components/pagination/Pagination.vue b/packages/components/src/components/pagination/Pagination.vue
index 6a6f6c7d7..f55000262 100644
--- a/packages/components/src/components/pagination/Pagination.vue
+++ b/packages/components/src/components/pagination/Pagination.vue
@@ -1,22 +1,20 @@
 <script lang="ts" setup>
 import { UseOffsetPagination } from "@vueuse/components";
 import { IconArrowLeft, IconArrowRight } from "../../icons/icons";
-import { defineProps, ref, toRefs, watch } from "vue";
+import { ref, toRefs, watch } from "vue";
 
-const props = defineProps({
-  page: {
-    type: Number,
-    default: 1,
-  },
-  size: {
-    type: Number,
-    default: 10,
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    page?: number;
+    size?: number;
+    total?: number;
+  }>(),
+  {
+    page: 1,
+    size: 10,
+    total: 0,
+  }
+);
 
 const { page, size, total } = toRefs(props);
 
diff --git a/packages/components/src/components/radio/Radio.vue b/packages/components/src/components/radio/Radio.vue
index 372f3176b..8aae291b4 100644
--- a/packages/components/src/components/radio/Radio.vue
+++ b/packages/components/src/components/radio/Radio.vue
@@ -1,20 +1,12 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  value: {
-    type: [String, Number, Boolean],
-  },
-  label: {
-    type: String,
-  },
-  name: {
-    type: String,
-  },
-});
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  value?: string | number | boolean;
+  label?: string;
+  name?: string;
+}>();
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/radio/RadioGroup.vue b/packages/components/src/components/radio/RadioGroup.vue
index 9719d14b3..761e2596c 100644
--- a/packages/components/src/components/radio/RadioGroup.vue
+++ b/packages/components/src/components/radio/RadioGroup.vue
@@ -1,26 +1,19 @@
 <script lang="ts" setup>
 import { VRadio } from "./index";
-import type { PropType } from "vue";
 
-defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  options: {
-    type: Object as PropType<Array<Record<string, string | number | boolean>>>,
-  },
-  valueKey: {
-    type: String,
-    default: "value",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-  name: {
-    type: String,
-  },
-});
+withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean;
+    options?: Array<Record<string, string | number | boolean>>;
+    valueKey?: string;
+    labelKey?: string;
+    name?: string;
+  }>(),
+  {
+    valueKey: "value",
+    labelKey: "label",
+  }
+);
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/select/Option.vue b/packages/components/src/components/select/Option.vue
index b383c29ba..e4f971dfa 100644
--- a/packages/components/src/components/select/Option.vue
+++ b/packages/components/src/components/select/Option.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-defineProps({
-  value: {
-    type: [String, Number, Boolean],
-  },
-});
+defineProps<{
+  value?: string | number | boolean;
+}>();
 </script>
 
 <template>
diff --git a/packages/components/src/components/select/Select.vue b/packages/components/src/components/select/Select.vue
index 106d4755a..2d02db172 100644
--- a/packages/components/src/components/select/Select.vue
+++ b/packages/components/src/components/select/Select.vue
@@ -1,24 +1,19 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Size } from "./interface";
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: "md",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    size?: Size;
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    size: "md",
+    disabled: false,
+  }
+);
 
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/packages/components/src/components/space/Space.vue b/packages/components/src/components/space/Space.vue
index 20761ddc0..7cc9f9f8b 100644
--- a/packages/components/src/components/space/Space.vue
+++ b/packages/components/src/components/space/Space.vue
@@ -1,23 +1,20 @@
 <script lang="ts" setup>
 import type { Align, Direction, Spacing } from "./interface";
 import { SpacingSize } from "./interface";
-import type { PropType } from "vue";
 import { computed } from "vue";
 
-const props = defineProps({
-  spacing: {
-    type: String as PropType<Spacing>,
-    default: "xs",
-  },
-  direction: {
-    type: String as PropType<Direction>,
-    default: "row",
-  },
-  align: {
-    type: String as PropType<Align>,
-    default: "center",
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    spacing?: Spacing;
+    direction?: Direction;
+    align?: Align;
+  }>(),
+  {
+    spacing: "xs",
+    direction: "row",
+    align: "center",
+  }
+);
 
 const wrapperClasses = computed(() => {
   const { direction, align } = props;
diff --git a/packages/components/src/components/switch/Switch.vue b/packages/components/src/components/switch/Switch.vue
index f4bd2ecb3..aa53af5a2 100644
--- a/packages/components/src/components/switch/Switch.vue
+++ b/packages/components/src/components/switch/Switch.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+  }>(),
+  {
+    modelValue: false,
+  }
+);
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/tabs/TabItem.vue b/packages/components/src/components/tabs/TabItem.vue
index 9fe182e0f..b63ef9a07 100644
--- a/packages/components/src/components/tabs/TabItem.vue
+++ b/packages/components/src/components/tabs/TabItem.vue
@@ -2,14 +2,10 @@
 import type { ComputedRef } from "vue";
 import { computed, inject } from "vue";
 
-const props = defineProps({
-  id: {
-    type: String,
-  },
-  label: {
-    type: String,
-  },
-});
+const props = defineProps<{
+  id?: string;
+  label?: string;
+}>();
 
 const activeId = inject<ComputedRef<string | number | undefined>>("activeId");
 
diff --git a/packages/components/src/components/tabs/Tabbar.vue b/packages/components/src/components/tabs/Tabbar.vue
index b3c4c3231..c1d6033b1 100644
--- a/packages/components/src/components/tabs/Tabbar.vue
+++ b/packages/components/src/components/tabs/Tabbar.vue
@@ -1,32 +1,23 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Direction, Type } from "./interface";
 
-const props = defineProps({
-  activeId: {
-    type: [Number, String],
-  },
-  items: {
-    type: Object as PropType<Array<Record<string, string>>>,
-  },
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  direction: {
-    type: String as PropType<Direction>,
-    default: "row",
-  },
-  idKey: {
-    type: String,
-    default: "id",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    activeId?: number | string;
+    items?: Array<Record<string, string>>;
+    type?: Type;
+    direction?: Direction;
+    idKey?: string;
+    labelKey?: string;
+  }>(),
+  {
+    type: "default",
+    direction: "row",
+    idKey: "id",
+    labelKey: "label",
+  }
+);
 
 const emit = defineEmits(["update:activeId", "change"]);
 
diff --git a/packages/components/src/components/tabs/Tabs.vue b/packages/components/src/components/tabs/Tabs.vue
index eaec5357b..e8a32ec22 100644
--- a/packages/components/src/components/tabs/Tabs.vue
+++ b/packages/components/src/components/tabs/Tabs.vue
@@ -1,30 +1,24 @@
 <script lang="ts" setup>
-import type { ComputedRef, PropType } from "vue";
+import type { ComputedRef } from "vue";
 import { computed, provide, useSlots } from "vue";
 import { VTabbar } from "./index";
 import type { Direction, Type } from "./interface";
 
-const props = defineProps({
-  activeId: {
-    type: [Number, String],
-  },
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  direction: {
-    type: String as PropType<Direction>,
-    default: "row",
-  },
-  idKey: {
-    type: String,
-    default: "id",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    activeId?: number | string;
+    type?: Type;
+    direction?: Direction;
+    idKey?: string;
+    labelKey?: string;
+  }>(),
+  {
+    type: "default",
+    direction: "row",
+    idKey: "id",
+    labelKey: "label",
+  }
+);
 
 provide<ComputedRef<string | number | undefined>>(
   "activeId",
diff --git a/packages/components/src/components/tag/Tag.vue b/packages/components/src/components/tag/Tag.vue
index adf163b69..14ab978de 100644
--- a/packages/components/src/components/tag/Tag.vue
+++ b/packages/components/src/components/tag/Tag.vue
@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Theme } from "./interface";
 
-const props = defineProps({
-  theme: {
-    type: String as PropType<Theme>,
-    default: "default",
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    theme?: Theme;
+    rounded?: boolean;
+  }>(),
+  {
+    theme: "default",
+    rounded: false,
+  }
+);
 
 const classes = computed(() => {
   return [`tag-${props.theme}`, { "tag-rounded": props.rounded }];
diff --git a/packages/components/src/components/textarea/Textarea.vue b/packages/components/src/components/textarea/Textarea.vue
index 0b144c1dd..62bb8a217 100644
--- a/packages/components/src/components/textarea/Textarea.vue
+++ b/packages/components/src/components/textarea/Textarea.vue
@@ -1,20 +1,16 @@
 <script lang="ts" setup>
-defineProps({
-  modelValue: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-  },
-  rows: {
-    type: Number,
-    default: 3,
-  },
-});
+withDefaults(
+  defineProps<{
+    modelValue?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    rows?: number;
+  }>(),
+  {
+    disabled: false,
+    rows: 3,
+  }
+);
 
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue b/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue
index f23378ca1..9d0e0cb83 100644
--- a/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { VAlert, VButton, VModal, VSpace } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index 4f038e6cc..4646d87b1 100644
--- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -8,12 +8,14 @@ import {
   VTag,
 } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue b/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue
index bf6b9e723..4c443486f 100644
--- a/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentSelectModal.vue b/src/modules/contents/attachments/components/AttachmentSelectModal.vue
index 858e6a2be..76db7c1f2 100644
--- a/src/modules/contents/attachments/components/AttachmentSelectModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentSelectModal.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { VButton, VCard, VModal } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue b/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue
index 657acd702..ad5aa4910 100644
--- a/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue
@@ -10,13 +10,14 @@ import AttachmentLocalStrategyEditingModal from "./AttachmentLocalStrategyEditin
 import AttachmentAliOSSStrategyEditingModal from "./AttachmentAliOSSStrategyEditingModal.vue";
 import { ref } from "vue";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
-
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 const emit = defineEmits(["update:visible", "close"]);
 
 const strategies = ref([
diff --git a/src/modules/contents/attachments/components/AttachmentUploadModal.vue b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
index f00f86d75..d4a08adfc 100644
--- a/src/modules/contents/attachments/components/AttachmentUploadModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
@@ -8,12 +8,14 @@ import { ref } from "vue";
 
 const FilePond = vueFilePond(FilePondPluginImagePreview);
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index e4f238720..9c2ac242e 100644
--- a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
-import type { PropType } from "vue";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  category: {
-    type: Object as PropType<unknown | null>,
-    default: null,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    category: unknown | null;
+  }>(),
+  {
+    visible: false,
+    category: undefined,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue
index 202899f8c..6d82314ee 100644
--- a/src/modules/contents/posts/components/PostSettingModal.vue
+++ b/src/modules/contents/posts/components/PostSettingModal.vue
@@ -8,7 +8,6 @@ import {
   VTabItem,
   VTabs,
 } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { ref, unref, watch } from "vue";
 import type { Post } from "@halo-dev/admin-api";
 
@@ -17,16 +16,16 @@ interface FormState {
   saving: boolean;
 }
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  post: {
-    type: Object as PropType<Post | Record<string, unknown> | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    post: Post | Record<string, unknown> | null;
+  }>(),
+  {
+    visible: false,
+    post: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close", "previous", "next"]);
 
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index fa7b57ecd..16baf62be 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -1,18 +1,16 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
-import type { PropType } from "vue";
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  tag: {
-    type: Object as PropType<unknown | null>,
-    default: null,
-  },
-});
 
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    tag: unknown | null;
+  }>(),
+  {
+    visible: false,
+    tag: undefined,
+  }
+);
 const emit = defineEmits(["update:visible", "close"]);
 
 const onVisibleChange = (visible: boolean) => {
diff --git a/src/modules/interface/menus/components/MenuEditingModal.vue b/src/modules/interface/menus/components/MenuEditingModal.vue
index 793170a3b..a14754b30 100644
--- a/src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuEditingModal.vue
@@ -2,24 +2,22 @@
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 import type { Menu } from "@halo-dev/api-client";
 import { v4 as uuid } from "uuid";
-import type { PropType } from "vue";
 import { computed, ref, watch } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
-import { reset } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  menu: {
-    type: Object as PropType<Menu | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    menu: Menu | null;
+  }>(),
+  {
+    visible: false,
+    menu: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/interface/menus/components/MenuItemEditingModal.vue b/src/modules/interface/menus/components/MenuItemEditingModal.vue
index 340c59759..fc2a2b20e 100644
--- a/src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -1,25 +1,23 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { computed, ref, watch, watchEffect } from "vue";
 import type { MenuItem } from "@halo-dev/api-client";
 import { v4 as uuid } from "uuid";
 import { apiClient } from "@halo-dev/admin-shared";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
-import { reset } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  menuItem: {
-    type: Object as PropType<MenuItem | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    menuItem: MenuItem | null;
+  }>(),
+  {
+    visible: false,
+    menuItem: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close", "saved"]);
 
diff --git a/src/modules/interface/menus/components/MenuItemListItem.vue b/src/modules/interface/menus/components/MenuItemListItem.vue
index 96a4cf173..d700699df 100644
--- a/src/modules/interface/menus/components/MenuItemListItem.vue
+++ b/src/modules/interface/menus/components/MenuItemListItem.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import { IconList, IconSettings, VButton, VSpace } from "@halo-dev/components";
 import Draggable from "vuedraggable";
-import type { PropType } from "vue";
 import { ref } from "vue";
 import type { MenuTreeItem } from "@/modules/interface/menus/utils";
 
-defineProps({
-  menuTreeItems: {
-    type: Array as PropType<MenuTreeItem[]>,
-    default: () => [],
-  },
-});
+withDefaults(
+  defineProps<{
+    menuTreeItems: MenuTreeItem[];
+  }>(),
+  {
+    menuTreeItems: () => [],
+  }
+);
 
 const emit = defineEmits(["change", "open-editing", "delete"]);
 
diff --git a/src/modules/interface/menus/components/MenuList.vue b/src/modules/interface/menus/components/MenuList.vue
index e6bb1a521..228bd366e 100644
--- a/src/modules/interface/menus/components/MenuList.vue
+++ b/src/modules/interface/menus/components/MenuList.vue
@@ -7,18 +7,19 @@ import {
   VSpace,
 } from "@halo-dev/components";
 import MenuEditingModal from "./MenuEditingModal.vue";
-import type { PropType } from "vue";
 import { defineExpose, onMounted, ref } from "vue";
 import type { Menu } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
 import { useRouteQuery } from "@vueuse/router";
 
-const props = defineProps({
-  selectedMenu: {
-    type: Object as PropType<Menu | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    selectedMenu: Menu | null;
+  }>(),
+  {
+    selectedMenu: null,
+  }
+);
 
 const emit = defineEmits(["select", "update:selectedMenu"]);
 
diff --git a/src/modules/interface/themes/components/ThemeInstallModal.vue b/src/modules/interface/themes/components/ThemeInstallModal.vue
index c6e55fcc2..385bee559 100644
--- a/src/modules/interface/themes/components/ThemeInstallModal.vue
+++ b/src/modules/interface/themes/components/ThemeInstallModal.vue
@@ -6,12 +6,14 @@ import { apiClient } from "@halo-dev/admin-shared";
 
 const FilePond = VueFilePond();
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue
index 6b183de56..ea5a7ffeb 100644
--- a/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/src/modules/interface/themes/components/ThemeListModal.vue
@@ -9,25 +9,22 @@ import {
   VTag,
 } from "@halo-dev/components";
 import ThemeInstallModal from "./ThemeInstallModal.vue";
-import type { PropType } from "vue";
 import { onMounted, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  selectedTheme: {
-    type: Object as PropType<Theme | null>,
-    default: null,
-  },
-  activatedTheme: {
-    type: Object as PropType<Theme | null>,
-    default: null,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    selectedTheme: Theme | null;
+    activatedTheme: Theme | null;
+  }>(),
+  {
+    visible: false,
+    selectedTheme: null,
+    activatedTheme: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close", "update:selectedTheme"]);
 
diff --git a/src/modules/system/plugins/components/PluginInstallModal.vue b/src/modules/system/plugins/components/PluginInstallModal.vue
index ed4493df2..75ca14fc3 100644
--- a/src/modules/system/plugins/components/PluginInstallModal.vue
+++ b/src/modules/system/plugins/components/PluginInstallModal.vue
@@ -7,12 +7,14 @@ import type { Plugin } from "@halo-dev/api-client";
 
 const FilePond = VueFilePond();
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/system/plugins/components/PluginListItem.vue b/src/modules/system/plugins/components/PluginListItem.vue
index 4af42d46d..d88869711 100644
--- a/src/modules/system/plugins/components/PluginListItem.vue
+++ b/src/modules/system/plugins/components/PluginListItem.vue
@@ -6,17 +6,18 @@ import {
   VSwitch,
   VTag,
 } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
 import type { Plugin } from "@halo-dev/api-client";
 
-const props = defineProps({
-  plugin: {
-    type: Object as PropType<Plugin | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    plugin: Plugin | null;
+  }>(),
+  {
+    plugin: null,
+  }
+);
 
 const { plugin } = toRefs(props);
 
diff --git a/src/modules/system/roles/components/RoleEditingModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
index 827faacf9..09d60d965 100644
--- a/src/modules/system/roles/components/RoleEditingModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { computed, ref, watch } from "vue";
 import { rbacAnnotations } from "@/constants/annotations";
 import type { Role } from "@halo-dev/api-client";
@@ -9,20 +8,19 @@ import {
   useRoleTemplateSelection,
 } from "@/modules/system/roles/composables/use-role";
 import cloneDeep from "lodash.clonedeep";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 import { useMagicKeys } from "@vueuse/core";
-import { reset } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  role: {
-    type: Object as PropType<Role | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    role: Role | null;
+  }>(),
+  {
+    visible: false,
+    role: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index 43657305d..8ffbbc366 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -1,5 +1,4 @@
 <script lang="ts" name="UserEditingModal" setup>
-import type { PropType } from "vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Role, User } from "@halo-dev/api-client";
@@ -19,16 +18,16 @@ import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
 import { reset, submitForm } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  user: {
-    type: Object as PropType<User | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    user: User | null;
+  }>(),
+  {
+    visible: false,
+    user: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/system/users/components/UserPasswordChangeModal.vue b/src/modules/system/users/components/UserPasswordChangeModal.vue
index 63073b290..301109412 100644
--- a/src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/src/modules/system/users/components/UserPasswordChangeModal.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import { VModal, VButton, IconSave } from "@halo-dev/components";
+import { IconSave, VButton, VModal } from "@halo-dev/components";
 import { inject, ref } from "vue";
 import type { User } from "@halo-dev/api-client";
-import type { PropType } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import cloneDeep from "lodash.clonedeep";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  user: {
-    type: Object as PropType<User | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    user: User | null;
+  }>(),
+  {
+    visible: false,
+    user: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 const currentUser = inject<User>("currentUser");