chore(deps): update npm dependencies to v9 (major) (#6819)

* fix: replace DeleteOutline with DeleteOutlined icon in BackupHistoryViewer * chore(deps): update npm dependencies to v9 * refactor: bump @mui to v9 --------- Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2026-04-15 22:40:42 +08:00 · 2026-04-15 22:12:06 +08:00 · 2026-04-15 22:12:06 +08:00 · 71dc5f0bdb
commit 71dc5f0bdb
parent 0dd861fa32
39 changed files with 225 additions and 184 deletions
--- a/package.json
+++ b/package.json
@ -41,9 +41,9 @@
    "@emotion/styled": "^11.14.1",
    "@juggle/resize-observer": "^3.4.0",
    "@monaco-editor/react": "^4.7.0",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/lab": "7.0.0-beta.17",
-    "@mui/material": "^7.3.9",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/lab": "9.0.0-beta.2",
+    "@mui/material": "^9.0.0",
    "@tanstack/react-query": "^5.96.1",
    "@tanstack/react-table": "^8.21.3",
    "@tanstack/react-virtual": "^3.13.23",
@ -93,8 +93,8 @@
    "@types/validator": "^13.15.10",
    "@vitejs/plugin-legacy": "^8.0.0",
    "@vitejs/plugin-react": "^6.0.1",
-    "axios": "^1.13.6",
    "adm-zip": "^0.5.16",
+    "axios": "^1.13.6",
    "cli-color": "^2.0.4",
    "commander": "^14.0.3",
    "cross-env": "^10.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -30,14 +30,14 @@ importers:
        specifier: ^4.7.0
        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      '@mui/icons-material':
-        specifier: ^7.3.9
-        version: 7.3.10(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
+        specifier: ^9.0.0
+        version: 9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
      '@mui/lab':
-        specifier: 7.0.0-beta.17
-        version: 7.0.0-beta.17(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        specifier: 9.0.0-beta.2
+        version: 9.0.0-beta.2(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      '@mui/material':
-        specifier: ^7.3.9
-        version: 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        specifier: ^9.0.0
+        version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      '@tanstack/react-query':
        specifier: ^5.96.1
        version: 5.99.0(react@19.2.5)
@ -1047,28 +1047,28 @@ packages:
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

-  '@mui/core-downloads-tracker@7.3.10':
-    resolution: {integrity: sha512-vrOpWRmPJSuwLo23J62wggEm/jvGdzqctej+UOCtgDUz6nZJQuj3ByPccVyaa7eQmwAzUwKN56FQPMKkqbj1GA==}
+  '@mui/core-downloads-tracker@9.0.0':
+    resolution: {integrity: sha512-uwQNGkhv0lf7ufxw6QXev77BW6pWbW+7uxYjU5+rfp4lBkFtMEgJCsarTM3Tn+i0lGx6+Ol2u88JdGXr0GDskA==}

-  '@mui/icons-material@7.3.10':
-    resolution: {integrity: sha512-Au0ma4NSKGKNiimukj8UT/W1x2Qx6Qwn2RvFGykiSqVLYBNlIOPbjnIMvrwLGLu89EEpTVdu/ys/OduZR+tWqw==}
+  '@mui/icons-material@9.0.0':
+    resolution: {integrity: sha512-oDwyvI6LgjWRC9MBcSGvLkPud9S9ELgSBQFYxa1rYcZn6Br55dn22SyvsPDMsn0G8OndFk53iMT45W5mNqrogw==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
-      '@mui/material': ^7.3.10
+      '@mui/material': ^9.0.0
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

-  '@mui/lab@7.0.0-beta.17':
-    resolution: {integrity: sha512-H8tSINm6Xgbi7o49MplAwks4tAEE6SpFNd9l7n4NURl0GSpOv0CZvgXKSJt4+6TmquDhE7pomHpHWJiVh/2aCg==}
+  '@mui/lab@9.0.0-beta.2':
+    resolution: {integrity: sha512-UqykXQCn7HNSExyYBvrFpaaEEmUwHbEgjFDBApEkawVPcBILyYNFhpXoqkwkafiZy+WsvcxIeRF0z4tCgisTRg==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.5.0
      '@emotion/styled': ^11.3.0
-      '@mui/material': ^7.3.2
-      '@mui/material-pigment-css': ^7.3.2
+      '@mui/material': ^9.0.0
+      '@mui/material-pigment-css': ^9.0.0
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@ -1082,13 +1082,13 @@ packages:
      '@types/react':
        optional: true

-  '@mui/material@7.3.10':
-    resolution: {integrity: sha512-cHvGOk2ZEfbQt3LnGe0ZKd/ETs9gsUpkW66DCO+GSjMZhpdKU4XsuIr7zJ/B/2XaN8ihxuzHfYAR4zPtCN4RYg==}
+  '@mui/material@9.0.0':
+    resolution: {integrity: sha512-+VP/oQCDhDR87NQQgXnNBG8dwy6GNuQLnenS1pZvkbn2dKFSxRSRMybTpH9xUxXP+316mlYDy5CSbYtusnCWtw==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.5.0
      '@emotion/styled': ^11.3.0
-      '@mui/material-pigment-css': ^7.3.10
+      '@mui/material-pigment-css': ^9.0.0
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@ -1102,8 +1102,8 @@ packages:
      '@types/react':
        optional: true

-  '@mui/private-theming@7.3.10':
-    resolution: {integrity: sha512-j3EZN+zOctxUISvJSmsEPo5o2F8zse4l5vRkBY+ps6UtnL6J7o14kUaI4w7gwo73id9e3cDNMVQK/9BVaMHVBw==}
+  '@mui/private-theming@9.0.0':
+    resolution: {integrity: sha512-JtuZoaiCqwD6vjgYu6Xp3T7DZkrxJlgtDz5yESzhI34fEX5hHMh2VJUbuL9UOg8xrfIFMrq6dcYoH/7Zi4G0RA==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@ -1112,8 +1112,8 @@ packages:
      '@types/react':
        optional: true

-  '@mui/styled-engine@7.3.10':
-    resolution: {integrity: sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==}
+  '@mui/styled-engine@9.0.0':
+    resolution: {integrity: sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.4.1
@ -1125,8 +1125,8 @@ packages:
      '@emotion/styled':
        optional: true

-  '@mui/system@7.3.10':
-    resolution: {integrity: sha512-/sfPpdpJaQn7BSF+avjIdHSYmxHp0UOBYNxSG9QGKfMOD6sLANCpRPCnanq1Pe0lFf0NHkO2iUk0TNzdWC1USQ==}
+  '@mui/system@9.0.0':
+    resolution: {integrity: sha512-YnC5Zg6j04IxiLc/boAKs0464jfZlLFVa7mf5E8lF0XOtZVUvG6R6gJK50lgUYdaaLdyLfxF6xR7LaPuEpeT/g==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.5.0
@ -1141,16 +1141,16 @@ packages:
      '@types/react':
        optional: true

-  '@mui/types@7.4.12':
-    resolution: {integrity: sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==}
+  '@mui/types@9.0.0':
+    resolution: {integrity: sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==}
    peerDependencies:
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

-  '@mui/utils@7.3.10':
-    resolution: {integrity: sha512-7y2eIfy0h7JPz+Yy4pS+wgV68d46PuuxDqKBN4Q8VlPQSsCAGwroMCV6xWyc7g9dvEp8ZNFsknc59GHWO+r6Ow==}
+  '@mui/utils@9.0.0':
+    resolution: {integrity: sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@ -4624,23 +4624,23 @@ snapshots:
      react: 19.2.5
      react-dom: 19.2.5(react@19.2.5)

-  '@mui/core-downloads-tracker@7.3.10': {}
+  '@mui/core-downloads-tracker@9.0.0': {}

-  '@mui/icons-material@7.3.10(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/icons-material@9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
-      '@mui/material': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@mui/material': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      react: 19.2.5
    optionalDependencies:
      '@types/react': 19.2.14

-  '@mui/lab@7.0.0-beta.17(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@mui/lab@9.0.0-beta.2(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
-      '@mui/material': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      '@mui/system': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
-      '@mui/types': 7.4.12(@types/react@19.2.14)
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/material': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@mui/system': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
      clsx: 2.1.1
      prop-types: 15.8.1
      react: 19.2.5
@ -4650,13 +4650,13 @@ snapshots:
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
      '@types/react': 19.2.14

-  '@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
-      '@mui/core-downloads-tracker': 7.3.10
-      '@mui/system': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
-      '@mui/types': 7.4.12(@types/react@19.2.14)
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/core-downloads-tracker': 9.0.0
+      '@mui/system': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
      '@popperjs/core': 2.11.8
      '@types/react-transition-group': 4.4.12(@types/react@19.2.14)
      clsx: 2.1.1
@ -4671,16 +4671,16 @@ snapshots:
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
      '@types/react': 19.2.14

-  '@mui/private-theming@7.3.10(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/private-theming@9.0.0(@types/react@19.2.14)(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
      prop-types: 15.8.1
      react: 19.2.5
    optionalDependencies:
      '@types/react': 19.2.14

-  '@mui/styled-engine@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)':
+  '@mui/styled-engine@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
      '@emotion/cache': 11.14.0
@ -4693,13 +4693,13 @@ snapshots:
      '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.5)
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)

-  '@mui/system@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/system@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
-      '@mui/private-theming': 7.3.10(@types/react@19.2.14)(react@19.2.5)
-      '@mui/styled-engine': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)
-      '@mui/types': 7.4.12(@types/react@19.2.14)
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/private-theming': 9.0.0(@types/react@19.2.14)(react@19.2.5)
+      '@mui/styled-engine': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
      clsx: 2.1.1
      csstype: 3.2.3
      prop-types: 15.8.1
@ -4709,16 +4709,16 @@ snapshots:
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
      '@types/react': 19.2.14

-  '@mui/types@7.4.12(@types/react@19.2.14)':
+  '@mui/types@9.0.0(@types/react@19.2.14)':
    dependencies:
      '@babel/runtime': 7.29.2
    optionalDependencies:
      '@types/react': 19.2.14

-  '@mui/utils@7.3.10(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/utils@9.0.0(@types/react@19.2.14)(react@19.2.5)':
    dependencies:
      '@babel/runtime': 7.29.2
-      '@mui/types': 7.4.12(@types/react@19.2.14)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
      '@types/prop-types': 15.7.15
      clsx: 2.1.1
      prop-types: 15.8.1
--- a/src/components/base/base-search-box.tsx
+++ b/src/components/base/base-search-box.tsx
@ -205,7 +205,7 @@ export const BaseSearchBox = ({
          input: {
            sx: { pr: 1 },
            endAdornment: (
-              <Box display="flex">
+              <Box sx={{ display: 'flex' }}>
                {!!text && (
                  <Tooltip title={t('shared.placeholders.resetInput')}>
                    <IconButton
--- a/src/components/home/clash-info-card.tsx
+++ b/src/components/home/clash-info-card.tsx
@ -30,47 +30,47 @@ export const ClashInfoCard = () => {

    return (
      <Stack spacing={1.5}>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.clashInfo.fields.coreVersion')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            {clashVersion || '-'}
          </Typography>
        </Stack>
        <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.clashInfo.fields.systemProxyAddress')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            {systemProxyAddress}
          </Typography>
        </Stack>
        <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.clashInfo.fields.mixedPort')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            {clashConfig.mixedPort || '-'}
          </Typography>
        </Stack>
        <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.clashInfo.fields.uptime')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            {formattedUptime}
          </Typography>
        </Stack>
        <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.clashInfo.fields.rulesCount')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            {rules.length}
          </Typography>
        </Stack>
--- a/src/components/home/current-proxy-card.tsx
+++ b/src/components/home/current-proxy-card.tsx
@ -930,7 +930,7 @@ export const CurrentProxyCard = () => {
            }}
          >
            <Box>
-              <Typography variant="body1" fontWeight="medium">
+              <Typography variant="body1" sx={{ fontWeight: 'medium' }}>
                {currentProxy.name}
              </Typography>

@ -1026,9 +1026,11 @@ export const CurrentProxyCard = () => {
              disabled={isDirectMode}
              renderValue={renderProxyValue}
              MenuProps={{
-                PaperProps: {
-                  style: {
-                    maxHeight: 500,
+                slotProps: {
+                  paper: {
+                    style: {
+                      maxHeight: 500,
+                    },
                  },
                },
              }}
--- a/src/components/home/enhanced-canvas-traffic-graph.tsx
+++ b/src/components/home/enhanced-canvas-traffic-graph.tsx
@ -1245,13 +1245,13 @@ export const EnhancedCanvasTrafficGraph = memo(
                whiteSpace: 'nowrap',
              }}
            >
-              <Box color="text.secondary" mb={0.2}>
+              <Box sx={{ color: 'text.secondary', mb: 0.2 }}>
                {tooltipData.timestamp}
              </Box>
-              <Box color="secondary.main" fontWeight="500">
+              <Box sx={{ color: 'secondary.main', fontWeight: 500 }}>
                ↑ {tooltipData.upSpeed}
              </Box>
-              <Box color="primary.main" fontWeight="500">
+              <Box sx={{ color: 'primary.main', fontWeight: 500 }}>
                ↓ {tooltipData.downSpeed}
              </Box>
            </Box>
--- a/src/components/home/enhanced-card.tsx
+++ b/src/components/home/enhanced-card.tsx
@ -90,9 +90,11 @@ export const EnhancedCard = forwardRef<HTMLElement, EnhancedCardProps>(
              {typeof title === 'string' ? (
                <Typography
                  variant="h6"
-                  fontWeight="medium"
-                  fontSize={18}
-                  sx={titleTruncateStyle}
+                  sx={{
+                    ...titleTruncateStyle,
+                    fontWeight: 'medium',
+                    fontSize: 18,
+                  }}
                  title={title}
                >
                  {title}
--- a/src/components/home/enhanced-traffic-stats.tsx
+++ b/src/components/home/enhanced-traffic-stats.tsx
@ -120,9 +120,8 @@ const CompactStatCard = memo(
          >
            <Typography
              variant="body1"
-              fontWeight="bold"
              noWrap
-              sx={{ mr: 0.5 }}
+              sx={{ mr: 0.5, fontWeight: 'bold' }}
            >
              {value}
            </Typography>
--- a/src/components/home/home-profile-card.tsx
+++ b/src/components/home/home-profile-card.tsx
@ -103,7 +103,7 @@ const ProfileDetails = ({
    <Box>
      <Stack spacing={2}>
        {current.url && (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
            <DnsOutlined fontSize="small" color="action" />
            <Typography
              variant="body2"
@ -115,7 +115,6 @@ const ProfileDetails = ({
              {current.home ? (
                <Link
                  component="button"
-                  fontWeight="medium"
                  onClick={() => current.home && openWebUrl(current.home)}
                  sx={{
                    display: 'inline-flex',
@ -123,6 +122,7 @@ const ProfileDetails = ({
                    minWidth: 0,
                    maxWidth: 'calc(100% - 40px)',
                    ml: 0.5,
+                    fontWeight: 'medium',
                  }}
                  title={parseUrl(current.url)}
                >
@ -151,7 +151,6 @@ const ProfileDetails = ({
              ) : (
                <Typography
                  component="span"
-                  fontWeight="medium"
                  sx={{
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
@ -159,6 +158,7 @@ const ProfileDetails = ({
                    minWidth: 0,
                    flex: 1,
                    ml: 0.5,
+                    fontWeight: 'medium',
                  }}
                  title={parseUrl(current.url)}
                >
@ -170,7 +170,7 @@ const ProfileDetails = ({
        )}

        {current.updated && (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
            <UpdateOutlined
              fontSize="small"
              color="action"
@ -187,7 +187,7 @@ const ProfileDetails = ({
              onClick={onUpdateProfile}
            >
              {t('shared.labels.updateTime')}:{' '}
-              <Box component="span" fontWeight="medium">
+              <Box component="span" sx={{ fontWeight: 'medium' }}>
                {dayjs(current.updated * 1000).format('YYYY-MM-DD HH:mm')}
              </Box>
            </Typography>
@ -196,11 +196,11 @@ const ProfileDetails = ({

        {current.extra && (
          <>
-            <Stack direction="row" alignItems="center" spacing={1}>
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
              <SpeedOutlined fontSize="small" color="action" />
              <Typography variant="body2" color="text.secondary">
                {t('shared.labels.usedTotal')}:{' '}
-                <Box component="span" fontWeight="medium">
+                <Box component="span" sx={{ fontWeight: 'medium' }}>
                  {parseTraffic(usedTraffic)} /{' '}
                  {parseTraffic(current.extra.total)}
                </Box>
@ -208,11 +208,11 @@ const ProfileDetails = ({
            </Stack>

            {current.extra.expire > 0 && (
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                <EventOutlined fontSize="small" color="action" />
                <Typography variant="body2" color="text.secondary">
                  {t('shared.labels.expireTime')}:{' '}
-                  <Box component="span" fontWeight="medium">
+                  <Box component="span" sx={{ fontWeight: 'medium' }}>
                    {parseExpire(current.extra.expire)}
                  </Box>
                </Typography>
@ -318,8 +318,6 @@ export const HomeProfileCard = ({
      <Link
        component="button"
        variant="h6"
-        fontWeight="medium"
-        fontSize={18}
        onClick={() => current.home && openWebUrl(current.home)}
        sx={{
          color: 'inherit',
@ -328,6 +326,8 @@ export const HomeProfileCard = ({
          alignItems: 'center',
          minWidth: 0,
          maxWidth: '100%',
+          fontWeight: 'medium',
+          fontSize: 18,
          '& > span': {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
--- a/src/components/home/system-info-card.tsx
+++ b/src/components/home/system-info-card.tsx
@ -215,24 +215,23 @@ export const SystemInfoCard = () => {
      }
    >
      <Stack spacing={1.5}>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.systemInfo.fields.osInfo')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            {osInfo}
          </Typography>
        </Stack>
        <Divider />
        <Stack
          direction="row"
-          justifyContent="space-between"
-          alignItems="center"
+          sx={{ justifyContent: 'space-between', alignItems: 'center' }}
        >
          <Typography variant="body2" color="text.secondary">
            {t('home.components.systemInfo.fields.autoLaunch')}
          </Typography>
-          <Stack direction="row" spacing={1} alignItems="center">
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
            <Chip
              size="small"
              label={
@ -250,34 +249,32 @@ export const SystemInfoCard = () => {
        <Divider />
        <Stack
          direction="row"
-          justifyContent="space-between"
-          alignItems="center"
+          sx={{ justifyContent: 'space-between', alignItems: 'center' }}
        >
          <Typography variant="body2" color="text.secondary">
            {t('home.components.systemInfo.fields.runningMode')}
          </Typography>
          <Typography
            variant="body2"
-            fontWeight="medium"
            onClick={handleRunningModeClick}
-            sx={runningModeStyle}
+            sx={{ ...runningModeStyle, fontWeight: 'medium' }}
          >
            {getModeIcon()}
            {getModeText()}
          </Typography>
        </Stack>
        <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.systemInfo.fields.lastCheckUpdate')}
          </Typography>
          <Typography
            variant="body2"
-            fontWeight="medium"
            onClick={onCheckUpdate}
            sx={{
              cursor: 'pointer',
              textDecoration: 'underline',
+              fontWeight: 'medium',
              '&:hover': { opacity: 0.7 },
            }}
          >
@ -285,11 +282,11 @@ export const SystemInfoCard = () => {
          </Typography>
        </Stack>
        <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
          <Typography variant="body2" color="text.secondary">
            {t('home.components.systemInfo.fields.vergeVersion')}
          </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
            v{appVersion}
          </Typography>
        </Stack>
--- a/src/components/layout/layout-traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@ -53,29 +53,33 @@ export const LayoutTraffic = () => {
  const [inuse, inuseUnit] = parseTraffic(memory?.inuse || 0)

  const boxStyle: any = {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+    },
  }
  const iconStyle: any = {
    sx: { mr: '8px', fontSize: 16 },
  }
  const valStyle: any = {
    component: 'span',
-    textAlign: 'center',
-    sx: { flex: '1 1 56px', userSelect: 'none' },
+    sx: { flex: '1 1 56px', userSelect: 'none', textAlign: 'center' },
  }
  const unitStyle: any = {
    component: 'span',
    color: 'grey.500',
-    fontSize: '12px',
-    textAlign: 'right',
-    sx: { flex: '0 1 27px', userSelect: 'none' },
+    sx: {
+      flex: '0 1 27px',
+      userSelect: 'none',
+      fontSize: '12px',
+      textAlign: 'right',
+    },
  }

  return (
    <LightweightTrafficErrorBoundary>
-      <Box position="relative">
+      <Box sx={{ position: 'relative' }}>
        {trafficGraph && pageVisible && (
          <div
            style={{ width: '100%', height: 60, marginBottom: 6 }}
@ -85,7 +89,7 @@ export const LayoutTraffic = () => {
          </div>
        )}

-        <Box display="flex" flexDirection="column" gap={0.75}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
          <Box
            title={`${t('home.components.traffic.metrics.uploadSpeed')}`}
            {...boxStyle}
--- a/src/components/profile/groups-editor-viewer.tsx
+++ b/src/components/profile/groups-editor-viewer.tsx
@ -528,7 +528,7 @@ export const GroupsEditorViewer = (props: Props) => {
    >
      <DialogTitle>
        {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
            {t('profiles.modals.groupsEditor.title')}
            <Box>
              <Button
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@ -690,7 +690,7 @@ export const ProfileItem = (props: Props) => {
            />
          </Box>
        )}
-        <Box position="relative">
+        <Box sx={{ position: 'relative' }}>
          <Box sx={{ display: 'flex', justifyContent: 'start' }}>
            {batchMode && (
              <IconButton
@ -731,8 +731,12 @@ export const ProfileItem = (props: Props) => {
            </Box>

            <Typography
-              width={batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)'}
-              sx={{ fontSize: '18px', fontWeight: '600', lineHeight: '26px' }}
+              sx={{
+                width: batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)',
+                fontSize: '18px',
+                fontWeight: '600',
+                lineHeight: '26px',
+              }}
              variant="h6"
              component="h2"
              noWrap
@ -802,14 +806,14 @@ export const ProfileItem = (props: Props) => {
                  <Typography
                    noWrap
                    component="span"
-                    fontSize={14}
-                    textAlign="right"
                    title={
                      showNextUpdate
                        ? t('profiles.components.profileItem.tooltips.showLast')
                        : `${t('shared.labels.updateTime')}: ${parseExpire(updated)}\n${t('profiles.components.profileItem.tooltips.showNext')}`
                    }
                    sx={{
+                      fontSize: 14,
+                      textAlign: 'right',
                      cursor: 'pointer',
                      display: 'inline-block',
                      borderBottom: '1px dashed transparent',
@ -861,7 +865,7 @@ export const ProfileItem = (props: Props) => {
        anchorPosition={position}
        anchorReference="anchorPosition"
        transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
        onContextMenu={(e) => {
          setAnchorEl(null)
          e.preventDefault()
--- a/src/components/profile/profile-more.tsx
+++ b/src/components/profile/profile-more.tsx
@ -103,17 +103,19 @@ export const ProfileMore = (props: Props) => {
        }}
      >
        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={0.5}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 0.5,
+          }}
        >
          <Typography
-            width="calc(100% - 52px)"
            variant="h6"
            component="h2"
            noWrap
            title={t(globalTitles[id])}
+            sx={{ width: 'calc(100% - 52px)' }}
          >
            {t(globalTitles[id])}
          </Typography>
@ -162,7 +164,7 @@ export const ProfileMore = (props: Props) => {
        anchorPosition={position}
        anchorReference="anchorPosition"
        transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
        onContextMenu={(e) => {
          setAnchorEl(null)
          e.preventDefault()
--- a/src/components/profile/proxies-editor-viewer.tsx
+++ b/src/components/profile/proxies-editor-viewer.tsx
@ -374,7 +374,7 @@ export const ProxiesEditorViewer = (props: Props) => {
    >
      <DialogTitle>
        {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
            {t('profiles.modals.proxiesEditor.title')}
            <Box>
              <Button
--- a/src/components/profile/rules-editor-viewer.tsx
+++ b/src/components/profile/rules-editor-viewer.tsx
@ -584,7 +584,7 @@ export const RulesEditorViewer = (props: Props) => {
    >
      <DialogTitle>
        {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
            {t('rules.modals.editor.title')}
            <Box>
              <Button
--- a/src/components/proxy/provider-button.tsx
+++ b/src/components/proxy/provider-button.tsx
@ -151,9 +151,11 @@ export const ProviderButton = () => {
      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
          >
            <Typography variant="h6">
              {t('proxies.page.provider.title')}
--- a/src/components/rule/provider-button.tsx
+++ b/src/components/rule/provider-button.tsx
@ -142,9 +142,11 @@ export const ProviderButton = () => {
      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
          >
            <Typography variant="h6">
              {t('rules.page.provider.dialogTitle')}
--- a/src/components/setting/mods/auto-backup-settings.tsx
+++ b/src/components/setting/mods/auto-backup-settings.tsx
@ -134,7 +134,11 @@ export function AutoBackupSettings() {
  return (
    <Fragment>
      <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={1} width="100%">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
          <ListItemText
            primary={t('settings.modals.backup.auto.scheduleLabel')}
            secondary={t('settings.modals.backup.auto.scheduleHelper')}
@ -149,7 +153,11 @@ export function AutoBackupSettings() {
      </ListItem>

      <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={2} width="100%">
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
          <ListItemText
            primary={t('settings.modals.backup.auto.intervalLabel')}
          />
@ -187,7 +195,11 @@ export function AutoBackupSettings() {
      </ListItem>

      <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={1} width="100%">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
          <ListItemText
            primary={t('settings.modals.backup.auto.changeLabel')}
            secondary={t('settings.modals.backup.auto.changeHelper')}
--- a/src/components/setting/mods/backup-config-viewer.tsx
+++ b/src/components/setting/mods/backup-config-viewer.tsx
@ -234,9 +234,11 @@ export const BackupConfigViewer = memo(
          <Grid size={{ xs: 12, sm: 3 }}>
            <Stack
              direction="column"
-              justifyContent="space-between"
-              alignItems="stretch"
-              sx={{ height: '100%' }}
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'stretch',
+                height: '100%',
+              }}
            >
              {webdavChanged ||
              webdav_url === undefined ||
--- a/src/components/setting/mods/backup-history-viewer.tsx
+++ b/src/components/setting/mods/backup-history-viewer.tsx
@ -1,4 +1,4 @@
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
 import DownloadRounded from '@mui/icons-material/DownloadRounded'
 import RefreshRounded from '@mui/icons-material/RefreshRounded'
 import RestoreRounded from '@mui/icons-material/RestoreRounded'
@ -282,8 +282,7 @@ export const BackupHistoryViewer = ({
        <Stack spacing={2}>
          <Stack
            direction="row"
-            alignItems="center"
-            justifyContent="space-between"
+            sx={{ alignItems: 'center', justifyContent: 'space-between' }}
          >
            <Tabs
              value={source}
@ -345,9 +344,11 @@ export const BackupHistoryViewer = ({
                    secondary={
                      <Stack
                        direction="row"
-                        alignItems="center"
-                        justifyContent="space-between"
                        spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                        }}
                      >
                        <Typography variant="caption" color="text.secondary">
                          {`${row.platform} · ${row.display_time}`}
@ -355,7 +356,7 @@ export const BackupHistoryViewer = ({
                        <Stack
                          direction="row"
                          spacing={0.5}
-                          alignItems="center"
+                          sx={{ alignItems: 'center' }}
                        >
                          {isLocal && (
                            <IconButton
@ -371,7 +372,7 @@ export const BackupHistoryViewer = ({
                            disabled={isBusy}
                            onClick={() => handleDelete(row.filename)}
                          >
-                            <DeleteOutline fontSize="small" />
+                            <DeleteOutlined fontSize="small" />
                          </IconButton>
                          <IconButton
                            size="small"
@ -393,8 +394,7 @@ export const BackupHistoryViewer = ({
            <Stack
              direction="row"
              spacing={1}
-              justifyContent="flex-end"
-              alignItems="center"
+              sx={{ justifyContent: 'flex-end', alignItems: 'center' }}
            >
              <Typography variant="caption">
                {currentPage + 1} / {pageCount}
--- a/src/components/setting/mods/backup-viewer.tsx
+++ b/src/components/setting/mods/backup-viewer.tsx
@ -237,8 +237,7 @@ export function BackupViewer({ ref }: { ref?: Ref<DialogRef> }) {
                    direction="row"
                    spacing={1}
                    useFlexGap
-                    flexWrap="wrap"
-                    alignItems="center"
+                    sx={{ flexWrap: 'wrap', alignItems: 'center' }}
                  >
                    {item.actions}
                  </Stack>
--- a/src/components/setting/mods/clash-core-viewer.tsx
+++ b/src/components/setting/mods/clash-core-viewer.tsx
@ -117,7 +117,7 @@ export function ClashCoreViewer({ ref }: { ref?: Ref<DialogRef> }) {
    <BaseDialog
      open={open}
      title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          {t('settings.sections.clash.form.fields.clashCore')}
          <Box>
            <LoadingButton
--- a/src/components/setting/mods/clash-port-viewer.tsx
+++ b/src/components/setting/mods/clash-port-viewer.tsx
@ -221,7 +221,7 @@ export const ClashPortViewer = forwardRef<ClashPortViewerRef>((_, ref) => {
      }}
      okBtn={
        loading ? (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
            <CircularProgress size={20} />
            {t('shared.statuses.saving')}
          </Stack>
--- a/src/components/setting/mods/config-viewer.tsx
+++ b/src/components/setting/mods/config-viewer.tsx
@ -36,7 +36,7 @@ export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
    <EditorViewer
      open={true}
      title={
-        <Box display="flex" alignItems="center" gap={2}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          {t('settings.components.verge.advanced.fields.runtimeConfig')}
          <Chip label={t('shared.labels.readOnly')} size="small" />
        </Box>
--- a/src/components/setting/mods/controller-viewer.tsx
+++ b/src/components/setting/mods/controller-viewer.tsx
@ -111,7 +111,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
      contentSx={{ width: 400 }}
      okBtn={
        isSaving ? (
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <CircularProgress size={16} color="inherit" />
            {t('shared.statuses.saving')}
          </Box>
@ -153,7 +153,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
          <ListItemText
            primary={t('settings.sections.externalController.fields.address')}
          />
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <TextField
              size="small"
              sx={{
@ -193,7 +193,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
          <ListItemText
            primary={t('settings.sections.externalController.fields.secret')}
          />
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <TextField
              size="small"
              sx={{
--- a/src/components/setting/mods/dns-viewer.tsx
+++ b/src/components/setting/mods/dns-viewer.tsx
@ -623,9 +623,15 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
      open={open}
      disableEnforceFocus={!visualization}
      title={
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
          {t('settings.modals.dns.dialog.title')}
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Button
              variant="outlined"
              size="small"
--- a/src/components/setting/mods/external-controller-cors.tsx
+++ b/src/components/setting/mods/external-controller-cors.tsx
@ -194,10 +194,12 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
        <List sx={{ width: '90%', padding: 2 }}>
          <ListItem sx={{ padding: '8px 0' }}>
            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              width="100%"
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                width: '100%',
+              }}
            >
              <span style={{ fontWeight: 'normal' }}>
                {t('settings.sections.externalCors.fields.allowPrivateNetwork')}
@ -240,7 +242,7 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
                    placeholder={t(
                      'settings.sections.externalCors.placeholders.origin',
                    )}
-                    inputProps={{ style: { fontSize: 14 } }}
+                    slotProps={{ htmlInput: { style: { fontSize: 14 } } }}
                  />
                  <Button
                    variant="contained"
--- a/src/components/setting/mods/hotkey-input.tsx
+++ b/src/components/setting/mods/hotkey-input.tsx
@ -90,7 +90,7 @@ export const HotkeyInput = (props: Props) => {

        <div className="list">
          {keys.map((key, index) => (
-            <Box display="flex" key={key}>
+            <Box sx={{ display: 'flex' }} key={key}>
              <span className="delimiter" hidden={index === 0}>
                +
              </span>
--- a/src/components/setting/mods/network-interface-viewer.tsx
+++ b/src/components/setting/mods/network-interface-viewer.tsx
@ -27,7 +27,7 @@ export function NetworkInterfaceViewer({ ref }: { ref?: Ref<DialogRef> }) {
    <BaseDialog
      open={open}
      title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          {t('settings.modals.networkInterface.title')}
          <Box>
            <Button
--- a/src/components/setting/mods/tun-viewer.tsx
+++ b/src/components/setting/mods/tun-viewer.tsx
@ -141,7 +141,7 @@ export function TunViewer({ ref }: { ref?: Ref<DialogRef> }) {
    <BaseDialog
      open={open}
      title={
-        <Box display="flex" justifyContent="space-between" gap={1}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
          <Typography variant="h6">{t('settings.modals.tun.title')}</Typography>
          <Button
            variant="outlined"
--- a/src/components/setting/mods/update-viewer.tsx
+++ b/src/components/setting/mods/update-viewer.tsx
@ -112,7 +112,7 @@ export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
    <BaseDialog
      open={open}
      title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          {t('settings.modals.update.title', {
            version: updateInfo?.version ?? '',
          })}
--- a/src/components/setting/mods/web-ui-item.tsx
+++ b/src/components/setting/mods/web-ui-item.tsx
@ -49,7 +49,11 @@ export const WebUIItem = (props: Props) => {
  if (editing || onlyEdit) {
    return (
      <>
-        <Stack spacing={0.75} direction="row" mt={1} mb={1} alignItems="center">
+        <Stack
+          spacing={0.75}
+          direction="row"
+          sx={{ mt: 1, mb: 1, alignItems: 'center' }}
+        >
          <TextField
            autoComplete="new-password"
            fullWidth
@ -105,13 +109,17 @@ export const WebUIItem = (props: Props) => {

  return (
    <>
-      <Stack spacing={0.75} direction="row" alignItems="center" mt={1} mb={1}>
+      <Stack
+        spacing={0.75}
+        direction="row"
+        sx={{ alignItems: 'center', mt: 1, mb: 1 }}
+      >
        <Typography
          component="div"
-          width="100%"
          title={value}
          color={value ? 'text.primary' : 'text.secondary'}
          sx={({ palette }) => ({
+            width: '100%',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            '> .placeholder': {
--- a/src/components/setting/mods/web-ui-viewer.tsx
+++ b/src/components/setting/mods/web-ui-viewer.tsx
@ -100,7 +100,7 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
    <BaseDialog
      open={open}
      title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          {t('settings.modals.webUI.title')}
          <Button
            variant="contained"
@ -127,7 +127,7 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
      {!editing && webUIList.length === 0 && (
        <BaseEmpty
          extra={
-            <Typography mt={2} sx={{ fontSize: '12px' }}>
+            <Typography sx={{ mt: 2, fontSize: '12px' }}>
              {t('settings.modals.webUI.messages.placeholderInstruction')}
            </Typography>
          }
--- a/src/components/shared/traffic-error-boundary.tsx
+++ b/src/components/shared/traffic-error-boundary.tsx
@ -182,8 +182,7 @@ const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
      <Typography
        variant="body2"
        color="text.secondary"
-        textAlign="center"
-        sx={{ mb: 2 }}
+        sx={{ mb: 2, textAlign: 'center' }}
      >
        {t('shared.feedback.errors.trafficStatsDescription')}
      </Typography>
@ -194,7 +193,7 @@ const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
          {error instanceof Error ? error.message : 'Unknown error'}
        </Typography>
        {retryCount > 0 && (
-          <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+          <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>
            {t('shared.labels.retryAttempts')}: {retryCount}/{maxRetries}
          </Typography>
        )}
--- a/src/components/test/test-item.tsx
+++ b/src/components/test/test-item.tsx
@ -116,8 +116,7 @@ export const TestItem = ({
        }}
      >
        <Box
-          position="relative"
-          sx={{ cursor: 'move' }}
+          sx={{ position: 'relative', cursor: 'move' }}
          ref={setNodeRef}
          {...attributes}
          {...listeners}
@ -208,7 +207,7 @@ export const TestItem = ({
        anchorPosition={position}
        anchorReference="anchorPosition"
        transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
        onContextMenu={(e) => {
          setAnchorEl(null)
          e.preventDefault()
--- a/src/pages/proxies.tsx
+++ b/src/pages/proxies.tsx
@ -137,7 +137,7 @@ const ProxyPage = () => {
          : t('proxies.page.title.default')
      }
      header={
-        <Box display="flex" alignItems="center" gap={1}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <ProviderButton />

          <ButtonGroup size="small">
--- a/src/pages/rules.tsx
+++ b/src/pages/rules.tsx
@ -63,7 +63,7 @@ const RulesPage = () => {
        overflow: 'auto',
      }}
      header={
-        <Box display="flex" alignItems="center" gap={1}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <ProviderButton />
        </Box>
      }
--- a/src/pages/unlock.tsx
+++ b/src/pages/unlock.tsx
@ -2,7 +2,7 @@ import {
  AccessTimeOutlined,
  CancelOutlined,
  CheckCircleOutlined,
-  HelpOutline,
+  HelpOutlined,
  PendingOutlined,
  RefreshRounded,
 } from '@mui/icons-material'
@ -315,8 +315,8 @@ const UnlockPage = () => {
    if (status === 'Yes') return <CheckCircleOutlined />
    if (status === 'No') return <CancelOutlined />
    if (status === 'Soon') return <AccessTimeOutlined />
-    if (status.includes('Failed')) return <HelpOutline />
-    return <HelpOutline />
+    if (status.includes('Failed')) return <HelpOutlined />
+    return <HelpOutlined />
  }

  // 边框色