diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index f6c41bf5..f00f1358 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -24,6 +24,7 @@
 		"yzhang.markdown-all-in-one",
 		"pkief.material-icon-theme",
 		"zhuangtongfa.material-theme",
+		"jimdong.naive-ui-snippets",
 		"christian-kohler.path-intellisense",
 		"esbenp.prettier-vscode",
 		"johnsoncodehk.volar",
diff --git a/build/plugins/html.ts b/build/plugins/html.ts
index ca164500..50074398 100644
--- a/build/plugins/html.ts
+++ b/build/plugins/html.ts
@@ -1,17 +1,17 @@
 import { loadEnv } from 'vite';
 import type { ConfigEnv, PluginOption } from 'vite';
-import { minifyHtml, injectHtml } from 'vite-plugin-html'; // html插件(使用变量、压缩)
+import { createHtmlPlugin } from 'vite-plugin-html'; // html插件(使用变量、压缩)
 
 export default (config: ConfigEnv): PluginOption[] => {
   const viteEnv = loadEnv(config.mode, `.env.${config.mode}`);
 
-  return [
-    minifyHtml(),
-    injectHtml({
-      injectData: {
+  return createHtmlPlugin({
+    minify: true,
+    inject: {
+      data: {
         appName: viteEnv.VITE_APP_NAME,
         appTitle: viteEnv.VITE_APP_TITLE
       }
-    })
-  ];
+    }
+  });
 };
diff --git a/build/plugins/index.ts b/build/plugins/index.ts
index 9a44e4c8..88a72f08 100644
--- a/build/plugins/index.ts
+++ b/build/plugins/index.ts
@@ -7,7 +7,7 @@ import mock from './mock';
 import visualizer from './visualizer';
 
 export function setupVitePlugins(configEnv: ConfigEnv): (PluginOption | PluginOption[])[] {
-  const plugins = [vue, ...html(configEnv), ...iconify, windicss, mock];
+  const plugins = [vue, html(configEnv), ...iconify, windicss, mock];
 
   if (configEnv.command === 'build') {
     plugins.push(visualizer);
diff --git a/package.json b/package.json
index 740d206f..08dbb778 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@amap/amap-jsapi-types": "^0.0.8",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.1",
+    "@iconify/json": "^2.1.2",
     "@iconify/vue": "^3.1.3",
     "@types/bmapgl": "^0.0.5",
     "@types/crypto-js": "^4.1.1",
@@ -84,7 +84,7 @@
     "unplugin-icons": "^0.13.1",
     "unplugin-vue-components": "^0.17.18",
     "vite": "2.8.3",
-    "vite-plugin-html": "^2.1.2",
+    "vite-plugin-html": "^3.0.6",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-windicss": "^1.7.0",
     "vue-tsc": "^0.31.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 943c610c..c44dd261 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,7 @@ specifiers:
   '@better-scroll/core': ^2.4.2
   '@commitlint/cli': ^16.2.1
   '@commitlint/config-conventional': ^16.2.1
-  '@iconify/json': ^2.1.1
+  '@iconify/json': ^2.1.2
   '@iconify/vue': ^3.1.3
   '@types/bmapgl': ^0.0.5
   '@types/crypto-js': ^4.1.1
@@ -55,7 +55,7 @@ specifiers:
   unplugin-vue-components: ^0.17.18
   vditor: ^3.8.11
   vite: 2.8.3
-  vite-plugin-html: ^2.1.2
+  vite-plugin-html: ^3.0.6
   vite-plugin-mock: ^2.9.6
   vite-plugin-windicss: ^1.7.0
   vue: ^3.2.31
@@ -93,7 +93,7 @@ devDependencies:
   '@amap/amap-jsapi-types': registry.npmmirror.com/@amap/amap-jsapi-types/0.0.8
   '@commitlint/cli': registry.npmmirror.com/@commitlint/cli/16.2.1
   '@commitlint/config-conventional': registry.npmmirror.com/@commitlint/config-conventional/16.2.1
-  '@iconify/json': registry.npmmirror.com/@iconify/json/2.1.1
+  '@iconify/json': registry.npmmirror.com/@iconify/json/2.1.2
   '@iconify/vue': registry.npmmirror.com/@iconify/vue/3.1.3_vue@3.2.31
   '@types/bmapgl': registry.npmmirror.com/@types/bmapgl/0.0.5
   '@types/crypto-js': registry.npmmirror.com/@types/crypto-js/4.1.1
@@ -127,7 +127,7 @@ devDependencies:
   unplugin-icons: registry.npmmirror.com/unplugin-icons/0.13.1_vite@2.8.3
   unplugin-vue-components: registry.npmmirror.com/unplugin-vue-components/0.17.18_vite@2.8.3+vue@3.2.31
   vite: registry.npmmirror.com/vite/2.8.3_sass@1.49.7
-  vite-plugin-html: registry.npmmirror.com/vite-plugin-html/2.1.2_vite@2.8.3
+  vite-plugin-html: registry.npmmirror.com/vite-plugin-html/3.0.6_vite@2.8.3
   vite-plugin-mock: registry.npmmirror.com/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.8.3
   vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.7.0_vite@2.8.3
   vue-tsc: registry.npmmirror.com/vue-tsc/0.31.4_typescript@4.5.5
@@ -151,7 +151,7 @@ packages:
     dev: false
 
   registry.nlark.com/@nodelib/fs.scandir/2.1.5:
-    resolution: {integrity: sha1-dhnC6yGyVIP20WdUi0z9WnSIw9U=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz}
+    resolution: {integrity: sha1-dhnC6yGyVIP20WdUi0z9WnSIw9U=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz}
     name: '@nodelib/fs.scandir'
     version: 2.1.5
     engines: {node: '>= 8'}
@@ -1838,10 +1838,10 @@ packages:
     version: 1.2.1
     dev: true
 
-  registry.npmmirror.com/@iconify/json/2.1.1:
-    resolution: {integrity: sha512-uHmQzctXK9OBE5FAT/Hay+VF9qXz2BGko7i9LvDt9hJh0bfOWNGAer2n3LYb/G3UDJxMRjiEC/qV5OUd3MiAKA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@iconify/json/-/json-2.1.1.tgz}
+  registry.npmmirror.com/@iconify/json/2.1.2:
+    resolution: {integrity: sha512-I4JHbMZBAd5ENGyYECUMpTcJMibTKd1ioVCLHDv+TsdSN01OMT4Uq2JLV1tVkolc7QiiomRsSuBBuDinGSgCVg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@iconify/json/-/json-2.1.2.tgz}
     name: '@iconify/json'
-    version: 2.1.1
+    version: 2.1.2
     dependencies:
       '@iconify/types': registry.npmmirror.com/@iconify/types/1.0.12
       pathe: registry.npmmirror.com/pathe/0.0.2
@@ -1895,14 +1895,14 @@ packages:
       chalk: registry.npmmirror.com/chalk/4.1.2
 
   registry.npmmirror.com/@nodelib/fs.stat/2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz}
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz}
     name: '@nodelib/fs.stat'
     version: 2.0.5
     engines: {node: '>= 8'}
     dev: true
 
   registry.npmmirror.com/@nodelib/fs.walk/1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz}
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz}
     name: '@nodelib/fs.walk'
     version: 1.2.8
     engines: {node: '>= 8'}
@@ -2863,6 +2863,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  registry.npmmirror.com/boolbase/1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz}
+    name: boolbase
+    version: 1.0.0
+    dev: true
+
   registry.npmmirror.com/brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz}
     name: brace-expansion
@@ -3188,6 +3194,19 @@ packages:
     version: 1.0.11
     dev: true
 
+  registry.npmmirror.com/connect-history-api-fallback/1.6.0:
+    resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz}
+    name: connect-history-api-fallback
+    version: 1.6.0
+    engines: {node: '>=0.8'}
+    dev: true
+
+  registry.npmmirror.com/consola/2.15.3:
+    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/consola/-/consola-2.15.3.tgz}
+    name: consola
+    version: 2.15.3
+    dev: true
+
   registry.npmmirror.com/constantinople/4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/constantinople/-/constantinople-4.0.1.tgz}
     name: constantinople
@@ -3320,6 +3339,25 @@ packages:
       '@types/node': registry.npmmirror.com/@types/node/14.14.45
       csstype: registry.npmmirror.com/csstype/3.0.10
 
+  registry.npmmirror.com/css-select/4.2.1:
+    resolution: {integrity: sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/css-select/-/css-select-4.2.1.tgz}
+    name: css-select
+    version: 4.2.1
+    dependencies:
+      boolbase: registry.npmmirror.com/boolbase/1.0.0
+      css-what: registry.npmmirror.com/css-what/5.1.0
+      domhandler: registry.npmmirror.com/domhandler/4.3.0
+      domutils: registry.npmmirror.com/domutils/2.8.0
+      nth-check: registry.npmmirror.com/nth-check/2.0.1
+    dev: true
+
+  registry.npmmirror.com/css-what/5.1.0:
+    resolution: {integrity: sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/css-what/-/css-what-5.1.0.tgz}
+    name: css-what
+    version: 5.1.0
+    engines: {node: '>= 6'}
+    dev: true
+
   registry.npmmirror.com/csstype/2.6.19:
     resolution: {integrity: sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csstype/-/csstype-2.6.19.tgz}
     name: csstype
@@ -3644,17 +3682,18 @@ packages:
       is-obj: registry.npmmirror.com/is-obj/2.0.0
     dev: true
 
-  registry.npmmirror.com/dotenv-expand/5.1.0:
-    resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz}
+  registry.npmmirror.com/dotenv-expand/8.0.1:
+    resolution: {integrity: sha512-j/Ih7bIERDR5PzI89Zu8ayd3tXZ6E3dbY0ljQ9Db0K87qBO8zdLsi2dIvDHMWtjC3Yxb8XixOTHAtia0fDHRpg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-8.0.1.tgz}
     name: dotenv-expand
-    version: 5.1.0
+    version: 8.0.1
+    engines: {node: '>=12'}
     dev: true
 
-  registry.npmmirror.com/dotenv/10.0.0:
-    resolution: {integrity: sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dotenv/-/dotenv-10.0.0.tgz}
+  registry.npmmirror.com/dotenv/16.0.0:
+    resolution: {integrity: sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dotenv/-/dotenv-16.0.0.tgz}
     name: dotenv
-    version: 10.0.0
-    engines: {node: '>=10'}
+    version: 16.0.0
+    engines: {node: '>=12'}
     dev: true
 
   registry.npmmirror.com/dotignore/0.1.2:
@@ -4355,7 +4394,7 @@ packages:
     dev: true
 
   registry.npmmirror.com/fastq/1.13.0:
-    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fastq/-/fastq-1.13.0.tgz}
+    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fastq/-/fastq-1.13.0.tgz}
     name: fastq
     version: 1.13.0
     dependencies:
@@ -4579,7 +4618,7 @@ packages:
     dev: false
 
   registry.npmmirror.com/glob-parent/5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz}
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz}
     name: glob-parent
     version: 5.1.2
     engines: {node: '>= 6'}
@@ -5621,6 +5660,15 @@ packages:
       whatwg-url: registry.npmmirror.com/whatwg-url/5.0.0
     dev: true
 
+  registry.npmmirror.com/node-html-parser/5.2.0:
+    resolution: {integrity: sha512-fmiwLfQu+J2A0zjwSEkztSHexAf5qq/WoiL/Hgo1K7JpfEP+OGWY5maG0kGaM+IFVdixF/1QbyXaQ3h4cGfeLw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/node-html-parser/-/node-html-parser-5.2.0.tgz}
+    name: node-html-parser
+    version: 5.2.0
+    dependencies:
+      css-select: registry.npmmirror.com/css-select/4.2.1
+      he: registry.npmmirror.com/he/1.2.0
+    dev: true
+
   registry.npmmirror.com/normalize-package-data/2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz}
     name: normalize-package-data
@@ -5660,6 +5708,14 @@ packages:
       path-key: registry.npmmirror.com/path-key/3.1.1
     dev: true
 
+  registry.npmmirror.com/nth-check/2.0.1:
+    resolution: {integrity: sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/nth-check/-/nth-check-2.0.1.tgz}
+    name: nth-check
+    version: 2.0.1
+    dependencies:
+      boolbase: registry.npmmirror.com/boolbase/1.0.0
+    dev: true
+
   registry.npmmirror.com/object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz}
     name: object-assign
@@ -5945,6 +6001,12 @@ packages:
     version: 0.0.2
     dev: true
 
+  registry.npmmirror.com/pathe/0.2.0:
+    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pathe/-/pathe-0.2.0.tgz}
+    name: pathe
+    version: 0.2.0
+    dev: true
+
   registry.npmmirror.com/pdfast/0.2.0:
     resolution: {integrity: sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pdfast/-/pdfast-0.2.0.tgz}
     name: pdfast
@@ -6180,7 +6242,7 @@ packages:
     dev: false
 
   registry.npmmirror.com/queue-microtask/1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz}
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz}
     name: queue-microtask
     version: 1.2.3
     dev: true
@@ -6381,7 +6443,7 @@ packages:
     dev: false
 
   registry.npmmirror.com/reusify/1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz}
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz}
     name: reusify
     version: 1.0.4
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -6466,7 +6528,7 @@ packages:
     dev: true
 
   registry.npmmirror.com/run-parallel/1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz}
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz}
     name: run-parallel
     version: 1.2.0
     dependencies:
@@ -7394,20 +7456,26 @@ packages:
     version: 0.0.3
     dev: false
 
-  registry.npmmirror.com/vite-plugin-html/2.1.2_vite@2.8.3:
-    resolution: {integrity: sha512-7HXkL6n7M2qDEaUV4Vnz8yM2glW4gV36d5HSBIM5gOoAG1PkuQb4Vv9FTPgPiQxq4sPRf/6IgABX0MeLVW+CyQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-2.1.2.tgz}
-    id: registry.npmmirror.com/vite-plugin-html/2.1.2
+  registry.npmmirror.com/vite-plugin-html/3.0.6_vite@2.8.3:
+    resolution: {integrity: sha512-B6ZAufvqUqdfPhcV+El8NNI3qV0d3ZntIur2UnP4tcHBV/O2d+6wHF79bJWuqR4WsvmsV7dejCNS3rAYFCisWw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-3.0.6.tgz}
+    id: registry.npmmirror.com/vite-plugin-html/3.0.6
     name: vite-plugin-html
-    version: 2.1.2
+    version: 3.0.6
     peerDependencies:
       vite: '>=2.0.0'
     dependencies:
       '@rollup/pluginutils': registry.npmmirror.com/@rollup/pluginutils/4.1.2
-      dotenv: registry.npmmirror.com/dotenv/10.0.0
-      dotenv-expand: registry.npmmirror.com/dotenv-expand/5.1.0
+      colorette: registry.npmmirror.com/colorette/2.0.16
+      connect-history-api-fallback: registry.npmmirror.com/connect-history-api-fallback/1.6.0
+      consola: registry.npmmirror.com/consola/2.15.3
+      dotenv: registry.npmmirror.com/dotenv/16.0.0
+      dotenv-expand: registry.npmmirror.com/dotenv-expand/8.0.1
       ejs: registry.npmmirror.com/ejs/3.1.6
+      fast-glob: registry.npmmirror.com/fast-glob/3.2.11
       fs-extra: registry.npmmirror.com/fs-extra/10.0.0
       html-minifier-terser: registry.npmmirror.com/html-minifier-terser/6.1.0
+      node-html-parser: registry.npmmirror.com/node-html-parser/5.2.0
+      pathe: registry.npmmirror.com/pathe/0.2.0
       vite: registry.npmmirror.com/vite/2.8.3_sass@1.49.7
     transitivePeerDependencies:
       - acorn
diff --git a/src/App.vue b/src/App.vue
index 609060c3..49c5e044 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
+import { zhCN, dateZhCN } from 'naive-ui';
 import { NaiveProvider } from '@/components';
 import { useThemeStore, subscribeStore } from '@/store';
 
diff --git a/src/components/business/LoadingEmptyWrapper/index.vue b/src/components/business/LoadingEmptyWrapper/index.vue
index f66ae903..edeec7a7 100644
--- a/src/components/business/LoadingEmptyWrapper/index.vue
+++ b/src/components/business/LoadingEmptyWrapper/index.vue
@@ -27,7 +27,6 @@
 
 <script setup lang="ts">
 import { computed, watch, nextTick, onUnmounted } from 'vue';
-import { NSpin } from 'naive-ui';
 import { NETWORK_ERROR_MSG } from '@/config';
 import { SvgEmptyData, SvgNetworkError } from '@/components';
 import { useBoolean } from '@/hooks';
diff --git a/src/components/business/LoginAgreement/index.vue b/src/components/business/LoginAgreement/index.vue
index 35c08601..3fc03403 100644
--- a/src/components/business/LoginAgreement/index.vue
+++ b/src/components/business/LoginAgreement/index.vue
@@ -8,7 +8,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NCheckbox, NButton } from 'naive-ui';
 
 interface Props {
   /** 是否勾选 */
diff --git a/src/components/common/HoverContainer/index.vue b/src/components/common/HoverContainer/index.vue
index d4c44664..031987c9 100644
--- a/src/components/common/HoverContainer/index.vue
+++ b/src/components/common/HoverContainer/index.vue
@@ -16,7 +16,6 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NTooltip } from 'naive-ui';
 import type { FollowerPlacement } from 'vueuc';
 
 interface Props {
diff --git a/src/components/common/NaiveProvider/index.vue b/src/components/common/NaiveProvider/index.vue
index ab32c03b..d9417d34 100644
--- a/src/components/common/NaiveProvider/index.vue
+++ b/src/components/common/NaiveProvider/index.vue
@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { NLoadingBarProvider, NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui';
 import { NaiveProviderContent } from './components';
 </script>
 <style scoped></style>
diff --git a/src/components/custom/ChromeTab/index.vue b/src/components/custom/ChromeTab/index.vue
index 6529eba1..9ee5367c 100644
--- a/src/components/custom/ChromeTab/index.vue
+++ b/src/components/custom/ChromeTab/index.vue
@@ -25,7 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import { NDivider } from 'naive-ui';
 import { useBoolean } from '@/hooks';
 import IconClose from '../IconClose/index.vue';
 import { SvgRadiusBg } from './components';
diff --git a/src/components/custom/IconSelect/index.vue b/src/components/custom/IconSelect/index.vue
index 5c6b18db..4951ffd4 100644
--- a/src/components/custom/IconSelect/index.vue
+++ b/src/components/custom/IconSelect/index.vue
@@ -26,7 +26,6 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import { NPopover, NInput, NEmpty } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 
diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
index 7fca88e8..55408cea 100644
--- a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
+++ b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -24,7 +24,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui';
 import { routePath } from '@/router';
 import { useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
diff --git a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
index 0cfb17b3..b464dadd 100644
--- a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
+++ b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
@@ -5,7 +5,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
diff --git a/src/layouts/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
index 88e386b2..c193ecda 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 { NDropdown, useDialog } from 'naive-ui';
 import { HoverContainer } from '@/components';
 import { useAuthStore } from '@/store';
 import { iconifyRender } from '@/utils';
@@ -17,7 +16,6 @@ import avatar from '@/assets/svg/common/avatar01.svg';
 type DropdownKey = 'user-center' | 'logout';
 
 const auth = useAuthStore();
-const dialog = useDialog();
 
 const options = [
   {
@@ -39,7 +37,7 @@ const options = [
 function handleDropdown(optionKey: string) {
   const key = optionKey as DropdownKey;
   if (key === 'logout') {
-    dialog.info({
+    window.$dialog?.info({
       title: '提示',
       content: '您确定要退出登录吗？',
       positiveText: '确定',
diff --git a/src/layouts/common/GlobalSearch/components/SearchModal.vue b/src/layouts/common/GlobalSearch/components/SearchModal.vue
index 6657284d..bb65c27d 100644
--- a/src/layouts/common/GlobalSearch/components/SearchModal.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchModal.vue
@@ -26,7 +26,6 @@
 <script lang="ts" setup>
 import { ref, shallowRef, computed, watch, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
-import { NModal, NInput, NEmpty } from 'naive-ui';
 import { useDebounceFn, onKeyStroke } from '@vueuse/core';
 import { useRouteStore } from '@/store';
 import type { RouteList } from './types';
diff --git a/src/layouts/common/GlobalSearch/components/SearchResult.vue b/src/layouts/common/GlobalSearch/components/SearchResult.vue
index 13ff1747..899b19d0 100644
--- a/src/layouts/common/GlobalSearch/components/SearchResult.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchResult.vue
@@ -22,7 +22,6 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NScrollbar } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 import type { RouteList } from './types';
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
index 808a9352..a16f7e18 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
@@ -6,7 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NButton } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
index 665554e2..11ca73fc 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
@@ -31,7 +31,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore } from '@/store';
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
index f74b93a4..f8ed998f 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 { NScrollbar } from 'naive-ui';
 import { DarkModeContainer } from '@/components';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
diff --git a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
index 5b49943e..3c545a4f 100644
--- a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
@@ -17,7 +17,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 import { useRouterPush } from '@/composables';
diff --git a/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue b/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
index dba0c8c3..c0fde1ee 100644
--- a/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
+++ b/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
@@ -12,7 +12,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NDropdown } from 'naive-ui';
 import type { DropdownOption } from 'naive-ui';
 import { useAppStore, useTabStore } from '@/store';
 import { iconifyRender } from '@/utils';
diff --git a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
index 1ea1e837..0721a94a 100644
--- a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -13,7 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSwitch } from 'naive-ui';
 import { useThemeStore } from '@/store';
 
 const theme = useThemeStore();
diff --git a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
index c289edf6..11e0806f 100644
--- a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { NButton } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
index ca0ade9e..cb90e90c 100644
--- a/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
@@ -17,7 +17,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NTooltip } from 'naive-ui';
 import type { FollowerPlacement } from 'vueuc';
 import { EnumThemeLayoutMode } from '@/enum';
 import type { ThemeLayoutMode } from '@/interface';
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
index e2851c7b..b30cbd67 100644
--- a/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
@@ -13,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { NDivider, NSpace } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { LayoutCheckbox } from './components';
 
diff --git a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
index 22eadf0a..ccd3e8fd 100644
--- a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
@@ -59,7 +59,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSpace, NSwitch, NSelect, NInputNumber } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 
diff --git a/src/layouts/common/SettingDrawer/components/PageView/index.vue b/src/layouts/common/SettingDrawer/components/PageView/index.vue
index a39954f0..d79ef3d8 100644
--- a/src/layouts/common/SettingDrawer/components/PageView/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageView/index.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSpace, NSwitch, NSelect } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import SettingMenu from '../SettingMenu/index.vue';
 
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
index 3695fcc7..8bfe779e 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
@@ -23,7 +23,6 @@
 </template>
 
 <script setup lang="ts">
-import { NModal, NGradientText, NTabs, NTabPane, NGrid, NGridItem } from 'naive-ui';
 import { traditionColors } from '@/settings';
 import { useThemeStore } from '@/store';
 import ColorCheckbox from './ColorCheckbox.vue';
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
index 409f65a5..264f93e7 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NDivider, NGrid, NGridItem, NSpace, NButton, NColorPicker } from 'naive-ui';
 import { isInTraditionColors } from '@/settings';
 import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
diff --git a/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
index 887c962c..a7fd6c62 100644
--- a/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
@@ -11,7 +11,6 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue';
-import { NDivider, NSpace, NButton } from 'naive-ui';
 import Clipboard from 'clipboard';
 import { useThemeStore } from '@/store';
 
diff --git a/src/layouts/common/SettingDrawer/index.vue b/src/layouts/common/SettingDrawer/index.vue
index 13f81371..fb26de26 100644
--- a/src/layouts/common/SettingDrawer/index.vue
+++ b/src/layouts/common/SettingDrawer/index.vue
@@ -13,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
 import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect, PageFunc, PageView, ThemeConfig } from './components';
 
diff --git a/src/main.ts b/src/main.ts
index 70c5a672..1955649e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { setupAssets } from '@/plugins';
+import { setupAssets, setupNaiveUI } from '@/plugins';
 import { setupRouter } from '@/router';
 import { setupStore } from '@/store';
 import { setupDirectives } from '@/directives';
@@ -17,6 +17,9 @@ async function setupApp() {
   // 挂载自定义vue指令
   setupDirectives(app);
 
+  // 按需引入naiveUI
+  setupNaiveUI(app);
+
   // 挂载路由
   await setupRouter(app);
 
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 4de580b2..18628336 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,3 +1,4 @@
 import setupAssets from './assets';
+import setupNaiveUI from './naive';
 
-export { setupAssets };
+export { setupAssets, setupNaiveUI };
diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts
new file mode 100644
index 00000000..cb839959
--- /dev/null
+++ b/src/plugins/naive.ts
@@ -0,0 +1,103 @@
+import type { App } from 'vue';
+import {
+  create,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NButton,
+  NCard,
+  NCheckbox,
+  NColorPicker,
+  NConfigProvider,
+  NDataTable,
+  NDescriptions,
+  NDescriptionsItem,
+  NDialogProvider,
+  NDivider,
+  NDrawer,
+  NDrawerContent,
+  NDropdown,
+  NEmpty,
+  NForm,
+  NFormItem,
+  NGradientText,
+  NGrid,
+  NGridItem,
+  NInput,
+  NInputGroup,
+  NInputNumber,
+  NList,
+  NListItem,
+  NLoadingBarProvider,
+  NModal,
+  NMenu,
+  NMessageProvider,
+  NNotificationProvider,
+  NPopover,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  NStatistic,
+  NSwitch,
+  NSpin,
+  NTabs,
+  NTabPane,
+  NTag,
+  NThing,
+  NTimeline,
+  NTimelineItem,
+  NTooltip
+} from 'naive-ui';
+
+/** 按需引入naiveUI */
+export default function setupNaiveUI(app: App) {
+  const naive = create({
+    components: [
+      NBreadcrumb,
+      NBreadcrumbItem,
+      NButton,
+      NCard,
+      NCheckbox,
+      NColorPicker,
+      NConfigProvider,
+      NDataTable,
+      NDescriptions,
+      NDescriptionsItem,
+      NDialogProvider,
+      NDivider,
+      NDrawer,
+      NDrawerContent,
+      NDropdown,
+      NEmpty,
+      NForm,
+      NFormItem,
+      NGradientText,
+      NGrid,
+      NGridItem,
+      NInput,
+      NInputGroup,
+      NInputNumber,
+      NList,
+      NListItem,
+      NLoadingBarProvider,
+      NModal,
+      NMenu,
+      NMessageProvider,
+      NNotificationProvider,
+      NPopover,
+      NScrollbar,
+      NSelect,
+      NSpace,
+      NStatistic,
+      NSwitch,
+      NSpin,
+      NTabs,
+      NTabPane,
+      NTag,
+      NThing,
+      NTimeline,
+      NTimelineItem,
+      NTooltip
+    ]
+  });
+  app.use(naive);
+}
diff --git a/src/views/about/components/DevDependency.vue b/src/views/about/components/DevDependency.vue
index ec91ce5d..980977e6 100644
--- a/src/views/about/components/DevDependency.vue
+++ b/src/views/about/components/DevDependency.vue
@@ -9,7 +9,6 @@
 </template>
 
 <script setup lang="ts">
-import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 import { pkgJson } from '../model';
 
 const { devDependencies } = pkgJson;
diff --git a/src/views/about/components/ProDependency.vue b/src/views/about/components/ProDependency.vue
index d1383434..82e603e6 100644
--- a/src/views/about/components/ProDependency.vue
+++ b/src/views/about/components/ProDependency.vue
@@ -9,7 +9,6 @@
 </template>
 
 <script setup lang="ts">
-import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 import { pkgJson } from '../model';
 
 const { dependencies } = pkgJson;
diff --git a/src/views/about/components/ProjectInfo.vue b/src/views/about/components/ProjectInfo.vue
index 505b1d06..18eeb811 100644
--- a/src/views/about/components/ProjectInfo.vue
+++ b/src/views/about/components/ProjectInfo.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { NCard, NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
 import { pkgJson } from '../model';
 
 const { version } = pkgJson;
diff --git a/src/views/about/components/ProjectIntroduction.vue b/src/views/about/components/ProjectIntroduction.vue
index 4d113b27..c86733c5 100644
--- a/src/views/about/components/ProjectIntroduction.vue
+++ b/src/views/about/components/ProjectIntroduction.vue
@@ -7,7 +7,5 @@
   </n-card>
 </template>
 
-<script setup lang="ts">
-import { NCard } from 'naive-ui';
-</script>
+<script setup lang="ts"></script>
 <style scoped></style>
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 68d86fb8..39da837b 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -8,7 +8,6 @@
 </template>
 
 <script setup lang="ts">
-import { NSpace } from 'naive-ui';
 import { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency } from './components';
 </script>
 <style scoped></style>
diff --git a/src/views/component/button/index.vue b/src/views/component/button/index.vue
index 72ea9dfd..9cb45a3b 100644
--- a/src/views/component/button/index.vue
+++ b/src/views/component/button/index.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script setup lang="ts">
-import { NCard, NGrid, NGridItem, NSpace, NButton } from 'naive-ui';
 import type { ButtonProps } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { useLoading } from '@/hooks';
diff --git a/src/views/component/card/index.vue b/src/views/component/card/index.vue
index 8270a753..3510237f 100644
--- a/src/views/component/card/index.vue
+++ b/src/views/component/card/index.vue
@@ -37,7 +37,5 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { NCard, NSpace } from 'naive-ui';
-</script>
+<script setup lang="ts"></script>
 <style scoped></style>
diff --git a/src/views/component/table/index.vue b/src/views/component/table/index.vue
index a07b4838..966f2ee1 100644
--- a/src/views/component/table/index.vue
+++ b/src/views/component/table/index.vue
@@ -16,7 +16,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { NCard, NSpace, NButton, NDataTable } from 'naive-ui';
 import type { DataTableColumn } from 'naive-ui';
 import { LoadingEmptyWrapper } from '@/components';
 import { useLoadingEmpty } from '@/hooks';
diff --git a/src/views/dashboard/analysis/components/BottomPart/index.vue b/src/views/dashboard/analysis/components/BottomPart/index.vue
index 0e59ca25..b2a2aba1 100644
--- a/src/views/dashboard/analysis/components/BottomPart/index.vue
+++ b/src/views/dashboard/analysis/components/BottomPart/index.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue';
-import { NGrid, NGridItem, NCard, NTimeline, NTimelineItem, NDataTable, NTag } from 'naive-ui';
+import { NTag } from 'naive-ui';
 
 interface TimelineData {
   type: 'default' | 'info' | 'success' | 'warning' | 'error';
diff --git a/src/views/dashboard/analysis/components/DataCard/index.vue b/src/views/dashboard/analysis/components/DataCard/index.vue
index 8b9025cd..e4abcf68 100644
--- a/src/views/dashboard/analysis/components/DataCard/index.vue
+++ b/src/views/dashboard/analysis/components/DataCard/index.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { NGrid, NGridItem } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { CountTo } from '@/components';
 import { GradientBg } from './components';
diff --git a/src/views/dashboard/analysis/components/TopChart/index.vue b/src/views/dashboard/analysis/components/TopChart/index.vue
index e03e5a79..7aa57447 100644
--- a/src/views/dashboard/analysis/components/TopChart/index.vue
+++ b/src/views/dashboard/analysis/components/TopChart/index.vue
@@ -32,7 +32,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { NGrid, NGridItem, NCard, NButton } from 'naive-ui';
 import { Line, Pie } from '@antv/g2plot';
 import { CountTo } from '@/components';
 import data from './data.json';
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index 420a3258..abd76780 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -7,7 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NSpace } from 'naive-ui';
 import { TopChart, DataCard, BottomPart } from './components';
 </script>
 <style scoped></style>
diff --git a/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
index 3911036d..733653ad 100644
--- a/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
@@ -16,7 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { NCard, NSpace, NStatistic } from 'naive-ui';
 import { useAuthStore } from '@/store';
 
 interface StatisticData {
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
index 48e27cb5..cd21b59b 100644
--- a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
@@ -47,7 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import { NGrid, NGridItem, NSpace, NCard, NList, NListItem, NThing } from 'naive-ui';
 import { SvgBanner } from '@/components';
 import { TechnologyCard, ShortcutsCard } from './components';
 
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index 9355a59f..4074d039 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -5,7 +5,6 @@
   </n-space>
 </template>
 <script lang="ts" setup>
-import { NSpace } from 'naive-ui';
 import { WorkbenchHeader, WorkbenchMain } from './components';
 </script>
 <style scoped></style>
diff --git a/src/views/multi-menu/first/second-new/third/index.vue b/src/views/multi-menu/first/second-new/third/index.vue
index 827c3c55..a54061a1 100644
--- a/src/views/multi-menu/first/second-new/third/index.vue
+++ b/src/views/multi-menu/first/second-new/third/index.vue
@@ -4,7 +4,5 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { NCard } from 'naive-ui';
-</script>
+<script setup lang="ts"></script>
 <style scoped></style>
diff --git a/src/views/multi-menu/first/second/index.vue b/src/views/multi-menu/first/second/index.vue
index ae51f5cf..80af83e6 100644
--- a/src/views/multi-menu/first/second/index.vue
+++ b/src/views/multi-menu/first/second/index.vue
@@ -4,7 +4,5 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { NCard } from 'naive-ui';
-</script>
+<script setup lang="ts"></script>
 <style scoped></style>
diff --git a/src/views/plugin/copy/index.vue b/src/views/plugin/copy/index.vue
index dafe2f57..7d5daf99 100644
--- a/src/views/plugin/copy/index.vue
+++ b/src/views/plugin/copy/index.vue
@@ -11,24 +11,22 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { NCard, NInputGroup, NInput, NButton, useMessage } from 'naive-ui';
 import { useClipboard } from '@vueuse/core';
 
 const source = ref('');
-const message = useMessage();
 const { copy, isSupported } = useClipboard();
 
 function handleCopy() {
   if (!isSupported) {
-    message.error('您的浏览器不支持Clipboard API');
+    window.$message?.error('您的浏览器不支持Clipboard API');
     return;
   }
   if (!source.value) {
-    message.error('请输入要复制的内容');
+    window.$message?.error('请输入要复制的内容');
     return;
   }
   copy(source.value);
-  message.success(`复制成功：${source.value}`);
+  window.$message?.success(`复制成功：${source.value}`);
 }
 </script>
 <style scoped></style>
diff --git a/src/views/plugin/editor/markdown/index.vue b/src/views/plugin/editor/markdown/index.vue
index 96449cd3..f90dbd3c 100644
--- a/src/views/plugin/editor/markdown/index.vue
+++ b/src/views/plugin/editor/markdown/index.vue
@@ -11,7 +11,6 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue';
-import { NCard } from 'naive-ui';
 import Vditor from 'vditor';
 import 'vditor/src/assets/scss/index.scss';
 import { GithubLink } from '@/components';
diff --git a/src/views/plugin/editor/quill/index.vue b/src/views/plugin/editor/quill/index.vue
index 12bd7c00..107cd316 100644
--- a/src/views/plugin/editor/quill/index.vue
+++ b/src/views/plugin/editor/quill/index.vue
@@ -11,7 +11,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { NCard } from 'naive-ui';
 import WangEditor from 'wangeditor';
 import { GithubLink } from '@/components';
 
diff --git a/src/views/plugin/icon/index.vue b/src/views/plugin/icon/index.vue
index 30eaad3d..921694ec 100644
--- a/src/views/plugin/icon/index.vue
+++ b/src/views/plugin/icon/index.vue
@@ -21,7 +21,6 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { NCard } from 'naive-ui';
 import { Icon } from '@iconify/vue';
 import { IconSelect, WebSiteLink } from '@/components';
 import { icons } from './icons';
diff --git a/src/views/plugin/map/index.vue b/src/views/plugin/map/index.vue
index 2681182e..0e0a8cc0 100644
--- a/src/views/plugin/map/index.vue
+++ b/src/views/plugin/map/index.vue
@@ -12,7 +12,6 @@
 
 <script setup lang="ts">
 import type { Component } from 'vue';
-import { NCard, NTabs, NTabPane } from 'naive-ui';
 import { GaodeMap, TencentMap } from './components';
 
 interface Map {
diff --git a/src/views/plugin/print/index.vue b/src/views/plugin/print/index.vue
index 47f67c76..864f8d1d 100644
--- a/src/views/plugin/print/index.vue
+++ b/src/views/plugin/print/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NCard, NButton } from 'naive-ui';
 import printJS from 'print-js';
 import { GithubLink } from '@/components';
 
diff --git a/src/views/plugin/swiper/index.vue b/src/views/plugin/swiper/index.vue
index f3b0070a..e430af1c 100644
--- a/src/views/plugin/swiper/index.vue
+++ b/src/views/plugin/swiper/index.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import { NCard, NSpace } from 'naive-ui';
 import SwiperCore, { Navigation, Pagination } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import type { SwiperOptions } from 'swiper';
diff --git a/src/views/plugin/video/index.vue b/src/views/plugin/video/index.vue
index 10e02b36..d40cce4b 100644
--- a/src/views/plugin/video/index.vue
+++ b/src/views/plugin/video/index.vue
@@ -8,7 +8,6 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-import { NCard } from 'naive-ui';
 import Player from 'xgplayer';
 
 const domRef = ref<HTMLElement>();
diff --git a/src/views/system-view/components/ExceptionBase.vue b/src/views/system-view/components/ExceptionBase.vue
index d900f1c4..c3278de5 100644
--- a/src/views/system-view/components/ExceptionBase.vue
+++ b/src/views/system-view/components/ExceptionBase.vue
@@ -12,7 +12,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { NButton } from 'naive-ui';
 import { SvgNoPermission, SvgNotFound, SvgServiceError } from '@/components';
 import { routeName } from '@/router';
 
diff --git a/src/views/system-view/login/components/BindWechat/index.vue b/src/views/system-view/login/components/BindWechat/index.vue
index d93c0b3e..68f3ee9a 100644
--- a/src/views/system-view/login/components/BindWechat/index.vue
+++ b/src/views/system-view/login/components/BindWechat/index.vue
@@ -21,7 +21,6 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
 import type { FormInst } from 'naive-ui';
 import { useRouterPush } from '@/composables';
 import { useSmsCode } from '@/hooks';
diff --git a/src/views/system-view/login/components/CodeLogin/index.vue b/src/views/system-view/login/components/CodeLogin/index.vue
index 92e3e284..2bd05d9b 100644
--- a/src/views/system-view/login/components/CodeLogin/index.vue
+++ b/src/views/system-view/login/components/CodeLogin/index.vue
@@ -36,7 +36,6 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
 import type { FormInst } from 'naive-ui';
 import { ImageVerify } from '@/components';
 import { useAuthStore } from '@/store';
diff --git a/src/views/system-view/login/components/PwdLogin/components/OtherLogin.vue b/src/views/system-view/login/components/PwdLogin/components/OtherLogin.vue
index 18f758b0..9d27358a 100644
--- a/src/views/system-view/login/components/PwdLogin/components/OtherLogin.vue
+++ b/src/views/system-view/login/components/PwdLogin/components/OtherLogin.vue
@@ -9,7 +9,5 @@
   </n-space>
 </template>
 
-<script lang="ts" setup>
-import { NSpace, NDivider, NButton } from 'naive-ui';
-</script>
+<script lang="ts" setup></script>
 <style scoped></style>
diff --git a/src/views/system-view/login/components/PwdLogin/index.vue b/src/views/system-view/login/components/PwdLogin/index.vue
index 73f85c35..100be64e 100644
--- a/src/views/system-view/login/components/PwdLogin/index.vue
+++ b/src/views/system-view/login/components/PwdLogin/index.vue
@@ -37,7 +37,6 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton } from 'naive-ui';
 import type { FormInst, FormRules } from 'naive-ui';
 import { EnumLoginModule } from '@/enum';
 import { useAuthStore } from '@/store';
diff --git a/src/views/system-view/login/components/Register/index.vue b/src/views/system-view/login/components/Register/index.vue
index 160937d8..d573e7c6 100644
--- a/src/views/system-view/login/components/Register/index.vue
+++ b/src/views/system-view/login/components/Register/index.vue
@@ -28,7 +28,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref, toRefs } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
 import type { FormInst, FormRules } from 'naive-ui';
 import { LoginAgreement } from '@/components';
 import { useRouterPush } from '@/composables';
diff --git a/src/views/system-view/login/components/ResetPwd/index.vue b/src/views/system-view/login/components/ResetPwd/index.vue
index 67c268f7..1f235f5c 100644
--- a/src/views/system-view/login/components/ResetPwd/index.vue
+++ b/src/views/system-view/login/components/ResetPwd/index.vue
@@ -27,13 +27,11 @@
 
 <script lang="ts" setup>
 import { reactive, ref, toRefs } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NButton, useMessage } from 'naive-ui';
 import type { FormInst, FormRules } from 'naive-ui';
 import { useRouterPush } from '@/composables';
 import { useSmsCode } from '@/hooks';
 import { formRules, getConfirmPwdRule } from '@/utils';
 
-const message = useMessage();
 const { toLoginModule } = useRouterPush();
 const { label, isCounting, loading: smsLoading, start } = useSmsCode();
 
@@ -61,9 +59,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      message.success('验证成功');
+      window.$message?.success('验证成功');
     } else {
-      message.error('验证失败');
+      window.$message?.error('验证失败');
     }
   });
 }
diff --git a/src/views/system-view/login/index.vue b/src/views/system-view/login/index.vue
index 7fc2d9a4..5336f8e8 100644
--- a/src/views/system-view/login/index.vue
+++ b/src/views/system-view/login/index.vue
@@ -30,7 +30,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { NCard, NGradientText } from 'naive-ui';
 import { EnumLoginModule } from '@/enum';
 import { SystemLogo, DarkModeSwitch } from '@/components';
 import { useThemeStore } from '@/store';
diff --git a/tsconfig.json b/tsconfig.json
index dab079ac..38bdad73 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
       "@/*": ["src/*"],
 			"~/*": ["./*"]
     },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+		"types": ["naive-ui/volar"]
   },
   "include": ["vite.config.*", "src/typings/*.d.ts", "src/**/*", "src/**/*.vue", "mock/**/*.ts", "build/**/*.ts", ".env-config.ts"],
 	"exclude": ["/dist/**", "node_modules"]