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>