diff --git a/build/plugins/auto-import.ts b/build/plugins/auto-import.ts
new file mode 100644
index 000000000..29fb19830
--- /dev/null
+++ b/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' })],
+    }),
+  ];
+};
diff --git a/build/plugins/iconify.ts b/build/plugins/iconify.ts
index 848760b2a..f7b73745a 100644
--- a/build/plugins/iconify.ts
+++ b/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' })],
     }),
   ];
diff --git a/build/plugins/index.ts b/build/plugins/index.ts
index b4e6799dc..41de2b833 100644
--- a/build/plugins/index.ts
+++ b/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);
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 000000000..21d647162
--- /dev/null
+++ b/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 {};
diff --git a/src/App.vue b/src/App.vue
index 49c5e0449..b4f319da2 100644
--- a/src/App.vue
+++ b/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();
diff --git a/src/layouts/common/GlobalFooter/index.vue b/src/layouts/common/GlobalFooter/index.vue
index 2149052e0..6685c3c57 100644
--- a/src/layouts/common/GlobalFooter/index.vue
+++ b/src/layouts/common/GlobalFooter/index.vue
@@ -4,7 +4,5 @@
   </dark-mode-container>
 </template>
 
-<script setup lang="ts">
-import { DarkModeContainer } from '@/components';
-</script>
+<script setup lang="ts"></script>
 <style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/FullScreen.vue b/src/layouts/common/GlobalHeader/components/FullScreen.vue
index 2618412cd..b72248f23 100644
--- a/src/layouts/common/GlobalHeader/components/FullScreen.vue
+++ b/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>
diff --git a/src/layouts/common/GlobalHeader/components/GithubSite.vue b/src/layouts/common/GlobalHeader/components/GithubSite.vue
index e0992af91..0d567e80f 100644
--- a/src/layouts/common/GlobalHeader/components/GithubSite.vue
+++ b/src/layouts/common/GlobalHeader/components/GithubSite.vue
@@ -6,7 +6,5 @@
   </hover-container>
 </template>
 
-<script lang="ts" setup>
-import { HoverContainer } from '@/components';
-</script>
+<script lang="ts" setup></script>
 <style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue b/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
index 899993795..0e6758118 100644
--- a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
+++ b/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();
diff --git a/src/layouts/common/GlobalHeader/components/ThemeMode.vue b/src/layouts/common/GlobalHeader/components/ThemeMode.vue
index 04429940c..23838a9de 100644
--- a/src/layouts/common/GlobalHeader/components/ThemeMode.vue
+++ b/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();
diff --git a/src/layouts/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
index d293f629e..f49314174 100644
--- a/src/layouts/common/GlobalHeader/components/UserAvatar.vue
+++ b/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';
 
diff --git a/src/layouts/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue
index d5ff40a8c..26326cb44 100644
--- a/src/layouts/common/GlobalHeader/index.vue
+++ b/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';
diff --git a/src/layouts/common/GlobalLogo/index.vue b/src/layouts/common/GlobalLogo/index.vue
index cb3e0a055..bcf980a64 100644
--- a/src/layouts/common/GlobalLogo/index.vue
+++ b/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';
 
diff --git a/src/layouts/common/GlobalSearch/index.vue b/src/layouts/common/GlobalSearch/index.vue
index 4bd16a558..285196737 100644
--- a/src/layouts/common/GlobalSearch/index.vue
+++ b/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';
 
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
index 335f17bba..7189fba7b 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
+++ b/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';
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
index dacb6dd4f..cafcffa6d 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
+++ b/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';
diff --git a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
index 72701a7a4..0adeb1a78 100644
--- a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
+++ b/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';
diff --git a/src/layouts/common/GlobalTab/components/ReloadButton/index.vue b/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
index 545f6366f..1bb10f4fd 100644
--- a/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
+++ b/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';
 
diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue
index f5afc5840..63830a222 100644
--- a/src/layouts/common/GlobalTab/index.vue
+++ b/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';
diff --git a/src/views/component/table/index.vue b/src/views/component/table/index.vue
index c266e7506..81264f0dd 100644
--- a/src/views/component/table/index.vue
+++ b/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';
 
diff --git a/src/views/dashboard/analysis/components/DataCard/index.vue b/src/views/dashboard/analysis/components/DataCard/index.vue
index f8c7e553c..1ae0a28b1 100644
--- a/src/views/dashboard/analysis/components/DataCard/index.vue
+++ b/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 {
diff --git a/src/views/dashboard/analysis/components/TopChart/index.vue b/src/views/dashboard/analysis/components/TopChart/index.vue
index 082c9372c..d23434ed9 100644
--- a/src/views/dashboard/analysis/components/TopChart/index.vue
+++ b/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>();
diff --git a/src/views/plugin/editor/markdown/index.vue b/src/views/plugin/editor/markdown/index.vue
index c863c7f5d..bb402ebd2 100644
--- a/src/views/plugin/editor/markdown/index.vue
+++ b/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();
diff --git a/src/views/plugin/editor/quill/index.vue b/src/views/plugin/editor/quill/index.vue
index da03b8e0b..eea03d474 100644
--- a/src/views/plugin/editor/quill/index.vue
+++ b/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>();
diff --git a/src/views/plugin/icon/index.vue b/src/views/plugin/icon/index.vue
index bdd52df5b..a7f71bad6 100644
--- a/src/views/plugin/icon/index.vue
+++ b/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('');
diff --git a/src/views/plugin/print/index.vue b/src/views/plugin/print/index.vue
index 509bcf378..0d2797ad9 100644
--- a/src/views/plugin/print/index.vue
+++ b/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({
diff --git a/src/views/plugin/swiper/index.vue b/src/views/plugin/swiper/index.vue
index 28a251341..64acb415f 100644
--- a/src/views/plugin/swiper/index.vue
+++ b/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,
diff --git a/src/views/system-view/login/components/CodeLogin/index.vue b/src/views/system-view/login/components/CodeLogin/index.vue
index 3b485028a..ac4b1cc83 100644
--- a/src/views/system-view/login/components/CodeLogin/index.vue
+++ b/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';
diff --git a/src/views/system-view/login/components/Register/index.vue b/src/views/system-view/login/components/Register/index.vue
index d9c406c14..850dd6b07 100644
--- a/src/views/system-view/login/components/Register/index.vue
+++ b/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';
diff --git a/src/views/system-view/login/index.vue b/src/views/system-view/login/index.vue
index 51ee4694b..c18b58905 100644
--- a/src/views/system-view/login/index.vue
+++ b/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';
diff --git a/tsconfig.json b/tsconfig.json
index 2f6a47c80..d637c2c12 100644
--- a/tsconfig.json
+++ b/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"]
 	}
 }
diff --git a/vite.config.ts b/vite.config.ts
index 4e547df4d..0079d0488 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,7 +16,7 @@ export default defineConfig((configEnv) => {
     resolve: {
       alias: {
         '@': srcPath,
-        '~': rootPath,
+        '~/': rootPath,
       },
     },
     define,