diff --git a/package.json b/package.json
index 2adfc3b7..ac73b758 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,8 @@
     "@antv/data-set": "^0.11.8",
     "@antv/g2": "^4.2.5",
     "@better-scroll/core": "^2.4.2",
-    "@soybeanjs/vue-admin-layout": "^1.0.4",
-    "@soybeanjs/vue-admin-tab": "^1.0.2",
+    "@soybeanjs/vue-admin-layout": "^1.0.6",
+    "@soybeanjs/vue-admin-tab": "^1.0.3",
     "@vueuse/core": "^8.9.1",
     "axios": "^0.27.2",
     "clipboard": "^2.0.11",
diff --git a/src/components/business/LoadingEmptyWrapper.vue b/src/components/business/LoadingEmptyWrapper.vue
index 7e15b0b4..b15d332f 100644
--- a/src/components/business/LoadingEmptyWrapper.vue
+++ b/src/components/business/LoadingEmptyWrapper.vue
@@ -26,6 +26,8 @@ import { computed, watch, nextTick, onUnmounted } from 'vue';
 import { NETWORK_ERROR_MSG } from '@/config';
 import { useBoolean } from '@/hooks';
 
+defineOptions({ name: 'LoadingEmptyWrapper' });
+
 interface Props {
   /** 是否加载 */
   loading: boolean;
diff --git a/src/components/business/LoginAgreement.vue b/src/components/business/LoginAgreement.vue
index e7b51dba..60408ee5 100644
--- a/src/components/business/LoginAgreement.vue
+++ b/src/components/business/LoginAgreement.vue
@@ -9,11 +9,17 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+defineOptions({ name: 'LoginAgreement' });
+
 interface Props {
   /** 是否勾选 */
   value?: boolean;
 }
 
+const props = withDefaults(defineProps<Props>(), {
+  value: true
+});
+
 interface Emits {
   (e: 'update:value', value: boolean): void;
   /** 点击协议 */
@@ -22,10 +28,6 @@ interface Emits {
   (e: 'click-policy'): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  value: true
-});
-
 const emit = defineEmits<Emits>();
 
 const checked = computed({
diff --git a/src/components/common/DarkModeContainer.vue b/src/components/common/DarkModeContainer.vue
index 80e8546c..65995b9a 100644
--- a/src/components/common/DarkModeContainer.vue
+++ b/src/components/common/DarkModeContainer.vue
@@ -8,9 +8,12 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({ name: 'DarkModeContainer' });
+
 interface Props {
   inverted?: boolean;
 }
+
 withDefaults(defineProps<Props>(), {
   inverted: false
 });
diff --git a/src/components/common/DarkModeSwitch.vue b/src/components/common/DarkModeSwitch.vue
index 4ab2b54a..9fa01fe6 100644
--- a/src/components/common/DarkModeSwitch.vue
+++ b/src/components/common/DarkModeSwitch.vue
@@ -8,19 +8,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+defineOptions({ name: 'DarkModeSwitch' });
+
 interface Props {
   /** 暗黑模式 */
   dark?: boolean;
 }
 
-interface Emits {
-  (e: 'update:dark', darkMode: boolean): void;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   dark: false
 });
 
+interface Emits {
+  (e: 'update:dark', darkMode: boolean): void;
+}
+
 const emit = defineEmits<Emits>();
 
 const darkMode = computed({
diff --git a/src/components/common/ExceptionBase.vue b/src/components/common/ExceptionBase.vue
index 33b72961..f7a7e728 100644
--- a/src/components/common/ExceptionBase.vue
+++ b/src/components/common/ExceptionBase.vue
@@ -14,6 +14,8 @@
 <script lang="ts" setup>
 import { routeName } from '@/router';
 
+defineOptions({ name: 'ExceptionBase' });
+
 type ExceptionType = '403' | '404' | '500';
 
 interface Props {
diff --git a/src/components/common/HoverContainer.vue b/src/components/common/HoverContainer.vue
index 9dd3cf55..19348b8b 100644
--- a/src/components/common/HoverContainer.vue
+++ b/src/components/common/HoverContainer.vue
@@ -18,6 +18,8 @@
 import { computed } from 'vue';
 import type { PopoverPlacement } from 'naive-ui';
 
+defineOptions({ name: 'HoverContainer' });
+
 interface Props {
   /** tooltip显示文本 */
   tooltipContent?: string;
@@ -28,6 +30,7 @@ interface Props {
   /** 反转模式下 */
   inverted?: boolean;
 }
+
 const props = withDefaults(defineProps<Props>(), {
   tooltipContent: '',
   placement: 'bottom',
diff --git a/src/components/common/NaiveProvider.vue b/src/components/common/NaiveProvider.vue
index a9e48a76..56933ad3 100644
--- a/src/components/common/NaiveProvider.vue
+++ b/src/components/common/NaiveProvider.vue
@@ -15,6 +15,8 @@
 import { defineComponent, h } from 'vue';
 import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui';
 
+defineOptions({ name: 'NaiveProvider' });
+
 // 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
 function registerNaiveTools() {
   window.$loadingBar = useLoadingBar();
@@ -24,6 +26,7 @@ function registerNaiveTools() {
 }
 
 const NaiveProviderContent = defineComponent({
+  name: 'NaiveProviderContent',
   setup() {
     registerNaiveTools();
   },
diff --git a/src/components/common/SystemLogo.vue b/src/components/common/SystemLogo.vue
index d25e82a9..5298518a 100644
--- a/src/components/common/SystemLogo.vue
+++ b/src/components/common/SystemLogo.vue
@@ -4,6 +4,8 @@
 </template>
 
 <script lang="ts" setup>
+defineOptions({ name: 'SystemLogo' });
+
 interface Props {
   /** logo是否填充 */
   fill?: boolean;
diff --git a/src/components/custom/BetterScroll.vue b/src/components/custom/BetterScroll.vue
index 51863117..4891f845 100644
--- a/src/components/custom/BetterScroll.vue
+++ b/src/components/custom/BetterScroll.vue
@@ -12,6 +12,8 @@ import { useElementSize } from '@vueuse/core';
 import BScroll from '@better-scroll/core';
 import type { Options } from '@better-scroll/core';
 
+defineOptions({ name: 'BetterScroll' });
+
 interface Props {
   /** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
   options: Options;
diff --git a/src/components/custom/CountTo.vue b/src/components/custom/CountTo.vue
index ea683415..5c60c34a 100644
--- a/src/components/custom/CountTo.vue
+++ b/src/components/custom/CountTo.vue
@@ -6,6 +6,8 @@ import { ref, computed, onMounted, watch, watchEffect } from 'vue';
 import { useTransition, TransitionPresets } from '@vueuse/core';
 import { isNumber } from '@/utils';
 
+defineOptions({ name: 'CountTo' });
+
 interface Props {
   /** 初始值 */
   startValue?: number;
@@ -45,10 +47,12 @@ const props = withDefaults(defineProps<Props>(), {
   transition: 'linear'
 });
 
-const emit = defineEmits<{
+interface Emits {
   (e: 'on-started'): void;
   (e: 'on-finished'): void;
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const source = ref(props.startValue);
 let outputValue = useTransition(source);
diff --git a/src/components/custom/GithubLink.vue b/src/components/custom/GithubLink.vue
index d5c832c7..d119d5b1 100644
--- a/src/components/custom/GithubLink.vue
+++ b/src/components/custom/GithubLink.vue
@@ -5,6 +5,8 @@
 <script setup lang="ts">
 import WebSiteLink from './WebSiteLink.vue';
 
+defineOptions({ name: 'GithubLink' });
+
 interface Props {
   /** github链接 */
   link: string;
diff --git a/src/components/custom/IconSelect.vue b/src/components/custom/IconSelect.vue
index 3c9255d3..0326e97b 100644
--- a/src/components/custom/IconSelect.vue
+++ b/src/components/custom/IconSelect.vue
@@ -29,6 +29,8 @@ import { ref, computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 
+defineOptions({ name: 'IconSelect' });
+
 interface Props {
   /** 选中的图标 */
   value: string;
@@ -38,14 +40,14 @@ interface Props {
   emptyIcon?: string;
 }
 
-interface Emits {
-  (e: 'update:value', val: string): void;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   emptyIcon: 'mdi:apps'
 });
 
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
 const emit = defineEmits<Emits>();
 
 const theme = useThemeStore();
diff --git a/src/components/custom/ImageVerify.vue b/src/components/custom/ImageVerify.vue
index 54c22f6f..6e2cc134 100644
--- a/src/components/custom/ImageVerify.vue
+++ b/src/components/custom/ImageVerify.vue
@@ -8,18 +8,20 @@
 import { watch } from 'vue';
 import { useImageVerify } from '@/hooks';
 
+defineOptions({ name: 'ImageVerify' });
+
 interface Props {
   code?: string;
 }
 
-interface Emits {
-  (e: 'update:code', code: string): void;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   code: ''
 });
 
+interface Emits {
+  (e: 'update:code', code: string): void;
+}
+
 const emit = defineEmits<Emits>();
 
 const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
diff --git a/src/components/custom/SvgIcon.vue b/src/components/custom/SvgIcon.vue
index 0546aedc..490c4be9 100644
--- a/src/components/custom/SvgIcon.vue
+++ b/src/components/custom/SvgIcon.vue
@@ -7,6 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+defineOptions({ name: 'SvgIcon' });
+
 interface Props {
   /** 前缀 */
   prefix?: string;
diff --git a/src/components/custom/WebSiteLink.vue b/src/components/custom/WebSiteLink.vue
index ae725d08..dd406741 100644
--- a/src/components/custom/WebSiteLink.vue
+++ b/src/components/custom/WebSiteLink.vue
@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({ name: 'WebSiteLink' });
+
 interface Props {
   /** 网址名称 */
   label: string;
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 601d51d1..f09a7096 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -46,6 +46,8 @@ import {
   GlobalBackTop
 } from '../common';
 
+defineOptions({ name: 'BasicLayout' });
+
 const app = useAppStore();
 const theme = useThemeStore();
 
diff --git a/src/layouts/BlankLayout/index.vue b/src/layouts/BlankLayout/index.vue
index 65ff7331..45eece2e 100644
--- a/src/layouts/BlankLayout/index.vue
+++ b/src/layouts/BlankLayout/index.vue
@@ -4,6 +4,8 @@
 
 <script setup lang="ts">
 import { GlobalContent } from '../common';
+
+defineOptions({ name: 'BlankLayout' });
 </script>
 
 <style scoped></style>
diff --git a/src/layouts/common/GlobalBackTop/index.vue b/src/layouts/common/GlobalBackTop/index.vue
index a2373ecc..84d82d97 100644
--- a/src/layouts/common/GlobalBackTop/index.vue
+++ b/src/layouts/common/GlobalBackTop/index.vue
@@ -6,6 +6,8 @@
 import { computed } from 'vue';
 import { useWindowScroll } from '@vueuse/core';
 
+defineOptions({ name: 'GlobalBackTop' });
+
 const { y: scrollY } = useWindowScroll();
 
 const show = computed(() => scrollY.value > 180);
diff --git a/src/layouts/common/GlobalContent/index.vue b/src/layouts/common/GlobalContent/index.vue
index e7b99016..d2cfba66 100644
--- a/src/layouts/common/GlobalContent/index.vue
+++ b/src/layouts/common/GlobalContent/index.vue
@@ -22,20 +22,22 @@
 <script setup lang="ts">
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 
+defineOptions({ name: 'GlobalContent' });
+
 interface Props {
   /** 显示padding */
   showPadding?: boolean;
 }
 
+withDefaults(defineProps<Props>(), {
+  showPadding: true
+});
+
 interface Emits {
   /** 禁止主体溢出 */
   (e: 'hide-main-overflow', hidden: boolean): void;
 }
 
-withDefaults(defineProps<Props>(), {
-  showPadding: true
-});
-
 const emit = defineEmits<Emits>();
 
 const app = useAppStore();
diff --git a/src/layouts/common/GlobalFooter/index.vue b/src/layouts/common/GlobalFooter/index.vue
index 71e3f7b8..c01710fc 100644
--- a/src/layouts/common/GlobalFooter/index.vue
+++ b/src/layouts/common/GlobalFooter/index.vue
@@ -4,6 +4,8 @@
   </dark-mode-container>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({ name: 'GlobalFooter' });
+</script>
 
 <style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/FullScreen.vue b/src/layouts/common/GlobalHeader/components/FullScreen.vue
index 451425e7..42b32d49 100644
--- a/src/layouts/common/GlobalHeader/components/FullScreen.vue
+++ b/src/layouts/common/GlobalHeader/components/FullScreen.vue
@@ -9,6 +9,8 @@
 import { useFullscreen } from '@vueuse/core';
 import { useThemeStore } from '@/store';
 
+defineOptions({ name: 'FullScreen' });
+
 const { isFullscreen, toggle } = useFullscreen();
 const theme = useThemeStore();
 </script>
diff --git a/src/layouts/common/GlobalHeader/components/GithubSite.vue b/src/layouts/common/GlobalHeader/components/GithubSite.vue
index a8ddeb13..c7c64433 100644
--- a/src/layouts/common/GlobalHeader/components/GithubSite.vue
+++ b/src/layouts/common/GlobalHeader/components/GithubSite.vue
@@ -12,6 +12,8 @@
 <script lang="ts" setup>
 import { useThemeStore } from '@/store';
 
+defineOptions({ name: 'GithubSite' });
+
 const theme = useThemeStore();
 function handleClickLink() {
   window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
index 45d71d32..8fd5b251 100644
--- a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
+++ b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -34,6 +34,8 @@ import { useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getBreadcrumbByRouteKey } from '@/utils';
 
+defineOptions({ name: 'GlobalBreadcrumb' });
+
 const route = useRoute();
 const theme = useThemeStore();
 const routeStore = useRouteStore();
diff --git a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
index fe128360..a336f875 100644
--- a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
+++ b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
@@ -21,6 +21,8 @@ import type { MenuOption } from 'naive-ui';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 
+defineOptions({ name: 'HeaderMenu' });
+
 const route = useRoute();
 const routeStore = useRouteStore();
 const theme = useThemeStore();
diff --git a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue b/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
index 25a2f565..ba41254b 100644
--- a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
+++ b/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
@@ -8,6 +8,8 @@
 <script lang="ts" setup>
 import { useAppStore, useThemeStore } from '@/store';
 
+defineOptions({ name: 'MenuCollapse' });
+
 const app = useAppStore();
 const theme = useThemeStore();
 </script>
diff --git a/src/layouts/common/GlobalHeader/components/MessageList.vue b/src/layouts/common/GlobalHeader/components/MessageList.vue
index 11a2e31a..c4ed8647 100644
--- a/src/layouts/common/GlobalHeader/components/MessageList.vue
+++ b/src/layouts/common/GlobalHeader/components/MessageList.vue
@@ -38,18 +38,20 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
 
+defineOptions({ name: 'MessageList' });
+
 interface Props {
   list?: Message.List[];
 }
 
-interface Emits {
-  (e: 'read', val: number): void;
-}
-
 withDefaults(defineProps<Props>(), {
   list: () => []
 });
 
+interface Emits {
+  (e: 'read', val: number): void;
+}
+
 const emit = defineEmits<Emits>();
 
 function handleRead(index: number) {
diff --git a/src/layouts/common/GlobalHeader/components/SettingButton.vue b/src/layouts/common/GlobalHeader/components/SettingButton.vue
index 22cf1d04..09174c52 100644
--- a/src/layouts/common/GlobalHeader/components/SettingButton.vue
+++ b/src/layouts/common/GlobalHeader/components/SettingButton.vue
@@ -12,6 +12,8 @@
 <script setup lang="ts">
 import { useAppStore, useThemeStore } from '@/store';
 
+defineOptions({ name: 'SettingButton' });
+
 const app = useAppStore();
 const theme = useThemeStore();
 </script>
diff --git a/src/layouts/common/GlobalHeader/components/SystemMessage.vue b/src/layouts/common/GlobalHeader/components/SystemMessage.vue
index c304b24e..30791824 100644
--- a/src/layouts/common/GlobalHeader/components/SystemMessage.vue
+++ b/src/layouts/common/GlobalHeader/components/SystemMessage.vue
@@ -48,9 +48,13 @@ import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import MessageList from './MessageList.vue';
 
+defineOptions({ name: 'SystemMessage' });
+
 const theme = useThemeStore();
 const { bool: loading, setBool: setLoading } = useBoolean();
+
 const currentTab = ref(0);
+
 const tabData = ref<Message.Tab[]>([
   {
     key: 1,
diff --git a/src/layouts/common/GlobalHeader/components/ThemeMode.vue b/src/layouts/common/GlobalHeader/components/ThemeMode.vue
index 3f38ee8f..53bb32f2 100644
--- a/src/layouts/common/GlobalHeader/components/ThemeMode.vue
+++ b/src/layouts/common/GlobalHeader/components/ThemeMode.vue
@@ -7,6 +7,8 @@
 <script lang="ts" setup>
 import { useThemeStore } from '@/store';
 
+defineOptions({ name: 'ThemeMode' });
+
 const theme = useThemeStore();
 </script>
 
diff --git a/src/layouts/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
index 86790f7b..f995c130 100644
--- a/src/layouts/common/GlobalHeader/components/UserAvatar.vue
+++ b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
@@ -8,15 +8,16 @@
 </template>
 
 <script lang="ts" setup>
+import type { DropdownOption } from 'naive-ui';
 import { useAuthStore, useThemeStore } from '@/store';
 import { iconifyRender } from '@/utils';
 
-type DropdownKey = 'user-center' | 'logout';
+defineOptions({ name: 'UserAvatar' });
 
 const auth = useAuthStore();
 const theme = useThemeStore();
 
-const options = [
+const options: DropdownOption[] = [
   {
     label: '用户中心',
     key: 'user-center',
@@ -33,6 +34,8 @@ const options = [
   }
 ];
 
+type DropdownKey = 'user-center' | 'logout';
+
 function handleDropdown(optionKey: string) {
   const key = optionKey as DropdownKey;
   if (key === 'logout') {
diff --git a/src/layouts/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue
index a5192b27..6b686be8 100644
--- a/src/layouts/common/GlobalHeader/index.vue
+++ b/src/layouts/common/GlobalHeader/index.vue
@@ -34,6 +34,8 @@ import {
   SettingButton
 } from './components';
 
+defineOptions({ name: 'GlobalHeader' });
+
 interface Props {
   /** 显示logo */
   showLogo: GlobalHeaderProps['showLogo'];
diff --git a/src/layouts/common/GlobalLogo/index.vue b/src/layouts/common/GlobalLogo/index.vue
index aedd5f32..8861fbf7 100644
--- a/src/layouts/common/GlobalLogo/index.vue
+++ b/src/layouts/common/GlobalLogo/index.vue
@@ -11,6 +11,8 @@
 import { routePath } from '@/router';
 import { useAppInfo } from '@/composables';
 
+defineOptions({ name: 'GlobalLogo' });
+
 interface Props {
   /** 显示名字 */
   showTitle: boolean;
diff --git a/src/layouts/common/GlobalSearch/components/SearchFooter.vue b/src/layouts/common/GlobalSearch/components/SearchFooter.vue
index 3f110796..889c2b79 100644
--- a/src/layouts/common/GlobalSearch/components/SearchFooter.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchFooter.vue
@@ -16,7 +16,9 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+defineOptions({ name: 'SearchFooter' });
+</script>
 
 <style lang="scss" scoped>
 .icon {
diff --git a/src/layouts/common/GlobalSearch/components/SearchModal.vue b/src/layouts/common/GlobalSearch/components/SearchModal.vue
index 051208b7..95de0a7c 100644
--- a/src/layouts/common/GlobalSearch/components/SearchModal.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchModal.vue
@@ -31,17 +31,19 @@ import { useRouteStore } from '@/store';
 import SearchResult from './SearchResult.vue';
 import SearchFooter from './SearchFooter.vue';
 
+defineOptions({ name: 'SearchModal' });
+
 interface Props {
   /** 弹窗显隐 */
   value: boolean;
 }
 
+const props = defineProps<Props>();
+
 interface Emits {
   (e: 'update:value', val: boolean): void;
 }
 
-const props = defineProps<Props>();
-
 const emit = defineEmits<Emits>();
 
 const router = useRouter();
diff --git a/src/layouts/common/GlobalSearch/components/SearchResult.vue b/src/layouts/common/GlobalSearch/components/SearchResult.vue
index dd2ceac0..6399e4a9 100644
--- a/src/layouts/common/GlobalSearch/components/SearchResult.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchResult.vue
@@ -25,18 +25,20 @@ import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 
+defineOptions({ name: 'SearchResult' });
+
 interface Props {
   value: string;
   options: AuthRoute.Route[];
 }
 
+const props = defineProps<Props>();
+
 interface Emits {
   (e: 'update:value', val: string): void;
   (e: 'enter'): void;
 }
 
-const props = defineProps<Props>();
-
 const emit = defineEmits<Emits>();
 
 const theme = useThemeStore();
diff --git a/src/layouts/common/GlobalSearch/index.vue b/src/layouts/common/GlobalSearch/index.vue
index 6d1f8f64..ae625a5a 100644
--- a/src/layouts/common/GlobalSearch/index.vue
+++ b/src/layouts/common/GlobalSearch/index.vue
@@ -17,6 +17,8 @@ import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import { SearchModal } from './components';
 
+defineOptions({ name: 'GlobalSearch' });
+
 const { bool: show, toggle } = useBoolean();
 const theme = useThemeStore();
 
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
index f6683a31..d7698ae2 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
@@ -8,6 +8,8 @@
 <script lang="ts" setup>
 import { useAppStore } from '@/store';
 
+defineOptions({ name: 'MixMenuCollapse' });
+
 const app = useAppStore();
 </script>
 
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue
index 19b818f8..80fe671a 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue
@@ -20,6 +20,8 @@ import { computed } from 'vue';
 import type { VNodeChild } from 'vue';
 import { useBoolean } from '@/hooks';
 
+defineOptions({ name: 'MixMenuDetail' });
+
 interface Props {
   /** 路由名称 */
   routeName: string;
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
index 53418569..7e42cc60 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
@@ -36,6 +36,8 @@ import { useAppStore, useThemeStore } from '@/store';
 import { useAppInfo, useRouterPush } from '@/composables';
 import { getActiveKeyPathsOfMenus } from '@/utils';
 
+defineOptions({ name: 'MixMenuDrawer' });
+
 interface Props {
   /** 菜单抽屉可见性 */
   visible: boolean;
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
index bccd9fff..6bf278e4 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
@@ -29,6 +29,8 @@ import { useBoolean } from '@/hooks';
 import { GlobalLogo } from '@/layouts/common';
 import { MixMenuDetail, MixMenuDrawer, MixMenuCollapse } from './components';
 
+defineOptions({ name: 'VerticalMixSider' });
+
 const route = useRoute();
 const app = useAppStore();
 const theme = useThemeStore();
diff --git a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
index ad68cc46..19d8aaf0 100644
--- a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
@@ -23,6 +23,8 @@ import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getActiveKeyPathsOfMenus } from '@/utils';
 
+defineOptions({ name: 'VerticalMenu' });
+
 const route = useRoute();
 const app = useAppStore();
 const theme = useThemeStore();
diff --git a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
index dd9dcc9f..f3cd224a 100644
--- a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
@@ -11,6 +11,8 @@ import { useAppStore, useThemeStore } from '@/store';
 import { GlobalLogo } from '@/layouts/common';
 import { VerticalMenu } from './components';
 
+defineOptions({ name: 'VerticalSider' });
+
 const app = useAppStore();
 const theme = useThemeStore();
 
diff --git a/src/layouts/common/GlobalSider/index.vue b/src/layouts/common/GlobalSider/index.vue
index 1b5229c9..45981960 100644
--- a/src/layouts/common/GlobalSider/index.vue
+++ b/src/layouts/common/GlobalSider/index.vue
@@ -8,6 +8,8 @@ import { computed } from 'vue';
 import { useThemeStore } from '@/store';
 import { VerticalSider, VerticalMixSider } from './components';
 
+defineOptions({ name: 'GlobalSider' });
+
 const theme = useThemeStore();
 
 const isVerticalMix = computed(() => theme.layout.mode === 'vertical-mix');
diff --git a/src/layouts/common/GlobalTab/components/ReloadButton/index.vue b/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
index c901eb05..eb958ba3 100644
--- a/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
+++ b/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
@@ -8,6 +8,8 @@
 import { useAppStore } from '@/store';
 import { useLoading } from '@/hooks';
 
+defineOptions({ name: 'ReloadButton' });
+
 const app = useAppStore();
 const { loading, startLoading, endLoading } = useLoading();
 
diff --git a/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue b/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
index e18651ff..4aead600 100644
--- a/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
+++ b/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
@@ -16,6 +16,8 @@ import type { DropdownOption } from 'naive-ui';
 import { useAppStore, useTabStore } from '@/store';
 import { iconifyRender } from '@/utils';
 
+defineOptions({ name: 'ContextMenu' });
+
 interface Props {
   /** 右键菜单可见性 */
   visible?: boolean;
@@ -27,20 +29,15 @@ interface Props {
   y: number;
 }
 
-interface Emits {
-  (e: 'update:visible', visible: boolean): void;
-}
-
-type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
-type Option = DropdownOption & {
-  key: DropdownKey;
-};
-
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   currentPath: ''
 });
 
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
 const emit = defineEmits<Emits>();
 
 const app = useAppStore();
@@ -59,6 +56,11 @@ function hide() {
   dropdownVisible.value = false;
 }
 
+type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
+type Option = DropdownOption & {
+  key: DropdownKey;
+};
+
 const options = computed<Option[]>(() => [
   {
     label: '重新加载',
diff --git a/src/layouts/common/GlobalTab/components/TabDetail/index.vue b/src/layouts/common/GlobalTab/components/TabDetail/index.vue
index cd92c503..7000898f 100644
--- a/src/layouts/common/GlobalTab/components/TabDetail/index.vue
+++ b/src/layouts/common/GlobalTab/components/TabDetail/index.vue
@@ -32,6 +32,8 @@ import { Icon } from '@iconify/vue';
 import { useThemeStore, useTabStore } from '@/store';
 import { ContextMenu } from './components';
 
+defineOptions({ name: 'TabDetail' });
+
 interface Emits {
   (e: 'scroll', clientX: number): void;
 }
diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue
index 8dbf7449..3d680acd 100644
--- a/src/layouts/common/GlobalTab/index.vue
+++ b/src/layouts/common/GlobalTab/index.vue
@@ -17,6 +17,8 @@ import { useThemeStore, useTabStore } from '@/store';
 import { useDeviceInfo } from '@/composables';
 import { TabDetail, ReloadButton } from './components';
 
+defineOptions({ name: 'GlobalTab' });
+
 const route = useRoute();
 const theme = useThemeStore();
 const tab = useTabStore();
diff --git a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
index b9381eda..6253fd20 100644
--- a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -28,6 +28,8 @@
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 
+defineOptions({ name: 'DarkMode' });
+
 const theme = useThemeStore();
 </script>
 <style scoped>
diff --git a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
index a25c828f..fee21d7c 100644
--- a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
@@ -13,6 +13,8 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store';
 
+defineOptions({ name: 'DrawerButton' });
+
 const app = useAppStore();
 </script>
 
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
index b77eee61..d2bec5c5 100644
--- a/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
@@ -20,6 +20,8 @@ import { computed } from 'vue';
 import type { PopoverPlacement } from 'naive-ui';
 import type { EnumThemeLayoutMode } from '@/enum';
 
+defineOptions({ name: 'LayoutCheckbox' });
+
 interface Props {
   /** 布局模式 */
   mode: EnumType.ThemeLayoutMode;
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
index 6297649a..d9132d91 100644
--- a/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
@@ -16,6 +16,8 @@
 import { useThemeStore } from '@/store';
 import { LayoutCheckbox } from './components';
 
+defineOptions({ name: 'LayoutMode' });
+
 const theme = useThemeStore();
 </script>
 
diff --git a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
index a1c7a83f..e3a32041 100644
--- a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
@@ -68,6 +68,8 @@
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 
+defineOptions({ name: 'PageFunc' });
+
 const theme = useThemeStore();
 </script>
 
diff --git a/src/layouts/common/SettingDrawer/components/PageView/index.vue b/src/layouts/common/SettingDrawer/components/PageView/index.vue
index c70a2fe5..f462c56a 100644
--- a/src/layouts/common/SettingDrawer/components/PageView/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageView/index.vue
@@ -38,6 +38,8 @@
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 
+defineOptions({ name: 'PageView' });
+
 const theme = useThemeStore();
 </script>
 
diff --git a/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue b/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue
index 4bf35dc4..d3d4351f 100644
--- a/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue
+++ b/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue
@@ -6,6 +6,8 @@
 </template>
 
 <script lang="ts" setup>
+defineOptions({ name: 'SettingMenu' });
+
 interface Props {
   /** 文本 */
   label: string;
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
index 48cbd9b4..0c7aa72b 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
@@ -7,6 +7,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
+defineOptions({ name: 'ColorCheckbox' });
+
 interface Props {
   /** 颜色 */
   color: string;
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
index bae3cd77..9f40fb81 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
@@ -27,16 +27,18 @@ import { traditionColors } from '@/settings';
 import { useThemeStore } from '@/store';
 import ColorCheckbox from './ColorCheckbox.vue';
 
+defineOptions({ name: 'ColorModal' });
+
 interface Props {
   visible: boolean;
 }
 
+defineProps<Props>();
+
 interface Emits {
   (e: 'close'): void;
 }
 
-defineProps<Props>();
-
 const emit = defineEmits<Emits>();
 
 const theme = useThemeStore();
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
index db65fb95..04a4e061 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
@@ -19,6 +19,8 @@ import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import { ColorCheckbox, ColorModal } from './components';
 
+defineOptions({ name: 'ThemeColorSelect' });
+
 const theme = useThemeStore();
 
 const { bool: visible, setTrue: openModal, setFalse: closeModal } = useBoolean();
diff --git a/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
index 3cff7efa..a4592eab 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
@@ -14,6 +14,8 @@ import { ref, watch, onMounted, onUnmounted } from 'vue';
 import Clipboard from 'clipboard';
 import { useThemeStore } from '@/store';
 
+defineOptions({ name: 'ThemeConfig' });
+
 const theme = useThemeStore();
 
 const copyRef = ref<HTMLElement>();
diff --git a/src/layouts/common/SettingDrawer/index.vue b/src/layouts/common/SettingDrawer/index.vue
index c073dfd3..e26699ba 100644
--- a/src/layouts/common/SettingDrawer/index.vue
+++ b/src/layouts/common/SettingDrawer/index.vue
@@ -16,6 +16,8 @@
 import { useAppStore } from '@/store';
 import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect, PageFunc, PageView, ThemeConfig } from './components';
 
+defineOptions({ name: 'SettingDrawer' });
+
 const app = useAppStore();
 
 const showButton = import.meta.env.DEV || import.meta.env.VITE_VERCEL === '1';
diff --git a/src/utils/router/component.ts b/src/utils/router/component.ts
index 8c8b37d9..8fb3258a 100644
--- a/src/utils/router/component.ts
+++ b/src/utils/router/component.ts
@@ -1,5 +1,4 @@
 import type { Component } from 'vue';
-import { EnumLayoutComponentName } from '@/enum';
 import { BasicLayout, BlankLayout } from '@/layouts';
 import { views } from '@/views';
 
@@ -14,7 +13,7 @@ export function getLayoutComponent(layoutType: EnumType.LayoutComponentName) {
     basic: BasicLayout,
     blank: BlankLayout
   };
-  return () => setViewComponentName(layoutComponent[layoutType], EnumLayoutComponentName[layoutType]);
+  return layoutComponent[layoutType];
 }
 
 /**
diff --git a/src/views/about/components/DevDependency.vue b/src/views/about/components/DevDependency.vue
index 0ee22111..f61af230 100644
--- a/src/views/about/components/DevDependency.vue
+++ b/src/views/about/components/DevDependency.vue
@@ -11,6 +11,8 @@
 <script setup lang="ts">
 import { pkgJson } from './model';
 
+defineOptions({ name: 'DevDependency' });
+
 const { devDependencies } = pkgJson;
 </script>
 
diff --git a/src/views/about/components/ProDependency.vue b/src/views/about/components/ProDependency.vue
index 2d2bd23e..ea50bbff 100644
--- a/src/views/about/components/ProDependency.vue
+++ b/src/views/about/components/ProDependency.vue
@@ -11,6 +11,8 @@
 <script setup lang="ts">
 import { pkgJson } from './model';
 
+defineOptions({ name: 'ProDependency' });
+
 const { dependencies } = pkgJson;
 </script>
 
diff --git a/src/views/about/components/ProjectInfo.vue b/src/views/about/components/ProjectInfo.vue
index 7b2ce3b6..2d455dbd 100644
--- a/src/views/about/components/ProjectInfo.vue
+++ b/src/views/about/components/ProjectInfo.vue
@@ -20,6 +20,8 @@
 <script setup lang="ts">
 import { pkgJson } from './model';
 
+defineOptions({ name: 'ProjectInfo' });
+
 const { version } = pkgJson;
 const latestBuildTime = PROJECT_BUILD_TIME;
 </script>
diff --git a/src/views/about/components/ProjectIntroduction.vue b/src/views/about/components/ProjectIntroduction.vue
index 236cceb3..f5807535 100644
--- a/src/views/about/components/ProjectIntroduction.vue
+++ b/src/views/about/components/ProjectIntroduction.vue
@@ -7,6 +7,8 @@
   </n-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({ name: 'ProjectIntroduction' });
+</script>
 
 <style scoped></style>
diff --git a/src/views/dashboard/analysis/components/BottomPart/index.vue b/src/views/dashboard/analysis/components/BottomPart/index.vue
index a207883f..8b8ad90c 100644
--- a/src/views/dashboard/analysis/components/BottomPart/index.vue
+++ b/src/views/dashboard/analysis/components/BottomPart/index.vue
@@ -23,6 +23,8 @@
 import { h } from 'vue';
 import { NTag } from 'naive-ui';
 
+defineOptions({ name: 'DashboardAnalysisBottomPart' });
+
 interface TimelineData {
   type: 'default' | 'info' | 'success' | 'warning' | 'error';
   title: string;
diff --git a/src/views/dashboard/analysis/components/DataCard/index.vue b/src/views/dashboard/analysis/components/DataCard/index.vue
index b8db414a..ad2656fa 100644
--- a/src/views/dashboard/analysis/components/DataCard/index.vue
+++ b/src/views/dashboard/analysis/components/DataCard/index.vue
@@ -21,6 +21,8 @@
 import { Icon } from '@iconify/vue';
 import { GradientBg } from './components';
 
+defineOptions({ name: 'DashboardAnalysisDataCard' });
+
 interface CardData {
   id: string;
   title: string;
diff --git a/src/views/dashboard/analysis/components/TopChart/index.vue b/src/views/dashboard/analysis/components/TopChart/index.vue
index efb630f8..9bd613c8 100644
--- a/src/views/dashboard/analysis/components/TopChart/index.vue
+++ b/src/views/dashboard/analysis/components/TopChart/index.vue
@@ -34,6 +34,8 @@
 import { ref } from 'vue';
 import { useEcharts, type ECOption } from '@/composables';
 
+defineOptions({ name: 'DashboardAnalysisTopCard' });
+
 const lineOptions = ref<ECOption>({
   tooltip: {
     trigger: 'axis',
diff --git a/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
index df1382d9..836ce079 100644
--- a/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
@@ -18,14 +18,16 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/store';
 
+defineOptions({ name: 'DashboardWorkbenchHeader' });
+
+const auth = useAuthStore();
+
 interface StatisticData {
   id: number;
   label: string;
   value: string;
 }
 
-const auth = useAuthStore();
-
 const statisticData: StatisticData[] = [
   {
     id: 0,
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue b/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
index 177fffd1..3414ffc9 100644
--- a/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
@@ -10,6 +10,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
 
+defineOptions({ name: 'DashboardWorkbenchMainShortcutsCard' });
+
 interface Props {
   /** 快捷操作名称 */
   label: string;
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue b/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
index 32e2e61f..eba9b2b8 100644
--- a/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
@@ -17,6 +17,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
 
+defineOptions({ name: 'DashboardWorkbenchMainTechnologyCard' });
+
 interface Props {
   /** 技术名称 */
   name: string;
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
index e434a414..b7cff010 100644
--- a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
@@ -47,6 +47,8 @@
 <script setup lang="ts">
 import { TechnologyCard, ShortcutsCard } from './components';
 
+defineOptions({ name: 'DashboardWorkbenchMain' });
+
 interface Technology {
   id: number;
   name: string;
@@ -57,19 +59,6 @@ interface Technology {
   iconColor?: string;
 }
 
-interface Activity {
-  id: number;
-  content: string;
-  time: string;
-}
-
-interface Shortcuts {
-  id: number;
-  label: string;
-  icon: string;
-  iconColor: string;
-}
-
 const technology: Technology[] = [
   {
     id: 0,
@@ -124,6 +113,12 @@ const technology: Technology[] = [
   }
 ];
 
+interface Activity {
+  id: number;
+  content: string;
+  time: string;
+}
+
 const activity: Activity[] = [
   { id: 4, content: 'Soybean 刚才把工作台页面随便写了一些，凑合能看了！', time: '2021-11-07 22:45:32' },
   { id: 3, content: 'Soybean 正在忙于为soybean-admin写项目说明文档！', time: '2021-11-03 20:33:31' },
@@ -132,6 +127,13 @@ const activity: Activity[] = [
   { id: 0, content: 'Soybean 在2021年5月28日创建了开源项目soybean-admin！', time: '2021-05-28 22:22:22' }
 ];
 
+interface Shortcuts {
+  id: number;
+  label: string;
+  icon: string;
+  iconColor: string;
+}
+
 const shortcuts: Shortcuts[] = [
   { id: 0, label: '主控台', icon: 'mdi:desktop-mac-dashboard', iconColor: '#409eff' },
   { id: 1, label: '系统管理', icon: 'ic:outline-settings', iconColor: '#7238d1' },
diff --git a/src/views/plugin/map/components/BaiduMap.vue b/src/views/plugin/map/components/BaiduMap.vue
index 43bca9b3..8ca4bdbe 100644
--- a/src/views/plugin/map/components/BaiduMap.vue
+++ b/src/views/plugin/map/components/BaiduMap.vue
@@ -7,6 +7,8 @@ import { ref, onMounted } from 'vue';
 import { useScriptTag } from '@vueuse/core';
 import { BAIDU_MAP_SDK_URL } from '@/config';
 
+defineOptions({ name: 'BaiduMap' });
+
 const { load } = useScriptTag(BAIDU_MAP_SDK_URL);
 
 const domRef = ref<HTMLDivElement>();
diff --git a/src/views/plugin/map/components/GaodeMap.vue b/src/views/plugin/map/components/GaodeMap.vue
index 690221dd..6a3554d4 100644
--- a/src/views/plugin/map/components/GaodeMap.vue
+++ b/src/views/plugin/map/components/GaodeMap.vue
@@ -7,6 +7,8 @@ import { ref, onMounted } from 'vue';
 import { useScriptTag } from '@vueuse/core';
 import { GAODE_MAP_SDK_URL } from '@/config';
 
+defineOptions({ name: 'GaodeMap' });
+
 const { load } = useScriptTag(GAODE_MAP_SDK_URL);
 
 const domRef = ref<HTMLDivElement>();
diff --git a/src/views/plugin/map/components/TencentMap.vue b/src/views/plugin/map/components/TencentMap.vue
index 9076841d..eca7ccbc 100644
--- a/src/views/plugin/map/components/TencentMap.vue
+++ b/src/views/plugin/map/components/TencentMap.vue
@@ -7,6 +7,8 @@ import { ref, onMounted } from 'vue';
 import { useScriptTag } from '@vueuse/core';
 import { TENCENT_MAP_SDK_URL } from '@/config';
 
+defineOptions({ name: 'TencentMap' });
+
 const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
 
 const domRef = ref<HTMLDivElement | null>(null);
diff --git a/src/views/system-view/login/index.vue b/src/views/system-view/login/index.vue
index 1b08f2df..8ede59e0 100644
--- a/src/views/system-view/login/index.vue
+++ b/src/views/system-view/login/index.vue
@@ -41,17 +41,17 @@ interface Props {
   module: EnumType.LoginModuleKey;
 }
 
+const props = defineProps<Props>();
+
+const theme = useThemeStore();
+const { title } = useAppInfo();
+
 interface LoginModule {
   key: EnumType.LoginModuleKey;
   label: EnumLoginModule;
   component: Component;
 }
 
-const props = defineProps<Props>();
-
-const theme = useThemeStore();
-const { title } = useAppInfo();
-
 const modules: LoginModule[] = [
   { key: 'pwd-login', label: EnumLoginModule['pwd-login'], component: PwdLogin },
   { key: 'code-login', label: EnumLoginModule['code-login'], component: CodeLogin },