diff --git a/packages/materials/src/libs/admin-layout/index.vue b/packages/materials/src/libs/admin-layout/index.vue
index 47e56d04..0c0444c6 100644
--- a/packages/materials/src/libs/admin-layout/index.vue
+++ b/packages/materials/src/libs/admin-layout/index.vue
@@ -28,15 +28,13 @@ const props = withDefaults(defineProps<AdminLayoutProps>(), {
   rightFooter: false
 });
 
-const emit = defineEmits<Emits>();
-
-const slots = defineSlots<Slots>();
-
 interface Emits {
   /** Update siderCollapse */
   (e: 'update:siderCollapse', collapse: boolean): void;
 }
 
+const emit = defineEmits<Emits>();
+
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
@@ -51,6 +49,9 @@ type Slots = {
   /** Footer */
   footer?: SlotFn;
 };
+
+const slots = defineSlots<Slots>();
+
 const cssVars = computed(() => createLayoutCssVars(props));
 
 // config visible
diff --git a/packages/materials/src/libs/page-tab/button-tab.vue b/packages/materials/src/libs/page-tab/button-tab.vue
index 0ecdd487..be4f2c42 100644
--- a/packages/materials/src/libs/page-tab/button-tab.vue
+++ b/packages/materials/src/libs/page-tab/button-tab.vue
@@ -8,8 +8,6 @@ defineOptions({
 
 defineProps<PageTabProps>();
 
-defineSlots<Slots>();
-
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
@@ -32,6 +30,8 @@ type Slots = {
    */
   suffix?: SlotFn;
 };
+
+defineSlots<Slots>();
 </script>
 
 <template>
diff --git a/packages/materials/src/libs/page-tab/chrome-tab.vue b/packages/materials/src/libs/page-tab/chrome-tab.vue
index a3e7865a..64dc6985 100644
--- a/packages/materials/src/libs/page-tab/chrome-tab.vue
+++ b/packages/materials/src/libs/page-tab/chrome-tab.vue
@@ -9,8 +9,6 @@ defineOptions({
 
 defineProps<PageTabProps>();
 
-defineSlots<Slots>();
-
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
@@ -33,6 +31,8 @@ type Slots = {
    */
   suffix?: SlotFn;
 };
+
+defineSlots<Slots>();
 </script>
 
 <template>
diff --git a/packages/materials/src/libs/page-tab/index.vue b/packages/materials/src/libs/page-tab/index.vue
index c81691a5..9d0c06b3 100644
--- a/packages/materials/src/libs/page-tab/index.vue
+++ b/packages/materials/src/libs/page-tab/index.vue
@@ -19,14 +19,12 @@ const props = withDefaults(defineProps<PageTabProps>(), {
   closable: true
 });
 
-const emit = defineEmits<Emits>();
-
-defineSlots<Slots>();
-
 interface Emits {
   (e: 'close'): void;
 }
 
+const emit = defineEmits<Emits>();
+
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
@@ -50,6 +48,8 @@ type Slots = {
   suffix?: SlotFn;
 };
 
+defineSlots<Slots>();
+
 const activeTabComponent = computed(() => {
   const { mode, chromeClass, buttonClass } = props;
 
diff --git a/src/components/common/dark-mode-container.vue b/src/components/common/dark-mode-container.vue
index f0edf649..70f452ff 100644
--- a/src/components/common/dark-mode-container.vue
+++ b/src/components/common/dark-mode-container.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 defineOptions({ name: 'DarkModeContainer' });
 
-defineProps<Props>();
-
 interface Props {
   inverted?: boolean;
 }
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/src/components/common/exception-base.vue b/src/components/common/exception-base.vue
index 94ce0072..cc2f7068 100644
--- a/src/components/common/exception-base.vue
+++ b/src/components/common/exception-base.vue
@@ -4,8 +4,6 @@ import { $t } from '@/locales';
 
 defineOptions({ name: 'ExceptionBase' });
 
-const props = defineProps<Props>();
-
 type ExceptionType = '403' | '404' | '500';
 
 interface Props {
@@ -19,6 +17,8 @@ interface Props {
   type: ExceptionType;
 }
 
+const props = defineProps<Props>();
+
 const iconMap: Record<ExceptionType, string> = {
   '403': 'no-permission',
   '404': 'not-found',
diff --git a/src/components/common/full-screen.vue b/src/components/common/full-screen.vue
index 6343c2a1..3eb66df5 100644
--- a/src/components/common/full-screen.vue
+++ b/src/components/common/full-screen.vue
@@ -5,11 +5,11 @@ defineOptions({
   name: 'FullScreen'
 });
 
-defineProps<Props>();
-
 interface Props {
   full?: boolean;
 }
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/src/components/common/lang-switch.vue b/src/components/common/lang-switch.vue
index c6bdcd4c..466720c6 100644
--- a/src/components/common/lang-switch.vue
+++ b/src/components/common/lang-switch.vue
@@ -6,12 +6,6 @@ defineOptions({
   name: 'LangSwitch'
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  showTooltip: true
-});
-
-const emit = defineEmits<Emits>();
-
 interface Props {
   /** Current language */
   lang: App.I18n.LangType;
@@ -21,10 +15,16 @@ interface Props {
   showTooltip?: boolean;
 }
 
+const props = withDefaults(defineProps<Props>(), {
+  showTooltip: true
+});
+
 type Emits = {
   (e: 'changeLang', lang: App.I18n.LangType): void;
 };
 
+const emit = defineEmits<Emits>();
+
 const tooltipContent = computed(() => {
   if (!props.showTooltip) return '';
 
diff --git a/src/components/common/menu-toggler.vue b/src/components/common/menu-toggler.vue
index 3dd98a74..7d8986ba 100644
--- a/src/components/common/menu-toggler.vue
+++ b/src/components/common/menu-toggler.vue
@@ -4,8 +4,6 @@ import { $t } from '@/locales';
 
 defineOptions({ name: 'MenuToggler' });
 
-const props = defineProps<Props>();
-
 interface Props {
   /** Show collapsed icon */
   collapsed?: boolean;
@@ -13,6 +11,8 @@ interface Props {
   arrowIcon?: boolean;
 }
 
+const props = defineProps<Props>();
+
 type NumberBool = 0 | 1;
 
 const icon = computed(() => {
diff --git a/src/components/common/pin-toggler.vue b/src/components/common/pin-toggler.vue
index 17d32bae..aa31eadb 100644
--- a/src/components/common/pin-toggler.vue
+++ b/src/components/common/pin-toggler.vue
@@ -4,12 +4,12 @@ import { $t } from '@/locales';
 
 defineOptions({ name: 'PinToggler' });
 
-const props = defineProps<Props>();
-
 interface Props {
   pin?: boolean;
 }
 
+const props = defineProps<Props>();
+
 const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
 </script>
 
diff --git a/src/components/common/reload-button.vue b/src/components/common/reload-button.vue
index dbf5d5eb..b20ca5b2 100644
--- a/src/components/common/reload-button.vue
+++ b/src/components/common/reload-button.vue
@@ -5,11 +5,11 @@ defineOptions({
   name: 'ReloadButton'
 });
 
-defineProps<Props>();
-
 interface Props {
   loading?: boolean;
 }
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/src/components/common/theme-schema-switch.vue b/src/components/common/theme-schema-switch.vue
index b97f430f..78050d4f 100644
--- a/src/components/common/theme-schema-switch.vue
+++ b/src/components/common/theme-schema-switch.vue
@@ -5,13 +5,6 @@ import { $t } from '@/locales';
 
 defineOptions({ name: 'ThemeSchemaSwitch' });
 
-const props = withDefaults(defineProps<Props>(), {
-  showTooltip: true,
-  tooltipPlacement: 'bottom'
-});
-
-const emit = defineEmits<Emits>();
-
 interface Props {
   /** Theme schema */
   themeSchema: UnionKey.ThemeScheme;
@@ -21,10 +14,17 @@ interface Props {
   tooltipPlacement?: PopoverPlacement;
 }
 
+const props = withDefaults(defineProps<Props>(), {
+  showTooltip: true,
+  tooltipPlacement: 'bottom'
+});
+
 interface Emits {
   (e: 'switch'): void;
 }
 
+const emit = defineEmits<Emits>();
+
 function handleSwitch() {
   emit('switch');
 }
diff --git a/src/components/custom/better-scroll.vue b/src/components/custom/better-scroll.vue
index 80006545..f162ee82 100644
--- a/src/components/custom/better-scroll.vue
+++ b/src/components/custom/better-scroll.vue
@@ -6,8 +6,6 @@ import type { Options } from '@better-scroll/core';
 
 defineOptions({ name: 'BetterScroll' });
 
-const props = defineProps<Props>();
-
 interface Props {
   /**
    * BetterScroll options
@@ -17,6 +15,8 @@ interface Props {
   options: Options;
 }
 
+const props = defineProps<Props>();
+
 const bsWrap = ref<HTMLElement>();
 const bsContent = ref<HTMLElement>();
 const { width: wrapWidth } = useElementSize(bsWrap);
diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
index 8f63a3f3..6860afb4 100644
--- a/src/components/custom/button-icon.vue
+++ b/src/components/custom/button-icon.vue
@@ -8,13 +8,6 @@ defineOptions({
   inheritAttrs: false
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  class: 'h-36px text-icon',
-  icon: '',
-  tooltipContent: '',
-  tooltipPlacement: 'bottom'
-});
-
 interface Props {
   /** Button class */
   class?: string;
@@ -26,6 +19,13 @@ interface Props {
   tooltipPlacement?: PopoverPlacement;
 }
 
+const props = withDefaults(defineProps<Props>(), {
+  class: 'h-36px text-icon',
+  icon: '',
+  tooltipContent: '',
+  tooltipPlacement: 'bottom'
+});
+
 interface ButtonProps {
   className: string;
 }
diff --git a/src/components/custom/count-to.vue b/src/components/custom/count-to.vue
index 14ffe2e7..910b4cc2 100644
--- a/src/components/custom/count-to.vue
+++ b/src/components/custom/count-to.vue
@@ -6,6 +6,20 @@ defineOptions({
   name: 'CountTo'
 });
 
+interface Props {
+  startValue?: number;
+  endValue?: number;
+  duration?: number;
+  autoplay?: boolean;
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+  separator?: string;
+  decimal?: string;
+  useEasing?: boolean;
+  transition?: keyof typeof TransitionPresets;
+}
+
 const props = withDefaults(defineProps<Props>(), {
   startValue: 0,
   endValue: 2021,
@@ -20,22 +34,6 @@ const props = withDefaults(defineProps<Props>(), {
   transition: 'linear'
 });
 
-type TransitionKey = keyof typeof TransitionPresets;
-
-interface Props {
-  startValue?: number;
-  endValue?: number;
-  duration?: number;
-  autoplay?: boolean;
-  decimals?: number;
-  prefix?: string;
-  suffix?: string;
-  separator?: string;
-  decimal?: string;
-  useEasing?: boolean;
-  transition?: TransitionKey;
-}
-
 const source = ref(props.startValue);
 
 const transition = computed(() => (props.useEasing ? TransitionPresets[props.transition] : undefined));
diff --git a/src/components/custom/svg-icon.vue b/src/components/custom/svg-icon.vue
index cbf61e4d..fbf204d3 100644
--- a/src/components/custom/svg-icon.vue
+++ b/src/components/custom/svg-icon.vue
@@ -4,8 +4,6 @@ import { Icon } from '@iconify/vue';
 
 defineOptions({ name: 'SvgIcon' });
 
-const props = defineProps<Props>();
-
 /**
  * Props
  *
@@ -19,6 +17,8 @@ interface Props {
   localIcon?: string;
 }
 
+const props = defineProps<Props>();
+
 const attrs = useAttrs();
 
 const bindAttrs = computed<{ class: string; style: string }>(() => ({
diff --git a/src/components/custom/wave-bg.vue b/src/components/custom/wave-bg.vue
index bfed586d..2a6ef54c 100644
--- a/src/components/custom/wave-bg.vue
+++ b/src/components/custom/wave-bg.vue
@@ -2,6 +2,8 @@
 import { computed } from 'vue';
 import { getColorPalette } from '@sa/utils';
 
+defineOptions({ name: 'WaveBg' });
+
 interface Props {
   /** Theme color */
   themeColor: string;
diff --git a/src/layouts/modules/global-content/index.vue b/src/layouts/modules/global-content/index.vue
index 79c04855..ef40088e 100644
--- a/src/layouts/modules/global-content/index.vue
+++ b/src/layouts/modules/global-content/index.vue
@@ -7,15 +7,15 @@ defineOptions({
   name: 'GlobalContent'
 });
 
-withDefaults(defineProps<Props>(), {
-  showPadding: true
-});
-
 interface Props {
   /** Show padding for content */
   showPadding?: boolean;
 }
 
+withDefaults(defineProps<Props>(), {
+  showPadding: true
+});
+
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
diff --git a/src/layouts/modules/global-header/index.vue b/src/layouts/modules/global-header/index.vue
index 50855dc5..253876e7 100644
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@@ -14,12 +14,6 @@ import UserAvatar from './components/user-avatar.vue';
 defineOptions({
   name: 'GlobalHeader'
 });
-defineProps<Props>();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-const { isFullscreen, toggle } = useFullscreen();
-const { menus } = useMixMenuContext();
 
 interface Props {
   /** Whether to show the logo */
@@ -30,6 +24,14 @@ interface Props {
   showMenu?: App.Global.HeaderProps['showMenu'];
 }
 
+defineProps<Props>();
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { isFullscreen, toggle } = useFullscreen();
+const { menus } = useMixMenuContext();
+
 const headerMenus = computed(() => {
   if (themeStore.layout.mode === 'horizontal') {
     return routeStore.menus;
diff --git a/src/layouts/modules/global-logo/index.vue b/src/layouts/modules/global-logo/index.vue
index f88543e3..a44d388d 100644
--- a/src/layouts/modules/global-logo/index.vue
+++ b/src/layouts/modules/global-logo/index.vue
@@ -5,14 +5,14 @@ defineOptions({
   name: 'GlobalLogo'
 });
 
-withDefaults(defineProps<Props>(), {
-  showTitle: true
-});
-
 interface Props {
   /** Whether to show the title */
   showTitle?: boolean;
 }
+
+withDefaults(defineProps<Props>(), {
+  showTitle: true
+});
 </script>
 
 <template>
diff --git a/src/layouts/modules/global-menu/base-menu.vue b/src/layouts/modules/global-menu/base-menu.vue
index c3d24f4c..3b7fb93b 100644
--- a/src/layouts/modules/global-menu/base-menu.vue
+++ b/src/layouts/modules/global-menu/base-menu.vue
@@ -13,16 +13,16 @@ defineOptions({
   name: 'BaseMenu'
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'vertical'
-});
-
 interface Props {
   darkTheme?: boolean;
   mode?: MenuProps['mode'];
   menus: App.Global.Menu[];
 }
 
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'vertical'
+});
+
 const route = useRoute();
 const appStore = useAppStore();
 const themeStore = useThemeStore();
diff --git a/src/layouts/modules/global-menu/first-level-menu.vue b/src/layouts/modules/global-menu/first-level-menu.vue
index 6ac647fa..0ae7c8a3 100644
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/first-level-menu.vue
@@ -11,19 +11,19 @@ defineOptions({
   name: 'FirstLevelMenu'
 });
 
-defineProps<Props>();
-
-const emit = defineEmits<Emits>();
-
 interface Props {
   activeMenuKey?: string;
   inverted?: boolean;
 }
 
+defineProps<Props>();
+
 interface Emits {
   (e: 'select', menu: App.Global.Menu): boolean;
 }
 
+const emit = defineEmits<Emits>();
+
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
diff --git a/src/layouts/modules/global-tab/context-menu.vue b/src/layouts/modules/global-tab/context-menu.vue
index dca0e7f4..4a51204e 100644
--- a/src/layouts/modules/global-tab/context-menu.vue
+++ b/src/layouts/modules/global-tab/context-menu.vue
@@ -10,11 +10,6 @@ defineOptions({
   name: 'ContextMenu'
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  excludeKeys: () => [],
-  disabledKeys: () => []
-});
-
 interface Props {
   /** ClientX */
   x: number;
@@ -25,6 +20,11 @@ interface Props {
   disabledKeys?: App.Global.DropdownKey[];
 }
 
+const props = withDefaults(defineProps<Props>(), {
+  excludeKeys: () => [],
+  disabledKeys: () => []
+});
+
 const visible = defineModel<boolean>('visible');
 
 const { removeTab, clearTabs, clearLeftTabs, clearRightTabs } = useTabStore();
diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
index 599aff58..6a6b969d 100644
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -7,10 +7,6 @@ defineOptions({
   name: 'LayoutModeCard'
 });
 
-const props = defineProps<Props>();
-
-const emit = defineEmits<Emits>();
-
 interface Props {
   /** Layout mode */
   mode: UnionKey.ThemeLayoutMode;
@@ -18,11 +14,15 @@ interface Props {
   disabled?: boolean;
 }
 
+const props = defineProps<Props>();
+
 interface Emits {
   /** Layout mode change */
   (e: 'update:mode', mode: UnionKey.ThemeLayoutMode): void;
 }
 
+const emit = defineEmits<Emits>();
+
 type LayoutConfig = Record<
   UnionKey.ThemeLayoutMode,
   {
diff --git a/src/layouts/modules/theme-drawer/components/setting-item.vue b/src/layouts/modules/theme-drawer/components/setting-item.vue
index 561e36c7..9def299a 100644
--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/src/layouts/modules/theme-drawer/components/setting-item.vue
@@ -3,12 +3,12 @@ defineOptions({
   name: 'SettingItem'
 });
 
-defineProps<Props>();
-
 interface Props {
   /** Label */
   label: string;
 }
+
+defineProps<Props>();
 </script>
 
 <template>