diff --git a/build/vite/plugin/index.js b/build/vite/plugin/index.js
index 8b75821..3116a12 100644
--- a/build/vite/plugin/index.js
+++ b/build/vite/plugin/index.js
@@ -1,11 +1,24 @@
 import vue from '@vitejs/plugin-vue'
+
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+
 import { unocss } from './unocss'
 import { configHtmlPlugin } from './html'
 import { configMockPlugin } from './mock'
 
 export function createVitePlugins(viteEnv, isBuild) {
-  const plugins = [vue(), VueSetupExtend(), unocss(), configHtmlPlugin(viteEnv, isBuild)]
+  const plugins = [
+    vue(),
+    Components({
+      resolvers: [NaiveUiResolver()],
+    }),
+    VueSetupExtend(),
+    unocss(),
+    configHtmlPlugin(viteEnv, isBuild),
+  ]
 
   viteEnv?.VITE_APP_USE_MOCK && plugins.push(configMockPlugin(isBuild))
 
diff --git a/package.json b/package.json
index ce173fa..fc334b7 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "prettier": "^2.5.1",
     "sass": "^1.38.1",
     "unocss": "^0.16.3",
+    "unplugin-vue-components": "^0.17.18",
     "vite": "^2.7.6",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-mock": "^2.9.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58a9365..b2a445d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,7 @@ specifiers:
   prettier: ^2.5.1
   sass: ^1.38.1
   unocss: ^0.16.3
+  unplugin-vue-components: ^0.17.18
   vite: ^2.7.6
   vite-plugin-html: ^2.1.1
   vite-plugin-mock: ^2.9.6
@@ -61,6 +62,7 @@ devDependencies:
   prettier: 2.5.1
   sass: 1.49.7
   unocss: 0.16.4
+  unplugin-vue-components: 0.17.18_vite@2.8.0+vue@3.2.30
   vite: 2.8.0_sass@1.49.7
   vite-plugin-html: 2.1.2_vite@2.8.0
   vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.8.0
@@ -81,6 +83,12 @@ packages:
       '@types/throttle-debounce': 2.1.0
     dev: true
 
+  /@antfu/utils/0.4.0:
+    resolution: {integrity: sha512-gqkpvjkgFUu+s3kP+Ly33OKpo5zvVY3FDFhv5BIb98SncS3KD6DNxPfNDjwHIoyXbz1leWo1j8DtRLZ1D2Jv+Q==}
+    dependencies:
+      '@types/throttle-debounce': 2.1.0
+    dev: true
+
   /@babel/parser/7.17.0:
     resolution: {integrity: sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==}
     engines: {node: '>=6.0.0'}
@@ -2159,6 +2167,59 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /unplugin-vue-components/0.17.18_vite@2.8.0+vue@3.2.30:
+    resolution: {integrity: sha512-4wvJnSShTXCnZpO1G6h0DlHjBXap0JqzFyU84guMT6EH0shUZZ3TAta4pDa8nNeWAtcJVTF9uQswePq1elhpKQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@babel/traverse': ^7.15.4
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@babel/traverse':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.4.0
+      '@rollup/pluginutils': 4.1.2
+      chokidar: 3.5.3
+      debug: 4.3.3
+      fast-glob: 3.2.11
+      local-pkg: 0.4.1
+      magic-string: 0.25.7
+      minimatch: 3.0.5
+      resolve: 1.22.0
+      unplugin: 0.3.2_vite@2.8.0
+      vue: 3.2.30
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
+  /unplugin/0.3.2_vite@2.8.0:
+    resolution: {integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      vite: 2.8.0_sass@1.49.7
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -2337,6 +2398,10 @@ packages:
       vue: 3.2.30
     dev: true
 
+  /webpack-virtual-modules/0.4.3:
+    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
+    dev: true
+
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
diff --git a/src/components/AppProvider/index.vue b/src/components/AppProvider/index.vue
index 6c73613..1d0069d 100644
--- a/src/components/AppProvider/index.vue
+++ b/src/components/AppProvider/index.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { NConfigProvider, NGlobalStyle, NLoadingBarProvider, NMessageProvider, NDialogProvider } from 'naive-ui'
-
 import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
 import LoadingBar from './LoadingBar.vue'
diff --git a/src/layout/components/header/BreadCrumb.vue b/src/layout/components/header/BreadCrumb.vue
index 6e93806..7ec9e7b 100644
--- a/src/layout/components/header/BreadCrumb.vue
+++ b/src/layout/components/header/BreadCrumb.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const { currentRoute } = router
diff --git a/src/layout/components/header/HeaderAction.vue b/src/layout/components/header/HeaderAction.vue
index bd69b85..7e8d128 100644
--- a/src/layout/components/header/HeaderAction.vue
+++ b/src/layout/components/header/HeaderAction.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useUserStore } from '@/store/modules/user'
 import { useRouter } from 'vue-router'
-import { NDropdown } from 'naive-ui'
 import { resetRouter } from '@/router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { NOT_FOUND_ROUTE } from '@/router/routes'
diff --git a/src/layout/components/sidebar/SideLogo.vue b/src/layout/components/sidebar/SideLogo.vue
index 41f944d..75ec684 100644
--- a/src/layout/components/sidebar/SideLogo.vue
+++ b/src/layout/components/sidebar/SideLogo.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { NGradientText, NIcon } from 'naive-ui'
 import { LastfmSquare } from '@vicons/fa'
 const title = import.meta.env.VITE_APP_TITLE
 </script>
diff --git a/src/layout/components/sidebar/SideMenu.vue b/src/layout/components/sidebar/SideMenu.vue
index 1115f12..2413e48 100644
--- a/src/layout/components/sidebar/SideMenu.vue
+++ b/src/layout/components/sidebar/SideMenu.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { NMenu } from 'naive-ui'
 import { useRouter } from 'vue-router'
-import { computed, toRef } from 'vue'
+import { computed } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
 import { isExternal } from '@/utils/is'
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f080929..7ddcf03 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { NLayout, NLayoutHeader, NLayoutSider } from 'naive-ui'
-
 import AppHeader from './components/header/index.vue'
 import SideMenu from './components/sidebar/index.vue'
 import AppMain from './components/AppMain.vue'
diff --git a/src/views/test-page/TestDialog.vue b/src/views/test-page/TestDialog.vue
index 938d6d6..9888056 100644
--- a/src/views/test-page/TestDialog.vue
+++ b/src/views/test-page/TestDialog.vue
@@ -1,5 +1,4 @@
 <script setup name="TestDialog">
-import { NButton } from 'naive-ui'
 const handleDelete = function () {
   $dialog.confirm({
     content: '确认删除？',
diff --git a/src/views/test-page/TestMessage.vue b/src/views/test-page/TestMessage.vue
index 1ea9cdc..95fdc9a 100644
--- a/src/views/test-page/TestMessage.vue
+++ b/src/views/test-page/TestMessage.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { NButton } from 'naive-ui'
-
 function handleLogin() {
   $message.loading('登陆中...')
   setTimeout(() => {