feat(projects): 添加全局组件自动引入注册

build/plugins/auto-import.ts

@@ -0,0 +1,21 @@
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+
+export default (srcPath: string) => {
+  return [
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        custom: FileSystemIconLoader(`${srcPath}/assets/svg`),
+      },
+      scale: 1,
+      defaultClass: 'inline-block',
+    }),
+    Components({
+      dts: true,
+      resolvers: [IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })],
+    }),
+  ];
+};

build/plugins/iconify.ts

@@ -14,7 +14,7 @@ export default (srcPath: string) => {
       defaultClass: 'inline-block',
     }),
     Components({
-      dts: false,
+      dts: true,
       resolvers: [IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })],
     }),
   ];

build/plugins/index.ts

@@ -1,7 +1,7 @@
 import type { ConfigEnv, PluginOption } from 'vite';
 import vue from './vue';
 import html from './html';
-import iconify from './iconify';
+import autoImport from './auto-import';
 import windicss from './windicss';
 import mock from './mock';
 import visualizer from './visualizer';
@@ -17,7 +17,7 @@ export function setupVitePlugins(
   srcPath: string,
   viteEnv: ImportMetaEnv
 ): (PluginOption | PluginOption[])[] {
-  const plugins = [vue, html(configEnv), ...iconify(srcPath), windicss, mock];
+  const plugins = [vue, html(configEnv), ...autoImport(srcPath), windicss, mock];
 
   if (configEnv.command === 'build' && viteEnv.VITE_VISUALIZER === 'true') {
     plugins.push(visualizer);

components.d.ts

@@ -0,0 +1,48 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BetterScroll: typeof import('./src/components/custom/BetterScroll.vue')['default'];
+    CountTo: typeof import('./src/components/custom/CountTo.vue')['default'];
+    DarkModeContainer: typeof import('./src/components/common/DarkModeContainer.vue')['default'];
+    DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default'];
+    GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default'];
+    HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default'];
+    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'];
+    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'];
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'];
+    IconCustomAvatar: typeof import('~icons/custom/avatar')['default'];
+    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default'];
+    IconCustomLogo: typeof import('~icons/custom/logo')['default'];
+    IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'];
+    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default'];
+    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'];
+    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'];
+    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'];
+    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default'];
+    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default'];
+    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default'];
+    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default'];
+    IconMdiClose: typeof import('~icons/mdi/close')['default'];
+    IconMdiGithub: typeof import('~icons/mdi/github')['default'];
+    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default'];
+    IconMdiPin: typeof import('~icons/mdi/pin')['default'];
+    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default'];
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default'];
+    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default'];
+    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default'];
+    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default'];
+    IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default'];
+    IconUilSearch: typeof import('~icons/uil/search')['default'];
+    ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default'];
+    LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default'];
+    LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default'];
+    NaiveProvider: typeof import('./src/components/common/NaiveProvider.vue')['default'];
+    SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default'];
+    WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default'];
+  }
+}
+
+export {};

src/App.vue

@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
 import { zhCN, dateZhCN } from 'naive-ui';
-import { NaiveProvider } from '@/components';
 import { useThemeStore, subscribeStore } from '@/store';
 
 const theme = useThemeStore();

src/layouts/common/GlobalFooter/index.vue

@@ -4,7 +4,5 @@
   </dark-mode-container>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
-import { DarkModeContainer } from '@/components';
-</script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/FullScreen.vue

@@ -7,7 +7,6 @@
 
 <script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core';
-import { HoverContainer } from '@/components';
 
 const { isFullscreen, toggle } = useFullscreen();
 </script>

src/layouts/common/GlobalHeader/components/GithubSite.vue

@@ -6,7 +6,5 @@
   </hover-container>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { HoverContainer } from '@/components';
-</script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/MenuCollapse.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import { HoverContainer } from '@/components';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();

src/layouts/common/GlobalHeader/components/ThemeMode.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import { HoverContainer, DarkModeSwitch } from '@/components';
 import { useThemeStore } from '@/store';
 
 const theme = useThemeStore();

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script lang="ts" setup>
-import { HoverContainer } from '@/components';
 import { useAuthStore } from '@/store';
 import { iconifyRender } from '@/utils';
 

src/layouts/common/GlobalHeader/index.vue

@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import { DarkModeContainer } from '@/components';
 import { useThemeStore } from '@/store';
 import GlobalLogo from '../GlobalLogo/index.vue';
 import GlobalSearch from '../GlobalSearch/index.vue';

src/layouts/common/GlobalLogo/index.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script setup lang="ts">
-import { SystemLogo } from '@/components';
 import { routePath } from '@/router';
 import { useAppInfo } from '@/composables';
 

src/layouts/common/GlobalSearch/index.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script lang="ts" setup>
-import { HoverContainer } from '@/components';
 import { useBoolean } from '@/hooks';
 import { SearchModal } from './components';
 

src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue

@@ -32,7 +32,6 @@
 import { ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
-import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore } from '@/store';
 import { useAppInfo, useRouterPush } from '@/composables';
 import { getActiveKeyPathsOfMenus } from '@/utils';

src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue

@@ -23,7 +23,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { useBoolean } from '@/hooks';

src/layouts/common/GlobalSider/components/VerticalSider/index.vue

@@ -7,7 +7,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore } from '@/store';
 import { GlobalLogo } from '@/layouts/common';
 import { VerticalMenu } from './components';

src/layouts/common/GlobalTab/components/ReloadButton/index.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { HoverContainer } from '@/components';
 import { useAppStore } from '@/store';
 import { useLoading } from '@/hooks';
 

src/layouts/common/GlobalTab/index.vue

@@ -13,7 +13,6 @@
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
-import { DarkModeContainer, BetterScroll } from '@/components';
 import { useThemeStore, useTabStore } from '@/store';
 import { useDeviceInfo } from '@/composables';
 import { TabDetail, ReloadButton } from './components';

src/views/component/table/index.vue

@@ -17,7 +17,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import type { DataTableColumn } from 'naive-ui';
-import { LoadingEmptyWrapper } from '@/components';
 import { useLoadingEmpty } from '@/hooks';
 import { getRandomInterger } from '@/utils';
 

src/views/dashboard/analysis/components/DataCard/index.vue

@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { CountTo } from '@/components';
 import { GradientBg } from './components';
 
 interface CardData {

src/views/dashboard/analysis/components/TopChart/index.vue

@@ -33,7 +33,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { Line, Pie } from '@antv/g2plot';
-import { CountTo } from '@/components';
 import data from './data.json';
 
 const lineRef = ref<HTMLElement>();

src/views/plugin/editor/markdown/index.vue

@@ -13,7 +13,6 @@
 import { ref, watch, onMounted, onUnmounted } from 'vue';
 import Vditor from 'vditor';
 import 'vditor/src/assets/scss/index.scss';
-import { GithubLink } from '@/components';
 import { useThemeStore } from '@/store';
 
 const theme = useThemeStore();

src/views/plugin/editor/quill/index.vue

@@ -12,7 +12,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import WangEditor from 'wangeditor';
-import { GithubLink } from '@/components';
 
 const editor = ref<WangEditor>();
 const domRef = ref<HTMLElement>();

src/views/plugin/icon/index.vue

@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { Icon } from '@iconify/vue';
-import { IconSelect, WebSiteLink } from '@/components';
 import { icons } from './icons';
 
 const selectValue = ref('');

src/views/plugin/print/index.vue

@@ -12,7 +12,6 @@
 
 <script lang="ts" setup>
 import printJS from 'print-js';
-import { GithubLink } from '@/components';
 
 function printTable() {
   printJS({

src/views/plugin/swiper/index.vue

@@ -24,7 +24,6 @@
 import SwiperCore, { Navigation, Pagination } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import type { SwiperOptions } from 'swiper';
-import { WebSiteLink, GithubLink } from '@/components';
 
 type SwiperExampleOptions = Pick<
   SwiperOptions,

src/views/system-view/login/components/CodeLogin/index.vue

@@ -37,7 +37,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInst } from 'naive-ui';
-import { ImageVerify } from '@/components';
 import { useAuthStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { useSmsCode } from '@/hooks';

src/views/system-view/login/components/Register/index.vue

@@ -29,7 +29,6 @@
 <script lang="ts" setup>
 import { reactive, ref, toRefs } from 'vue';
 import type { FormInst, FormRules } from 'naive-ui';
-import { LoginAgreement } from '@/components';
 import { useRouterPush } from '@/composables';
 import { useSmsCode } from '@/hooks';
 import { formRules, getConfirmPwdRule } from '@/utils';

src/views/system-view/login/index.vue

@@ -31,7 +31,6 @@
 import { computed } from 'vue';
 import type { Component } from 'vue';
 import { EnumLoginModule } from '@/enum';
-import { SystemLogo, DarkModeSwitch } from '@/components';
 import { useThemeStore } from '@/store';
 import { useAppInfo } from '@/composables';
 import { getColorPalette, mixColor } from '@/utils';

tsconfig.json

@@ -8,6 +8,7 @@
 		"mock/**/*.ts",
 		"build/**/*.ts",
 		".env-config.ts",
+		"components.d.ts"
 	],
 	"exclude": [
 		"/dist/**",
@@ -19,6 +20,6 @@
 			"@/*": ["./src/*"],
 			"~/*": ["./*"]
 		},
-		"types": ["node","naive-ui/volar"]
+		"types": ["node","unplugin-icons/types/vue","naive-ui/volar"]
 	}
 }

vite.config.ts

@@ -16,7 +16,7 @@ export default defineConfig((configEnv) => {
     resolve: {
       alias: {
         '@': srcPath,
-        '~': rootPath,
+        '~/': rootPath,
       },
     },
     define,