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

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