diff --git a/webui/.vscode/settings.json b/webui/.vscode/settings.json
index 1fb0955e..f1e54e09 100644
--- a/webui/.vscode/settings.json
+++ b/webui/.vscode/settings.json
@@ -2,5 +2,6 @@
   "i18n-ally.localesPaths": ["src/i18n"],
   "commentTranslate.targetLanguage": "zh-CN",
   "i18n-ally.sourceLanguage": "en",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/webui/package.json b/webui/package.json
index 6b1b588f..c341a596 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -55,8 +55,6 @@
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.62.1",
     "storybook": "^7.0.12",
     "typescript": "^4.9.5",
diff --git a/webui/pnpm-lock.yaml b/webui/pnpm-lock.yaml
index 06bffb23..5d93545b 100644
--- a/webui/pnpm-lock.yaml
+++ b/webui/pnpm-lock.yaml
@@ -112,12 +112,6 @@ devDependencies:
   prettier:
     specifier: ^2.8.8
     version: 2.8.8
-  react:
-    specifier: ^18.2.0
-    version: 18.2.0
-  react-dom:
-    specifier: ^18.2.0
-    version: 18.2.0(react@18.2.0)
   sass:
     specifier: ^1.62.1
     version: 1.62.1
@@ -418,6 +412,20 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /@babel/helper-compilation-targets@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.21.9
+      '@babel/core': 7.24.0
+      '@babel/helper-validator-option': 7.21.0
+      browserslist: 4.21.5
+      lru-cache: 5.1.1
+      semver: 6.3.0
+    dev: true
+
   /@babel/helper-compilation-targets@7.23.6:
     resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
     engines: {node: '>=6.9.0'}
@@ -449,6 +457,26 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helper-create-class-features-plugin@7.21.8(@babel/core@7.24.0):
+    resolution: {integrity: sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.21.5
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-member-expression-to-functions': 7.21.5
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-replace-supers': 7.21.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/helper-split-export-declaration': 7.18.6
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helper-create-class-features-plugin@7.24.0(@babel/core@7.24.0):
     resolution: {integrity: sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==}
     engines: {node: '>=6.9.0'}
@@ -479,6 +507,18 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /@babel/helper-create-regexp-features-plugin@7.21.8(@babel/core@7.24.0):
+    resolution: {integrity: sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-annotate-as-pure': 7.18.6
+      regexpu-core: 5.3.2
+      semver: 6.3.0
+    dev: true
+
   /@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==}
     peerDependencies:
@@ -495,6 +535,22 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==}
+    peerDependencies:
+      '@babel/core': ^7.4.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+      debug: 4.3.4
+      lodash.debounce: 4.0.8
+      resolve: 1.22.2
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helper-environment-visitor@7.21.5:
     resolution: {integrity: sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==}
     engines: {node: '>=6.9.0'}
@@ -632,6 +688,21 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helper-remap-async-to-generator@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.21.5
+      '@babel/helper-wrap-function': 7.20.5
+      '@babel/types': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/helper-replace-supers@7.21.5:
     resolution: {integrity: sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==}
     engines: {node: '>=6.9.0'}
@@ -805,6 +876,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.20.7(@babel/core@7.21.8):
     resolution: {integrity: sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==}
     engines: {node: '>=6.9.0'}
@@ -817,6 +898,18 @@ packages:
       '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.20.7(@babel/core@7.24.0):
+    resolution: {integrity: sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.21.8):
     resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
     engines: {node: '>=6.9.0'}
@@ -832,6 +925,21 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.0):
+    resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-environment-visitor': 7.21.5
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-remap-async-to-generator': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
     engines: {node: '>=6.9.0'}
@@ -845,6 +953,19 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-class-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==}
     engines: {node: '>=6.9.0'}
@@ -859,6 +980,20 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-class-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==}
     engines: {node: '>=6.9.0'}
@@ -870,6 +1005,17 @@ packages:
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.21.8):
     resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==}
     engines: {node: '>=6.9.0'}
@@ -881,6 +1027,17 @@ packages:
       '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
     engines: {node: '>=6.9.0'}
@@ -892,6 +1049,17 @@ packages:
       '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.21.8):
     resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
     engines: {node: '>=6.9.0'}
@@ -903,6 +1071,17 @@ packages:
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.24.0):
+    resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
     engines: {node: '>=6.9.0'}
@@ -914,6 +1093,17 @@ packages:
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
     engines: {node: '>=6.9.0'}
@@ -925,6 +1115,17 @@ packages:
       '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.21.8):
     resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
     engines: {node: '>=6.9.0'}
@@ -939,6 +1140,20 @@ packages:
       '@babel/plugin-transform-parameters': 7.21.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.0):
+    resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.21.9
+      '@babel/core': 7.24.0
+      '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-parameters': 7.21.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
     engines: {node: '>=6.9.0'}
@@ -950,6 +1165,17 @@ packages:
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
     engines: {node: '>=6.9.0'}
@@ -962,6 +1188,18 @@ packages:
       '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.21.8)
     dev: true
 
+  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.0)
+    dev: true
+
   /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
     engines: {node: '>=6.9.0'}
@@ -975,6 +1213,19 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-class-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-private-property-in-object@7.21.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==}
     engines: {node: '>=6.9.0'}
@@ -990,6 +1241,21 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-proposal-private-property-in-object@7.21.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==}
     engines: {node: '>=4'}
@@ -1001,6 +1267,17 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-regexp-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
@@ -1010,6 +1287,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.0):
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.21.8):
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
     peerDependencies:
@@ -1019,6 +1305,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.0):
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
     engines: {node: '>=6.9.0'}
@@ -1029,6 +1324,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
@@ -1038,6 +1343,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
@@ -1047,6 +1361,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-flow@7.21.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-l9xd3N+XG4fZRxEP3vXdK6RW7vN1Uf5dxzRC/09wV86wqZ/YYQooBIGNsiRdfNR3/q2/5pPzV4B54J/9ctX5jw==}
     engines: {node: '>=6.9.0'}
@@ -1067,6 +1390,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-import-assertions@7.20.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
@@ -1076,6 +1409,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.0):
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     peerDependencies:
@@ -1085,6 +1427,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==}
     engines: {node: '>=6.9.0'}
@@ -1114,6 +1465,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.0):
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
@@ -1123,6 +1483,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
@@ -1132,6 +1501,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.0):
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
@@ -1141,6 +1519,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
@@ -1150,6 +1537,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
@@ -1159,6 +1555,15 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
     engines: {node: '>=6.9.0'}
@@ -1169,6 +1574,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
     engines: {node: '>=6.9.0'}
@@ -1179,6 +1594,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==}
     engines: {node: '>=6.9.0'}
@@ -1209,6 +1634,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-arrow-functions@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-async-to-generator@7.20.7(@babel/core@7.21.8):
     resolution: {integrity: sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==}
     engines: {node: '>=6.9.0'}
@@ -1223,6 +1658,20 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-async-to-generator@7.20.7(@babel/core@7.24.0):
+    resolution: {integrity: sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-module-imports': 7.21.4
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-remap-async-to-generator': 7.18.9(@babel/core@7.24.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-block-scoped-functions@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==}
     engines: {node: '>=6.9.0'}
@@ -1233,6 +1682,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-block-scoped-functions@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-block-scoping@7.21.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==}
     engines: {node: '>=6.9.0'}
@@ -1243,6 +1702,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-block-scoping@7.21.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-classes@7.21.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==}
     engines: {node: '>=6.9.0'}
@@ -1263,6 +1732,26 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-classes@7.21.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.24.0)
+      '@babel/helper-environment-visitor': 7.21.5
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-replace-supers': 7.21.5
+      '@babel/helper-split-export-declaration': 7.18.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-computed-properties@7.21.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==}
     engines: {node: '>=6.9.0'}
@@ -1274,6 +1763,17 @@ packages:
       '@babel/template': 7.21.9
     dev: true
 
+  /@babel/plugin-transform-computed-properties@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/template': 7.21.9
+    dev: true
+
   /@babel/plugin-transform-destructuring@7.21.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==}
     engines: {node: '>=6.9.0'}
@@ -1284,6 +1784,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-destructuring@7.21.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==}
     engines: {node: '>=6.9.0'}
@@ -1295,6 +1805,17 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-regexp-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-duplicate-keys@7.18.9(@babel/core@7.21.8):
     resolution: {integrity: sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==}
     engines: {node: '>=6.9.0'}
@@ -1305,6 +1826,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-duplicate-keys@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-exponentiation-operator@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==}
     engines: {node: '>=6.9.0'}
@@ -1316,6 +1847,17 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-exponentiation-operator@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.21.5
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-flow-strip-types@7.21.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-FlFA2Mj87a6sDkW4gfGrQQqwY/dLlBAyJa2dJEZ+FHXUVHBflO2wyKvg+OOEzXfrKYIa4HWl0mgmbCzt0cMb7w==}
     engines: {node: '>=6.9.0'}
@@ -1337,6 +1879,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-for-of@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-function-name@7.18.9(@babel/core@7.21.8):
     resolution: {integrity: sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==}
     engines: {node: '>=6.9.0'}
@@ -1349,6 +1901,18 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-function-name@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.24.0)
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-literals@7.18.9(@babel/core@7.21.8):
     resolution: {integrity: sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==}
     engines: {node: '>=6.9.0'}
@@ -1359,6 +1923,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-literals@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-member-expression-literals@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==}
     engines: {node: '>=6.9.0'}
@@ -1369,6 +1943,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-member-expression-literals@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-modules-amd@7.20.11(@babel/core@7.21.8):
     resolution: {integrity: sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==}
     engines: {node: '>=6.9.0'}
@@ -1382,6 +1966,19 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-modules-amd@7.20.11(@babel/core@7.24.0):
+    resolution: {integrity: sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-module-transforms': 7.21.5
+      '@babel/helper-plugin-utils': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-modules-commonjs@7.21.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==}
     engines: {node: '>=6.9.0'}
@@ -1396,6 +1993,20 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-modules-commonjs@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-module-transforms': 7.21.5
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-simple-access': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-modules-systemjs@7.20.11(@babel/core@7.21.8):
     resolution: {integrity: sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==}
     engines: {node: '>=6.9.0'}
@@ -1411,6 +2022,21 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-modules-systemjs@7.20.11(@babel/core@7.24.0):
+    resolution: {integrity: sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-module-transforms': 7.21.5
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-validator-identifier': 7.19.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-modules-umd@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==}
     engines: {node: '>=6.9.0'}
@@ -1424,6 +2050,19 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-modules-umd@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-module-transforms': 7.21.5
+      '@babel/helper-plugin-utils': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-named-capturing-groups-regex@7.20.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==}
     engines: {node: '>=6.9.0'}
@@ -1435,6 +2074,17 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-named-capturing-groups-regex@7.20.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-regexp-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-new-target@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==}
     engines: {node: '>=6.9.0'}
@@ -1445,6 +2095,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-new-target@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-object-super@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==}
     engines: {node: '>=6.9.0'}
@@ -1458,6 +2118,19 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/plugin-transform-object-super@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-replace-supers': 7.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-parameters@7.21.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==}
     engines: {node: '>=6.9.0'}
@@ -1468,6 +2141,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-parameters@7.21.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-property-literals@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==}
     engines: {node: '>=6.9.0'}
@@ -1478,6 +2161,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-property-literals@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-react-jsx@7.21.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-ELdlq61FpoEkHO6gFRpfj0kUgSwQTGoaEU8eMRoS8Dv3v6e7BjEAj5WMtIBRdHUeAioMhKP5HyxNzNnP+heKbA==}
     engines: {node: '>=6.9.0'}
@@ -1503,6 +2196,17 @@ packages:
       regenerator-transform: 0.15.1
     dev: true
 
+  /@babel/plugin-transform-regenerator@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      regenerator-transform: 0.15.1
+    dev: true
+
   /@babel/plugin-transform-reserved-words@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==}
     engines: {node: '>=6.9.0'}
@@ -1513,6 +2217,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-reserved-words@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-shorthand-properties@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==}
     engines: {node: '>=6.9.0'}
@@ -1523,6 +2237,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-shorthand-properties@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-spread@7.20.7(@babel/core@7.21.8):
     resolution: {integrity: sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==}
     engines: {node: '>=6.9.0'}
@@ -1534,6 +2258,17 @@ packages:
       '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
     dev: true
 
+  /@babel/plugin-transform-spread@7.20.7(@babel/core@7.24.0):
+    resolution: {integrity: sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+    dev: true
+
   /@babel/plugin-transform-sticky-regex@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==}
     engines: {node: '>=6.9.0'}
@@ -1544,6 +2279,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-sticky-regex@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-template-literals@7.18.9(@babel/core@7.21.8):
     resolution: {integrity: sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==}
     engines: {node: '>=6.9.0'}
@@ -1554,6 +2299,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-template-literals@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-typeof-symbol@7.18.9(@babel/core@7.21.8):
     resolution: {integrity: sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==}
     engines: {node: '>=6.9.0'}
@@ -1564,6 +2319,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-typeof-symbol@7.18.9(@babel/core@7.24.0):
+    resolution: {integrity: sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-typescript@7.21.3(@babel/core@7.21.8):
     resolution: {integrity: sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==}
     engines: {node: '>=6.9.0'}
@@ -1602,6 +2367,16 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-unicode-escapes@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/plugin-transform-unicode-regex@7.18.6(@babel/core@7.21.8):
     resolution: {integrity: sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==}
     engines: {node: '>=6.9.0'}
@@ -1613,6 +2388,17 @@ packages:
       '@babel/helper-plugin-utils': 7.21.5
     dev: true
 
+  /@babel/plugin-transform-unicode-regex@7.18.6(@babel/core@7.24.0):
+    resolution: {integrity: sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-create-regexp-features-plugin': 7.21.8(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+    dev: true
+
   /@babel/preset-env@7.21.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==}
     engines: {node: '>=6.9.0'}
@@ -1700,6 +2486,93 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/preset-env@7.21.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.21.9
+      '@babel/core': 7.24.0
+      '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.24.0)
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/helper-validator-option': 7.21.0
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-class-static-block': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-proposal-dynamic-import': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-proposal-json-strings': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-logical-assignment-operators': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.0)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.0)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-import-assertions': 7.20.0(@babel/core@7.24.0)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.0)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.0)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.0)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-arrow-functions': 7.21.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-async-to-generator': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-transform-block-scoped-functions': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-block-scoping': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-transform-classes': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-transform-computed-properties': 7.21.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-destructuring': 7.21.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-duplicate-keys': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-transform-exponentiation-operator': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-for-of': 7.21.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-function-name': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-transform-literals': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-transform-member-expression-literals': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-modules-amd': 7.20.11(@babel/core@7.24.0)
+      '@babel/plugin-transform-modules-commonjs': 7.21.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-modules-systemjs': 7.20.11(@babel/core@7.24.0)
+      '@babel/plugin-transform-modules-umd': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.20.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-new-target': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-object-super': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-parameters': 7.21.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-property-literals': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-regenerator': 7.21.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-reserved-words': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-shorthand-properties': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-spread': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-transform-sticky-regex': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-template-literals': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-transform-typeof-symbol': 7.18.9(@babel/core@7.24.0)
+      '@babel/plugin-transform-unicode-escapes': 7.21.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.24.0)
+      '@babel/preset-modules': 0.1.5(@babel/core@7.24.0)
+      '@babel/types': 7.21.5
+      babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.24.0)
+      babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.24.0)
+      babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.24.0)
+      core-js-compat: 3.30.2
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/preset-flow@7.21.4(@babel/core@7.21.8):
     resolution: {integrity: sha512-F24cSq4DIBmhq4OzK3dE63NHagb27OPE3eWR+HLekt4Z3Y5MzIIUGF3LlLgV0gN8vzbDViSY7HnrReNVCJXTeA==}
     engines: {node: '>=6.9.0'}
@@ -1725,6 +2598,19 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /@babel/preset-modules@0.1.5(@babel/core@7.24.0):
+    resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.21.5
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.24.0)
+      '@babel/types': 7.21.5
+      esutils: 2.0.3
+    dev: true
+
   /@babel/preset-typescript@7.21.5(@babel/core@7.21.8):
     resolution: {integrity: sha512-iqe3sETat5EOrORXiQ6rWfoOg2y68Cs75B9wNxdPW4kixJxh7aXQE1KPdWLDniC24T/6dSnguF33W9j/ZZQcmA==}
     engines: {node: '>=6.9.0'}
@@ -2429,7 +3315,7 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@rollup/plugin-babel@5.3.1(@babel/core@7.21.8)(rollup@2.79.1):
+  /@rollup/plugin-babel@5.3.1(@babel/core@7.24.0)(rollup@2.79.1):
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -2440,7 +3326,7 @@ packages:
       '@types/babel__core':
         optional: true
     dependencies:
-      '@babel/core': 7.21.8
+      '@babel/core': 7.24.0
       '@babel/helper-module-imports': 7.22.15
       '@rollup/pluginutils': 3.1.0(rollup@2.79.1)
       rollup: 2.79.1
@@ -4704,6 +5590,19 @@ packages:
       - supports-color
     dev: true
 
+  /babel-plugin-polyfill-corejs2@0.3.3(@babel/core@7.24.0):
+    resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/compat-data': 7.21.9
+      '@babel/core': 7.24.0
+      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.24.0)
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-plugin-polyfill-corejs3@0.6.0(@babel/core@7.21.8):
     resolution: {integrity: sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==}
     peerDependencies:
@@ -4716,6 +5615,18 @@ packages:
       - supports-color
     dev: true
 
+  /babel-plugin-polyfill-corejs3@0.6.0(@babel/core@7.24.0):
+    resolution: {integrity: sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.24.0)
+      core-js-compat: 3.30.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-plugin-polyfill-regenerator@0.4.1(@babel/core@7.21.8):
     resolution: {integrity: sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==}
     peerDependencies:
@@ -4727,6 +5638,17 @@ packages:
       - supports-color
     dev: true
 
+  /babel-plugin-polyfill-regenerator@0.4.1(@babel/core@7.24.0):
+    resolution: {integrity: sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.24.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-walk@3.0.0-canary-5:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
     engines: {node: '>= 10.0.0'}
@@ -10510,10 +11432,10 @@ packages:
     engines: {node: '>=16.0.0'}
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
-      '@babel/core': 7.21.8
-      '@babel/preset-env': 7.21.5(@babel/core@7.21.8)
+      '@babel/core': 7.24.0
+      '@babel/preset-env': 7.21.5(@babel/core@7.24.0)
       '@babel/runtime': 7.21.5
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.21.8)(rollup@2.79.1)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.24.0)(rollup@2.79.1)
       '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
diff --git a/webui/src/App.vue b/webui/src/App.vue
index d56f8893..bdd2062c 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-  type GlobalThemeOverrides,
-  NConfigProvider,
-  NMessageProvider,
-} from 'naive-ui';
+import { type GlobalThemeOverrides, NConfigProvider } from 'naive-ui';
 
 const theme: GlobalThemeOverrides = {
   Spin: {
@@ -11,20 +7,17 @@ const theme: GlobalThemeOverrides = {
   },
 };
 
-const { refresh, isLoggedin } = useAuth();
+const { refresh, isLoggedIn } = useAuth();
 
-if(isLoggedin.value){
+if (isLoggedIn.value) {
   refresh();
 }
-
 </script>
 
 <template>
   <Suspense>
     <NConfigProvider :theme-overrides="theme">
-      <NMessageProvider>
-        <RouterView></RouterView>
-      </NMessageProvider>
+      <RouterView></RouterView>
     </NConfigProvider>
   </Suspense>
 </template>
diff --git a/webui/src/api/auth.ts b/webui/src/api/auth.ts
index dade168b..d5be7e8a 100644
--- a/webui/src/api/auth.ts
+++ b/webui/src/api/auth.ts
@@ -1,4 +1,5 @@
-import type { LoginSuccess, Logout, Update } from '#/auth';
+import type { LoginSuccess, Update } from '#/auth';
+import type { ApiSuccess } from '#/api';
 
 export const apiAuth = {
   async login(username: string, password: string) {
@@ -26,8 +27,8 @@ export const apiAuth = {
   },
 
   async logout() {
-    const { data } = await axios.get<Logout>('api/v1/auth/logout');
-    return data.message === 'logout success';
+    const { data } = await axios.get<ApiSuccess>('api/v1/auth/logout');
+    return data;
   },
 
   async update(username: string, password: string) {
diff --git a/webui/src/api/bangumi.ts b/webui/src/api/bangumi.ts
index d04fa2cb..ce7c8df3 100644
--- a/webui/src/api/bangumi.ts
+++ b/webui/src/api/bangumi.ts
@@ -1,3 +1,4 @@
+import { omit } from 'lodash';
 import type { BangumiAPI, BangumiRule } from '#/bangumi';
 import type { ApiSuccess } from '#/api';
 
diff --git a/webui/src/components/ab-add-rss.vue b/webui/src/components/ab-add-rss.vue
index ee3b0d37..04bf1a98 100644
--- a/webui/src/components/ab-add-rss.vue
+++ b/webui/src/components/ab-add-rss.vue
@@ -1,22 +1,21 @@
 <script lang="ts" setup>
-import { useMessage } from 'naive-ui';
 import type { BangumiRule } from '#/bangumi';
 import type { RSS } from '#/rss';
 import { rssTemplate } from '#/rss';
 import { ruleTemplate } from '#/bangumi';
-import type { ApiError } from '#/api';
 
 /** v-model show */
 const show = defineModel('show', { default: false });
 
 const message = useMessage();
 const { getAll } = useBangumiStore();
+const { t } = useMyI18n();
 
 const rss = ref<RSS>(rssTemplate);
 const rule = defineModel<BangumiRule>('rule', { default: ruleTemplate });
 const parserType = ['mikan', 'tmdb', 'parser'];
 
-const window = reactive({
+const windowState = reactive({
   loading: false,
   rule: false,
   next: false,
@@ -30,91 +29,88 @@ watch(show, (val) => {
   if (!val) {
     rss.value = rssTemplate;
     setTimeout(() => {
-      window.next = false;
+      windowState.next = false;
     }, 300);
   } else if (val && rule.value.official_title !== '') {
-    window.next = true;
-    window.rule = true;
+    windowState.next = true;
+    windowState.rule = true;
   }
 });
 
-async function addRss() {
+function addRss() {
   if (rss.value.url === '') {
-    message.error('Please enter the RSS link!');
+    message.error(t('notify.please_enter', [t('notify.rss_link')]));
   } else if (rss.value.aggregate) {
-    try {
-      window.loading = true;
-      const data = await apiRSS.add(rss.value);
-      window.loading = false;
-      message.success(data.msg_en);
-      show.value = false;
-      console.log('rss', data);
-    } catch (error) {
-      const err = error as ApiError;
-      message.error(err.msg_en);
-      console.log('error', err.msg_en);
-      window.loading = false;
-    }
+    useApi(apiRSS.add, {
+      showMessage: true,
+      onBeforeExecute() {
+        windowState.loading = true;
+      },
+      onSuccess() {
+        show.value = false;
+      },
+      onFinally() {
+        windowState.loading = false;
+      },
+    }).execute(rss.value);
   } else {
-    try {
-      window.loading = true;
-      const data = await apiDownload.analysis(rss.value);
-      window.loading = false;
-      rule.value = data;
-      window.next = true;
-      window.rule = true;
-      console.log('rule', data);
-    } catch (error) {
-      const err = error as ApiError;
-      message.error(err.msg_en);
-      console.log('error', err.msg_en);
-    }
+    useApi(apiDownload.analysis, {
+      showMessage: true,
+      onBeforeExecute() {
+        windowState.loading = true;
+      },
+      onSuccess(res) {
+        rule.value = res;
+        windowState.next = true;
+        windowState.rule = true;
+      },
+      onFinally() {
+        windowState.loading = false;
+      },
+    }).execute(rss.value);
   }
 }
 
-async function collect() {
+function collect() {
   if (rule.value) {
-    try {
-      loading.collect = true;
-      const res = await apiDownload.collection(rule.value);
-      loading.collect = false;
-
-      if (res) {
-        message.success('Collect Success!');
+    useApi(apiDownload.collection, {
+      showMessage: true,
+      onBeforeExecute() {
+        loading.collect = true;
+      },
+      onSuccess() {
         getAll();
         show.value = false;
-      } else {
-        message.error('Collect Failed!');
-      }
-    } catch (error) {
-      message.error('Collect Error!');
-    }
+      },
+      onFinally() {
+        loading.collect = false;
+      },
+    }).execute(rule.value);
   }
 }
 
-async function subscribe() {
+function subscribe() {
   if (rule.value) {
-    try {
-      loading.subscribe = true;
-      const res = await apiDownload.subscribe(rule.value);
-      loading.subscribe = false;
-      if (res) {
-        message.success('Subscribe Success!');
+    useApi(apiDownload.subscribe, {
+      showMessage: true,
+      onBeforeExecute() {
+        loading.subscribe = true;
+      },
+      onSuccess() {
         getAll();
         show.value = false;
-      } else {
-        message.error('Subscribe Failed!');
-      }
-    } catch (error) {
-      message.error('Subscribe Error!');
-    }
+      },
+      onFinally() {
+        loading.subscribe = false;
+      },
+    }).execute(rule.value);
   }
 }
 </script>
 
 <template>
-  <ab-popup v-model:show="show" :title="$t('topbar.add.title')" css="w-360px">
-    <div v-if="!window.next" space-y-12px>
+  <ab-popup v-model:show="show" :title="$t('topbar.add.title')" css="w-360">
+    <div v-if="!windowState.next" space-y-12>
       <ab-setting
         v-model:data="rss.url"
         :label="$t('topbar.add.rss_link')"
@@ -123,6 +119,7 @@ async function subscribe() {
           placeholder: $t('topbar.add.placeholder_link'),
         }"
       ></ab-setting>
+
       <ab-setting
         v-model:data="rss.name"
         :label="$t('topbar.add.name')"
@@ -131,11 +128,13 @@ async function subscribe() {
           placeholder: $t('topbar.add.placeholder_name'),
         }"
       ></ab-setting>
+
       <ab-setting
         v-model:data="rss.aggregate"
         :label="$t('topbar.add.aggregate')"
         type="switch"
       ></ab-setting>
+
       <ab-setting
         v-model:data="rss.parser"
         :label="$t('topbar.add.parser')"
@@ -147,21 +146,22 @@ async function subscribe() {
       ></ab-setting>
 
       <div flex="~ justify-end">
-        <ab-button size="small" :loading="window.loading" @click="addRss">{{
-          $t('topbar.add.button')
-        }}</ab-button>
+        <ab-button size="small" :loading="windowState.loading" @click="addRss">
+          {{ $t('topbar.add.button') }}
+        </ab-button>
       </div>
     </div>
 
-    <div v-else-if="window.rule">
+    <div v-else-if="windowState.rule">
       <ab-rule v-model:rule="rule"></ab-rule>
-      <div flex="~ justify-end" space-x-10px>
-        <ab-button size="small" :loading="loading.collect" @click="collect"
-          >Collect</ab-button
-        >
-        <ab-button size="small" :loading="loading.subscribe" @click="subscribe"
-          >Subscribe</ab-button
-        >
+      <div flex="~ justify-end gap-x-10">
+        <ab-button size="small" :loading="loading.collect" @click="collect">
+          {{ $t('topbar.add.collect') }}
+        </ab-button>
+
+        <ab-button size="small" :loading="loading.subscribe" @click="subscribe">
+          {{ $t('topbar.add.subscribe') }}
+        </ab-button>
       </div>
     </div>
   </ab-popup>
diff --git a/webui/src/components/ab-bangumi-card.vue b/webui/src/components/ab-bangumi-card.vue
index ec73e6d9..c1b732ac 100644
--- a/webui/src/components/ab-bangumi-card.vue
+++ b/webui/src/components/ab-bangumi-card.vue
@@ -16,9 +16,9 @@ defineEmits(['click']);
 </script>
 
 <template>
-  <div v-if="type === 'primary'" w-150px is-btn @click="() => $emit('click')">
-    <div rounded-4px overflow-hidden poster-shandow rel>
-      <div w-full h-210px>
+  <div v-if="type === 'primary'" w-150 is-btn @click="() => $emit('click')">
+    <div rounded-4 overflow-hidden poster-shandow rel>
+      <div w-full h-210>
         <template v-if="bangumi.poster_link">
           <img :src="bangumi.poster_link" alt="poster" wh-full />
         </template>
@@ -36,54 +36,47 @@ defineEmits(['click']);
         z-1
         inset-0
         opacity-0
-        transition-all
-        duration-300
-        hover:backdrop-blur-2px
-        hover:bg-white
-        hover:bg-opacity-30
-        hover:opacity-100
-        active:duration-0
-        active:bg-opacity-60
+        transition="all duration-300"
+        hover="backdrop-blur-2 bg-white bg-opacity-30 opacity-100"
+        active="duration-0 bg-opacity-60"
         class="group"
       >
         <div
           text-white
           rounded="1/2"
-          wh-44px
+          wh-44
           f-cer
           bg-theme-row
-          class="group-active:poster-pen-active"
+          group-active="poster-pen-active"
         >
           <Write size="20" />
         </div>
       </div>
     </div>
 
-    <div py-4px>
+    <div py-4>
       <div text-h3 truncate>{{ bangumi.official_title }}</div>
       <ab-tag :title="`Season ${bangumi.season}`" type="primary" />
     </div>
   </div>
   <div
     v-else-if="type === 'search'"
-    w-480px
-    rounded-12px
-    p-4px
+    w-480
+    rounded-12
+    p-4
     shadow
-    transition-opacity
-    ease-in-out
-    duration-300
-    class="card-border"
+    bg="#eee5f4"
+    transition="opacity ease-in-out duration-300"
   >
-    <div bg-white rounded-8px p-12px fx-cer justify-between space-x-16px>
-      <div w-400px space-x-16px fx-cer>
-        <div h-44px w-72px rounded-6px overflow-hidden>
+    <div bg-white rounded-8 p-12 fx-cer justify-between gap-x-16>
+      <div w-400 gap-x-16 fx-cer>
+        <div h-44 w-72 rounded-6 overflow-hidden>
           <template v-if="bangumi.poster_link">
             <img
               :src="bangumi.poster_link"
               alt="poster"
               w-full
-              class="search-image"
+              translate-y="-25%"
             />
           </template>
 
@@ -93,23 +86,21 @@ defineEmits(['click']);
             </div>
           </template>
         </div>
-        <div flex-col space-y-4px>
-          <div w-300px text-h3 text-primary truncate>
+        <div flex="~ col gap-y-4">
+          <div w-300 text="h3 primary" truncate>
             {{ bangumi.official_title }}
           </div>
-          <div flex space-x-8px>
-            <ab-tag :title="`Season ${bangumi.season}`" type="primary" />
-            <ab-tag
-              v-if="bangumi.group_name !== ''"
-              :title="bangumi.group_name"
-              type="primary"
-            />
-            <ab-tag v-if="bangumi.dpi" :title="bangumi.dpi" type="primary" />
-            <ab-tag
-              v-if="bangumi.subtitle"
-              :title="bangumi.subtitle"
-              type="primary"
-            />
+          <div flex="~ gap-x-8">
+            <template
+              v-for="i in ['season', 'group_name', 'subtitle']"
+              :key="i"
+            >
+              <ab-tag
+                v-if="bangumi[i]"
+                :title="i === 'season' ? `Season ${bangumi[i]}` : bangumi[i]"
+                type="primary"
+              />
+            </template>
           </div>
         </div>
       </div>
@@ -117,13 +108,3 @@ defineEmits(['click']);
     </div>
   </div>
 </template>
-
-<style>
-.card-border {
-  background: #eee5f4;
-}
-
-.search-image {
-  transform: translateY(-25%);
-}
-</style>
diff --git a/webui/src/components/ab-change-account.vue b/webui/src/components/ab-change-account.vue
index a2285fcb..67c710e1 100644
--- a/webui/src/components/ab-change-account.vue
+++ b/webui/src/components/ab-change-account.vue
@@ -10,9 +10,9 @@ const { user, update } = useAuth();
   <ab-popup
     v-model:show="show"
     :title="$t('topbar.profile.pop_title')"
-    css="w-365px"
+    css="w-365"
   >
-    <div space-y-16px>
+    <div space-y-16>
       <ab-label :label="$t('topbar.profile.username')">
         <input
           v-model="user.username"
diff --git a/webui/src/components/ab-container.vue b/webui/src/components/ab-container.vue
index e4414e6a..652b5fb5 100644
--- a/webui/src/components/ab-container.vue
+++ b/webui/src/components/ab-container.vue
@@ -10,14 +10,14 @@ withDefaults(
 </script>
 
 <template>
-  <div rounded-10px overflow-hidden>
+  <div rounded-10 overflow-hidden>
     <div
       bg-theme-row
       w-full
       text-white
+      px-20
+      h-45
       fx-cer
-      px-20px
-      h-45px
       justify-between
       select-none
     >
@@ -26,7 +26,7 @@ withDefaults(
       <slot name="title-right"></slot>
     </div>
 
-    <div p-20px bg-white>
+    <div p-20 bg-white>
       <slot></slot>
     </div>
   </div>
diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index aa752b51..1e50847f 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type {BangumiRule} from '#/bangumi';
+import type { BangumiRule } from '#/bangumi';
 
 const emit = defineEmits<{
   (e: 'apply', rule: BangumiRule): void;
   (e: 'enable', id: number): void;
   (
-      e: 'deleteFile',
-      type: 'disable' | 'delete',
-      opts: { id: number; deleteFile: boolean }
+    e: 'deleteFile',
+    type: 'disable' | 'delete',
+    opts: { id: number; deleteFile: boolean }
   ): void;
 }>();
 
-const {t} = useMyI18n();
+const { t } = useMyI18n();
 
-const show = defineModel('show', {default: false});
+const show = defineModel('show', { default: false });
 const rule = defineModel<BangumiRule>('rule', {
   required: true,
 });
@@ -67,9 +67,9 @@ const popupTitle = computed(() => {
 
 const boxSize = computed(() => {
   if (rule.value.deleted) {
-    return 'w-300px';
+    return 'w-300';
   } else {
-    return 'w-380px';
+    return 'w-380';
   }
 });
 </script>
@@ -79,55 +79,47 @@ const boxSize = computed(() => {
     <div v-if="rule.deleted">
       <div>{{ $t('homepage.rule.enable_hit') }}</div>
 
-      <div line my-8px></div>
+      <div line my-8></div>
 
-      <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitEnable()">{{
-            $t('homepage.rule.yes_btn')
-          }}
+      <div f-cer gap-x-10>
+        <ab-button size="small" type="warn" @click="() => emitEnable()">
+          {{ $t('homepage.rule.yes_btn') }}
         </ab-button>
-        <ab-button size="small" @click="() => close()">{{
-            $t('homepage.rule.no_btn')
-          }}
+        <ab-button size="small" @click="() => close()">
+          {{ $t('homepage.rule.no_btn') }}
         </ab-button>
       </div>
     </div>
 
-    <div v-else space-y-12px>
+    <div v-else space-y-12>
       <ab-rule v-model:rule="rule"></ab-rule>
 
-      <div fx-cer justify-end space-x-10px>
+      <div fx-cer justify-end gap-x-10>
         <ab-button-multi
-            size="small"
-            type="warn"
-            :selections="[t('homepage.rule.delete'), t('homepage.rule.disable')]"
-            @click="showDeleteFileDialog"
+          size="small"
+          type="warn"
+          :selections="[t('homepage.rule.delete'), t('homepage.rule.disable')]"
+          @click="showDeleteFileDialog"
         />
-        <ab-button size="small" @click="emitApply">{{
-            $t('homepage.rule.apply')
-          }}
+        <ab-button size="small" @click="emitApply">
+          {{ $t('homepage.rule.apply') }}
         </ab-button>
       </div>
     </div>
 
     <ab-popup
-        v-model:show="deleteFileDialog.show"
-        :title="$t('homepage.rule.delete')"
+      v-model:show="deleteFileDialog.show"
+      :title="$t('homepage.rule.delete')"
     >
       <div>{{ $t('homepage.rule.delete_hit') }}</div>
-      <div line my-8px></div>
+      <div line my-8></div>
 
-      <div fx-cer justify-center space-x-10px>
-        <ab-button
-            size="small"
-            type="warn"
-            @click="() => emitdeleteFile(true)"
-        >{{ $t('homepage.rule.yes_btn') }}
-        </ab-button
-        >
-        <ab-button size="small" @click="() => emitdeleteFile(false)">{{
-            $t('homepage.rule.no_btn')
-          }}
+      <div f-cer gap-x-10>
+        <ab-button size="small" type="warn" @click="() => emitdeleteFile(true)">
+          {{ $t('homepage.rule.yes_btn') }}
+        </ab-button>
+        <ab-button size="small" @click="() => emitdeleteFile(false)">
+          {{ $t('homepage.rule.no_btn') }}
         </ab-button>
       </div>
     </ab-popup>
diff --git a/webui/src/components/ab-fold-panel.vue b/webui/src/components/ab-fold-panel.vue
index 678941f4..9990dc36 100644
--- a/webui/src/components/ab-fold-panel.vue
+++ b/webui/src/components/ab-fold-panel.vue
@@ -14,14 +14,14 @@ withDefaults(
 
 <template>
   <Disclosure v-slot="{ open }">
-    <div rounded-10px overflow-hidden h-max>
+    <div rounded-10 overflow-hidden h-max>
       <DisclosureButton
         bg-theme-row
         w-full
         text-white
         fx-cer
-        px-20px
-        h-45px
+        px-20
+        h-45
         justify-between
       >
         <div text-h2>{{ title }}</div>
@@ -29,8 +29,8 @@ withDefaults(
         <Component :is="open ? Up : Down" size="24" />
       </DisclosureButton>
 
-      <div bg-white py-20px :class="[open ? 'px-20px' : 'px-8px']">
-        <div v-show="!open" line my-12px></div>
+      <div bg-white py-20 :class="[open ? 'px-20' : 'px-8']">
+        <div v-show="!open" line my-12></div>
 
         <DisclosurePanel>
           <slot></slot>
diff --git a/webui/src/components/ab-label.vue b/webui/src/components/ab-label.vue
index 1eaa20af..22aaf766 100644
--- a/webui/src/components/ab-label.vue
+++ b/webui/src/components/ab-label.vue
@@ -8,19 +8,16 @@ const props = withDefaults(
   }
 );
 
-function abLabel() {
-  if (typeof props.label === 'function') {
-    return props.label();
-  } else {
-    return props.label;
-  }
-}
+const abLabel = computed(() => {
+  if (typeof props.label === 'function') return props.label();
+  else return props.label;
+});
 </script>
 
 <template>
-  <div flex="~ items-start" justify-between>
-    <div>{{ abLabel() }}</div>
+  <div flex="~ items-start justify-between">
+    <div>{{ abLabel }}</div>
 
-    <slot> </slot>
+    <slot></slot>
   </div>
 </template>
diff --git a/webui/src/components/ab-popup.vue b/webui/src/components/ab-popup.vue
index b7c036ed..8f05dc90 100644
--- a/webui/src/components/ab-popup.vue
+++ b/webui/src/components/ab-popup.vue
@@ -40,13 +40,11 @@ function close() {
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-black bg-opacity-25" />
+        <div fixed inset-0 bg="black opacity-25" />
       </TransitionChild>
 
-      <div class="fixed inset-0 overflow-y-auto">
-        <div
-          class="flex min-h-full items-center justify-center p-4 text-center"
-        >
+      <div fixed inset-0 overflow-y-auto>
+        <div flex="~ items-center justify-center" min-h-full p-4 text-center>
           <TransitionChild
             as="template"
             enter="duration-300 ease-out"
diff --git a/webui/src/components/ab-rss-item.vue b/webui/src/components/ab-rss-item.vue
index 5fc1e678..4dcda943 100644
--- a/webui/src/components/ab-rss-item.vue
+++ b/webui/src/components/ab-rss-item.vue
@@ -15,23 +15,28 @@ withDefaults(
   }
 );
 
-defineEmits(['on-select']);
+defineEmits<{
+  (e: 'on-select', checked: boolean, id: number): void;
+}>();
 
 const checked = ref(false);
 </script>
 
 <template>
-  <div class="rss-group">
-    <div class="left-side" flex space-x-40px>
+  <div flex="~ items-center justify-between gap-4">
+    <!-- left -->
+    <div flex="~ gap-x-40">
       <ab-checkbox
         v-model="checked"
         small
         @click="() => $emit('on-select', checked, id)"
       />
-      <div w-200px text-h3 truncate>{{ name }}</div>
-      <div w-300px text-h3 truncate>{{ url }}</div>
+      <div w-200 text-h3 truncate>{{ name }}</div>
+      <div w-300 text-h3 truncate>{{ url }}</div>
     </div>
-    <div class="right-side" space-x-8px>
+
+    <!-- right -->
+    <div space-x-8>
       <ab-tag v-if="parser" type="primary" :title="parser" />
       <ab-tag v-if="aggregate" type="primary" title="aggregate" />
       <ab-tag v-if="enable" type="active" title="active" />
@@ -39,13 +44,3 @@ const checked = ref(false);
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.rss-group {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-}
-</style>
diff --git a/webui/src/components/ab-rule.vue b/webui/src/components/ab-rule.vue
index 0e1233f2..a0f39f75 100644
--- a/webui/src/components/ab-rule.vue
+++ b/webui/src/components/ab-rule.vue
@@ -21,7 +21,7 @@ const items: SettingItem<BangumiRule>[] = [
     configKey: 'year',
     label: () => t('homepage.rule.year'),
     type: 'input',
-    css: 'w-72px',
+    css: 'w-72',
     prop: {
       type: 'text',
     },
@@ -30,7 +30,7 @@ const items: SettingItem<BangumiRule>[] = [
     configKey: 'season',
     label: () => t('homepage.rule.season'),
     type: 'input',
-    css: 'w-72px',
+    css: 'w-72',
     prop: {
       type: 'number',
     },
@@ -40,7 +40,7 @@ const items: SettingItem<BangumiRule>[] = [
     configKey: 'offset',
     label: () => t('homepage.rule.offset'),
     type: 'input',
-    css: 'w-72px',
+    css: 'w-72',
     prop: {
       type: 'number',
     },
@@ -55,7 +55,7 @@ const items: SettingItem<BangumiRule>[] = [
 </script>
 
 <template>
-  <div space-y-12px>
+  <div space-y-12>
     <ab-setting
       v-for="i in items"
       :key="i.configKey"
diff --git a/webui/src/components/ab-search-bar.vue b/webui/src/components/ab-search-bar.vue
index e3f60989..a31316bd 100644
--- a/webui/src/components/ab-search-bar.vue
+++ b/webui/src/components/ab-search-bar.vue
@@ -1,19 +1,16 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
 import { vOnClickOutside } from '@vueuse/components';
+import type { BangumiRule } from '#/bangumi';
+
+defineEmits<{
+  (e: 'add-bangumi', bangumiRule: BangumiRule): void;
+}>();
 
-defineEmits(['add-bangumi']);
 const showProvider = ref(false);
-const {
-  providers,
-  getProviders,
-  provider,
-  loading,
-  onSearch,
-  clearSearch,
-  inputValue,
-  bangumiList,
-} = useSearchStore();
+const { providers, provider, loading, inputValue, bangumiList } = storeToRefs(
+  useSearchStore()
+);
+const { getProviders, onSearch, clearSearch } = useSearchStore();
 
 onMounted(() => {
   getProviders();
@@ -38,10 +35,10 @@ function onSelect(site: string) {
     v-show="showProvider"
     v-on-click-outside="() => (showProvider = false)"
     abs
-    top-84px
-    left-540px
-    w-100px
-    rounded-12px
+    top-84
+    left-540
+    w-100
+    rounded-12
     shadow
     bg-white
     z-99
@@ -54,14 +51,14 @@ function onSelect(site: string) {
       is-btn
       @click="() => onSelect(site)"
     >
-      <div text-h3 text-primary hover:text-white p-12px truncate>
+      <div text="h3 primary" hover="text-white" p-12 truncate>
         {{ site }}
       </div>
     </div>
   </div>
 
-  <div v-on-click-outside="clearSearch" abs top-84px left-192px z-8>
-    <transition-group name="fade-list" tag="ul" space-y-12px>
+  <div v-on-click-outside="clearSearch" abs top-84 left-192 z-8>
+    <transition-group name="fade-list" tag="ul" space-y-12>
       <li v-for="bangumi in bangumiList" :key="bangumi.order">
         <ab-bangumi-card
           :bangumi="bangumi.value"
diff --git a/webui/src/components/ab-setting.vue b/webui/src/components/ab-setting.vue
index e1784b86..6cb85fcd 100644
--- a/webui/src/components/ab-setting.vue
+++ b/webui/src/components/ab-setting.vue
@@ -35,11 +35,11 @@ const data = defineModel<any>('data');
         v-bind="prop"
       />
 
-      <div v-else-if="type === 'dynamic-tags'" max-w-200px overflow-auto pb-1>
+      <div v-else-if="type === 'dynamic-tags'" max-w-200 overflow-auto pb-1>
         <NDynamicTags v-model:value="data" size="small"></NDynamicTags>
       </div>
     </ab-label>
 
-    <div v-if="bottomLine" line my-12px></div>
+    <div v-if="bottomLine" line my-12></div>
   </div>
 </template>
diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index e0932388..b6d65bdf 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -34,7 +34,7 @@ function abLabel(label: string | (() => string)) {
 <template>
   <Menu>
     <div rel>
-      <div fx-cer space-x-16px>
+      <div fx-cer space-x-16>
         <International
           theme="outline"
           size="24"
@@ -62,10 +62,10 @@ function abLabel(label: string | (() => string)) {
 
       <MenuItems
         abs
-        top-50px
-        left-32px
-        w-120px
-        rounded-8px
+        top-50
+        left-32
+        w-120
+        rounded-8
         bg-white
         overflow-hidden
         shadow
@@ -74,19 +74,18 @@ function abLabel(label: string | (() => string)) {
         <MenuItem v-for="i in items" :key="i.id" v-slot="{ active }">
           <div
             w-full
-            h-32px
-            px-12px
+            h-32
+            px-12
             fx-cer
-            space-x-8px
+            gap-x-8
             is-btn
-            hover:text-white
-            hover:bg-primary
+            hover="text-white bg-primary"
             class="group"
             :class="[active ? 'text-white bg-theme-row' : 'text-black']"
             @click="() => i.handle && i.handle()"
           >
             <div
-              class="group-hover:text-white"
+              group-hover="text-white"
               :class="[active ? 'text-white' : 'text-primary']"
             >
               <Component :is="i.icon" size="16"></Component>
diff --git a/webui/src/components/basic/ab-add.vue b/webui/src/components/basic/ab-add.vue
index 777313f5..fd0bd545 100644
--- a/webui/src/components/basic/ab-add.vue
+++ b/webui/src/components/basic/ab-add.vue
@@ -15,29 +15,29 @@ defineEmits(['click']);
 const buttonSize = computed(() => {
   switch (props.type) {
     case 'large':
-      return 'wh-36px';
+      return 'wh-36';
     case 'medium':
-      return 'wh-24px';
+      return 'wh-24';
     case 'small':
-      return 'wh-12px';
+      return 'wh-12';
   }
 });
 
 const lineSize = computed(() => {
   switch (props.type) {
     case 'large':
-      return 'w-18px h-4px';
+      return 'w-18 h-4';
     case 'medium':
-      return 'w-3px h-12px';
+      return 'w-3 h-12';
     case 'small':
-      return 'w-2px h-6px';
+      return 'w-2 h-6';
   }
 });
 </script>
 
 <template>
   <button
-    :rounded="round ? '1/2' : '8px'"
+    :rounded="round ? '1/2' : '8'"
     f-cer
     rel
     transition-colors
diff --git a/webui/src/components/basic/ab-button-multi.vue b/webui/src/components/basic/ab-button-multi.vue
index dae9304c..6e65d876 100644
--- a/webui/src/components/basic/ab-button-multi.vue
+++ b/webui/src/components/basic/ab-button-multi.vue
@@ -1,52 +1,47 @@
-<script lang="ts" setup xmlns="http://www.w3.org/1999/html">
-
-import {NSpin} from 'naive-ui';
-import {Down} from "@icon-park/vue-next";
-import {computed} from "vue";
+<script lang="ts" setup>
+import { NSpin } from 'naive-ui';
+import { Down } from '@icon-park/vue-next';
 
 const props = withDefaults(
-    defineProps<{
-      type?: 'primary' | 'warn';
-      size?: 'big' | 'normal' | 'small';
-      link?: string | null;
-      loading?: boolean;
-      selections: string[];
-    }>(),
-    {
-      type: 'primary',
-      size: 'normal',
-      link: null,
-      loading: false,
-    }
+  defineProps<{
+    type?: 'primary' | 'warn';
+    size?: 'big' | 'normal' | 'small';
+    link?: string | null;
+    loading?: boolean;
+    selections: string[];
+  }>(),
+  {
+    type: 'primary',
+    size: 'normal',
+    link: null,
+    loading: false,
+  }
 );
 
 defineEmits(['click']);
 
-const selected = ref<string>(
-    props.selections[0]
-);
+const selected = ref<string>(props.selections[0]);
 const showSelections = ref<boolean>(false);
 
-
 const buttonSize = computed(() => {
   switch (props.size) {
     case 'big':
-      return 'rounded-10px text-h1 w-276px h-55px text-h1';
+      return 'rounded-10 text-h1 w-276 h-55 text-h1';
     case 'normal':
-      return 'rounded-6px w-170px h-36px';
+      return 'rounded-6 w-170 h-36';
     case 'small':
-      return 'rounded-6px w-86px h-28px text-main';
+      return 'rounded-6 w-86 h-28 text-main';
   }
 });
 
 const selectboxSize = computed(() => {
   switch (props.size) {
     case 'big':
-      return 'w-276px rounded-10px text-h1';
+      return 'w-276 rounded-10 text-h1';
     case 'normal':
-      return 'w-170px rounded-6px';
+      return 'w-170 rounded-6';
     case 'small':
-      return 'w-86px rounded-6px text-main';
+      return 'w-86 rounded-6 text-main';
   }
 });
 
@@ -66,59 +61,54 @@ function onSelect(selection: string) {
   showSelections.value = false;
   console.log(selected.value);
 }
-
 </script>
 
 <template>
-  <div
-      :class="buttonSize"
-      f-cer
-      overflow-hidden
-  >
+  <div :class="buttonSize" f-cer overflow-hidden>
     <Component
-        :is="link !== null ? 'a' : 'button'"
-        :href="link"
-        text-white
-        outline-none
-        wh-full
-        pl-12px
-        :class="[`type-${type}`]"
-        @click="$emit('click', selected)"
+      :is="link !== null ? 'a' : 'button'"
+      :href="link"
+      text-white
+      outline-none
+      wh-full
+      pl-12
+      :class="[`type-${type}`]"
+      @click="$emit('click', selected)"
     >
       <NSpin :show="loading" :size="loadingSize">
         <div text-main>{{ selected }}</div>
       </NSpin>
     </Component>
     <div
-        is-btn
-        px-12px
-        h-full
-        f-cer
-        :class="[`selector-${type}`]"
-        @click="() => showSelections = !showSelections"
+      is-btn
+      px-12
+      h-full
+      f-cer
+      :class="[`selector-${type}`]"
+      @click="() => (showSelections = !showSelections)"
     >
-      <Down fill="white"/>
+      <Down fill="white" />
     </div>
   </div>
   <div
-      v-if="showSelections"
-      abs
-      z-70
-      :class="selectboxSize"
-      overflow-hidden
-      class="select-box"
+    v-if="showSelections"
+    abs
+    z-70
+    :class="selectboxSize"
+    overflow-hidden
+    class="select-box"
   >
     <div
-        v-for="selection in selections"
-        :key="selection"
-        is-btn
-        wh-full
-        f-cer
-        text-main
-        py-8px
-        text-white
-        :class="[`type-${type}`]"
-        @click="onSelect(selection)"
+      v-for="selection in selections"
+      :key="selection"
+      is-btn
+      wh-full
+      f-cer
+      text-main
+      py-8
+      text-white
+      :class="[`type-${type}`]"
+      @click="onSelect(selection)"
     >
       {{ selection }}
     </div>
@@ -147,4 +137,4 @@ function onSelect(selection: string) {
 .select-box {
   transform: TranslateY(80%) TranslateX(-111%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webui/src/components/basic/ab-button.vue b/webui/src/components/basic/ab-button.vue
index e11a5279..4f9910ca 100644
--- a/webui/src/components/basic/ab-button.vue
+++ b/webui/src/components/basic/ab-button.vue
@@ -21,11 +21,11 @@ defineEmits(['click']);
 const buttonSize = computed(() => {
   switch (props.size) {
     case 'big':
-      return 'rounded-10px text-h1 w-276px h-55px text-h1';
+      return 'rounded-10 text-h1 w-276 h-55 text-h1';
     case 'normal':
-      return 'rounded-6px w-170px h-36px';
+      return 'rounded-6 w-170 h-36';
     case 'small':
-      return 'rounded-6px w-86px h-28px text-main';
+      return 'rounded-6 w-86 h-28 text-main';
   }
 });
 
diff --git a/webui/src/components/basic/ab-checkbox.vue b/webui/src/components/basic/ab-checkbox.vue
index 5733c87f..ceb21da7 100644
--- a/webui/src/components/basic/ab-checkbox.vue
+++ b/webui/src/components/basic/ab-checkbox.vue
@@ -15,23 +15,24 @@ const checked = defineModel<boolean>({ default: false });
 
 <template>
   <Switch v-model="checked" as="template">
-    <div flex items-center space-x-8px is-btn>
+    <div flex="~ items-center gap-x-8" is-btn>
       <slot name="before"></slot>
 
       <div
         rel
         f-cer
         bg-white
-        :class="[small ? 'wh-16px' : 'wh-32px', !checked && 'group']"
-        :border="small ? '2px solid #3c239f' : '4px solid #3c239f'"
-        :rounded="small ? '4px' : '6px'"
+        border="solid #3c239f"
+        :class="[
+          small ? 'wh-16 border-2 rounded-4' : 'wh-32 border-4 rounded-6',
+          !checked && 'group',
+        ]"
       >
         <div
-          rounded-2px
-          transition-all
-          duration-300
+          rounded-2
+          transition="all duration-300"
           :class="[
-            small ? 'wh-8px' : 'wh-16px',
+            small ? 'wh-8' : 'wh-16',
             checked ? 'bg-[#3c239f]' : 'bg-transparent',
           ]"
           group-hover:bg="#cccad4"
diff --git a/webui/src/components/basic/ab-page-title.vue b/webui/src/components/basic/ab-page-title.vue
index 8ce36519..41c00d39 100644
--- a/webui/src/components/basic/ab-page-title.vue
+++ b/webui/src/components/basic/ab-page-title.vue
@@ -10,8 +10,8 @@ withDefaults(
 </script>
 
 <template>
-  <div fx-cer space-x-12px>
+  <div fx-cer gap-x-12>
     <div text-h1>{{ title }}</div>
-    <div w-160px h-3px bg-theme-row rounded-full></div>
+    <div w-160 h-3 bg-theme-row rounded-full></div>
   </div>
 </template>
diff --git a/webui/src/components/basic/ab-search.vue b/webui/src/components/basic/ab-search.vue
index 89fde8c9..f07f03c8 100644
--- a/webui/src/components/basic/ab-search.vue
+++ b/webui/src/components/basic/ab-search.vue
@@ -28,11 +28,11 @@ watch(inputValue, (val) => {
     bg="#7752B4"
     text-white
     fx-cer
-    rounded-12px
-    h-36px
-    pl-12px
-    space-x-12px
-    w-400px
+    rounded-12
+    h-36
+    pl-12
+    gap-x-12
+    w-400
     overflow-hidden
     shadow-inner
   >
@@ -58,8 +58,8 @@ watch(inputValue, (val) => {
       h-full
       f-cer
       justify-between
-      px-12px
-      w-100px
+      px-12
+      w-100
       class="provider"
       is-btn
       @click="$emit('select')"
diff --git a/webui/src/components/basic/ab-select.vue b/webui/src/components/basic/ab-select.vue
index a65166a8..e7c48ecd 100644
--- a/webui/src/components/basic/ab-select.vue
+++ b/webui/src/components/basic/ab-select.vue
@@ -67,13 +67,12 @@ watchEffect(() => {
     <div
       rel
       flex="inline col"
-      rounded-6px
-      border="1px black"
+      rounded-6
+      border="1 black"
       text-main
-      py-4px
-      px-12px
+      p="y-4 x-12"
     >
-      <ListboxButton bg-transparent fx-cer justify-between space-x-24px>
+      <ListboxButton bg-transparent fx-cer justify-between gap-x-24>
         <div>
           {{ label }}
         </div>
@@ -82,9 +81,9 @@ watchEffect(() => {
         </div>
       </ListboxButton>
 
-      <ListboxOptions mt-8px>
-        <div flex="~ items-end" justify-between space-x-24px>
-          <div flex="~ col" space-y-8px>
+      <ListboxOptions mt-8>
+        <div flex="~ items-end justify-between gap-x-24">
+          <div flex="~ col gap-y-8">
             <ListboxOption
               v-for="item in otherItems"
               v-slot="{ active }"
diff --git a/webui/src/components/basic/ab-status.vue b/webui/src/components/basic/ab-status.vue
index 4da310c4..6d46b354 100644
--- a/webui/src/components/basic/ab-status.vue
+++ b/webui/src/components/basic/ab-status.vue
@@ -10,12 +10,12 @@ withDefaults(
 </script>
 
 <template>
-  <div wh-24px f-cer>
-    <div rounded="1/2" f-cer border="2px solid white" wh-22px>
+  <div wh-24 f-cer>
+    <div rounded="1/2" f-cer border="2 solid white" wh-22>
       <div
         :class="[running ? 'bg-running' : 'bg-stopped']"
         rounded="1/2"
-        wh-10px
+        wh-10
         transition-colors
       ></div>
     </div>
diff --git a/webui/src/components/basic/ab-switch.vue b/webui/src/components/basic/ab-switch.vue
index d17c5c14..63d41e01 100644
--- a/webui/src/components/basic/ab-switch.vue
+++ b/webui/src/components/basic/ab-switch.vue
@@ -10,25 +10,25 @@ const checked = defineModel<boolean>('checked', {
   <Switch v-model="checked" as="template">
     <div
       is-btn
-      w-48px
-      h-28px
+      w-48
+      h-28
       rounded-full
       rel
       flex="inline items-center"
       transition-colors
       duration-300
-      p-3px
+      p-3
       shadow="~ inset"
       class="box"
       :class="{ checked }"
     >
       <div
-        wh-22px
+        wh-22
         rounded="1/2"
         transition-all
         duration-300
         class="slider"
-        :class="{ checked, 'translate-x-20px': checked }"
+        :class="{ checked, 'translate-x-20': checked }"
       ></div>
     </div>
   </Switch>
diff --git a/webui/src/components/basic/ab-tag.vue b/webui/src/components/basic/ab-tag.vue
index 3ae4a80b..5b11de9a 100644
--- a/webui/src/components/basic/ab-tag.vue
+++ b/webui/src/components/basic/ab-tag.vue
@@ -16,85 +16,60 @@ const InnerStyle = computed(() => {
 </script>
 
 <template>
-  <div p-1px rounded-16px inline-flex :class="type">
-    <div
-      bg-white
-      rounded-12px
-      px-8px
-      text-10px
-      truncate
-      max-w-72px
-      :class="InnerStyle"
-    >
+  <div p-1 rounded-16 inline-flex :class="type">
+    <div bg-white rounded-12 px-8 text-10 truncate max-w-72 :class="InnerStyle">
       {{ title }}
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// border
-$primary: linear-gradient(90.5deg, #492897 1.53%, #783674 96.48%);
-$warn: #892f2f;
-$inactive: #797979;
-$active: #104931;
-$notify: #f5c451;
+$primary-map: (
+  border: linear-gradient(90.5deg, #492897 1.53%, #783674 96.48%),
+  inner: #eee5f4,
+  font: #000000,
+);
 
-//inner
-$primary-inner: #eee5f4;
-$warn-inner: #ffdfdf;
-$inactive-inner: #e0e0e0;
-$active-inner: #e5f4e0;
-$notify-inner: #fff4db;
+$warn-map: (
+  border: #892f2f,
+  inner: #ffdfdf,
+  font: #892f2f,
+);
 
-//font-color
-$primary-font: #000000;
-$warn-font: #892f2f;
-$inactive-font: #3f3f3f;
-$active-font: #4c6643;
-$notify-font: #a76e18;
+$inactive-map: (
+  border: #797979,
+  inner: #e0e0e0,
+  font: #3f3f3f,
+);
 
-.primary {
-  background: $primary;
-}
+$active-map: (
+  border: #104931,
+  inner: #e5f4e0,
+  font: #4c6643,
+);
 
-.primary-inner {
-  background: $primary-inner;
-  color: $primary-font;
-}
+$notify-map: (
+  border: #f5c451,
+  inner: #fff4db,
+  font: #a76e18,
+);
 
-.warn {
-  background: $warn;
-}
+$types-map: (
+  primary: $primary-map,
+  warn: $warn-map,
+  inactive: $inactive-map,
+  active: $active-map,
+  notify: $notify-map,
+);
 
-.warn-inner {
-  background: $warn-inner;
-  color: $warn-font;
-}
+@each $type, $colors in $types-map {
+  .#{$type} {
+    background: map-get($colors, border);
 
-.inactive {
-  background: $inactive;
-}
-
-.inactive-inner {
-  background: $inactive-inner;
-  color: $inactive-font;
-}
-
-.active {
-  background: $active;
-}
-
-.active-inner {
-  background: $active-inner;
-  color: $active-font;
-}
-
-.notify {
-  background: $notify;
-}
-
-.notify-inner {
-  background: $notify-inner;
-  color: $notify-font;
+    &-inner {
+      background: map-get($colors, inner);
+      color: map-get($colors, font);
+    }
+  }
 }
 </style>
diff --git a/webui/src/components/layout/ab-sidebar.vue b/webui/src/components/layout/ab-sidebar.vue
index e0fa8b4e..73d15b2a 100644
--- a/webui/src/components/layout/ab-sidebar.vue
+++ b/webui/src/components/layout/ab-sidebar.vue
@@ -21,15 +21,15 @@ const props = withDefaults(
 );
 
 const { t } = useMyI18n();
+const { logout } = useAuth();
+const route = useRoute();
 
 const show = ref(props.open);
 const toggle = () => (show.value = !show.value);
-const route = useRoute();
-const { logout } = useAuth();
 
 const RSS = h(
   'span',
-  { class: ['rel', 'left-2px'] },
+  { class: ['rel', 'left-2'] },
   h(InlineSvg, { src: './images/RSS.svg' })
 );
 
@@ -83,20 +83,20 @@ const items = [
 
 <template>
   <div
-    :class="[show ? 'w-240px' : 'w-72px']"
+    :class="[show ? 'w-240' : 'w-72']"
     bg-theme-col
     text-white
     transition-width
-    pb-12px
-    rounded-16px
+    pb-12
+    rounded-16
   >
     <div overflow-hidden wh-full flex="~ col">
       <div
         w-full
-        h-60px
+        h-60
         is-btn
         f-cer
-        rounded-t-10px
+        rounded-t-10
         bg="#E7E7E7"
         text="#2A1C52"
         rel
@@ -111,7 +111,7 @@ const items = [
           size="24"
           fill="#2A1C52"
           abs
-          left="24px"
+          left-24
           :class="[show && 'rotate-y-180']"
         />
       </div>
@@ -123,13 +123,12 @@ const items = [
         replace
         :title="i.label()"
         fx-cer
-        px-24px
-        space-x-42px
-        h-48px
+        px-24
+        gap-x-42
+        h-48
         is-btn
         transition-colors
-        hover:bg="#F1F5FA"
-        hover:text="#2A1C52"
+        hover="bg-[#F1F5FA] text-[#2A1C52]"
         :class="[
           route.path === i.path && 'bg-[#F1F5FA] text-[#2A1C52]',
           i.hidden && 'hidden',
@@ -137,20 +136,19 @@ const items = [
       >
         <Component :is="i.icon" :size="24" />
 
-        <div text-h2>{{ i.label() }}</div>
+        <div text-h2 whitespace-nowrap>{{ i.label() }}</div>
       </RouterLink>
 
       <div
         title="logout"
         mt-auto
         fx-cer
-        px-24px
-        space-x-42px
-        h-48px
+        gap-x-42
+        px-24
+        h-48
         is-btn
         transition-colors
-        hover:bg="#F1F5FA"
-        hover:text="#2A1C52"
+        hover="bg-[#F1F5FA] text-[#2A1C52]"
         @click="logout"
       >
         <Logout :size="24" />
diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index e59b97ff..d1fa2dce 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -94,17 +94,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div h-60px bg-theme-row text-white rounded-16px fx-cer px-24px>
-    <div flex space-x-16px>
-      <div fx-cer space-x-16px>
-        <img src="/images/logo-light.svg" alt="favicon" wh-24px />
+  <div h-60 bg-theme-row text-white rounded-16 fx-cer px-24>
+    <div flex="~ gap-x-16">
+      <div fx-cer gap-x-16>
+        <img src="/images/logo-light.svg" alt="favicon" wh-24 />
         <img
           v-show="onSearchFocus === false"
           src="/images/AutoBangumi.svg"
           alt="AutoBangumi"
-          h-24px
+          h-24
           rel
-          top-2px
+          top-2
         />
       </div>
 
@@ -116,7 +116,7 @@ onUnmounted(() => {
         :items="items"
         :running="running"
         @click-add="() => (showAddRSS = true)"
-        @change-lang="() => changeLocale()"
+        @change-lang="changeLocale"
       />
     </div>
     <ab-change-account v-model:show="showAccount"></ab-change-account>
diff --git a/webui/src/components/setting/config-download.vue b/webui/src/components/setting/config-download.vue
index aee897fb..927d4968 100644
--- a/webui/src/components/setting/config-download.vue
+++ b/webui/src/components/setting/config-download.vue
@@ -13,7 +13,7 @@ const items: SettingItem<Downloader>[] = [
     configKey: 'type',
     label: () => t('config.downloader_set.type'),
     type: 'select',
-    css: 'w-115px',
+    css: 'w-115',
     prop: {
       items: downloaderType,
     },
@@ -65,7 +65,7 @@ const items: SettingItem<Downloader>[] = [
 
 <template>
   <ab-fold-panel :title="$t('config.downloader_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in items"
         :key="i.configKey"
diff --git a/webui/src/components/setting/config-manage.vue b/webui/src/components/setting/config-manage.vue
index 83d69b9e..b85c5a01 100644
--- a/webui/src/components/setting/config-manage.vue
+++ b/webui/src/components/setting/config-manage.vue
@@ -43,7 +43,7 @@ const items: SettingItem<BangumiManage>[] = [
 
 <template>
   <ab-fold-panel :title="$t('config.manage_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in items"
         :key="i.configKey"
diff --git a/webui/src/components/setting/config-normal.vue b/webui/src/components/setting/config-normal.vue
index 57cf2a7d..0cfc25cc 100644
--- a/webui/src/components/setting/config-normal.vue
+++ b/webui/src/components/setting/config-normal.vue
@@ -13,7 +13,7 @@ const programItems: SettingItem<Program>[] = [
     configKey: 'rss_time',
     label: () => t('config.normal_set.rss_interval'),
     type: 'input',
-    css: 'w-72px',
+    css: 'w-72',
     prop: {
       type: 'number',
       placeholder: 'port',
@@ -23,7 +23,7 @@ const programItems: SettingItem<Program>[] = [
     configKey: 'rename_time',
     label: () => t('config.normal_set.rename_interval'),
     type: 'input',
-    css: 'w-72px',
+    css: 'w-72',
     prop: {
       type: 'number',
       placeholder: 'port',
@@ -33,7 +33,7 @@ const programItems: SettingItem<Program>[] = [
     configKey: 'webui_port',
     label: () => t('config.normal_set.web_port'),
     type: 'input',
-    css: 'w-72px',
+    css: 'w-72',
     prop: {
       type: 'number',
       placeholder: 'port',
@@ -51,7 +51,7 @@ const logItems: SettingItem<Log> = {
 
 <template>
   <ab-fold-panel :title="$t('config.normal_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in programItems"
         :key="i.configKey"
diff --git a/webui/src/components/setting/config-notification.vue b/webui/src/components/setting/config-notification.vue
index 506d4048..c2bf5088 100644
--- a/webui/src/components/setting/config-notification.vue
+++ b/webui/src/components/setting/config-notification.vue
@@ -24,7 +24,7 @@ const items: SettingItem<Notification>[] = [
     configKey: 'type',
     label: () => t('config.notification_set.type'),
     type: 'select',
-    css: 'w-140px',
+    css: 'w-140',
     prop: {
       items: notificationType,
     },
@@ -52,7 +52,7 @@ const items: SettingItem<Notification>[] = [
 
 <template>
   <ab-fold-panel :title="$t('config.notification_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in items"
         :key="i.configKey"
diff --git a/webui/src/components/setting/config-openai.vue b/webui/src/components/setting/config-openai.vue
index d4f68a35..d6896198 100644
--- a/webui/src/components/setting/config-openai.vue
+++ b/webui/src/components/setting/config-openai.vue
@@ -80,12 +80,12 @@ const azureItems: SettingItem<ExperimentalOpenAI>[] = [
 
 <template>
   <ab-fold-panel :title="$t('config.experimental_openai_set.title')">
-    <div fx-cer gap-2 mb-4 p-2 bg-amber-300 rounded-4px>
+    <div fx-cer gap-2 mb-4 p-2 bg-amber-300 rounded-4>
       <Caution />
       <span>{{ $t('config.experimental_openai_set.warning') }}</span>
     </div>
 
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in openAI.api_type === 'azure' ? azureItems : openAIItems"
         :key="i.configKey"
diff --git a/webui/src/components/setting/config-parser.vue b/webui/src/components/setting/config-parser.vue
index 62d83aec..42d88ed4 100644
--- a/webui/src/components/setting/config-parser.vue
+++ b/webui/src/components/setting/config-parser.vue
@@ -34,7 +34,7 @@ const items: SettingItem<RssParser>[] = [
 
 <template>
   <ab-fold-panel :title="$t('config.parser_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in items"
         :key="i.configKey"
diff --git a/webui/src/components/setting/config-player.vue b/webui/src/components/setting/config-player.vue
index 11894359..e73e8cf5 100644
--- a/webui/src/components/setting/config-player.vue
+++ b/webui/src/components/setting/config-player.vue
@@ -4,7 +4,7 @@ const { types, type, url } = storeToRefs(usePlayerStore());
 
 <template>
   <ab-fold-panel :title="$t('config.media_player_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-model:data="type"
         type="select"
diff --git a/webui/src/components/setting/config-proxy.vue b/webui/src/components/setting/config-proxy.vue
index 9e98b063..8486bf86 100644
--- a/webui/src/components/setting/config-proxy.vue
+++ b/webui/src/components/setting/config-proxy.vue
@@ -64,7 +64,7 @@ const items: SettingItem<Proxy>[] = [
 
 <template>
   <ab-fold-panel :title="$t('config.proxy_set.title')">
-    <div space-y-12px>
+    <div space-y-12>
       <ab-setting
         v-for="i in items"
         :key="i.configKey"
diff --git a/webui/src/hooks/useApi.ts b/webui/src/hooks/useApi.ts
index ad2bfe78..6dff6463 100644
--- a/webui/src/hooks/useApi.ts
+++ b/webui/src/hooks/useApi.ts
@@ -1,51 +1,51 @@
 type AnyAsyncFuntion<TData = any> = (...args: any[]) => Promise<TData>;
 
+interface Options<T = any> {
+  showMessage?: boolean;
+  onBeforeExecute?: () => void;
+  onSuccess?: (data: T) => void;
+  onError?: (error: any) => void;
+  onFinally?: () => void;
+}
+
 export function useApi<
-  TError = any,
   TApi extends AnyAsyncFuntion = AnyAsyncFuntion,
   TData = Awaited<ReturnType<TApi>>
 >(
   api: TApi,
-  options?: {
-    failRule?: (data: TData) => boolean;
-    message?: {
-      success?: string;
-      fail?: string;
-      error?: string;
-    };
-  }
+  {
+    showMessage = true,
+    onBeforeExecute,
+    onSuccess,
+    onError,
+    onFinally,
+  }: Options = {}
 ) {
   const data = ref<TData>();
   const isLoading = ref(false);
 
-  const fetchResult = createEventHook<TData>();
-  const fetchError = createEventHook<TError>();
-  const fetchFinally = createEventHook();
   const message = useMessage();
+  const { returnUserLangMsg } = useMyI18n();
 
-  function execute(...params: Parameters<TApi>) {
-    isLoading.value = true;
+  async function execute(...params: Parameters<TApi>) {
+    onBeforeExecute?.();
 
-    api(...params)
-      .then((res: TData) => {
-        data.value = res;
-        fetchResult.trigger(res);
+    try {
+      isLoading.value = true;
+      const res = await api(...params);
+      data.value = res;
 
-        if (options?.failRule && options.failRule(res)) {
-          options.message?.fail && message.error(options.message.fail);
-        } else {
-          options?.message?.success && message.success(options.message.success);
-        }
-      })
-      .catch((err: TError) => {
-        fetchError.trigger(err);
+      onSuccess?.(res);
 
-        options?.message?.error && message.error(options.message.error);
-      })
-      .finally(() => {
-        isLoading.value = false;
-        fetchFinally.trigger('');
-      });
+      if (showMessage && 'msg_en' in res) {
+        message.success(returnUserLangMsg(res));
+      }
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      isLoading.value = false;
+      onFinally?.();
+    }
   }
 
   return {
@@ -53,8 +53,5 @@ export function useApi<
     isLoading,
 
     execute,
-    onResult: fetchResult.on,
-    onError: fetchError.on,
-    onFinally: fetchFinally.on,
   };
 }
diff --git a/webui/src/hooks/useAppInfo.ts b/webui/src/hooks/useAppInfo.ts
index c0eba279..0ffae341 100644
--- a/webui/src/hooks/useAppInfo.ts
+++ b/webui/src/hooks/useAppInfo.ts
@@ -1,18 +1,14 @@
 export const useAppInfo = createSharedComposable(() => {
-  const { isLoggedin } = useAuth();
+  const { isLoggedIn } = useAuth();
   const running = ref<boolean>(false);
   const version = ref<string>('');
 
   function getStatus() {
-    const { execute, onResult } = useApi(apiProgram.status);
-
-    onResult((res) => {
-      running.value = res.status;
-      version.value = res.version;
-    });
-
-    if (isLoggedin.value) {
-      execute();
+    if (isLoggedIn.value) {
+      apiProgram.status().then((res) => {
+        running.value = res.status;
+        version.value = res.version;
+      });
     }
   }
 
diff --git a/webui/src/hooks/useAuth.ts b/webui/src/hooks/useAuth.ts
index dfbdd701..f3dd4062 100644
--- a/webui/src/hooks/useAuth.ts
+++ b/webui/src/hooks/useAuth.ts
@@ -1,29 +1,40 @@
 import type { User } from '#/auth';
 import type { ApiError } from '#/api';
+import { router } from '@/router';
 
 export const useAuth = createSharedComposable(() => {
-  const isLoggedin = useLocalStorage('isLoggedin', false);
   const message = useMessage();
+  const { t } = useMyI18n();
+
+  const isLoggedIn = useLocalStorage('isLoggedIn', false);
+
+  watch(isLoggedIn, (v) => {
+    if (v) {
+      router.replace({ name: 'Index' });
+    } else {
+      router.replace({ name: 'Login' });
+    }
+  });
 
   const user = reactive<User>({
     username: '',
     password: '',
   });
 
-
   function clearUser() {
     user.username = '';
     user.password = '';
   }
 
-  function check() {
+  function formVerify() {
     if (user.username === '') {
-      message.warning('Please Enter Username!');
+      message.warning(t('notify.please_enter', [t('topbar.profile.username')]));
       return false;
-    }
-
-    if (user.password === '') {
-      message.warning('Please Enter Password!');
+    } else if (user.password === '') {
+      message.warning(t('notify.please_enter', [t('topbar.profile.password')]));
+      return false;
+    } else if (user.password.length < 8) {
+      message.error(t('notify.password_length_error'));
       return false;
     }
 
@@ -31,81 +42,53 @@ export const useAuth = createSharedComposable(() => {
   }
 
   function login() {
-    const { execute, onResult, onError } = useApi(apiAuth.login, {
-      message: {
-        success: 'Login Success!',
-      },
-    });
+    if (!formVerify()) return;
 
-    onResult((res) => {
-      isLoggedin.value = true;
-      clearUser();
-    });
-
-    onError((err) => {
-      const error = err as ApiError;
-
-      if (error.status === 404) {
-        message.error('请更新AutoBangumi!');
-      } else if (error.status === 401) {
-        message.error(err.msg_zh);
-      }
-    });
-
-    if (check()) {
-      execute(user.username, user.password);
-    }
+    apiAuth
+      .login(user.username, user.password)
+      .then(() => {
+        isLoggedIn.value = true;
+        clearUser();
+        message.success(t('notify.login_success'));
+      })
+      .catch((err: ApiError) => {
+        if (err.status === 404) {
+          message.error(t('notify.please_update'));
+        }
+      });
   }
 
-  const { execute: logout, onResult: onLogoutResult } = useApi(apiAuth.logout, {
-    failRule: (res) => !res,
-    message: {
-      success: 'Logout Success!',
-      fail: 'Logout Failed!',
+  const { execute: logout } = useApi(apiAuth.logout, {
+    showMessage: true,
+    onSuccess() {
+      clearUser();
+      isLoggedIn.value = false;
     },
   });
 
-  onLogoutResult(() => {
-    clearUser();
-    isLoggedin.value = false;
-  });
-
-  const { execute: refresh, onResult: onRefreshResult } = useApi(
-    apiAuth.refresh
-  );
-
-  onRefreshResult((res) => {
-    isLoggedin.value = true;
+  const { execute: refresh } = useApi(apiAuth.refresh, {
+    showMessage: false,
+    onSuccess() {
+      isLoggedIn.value = true;
+    },
   });
 
   function update() {
-    const { execute, onResult } = useApi(apiAuth.update, {
-      failRule: (res) => res.message !== 'update success',
-      message: {
-        success: 'Update Success!',
-        fail: 'Update Failed!',
-      },
-    });
+    if (!formVerify()) return;
 
-    onResult((res) => {
-      if (res.message === 'update success') {
+    apiAuth.update(user.username, user.password).then((res) => {
+      if (res.message.toLocaleLowerCase() === 'update success') {
         clearUser();
+        message.success(t('notify.update_success'));
       } else {
         user.password = '';
+        message.error(t('notify.update_failed'));
       }
     });
-
-    if (check()) {
-      if (user.password.length < 8) {
-        message.error('Password must be at least 8 characters long!');
-      } else {
-        execute(user.username, user.password);
-      }
-    }
   }
 
   return {
-    isLoggedin,
+    isLoggedIn,
     user,
 
     login,
diff --git a/webui/src/hooks/useMyI18n.ts b/webui/src/hooks/useMyI18n.ts
index abf46890..34669364 100644
--- a/webui/src/hooks/useMyI18n.ts
+++ b/webui/src/hooks/useMyI18n.ts
@@ -1,6 +1,7 @@
 import { createI18n } from 'vue-i18n';
 import enUS from '@/i18n/en.json';
 import zhCN from '@/i18n/zh-CN.json';
+import type { ApiSuccess } from '#/api';
 
 const messages = {
   en: enUS,
@@ -37,7 +38,15 @@ export const useMyI18n = createSharedComposable(() => {
   function returnUserLangText(texts: {
     [k in Languages]: string;
   }) {
-    return computed(() => texts[lang.value]);
+    return texts[lang.value];
+  }
+
+  function returnUserLangMsg(res: ApiSuccess) {
+    const msg = returnUserLangText({
+      en: res.msg_en,
+      'zh-CN': res.msg_zh,
+    });
+    return msg;
   }
 
   return {
@@ -46,7 +55,7 @@ export const useMyI18n = createSharedComposable(() => {
     t: i18n.global.t,
     locale: i18n.global.locale,
     changeLocale,
-    getText: returnUserLangText,
     returnUserLangText,
+    returnUserLangMsg,
   };
 });
diff --git a/webui/src/i18n/en.json b/webui/src/i18n/en.json
index b66c8092..03537a69 100644
--- a/webui/src/i18n/en.json
+++ b/webui/src/i18n/en.json
@@ -1,162 +1,175 @@
 {
-  "login": {
-    "title": "Login",
-    "username": "Username",
-    "password": "Password",
-    "login_btn": "Login",
-    "default": "Default"
-  },
-  "sidebar": {
-    "title": "Menu",
-    "homepage": "HomePage",
-    "player": "Player",
-    "log": "Log",
-    "config": "Config",
-    "logout": "Logout",
-    "downloader": "Downloader",
-    "calendar": "Calendar",
-    "rss": "RSS Manager"
-  },
-  "topbar": {
-    "start": "Start",
-    "pause": "Pause",
-    "restart": "Restart",
-    "shutdown": "Shutdown",
-    "reset_rule": "Reset Rule",
-    "refresh_poster": "Refresh Poster",
-    "search": {
-      "placeholder": "Type to search"
-    },
-    "profile": {
-      "title": "Profile",
-      "pop_title": "Change Account",
-      "username": "Username",
-      "password": "Password",
-      "update_btn": "Update"
-    },
-    "add": {
-      "title": "Add RSS",
-      "rss_link": "RSS Link",
-      "name": "Name",
-      "aggregate": "Aggregate RSS",
-      "parser": "Parser",
-      "placeholder_link": "Please enter the RSS link",
-      "placeholder_name": "Optional",
-      "button": "Add"
-    }
-  },
-  "homepage": {
-    "rule": {
-      "official_title": "Official Title",
-      "year": "Year",
-      "season": "Season",
-      "offset": "Offset",
-      "exclude": "Exclude",
-      "enable": "Enable",
-      "disable": "Disable",
-      "delete": "Delete",
-      "apply": "Apply",
-      "yes_btn": "Yes",
-      "no_btn": "No",
-      "enable_hit": "Do you want to enable this rule?",
-      "delete_hit": "Delete Local File?",
-      "enable_rule": "Enable Rule",
-      "edit_rule": "Edit Rule"
-    }
-  },
-  "rss": {
-    "title": "RSS Item",
-    "selectbox": "Select",
-    "name": "Name",
-    "url": "Url",
-    "status": "Status",
-    "delete": "Delete",
-    "disable": "Disable",
-    "enable": "Enable"
-  },
-  "player": {
-    "hit": "Please set up the media player"
-  },
-  "downloader": {
-    "hit": "Please set up the downloader"
-  },
-  "log": {
-    "title": "Log",
-    "reset": "Reset",
-    "copy": "Copy",
-    "contact_info": "Contact Infomation",
-    "go": "Go",
-    "join": "Join",
-    "bug_repo": "Bug Report"
-  },
   "config": {
-    "normal_set": {
-      "title": "Normal Setting",
-      "rss_interval": "Interval Time of Rss",
-      "rename_interval": "Interval Time of Rename",
-      "web_port": "WebUI Port",
-      "debug": "Debug"
-    },
-    "parser_set": {
-      "title": "Parser Setting",
-      "enable": "Enable",
-      "source": "Source",
-      "token": "Token",
-      "url": "Custom Url",
-      "language": "Language",
-      "type": "Parser Type",
-      "exclude": "Exclude"
-    },
+    "apply": "Apply",
+    "cancel": "Cancel",
     "downloader_set": {
-      "title": "Downloader Setting",
-      "type": "Downloader Type",
       "host": "Host",
-      "username": "Username",
       "password": "Password",
       "path": "Download Path",
-      "ssl": "SSL"
-    },
-    "manage_set": {
-      "title": "Manage Setting",
-      "enable": "Enable",
-      "method": "Rename Method",
-      "eps": "EPS complete",
-      "group_tag": "Add Group Tag",
-      "delete_bad_torrent": "Delete Bad Torrent"
-    },
-    "notification_set": {
-      "title": "Notification Setting",
-      "enable": "Enable",
-      "type": "Type",
-      "token": "Token",
-      "chat_id": "Chat ID"
-    },
-    "proxy_set": {
-      "title": "Proxy Setting",
-      "enable": "Enable",
-      "type": "Proxy Type",
-      "host": "Host",
-      "port": "Port",
-      "username": "Username",
-      "password": "Password"
+      "ssl": "SSL",
+      "title": "Downloader Setting",
+      "type": "Downloader Type",
+      "username": "Username"
     },
     "experimental_openai_set": {
-      "title": "Experimental Setting",
-      "warning": "Warning: Experimental feature is not yet stable. Please use with caution.",
-      "enable": "Enable OpenAI",
-      "api_key": "OpenAI API Key",
       "api_base": "OpenAI API Base URL (Azure entrypoint)",
-      "model": "OpenAI Model",
+      "api_key": "OpenAI API Key",
       "api_type": "OpenAI API Type",
       "api_version": "Azure OpenAI Version",
-      "deployment_id": "Azure OpenAI Deployment ID"
+      "deployment_id": "Azure OpenAI Deployment ID",
+      "enable": "Enable OpenAI",
+      "model": "OpenAI Model",
+      "title": "Experimental Setting",
+      "warning": "Warning: Experimental feature is not yet stable. Please use with caution."
+    },
+    "manage_set": {
+      "delete_bad_torrent": "Delete Bad Torrent",
+      "enable": "Enable",
+      "eps": "EPS complete",
+      "group_tag": "Add Group Tag",
+      "method": "Rename Method",
+      "title": "Manage Setting"
     },
     "media_player_set": {
       "title": "Media Player Setting",
       "type": "type",
       "url": "url"
     },
-    "cancel": "Cancel",
-    "apply": "Apply"
+    "normal_set": {
+      "debug": "Debug",
+      "rename_interval": "Interval Time of Rename",
+      "rss_interval": "Interval Time of Rss",
+      "title": "Normal Setting",
+      "web_port": "WebUI Port"
+    },
+    "notification_set": {
+      "chat_id": "Chat ID",
+      "enable": "Enable",
+      "title": "Notification Setting",
+      "token": "Token",
+      "type": "Type"
+    },
+    "parser_set": {
+      "enable": "Enable",
+      "exclude": "Exclude",
+      "language": "Language",
+      "source": "Source",
+      "title": "Parser Setting",
+      "token": "Token",
+      "type": "Parser Type",
+      "url": "Custom Url"
+    },
+    "proxy_set": {
+      "enable": "Enable",
+      "host": "Host",
+      "password": "Password",
+      "port": "Port",
+      "title": "Proxy Setting",
+      "type": "Proxy Type",
+      "username": "Username"
+    }
+  },
+  "downloader": {
+    "hit": "Please set up the downloader"
+  },
+  "homepage": {
+    "rule": {
+      "apply": "Apply",
+      "delete": "Delete",
+      "delete_hit": "Delete Local File?",
+      "disable": "Disable",
+      "edit_rule": "Edit Rule",
+      "enable": "Enable",
+      "enable_hit": "Do you want to enable this rule?",
+      "enable_rule": "Enable Rule",
+      "exclude": "Exclude",
+      "no_btn": "No",
+      "official_title": "Official Title",
+      "offset": "Offset",
+      "season": "Season",
+      "year": "Year",
+      "yes_btn": "Yes"
+    }
+  },
+  "log": {
+    "bug_repo": "Bug Report",
+    "contact_info": "Contact Infomation",
+    "copy": "Copy",
+    "go": "Go",
+    "join": "Join",
+    "reset": "Reset",
+    "title": "Log"
+  },
+  "login": {
+    "login_btn": "Login",
+    "password": "Password",
+    "title": "Login",
+    "username": "Username"
+  },
+  "notify": {
+    "copy_failed": "Your browser does not support Clipboard API!",
+    "copy_success": "Copy Success!",
+    "login_failed": "Login Failed!",
+    "login_success": "Login Success!",
+    "password_length_error": "Password must be at least 8 characters long!",
+    "please_enter": "Please Enter {0}!",
+    "please_update": "Please Update AutoBangumi!",
+    "rss_link": "RSS Link",
+    "update_failed": "Update Failed!",
+    "update_success": "Update Success!"
+  },
+  "player": {
+    "hit": "Please set up the media player"
+  },
+  "rss": {
+    "delete": "Delete",
+    "disable": "Disable",
+    "enable": "Enable",
+    "name": "Name",
+    "selectbox": "Select",
+    "status": "Status",
+    "title": "RSS Item",
+    "url": "Url"
+  },
+  "sidebar": {
+    "calendar": "Calendar",
+    "config": "Config",
+    "downloader": "Downloader",
+    "homepage": "HomePage",
+    "log": "Log",
+    "logout": "Logout",
+    "player": "Player",
+    "rss": "RSS Manager",
+    "title": "Menu"
+  },
+  "topbar": {
+    "add": {
+      "aggregate": "Aggregate RSS",
+      "button": "Add",
+      "collect": "Collect",
+      "name": "Name",
+      "parser": "Parser",
+      "placeholder_link": "Please enter the RSS link",
+      "placeholder_name": "Optional",
+      "rss_link": "RSS Link",
+      "subscribe": "Subscribe",
+      "title": "Add RSS"
+    },
+    "pause": "Pause",
+    "profile": {
+      "password": "Password",
+      "pop_title": "Change Account",
+      "title": "Profile",
+      "update_btn": "Update",
+      "username": "Username"
+    },
+    "refresh_poster": "Refresh Poster",
+    "reset_rule": "Reset Rule",
+    "restart": "Restart",
+    "search": {
+      "placeholder": "Type to search"
+    },
+    "shutdown": "Shutdown",
+    "start": "Start"
   }
 }
diff --git a/webui/src/i18n/zh-CN.json b/webui/src/i18n/zh-CN.json
index 4eae72bd..bde31b3d 100644
--- a/webui/src/i18n/zh-CN.json
+++ b/webui/src/i18n/zh-CN.json
@@ -1,162 +1,175 @@
 {
-  "login": {
-    "title": "登录",
-    "username": "用户名",
-    "password": "密码",
-    "login_btn": "登录",
-    "default": "默认账号密码"
-  },
-  "sidebar": {
-    "title": "菜单",
-    "homepage": "主页",
-    "player": "播放器",
-    "log": "日志",
-    "config": "设置",
-    "logout": "退出",
-    "calendar": "番剧日历",
-    "downloader": "下载器",
-    "rss": "RSS 管理"
-  },
-  "topbar": {
-    "start": "启动",
-    "pause": "暂停",
-    "restart": "重启",
-    "shutdown": "关闭",
-    "reset_rule": "重置规则",
-    "refresh_poster": "刷新海报",
-    "search": {
-      "placeholder": "输入关键字搜索"
-    },
-    "profile": {
-      "title": "账户设置",
-      "pop_title": "修改账户",
-      "username": "用户名",
-      "password": "密码",
-      "update_btn": "更新"
-    },
-    "add": {
-      "title": "添加 RSS",
-      "rss_link": "RSS 链接",
-      "name": "名称",
-      "aggregate": "聚合 RSS",
-      "parser": "解析器",
-      "placeholder_link": "请输入 RSS 链接",
-      "placeholder_name": "可选",
-      "button": "添加"
-    }
-  },
-  "homepage": {
-    "rule": {
-      "official_title": "官方名称",
-      "year": "年份",
-      "season": "季度",
-      "offset": "剧集偏移",
-      "exclude": "排除",
-      "enable": "启用",
-      "disable": "禁用",
-      "delete": "删除",
-      "apply": "应用",
-      "yes_btn": "是",
-      "no_btn": "否",
-      "enable_hit": "确定启用该规则？",
-      "delete_hit": "是否删除本地文件？",
-      "enable_rule": "启用规则",
-      "edit_rule": "编辑规则"
-    }
-  },
-  "rss": {
-    "title": "RSS 条目",
-    "selectbox": "选择",
-    "name": "名称",
-    "url": "Url",
-    "status": "状态",
-    "delete": "删除",
-    "disable": "禁用",
-    "enable": "启用"
-  },
-  "player": {
-    "hit": "请设置媒体播放器地址"
-  },
-  "downloader": {
-    "hit": "请设置下载器"
-  },
-  "log": {
-    "title": "日志",
-    "reset": "重置",
-    "copy": "复制",
-    "contact_info": "联系方式",
-    "go": "访问",
-    "join": "加入",
-    "bug_repo": "Bug 反馈"
-  },
   "config": {
-    "normal_set": {
-      "title": "常规设置",
-      "rss_interval": "RSS 间隔",
-      "rename_interval": "重命名间隔",
-      "web_port": "网页端口",
-      "debug": "调试"
-    },
-    "parser_set": {
-      "title": "解析设置",
-      "enable": "启用",
-      "source": "数据源",
-      "token": "Token",
-      "url": "自定义网址",
-      "language": "语言",
-      "type": "解析类型",
-      "exclude": "排除"
-    },
+    "apply": "应用",
+    "cancel": "取消",
     "downloader_set": {
-      "title": "下载设置",
-      "type": "下载器类型",
       "host": "下载器地址",
-      "username": "用户名",
       "password": "密码",
       "path": "下载地址",
-      "ssl": "SSL"
-    },
-    "manage_set": {
-      "title": "番剧管理设置",
-      "enable": "启用",
-      "method": "重命名方式",
-      "eps": "番剧补全",
-      "group_tag": "添加组标签",
-      "delete_bad_torrent": "删除坏种"
-    },
-    "notification_set": {
-      "title": "通知设置",
-      "enable": "启用",
-      "type": "类型",
-      "token": "Token",
-      "chat_id": "Chat ID"
-    },
-    "proxy_set": {
-      "title": "代理设置",
-      "enable": "启用",
-      "type": "类型",
-      "host": "地址",
-      "port": "端口",
-      "username": "用户名",
-      "password": "密码"
+      "ssl": "SSL",
+      "title": "下载设置",
+      "type": "下载器类型",
+      "username": "用户名"
     },
     "experimental_openai_set": {
-      "title": "实验功能设置",
-      "warning": "警告：实验功能尚未稳定，请谨慎使用",
-      "enable": "启用 OpenAI",
-      "api_key": "OpenAI API Key",
       "api_base": "OpenAI API Base URL (Azure entrypoint)",
-      "model": "OpenAI 模型",
+      "api_key": "OpenAI API Key",
       "api_type": "OpenAI API 类型",
       "api_version": "Azure OpenAI 版本",
-      "deployment_id": "Azure OpenAI Deployment ID"
+      "deployment_id": "Azure OpenAI Deployment ID",
+      "enable": "启用 OpenAI",
+      "model": "OpenAI 模型",
+      "title": "实验功能设置",
+      "warning": "警告：实验功能尚未稳定，请谨慎使用"
+    },
+    "manage_set": {
+      "delete_bad_torrent": "删除坏种",
+      "enable": "启用",
+      "eps": "番剧补全",
+      "group_tag": "添加组标签",
+      "method": "重命名方式",
+      "title": "番剧管理设置"
     },
     "media_player_set": {
       "title": "播放器设置",
       "type": "类型",
       "url": "播放器地址"
     },
-    "cancel": "取消",
-    "apply": "应用"
+    "normal_set": {
+      "debug": "调试",
+      "rename_interval": "重命名间隔",
+      "rss_interval": "RSS 间隔",
+      "title": "常规设置",
+      "web_port": "网页端口"
+    },
+    "notification_set": {
+      "chat_id": "Chat ID",
+      "enable": "启用",
+      "title": "通知设置",
+      "token": "Token",
+      "type": "类型"
+    },
+    "parser_set": {
+      "enable": "启用",
+      "exclude": "排除",
+      "language": "语言",
+      "source": "数据源",
+      "title": "解析设置",
+      "token": "Token",
+      "type": "解析类型",
+      "url": "自定义网址"
+    },
+    "proxy_set": {
+      "enable": "启用",
+      "host": "地址",
+      "password": "密码",
+      "port": "端口",
+      "title": "代理设置",
+      "type": "类型",
+      "username": "用户名"
+    }
+  },
+  "downloader": {
+    "hit": "请设置下载器"
+  },
+  "homepage": {
+    "rule": {
+      "apply": "应用",
+      "delete": "删除",
+      "delete_hit": "是否删除本地文件？",
+      "disable": "禁用",
+      "edit_rule": "编辑规则",
+      "enable": "启用",
+      "enable_hit": "确定启用该规则？",
+      "enable_rule": "启用规则",
+      "exclude": "排除",
+      "no_btn": "否",
+      "official_title": "官方名称",
+      "offset": "剧集偏移",
+      "season": "季度",
+      "year": "年份",
+      "yes_btn": "是"
+    }
+  },
+  "log": {
+    "bug_repo": "Bug 反馈",
+    "contact_info": "联系方式",
+    "copy": "复制",
+    "go": "访问",
+    "join": "加入",
+    "reset": "重置",
+    "title": "日志"
+  },
+  "login": {
+    "login_btn": "登录",
+    "password": "密码",
+    "title": "登录",
+    "username": "用户名"
+  },
+  "notify": {
+    "copy_failed": "您的浏览器不支持剪贴板操作!",
+    "copy_success": "复制成功!",
+    "login_failed": "登录失败!",
+    "login_success": "登录成功!",
+    "password_length_error": "密码长度必须至少为8个字符!",
+    "please_enter": "请输入{0}!",
+    "please_update": "请更新AutoBangumi!",
+    "rss_link": "RSS链接",
+    "update_failed": "更新失败!",
+    "update_success": "更新成功!"
+  },
+  "player": {
+    "hit": "请设置媒体播放器地址"
+  },
+  "rss": {
+    "delete": "删除",
+    "disable": "禁用",
+    "enable": "启用",
+    "name": "名称",
+    "selectbox": "选择",
+    "status": "状态",
+    "title": "RSS 条目",
+    "url": "Url"
+  },
+  "sidebar": {
+    "calendar": "番剧日历",
+    "config": "设置",
+    "downloader": "下载器",
+    "homepage": "主页",
+    "log": "日志",
+    "logout": "退出",
+    "player": "播放器",
+    "rss": "RSS 管理",
+    "title": "菜单"
+  },
+  "topbar": {
+    "add": {
+      "aggregate": "聚合 RSS",
+      "button": "添加",
+      "collect": "收集",
+      "name": "名称",
+      "parser": "解析器",
+      "placeholder_link": "请输入 RSS 链接",
+      "placeholder_name": "可选",
+      "rss_link": "RSS 链接",
+      "subscribe": "订阅",
+      "title": "添加 RSS"
+    },
+    "pause": "暂停",
+    "profile": {
+      "password": "密码",
+      "pop_title": "修改账户",
+      "title": "账户设置",
+      "update_btn": "更新",
+      "username": "用户名"
+    },
+    "refresh_poster": "刷新海报",
+    "reset_rule": "重置规则",
+    "restart": "重启",
+    "search": {
+      "placeholder": "输入关键字搜索"
+    },
+    "shutdown": "关闭",
+    "start": "启动"
   }
 }
diff --git a/webui/src/pages/index.vue b/webui/src/pages/index.vue
index 7ef43097..baadeda4 100644
--- a/webui/src/pages/index.vue
+++ b/webui/src/pages/index.vue
@@ -6,13 +6,13 @@ definePage({
 </script>
 
 <template>
-  <div layout-container>
+  <div class="layout-container">
     <ab-topbar />
 
-    <main layout-main>
+    <main class="layout-main">
       <ab-sidebar />
 
-      <div layout-content>
+      <div class="layout-content">
         <ab-page-title :title="$route.name"></ab-page-title>
 
         <RouterView v-slot="{ Component }">
@@ -24,3 +24,35 @@ definePage({
     </main>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.layout-container {
+  width: 100%;
+  height: 100%;
+  min-width: 1024px;
+  min-height: 768px;
+  padding: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  background: #f0f0f0;
+}
+
+.layout-main {
+  display: flex;
+  gap: 20px;
+
+  overflow: hidden;
+  height: calc(100vh - 2 * 16px - 60px - 12px);
+}
+
+.layout-content {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+</style>
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index dcc84055..554066f9 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+definePage({
+  name: 'Bangumi List',
+});
+
 const { bangumi, editRule } = storeToRefs(useBangumiStore());
 const { getAll, updateRule, enableRule, openEditPopup, ruleManage } =
   useBangumiStore();
@@ -6,22 +10,12 @@ const { getAll, updateRule, enableRule, openEditPopup, ruleManage } =
 onActivated(() => {
   getAll();
 });
-
-definePage({
-  name: 'Bangumi List',
-});
 </script>
 
 <template>
-  <div overflow-auto mt-12px flex-grow>
+  <div overflow-auto mt-12 flex-grow>
     <div>
-      <transition-group
-        name="bangumi"
-        tag="div"
-        flex="~ wrap"
-        gap-y-12px
-        gap-x-32px
-      >
+      <transition-group name="bangumi" tag="div" flex="~ wrap" gap="x-32 y-12">
         <ab-bangumi-card
           v-for="i in bangumi"
           :key="i.id"
diff --git a/webui/src/pages/index/config.vue b/webui/src/pages/index/config.vue
index 629e9af6..cecbd8d7 100644
--- a/webui/src/pages/index/config.vue
+++ b/webui/src/pages/index/config.vue
@@ -1,18 +1,20 @@
 <script lang="ts" setup>
-const { getConfig, setConfig } = useConfigStore();
-
-getConfig();
-
 definePage({
   name: 'Config',
 });
+
+const { getConfig, setConfig } = useConfigStore();
+
+onActivated(() => {
+  getConfig();
+});
 </script>
 
 <template>
-  <div overflow-auto mt-12px flex-grow>
+  <div overflow-auto mt-12 flex-grow>
     <div h-full flex="~ col">
-      <div grid="~ cols-2" gap-20px mb-auto>
-        <div space-y-20px>
+      <div grid="~ cols-2 gap-20" mb-auto>
+        <div space-y-20>
           <config-normal></config-normal>
 
           <config-parser></config-parser>
@@ -22,7 +24,7 @@ definePage({
           <config-manage></config-manage>
         </div>
 
-        <div space-y-20px>
+        <div space-y-20>
           <config-notification></config-notification>
 
           <config-proxy></config-proxy>
@@ -33,7 +35,7 @@ definePage({
         </div>
       </div>
 
-      <div fx-cer justify-end gap-8px mt-20px>
+      <div fx-cer justify-end gap-8 mt-20>
         <ab-button type="warn" @click="getConfig">
           {{ $t('config.cancel') }}
         </ab-button>
diff --git a/webui/src/pages/index/downloader.vue b/webui/src/pages/index/downloader.vue
index 28ea863f..f6211eea 100644
--- a/webui/src/pages/index/downloader.vue
+++ b/webui/src/pages/index/downloader.vue
@@ -6,8 +6,6 @@ definePage({
 const { config } = storeToRefs(useConfigStore());
 const { getConfig } = useConfigStore();
 
-getConfig();
-
 const isNull = computed(() => {
   return config.value.downloader.host === '';
 });
@@ -19,10 +17,14 @@ const url = computed(() => {
 
   return `${protocol}://${host}`;
 });
+
+onActivated(() => {
+  getConfig();
+});
 </script>
 
 <template>
-  <div overflow-auto mt-12px flex-grow>
+  <div overflow-auto mt-12 flex-grow>
     <template v-if="isNull">
       <div wh-full f-cer text-h1 text-primary>
         <RouterLink to="/config" hover:underline>{{
@@ -35,10 +37,9 @@ const url = computed(() => {
       :src="url"
       frameborder="0"
       allowfullscreen="true"
-      w-full
-      h-full
+      wh-full
       flex-1
-      rounded-12px
+      rounded-12
     ></iframe>
   </div>
 </template>
diff --git a/webui/src/pages/index/log.vue b/webui/src/pages/index/log.vue
index e833dab1..e6fb5792 100644
--- a/webui/src/pages/index/log.vue
+++ b/webui/src/pages/index/log.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+definePage({
+  name: 'Log',
+});
+
 const { onUpdate, offUpdate, reset, copy } = useLogStore();
 const { log } = storeToRefs(useLogStore());
 const { version } = useAppInfo();
@@ -10,37 +14,30 @@ onActivated(() => {
 onDeactivated(() => {
   offUpdate();
 });
-
-definePage({
-  name: 'Log',
-});
 </script>
 
 <template>
-  <div overflow-auto mt-12px flex-grow>
-    <div flex="~ wrap" gap-12px>
-      <ab-container :title="$t('log.title')" w-660px grow>
-        <div
-          rounded-10px
-          border="1px solid black"
-          overflow-auto
-          p-10px
-          max-h-60vh
-        >
+  <div overflow-auto mt-12 flex-grow>
+    <div flex="~ wrap gap-12">
+      <ab-container :title="$t('log.title')" w-660 grow>
+        <div rounded-10 border="1 solid black" overflow-auto p-10 max-h-60vh>
           <pre text-main>{{ log }}</pre>
         </div>
 
-        <div flex="~ justify-end" space-x-10px mt-12px>
-          <ab-button type="warn" size="small" @click="reset">{{
-            $t('log.reset')
-          }}</ab-button>
-          <ab-button size="small" @click="copy">{{ $t('log.copy') }}</ab-button>
+        <div flex="~ justify-end gap-x-10" mt-12>
+          <ab-button type="warn" size="small" @click="reset">
+            {{ $t('log.reset') }}
+          </ab-button>
+
+          <ab-button size="small" @click="copy">
+            {{ $t('log.copy') }}
+          </ab-button>
         </div>
       </ab-container>
 
-      <div grow w-500px space-y-20px>
+      <div grow w-500 space-y-20>
         <ab-container :title="$t('log.contact_info')">
-          <div space-y-12px>
+          <div space-y-12>
             <ab-label label="Github">
               <ab-button
                 size="small"
@@ -86,20 +83,21 @@ definePage({
         </ab-container>
 
         <ab-container :title="$t('log.bug_repo')">
-          <div space-y-12px>
+          <div space-y-12>
             <ab-button
               mx-auto
-              text-16px
-              w-300px
-              h-46px
-              rounded-10px
+              text-16
+              w-300
+              h-46
+              rounded-10
               link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
-              >Github Issue</ab-button
             >
+              Github Issues
+            </ab-button>
 
             <div line></div>
 
-            <div text-center text-primary text-h3>
+            <div text="center primary h3">
               <span>Version: </span>
               <span>{{ version }}</span>
             </div>
diff --git a/webui/src/pages/index/player.vue b/webui/src/pages/index/player.vue
index 57951233..27338c51 100644
--- a/webui/src/pages/index/player.vue
+++ b/webui/src/pages/index/player.vue
@@ -7,7 +7,7 @@ const { url } = storeToRefs(usePlayerStore());
 </script>
 
 <template>
-  <div overflow-auto mt-12px flex-grow>
+  <div overflow-auto mt-12 flex-grow>
     <template v-if="url === ''">
       <div wh-full f-cer text-h1 text-primary>
         <RouterLink to="/config" hover:underline>{{
@@ -20,10 +20,9 @@ const { url } = storeToRefs(usePlayerStore());
       :src="url"
       frameborder="0"
       allowfullscreen="true"
-      w-full
-      h-full
+      wh-full
       flex-1
-      rounded-12px
+      rounded-12
     ></iframe>
   </div>
 </template>
diff --git a/webui/src/pages/index/rss.vue b/webui/src/pages/index/rss.vue
index 17a2d91c..bbb93a7c 100644
--- a/webui/src/pages/index/rss.vue
+++ b/webui/src/pages/index/rss.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+definePage({
+  name: 'RSS',
+});
+
 const { rss, selectedRSS } = storeToRefs(useRSSStore());
 const { getAll, deleteSelected, disableSelected, enableSelected } =
   useRSSStore();
@@ -6,9 +10,6 @@ const { getAll, deleteSelected, disableSelected, enableSelected } =
 onActivated(() => {
   getAll();
 });
-definePage({
-  name: 'RSS',
-});
 
 function addSelected(checked: boolean, id: number) {
   if (!checked) {
@@ -20,10 +21,10 @@ function addSelected(checked: boolean, id: number) {
 </script>
 
 <template>
-  <div overflow-auto mt-12px flex-grow>
+  <div overflow-auto mt-12 flex-grow>
     <ab-container :title="$t('rss.title')">
-      <div flex justify-between>
-        <div flex space-x-40px>
+      <div flex="~ justify-between">
+        <div flex="~ gap-x-40">
           <div text-h3>{{ $t('rss.selectbox') }}</div>
           <div class="spacer-1"></div>
           <div text-h3>{{ $t('rss.name') }}</div>
@@ -34,8 +35,8 @@ function addSelected(checked: boolean, id: number) {
           <div text-h3>{{ $t('rss.status') }}</div>
         </div>
       </div>
-      <div line my-12px></div>
-      <div space-y-12px>
+      <div line my-12></div>
+      <div space-y-12>
         <ab-rss-item
           v-for="i in rss"
           :id="i.id"
@@ -50,8 +51,8 @@ function addSelected(checked: boolean, id: number) {
         </ab-rss-item>
       </div>
       <div v-if="selectedRSS.length > 0">
-        <div line my-12px></div>
-        <div flex="~ justify-end" space-x-10px>
+        <div line my-12></div>
+        <div flex="~ justify-end gap-x-10">
           <ab-button @click="enableSelected">{{ $t('rss.enable') }}</ab-button>
           <ab-button @click="disableSelected">{{
             $t('rss.disable')
diff --git a/webui/src/pages/login.vue b/webui/src/pages/login.vue
index 5268e287..68765987 100644
--- a/webui/src/pages/login.vue
+++ b/webui/src/pages/login.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-const { user, login } = useAuth();
-
 definePage({
   name: 'Login',
 });
+
+const { user, login } = useAuth();
 </script>
 
 <template>
-  <div f-cer layout-container>
-    <ab-container :title="$t('login.title')" w-365px>
-      <div space-y-16px>
+  <div wh-screen f-cer bg-page>
+    <ab-container :title="$t('login.title')" w-365>
+      <div space-y-16>
         <ab-label :label="$t('login.username')">
           <input
             v-model="user.username"
@@ -32,9 +32,9 @@ definePage({
         <div line></div>
 
         <div flex="~ justify-end">
-          <ab-button size="small" @click="login">{{
-            $t('login.login_btn')
-          }}</ab-button>
+          <ab-button size="small" @click="login">
+            {{ $t('login.login_btn') }}
+          </ab-button>
         </div>
       </div>
     </ab-container>
diff --git a/webui/src/router/index.ts b/webui/src/router/index.ts
index 4e620998..6e21876a 100644
--- a/webui/src/router/index.ts
+++ b/webui/src/router/index.ts
@@ -5,14 +5,12 @@ const router = createRouter({
 });
 
 router.beforeEach((to) => {
-  const { isLoggedin } = useAuth();
+  const { isLoggedIn } = useAuth();
   const { type, url } = storeToRefs(usePlayerStore());
 
-  if (!isLoggedin.value && to.path !== '/login') {
+  if (!isLoggedIn.value && to.path !== '/login') {
     return { name: 'Login' };
-  }
-
-  if (isLoggedin.value && to.path === '/login') {
+  } else if (isLoggedIn.value && to.path === '/login') {
     return { name: 'Index' };
   }
 
@@ -20,15 +18,6 @@ router.beforeEach((to) => {
     open(url.value);
     return false;
   }
-
-  watch(isLoggedin, (val) => {
-    if (to.path === '/login' && val) {
-      router.replace({ name: 'Index' });
-    }
-    if (to.path !== '/login' && !val) {
-      router.replace({ name: 'Login' });
-    }
-  });
 });
 
 export { router };
diff --git a/webui/src/store/bangumi.ts b/webui/src/store/bangumi.ts
index 04dcb8c7..d28fe672 100644
--- a/webui/src/store/bangumi.ts
+++ b/webui/src/store/bangumi.ts
@@ -1,10 +1,7 @@
 import type { BangumiRule } from '#/bangumi';
 import { ruleTemplate } from '#/bangumi';
-import type { ApiSuccess } from '#/api';
 
 export const useBangumiStore = defineStore('bangumi', () => {
-  const message = useMessage();
-
   const bangumi = ref<BangumiRule[]>();
   const editRule = reactive<{
     show: boolean;
@@ -14,51 +11,33 @@ export const useBangumiStore = defineStore('bangumi', () => {
     item: ruleTemplate,
   });
 
-  const { execute: getAll, onResult: onBangumiResult } = useApi(
-    apiBangumi.getAll
-  );
-  const { execute: updateRule, onResult: onUpdateRuleResult } = useApi(
-    apiBangumi.updateRule
-  );
-  const { execute: enableRule, onResult: onEnableRuleResult } = useApi(
-    apiBangumi.enableRule
-  );
-  const { execute: disableRule, onResult: onDisableRuleResult } = useApi(
-    apiBangumi.disableRule
-  );
-  const { execute: deleteRule, onResult: onDeleteRuleResult } = useApi(
-    apiBangumi.deleteRule
-  );
-  const { execute: refreshPoster, onResult: onRefreshPosterResult } = useApi(
-    apiBangumi.refreshPoster
-  );
-
-  onBangumiResult((res) => {
-    function sort(arr: BangumiRule[]) {
-      return arr.sort((a, b) => b.id - a.id);
-    }
+  async function getAll() {
+    const res = await apiBangumi.getAll();
+    const sort = (arr: BangumiRule[]) => arr.sort((a, b) => b.id - a.id);
 
     const enabled = sort(res.filter((e) => !e.deleted));
     const disabled = sort(res.filter((e) => e.deleted));
 
     bangumi.value = [...enabled, ...disabled];
-  });
+  }
 
-  function refresh() {
+  function refreshData() {
     editRule.show = false;
     getAll();
   }
 
-  function actionSuccess(apiRes: ApiSuccess) {
-    message.success(apiRes.msg_en);
-    refresh();
-  }
+  const opts = {
+    showMessage: true,
+    onSuccess() {
+      refreshData();
+    },
+  };
 
-  onUpdateRuleResult(actionSuccess);
-  onDisableRuleResult(actionSuccess);
-  onEnableRuleResult(actionSuccess);
-  onDeleteRuleResult(actionSuccess);
-  onRefreshPosterResult(actionSuccess);
+  const { execute: updateRule } = useApi(apiBangumi.updateRule, opts);
+  const { execute: enableRule } = useApi(apiBangumi.enableRule, opts);
+  const { execute: disableRule } = useApi(apiBangumi.disableRule, opts);
+  const { execute: deleteRule } = useApi(apiBangumi.deleteRule, opts);
+  const { execute: refreshPoster } = useApi(apiBangumi.refreshPoster, opts);
 
   function openEditPopup(data: BangumiRule) {
     editRule.show = true;
@@ -70,11 +49,14 @@ export const useBangumiStore = defineStore('bangumi', () => {
     id: number,
     deleteFile: boolean
   ) {
-    if (type === 'disable') {
-      disableRule(id, deleteFile);
-    }
-    if (type === 'delete') {
-      deleteRule(id, deleteFile);
+    switch (type) {
+      case 'disable':
+        disableRule(id, deleteFile);
+        break;
+
+      case 'delete':
+        deleteRule(id, deleteFile);
+        break;
     }
   }
 
diff --git a/webui/src/store/config.ts b/webui/src/store/config.ts
index b3cdbc52..2a0ca730 100644
--- a/webui/src/store/config.ts
+++ b/webui/src/store/config.ts
@@ -3,37 +3,20 @@ import { type Config, initConfig } from '#/config';
 export const useConfigStore = defineStore('config', () => {
   const config = ref<Config>(initConfig);
 
-  const { execute: getConfig, onResult: onGetConfigRusult } = useApi(
-    apiConfig.getConfig
-  );
-
-  onGetConfigRusult((res) => {
+  async function getConfig() {
+    const res = await apiConfig.getConfig();
     config.value = res;
+  }
+
+  const { execute: setConfig } = useApi(apiConfig.updateConfig, {
+    showMessage: true,
+    onSuccess() {
+      // 保存 config 后重启，以应用最新配置
+      const { restart } = useProgramStore();
+      restart();
+    },
   });
 
-  const { execute: set, onResult: onSetRusult } = useApi(
-    apiConfig.updateConfig,
-    {
-      failRule: (res) => !res,
-      message: {
-        success: 'Apply Success!',
-        fail: 'Apply Failed!',
-      },
-    }
-  );
-
-  /**
-   * 保持 config 后重启，以应用最新配置
-   */
-  onSetRusult(() => {
-    const { restart } = useProgramStore();
-    restart();
-  });
-
-  const setConfig = () => {
-    set(config.value);
-  };
-
   function getSettingGroup<Tkey extends keyof Config>(key: Tkey) {
     return computed<Config[Tkey]>({
       get() {
diff --git a/webui/src/store/log.ts b/webui/src/store/log.ts
index cba83721..80de37dc 100644
--- a/webui/src/store/log.ts
+++ b/webui/src/store/log.ts
@@ -1,28 +1,23 @@
 export const useLogStore = defineStore('log', () => {
-  const log = ref('');
-  const { isLoggedin } = useAuth();
   const message = useMessage();
+  const { isLoggedIn } = useAuth();
+  const { t } = useMyI18n();
+
+  const log = ref('');
 
   function get() {
-    const { execute, onResult } = useApi(apiLog.getLog);
-
-    onResult((value) => {
-      log.value = value;
-    });
-
-    if (isLoggedin.value) {
-      execute();
+    if (isLoggedIn.value) {
+      apiLog.getLog().then((res) => {
+        log.value = res;
+      });
     }
   }
 
-  const { execute: reset, onResult: onClearLogResult } = useApi(
-    apiLog.clearLog
-  );
-
-  onClearLogResult((res) => {
-    if (res) {
+  const { execute: reset } = useApi(apiLog.clearLog, {
+    showMessage: true,
+    onSuccess() {
       log.value = '';
-    }
+    },
   });
 
   const { pause: offUpdate, resume: onUpdate } = useIntervalFn(get, 3000, {
@@ -34,9 +29,9 @@ export const useLogStore = defineStore('log', () => {
     const { copy: copyLog, isSupported } = useClipboard({ source: log });
     if (isSupported) {
       copyLog();
-      message.success('Copy Success!');
+      message.success(t('notify.copy_success'));
     } else {
-      message.error('Your browser does not support Clipboard API!');
+      message.error(t('notify.copy_failed'));
     }
   }
 
diff --git a/webui/src/store/program.ts b/webui/src/store/program.ts
index 23da96bb..44f09d51 100644
--- a/webui/src/store/program.ts
+++ b/webui/src/store/program.ts
@@ -1,22 +1,9 @@
 export const useProgramStore = defineStore('program', () => {
-  function opts(handle: string) {
-    return {
-      failRule: (res: boolean) => !res,
-      message: {
-        success: `${handle} Success!`,
-        fail: `${handle} Failed!`,
-      },
-    };
-  }
-
-  const { execute: start } = useApi(apiProgram.start, opts('Start'));
-  const { execute: pause } = useApi(apiProgram.stop, opts('Pause'));
-  const { execute: shutdown } = useApi(apiProgram.shutdown, opts('Shutdown'));
-  const { execute: restart } = useApi(apiProgram.restart, opts('Restart'));
-  const { execute: resetRule } = useApi(
-    apiBangumi.resetAll,
-    opts('Reset Rule')
-  );
+  const { execute: start } = useApi(apiProgram.start);
+  const { execute: pause } = useApi(apiProgram.stop);
+  const { execute: shutdown } = useApi(apiProgram.shutdown);
+  const { execute: restart } = useApi(apiProgram.restart);
+  const { execute: resetRule } = useApi(apiBangumi.resetAll);
 
   return {
     start,
diff --git a/webui/src/store/rss.ts b/webui/src/store/rss.ts
index 511d42b6..cfba9874 100644
--- a/webui/src/store/rss.ts
+++ b/webui/src/store/rss.ts
@@ -1,27 +1,12 @@
 import type { RSS } from '#/rss';
-import type { ApiSuccess } from '#/api';
 
 export const useRSSStore = defineStore('rss', () => {
-  const message = useMessage();
   const rss = ref<RSS[]>();
   const selectedRSS = ref<number[]>([]);
 
-  const { execute: getAll, onResult: onRSSResult } = useApi(apiRSS.get);
-  const { execute: updateRSS, onResult: onUpdateRSSResult } = useApi(
-    apiRSS.update
-  );
-  const { execute: disableRSS, onResult: onDisableRSSResult } = useApi(
-    apiRSS.disableMany
-  );
-  const { execute: deleteRSS, onResult: onDeleteRSSResult } = useApi(
-    apiRSS.deleteMany
-  );
+  async function getAll() {
+    const res = await apiRSS.get();
 
-  const { execute: enableRSS, onResult: onEnableRSSResult } = useApi(
-    apiRSS.enableMany
-  );
-
-  onRSSResult((res) => {
     function sort(arr: RSS[]) {
       return arr.sort((a, b) => b.id - a.id);
     }
@@ -30,40 +15,33 @@ export const useRSSStore = defineStore('rss', () => {
     const disabled = sort(res.filter((e) => !e.enabled));
 
     rss.value = [...enabled, ...disabled];
-  });
-
-  function refresh() {
-    getAll();
   }
 
-  function disableSelected() {
-    disableRSS(selectedRSS.value);
-  }
+  const opts = {
+    showMessage: true,
+    onSuccess() {
+      getAll();
+    },
+  };
 
-  function deleteSelected() {
-    deleteRSS(selectedRSS.value);
-  }
+  const { execute: updateRSS } = useApi(apiRSS.update, opts);
+  const { execute: disableRSS } = useApi(apiRSS.disableMany, opts);
+  const { execute: deleteRSS } = useApi(apiRSS.deleteMany, opts);
+  const { execute: enableRSS } = useApi(apiRSS.enableMany, opts);
 
-  function enableSelected() {
-    enableRSS(selectedRSS.value);
-  }
-
-  function actionSuccess(apiRes: ApiSuccess) {
-    message.success(apiRes.msg_en);
-    refresh();
-  }
-
-  onUpdateRSSResult(actionSuccess);
-  onDeleteRSSResult(actionSuccess);
-  onDisableRSSResult(actionSuccess);
-  onEnableRSSResult(actionSuccess);
+  const disableSelected = () => disableRSS(selectedRSS.value);
+  const deleteSelected = () => deleteRSS(selectedRSS.value);
+  const enableSelected = () => enableRSS(selectedRSS.value);
 
   return {
     rss,
-    getAll,
-    refresh,
     selectedRSS,
+
+    getAll,
     updateRSS,
+    disableRSS,
+    deleteRSS,
+    enableRSS,
     disableSelected,
     deleteSelected,
     enableSelected,
diff --git a/webui/src/store/search.ts b/webui/src/store/search.ts
index ffd9ec70..a86114f1 100644
--- a/webui/src/store/search.ts
+++ b/webui/src/store/search.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue';
 import { EMPTY, Subject, debounceTime, switchMap, tap } from 'rxjs';
 import type { BangumiRule, SearchResult } from '#/bangumi';
 
-export function useSearchStore() {
+export const useSearchStore = defineStore('search', () => {
   const bangumiList = ref<SearchResult[]>([]);
   const inputValue = ref<string>('');
 
@@ -18,13 +18,11 @@ export function useSearchStore() {
     loading.value = !!input;
   });
 
-  const { execute: getProviders, onResult: onGetProvidersResult } = useApi(
-    apiSearch.getProvider
-  );
-
-  onGetProvidersResult((res) => {
-    providers.value = res;
-  });
+  function getProviders() {
+    apiSearch.getProvider().then((res) => {
+      providers.value = res;
+    });
+  }
 
   /**
    * - 输入中 debounce 600ms 后触发搜索
@@ -64,12 +62,13 @@ export function useSearchStore() {
     input$,
     bangumiInfo$,
     inputValue,
-    onSearch,
-    clearSearch,
     loading,
     provider,
-    getProviders,
     providers,
     bangumiList,
+
+    onSearch,
+    clearSearch,
+    getProviders,
   };
-}
+});
diff --git a/webui/src/utils/axios.ts b/webui/src/utils/axios.ts
index 01de5600..a3331ba8 100644
--- a/webui/src/utils/axios.ts
+++ b/webui/src/utils/axios.ts
@@ -1,7 +1,10 @@
 import Axios from 'axios';
-import type { ApiError } from '#/api';
+import type { AxiosError, AxiosResponse } from 'axios';
+import type { ApiSuccess, StatusCode } from '#/api';
 
-export const axios = Axios.create();
+export const axios = Axios.create({
+  withCredentials: true,
+});
 
 // axios.interceptors.request.use((config) => {
 //   const { auth } = useAuth();
@@ -14,16 +17,44 @@ export const axios = Axios.create();
 // });
 
 // axios.defaults.baseURL = '/api/v1';
-axios.defaults.withCredentials = true;
+// axios.defaults.withCredentials = true;
 
 axios.interceptors.response.use(
-  (res) => {
-    return res;
-  },
-  (err) => {
-    const status = err.response.status as ApiError['status'];
-    const msg_en = (err.response.data.msg_en ?? '') as ApiError['msg_en'];
-    const msg_zh = (err.response.data.msg_zh ?? '') as ApiError['msg_zh'];
+  (res: AxiosResponse) => res,
+  (err: AxiosError<ApiSuccess>) => {
+    const status = err.response?.status as StatusCode;
+    const msg_en = err.response?.data.msg_en ?? '';
+    const msg_zh = err.response?.data.msg_zh ?? '';
+
+    const message = useMessage();
+    const { returnUserLangText } = useMyI18n();
+
+    const errorMsg = returnUserLangText({
+      en: msg_en,
+      'zh-CN': msg_zh,
+    });
+
+    const { isLoggedIn } = useAuth();
+
+    switch (status) {
+      /** token 过期 */
+      case 401:
+        isLoggedIn.value = false;
+        if (errorMsg) message.error(errorMsg);
+        break;
+      /** 执行失败 */
+      case 406:
+        if (errorMsg) message.error(errorMsg);
+        break;
+      case 500:
+        message.error(
+          returnUserLangText({
+            en: 'Server error!',
+            'zh-CN': '服务器错误！',
+          })
+        );
+        break;
+    }
 
     const error = {
       status,
@@ -31,24 +62,6 @@ axios.interceptors.response.use(
       msg_zh,
     };
 
-    const message = useMessage();
-
-    /** token 过期 */
-    if (error.status === 401) {
-      const { isLoggedin } = useAuth();
-      isLoggedin.value = false;
-    }
-
-    /** 执行失败 */
-    if (error.status === 406) {
-      message.error(error.msg_zh);
-    }
-
-    if (error.status === 500) {
-      const msg = (err.response.data.msg_en ?? '') as ApiError['msg_en'];
-      message.error(msg);
-    }
-
     return Promise.reject(error);
   }
 );
diff --git a/webui/src/utils/omit.test.ts b/webui/src/utils/omit.test.ts
deleted file mode 100644
index 7748deaf..00000000
--- a/webui/src/utils/omit.test.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { expect, it } from 'vitest';
-import { omit } from './omit';
-
-it('test omit', () => {
-  const obj = {
-    a: 1,
-    b: 2,
-    c: 3,
-    d: 4,
-  };
-
-  expect(omit(obj, ['a'])).toStrictEqual({
-    b: 2,
-    c: 3,
-    d: 4,
-  });
-
-  expect(omit(obj, ['b', 'c'])).toStrictEqual({
-    a: 1,
-    d: 4,
-  });
-});
diff --git a/webui/src/utils/omit.ts b/webui/src/utils/omit.ts
deleted file mode 100644
index 63d0b180..00000000
--- a/webui/src/utils/omit.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export function omit<T extends { [k: string]: any }>(
-  obj: T,
-  omitKeys: Array<keyof T>
-) {
-  return Object.keys(obj).reduce((acc, key) => {
-    if (omitKeys.includes(key)) {
-      return acc;
-    } else {
-      return { ...acc, [key]: obj[key] };
-    }
-  }, {});
-}
diff --git a/webui/types/auth.ts b/webui/types/auth.ts
index 71bb3ba6..3fb1b098 100644
--- a/webui/types/auth.ts
+++ b/webui/types/auth.ts
@@ -4,10 +4,6 @@ export interface LoginSuccess {
   expire: number;
 }
 
-export interface Logout {
-  message: 'logout success';
-}
-
 export interface Update extends LoginSuccess {
   message: 'update success';
 }
diff --git a/webui/types/dts/auto-imports.d.ts b/webui/types/dts/auto-imports.d.ts
index f68e10ba..c13ef3bf 100644
--- a/webui/types/dts/auto-imports.d.ts
+++ b/webui/types/dts/auto-imports.d.ts
@@ -72,7 +72,6 @@ declare global {
   const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
-  const omit: typeof import('../../src/utils/omit')['omit']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
   const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
diff --git a/webui/unocss.config.ts b/webui/unocss.config.ts
index 31c4fe22..2288715c 100644
--- a/webui/unocss.config.ts
+++ b/webui/unocss.config.ts
@@ -9,10 +9,21 @@ import presetRemToPx from '@unocss/preset-rem-to-px';
 export default defineConfig({
   presets: [
     presetUno(),
-    presetRemToPx(),
+    presetRemToPx({
+      baseFontSize: 4,
+    }),
     presetAttributify(),
     presetIcons({ cdn: 'https://esm.sh/' }),
   ],
+  preflights: [
+    {
+      getCSS: () => `
+        :root {
+          font-size: 4px;
+        }
+      `,
+    },
+  ],
   theme: {
     colors: {
       primary: '#493475',
@@ -51,33 +62,48 @@ export default defineConfig({
   shortcuts: [
     [/^wh-(.*)$/, ([, t]) => `w-${t} h-${t}`],
 
-    [
-      'layout-container',
-      'wh-screen min-w-1024px min-h-768px p-16px space-y-12px flex flex-col bg-page',
-    ],
-    [
-      'layout-main',
-      'flex space-x-20px overflow-hidden h-[calc(100vh_-_2_*_16px_-_60px_-_12px)]',
-    ],
-    ['layout-content', 'overflow-hidden h-full flex flex-col flex-1'],
+    // position
+    {
+      rel: 'relative',
+      abs: 'absolute',
+    },
 
-    ['rel', 'relative'],
-    ['abs', 'absolute'],
-    ['fx-cer', 'flex items-center'],
-    ['f-cer', 'fx-cer justify-center'],
-    ['text-h1', 'text-24px'],
-    ['text-h2', 'text-20px'],
-    ['text-h3', 'text-16px'],
-    ['text-main', 'text-12px'],
-    [
-      'ab-input',
-      'outline-none min-w-0 w-200px h-28px px-12px text-main text-right rounded-6px border-1 border-black shadow-inset hover:border-color-[#7A46AE]',
-    ],
-    ['input-error', 'border-color-[#CA0E0E]'],
-    ['is-btn', 'cursor-pointer select-none'],
-    ['is-disabled', 'cursor-not-allowed select-none'],
-    ['input-reset', 'bg-transparent min-w-0 flex-1 outline-none'],
-    ['btn-click', 'hover:scale-110 active:scale-100'],
-    ['line', 'w-full h-1px bg-[#DFE1EF]'],
+    // flex
+    {
+      'fx-cer': 'flex items-center',
+      'f-cer': 'flex items-center justify-center',
+    },
+
+    // font size
+    {
+      'text-h1': 'text-24',
+      'text-h2': 'text-20',
+      'text-h3': 'text-16',
+      'text-main': 'text-12',
+    },
+
+    // input
+    {
+      'ab-input': `outline-none min-w-0 w-200 h-28
+                     px-12 text-main text-right
+                     rounded-6 shadow-inset
+                     border-1 border-black hover:border-color-[#7A46AE]
+                    `,
+
+      'input-error': 'border-color-[#CA0E0E]',
+      'input-reset': 'bg-transparent min-w-0 flex-1 outline-none',
+    },
+
+    // status
+    {
+      'is-btn': 'cursor-pointer select-none',
+      'btn-click': 'hover:scale-110 active:scale-100',
+      'is-disabled': 'cursor-not-allowed select-none',
+    },
+
+    // other
+    {
+      line: 'w-full h-1 bg-[#DFE1EF]',
+    },
   ],
 });
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
index 52b8e533..3f81d975 100644
--- a/webui/vite.config.ts
+++ b/webui/vite.config.ts
@@ -11,7 +11,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 import VueJsx from '@vitejs/plugin-vue-jsx';
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   base: './',
   plugins: [
     VueJsx(),
@@ -92,6 +92,9 @@ export default defineConfig({
       },
     },
   },
+  esbuild: {
+    drop: mode === 'production' ? ['console', 'debugger'] : [],
+  },
   build: {
     cssCodeSplit: false,
   },
@@ -108,4 +111,4 @@ export default defineConfig({
       '^/posters/.*': 'http://127.0.0.1:7892',
     },
   },
-});
+}));