diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index bf2e7648..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-shamefully-hoist=true
diff --git a/components.d.ts b/components.d.ts
index 8c041ab0..48887033 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    BanConfig: typeof import('./src/components/misc/banList/BanConfig.vue')['default']
+    BanList: typeof import('./src/components/misc/banList/BanList.vue')['default']
     CensorConfig: typeof import('./src/components/mod/censor/CensorConfig.vue')['default']
     CensorFiles: typeof import('./src/components/mod/censor/CensorFiles.vue')['default']
     CensorLog: typeof import('./src/components/mod/censor/CensorLog.vue')['default']
@@ -94,7 +96,7 @@ declare module 'vue' {
     PageJs: typeof import('./src/components/mod/PageJs.vue')['default']
     PageMiscAdvancedSettings: typeof import('./src/components/misc/PageMiscAdvancedSettings.vue')['default']
     PageMiscBackup: typeof import('./src/components/misc/PageMiscBackup.vue')['default']
-    PageMiscBanList: typeof import('./src/components/misc/PageMiscBanList.vue')['default']
+    PageMiscBan: typeof import('./src/components/misc/PageMiscBan.vue')['default']
     PageMiscDeck: typeof import('./src/components/mod/PageMiscDeck.vue')['default']
     PageMiscGroup: typeof import('./src/components/misc/PageMiscGroup.vue')['default']
     PageMiscSettings: typeof import('./src/components/misc/PageMiscSettings.vue')['default']
diff --git a/package.json b/package.json
index f230234c..96ab4631 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "type": "module",
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
+    "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^10.11.0",
     "asmcrypto.js": "^2.3.2",
     "axios": "^1.7.2",
@@ -21,13 +22,14 @@
     "clipboard": "^2.0.11",
     "codemirror": "^6.0.1",
     "cron-parser": "^4.9.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "element-plus": "^2.7.7",
     "filesize": "^10.1.4",
+    "highlight.js": "^11.10.0",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
     "randomcolor": "^0.6.2",
-    "vue": "^3.4.31",
+    "vue": "^3.4.33",
     "vue-diff": "^1.2.4",
     "vue-router": "^4.4.0",
     "vuedraggable": "^4.1.0"
@@ -35,22 +37,24 @@
   "devDependencies": {
     "@iconify-json/bi": "^1.1.23",
     "@iconify-json/carbon": "^1.1.36",
+    "@rushstack/eslint-patch": "^1.10.3",
+    "@tsconfig/node20": "^20.1.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
     "@types/randomcolor": "^0.5.9",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vue/compiler-sfc": "^3.4.31",
+    "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.27.0",
     "iconify-icon": "^1.0.8",
     "postcss": "^8.4.39",
-    "postcss-nested": "^6.0.1",
-    "tailwindcss": "^3.4.5",
+    "postcss-nested": "^6.2.0",
+    "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3",
     "unplugin-auto-import": "^0.17.8",
     "unplugin-icons": "^0.17.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4fb1679..6722b1c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,12 @@ importers:
       '@codemirror/lang-javascript':
         specifier: ^6.2.2
         version: 6.2.2
+      '@element-plus/icons-vue':
+        specifier: ^2.3.1
+        version: 2.3.1(vue@3.4.33(typescript@5.5.3))
       '@vueuse/core':
         specifier: ^10.11.0
-        version: 10.11.0(vue@3.4.31(typescript@5.5.3))
+        version: 10.11.0(vue@3.4.33(typescript@5.5.3))
       asmcrypto.js:
         specifier: ^2.3.2
         version: 2.3.2
@@ -33,35 +36,38 @@ importers:
         specifier: ^4.9.0
         version: 4.9.0
       dayjs:
-        specifier: ^1.11.11
-        version: 1.11.11
+        specifier: ^1.11.12
+        version: 1.11.12
       element-plus:
         specifier: ^2.7.7
-        version: 2.7.7(vue@3.4.31(typescript@5.5.3))
+        version: 2.7.7(vue@3.4.33(typescript@5.5.3))
       filesize:
         specifier: ^10.1.4
         version: 10.1.4
+      highlight.js:
+        specifier: ^11.10.0
+        version: 11.10.0
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
       pinia:
         specifier: ^2.1.7
-        version: 2.1.7(typescript@5.5.3)(vue@3.4.31(typescript@5.5.3))
+        version: 2.1.7(typescript@5.5.3)(vue@3.4.33(typescript@5.5.3))
       randomcolor:
         specifier: ^0.6.2
         version: 0.6.2
       vue:
-        specifier: ^3.4.31
-        version: 3.4.31(typescript@5.5.3)
+        specifier: ^3.4.33
+        version: 3.4.33(typescript@5.5.3)
       vue-diff:
         specifier: ^1.2.4
-        version: 1.2.4(vue@3.4.31(typescript@5.5.3))
+        version: 1.2.4(vue@3.4.33(typescript@5.5.3))
       vue-router:
         specifier: ^4.4.0
-        version: 4.4.0(vue@3.4.31(typescript@5.5.3))
+        version: 4.4.0(vue@3.4.33(typescript@5.5.3))
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.4.31(typescript@5.5.3))
+        version: 4.1.0(vue@3.4.33(typescript@5.5.3))
     devDependencies:
       '@iconify-json/bi':
         specifier: ^1.1.23
@@ -69,12 +75,18 @@ importers:
       '@iconify-json/carbon':
         specifier: ^1.1.36
         version: 1.1.36
+      '@rushstack/eslint-patch':
+        specifier: ^1.10.3
+        version: 1.10.3
+      '@tsconfig/node20':
+        specifier: ^20.1.4
+        version: 20.1.4
       '@types/lodash-es':
         specifier: ^4.17.12
         version: 4.17.12
       '@types/node':
-        specifier: ^20.14.10
-        version: 20.14.10
+        specifier: ^20.14.11
+        version: 20.14.11
       '@types/randomcolor':
         specifier: ^0.5.9
         version: 0.5.9
@@ -86,16 +98,16 @@ importers:
         version: 6.21.0(eslint@8.57.0)(typescript@5.5.3)
       '@vitejs/plugin-legacy':
         specifier: ^5.4.1
-        version: 5.4.1(terser@5.31.2)(vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2))
+        version: 5.4.1(terser@5.31.2)(vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2))
       '@vitejs/plugin-vue':
         specifier: ^5.0.5
-        version: 5.0.5(vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2))(vue@3.4.31(typescript@5.5.3))
+        version: 5.0.5(vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2))(vue@3.4.33(typescript@5.5.3))
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.0.0
-        version: 4.0.0(vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2))(vue@3.4.31(typescript@5.5.3))
-      '@vue/compiler-sfc':
-        specifier: ^3.4.31
-        version: 3.4.31
+        version: 4.0.0(vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2))(vue@3.4.33(typescript@5.5.3))
+      '@vue/tsconfig':
+        specifier: ^0.5.1
+        version: 0.5.1
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.39)
@@ -112,26 +124,26 @@ importers:
         specifier: ^8.4.39
         version: 8.4.39
       postcss-nested:
-        specifier: ^6.0.1
-        version: 6.0.1(postcss@8.4.39)
+        specifier: ^6.2.0
+        version: 6.2.0(postcss@8.4.39)
       tailwindcss:
-        specifier: ^3.4.5
-        version: 3.4.5
+        specifier: ^3.4.6
+        version: 3.4.6
       typescript:
         specifier: ^5.5.3
         version: 5.5.3
       unplugin-auto-import:
         specifier: ^0.17.8
-        version: 0.17.8(@vueuse/core@10.11.0(vue@3.4.31(typescript@5.5.3)))(rollup@4.18.1)
+        version: 0.17.8(@vueuse/core@10.11.0(vue@3.4.33(typescript@5.5.3)))(rollup@4.18.1)
       unplugin-icons:
         specifier: ^0.17.4
-        version: 0.17.4(@vue/compiler-sfc@3.4.31)(vue-template-compiler@2.7.16)
+        version: 0.17.4(@vue/compiler-sfc@3.4.33)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.24.8)(rollup@4.18.1)(vue@3.4.31(typescript@5.5.3))
+        version: 0.26.0(@babel/parser@7.24.8)(rollup@4.18.1)(vue@3.4.33(typescript@5.5.3))
       vite:
         specifier: ^5.3.4
-        version: 5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2)
+        version: 5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2)
       vue-tsc:
         specifier: ^2.0.26
         version: 2.0.26(typescript@5.5.3)
@@ -1120,9 +1132,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rushstack/eslint-patch@1.10.3':
+    resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
+
   '@sxzz/popperjs-es@2.11.7':
     resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
 
+  '@tsconfig/node20@20.1.4':
+    resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -1135,8 +1153,8 @@ packages:
   '@types/lodash@4.17.7':
     resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
 
-  '@types/node@20.14.10':
-    resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==}
+  '@types/node@20.14.11':
+    resolution: {integrity: sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==}
 
   '@types/randomcolor@0.5.9':
     resolution: {integrity: sha512-k58cfpkK15AKn1m+oRd9nh5BnuiowhbyvBBdAzcddtARMr3xRzP0VlFaAKovSG6N6Knx08EicjPlOMzDejerrQ==}
@@ -1263,15 +1281,27 @@ packages:
   '@vue/compiler-core@3.4.31':
     resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==}
 
+  '@vue/compiler-core@3.4.33':
+    resolution: {integrity: sha512-MoIREbkdPQlnGfSKDMgzTqzqx5nmEjIc0ydLVYlTACGBsfvOJ4tHSbZXKVF536n6fB+0eZaGEOqsGThPpdvF5A==}
+
   '@vue/compiler-dom@3.4.31':
     resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==}
 
+  '@vue/compiler-dom@3.4.33':
+    resolution: {integrity: sha512-GzB8fxEHKw0gGet5BKlpfXEqoBnzSVWwMnT+dc25wE7pFEfrU/QsvjZMP9rD4iVXHBBoemTct8mN0GJEI6ZX5A==}
+
   '@vue/compiler-sfc@3.4.31':
     resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==}
 
+  '@vue/compiler-sfc@3.4.33':
+    resolution: {integrity: sha512-7rk7Vbkn21xMwIUpHQR4hCVejwE6nvhBOiDgoBcR03qvGqRKA7dCBSsHZhwhYUsmjlbJ7OtD5UFIyhP6BY+c8A==}
+
   '@vue/compiler-ssr@3.4.31':
     resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
 
+  '@vue/compiler-ssr@3.4.33':
+    resolution: {integrity: sha512-0WveC9Ai+eT/1b6LCV5IfsufBZ0HP7pSSTdDjcuW302tTEgoBw8rHVHKPbGUtzGReUFCRXbv6zQDDgucnV2WzQ==}
+
   '@vue/devtools-api@6.6.3':
     resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
 
@@ -1283,23 +1313,29 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.4.31':
-    resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==}
+  '@vue/reactivity@3.4.33':
+    resolution: {integrity: sha512-B24QIelahDbyHipBgbUItQblbd4w5HpG3KccL+YkGyo3maXyS253FzcTR3pSz739OTphmzlxP7JxEMWBpewilA==}
 
-  '@vue/runtime-core@3.4.31':
-    resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==}
+  '@vue/runtime-core@3.4.33':
+    resolution: {integrity: sha512-6wavthExzT4iAxpe8q37/rDmf44nyOJGISJPxCi9YsQO+8w9v0gLCFLfH5TzD1V1AYrTAdiF4Y1cgUmP68jP6w==}
 
-  '@vue/runtime-dom@3.4.31':
-    resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==}
+  '@vue/runtime-dom@3.4.33':
+    resolution: {integrity: sha512-iHsMCUSFJ+4z432Bn9kZzHX+zOXa6+iw36DaVRmKYZpPt9jW9riF32SxNwB124i61kp9+AZtheQ/mKoJLerAaQ==}
 
-  '@vue/server-renderer@3.4.31':
-    resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==}
+  '@vue/server-renderer@3.4.33':
+    resolution: {integrity: sha512-jTH0d6gQcaYideFP/k0WdEu8PpRS9MF8d0b6SfZzNi+ap972pZ0TNIeTaESwdOtdY0XPVj54XEJ6K0wXxir4fw==}
     peerDependencies:
-      vue: 3.4.31
+      vue: 3.4.33
 
   '@vue/shared@3.4.31':
     resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
 
+  '@vue/shared@3.4.33':
+    resolution: {integrity: sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA==}
+
+  '@vue/tsconfig@0.5.1':
+    resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
+
   '@vueuse/core@10.11.0':
     resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
 
@@ -1561,8 +1597,8 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  dayjs@1.11.11:
-    resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
+  dayjs@1.11.12:
+    resolution: {integrity: sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==}
 
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
@@ -2209,8 +2245,8 @@ packages:
       ts-node:
         optional: true
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
@@ -2402,8 +2438,8 @@ packages:
   systemjs@6.15.1:
     resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==}
 
-  tailwindcss@3.4.5:
-    resolution: {integrity: sha512-DlTxttYcogpDfx3tf/8jfnma1nfAYi2cBUYV2YNoPPecwmO3YGiFlOX9D8tGAu+EDF38ryBzvrDKU/BLMsUwbw==}
+  tailwindcss@3.4.6:
+    resolution: {integrity: sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -2606,8 +2642,8 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue@3.4.31:
-    resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
+  vue@3.4.33:
+    resolution: {integrity: sha512-VdMCWQOummbhctl4QFMcW6eNtXHsFyDlX60O/tsSQuCcuDOnJ1qPOhhVla65Niece7xq/P2zyZReIO5mP+LGTQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -3528,9 +3564,9 @@ snapshots:
 
   '@ctrl/tinycolor@3.6.1': {}
 
-  '@element-plus/icons-vue@2.3.1(vue@3.4.31(typescript@5.5.3))':
+  '@element-plus/icons-vue@2.3.1(vue@3.4.33(typescript@5.5.3))':
     dependencies:
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
 
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
@@ -3787,8 +3823,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.18.1':
     optional: true
 
+  '@rushstack/eslint-patch@1.10.3': {}
+
   '@sxzz/popperjs-es@2.11.7': {}
 
+  '@tsconfig/node20@20.1.4': {}
+
   '@types/estree@1.0.5': {}
 
   '@types/json-schema@7.0.15': {}
@@ -3799,7 +3839,7 @@ snapshots:
 
   '@types/lodash@4.17.7': {}
 
-  '@types/node@20.14.10':
+  '@types/node@20.14.11':
     dependencies:
       undici-types: 5.26.5
 
@@ -3901,7 +3941,7 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-legacy@5.4.1(terser@5.31.2)(vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2))':
+  '@vitejs/plugin-legacy@5.4.1(terser@5.31.2)(vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2))':
     dependencies:
       '@babel/core': 7.24.9
       '@babel/preset-env': 7.24.8(@babel/core@7.24.9)
@@ -3912,24 +3952,24 @@ snapshots:
       regenerator-runtime: 0.14.1
       systemjs: 6.15.1
       terser: 5.31.2
-      vite: 5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2)
+      vite: 5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2))(vue@3.4.31(typescript@5.5.3))':
+  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2))(vue@3.4.33(typescript@5.5.3))':
     dependencies:
       '@babel/core': 7.24.9
       '@babel/plugin-transform-typescript': 7.24.8(@babel/core@7.24.9)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.9)
-      vite: 5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2)
-      vue: 3.4.31(typescript@5.5.3)
+      vite: 5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2)
+      vue: 3.4.33(typescript@5.5.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.0.5(vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2))(vue@3.4.31(typescript@5.5.3))':
+  '@vitejs/plugin-vue@5.0.5(vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2))(vue@3.4.33(typescript@5.5.3))':
     dependencies:
-      vite: 5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2)
-      vue: 3.4.31(typescript@5.5.3)
+      vite: 5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2)
+      vue: 3.4.33(typescript@5.5.3)
 
   '@volar/language-core@2.4.0-alpha.16':
     dependencies:
@@ -3980,11 +4020,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
+  '@vue/compiler-core@3.4.33':
+    dependencies:
+      '@babel/parser': 7.24.8
+      '@vue/shared': 3.4.33
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
   '@vue/compiler-dom@3.4.31':
     dependencies:
       '@vue/compiler-core': 3.4.31
       '@vue/shared': 3.4.31
 
+  '@vue/compiler-dom@3.4.33':
+    dependencies:
+      '@vue/compiler-core': 3.4.33
+      '@vue/shared': 3.4.33
+
   '@vue/compiler-sfc@3.4.31':
     dependencies:
       '@babel/parser': 7.24.8
@@ -3997,11 +4050,28 @@ snapshots:
       postcss: 8.4.39
       source-map-js: 1.2.0
 
+  '@vue/compiler-sfc@3.4.33':
+    dependencies:
+      '@babel/parser': 7.24.8
+      '@vue/compiler-core': 3.4.33
+      '@vue/compiler-dom': 3.4.33
+      '@vue/compiler-ssr': 3.4.33
+      '@vue/shared': 3.4.33
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.39
+      source-map-js: 1.2.0
+
   '@vue/compiler-ssr@3.4.31':
     dependencies:
       '@vue/compiler-dom': 3.4.31
       '@vue/shared': 3.4.31
 
+  '@vue/compiler-ssr@3.4.33':
+    dependencies:
+      '@vue/compiler-dom': 3.4.33
+      '@vue/shared': 3.4.33
+
   '@vue/devtools-api@6.6.3': {}
 
   '@vue/language-core@2.0.26(typescript@5.5.3)':
@@ -4017,55 +4087,59 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.3
 
-  '@vue/reactivity@3.4.31':
+  '@vue/reactivity@3.4.33':
     dependencies:
-      '@vue/shared': 3.4.31
+      '@vue/shared': 3.4.33
 
-  '@vue/runtime-core@3.4.31':
+  '@vue/runtime-core@3.4.33':
     dependencies:
-      '@vue/reactivity': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/reactivity': 3.4.33
+      '@vue/shared': 3.4.33
 
-  '@vue/runtime-dom@3.4.31':
+  '@vue/runtime-dom@3.4.33':
     dependencies:
-      '@vue/reactivity': 3.4.31
-      '@vue/runtime-core': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/reactivity': 3.4.33
+      '@vue/runtime-core': 3.4.33
+      '@vue/shared': 3.4.33
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.4.31(vue@3.4.31(typescript@5.5.3))':
+  '@vue/server-renderer@3.4.33(vue@3.4.33(typescript@5.5.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.4.31
-      '@vue/shared': 3.4.31
-      vue: 3.4.31(typescript@5.5.3)
+      '@vue/compiler-ssr': 3.4.33
+      '@vue/shared': 3.4.33
+      vue: 3.4.33(typescript@5.5.3)
 
   '@vue/shared@3.4.31': {}
 
-  '@vueuse/core@10.11.0(vue@3.4.31(typescript@5.5.3))':
+  '@vue/shared@3.4.33': {}
+
+  '@vue/tsconfig@0.5.1': {}
+
+  '@vueuse/core@10.11.0(vue@3.4.33(typescript@5.5.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.0
-      '@vueuse/shared': 10.11.0(vue@3.4.31(typescript@5.5.3))
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/shared': 10.11.0(vue@3.4.33(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@8.9.4(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/core@8.9.4(vue@3.4.33(typescript@5.5.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.14
       '@vueuse/metadata': 8.9.4
-      '@vueuse/shared': 8.9.4(vue@3.4.31(typescript@5.5.3))
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/shared': 8.9.4(vue@3.4.33(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     optionalDependencies:
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
 
-  '@vueuse/core@9.13.0(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/core@9.13.0(vue@3.4.33(typescript@5.5.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.4.31(typescript@5.5.3))
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/shared': 9.13.0(vue@3.4.33(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4076,22 +4150,22 @@ snapshots:
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@10.11.0(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/shared@10.11.0(vue@3.4.33(typescript@5.5.3))':
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@8.9.4(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/shared@8.9.4(vue@3.4.33(typescript@5.5.3))':
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     optionalDependencies:
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
 
-  '@vueuse/shared@9.13.0(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/shared@9.13.0(vue@3.4.33(typescript@5.5.3))':
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4321,7 +4395,7 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  dayjs@1.11.11: {}
+  dayjs@1.11.12: {}
 
   de-indent@1.0.2: {}
 
@@ -4353,24 +4427,24 @@ snapshots:
 
   electron-to-chromium@1.4.828: {}
 
-  element-plus@2.7.7(vue@3.4.31(typescript@5.5.3)):
+  element-plus@2.7.7(vue@3.4.33(typescript@5.5.3)):
     dependencies:
       '@ctrl/tinycolor': 3.6.1
-      '@element-plus/icons-vue': 2.3.1(vue@3.4.31(typescript@5.5.3))
+      '@element-plus/icons-vue': 2.3.1(vue@3.4.33(typescript@5.5.3))
       '@floating-ui/dom': 1.6.7
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.17.7
       '@types/lodash-es': 4.17.12
-      '@vueuse/core': 9.13.0(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/core': 9.13.0(vue@3.4.33(typescript@5.5.3))
       async-validator: 4.2.5
-      dayjs: 1.11.11
+      dayjs: 1.11.12
       escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -4909,11 +4983,11 @@ snapshots:
 
   pify@2.3.0: {}
 
-  pinia@2.1.7(typescript@5.5.3)(vue@3.4.31(typescript@5.5.3)):
+  pinia@2.1.7(typescript@5.5.3)(vue@3.4.33(typescript@5.5.3)):
     dependencies:
       '@vue/devtools-api': 6.6.3
-      vue: 3.4.31(typescript@5.5.3)
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      vue: 3.4.33(typescript@5.5.3)
+      vue-demi: 0.14.8(vue@3.4.33(typescript@5.5.3))
     optionalDependencies:
       typescript: 5.5.3
 
@@ -4944,7 +5018,7 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.39
 
-  postcss-nested@6.0.1(postcss@8.4.39):
+  postcss-nested@6.2.0(postcss@8.4.39):
     dependencies:
       postcss: 8.4.39
       postcss-selector-parser: 6.1.1
@@ -5137,7 +5211,7 @@ snapshots:
 
   systemjs@6.15.1: {}
 
-  tailwindcss@3.4.5:
+  tailwindcss@3.4.6:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -5157,7 +5231,7 @@ snapshots:
       postcss-import: 15.1.0(postcss@8.4.39)
       postcss-js: 4.0.1(postcss@8.4.39)
       postcss-load-config: 4.0.2(postcss@8.4.39)
-      postcss-nested: 6.0.1(postcss@8.4.39)
+      postcss-nested: 6.2.0(postcss@8.4.39)
       postcss-selector-parser: 6.1.1
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -5236,7 +5310,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-auto-import@0.17.8(@vueuse/core@10.11.0(vue@3.4.31(typescript@5.5.3)))(rollup@4.18.1):
+  unplugin-auto-import@0.17.8(@vueuse/core@10.11.0(vue@3.4.33(typescript@5.5.3)))(rollup@4.18.1):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.18.1)
@@ -5247,11 +5321,11 @@ snapshots:
       unimport: 3.8.0(rollup@4.18.1)
       unplugin: 1.11.0
     optionalDependencies:
-      '@vueuse/core': 10.11.0(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/core': 10.11.0(vue@3.4.33(typescript@5.5.3))
     transitivePeerDependencies:
       - rollup
 
-  unplugin-icons@0.17.4(@vue/compiler-sfc@3.4.31)(vue-template-compiler@2.7.16):
+  unplugin-icons@0.17.4(@vue/compiler-sfc@3.4.33)(vue-template-compiler@2.7.16):
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.10
@@ -5261,12 +5335,12 @@ snapshots:
       local-pkg: 0.5.0
       unplugin: 1.11.0
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.31
+      '@vue/compiler-sfc': 3.4.33
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.26.0(@babel/parser@7.24.8)(rollup@4.18.1)(vue@3.4.31(typescript@5.5.3)):
+  unplugin-vue-components@0.26.0(@babel/parser@7.24.8)(rollup@4.18.1)(vue@3.4.33(typescript@5.5.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.18.1)
@@ -5278,7 +5352,7 @@ snapshots:
       minimatch: 9.0.5
       resolve: 1.22.8
       unplugin: 1.11.0
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
     optionalDependencies:
       '@babel/parser': 7.24.8
     transitivePeerDependencies:
@@ -5304,26 +5378,26 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vite@5.3.4(@types/node@20.14.10)(sass@1.77.8)(terser@5.31.2):
+  vite@5.3.4(@types/node@20.14.11)(sass@1.77.8)(terser@5.31.2):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.39
       rollup: 4.18.1
     optionalDependencies:
-      '@types/node': 20.14.10
+      '@types/node': 20.14.11
       fsevents: 2.3.3
       sass: 1.77.8
       terser: 5.31.2
 
   vscode-uri@3.0.8: {}
 
-  vue-demi@0.14.8(vue@3.4.31(typescript@5.5.3)):
+  vue-demi@0.14.8(vue@3.4.33(typescript@5.5.3)):
     dependencies:
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
 
-  vue-diff@1.2.4(vue@3.4.31(typescript@5.5.3)):
+  vue-diff@1.2.4(vue@3.4.33(typescript@5.5.3)):
     dependencies:
-      '@vueuse/core': 8.9.4(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/core': 8.9.4(vue@3.4.33(typescript@5.5.3))
       diff-match-patch: 1.0.5
       highlight.js: 11.10.0
     transitivePeerDependencies:
@@ -5343,10 +5417,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.4.0(vue@3.4.31(typescript@5.5.3)):
+  vue-router@4.4.0(vue@3.4.33(typescript@5.5.3)):
     dependencies:
       '@vue/devtools-api': 6.6.3
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -5360,20 +5434,20 @@ snapshots:
       semver: 7.6.2
       typescript: 5.5.3
 
-  vue@3.4.31(typescript@5.5.3):
+  vue@3.4.33(typescript@5.5.3):
     dependencies:
-      '@vue/compiler-dom': 3.4.31
-      '@vue/compiler-sfc': 3.4.31
-      '@vue/runtime-dom': 3.4.31
-      '@vue/server-renderer': 3.4.31(vue@3.4.31(typescript@5.5.3))
-      '@vue/shared': 3.4.31
+      '@vue/compiler-dom': 3.4.33
+      '@vue/compiler-sfc': 3.4.33
+      '@vue/runtime-dom': 3.4.33
+      '@vue/server-renderer': 3.4.33(vue@3.4.33(typescript@5.5.3))
+      '@vue/shared': 3.4.33
     optionalDependencies:
       typescript: 5.5.3
 
-  vuedraggable@4.1.0(vue@3.4.31(typescript@5.5.3)):
+  vuedraggable@4.1.0(vue@3.4.33(typescript@5.5.3)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.4.33(typescript@5.5.3)
 
   w3c-keyname@2.2.8: {}
 
diff --git a/src/Main.vue b/src/Main.vue
index b8e6943f..72bd193c 100644
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -71,7 +71,7 @@
   </el-container>
 
   <el-drawer v-model="drawerMenu" direction="ltr" :show-close="false"
-             size="50%" class="drawer-menu">
+             size="50%" class="drawer-menu bg-gray-600">
     <template #header>
       <div class="text-white flex items-center justify-between">
         <el-space :v-show="store.canAccess" direction="vertical" alignment="flex-start" :size="0">
diff --git a/src/components/misc/PageMiscAdvancedSettings.vue b/src/components/misc/PageMiscAdvancedSettings.vue
index 58d3972c..17bb6bde 100644
--- a/src/components/misc/PageMiscAdvancedSettings.vue
+++ b/src/components/misc/PageMiscAdvancedSettings.vue
@@ -88,7 +88,7 @@
 import {QuestionFilled} from "@element-plus/icons-vue";
 import {useStore} from "~/store";
 import {cloneDeep} from "lodash-es";
-import {AdvancedConfig} from "~/type";
+import type {AdvancedConfig} from "~/type.d.ts";
 
 const emit = defineEmits(['update:advanced-settings-show'])
 
diff --git a/src/components/misc/PageMiscBan.vue b/src/components/misc/PageMiscBan.vue
new file mode 100644
index 00000000..d00818e0
--- /dev/null
+++ b/src/components/misc/PageMiscBan.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const mode = ref<string>('list')
+
+</script>
+
+<template>
+  <el-tabs v-model="mode" :stretch="true">
+    <el-tab-pane label="黑白名单" name="list">
+      <ban-list />
+    </el-tab-pane>
+    <el-tab-pane label="拉黑设置" name="config">
+      <ban-config />
+    </el-tab-pane>
+  </el-tabs>
+
+</template>
+
+<style scoped lang="css">
+
+</style>
diff --git a/src/components/misc/banList/BanConfig.vue b/src/components/misc/banList/BanConfig.vue
new file mode 100644
index 00000000..0857230a
--- /dev/null
+++ b/src/components/misc/banList/BanConfig.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { DocumentChecked } from "@element-plus/icons-vue";
+import { useStore } from "~/store";
+import type { BanConfig } from "~/type";
+
+const store = useStore()
+
+const banConfig = ref<BanConfig>({} as BanConfig)
+const modified = ref<boolean>(false)
+
+const banConfigSave = async () => {
+  await store.banConfigSet(banConfig.value)
+  await configGet()
+  ElMessage.success('已保存')
+  modified.value = false
+  await nextTick(() => {
+    modified.value = false
+  })
+}
+
+const configGet = async () => {
+  banConfig.value = await store.banConfigGet()
+}
+
+onBeforeMount(async () => {
+  await configGet()
+  modified.value = false
+})
+
+watch(banConfig, () => {
+  modified.value = true
+}, {deep: true});
+
+</script>
+
+<template>
+  <header>
+    <el-button type="primary" :icon="DocumentChecked" @click="banConfigSave">保存设置</el-button>
+    <el-text style="margin-left: 1rem" v-if="modified" type="danger" size="large" tag="strong">
+      内容已修改，不要忘记保存！
+    </el-text>
+  </header>
+
+  <h4>基本设置</h4>
+  <el-space wrap>
+    <el-text>黑名单惩罚：</el-text>
+    <el-checkbox v-model="banConfig.banBehaviorRefuseReply">拒绝回复</el-checkbox>
+    <el-checkbox v-model="banConfig.banBehaviorRefuseInvite">拒绝邀请</el-checkbox>
+    <el-checkbox v-model="banConfig.banBehaviorQuitLastPlace">退出事发群</el-checkbox>
+    <!-- <div>自动拉黑时长(分钟): <el-input style="max-width: 5rem;" type="number" v-model="banConfig.autoBanMinutes"></el-input></div> -->
+    <el-checkbox v-model="banConfig.banBehaviorQuitPlaceImmediately">使用时立即退出群</el-checkbox>
+    <el-checkbox v-model="banConfig.banBehaviorQuitIfAdmin">使用者为管理员立即退群，为普通群员进行通告</el-checkbox>
+  </el-space>
+
+  <h4>怒气值设置</h4>
+  <div class="mt-4 mb-6">
+    <el-text type="warning" tag="p">说明：海豹的黑名单使用积分制，每当用户做出恶意行为，其积分上涨一定数值，到达阈值后自动进入黑名单。会通知邀请者、通知列表、事发群（如果可能）。</el-text>
+  </div>
+  <el-form size="small">
+    <el-form-item label="警告阈值">
+      <el-input-number v-model="banConfig.thresholdWarn" :min="0" :step="1" step-strictly></el-input-number>
+    </el-form-item>
+    <el-form-item label="拉黑阈值">
+      <el-input-number v-model="banConfig.thresholdBan" :min="0" :step="1" step-strictly></el-input-number>
+    </el-form-item>
+
+    <el-form-item class="mt-10" label="禁言增加">
+      <el-input-number v-model="banConfig.scoreGroupMuted" :min="0" :step="1" step-strictly></el-input-number>
+    </el-form-item>
+    <el-form-item label="踢出增加">
+      <el-input-number v-model="banConfig.scoreGroupKicked" :min="0" :step="1" step-strictly></el-input-number>
+    </el-form-item>
+    <el-form-item label="刷屏增加">
+      <el-input-number v-model="banConfig.scoreTooManyCommand" :min="0" :step="1" step-strictly></el-input-number>
+    </el-form-item>
+    <el-form-item label="每分钟下降">
+      <el-input-number v-model="banConfig.scoreReducePerMinute" :min="0" :step="1" step-strictly></el-input-number>
+    </el-form-item>
+
+    <el-form-item class="mt-10" label="群组连带责任">
+      <el-input-number v-model="banConfig.jointScorePercentOfGroup" :min="0" :max="1" :step="0.1"></el-input-number>
+    </el-form-item>
+    <el-form-item label="邀请人连带责任">
+      <el-input-number v-model="banConfig.jointScorePercentOfInviter" :min="0" :max="1" :step="0.1"></el-input-number>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped lang="css">
+
+</style>
\ No newline at end of file
diff --git a/src/components/misc/PageMiscBanList.vue b/src/components/misc/banList/BanList.vue
similarity index 50%
rename from src/components/misc/PageMiscBanList.vue
rename to src/components/misc/banList/BanList.vue
index 95172dc7..b86d4b8a 100644
--- a/src/components/misc/PageMiscBanList.vue
+++ b/src/components/misc/banList/BanList.vue
@@ -1,192 +1,26 @@
-<template>
-  <h2>黑白名单</h2>
-  <div>
-    <!-- <div>用户列表</div> -->
-    <!-- <div>
-      <div>昵称</div>
-      <div>用户ID</div>
-      <div>事发地点</div>
-      <div>原因</div>
-      <div>怒气值</div>
-      <div>到期时间</div>
-    </div>
-    <div>群组列表</div> -->
-
-    <el-collapse class="tip setting-tips">
-      <el-collapse-item name="1">
-        <template #title>
-          <el-text tag="strong">设置选项</el-text>
-        </template>
-
-        <h4>基本设置</h4>
-        <el-space wrap>
-          <el-text>黑名单惩罚：</el-text>
-          <el-checkbox v-model="banConfig.banBehaviorRefuseReply">拒绝回复</el-checkbox>
-          <el-checkbox v-model="banConfig.banBehaviorRefuseInvite">拒绝邀请</el-checkbox>
-          <el-checkbox v-model="banConfig.banBehaviorQuitLastPlace">退出事发群</el-checkbox>
-          <!-- <div>自动拉黑时长(分钟): <el-input style="max-width: 5rem;" type="number" v-model="banConfig.autoBanMinutes"></el-input></div> -->
-          <el-checkbox v-model="banConfig.banBehaviorQuitPlaceImmediately">使用时立即退出群</el-checkbox>
-          <el-checkbox v-model="banConfig.banBehaviorQuitIfAdmin">使用者为管理员立即退群，为普通群员进行通告</el-checkbox>
-        </el-space>
-
-        <h4>怒气值设置</h4>
-        <div style="margin-bottom: 1rem">
-          <el-text size="small" type="warning" tag="p">说明：海豹的黑名单使用积分制，每当用户做出恶意行为，其积分上涨一定数值，到达阈值后自动进入黑名单。会通知邀请者、通知列表、事发群（如果可能）。</el-text>
-        </div>
-        <el-form size="small">
-          <el-form-item label="警告阈值">
-            <el-input-number v-model="banConfig.thresholdWarn" :min="0" :step="1" step-strictly></el-input-number>
-          </el-form-item>
-          <el-form-item label="拉黑阈值">
-            <el-input-number v-model="banConfig.thresholdBan" :min="0" :step="1" step-strictly></el-input-number>
-          </el-form-item>
-          <el-divider />
-          <el-form-item label="禁言增加">
-            <el-input-number v-model="banConfig.scoreGroupMuted" :min="0" :step="1" step-strictly></el-input-number>
-          </el-form-item>
-          <el-form-item label="踢出增加">
-            <el-input-number v-model="banConfig.scoreGroupKicked" :min="0" :step="1" step-strictly></el-input-number>
-          </el-form-item>
-          <el-form-item label="刷屏增加">
-            <el-input-number v-model="banConfig.scoreTooManyCommand" :min="0" :step="1" step-strictly></el-input-number>
-          </el-form-item>
-          <el-form-item label="每分钟下降">
-            <el-input-number v-model="banConfig.scoreReducePerMinute" :min="0" :step="1" step-strictly></el-input-number>
-          </el-form-item>
-          <el-divider />
-          <el-form-item label="群组连带责任">
-            <el-input-number v-model="banConfig.jointScorePercentOfGroup" :min="0" :max="1" :step="0.1"></el-input-number>
-          </el-form-item>
-          <el-form-item label="邀请人连带责任">
-            <el-input-number v-model="banConfig.jointScorePercentOfInviter" :min="0" :max="1" :step="0.1"></el-input-number>
-          </el-form-item>
-        </el-form>
-        <el-button type="primary" :icon="DocumentChecked" @click="banConfigSave">保存设置</el-button>
-      </el-collapse-item>
-    </el-collapse>
-
-  </div>
-
-  <header style="display: flex; justify-content: space-between; flex-wrap: wrap;">
-    <h3>列表</h3>
-
-    <el-space>
-      <el-button type="success" :icon="Plus" plain @click="dialogAddShow = true">添加</el-button>
-      <el-upload action="" multiple accept="application/json,.json" :show-file-list="false"
-                 :before-upload="beforeUpload" style="display: flex; align-items: center;">
-        <el-button type="success" :icon="Upload" plain>导入</el-button>
-      </el-upload>
-      <el-button type="primary" :icon="Download" plain tag="a" target="_blank"
-                 :href="`${urlBase}/sd-api/banconfig/export`" style="text-decoration: none;">
-        导出
-      </el-button>
-    </el-space>
-    <!-- <div>
-      <span style="margin-right: 1rem;">平台:</span>
-      <el-checkbox v-model="showPlatformQQ">QQ</el-checkbox>
-      <el-checkbox v-model="showPlatformQQCH">QQ频道</el-checkbox>
-    </div> -->
-  </header>
-  <div style="margin: 0.5rem 0;">
-    <span style="margin-right: 0.5rem;">级别：</span>
-    <el-checkbox v-model="showBanned">拉黑</el-checkbox>
-    <el-checkbox v-model="showWarn">警告</el-checkbox>
-    <el-checkbox v-model="showTrusted">信任</el-checkbox>
-    <el-checkbox v-model="showOthers">其它</el-checkbox>
-  </div>
-  <!-- <div>
-    <span style="margin-right: 1rem;">其他:</span>
-    <el-checkbox v-model="orderByTimeDesc">按最后使用时间降序</el-checkbox>
-  </div> -->
-  <div style="margin: 1rem 0;">
-    <span style="margin-right: 0.5rem;">搜索：</span>
-    <el-input v-model="searchBy" style="max-width: 15rem;" placeholder="请输入帐号或名字的一部分"></el-input>
-  </div>
-
-  <main style="margin-top: 2rem;">
-    <el-space fill size="small">
-      <el-card v-for="i, index in groupItems" :key="i.ID" shadow="hover">
-        <template #header>
-          <div class="ban-item-header">
-            <el-space alignment="center">
-              <el-tag v-if="i.rankText === '禁止'" type="danger" disable-transitions>{{ i.rankText }}</el-tag>
-              <el-tag v-else-if="i.rankText === '警告'" type="warning" disable-transitions>{{ i.rankText }}</el-tag>
-              <el-tag v-else-if="i.rankText === '信任'" type="success" disable-transitions>{{ i.rankText }}</el-tag>
-              <el-tag v-else disable-transitions>{{ i.rankText }}</el-tag>
-              <el-space size="small" alignment="center" wrap>
-                <el-text size="large" tag="strong">{{ i.ID }}</el-text>
-                <el-text>「{{ i.name }}」</el-text>
-                <el-text size="small" tag="em">怒气值：{{ i.score }}</el-text>
-              </el-space>
-            </el-space>
-            <el-space>
-              <el-button :icon="Delete" type="danger" size="small" plain @click="deleteOne(i, index)">删除</el-button>
-            </el-space>
-          </div>
-        </template>
-        <el-space style="display: block;" direction="vertical">
-          <div v-for="(j, index) in i.reasons" :key="index">
-            <el-space size="small" wrap>
-              <el-tooltip raw-content :content="dayjs.unix(i.times[index]).format('YYYY-MM-DD HH:mm:ssZ[Z]')">
-                <el-tag size="small" type="info" disable-transitions>{{ dayjs.unix(i.times[index]).fromNow() }}</el-tag>
-              </el-tooltip>
-              <el-text>在&lt;{{ i.places[index] }}>，原因：「{{j}}」</el-text>
-            </el-space>
-          </div>
-        </el-space>
-      </el-card>
-    </el-space>
-  </main>
-
-  <el-dialog v-model="dialogAddShow" title="添加用户/群组" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" class="the-dialog">
-    <el-form label-width="70px">
-      <el-form-item label="用户ID" required>
-        <el-input v-model="addData.id" placeholder="必须为 QQ:12345 或 QQ-Group:12345 格式"></el-input>
-      </el-form-item>
-      <el-form-item label="名称">
-        <el-input v-model="addData.name" placeholder="自动"></el-input>
-      </el-form-item>
-      <el-form-item label="原因">
-        <el-input v-model="addData.reason" placeholder="骰主后台设置"></el-input>
-      </el-form-item>
-      <el-form-item label="身份">
-        <el-select v-model="addData.rank">
-          <el-option
-              v-for="item in [{'label': '禁用', value: -30}, {'label': '信任', value: 30}]"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-          <el-button @click="dialogAddShow = false">取消</el-button>
-          <el-button type="success" @click="doAdd">添加</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import type {UploadUserFile} from "element-plus";
-import { useStore } from '~/store'
-import { urlBase } from '~/backend'
+<script setup lang="ts">
+import type { UploadUserFile } from "element-plus";
 import {
-  DocumentChecked,
   Download,
   Delete,
-  Plus, Upload,
+  Plus,
+  Upload,
 } from '@element-plus/icons-vue'
-import * as dayjs from 'dayjs'
+import { useStore } from '~/store'
+import { urlBase } from '~/backend'
+import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 
 dayjs.extend(relativeTime)
 
 const store = useStore()
 
-const groupList = ref<any>({})
+const recordList = ref<any[]>([])
+const recordPage = ref({
+  no: 1,
+  total: 0,
+  pageSize: 10,
+})
 
 const showBanned = ref(true)
 const showWarn = ref(true)
@@ -200,7 +34,6 @@ banRankText.set(-10, '警告')
 banRankText.set(+30, '信任')
 banRankText.set(0, '常规')
 
-
 const addData = ref<{ id: string, rank: number, name:string, reason: string }>({
   id: '',
   rank: -30,
@@ -218,11 +51,10 @@ const doAdd = async () => {
 
 const searchBy = ref('')
 
-const groupItems = computed<any[]>(() => {
-  if (groupList.value) {
-    // const groupListItems = cloneDeep(groupList.value.items)
+const filteredRecordList = computed<any[]>(() => {
+  if (recordList.value) {
     let items = []
-    for (let [k, _v] of Object.entries(groupList.value)) {
+    for (let [k, _v] of Object.entries(recordList.value)) {
       const v = _v as any
       let ok = false
       if (v.rank === -30 && showBanned.value) {
@@ -255,34 +87,22 @@ const groupItems = computed<any[]>(() => {
       if (ok) items.push(v)
     }
 
-    // items = sortBy(items, ['recentCommandTime'])
-    // if (orderByTimeDesc.value) {
-    //   items = items.reverse()
-    // }
     return items
   }
   return []
 })
 
-const banConfigSave = async () => {
-  for (let [k, v] of Object.entries(banConfig.value)) {
-    let vVal = parseFloat(v as any)
-    if (!isNaN(vVal)) {
-      banConfig.value[k] = vVal
-    }
-  }
-  await store.banConfigSet(banConfig.value)
-  await configGet()
-  ElMessage.success('已保存')
-}
+const groupItems = computed(() => {
+  const start = (recordPage.value.no - 1) * recordPage.value.pageSize;
+  const end = start + recordPage.value.pageSize;
+  return filteredRecordList.value.slice(start, end);
+})
 
 const refreshList = async () => {
   const lst = await store.banConfigMapGet()
-  groupList.value = lst
-}
-
-const configGet = async () => {
-  banConfig.value = await store.banConfigGet()
+  recordList.value = lst
+  recordPage.value.total = lst.length
+  recordPage.value.no = 1
 }
 
 const deleteOne = async (i: any, index: number) => {
@@ -302,8 +122,6 @@ const deleteOne = async (i: any, index: number) => {
   }
 }
 
-const banConfig = ref<any>({})
-
 const beforeUpload = async (file: UploadUserFile) => {
   let fd = new FormData()
   fd.append('file', file as unknown as Blob)
@@ -320,41 +138,112 @@ const beforeUpload = async (file: UploadUserFile) => {
 }
 
 onBeforeMount(async () => {
-  await configGet()
   await refreshList()
 })
 </script>
 
-<style scoped>
-.setting-tips {
-  background-color: #f3f5f7;
-}
+<template>
+  <header class="flex flex-wrap-reverse gap-y-4 justify-between">
+    <el-space>
+      <el-text size="large">搜索：</el-text>
+      <el-input v-model="searchBy" class="w-64" placeholder="请输入帐号或名字的一部分"></el-input>
+    </el-space>
 
-.setting-tips :deep(.el-collapse-item__header) {
-  background-color: #f3f5f7;
-}
+    <el-space>
+      <el-button type="success" :icon="Plus" @click="dialogAddShow = true">添加</el-button>
+      <el-upload action="" multiple accept="application/json,.json" :show-file-list="false"
+                 :before-upload="beforeUpload" style="display: flex; align-items: center;">
+        <el-button type="success" :icon="Upload" plain>导入</el-button>
+      </el-upload>
+      <el-button type="primary" :icon="Download" plain tag="a" target="_blank"
+                 :href="`${urlBase}/sd-api/banconfig/export`" style="text-decoration: none;">
+        导出
+      </el-button>
+    </el-space>
+  </header>
 
-.setting-tips :deep(.el-collapse-item__wrap) {
-  background-color: #f3f5f7;
-}
-</style>
+  <el-space class="my-2">
+    <el-text size="large">级别：</el-text>
+    <el-checkbox v-model="showBanned">拉黑</el-checkbox>
+    <el-checkbox v-model="showWarn">警告</el-checkbox>
+    <el-checkbox v-model="showTrusted">信任</el-checkbox>
+    <el-checkbox v-model="showOthers">其它</el-checkbox>
+  </el-space>
 
-<style lang="css">
-@media screen and (max-width: 700px) {
-  .bak-item {
-    flex-direction: column;
-    & > span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
+  <main class="mt-4">
+    <el-space :fill="true" class="w-full">
+      <el-card v-for="(i, index) in groupItems" :key="i.ID" shadow="hover" class="w-full">
+        <template #header>
+          <div class="flex flex-wrap gap-4 justify-between">
+            <el-space alignment="center">
+              <el-tag v-if="i.rankText === '禁止'" type="danger" disable-transitions>{{ i.rankText }}</el-tag>
+              <el-tag v-else-if="i.rankText === '警告'" type="warning" disable-transitions>{{ i.rankText }}</el-tag>
+              <el-tag v-else-if="i.rankText === '信任'" type="success" disable-transitions>{{ i.rankText }}</el-tag>
+              <el-tag v-else disable-transitions>{{ i.rankText }}</el-tag>
+              <el-space size="small" alignment="center" wrap>
+                <el-text size="large" tag="strong">{{ i.ID }}</el-text>
+                <el-text>「{{ i.name }}」</el-text>
+                <el-text size="small" tag="em">怒气值：{{ i.score }}</el-text>
+              </el-space>
+            </el-space>
+            <el-space>
+              <el-button :icon="Delete" type="danger" size="small" plain @click="deleteOne(i, index)">删除</el-button>
+            </el-space>
+          </div>
+        </template>
+        <el-space style="display: block;" direction="vertical">
+          <div v-for="(j, index) in i.reasons" :key="index">
+            <el-space size="small" wrap>
+              <el-tooltip raw-content :content="dayjs.unix(i.times[index]).format('YYYY-MM-DD HH:mm:ssZ[Z]')">
+                <el-tag size="small" type="info" disable-transitions>{{ dayjs.unix(i.times[index]).fromNow() }}</el-tag>
+              </el-tooltip>
+              <el-text>在&lt;{{ i.places[index] }}>，原因：「{{j}}」</el-text>
+            </el-space>
+          </div>
+        </el-space>
+      </el-card>
+    </el-space>
+  </main>
 
-.ban-item-header {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  justify-content: space-between;
-}
-</style>
+  <footer class="mt-4 flex justify-center">
+    <el-pagination class="bg-[#f3f5f7]" type="small" :pager-count=3
+                   layout="prev, pager, next, total" background hide-on-single-page
+                   v-model:current-page="recordPage.no"
+                   v-model:page-size="recordPage.pageSize"
+                   :total="filteredRecordList.length"/>
+  </footer>
+
+  <el-dialog v-model="dialogAddShow" title="添加用户/群组" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" class="the-dialog">
+    <el-form label-width="6rem">
+      <el-form-item label="用户ID" required>
+        <el-input v-model="addData.id" placeholder="必须为 QQ:12345 或 QQ-Group:12345 格式"></el-input>
+      </el-form-item>
+      <el-form-item label="名称">
+        <el-input v-model="addData.name" placeholder="自动"></el-input>
+      </el-form-item>
+      <el-form-item label="原因">
+        <el-input v-model="addData.reason" placeholder="骰主后台设置"></el-input>
+      </el-form-item>
+      <el-form-item label="身份">
+        <el-radio-group v-model="addData.rank">
+          <el-radio
+              v-for="item in [{'label': '禁用', value: -30}, {'label': '信任', value: 30}]"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+          <el-button @click="dialogAddShow = false">取消</el-button>
+          <el-button type="success" @click="doAdd">添加</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="css">
+
+</style>
\ No newline at end of file
diff --git a/src/components/mod/PageHelpDoc.vue b/src/components/mod/PageHelpDoc.vue
index d1dd6b00..551d1ea2 100644
--- a/src/components/mod/PageHelpDoc.vue
+++ b/src/components/mod/PageHelpDoc.vue
@@ -159,7 +159,7 @@ import type { FormRules, FormInstance, ElTree } from 'element-plus';
 import { useStore } from '~/store';
 import { Delete, Plus, Refresh, Setting, Upload } from '@element-plus/icons-vue'
 import { trim } from 'lodash-es';
-import {HelpDoc, HelpTextItem, HelpTextItemQuery} from "~/type";
+import type {HelpDoc, HelpTextItem, HelpTextItemQuery} from "~/type.d.ts";
 
 interface Group {
   key: string,
diff --git a/src/components/mod/PageJs.vue b/src/components/mod/PageJs.vue
index 7de5a129..e932f7e5 100644
--- a/src/components/mod/PageJs.vue
+++ b/src/components/mod/PageJs.vue
@@ -385,7 +385,7 @@ import * as dayjs from 'dayjs'
 import {basicSetup, EditorView} from "codemirror"
 import {javascript} from "@codemirror/lang-javascript"
 import {isEqual, size} from "lodash-es";
-import {JsPluginConfig, JsPluginConfigItem, JsScriptInfo} from "~/type";
+import type {JsPluginConfig, JsPluginConfigItem, JsScriptInfo} from "~/type.d.ts";
 
 const store = useStore()
 const jsEnable = ref(false)
diff --git a/src/components/utils/resource-render.vue b/src/components/utils/resource-render.vue
index 1f66d9ea..6c66acf4 100644
--- a/src/components/utils/resource-render.vue
+++ b/src/components/utils/resource-render.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import {Resource, useStore} from "~/store";
+import type {Resource} from "~/store";
+import {useStore} from "~/store";
 import {Microphone, Picture, VideoCamera} from '@element-plus/icons-vue'
 
 const store = useStore()
diff --git a/src/router/index.ts b/src/router/index.ts
index b522a675..1e2c2531 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,7 +14,7 @@ import PageResource from '~/components/tool/PageResource.vue';
 import PageMiscSettings from '~/components/misc/PageMiscSettings.vue';
 import PageMiscBackup from '~/components/misc/PageMiscBackup.vue';
 import PageMiscGroup from '~/components/misc/PageMiscGroup.vue';
-import PageMiscBanList from '~/components/misc/PageMiscBanList.vue';
+import PageMiscBan from '~/components/misc/PageMiscBan.vue';
 import PageMiscAdvancedSettings from '~/components/misc/PageMiscAdvancedSettings.vue';
 
 const router = createRouter({
@@ -47,7 +47,7 @@ const router = createRouter({
         { path: 'base-setting', component: PageMiscSettings },
         { path: 'backup', component: PageMiscBackup },
         { path: 'group', component: PageMiscGroup },
-        { path: 'ban', component: PageMiscBanList },
+        { path: 'ban', component: PageMiscBan },
         { path: 'advanced-setting', component: PageMiscAdvancedSettings },
       ]
     },
diff --git a/src/store/index.ts b/src/store/index.ts
index 9724ad55..1f6cb509 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,13 +1,14 @@
 import { backend } from '~/backend'
 
-import { addImConnectionForm } from '~/components/PageConnectInfoItems.vue'
+import type { addImConnectionForm } from '~/components/PageConnectInfoItems.vue'
 import type {
   AdvancedConfig,
+  BanConfig,
   HelpDoc,
   HelpTextItem,
   HelpTextItemQuery,
   JsScriptInfo,
-} from "~/type";
+} from "~/type.d.ts";
 
 export enum goCqHttpStateCode {
   Init = 0,
@@ -519,8 +520,8 @@ export const useStore = defineStore('main', {
 
     // ban list相关
     async banConfigGet() {
-      const info = await backend.get(urlPrefix + '/banconfig/get')
-      return info as any
+      const info: BanConfig = await backend.get(urlPrefix + '/banconfig/get')
+      return info
     },
 
     async banConfigSet(data: any) {
diff --git a/src/type.d.ts b/src/type.d.ts
index e5d84917..f7f8b928 100644
--- a/src/type.d.ts
+++ b/src/type.d.ts
@@ -1,3 +1,5 @@
+import type BanConfig from "./components/misc/banList/BanConfig.vue";
+
 export interface JsScriptInfo {
   name: string;
   enable: boolean;
@@ -79,4 +81,21 @@ export interface AdvancedConfig {
   storyLogBackendUrl: string,
   storyLogApiVersion: string,
   storyLogBackendToken: string,
-}
\ No newline at end of file
+}
+
+export interface BanConfig {
+  banBehaviorRefuseReply: boolean,
+  banBehaviorRefuseInvite: boolean,
+  banBehaviorQuitLastPlace: boolean,
+  banBehaviorQuitPlaceImmediately: boolean,
+  banBehaviorQuitIfAdmin: boolean,
+
+  thresholdWarn: number,
+  thresholdBan: number,
+  scoreGroupMuted: number,
+  scoreGroupKicked: number,
+  scoreTooManyCommand: number,
+  scoreReducePerMinute: number,
+  jointScorePercentOfGroup: number,
+  jointScorePercentOfInviter: number,
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 00000000..e5d861c3
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "src/**/*.tsx",
+    "tailwind.config.ts",
+    "auto-imports.d.ts",
+    "components.d.ts"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ]
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 8b53d71c..66b5e570 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,31 +1,11 @@
 {
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "baseUrl": ".",
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "jsxImportSource": "vue",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "paths": {
-      "~/*": ["src/*"]
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
     },
-    "skipLibCheck": true
-  },
-  "include": [
-    "vite.config.*",
-    "tailwind.config.*",
-    "components.d.ts",
-    "auto-imports.d.ts",
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
+    {
+      "path": "./tsconfig.app.json"
+    }
   ]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..f0940630
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}