From f64bc91ce285c7a9806ed0f6ae970d9b598fd0cb Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Sun, 10 Jul 2022 14:02:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=90=8D=E7=A7=B0=EF=BC=8C=E8=B0=83=E6=95=B4vue?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=87=8C=E9=9D=A2=E7=9A=84=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  4 +--
 .../business/LoadingEmptyWrapper.vue          |  2 ++
 src/components/business/LoginAgreement.vue    | 10 ++++---
 src/components/common/DarkModeContainer.vue   |  3 ++
 src/components/common/DarkModeSwitch.vue      | 10 ++++---
 src/components/common/ExceptionBase.vue       |  2 ++
 src/components/common/HoverContainer.vue      |  3 ++
 src/components/common/NaiveProvider.vue       |  3 ++
 src/components/common/SystemLogo.vue          |  2 ++
 src/components/custom/BetterScroll.vue        |  2 ++
 src/components/custom/CountTo.vue             |  8 ++++--
 src/components/custom/GithubLink.vue          |  2 ++
 src/components/custom/IconSelect.vue          | 10 ++++---
 src/components/custom/ImageVerify.vue         | 10 ++++---
 src/components/custom/SvgIcon.vue             |  2 ++
 src/components/custom/WebSiteLink.vue         |  2 ++
 src/layouts/BasicLayout/index.vue             |  2 ++
 src/layouts/BlankLayout/index.vue             |  2 ++
 src/layouts/common/GlobalBackTop/index.vue    |  2 ++
 src/layouts/common/GlobalContent/index.vue    | 10 ++++---
 src/layouts/common/GlobalFooter/index.vue     |  4 ++-
 .../GlobalHeader/components/FullScreen.vue    |  2 ++
 .../GlobalHeader/components/GithubSite.vue    |  2 ++
 .../components/GlobalBreadcrumb.vue           |  2 ++
 .../GlobalHeader/components/HeaderMenu.vue    |  2 ++
 .../GlobalHeader/components/MenuCollapse.vue  |  2 ++
 .../GlobalHeader/components/MessageList.vue   | 10 ++++---
 .../GlobalHeader/components/SettingButton.vue |  2 ++
 .../GlobalHeader/components/SystemMessage.vue |  4 +++
 .../GlobalHeader/components/ThemeMode.vue     |  2 ++
 .../GlobalHeader/components/UserAvatar.vue    |  7 +++--
 src/layouts/common/GlobalHeader/index.vue     |  2 ++
 src/layouts/common/GlobalLogo/index.vue       |  2 ++
 .../GlobalSearch/components/SearchFooter.vue  |  4 ++-
 .../GlobalSearch/components/SearchModal.vue   |  6 ++--
 .../GlobalSearch/components/SearchResult.vue  |  6 ++--
 src/layouts/common/GlobalSearch/index.vue     |  2 ++
 .../components/MixMenuCollapse.vue            |  2 ++
 .../components/MixMenuDetail.vue              |  2 ++
 .../components/MixMenuDrawer.vue              |  2 ++
 .../components/VerticalMixSider/index.vue     |  2 ++
 .../VerticalSider/components/VerticalMenu.vue |  2 ++
 .../components/VerticalSider/index.vue        |  2 ++
 src/layouts/common/GlobalSider/index.vue      |  2 ++
 .../components/ReloadButton/index.vue         |  2 ++
 .../TabDetail/components/ContextMenu.vue      | 20 +++++++------
 .../GlobalTab/components/TabDetail/index.vue  |  2 ++
 src/layouts/common/GlobalTab/index.vue        |  2 ++
 .../components/DarkMode/index.vue             |  2 ++
 .../components/DrawerButton/index.vue         |  2 ++
 .../LayoutMode/components/LayoutCheckbox.vue  |  2 ++
 .../components/LayoutMode/index.vue           |  2 ++
 .../components/PageFunc/index.vue             |  2 ++
 .../components/PageView/index.vue             |  2 ++
 .../components/SettingMenu/index.vue          |  2 ++
 .../components/ColorCheckbox.vue              |  2 ++
 .../components/ColorModal.vue                 |  6 ++--
 .../components/ThemeColorSelect/index.vue     |  2 ++
 .../components/ThemeConfig/index.vue          |  2 ++
 src/layouts/common/SettingDrawer/index.vue    |  2 ++
 src/utils/router/component.ts                 |  3 +-
 src/views/about/components/DevDependency.vue  |  2 ++
 src/views/about/components/ProDependency.vue  |  2 ++
 src/views/about/components/ProjectInfo.vue    |  2 ++
 .../about/components/ProjectIntroduction.vue  |  4 ++-
 .../analysis/components/BottomPart/index.vue  |  2 ++
 .../analysis/components/DataCard/index.vue    |  2 ++
 .../analysis/components/TopChart/index.vue    |  2 ++
 .../components/WorkbenchHeader/index.vue      |  6 ++--
 .../components/ShortcutsCard.vue              |  2 ++
 .../components/TechnologyCard.vue             |  2 ++
 .../components/WorkbenchMain/index.vue        | 28 ++++++++++---------
 src/views/plugin/map/components/BaiduMap.vue  |  2 ++
 src/views/plugin/map/components/GaodeMap.vue  |  2 ++
 .../plugin/map/components/TencentMap.vue      |  2 ++
 src/views/system-view/login/index.vue         | 10 +++----
 76 files changed, 223 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index 2adfc3b72..ac73b7583 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 7e15b0b4e..b15d332ff 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 e7b51dba3..60408ee51 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 80e8546c7..65995b9a2 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 4ab2b54a9..9fa01fe65 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 33b729616..f7a7e7288 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 9dd3cf550..19348b8b2 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 a9e48a768..56933ad36 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 d25e82a9f..5298518ae 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 518631171..4891f845c 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 ea683415b..5c60c34a8 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 d5c832c7e..d119d5b1a 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 3c9255d31..0326e97b7 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 54c22f6f8..6e2cc134e 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 0546aedc4..490c4be97 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 ae725d085..dd4067410 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 601d51d10..f09a7096f 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 65ff73311..45eece2eb 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 a2373ecc6..84d82d977 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 e7b990161..d2cfba66b 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 71e3f7b8e..c01710fc8 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 451425e75..42b32d499 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 a8ddeb13f..c7c64433f 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 45d71d321..8fd5b251d 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 fe128360c..a336f875a 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 25a2f5651..ba41254b9 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 11a2e31ac..c4ed86471 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 22cf1d04f..09174c52d 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 c304b24e5..307918247 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 3f38ee8f0..53bb32f26 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 86790f7b6..f995c1302 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 a5192b274..6b686be8f 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 aedd5f323..8861fbf7d 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 3f110796a..889c2b799 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 051208b78..95de0a7c6 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 dd2ceac0e..6399e4a92 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 6d1f8f640..ae625a5a6 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 f6683a315..d7698ae2d 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 19b818f8a..80fe671a7 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 53418569c..7e42cc60b 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 bccd9ffff..6bf278e43 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 ad68cc469..19d8aaf01 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 dd9dcc9f3..f3cd224a8 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 1b5229c96..45981960b 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 c901eb05a..eb958ba32 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 e18651ffd..4aead6006 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 cd92c5034..7000898fc 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 8dbf74492..3d680acd9 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 b9381eda8..6253fd20f 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 a25c828f8..fee21d7c3 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 b77eee614..d2bec5c56 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 6297649a4..d9132d917 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 a1c7a83f1..e3a32041f 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 c70a2fe57..f462c56a9 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 4bf35dc46..d3d4351f6 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 48cbd9b4f..0c7aa72b5 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 bae3cd77e..9f40fb81e 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 db65fb955..04a4e0615 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 3cff7efa5..a4592eaba 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 c073dfd3e..e26699ba0 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 8c8b37d9b..8fb3258ae 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 0ee221119..f61af2309 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 2d2bd23e4..ea50bbff6 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 7b2ce3b69..2d455dbd3 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 236cceb39..f58075353 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 a207883fe..8b8ad90cb 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 b8db414a8..ad2656fac 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 efb630f84..9bd613c88 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 df1382d9a..836ce079c 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 177fffd1d..3414ffc93 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 32e2e61ff..eba9b2b81 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 e434a4149..b7cff0101 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 43bca9b3f..8ca4bdbed 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 690221ddd..6a3554d42 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 9076841d4..eca7ccbcf 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 1b08f2df9..8ede59e0a 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 },