feat(projects): 添加组件名称，调整vue文件里面的类型声明位置

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",

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;

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({

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
 });

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({

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 {

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',

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();
   },

src/components/common/SystemLogo.vue

@@ -4,6 +4,8 @@
 </template>
 
 <script lang="ts" setup>
+defineOptions({ name: 'SystemLogo' });
+
 interface Props {
   /** logo是否填充 */
   fill?: boolean;

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;

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);

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;

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();

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();

src/components/custom/SvgIcon.vue

@@ -7,6 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+defineOptions({ name: 'SvgIcon' });
+
 interface Props {
   /** 前缀 */
   prefix?: string;

src/components/custom/WebSiteLink.vue

@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({ name: 'WebSiteLink' });
+
 interface Props {
   /** 网址名称 */
   label: string;

src/layouts/BasicLayout/index.vue

@@ -46,6 +46,8 @@ import {
   GlobalBackTop
 } from '../common';
 
+defineOptions({ name: 'BasicLayout' });
+
 const app = useAppStore();
 const theme = useThemeStore();
 

src/layouts/BlankLayout/index.vue

@@ -4,6 +4,8 @@
 
 <script setup lang="ts">
 import { GlobalContent } from '../common';
+
+defineOptions({ name: 'BlankLayout' });
 </script>
 
 <style scoped></style>

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);

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();

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>

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>

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');

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();

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();

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>

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) {

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>

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,

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>
 

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') {

src/layouts/common/GlobalHeader/index.vue

@@ -34,6 +34,8 @@ import {
   SettingButton
 } from './components';
 
+defineOptions({ name: 'GlobalHeader' });
+
 interface Props {
   /** 显示logo */
   showLogo: GlobalHeaderProps['showLogo'];

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;

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 {

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();

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();

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();
 

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>
 

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;

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;

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();

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();

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();
 

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');

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();
 

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: '重新加载',

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;
 }

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();

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>

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>
 

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;

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>
 

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>
 

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>
 

src/layouts/common/SettingDrawer/components/SettingMenu/index.vue

@@ -6,6 +6,8 @@
 </template>
 
 <script lang="ts" setup>
+defineOptions({ name: 'SettingMenu' });
+
 interface Props {
   /** 文本 */
   label: string;

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;

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();

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();

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>();

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';

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];
 }
 
 /**

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>
 

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>
 

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>

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>

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;

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;

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',

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,

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;

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;

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' },

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>();

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>();

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);

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 },