diff --git a/.eslintrc.js b/.eslintrc.js
index 5cf33b46c..96f90ce35 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -155,7 +155,7 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-inferrable-types': 0,
     '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }],
+    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true, varsIgnorePattern: 'Ignored' }],
     '@typescript-eslint/no-use-before-define': ['error', { classes: true, functions: false, typedefs: false }],
     '@typescript-eslint/no-var-requires': 'off'
   }
diff --git a/mock/api/route.ts b/mock/api/route.ts
index febeac8fb..c51a9c856 100644
--- a/mock/api/route.ts
+++ b/mock/api/route.ts
@@ -90,16 +90,42 @@ const routes: AuthRoute.Route[] = [
     }
   },
   {
-    name: 'about',
-    path: '/about',
-    component: 'self',
+    name: 'component',
+    path: '/component',
+    component: 'basic',
+    children: [
+      {
+        name: 'component_button',
+        path: '/component/button',
+        component: 'self',
+        meta: {
+          title: '按钮',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'component_card',
+        path: '/component/card',
+        component: 'self',
+        meta: {
+          title: '卡片',
+          requiresAuth: true
+        }
+      },
+      {
+        name: 'component_table',
+        path: '/component/table',
+        component: 'self',
+        meta: {
+          title: '表格',
+          requiresAuth: true
+        }
+      }
+    ],
     meta: {
-      title: '关于',
-      requiresAuth: true,
-      singleLayout: 'basic',
-      permissions: ['super', 'admin', 'test'],
-      icon: 'fluent:book-information-24-regular',
-      order: 7
+      title: '组件示例',
+      icon: 'fluent:app-store-24-regular',
+      order: 4
     }
   },
   {
@@ -190,6 +216,19 @@ const routes: AuthRoute.Route[] = [
       icon: 'carbon:menu',
       order: 6
     }
+  },
+  {
+    name: 'about',
+    path: '/about',
+    component: 'self',
+    meta: {
+      title: '关于',
+      requiresAuth: true,
+      singleLayout: 'basic',
+      permissions: ['super', 'admin', 'test'],
+      icon: 'fluent:book-information-24-regular',
+      order: 7
+    }
   }
 ];
 
diff --git a/package.json b/package.json
index adc818f7d..88a0159a3 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "@vitejs/plugin-vue": "^2.0.1",
+    "@vitejs/plugin-vue": "^2.1.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "commitizen": "^4.2.4",
@@ -64,7 +64,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.3.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.2.2",
+    "lint-staged": "^12.3.1",
     "mockjs": "^1.1.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
@@ -78,7 +78,7 @@
     "vite-plugin-html": "^2.1.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-windicss": "^1.6.3",
-    "vue-tsc": "^0.30.6",
+    "vue-tsc": "^0.31.1",
     "vueuc": "^0.4.23",
     "windicss": "^3.4.3"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73ca340ed..39c5e556c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ specifiers:
   '@types/qs': ^6.9.7
   '@typescript-eslint/eslint-plugin': ^5.10.0
   '@typescript-eslint/parser': ^5.10.0
-  '@vitejs/plugin-vue': ^2.0.1
+  '@vitejs/plugin-vue': ^2.1.0
   '@vue/eslint-config-prettier': ^7.0.0
   '@vue/eslint-config-typescript': ^10.0.0
   '@vueuse/core': ^7.5.4
@@ -33,7 +33,7 @@ specifiers:
   eslint-plugin-vue: ^8.3.0
   form-data: ^4.0.0
   husky: ^7.0.4
-  lint-staged: ^12.2.2
+  lint-staged: ^12.3.1
   lodash-es: ^4.17.21
   mockjs: ^1.1.0
   naive-ui: ^2.24.1
@@ -53,7 +53,7 @@ specifiers:
   vite-plugin-windicss: ^1.6.3
   vue: ^3.2.26
   vue-router: ^4.0.12
-  vue-tsc: ^0.30.6
+  vue-tsc: ^0.31.1
   vueuc: ^0.4.23
   windicss: ^3.4.3
 
@@ -84,7 +84,7 @@ devDependencies:
   '@types/qs': registry.npmmirror.com/@types/qs/6.9.7
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.10.0_706fb07ce74b1db611f19a02ad2ce784
   '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.10.0_eslint@8.7.0+typescript@4.5.5
-  '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.0.1_vite@2.7.13+vue@3.2.26
+  '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.1.0_vite@2.7.13+vue@3.2.26
   '@vue/eslint-config-prettier': registry.npmmirror.com/@vue/eslint-config-prettier/7.0.0_eslint@8.7.0+prettier@2.5.1
   '@vue/eslint-config-typescript': registry.npmmirror.com/@vue/eslint-config-typescript/10.0.0_b5007341d5f2a2e7b479ac173dfc16cf
   commitizen: registry.npmmirror.com/commitizen/4.2.4_@types+node@17.0.10
@@ -98,7 +98,7 @@ devDependencies:
   eslint-plugin-prettier: registry.npmmirror.com/eslint-plugin-prettier/4.0.0_4660519532e4c3b0a9e5bb6623cfedf6
   eslint-plugin-vue: registry.npmmirror.com/eslint-plugin-vue/8.3.0_eslint@8.7.0
   husky: registry.npmmirror.com/husky/7.0.4
-  lint-staged: registry.npmmirror.com/lint-staged/12.2.2
+  lint-staged: registry.npmmirror.com/lint-staged/12.3.1
   mockjs: registry.npmmirror.com/mockjs/1.1.0
   patch-package: registry.nlark.com/patch-package/6.4.7
   postinstall-postinstall: registry.npmmirror.com/postinstall-postinstall/2.1.0
@@ -112,7 +112,7 @@ devDependencies:
   vite-plugin-html: registry.npmmirror.com/vite-plugin-html/2.1.2_vite@2.7.13
   vite-plugin-mock: registry.npmmirror.com/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.7.13
   vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.6.3_vite@2.7.13
-  vue-tsc: registry.npmmirror.com/vue-tsc/0.30.6_typescript@4.5.5
+  vue-tsc: registry.npmmirror.com/vue-tsc/0.31.1_typescript@4.5.5
   vueuc: registry.npmmirror.com/vueuc/0.4.23_vue@3.2.26
   windicss: registry.npmmirror.com/windicss/3.4.3
 
@@ -875,12 +875,6 @@ packages:
       esutils: registry.npmmirror.com/esutils/2.0.3
     dev: true
 
-  registry.nlark.com/doctypes/1.1.0:
-    resolution: {integrity: sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/doctypes/download/doctypes-1.1.0.tgz}
-    name: doctypes
-    version: 1.1.0
-    dev: true
-
   registry.nlark.com/dom-serializer/1.3.2:
     resolution: {integrity: sha1-YgZDfTLO767HFhgDIwx6ILwbTZE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/dom-serializer/download/dom-serializer-1.3.2.tgz}
     name: dom-serializer
@@ -1803,7 +1797,7 @@ packages:
     version: 1.0.0
     dependencies:
       is-promise: registry.nlark.com/is-promise/2.2.2
-      promise: registry.npmmirror.com/promise/7.3.1
+      promise: registry.nlark.com/promise/7.3.1
     dev: true
 
   registry.nlark.com/kind-of/3.2.2:
@@ -2055,7 +2049,7 @@ packages:
     dev: true
 
   registry.nlark.com/normalize-path/3.0.0:
-    resolution: {integrity: sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/normalize-path/download/normalize-path-3.0.0.tgz?cache=0&sync_timestamp=1631501916645&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fnormalize-path%2Fdownload%2Fnormalize-path-3.0.0.tgz}
+    resolution: {integrity: sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/normalize-path/download/normalize-path-3.0.0.tgz}
     name: normalize-path
     version: 3.0.0
     engines: {node: '>=0.10.0'}
@@ -2339,6 +2333,14 @@ packages:
       fast-diff: registry.nlark.com/fast-diff/1.2.0
     dev: true
 
+  registry.nlark.com/promise/7.3.1:
+    resolution: {integrity: sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/promise/download/promise-7.3.1.tgz}
+    name: promise
+    version: 7.3.1
+    dependencies:
+      asap: registry.nlark.com/asap/2.0.6
+    dev: true
+
   registry.nlark.com/pug-attrs/3.0.0:
     resolution: {integrity: sha1-sQRR4DSBZeMfrRzCPr3dncc0fEE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/pug-attrs/download/pug-attrs-3.0.0.tgz}
     name: pug-attrs
@@ -2355,7 +2357,7 @@ packages:
     version: 3.0.2
     dependencies:
       constantinople: registry.nlark.com/constantinople/4.0.1
-      doctypes: registry.nlark.com/doctypes/1.1.0
+      doctypes: registry.npmmirror.com/doctypes/1.1.0
       js-stringify: registry.nlark.com/js-stringify/1.0.2
       pug-attrs: registry.nlark.com/pug-attrs/3.0.0
       pug-error: registry.npmmirror.com/pug-error/2.0.0
@@ -3047,6 +3049,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  registry.nlark.com/vscode-nls/5.0.0:
+    resolution: {integrity: sha1-mfDaC9nqfNpE5WWnTFSx8rwleEA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vscode-nls/download/vscode-nls-5.0.0.tgz}
+    name: vscode-nls
+    version: 5.0.0
+    dev: true
+
   registry.nlark.com/webpack-virtual-modules/0.4.3:
     resolution: {integrity: sha1-zVl8bVHVpey0c+6hmDpY+ooX3tk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/webpack-virtual-modules/download/webpack-virtual-modules-0.4.3.tgz}
     name: webpack-virtual-modules
@@ -3117,7 +3125,7 @@ packages:
     dev: false
 
   registry.nlark.com/wrap-ansi/6.2.0:
-    resolution: {integrity: sha1-6Tk7oHEC5skaOyIUePAlfNKFblM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/wrap-ansi/download/wrap-ansi-6.2.0.tgz?cache=0&sync_timestamp=1631584889456&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrap-ansi%2Fdownload%2Fwrap-ansi-6.2.0.tgz}
+    resolution: {integrity: sha1-6Tk7oHEC5skaOyIUePAlfNKFblM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/wrap-ansi/download/wrap-ansi-6.2.0.tgz}
     name: wrap-ansi
     version: 6.2.0
     engines: {node: '>=8'}
@@ -3128,7 +3136,7 @@ packages:
     dev: true
 
   registry.nlark.com/wrap-ansi/7.0.0:
-    resolution: {integrity: sha1-Z+FFz/UQpqaYS98RUpEdadLrnkM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/wrap-ansi/download/wrap-ansi-7.0.0.tgz?cache=0&sync_timestamp=1631584889456&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrap-ansi%2Fdownload%2Fwrap-ansi-7.0.0.tgz}
+    resolution: {integrity: sha1-Z+FFz/UQpqaYS98RUpEdadLrnkM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/wrap-ansi/download/wrap-ansi-7.0.0.tgz}
     name: wrap-ansi
     version: 7.0.0
     engines: {node: '>=10'}
@@ -4066,11 +4074,11 @@ packages:
       eslint-visitor-keys: registry.npmmirror.com/eslint-visitor-keys/3.2.0
     dev: true
 
-  registry.npmmirror.com/@vitejs/plugin-vue/2.0.1_vite@2.7.13+vue@3.2.26:
-    resolution: {integrity: sha512-wtdMnGVvys9K8tg+DxowU1ytTrdVveXr3LzdhaKakysgGXyrsfaeds2cDywtvujEASjWOwWL/OgWM+qoeM8Plg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-2.0.1.tgz}
-    id: registry.npmmirror.com/@vitejs/plugin-vue/2.0.1
+  registry.npmmirror.com/@vitejs/plugin-vue/2.1.0_vite@2.7.13+vue@3.2.26:
+    resolution: {integrity: sha512-AZ78WxvFMYd8JmM/GBV6a6SGGTU0GgN/0/4T+FnMMsLzFEzTeAUwuraapy50ifHZsC+G5SvWs86bvaCPTneFlA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-2.1.0.tgz}
+    id: registry.npmmirror.com/@vitejs/plugin-vue/2.1.0
     name: '@vitejs/plugin-vue'
-    version: 2.0.1
+    version: 2.1.0
     engines: {node: '>=12.0.0'}
     peerDependencies:
       vite: ^2.5.10
@@ -4080,19 +4088,19 @@ packages:
       vue: registry.npmmirror.com/vue/3.2.26
     dev: true
 
-  registry.npmmirror.com/@volar/code-gen/0.30.6:
-    resolution: {integrity: sha512-odkXN91QCS/KRKPk4eUQp7jkN0PuYLwDuJZwGiDDJrZWUCCSdEvSj7e+Cjk7Q7doX0G9WAF88BL7ozcjzrtiKw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/code-gen/download/@volar/code-gen-0.30.6.tgz}
+  registry.npmmirror.com/@volar/code-gen/0.31.1:
+    resolution: {integrity: sha512-HsUNJHBdq4vGxenYlREqtBNf1Gh5JV1GBkD703bcH8clauc7ADTkUrayfLAF2ulXP/U0l7dFL8C8bwqJ7PZbMw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/code-gen/download/@volar/code-gen-0.31.1.tgz}
     name: '@volar/code-gen'
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
     dev: true
 
-  registry.npmmirror.com/@volar/html2pug/0.30.6:
-    resolution: {integrity: sha512-mPRQCRa/Nse0bC1wxJ+K7q/Ou0Wg+220qL3nPI3mqwSn0KECOAPsZxaVHRFauY4MeBxO2sOzkOvFfQLk8whJ1g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/html2pug/download/@volar/html2pug-0.30.6.tgz}
+  registry.npmmirror.com/@volar/html2pug/0.31.1:
+    resolution: {integrity: sha512-m/lbsz9t+zXx9HsuLH17Z/5nNtefv5qxncL8rycR+GaypHQKF5kg+GqQNOURMQ8T8lq2D6fNsGQOcMXoo3IqWQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/html2pug/download/@volar/html2pug-0.31.1.tgz}
     name: '@volar/html2pug'
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
       domelementtype: registry.nlark.com/domelementtype/2.2.0
       domhandler: registry.npmmirror.com/domhandler/4.3.0
@@ -4100,10 +4108,10 @@ packages:
       pug: registry.npmmirror.com/pug/3.0.2
     dev: true
 
-  registry.npmmirror.com/@volar/shared/0.30.6:
-    resolution: {integrity: sha512-YJa7kl2HRkSZaETBPCVEm/ZVXPBpt1aAlCxNuj55GaCHhcabOVj2oCBZioJLiwAvSR0e6k6KjbJBcKTuKrP9bw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/shared/download/@volar/shared-0.30.6.tgz}
+  registry.npmmirror.com/@volar/shared/0.31.1:
+    resolution: {integrity: sha512-WbMiPOlXbpFinZnQ+/qsJQ7+YW6MFla2fLdD6Er5bLW5DEXI+GupLQ2gnia7F0w6QborMowfOIEXnrnMPPYGOA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/shared/download/@volar/shared-0.31.1.tgz}
     name: '@volar/shared'
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
       upath: registry.nlark.com/upath/2.0.1
       vscode-html-languageservice: registry.npmmirror.com/vscode-html-languageservice/4.2.1
@@ -4111,32 +4119,32 @@ packages:
       vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3
     dev: true
 
-  registry.npmmirror.com/@volar/source-map/0.30.6:
-    resolution: {integrity: sha512-B0KLi0StdM3KsMLA+iK5pdE+mokukio7r0EkOMUAYZN/xn/kGWkKIdleJjLtgmtH2tw4kBz/5hP+KKEOlD3Etg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/source-map/download/@volar/source-map-0.30.6.tgz}
+  registry.npmmirror.com/@volar/source-map/0.31.1:
+    resolution: {integrity: sha512-t+bUmxI5bkunBxX6UYpBX6+xnYYJhpciL3Hqv0dkHSaS63kJqY13OhV/utmQMjto3b3FAbYLSVqpt09FtdTPzg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/source-map/download/@volar/source-map-0.31.1.tgz}
     name: '@volar/source-map'
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
     dev: true
 
-  registry.npmmirror.com/@volar/transforms/0.30.6:
-    resolution: {integrity: sha512-jbVBXOBOeKc6Rb7dzyiq5b+FfYsXFWGFLLDZok5U+JoFujxoPfn5HwX9A3t+RW/NRwQkZxrdiPmW8b69B5nMKQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/transforms/download/@volar/transforms-0.30.6.tgz}
+  registry.npmmirror.com/@volar/transforms/0.31.1:
+    resolution: {integrity: sha512-O9rrGwCTzzsVFe06WOKUx7f9rkPg396ugWkMX6O0M15EF1a3ykqH7QX1uxVhFS0NwvWDnIeJYe7NG1uf1BwR+w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/transforms/download/@volar/transforms-0.31.1.tgz}
     name: '@volar/transforms'
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
       vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.17.0-next.6
     dev: true
 
-  registry.npmmirror.com/@volar/vue-code-gen/0.30.6:
-    resolution: {integrity: sha512-UGpbOuC5ZxT2GXvkq2IWUuca9IDJVaaywWparKW0SwPFOZaMM2ivHLOfQpiuPqDUKTZLGK3fQuBWuXSTl+GIbA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/vue-code-gen/download/@volar/vue-code-gen-0.30.6.tgz}
+  registry.npmmirror.com/@volar/vue-code-gen/0.31.1:
+    resolution: {integrity: sha512-MBMqhE+Z7xt2MSeQQA4ld0qx894gr5eLFWkTORdNoCbK8+02oB3yrZVr3T+i9jprjiV6svXKBoyk0RZ6YsgNqw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/vue-code-gen/download/@volar/vue-code-gen-0.31.1.tgz}
     name: '@volar/vue-code-gen'
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
-      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
+      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
       '@vue/compiler-core': registry.npmmirror.com/@vue/compiler-core/3.2.27
       '@vue/compiler-dom': registry.npmmirror.com/@vue/compiler-dom/3.2.27
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.27
@@ -4152,7 +4160,7 @@ packages:
       jsonc-parser: registry.nlark.com/jsonc-parser/2.3.1
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
       vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.16.0
-      vscode-nls: registry.npmmirror.com/vscode-nls/5.0.0
+      vscode-nls: registry.nlark.com/vscode-nls/5.0.0
       vscode-uri: registry.npmmirror.com/vscode-uri/2.1.2
     dev: true
 
@@ -4689,7 +4697,7 @@ packages:
     dev: false
 
   registry.npmmirror.com/colorette/2.0.16:
-    resolution: {integrity: sha1-cTua+E/bAAE58EVGvUqT9ipQhdo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/colorette/download/colorette-2.0.16.tgz?cache=0&sync_timestamp=1633673609067&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcolorette%2Fdownload%2Fcolorette-2.0.16.tgz}
+    resolution: {integrity: sha1-cTua+E/bAAE58EVGvUqT9ipQhdo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/colorette/download/colorette-2.0.16.tgz}
     name: colorette
     version: 2.0.16
     dev: true
@@ -4965,6 +4973,12 @@ packages:
     version: 27.4.0
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  registry.npmmirror.com/doctypes/1.1.0:
+    resolution: {integrity: sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/doctypes/download/doctypes-1.1.0.tgz}
+    name: doctypes
+    version: 1.1.0
+    dev: true
+
   registry.npmmirror.com/domhandler/4.3.0:
     resolution: {integrity: sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/domhandler/download/domhandler-4.3.0.tgz}
     name: domhandler
@@ -5481,7 +5495,7 @@ packages:
     version: 0.2.3
 
   registry.npmmirror.com/execa/5.1.1:
-    resolution: {integrity: sha1-+ArZy/Qpj3vR1MlVXCHpN0HEEd0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/execa/download/execa-5.1.1.tgz}
+    resolution: {integrity: sha1-+ArZy/Qpj3vR1MlVXCHpN0HEEd0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/execa/download/execa-5.1.1.tgz?cache=0&sync_timestamp=1637147725485&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fexeca%2Fdownload%2Fexeca-5.1.1.tgz}
     name: execa
     version: 5.1.1
     engines: {node: '>=10'}
@@ -5745,7 +5759,7 @@ packages:
     dev: true
 
   registry.npmmirror.com/htmlparser2/7.2.0:
-    resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/htmlparser2/download/htmlparser2-7.2.0.tgz?cache=0&sync_timestamp=1636641716463&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-7.2.0.tgz}
+    resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/htmlparser2/download/htmlparser2-7.2.0.tgz}
     name: htmlparser2
     version: 7.2.0
     dependencies:
@@ -5935,10 +5949,10 @@ packages:
     version: 1.2.4
     dev: true
 
-  registry.npmmirror.com/lint-staged/12.2.2:
-    resolution: {integrity: sha512-bcHEoM1M/f+K1BYdHcEuIn8K+zMOSJR3mkny6PAuQiTgcSUcRbUWaUD6porAYypxF4k1vYZZ2HutZt1p94Z1jQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lint-staged/download/lint-staged-12.2.2.tgz}
+  registry.npmmirror.com/lint-staged/12.3.1:
+    resolution: {integrity: sha512-Ocht/eT+4/siWOZDJpNUKcKX2UeWW/pDbohJ4gRsrafAjBi79JK8kiNVk2ciIVNKdw0Q4ABptl2nr6uQAlRImw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lint-staged/download/lint-staged-12.3.1.tgz}
     name: lint-staged
-    version: 12.2.2
+    version: 12.3.1
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -5948,7 +5962,7 @@ packages:
       debug: registry.npmmirror.com/debug/4.3.3_supports-color@9.2.1
       execa: registry.npmmirror.com/execa/5.1.1
       lilconfig: registry.npmmirror.com/lilconfig/2.0.4
-      listr2: registry.npmmirror.com/listr2/3.13.5
+      listr2: registry.npmmirror.com/listr2/4.0.1
       micromatch: registry.nlark.com/micromatch/4.0.4
       normalize-path: registry.nlark.com/normalize-path/3.0.0
       object-inspect: registry.npmmirror.com/object-inspect/1.12.0
@@ -5959,11 +5973,11 @@ packages:
       - enquirer
     dev: true
 
-  registry.npmmirror.com/listr2/3.13.5:
-    resolution: {integrity: sha512-3n8heFQDSk+NcwBn3CgxEibZGaRzx+pC64n3YjpMD1qguV4nWus3Al+Oo3KooqFKTQEJ1v7MmnbnyyNspgx3NA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/listr2/download/listr2-3.13.5.tgz}
+  registry.npmmirror.com/listr2/4.0.1:
+    resolution: {integrity: sha512-D65Nl+zyYHL2jQBGmxtH/pU8koPZo5C8iCNE8EoB04RwPgQG1wuaKwVbeZv9LJpiH4Nxs0FCp+nNcG8OqpniiA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/listr2/download/listr2-4.0.1.tgz}
     name: listr2
-    version: 3.13.5
-    engines: {node: '>=10.0.0'}
+    version: 4.0.1
+    engines: {node: '>=12'}
     peerDependencies:
       enquirer: '>= 2.3.0 < 3'
     peerDependenciesMeta:
@@ -5975,7 +5989,7 @@ packages:
       log-update: registry.npmmirror.com/log-update/4.0.0
       p-map: registry.npmmirror.com/p-map/4.0.0
       rfdc: registry.nlark.com/rfdc/1.3.0
-      rxjs: registry.npmmirror.com/rxjs/7.5.1
+      rxjs: registry.npmmirror.com/rxjs/7.5.2
       through: registry.nlark.com/through/2.3.8
       wrap-ansi: registry.nlark.com/wrap-ansi/7.0.0
     dev: true
@@ -6008,7 +6022,7 @@ packages:
     version: 4.17.21
 
   registry.npmmirror.com/log-update/4.0.0:
-    resolution: {integrity: sha1-WJ7NNSRx8qHAxXAodUOmTf0g4KE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/log-update/download/log-update-4.0.0.tgz?cache=0&sync_timestamp=1634543461511&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Flog-update%2Fdownload%2Flog-update-4.0.0.tgz}
+    resolution: {integrity: sha1-WJ7NNSRx8qHAxXAodUOmTf0g4KE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/log-update/download/log-update-4.0.0.tgz}
     name: log-update
     version: 4.0.0
     engines: {node: '>=10'}
@@ -6161,7 +6175,7 @@ packages:
     version: 4.0.1
     engines: {node: '>=8'}
     dependencies:
-      path-key: registry.npmmirror.com/path-key/3.1.1
+      path-key: registry.nlark.com/path-key/3.1.1
     dev: true
 
   registry.npmmirror.com/object-inspect/1.11.1:
@@ -6219,7 +6233,7 @@ packages:
     dev: true
 
   registry.npmmirror.com/p-map/4.0.0:
-    resolution: {integrity: sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/p-map/download/p-map-4.0.0.tgz?cache=0&sync_timestamp=1635932063287&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fp-map%2Fdownload%2Fp-map-4.0.0.tgz}
+    resolution: {integrity: sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/p-map/download/p-map-4.0.0.tgz?cache=0&sync_timestamp=1635932711630&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fp-map%2Fdownload%2Fp-map-4.0.0.tgz}
     name: p-map
     version: 4.0.0
     engines: {node: '>=10'}
@@ -6262,13 +6276,6 @@ packages:
       lines-and-columns: registry.npmmirror.com/lines-and-columns/1.2.4
     dev: true
 
-  registry.npmmirror.com/path-key/3.1.1:
-    resolution: {integrity: sha1-WB9q3mWMu6ZaDTOA3ndTKVBU83U=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/path-key/download/path-key-3.1.1.tgz}
-    name: path-key
-    version: 3.1.1
-    engines: {node: '>=8'}
-    dev: true
-
   registry.npmmirror.com/picocolors/1.0.0:
     resolution: {integrity: sha1-y1vcdP8/UYkiNur3nWi8RFZKuBw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/picocolors/download/picocolors-1.0.0.tgz}
     name: picocolors
@@ -6338,14 +6345,6 @@ packages:
       ansi-styles: registry.npmmirror.com/ansi-styles/5.2.0
       react-is: registry.npmmirror.com/react-is/17.0.2
 
-  registry.npmmirror.com/promise/7.3.1:
-    resolution: {integrity: sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/promise/download/promise-7.3.1.tgz}
-    name: promise
-    version: 7.3.1
-    dependencies:
-      asap: registry.nlark.com/asap/2.0.6
-    dev: true
-
   registry.npmmirror.com/pug-error/2.0.0:
     resolution: {integrity: sha1-XGIXPLCcNN4qLOBPF7it/sdNjKU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pug-error/download/pug-error-2.0.0.tgz}
     name: pug-error
@@ -6528,10 +6527,10 @@ packages:
       tslib: registry.npmmirror.com/tslib/1.14.1
     dev: true
 
-  registry.npmmirror.com/rxjs/7.5.1:
-    resolution: {integrity: sha512-KExVEeZWxMZnZhUZtsJcFwz8IvPvgu4G2Z2QyqjZQzUGr32KDYuSxrEYO4w3tFFNbfLozcrKUTvTPi+E9ywJkQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/rxjs/download/rxjs-7.5.1.tgz}
+  registry.npmmirror.com/rxjs/7.5.2:
+    resolution: {integrity: sha512-PwDt186XaL3QN5qXj/H9DGyHhP3/RYYgZZwqBv9Tv8rsAaiwFH1IsJJlcgD37J7UW5a6O67qX0KWKS3/pu0m4w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/rxjs/download/rxjs-7.5.2.tgz}
     name: rxjs
-    version: 7.5.1
+    version: 7.5.2
     dependencies:
       tslib: registry.npmmirror.com/tslib/2.3.1
     dev: true
@@ -7151,7 +7150,7 @@ packages:
     dependencies:
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
       vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.16.0
-      vscode-nls: registry.npmmirror.com/vscode-nls/5.0.0
+      vscode-nls: registry.nlark.com/vscode-nls/5.0.0
       vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3
     dev: true
 
@@ -7162,7 +7161,7 @@ packages:
     dependencies:
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
       vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.16.0
-      vscode-nls: registry.npmmirror.com/vscode-nls/5.0.0
+      vscode-nls: registry.nlark.com/vscode-nls/5.0.0
       vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3
     dev: true
 
@@ -7174,7 +7173,7 @@ packages:
       jsonc-parser: registry.nlark.com/jsonc-parser/3.0.0
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
       vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.16.0
-      vscode-nls: registry.npmmirror.com/vscode-nls/5.0.0
+      vscode-nls: registry.nlark.com/vscode-nls/5.0.0
       vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3
     dev: true
 
@@ -7212,38 +7211,32 @@ packages:
     version: 3.17.0-next.6
     dev: true
 
-  registry.npmmirror.com/vscode-nls/5.0.0:
-    resolution: {integrity: sha1-mfDaC9nqfNpE5WWnTFSx8rwleEA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-nls/download/vscode-nls-5.0.0.tgz}
-    name: vscode-nls
-    version: 5.0.0
-    dev: true
-
-  registry.npmmirror.com/vscode-pug-languageservice/0.30.6:
-    resolution: {integrity: sha512-oHXKmHaxLxVYDY6dOmxpm0YfilGgohIMEcE/ahK9O+0lvhgZ4xjEOdP27QcZs90fv92eOWf3CU9tgg4fR6e3+w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-pug-languageservice/download/vscode-pug-languageservice-0.30.6.tgz}
+  registry.npmmirror.com/vscode-pug-languageservice/0.31.1:
+    resolution: {integrity: sha512-71aQbVF3RjE+dUbUA/DnL1oGaLXXIMEy5z4TkE/irO/qodMjfwVbW/bxMCBwrVrXmIObIMlsWYPD+S/+EE3CXQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-pug-languageservice/download/vscode-pug-languageservice-0.31.1.tgz}
     name: vscode-pug-languageservice
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
-      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
-      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.30.6
+      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
+      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.31.1
       pug-lexer: registry.nlark.com/pug-lexer/5.0.1
       pug-parser: registry.nlark.com/pug-parser/6.0.0
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
       vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.17.0-next.6
     dev: true
 
-  registry.npmmirror.com/vscode-typescript-languageservice/0.30.6:
-    resolution: {integrity: sha512-Dni0VnMe01QkSvO0z7yIIy+vSll6hWCNtuuWvmBNoHAnFlndgq4OibPrpabv2iv4Lmq+66p40kqGcDg/bpjx5Q==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-typescript-languageservice/download/vscode-typescript-languageservice-0.30.6.tgz}
+  registry.npmmirror.com/vscode-typescript-languageservice/0.31.1:
+    resolution: {integrity: sha512-qJlkrznmRJGHAxIclfnAuJSbNfmKwDfAn7o3PLM7bBqtBvJG6HAFCBXaBWaE1kkM/ELG20Dn8Xi7lCfT15DlpA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-typescript-languageservice/download/vscode-typescript-languageservice-0.31.1.tgz}
     name: vscode-typescript-languageservice
-    version: 0.30.6
+    version: 0.31.1
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
       semver: registry.nlark.com/semver/7.3.5
       upath: registry.nlark.com/upath/2.0.1
       vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
-      vscode-nls: registry.npmmirror.com/vscode-nls/5.0.0
+      vscode-nls: registry.nlark.com/vscode-nls/5.0.0
     dev: true
 
   registry.npmmirror.com/vscode-uri/2.1.2:
@@ -7258,17 +7251,17 @@ packages:
     version: 3.0.3
     dev: true
 
-  registry.npmmirror.com/vscode-vue-languageservice/0.30.6:
-    resolution: {integrity: sha512-ZDaW6F2WK0LXt9RpwziKEvhfNxNmpx3ULLfPCGc+jIkM+u00gIB4i2K/5F99yNzbvrtxcgb3emFRH5FBlmmWDQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-vue-languageservice/download/vscode-vue-languageservice-0.30.6.tgz}
+  registry.npmmirror.com/vscode-vue-languageservice/0.31.1:
+    resolution: {integrity: sha512-7HY4VkD00iyfWyWpJcl3zObnsa9gBKGjTtrWflFR0SqGHMsccfh7QXdrPmgy/2nFRkD6n60XU7eSYg2rN/QexA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-vue-languageservice/download/vscode-vue-languageservice-0.31.1.tgz}
     name: vscode-vue-languageservice
-    version: 0.30.6
-    dependencies:
-      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6
-      '@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.30.6
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
-      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.30.6
-      '@volar/vue-code-gen': registry.npmmirror.com/@volar/vue-code-gen/0.30.6
+    version: 0.31.1
+    dependencies:
+      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
+      '@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.31.1
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
+      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.31.1
+      '@volar/vue-code-gen': registry.npmmirror.com/@volar/vue-code-gen/0.31.1
       '@vscode/emmet-helper': registry.npmmirror.com/@vscode/emmet-helper/2.8.3
       '@vue/reactivity': registry.npmmirror.com/@vue/reactivity/3.2.27
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.27
@@ -7278,8 +7271,8 @@ packages:
       vscode-json-languageservice: registry.npmmirror.com/vscode-json-languageservice/4.1.10
       vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
-      vscode-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.30.6
-      vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-languageservice/0.30.6
+      vscode-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.31.1
+      vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-languageservice/0.31.1
     dev: true
 
   registry.npmmirror.com/vue-demi/0.12.1_vue@3.2.26:
@@ -7333,18 +7326,18 @@ packages:
       vue: registry.npmmirror.com/vue/3.2.26
     dev: false
 
-  registry.npmmirror.com/vue-tsc/0.30.6_typescript@4.5.5:
-    resolution: {integrity: sha512-p+lemuubzFgwr1Az3pqQ70uvWraf36qTrKkC6C7anv5S1G3aPerc4eY5Rjz3eVDOkK94E+KeBHevvpZbmVwvHA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-tsc/download/vue-tsc-0.30.6.tgz}
-    id: registry.npmmirror.com/vue-tsc/0.30.6
+  registry.npmmirror.com/vue-tsc/0.31.1_typescript@4.5.5:
+    resolution: {integrity: sha512-pyLQG1fCA02is6NAL0uY5SKxDfjJRI167x89iRz0gWOB0tUng6NjJZicE+Oh+3ZuN/LJ3J/wKfdW7O+hnfhxdg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-tsc/download/vue-tsc-0.31.1.tgz}
+    id: registry.npmmirror.com/vue-tsc/0.31.1
     name: vue-tsc
-    version: 0.30.6
+    version: 0.31.1
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
       typescript: registry.npmmirror.com/typescript/4.5.5
-      vscode-vue-languageservice: registry.npmmirror.com/vscode-vue-languageservice/0.30.6
+      vscode-vue-languageservice: registry.npmmirror.com/vscode-vue-languageservice/0.31.1
     dev: true
 
   registry.npmmirror.com/vue/3.2.26:
diff --git a/src/components/business/LoadingEmptyWrapper/index.vue b/src/components/business/LoadingEmptyWrapper/index.vue
new file mode 100644
index 000000000..f66ae903e
--- /dev/null
+++ b/src/components/business/LoadingEmptyWrapper/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div v-if="reloadFlag" class="relative">
+    <slot></slot>
+    <div v-show="showPlaceholder" class="absolute-lt w-full h-full" :class="placeholderClass">
+      <div v-show="loading" class="absolute-center">
+        <n-spin :show="true" :size="loadingSize" />
+      </div>
+      <div v-show="isEmpty" class="absolute-center">
+        <div class="relative" :class="emptyNetworkClass">
+          <svg-empty-data class="text-primary" />
+          <p class="absolute-lb w-full text-center">{{ emptyDesc }}</p>
+        </div>
+      </div>
+      <div v-show="!network" class="absolute-center">
+        <div
+          class="relative"
+          :class="[{ 'cursor-pointer': showNetworkReload }, emptyNetworkClass]"
+          @click="handleReload"
+        >
+          <svg-network-error class="text-primary" />
+          <p class="absolute-lb w-full text-center">{{ networkErrorDesc }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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';
+
+interface Props {
+  /** 是否加载 */
+  loading: boolean;
+  /** 是否为空 */
+  empty?: boolean;
+  /** 加载图标的大小 */
+  loadingSize?: 'small' | 'medium' | 'large';
+  /** 中间占位符的class */
+  placeholderClass?: string;
+  /** 空数据描述文本 */
+  emptyDesc?: string;
+  /** 空数据和网络异常占位class */
+  emptyNetworkClass?: string;
+  /** 显示网络异常的重试点击按钮 */
+  showNetworkReload?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  empty: false,
+  loadingSize: 'medium',
+  placeholderClass: 'bg-white',
+  emptyDesc: '暂无数据',
+  emptyNetworkClass: 'w-320px h-320px text-16px text-[#666]',
+  showNetworkReload: false
+});
+
+// 网络状态
+const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine);
+const { bool: reloadFlag, setBool: setReload } = useBoolean(true);
+
+// 数据是否为空
+const isEmpty = computed(() => props.empty && !props.loading && network.value);
+
+const showPlaceholder = computed(() => props.loading || isEmpty.value || !network.value);
+
+const networkErrorDesc = computed(() =>
+  props.showNetworkReload ? `${NETWORK_ERROR_MSG}, 点击重试` : NETWORK_ERROR_MSG
+);
+
+function handleReload() {
+  if (!props.showNetworkReload) return;
+  setReload(false);
+  nextTick(() => {
+    setReload(true);
+  });
+}
+
+const stopHandle = watch(
+  () => props.loading,
+  newValue => {
+    // 结束加载判断一下网络状态
+    if (!newValue) {
+      setNetwork(window.navigator.onLine);
+    }
+  }
+);
+
+onUnmounted(() => {
+  stopHandle();
+});
+</script>
+<style scoped></style>
diff --git a/src/components/business/index.ts b/src/components/business/index.ts
index 19a8aa1b4..967d6e098 100644
--- a/src/components/business/index.ts
+++ b/src/components/business/index.ts
@@ -1,3 +1,4 @@
+import LoadingEmptyWrapper from './LoadingEmptyWrapper/index.vue';
 import LoginAgreement from './LoginAgreement/index.vue';
 
-export { LoginAgreement };
+export { LoadingEmptyWrapper, LoginAgreement };
diff --git a/src/typings/common/route.d.ts b/src/typings/common/route.d.ts
index 98031cd82..0a8555fab 100644
--- a/src/typings/common/route.d.ts
+++ b/src/typings/common/route.d.ts
@@ -22,15 +22,19 @@ declare namespace AuthRoute {
     | 'document_vite'
     | 'document_naive'
     | 'document_project'
+    | 'component'
+    | 'component_button'
+    | 'component_card'
+    | 'component_table'
+    | 'exception'
+    | 'exception_403'
+    | 'exception_404'
+    | 'exception_500'
     | 'multi-menu'
     | 'multi-menu_first'
     | 'multi-menu_first_second'
     | 'multi-menu_first_second-new'
     | 'multi-menu_first_second-new_third'
-    | 'exception'
-    | 'exception_403'
-    | 'exception_404'
-    | 'exception_500'
     | 'about';
 
   /** 路由的path */
@@ -55,20 +59,20 @@ declare namespace AuthRoute {
     title: string;
     /** 路由的动态路径 */
     dynamicPath?: PathToDynamicPath<'/login'>;
-    /** 作为单独路由的父级路由布局组件 */
+    /** 作为单级路由的父级路由布局组件 */
     singleLayout?: Extract<RouteComponent, 'basic' | 'blank'>;
     /** 需要登录权限 */
     requiresAuth?: boolean;
-    /** 哪些类型的用户有权限才能访问的路由 */
+    /** 哪些类型的用户有权限才能访问的路由(空的话则表示不需要权限) */
     permissions?: Auth.RoleType[];
     /** 缓存页面 */
     keepAlive?: boolean;
     /** 菜单和面包屑对应的图标 */
     icon?: string;
-    /** 外链链接 */
-    href?: string;
     /** 是否在菜单中隐藏 */
     hide?: boolean;
+    /** 外链链接 */
+    href?: string;
     /** 路由顺序，可用于菜单的排序 */
     order?: number;
     /** 表示是否是多级路由的中间级路由(用于转换路由数据时筛选多级路由的标识，定义路由时不用填写) */
@@ -102,14 +106,11 @@ declare namespace AuthRoute {
   /** 单独一级路由的key (单独路由需要添加一个父级路由用于应用布局组件) */
   type SingleRouteKey = Exclude<
     GetSingleRouteKey<RouteKey>,
-    GetMultiRouteParentKey<RouteKey> | 'root' | 'not-found-page'
+    GetRouteFirstParentKey<RouteKey> | 'root' | 'not-found-page'
   >;
   /** 单独路由父级路由key */
   type SingleRouteParentKey = `${SingleRouteKey}-parent`;
 
-  /** 单独路由path */
-  type SingleRoutePath = KeyToPath<SingleRouteKey>;
-
   /** 单独路由父级路由path */
   type SingleRouteParentPath = KeyToPath<SingleRouteParentKey>;
 
@@ -124,12 +125,12 @@ declare namespace AuthRoute {
     | `${Path}/:module(${string})`
     | `${Path}/:module(${string})?`;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  type GetSingleRouteKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer Right}`
-    ? never
-    : Key;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  type GetMultiRouteParentKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer Right}`
+  /** 获取一级路由(包括有子路由的一级路由) */
+  type GetSingleRouteKey<Key extends RouteKey> =
+    Key extends `${infer IgnoredLeft}${RouteSplitMark}${infer IgnoredRight}` ? never : Key;
+
+  /** 获取子路由的一级父路由 */
+  type GetRouteFirstParentKey<Key extends RouteKey> = Key extends `${infer Left}${RouteSplitMark}${infer IgnoredRight}`
     ? Left
     : never;
 }
diff --git a/src/utils/common/number.ts b/src/utils/common/number.ts
index 4bd5de495..1d23196ce 100644
--- a/src/utils/common/number.ts
+++ b/src/utils/common/number.ts
@@ -21,3 +21,14 @@ export function transformToTimeCountDown(seconds: number) {
   const second = fillZero(seconds - minuteNum * SECONDS_A_MINUTE);
   return `${minute}: ${second}`;
 }
+
+/**
+ * 获取指定整数范围内的随机整数
+ * @param start - 开始范围
+ * @param end - 结束范围
+ */
+export function getRandomInterger(end: number, start: number = 0) {
+  const range = end - start;
+  const random = Math.floor(Math.random() * range + start);
+  return random;
+}
diff --git a/src/utils/router/component.ts b/src/utils/router/component.ts
index b1e01da38..b76250bfd 100644
--- a/src/utils/router/component.ts
+++ b/src/utils/router/component.ts
@@ -12,9 +12,12 @@ import {
   DocumentVueNew,
   DocumentVite,
   DocumentNaive,
-  About,
+  ComponentButton,
+  ComponentCard,
+  ComponentTable,
   MultiMenuFirstSecond,
-  MultiMenuFirstSecondNewThird
+  MultiMenuFirstSecondNewThird,
+  About
 } from '@/views';
 import type { LayoutComponentName } from '@/interface';
 
@@ -39,6 +42,7 @@ type ViewComponentKey = Exclude<
   | 'dashboard'
   | 'document'
   | 'document_project'
+  | 'component'
   | 'multi-menu'
   | 'multi-menu_first'
   | 'multi-menu_first_second-new'
@@ -63,12 +67,15 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
     'document_vue-new',
     'document_vite',
     'document_naive',
-    'about',
-    'multi-menu_first_second',
-    'multi-menu_first_second-new_third',
+    'component_button',
+    'component_card',
+    'component_table',
     'exception_403',
     'exception_404',
     'exception_500',
+    'multi-menu_first_second',
+    'multi-menu_first_second-new_third',
+    'about',
     'not-found-page'
   ];
 
@@ -85,13 +92,16 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
     'document_vue-new': DocumentVueNew,
     document_vite: DocumentVite,
     document_naive: DocumentNaive,
-    'multi-menu_first_second': MultiMenuFirstSecond,
-    'multi-menu_first_second-new_third': MultiMenuFirstSecondNewThird,
-    'not-found-page': NotFound,
+    component_button: ComponentButton,
+    component_card: ComponentCard,
+    component_table: ComponentTable,
     exception_403: NoPermission,
     exception_404: NotFound,
     exception_500: ServiceError,
-    about: About
+    'multi-menu_first_second': MultiMenuFirstSecond,
+    'multi-menu_first_second-new_third': MultiMenuFirstSecondNewThird,
+    about: About,
+    'not-found-page': NotFound
   };
 
   return () => setViewComponentName(viewComponent[key], key) as Promise<Component>;
diff --git a/src/views/component/button/index.vue b/src/views/component/button/index.vue
new file mode 100644
index 000000000..72ea9dfd2
--- /dev/null
+++ b/src/views/component/button/index.vue
@@ -0,0 +1,576 @@
+<template>
+  <div>
+    <n-card title="按钮" class="h-full shadow-sm rounded-16px">
+      <n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
+        <n-grid-item v-for="item in buttonExample" :key="item.id">
+          <n-card :title="item.label" class="min-h-180px">
+            <p v-if="item.desc" class="pb-16px">{{ item.desc }}</p>
+            <n-space>
+              <n-button
+                v-for="button in item.buttons"
+                :key="button.id"
+                v-bind="button.props"
+                :style="`--icon-margin: ${button.props.circle ? 0 : 6}px`"
+              >
+                <template v-if="button.icon" #icon>
+                  <Icon :icon="button.icon" />
+                </template>
+                {{ button.label }}
+              </n-button>
+            </n-space>
+          </n-card>
+        </n-grid-item>
+        <n-grid-item class="h-180px">
+          <n-card title="加载中" class="h-full">
+            <p class="pb-16px">按钮有加载状态。</p>
+            <n-space>
+              <n-button :loading="loading" type="primary" @click="startLoading">开始加载</n-button>
+              <n-button @click="endLoading">取消加载</n-button>
+            </n-space>
+          </n-card>
+        </n-grid-item>
+      </n-grid>
+    </n-card>
+  </div>
+</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';
+
+interface ButtonDetail {
+  id: number;
+  props: ButtonProps & { href?: string; target?: string };
+  label?: string;
+  icon?: string;
+}
+
+interface ButtonExample {
+  id: number;
+  label: string;
+  buttons: ButtonDetail[];
+  desc?: string;
+}
+
+const { loading, startLoading, endLoading } = useLoading();
+
+const buttonExample: ButtonExample[] = [
+  {
+    id: 0,
+    label: '基础',
+    buttons: [
+      {
+        id: 0,
+        props: {},
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { type: 'error' },
+        label: 'Error'
+      }
+    ],
+    desc: '按钮的 type 分别为 default、primary、info、success、warning 和 error。'
+  },
+  {
+    id: 1,
+    label: '次要按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { strong: true, secondary: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { strong: true, secondary: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { strong: true, secondary: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { strong: true, secondary: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { strong: true, secondary: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { strong: true, secondary: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { strong: true, secondary: true, type: 'error' },
+        label: 'Error'
+      },
+      {
+        id: 7,
+        props: { strong: true, secondary: true, round: true },
+        label: 'Default'
+      },
+      {
+        id: 8,
+        props: { strong: true, secondary: true, round: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 9,
+        props: { strong: true, secondary: true, round: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 10,
+        props: { strong: true, secondary: true, round: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 11,
+        props: { strong: true, secondary: true, round: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 12,
+        props: { strong: true, secondary: true, round: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 13,
+        props: { strong: true, secondary: true, round: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: '次次要按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { tertiary: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { tertiary: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 2,
+        props: { tertiary: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 3,
+        props: { tertiary: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 4,
+        props: { tertiary: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 5,
+        props: { tertiary: true, type: 'error' },
+        label: 'Error'
+      },
+      {
+        id: 6,
+        props: { tertiary: true, round: true },
+        label: 'Default'
+      },
+      {
+        id: 7,
+        props: { tertiary: true, round: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 8,
+        props: { tertiary: true, round: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 9,
+        props: { tertiary: true, round: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 10,
+        props: { tertiary: true, round: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 11,
+        props: { tertiary: true, round: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 3,
+    label: '次次次要按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { quaternary: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { quaternary: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 2,
+        props: { quaternary: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 3,
+        props: { quaternary: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 4,
+        props: { quaternary: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 5,
+        props: { quaternary: true, type: 'error' },
+        label: 'Error'
+      },
+      {
+        id: 6,
+        props: { quaternary: true, round: true },
+        label: 'Default'
+      },
+      {
+        id: 7,
+        props: { quaternary: true, round: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 8,
+        props: { quaternary: true, round: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 9,
+        props: { quaternary: true, round: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 10,
+        props: { quaternary: true, round: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 11,
+        props: { quaternary: true, round: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 4,
+    label: '虚线按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { dashed: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { dashed: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { dashed: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { dashed: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { dashed: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { dashed: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { dashed: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 5,
+    label: '尺寸',
+    buttons: [
+      {
+        id: 0,
+        props: { size: 'tiny', strong: true },
+        label: '小小'
+      },
+      {
+        id: 1,
+        props: { size: 'small', strong: true },
+        label: '小'
+      },
+      {
+        id: 2,
+        props: { size: 'medium', strong: true },
+        label: '不小'
+      },
+      {
+        id: 3,
+        props: { size: 'large', strong: true },
+        label: '不不小'
+      }
+    ]
+  },
+  {
+    id: 6,
+    label: '文本按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { text: true },
+        label: '那车头依然吐着烟',
+        icon: 'mdi:train'
+      }
+    ]
+  },
+  {
+    id: 7,
+    label: '自定义标签按钮',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          text: true,
+          tag: 'a',
+          href: 'https://github.com/honghuangdc/soybean-admin',
+          target: '_blank',
+          type: 'primary'
+        },
+        label: 'soybean-admin'
+      }
+    ],
+    desc: '你可以把按钮渲染成不同的标签，比如 a标签 。'
+  },
+  {
+    id: 8,
+    label: '按钮禁用',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          disabled: true
+        },
+        label: '不许点'
+      }
+    ],
+    desc: '按钮可以被禁用'
+  },
+  {
+    id: 9,
+    label: '图标按钮',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          secondary: true,
+          strong: true
+        },
+        label: '+100元',
+        icon: 'mdi:cash-100'
+      },
+      {
+        id: 0,
+        props: {
+          iconPlacement: 'right',
+          secondary: true,
+          strong: true
+        },
+        label: '+100元',
+        icon: 'mdi:cash-100'
+      }
+    ],
+    desc: '在按钮上使用图标。'
+  },
+  {
+    id: 10,
+    label: '不同形状按钮',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          circle: true
+        },
+        icon: 'mdi:cash-100'
+      },
+      {
+        id: 1,
+        props: {
+          round: true
+        },
+        label: '圆角'
+      },
+      {
+        id: 2,
+        props: {},
+        label: '方'
+      }
+    ],
+    desc: '按钮拥有不同的形状。'
+  },
+  {
+    id: 11,
+    label: '透明背景按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { ghost: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { ghost: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { ghost: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { ghost: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { ghost: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { ghost: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { ghost: true, type: 'error' },
+        label: 'Error'
+      }
+    ],
+    desc: 'Ghost 按钮有透明的背景。'
+  },
+  {
+    id: 12,
+    label: '自定义颜色',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          color: '#8a2be2'
+        },
+        label: '#8a2be2',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 1,
+        props: {
+          color: '#ff69b4'
+        },
+        label: '#ff69b4',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 2,
+        props: {
+          color: '#8a2be2',
+          ghost: true
+        },
+        label: '#8a2be2',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 3,
+        props: {
+          color: '#ff69b4',
+          ghost: true
+        },
+        label: '#ff69b4',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 4,
+        props: {
+          color: '#8a2be2',
+          text: true
+        },
+        label: '#8a2be2',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 5,
+        props: {
+          color: '#ff69b4',
+          text: true
+        },
+        label: '#ff69b4',
+        icon: 'ic:baseline-color-lens'
+      }
+    ],
+    desc: '这两个颜色看起来像毒蘑菇。'
+  }
+];
+</script>
+<style scoped></style>
diff --git a/src/views/component/card/index.vue b/src/views/component/card/index.vue
new file mode 100644
index 000000000..8270a7536
--- /dev/null
+++ b/src/views/component/card/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <n-card title="卡片" class="h-full shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <n-card title="基本用法">
+          <p class="pb-16px">基础卡片</p>
+          <n-card title="卡片">卡片内容</n-card>
+        </n-card>
+        <n-card title="尺寸">
+          <p class="pb-16px">卡片有 small、medium、large、huge 尺寸。</p>
+          <n-space vertical>
+            <n-card title="小卡片" size="small">卡片内容</n-card>
+            <n-card title="中卡片" size="medium">卡片内容</n-card>
+            <n-card title="大卡片" size="large">卡片内容</n-card>
+            <n-card title="超大卡片" size="huge">卡片内容</n-card>
+          </n-space>
+        </n-card>
+        <n-card title="文本按钮">
+          <p class="pb-16px">
+            content 和 footer 可以被 hard 或 soft 分段，action 可以被分段。分段分割线会在区域的上方出现。
+          </p>
+          <n-card
+            title="卡片分段示例"
+            :segmented="{
+              content: true,
+              footer: 'soft'
+            }"
+          >
+            <template #header-extra>#header-extra</template>
+            卡片内容
+            <template #footer>#footer</template>
+            <template #action>#action</template>
+          </n-card>
+        </n-card>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NSpace } from 'naive-ui';
+</script>
+<style scoped></style>
diff --git a/src/views/component/index.ts b/src/views/component/index.ts
new file mode 100644
index 000000000..c5a65a552
--- /dev/null
+++ b/src/views/component/index.ts
@@ -0,0 +1,5 @@
+const ComponentButton = () => import('./button/index.vue');
+const ComponentCard = () => import('./card/index.vue');
+const ComponentTable = () => import('./table/index.vue');
+
+export { ComponentButton, ComponentCard, ComponentTable };
diff --git a/src/views/component/table/index.vue b/src/views/component/table/index.vue
new file mode 100644
index 000000000..a07b48384
--- /dev/null
+++ b/src/views/component/table/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <n-card title="表格" class="h-full shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <n-space>
+          <n-button @click="getDataSource">有数据</n-button>
+          <n-button @click="getEmptyDataSource">空数据</n-button>
+        </n-space>
+        <loading-empty-wrapper class="h-480px" :loading="loading" :empty="empty">
+          <n-data-table :columns="columns" :data="dataSource" :flex-height="true" class="h-480px" />
+        </loading-empty-wrapper>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<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';
+import { getRandomInterger } from '@/utils';
+
+interface DataSource {
+  name: string;
+  age: number;
+  address: string;
+}
+
+const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
+
+const columns: DataTableColumn[] = [
+  {
+    title: 'Name',
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: 'Age',
+    key: 'age'
+  },
+  {
+    title: 'Address',
+    key: 'address'
+  }
+];
+
+const dataSource = ref<DataSource[]>([]);
+
+function createDataSource(): DataSource[] {
+  return Array(100)
+    .fill(1)
+    .map((_item, index) => {
+      return {
+        name: `Name${index}`,
+        age: getRandomInterger(30, 20),
+        address: '中国'
+      };
+    });
+}
+
+function getDataSource() {
+  startLoading();
+  setTimeout(() => {
+    dataSource.value = createDataSource();
+    endLoading();
+    setEmpty(!dataSource.value.length);
+  }, 1000);
+}
+
+function getEmptyDataSource() {
+  startLoading();
+  setTimeout(() => {
+    dataSource.value = [];
+    endLoading();
+    setEmpty(!dataSource.value.length);
+  }, 1000);
+}
+
+onMounted(() => {
+  getDataSource();
+});
+</script>
+<style scoped></style>
diff --git a/src/views/index.ts b/src/views/index.ts
index 37310ebe9..0c7bec7d3 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -1,5 +1,6 @@
 export * from './system';
 export * from './dashboard';
 export * from './document';
+export * from './component';
 export * from './about';
 export * from './multi-menu';