Release 1.7.3

#1335

UPDATELOG.md

@@ -1,3 +1,18 @@
+## v1.7.3
+
+### Features
+
+- 支持可视化编辑订阅代理组
+- 支持可视化编辑订阅节点
+- 支持可视化编辑订阅规则
+- 扩展脚本支持订阅名称参数 `function main(config, profileName)`
+
+### Bugs Fixes
+
+- 代理绕过格式检查错误
+
+---
+
 ## v1.7.2
 
 ### Break Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "GPL-3.0-only",
   "scripts": {
     "dev": "tauri dev",
@@ -24,10 +24,10 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@juggle/resize-observer": "^3.4.0",
-    "@mui/icons-material": "^5.15.21",
+    "@mui/icons-material": "^5.16.0",
     "@mui/lab": "5.0.0-alpha.149",
-    "@mui/material": "^5.15.21",
+    "@mui/material": "^5.16.0",
-    "@mui/x-data-grid": "^7.8.0",
+    "@mui/x-data-grid": "^7.9.0",
     "@tauri-apps/api": "^1.6.0",
     "@types/json-schema": "^7.0.15",
     "ahooks": "^3.8.0",
@@ -35,12 +35,14 @@
     "dayjs": "1.11.5",
     "foxact": "^0.2.35",
     "i18next": "^23.11.5",
+    "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "lodash-es": "^4.17.21",
     "meta-json-schema": "1.18.6",
     "monaco-editor": "^0.49.0",
     "monaco-yaml": "^5.2.0",
     "nanoid": "^5.0.7",
+    "peggy": "^4.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
@@ -48,7 +50,7 @@
     "react-i18next": "^13.5.0",
     "react-markdown": "^9.0.1",
     "react-monaco-editor": "^0.55.0",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.24.1",
     "react-transition-group": "^4.4.5",
     "react-virtuoso": "^4.7.11",
     "sockette": "^2.0.6",
@@ -79,7 +81,7 @@
     "sass": "^1.77.6",
     "terser": "^5.31.1",
     "typescript": "^5.5.3",
-    "vite": "^5.3.2",
+    "vite": "^5.3.3",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-svgr": "^4.2.0"
   },

pnpm-lock.yaml

@@ -26,17 +26,17 @@ importers:
         specifier: ^3.4.0
         version: 3.4.0
       "@mui/icons-material":
-        specifier: ^5.15.21
+        specifier: ^5.16.0
-        version: 5.15.21(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+        version: 5.16.0(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       "@mui/lab":
         specifier: 5.0.0-alpha.149
-        version: 5.0.0-alpha.149(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.0.0-alpha.149(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@mui/material":
-        specifier: ^5.15.21
+        specifier: ^5.16.0
-        version: 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@mui/x-data-grid":
-        specifier: ^7.8.0
+        specifier: ^7.9.0
-        version: 7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@tauri-apps/api":
         specifier: ^1.6.0
         version: 1.6.0
@@ -58,6 +58,9 @@ importers:
       i18next:
         specifier: ^23.11.5
         version: 23.11.5
+      js-base64:
+        specifier: ^3.7.7
+        version: 3.7.7
       js-yaml:
         specifier: ^4.1.0
         version: 4.1.0
@@ -76,6 +79,9 @@ importers:
       nanoid:
         specifier: ^5.0.7
         version: 5.0.7
+      peggy:
+        specifier: ^4.0.3
+        version: 4.0.3
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -98,8 +104,8 @@ importers:
         specifier: ^0.55.0
         version: 0.55.0(@types/react@18.3.3)(monaco-editor@0.49.0)(react@18.3.1)
       react-router-dom:
-        specifier: ^6.24.0
+        specifier: ^6.24.1
-        version: 6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-transition-group:
         specifier: ^4.4.5
         version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -148,10 +154,10 @@ importers:
         version: 4.4.10
       "@vitejs/plugin-legacy":
         specifier: ^5.4.1
-        version: 5.4.1(terser@5.31.1)(vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1))
+        version: 5.4.1(terser@5.31.1)(vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1))
       "@vitejs/plugin-react":
         specifier: ^4.3.1
-        version: 4.3.1(vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1))
+        version: 4.3.1(vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1))
       adm-zip:
         specifier: ^0.5.14
         version: 0.5.14
@@ -186,14 +192,14 @@ importers:
         specifier: ^5.5.3
         version: 5.5.3
       vite:
-        specifier: ^5.3.2
+        specifier: ^5.3.3
-        version: 5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1)
+        version: 5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1)
       vite-plugin-monaco-editor:
         specifier: ^1.1.0
         version: 1.1.0(monaco-editor@0.49.0)
       vite-plugin-svgr:
         specifier: ^4.2.0
-        version: 4.2.0(rollup@4.18.0)(typescript@5.5.3)(vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1))
+        version: 4.2.0(rollup@4.18.0)(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1))
 
 packages:
   "@actions/github@5.1.1":
@@ -1574,16 +1580,16 @@ packages:
       "@types/react":
         optional: true
 
-  "@mui/core-downloads-tracker@5.15.21":
+  "@mui/core-downloads-tracker@5.16.0":
     resolution:
       {
-        integrity: sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw==,
+        integrity: sha512-8SLffXYPRVpcZx5QzxNE8fytTqzp+IuU3deZbQWg/vSaTlDpR5YVrQ4qQtXTi5cRdhOufV5INylmwlKK+//nPw==,
       }
 
-  "@mui/icons-material@5.15.21":
+  "@mui/icons-material@5.16.0":
     resolution:
       {
-        integrity: sha512-yqkq1MbdkmX5ZHyvZTBuAaA6RkvoqkoAgwBSx9Oh0L0jAfj9T/Ih/NhMNjkl8PWVSonjfDUkKroBnjRyo/1M9Q==,
+        integrity: sha512-6ISoOhkp9w5gD0PEW9JklrcbyARDkFWNTBdwXZ1Oy5IGlyu9B0zG0hnUIe4H17IaF1Vgj6C8VI+v4tkSdK0veg==,
       }
     engines: { node: ">=12.0.0" }
     peerDependencies:
@@ -1615,10 +1621,10 @@ packages:
       "@types/react":
         optional: true
 
-  "@mui/material@5.15.21":
+  "@mui/material@5.16.0":
     resolution:
       {
-        integrity: sha512-nTyCcgduKwHqiuQ/B03EQUa+utSMzn2sQp0QAibsnYe4tvc3zkMbO0amKpl48vhABIY3IvT6w9615BFIgMt0YA==,
+        integrity: sha512-DbR1NckTLpjt9Zut9EGQ70th86HfN0BYQgyYro6aXQrNfjzSwe3BJS1AyBQ5mJ7TdL6YVRqohfukxj9JlqZZUg==,
       }
     engines: { node: ">=12.0.0" }
     peerDependencies:
@@ -1635,10 +1641,10 @@ packages:
       "@types/react":
         optional: true
 
-  "@mui/private-theming@5.15.20":
+  "@mui/private-theming@5.16.0":
     resolution:
       {
-        integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==,
+        integrity: sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==,
       }
     engines: { node: ">=12.0.0" }
     peerDependencies:
@@ -1664,10 +1670,10 @@ packages:
       "@emotion/styled":
         optional: true
 
-  "@mui/system@5.15.20":
+  "@mui/system@5.16.0":
     resolution:
       {
-        integrity: sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==,
+        integrity: sha512-9YbkC2m3+pNumAvubYv+ijLtog6puJ0fJ6rYfzfLCM47pWrw3m+30nXNM8zMgDaKL6vpfWJcCXm+LPaWBpy7sw==,
       }
     engines: { node: ">=12.0.0" }
     peerDependencies:
@@ -1694,10 +1700,10 @@ packages:
       "@types/react":
         optional: true
 
-  "@mui/utils@5.15.20":
+  "@mui/utils@5.16.0":
     resolution:
       {
-        integrity: sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==,
+        integrity: sha512-kLLi5J1xY+mwtUlMb8Ubdxf4qFAA1+U7WPBvjM/qQ4CIwLCohNb0sHo1oYPufjSIH/Z9+dhVxD7dJlfGjd1AVA==,
       }
     engines: { node: ">=12.0.0" }
     peerDependencies:
@@ -1707,10 +1713,10 @@ packages:
       "@types/react":
         optional: true
 
-  "@mui/x-data-grid@7.8.0":
+  "@mui/x-data-grid@7.9.0":
     resolution:
       {
-        integrity: sha512-X3t6EVSZ28vVKY9NfqKcClchw2o/KmHsywybp1tNFevIJiwjZSp7NDJ091GyTqMgyDt1Dy5z2hGxoTDUYYfeGg==,
+        integrity: sha512-RkrVD+tfcR/h3j2p2uqohxA00C5tCJIV5gb5+2ap8XdM0Y8XMF81bB8UADWenU5W83UTErWvtU7n4gCl7hJO9g==,
       }
     engines: { node: ">=14.0.0" }
     peerDependencies:
@@ -1718,6 +1724,15 @@ packages:
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
 
+  "@mui/x-internals@7.9.0":
+    resolution:
+      {
+        integrity: sha512-RJRrM6moaDZ8S11gDt8OKVclKm2v9khpIyLkpenNze+tT4dQYoU3liW5P2t31hA4Na/T6JQKNosB4qmB2TYfZw==,
+      }
+    engines: { node: ">=14.0.0" }
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+
   "@mui/x-tree-view@6.0.0-alpha.1":
     resolution:
       {
@@ -1797,16 +1812,23 @@ packages:
         integrity: sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==,
       }
 
+  "@peggyjs/from-mem@1.3.0":
+    resolution:
+      {
+        integrity: sha512-kzGoIRJjkg3KuGI4bopz9UvF3KguzfxalHRDEIdqEZUe45xezsQ6cx30e0RKuxPUexojQRBfu89Okn7f4/QXsw==,
+      }
+    engines: { node: ">=18" }
+
   "@popperjs/core@2.11.8":
     resolution:
       {
         integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==,
       }
 
-  "@remix-run/router@1.17.0":
+  "@remix-run/router@1.17.1":
     resolution:
       {
-        integrity: sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==,
+        integrity: sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==,
       }
     engines: { node: ">=14.0.0" }
 
@@ -2255,10 +2277,10 @@ packages:
         integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==,
       }
 
-  "@types/node@20.14.9":
+  "@types/node@20.14.10":
     resolution:
       {
-        integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==,
+        integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==,
       }
 
   "@types/parse-json@4.0.2":
@@ -2328,10 +2350,10 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0
 
-  acorn@8.12.0:
+  acorn@8.12.1:
     resolution:
       {
-        integrity: sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==,
+        integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==,
       }
     engines: { node: ">=0.4.0" }
     hasBin: true
@@ -2486,10 +2508,10 @@ packages:
       }
     engines: { node: ">=10" }
 
-  caniuse-lite@1.0.30001639:
+  caniuse-lite@1.0.30001640:
     resolution:
       {
-        integrity: sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==,
+        integrity: sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==,
       }
 
   ccount@2.0.1:
@@ -2581,6 +2603,13 @@ packages:
         integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==,
       }
 
+  commander@12.1.0:
+    resolution:
+      {
+        integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==,
+      }
+    engines: { node: ">=18" }
+
   commander@2.20.3:
     resolution:
       {
@@ -2720,10 +2749,10 @@ packages:
         integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==,
       }
 
-  electron-to-chromium@1.4.816:
+  electron-to-chromium@1.4.818:
     resolution:
       {
-        integrity: sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==,
+        integrity: sha512-eGvIk2V0dGImV9gWLq8fDfTTsCAeMDwZqEPMr+jMInxZdnp9Us8UpovYpRCf9NQ7VOFgrN2doNSgvISbsbNpxA==,
       }
 
   end-of-stream@1.4.4:
@@ -3128,6 +3157,12 @@ packages:
         integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==,
       }
 
+  js-base64@3.7.7:
+    resolution:
+      {
+        integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==,
+      }
+
   js-cookie@2.2.1:
     resolution:
       {
@@ -3244,6 +3279,13 @@ packages:
         integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==,
       }
 
+  lru-cache@6.0.0:
+    resolution:
+      {
+        integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==,
+      }
+    engines: { node: ">=10" }
+
   magic-string@0.30.10:
     resolution:
       {
@@ -3708,6 +3750,14 @@ packages:
       }
     engines: { node: ">=8" }
 
+  peggy@4.0.3:
+    resolution:
+      {
+        integrity: sha512-v7/Pt6kGYsfXsCrfb52q7/yg5jaAwiVaUMAPLPvy4DJJU6Wwr72t6nDIqIDkGfzd1B4zeVuTnQT0RGeOhe/uSA==,
+      }
+    engines: { node: ">=18" }
+    hasBin: true
+
   picocolors@1.0.1:
     resolution:
       {
@@ -3863,20 +3913,20 @@ packages:
       }
     engines: { node: ">=0.10.0" }
 
-  react-router-dom@6.24.0:
+  react-router-dom@6.24.1:
     resolution:
       {
-        integrity: sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==,
+        integrity: sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==,
       }
     engines: { node: ">=14.0.0" }
     peerDependencies:
       react: ">=16.8"
       react-dom: ">=16.8"
 
-  react-router@6.24.0:
+  react-router@6.24.1:
     resolution:
       {
-        integrity: sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==,
+        integrity: sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==,
       }
     engines: { node: ">=14.0.0" }
     peerDependencies:
@@ -4028,6 +4078,14 @@ packages:
       }
     hasBin: true
 
+  semver@7.6.0:
+    resolution:
+      {
+        integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==,
+      }
+    engines: { node: ">=10" }
+    hasBin: true
+
   server-only@0.0.1:
     resolution:
       {
@@ -4066,6 +4124,13 @@ packages:
         integrity: sha512-W6iG8RGV6Zife3Cj+FhuyHV447E6fqFM2hKmnaQrTvg3OydINV3Msj3WPFbX76blUlUxvQSMMMdrJxce8NqI5Q==,
       }
 
+  source-map-generator@0.8.0:
+    resolution:
+      {
+        integrity: sha512-psgxdGMwl5MZM9S3FWee4EgsEaIjahYV5AzGnwUvPhWeITz/j6rKpysQHlQ4USdxvINlb8lKfWGIXwfkrgtqkA==,
+      }
+    engines: { node: ">= 10" }
+
   source-map-js@1.2.0:
     resolution:
       {
@@ -4328,10 +4393,10 @@ packages:
       }
     engines: { node: ">= 10.0.0" }
 
-  update-browserslist-db@1.0.16:
+  update-browserslist-db@1.1.0:
     resolution:
       {
-        integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==,
+        integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==,
       }
     hasBin: true
     peerDependencies:
@@ -4373,10 +4438,10 @@ packages:
     peerDependencies:
       vite: ^2.6.0 || 3 || 4 || 5
 
-  vite@5.3.2:
+  vite@5.3.3:
     resolution:
       {
-        integrity: sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==,
+        integrity: sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==,
       }
     engines: { node: ^18.0.0 || >=20.0.0 }
     hasBin: true
@@ -5531,7 +5596,7 @@ snapshots:
       "@babel/runtime": 7.24.7
       "@floating-ui/react-dom": 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@mui/types": 7.2.14(@types/react@18.3.3)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       "@popperjs/core": 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -5545,7 +5610,7 @@ snapshots:
       "@babel/runtime": 7.24.7
       "@floating-ui/react-dom": 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@mui/types": 7.2.14(@types/react@18.3.3)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       "@popperjs/core": 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -5554,25 +5619,25 @@ snapshots:
     optionalDependencies:
       "@types/react": 18.3.3
 
-  "@mui/core-downloads-tracker@5.15.21": {}
+  "@mui/core-downloads-tracker@5.16.0": {}
 
-  "@mui/icons-material@5.15.21(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)":
+  "@mui/icons-material@5.16.0(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
-      "@mui/material": 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      "@mui/material": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
       "@types/react": 18.3.3
 
-  "@mui/lab@5.0.0-alpha.149(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
+  "@mui/lab@5.0.0-alpha.149(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
       "@mui/base": 5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      "@mui/material": 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      "@mui/material": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      "@mui/system": 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      "@mui/system": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       "@mui/types": 7.2.14(@types/react@18.3.3)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
-      "@mui/x-tree-view": 6.0.0-alpha.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/base@5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      "@mui/x-tree-view": 6.0.0-alpha.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/base@5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -5582,14 +5647,14 @@ snapshots:
       "@emotion/styled": 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       "@types/react": 18.3.3
 
-  "@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
+  "@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
       "@mui/base": 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      "@mui/core-downloads-tracker": 5.15.21
+      "@mui/core-downloads-tracker": 5.16.0
-      "@mui/system": 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      "@mui/system": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       "@mui/types": 7.2.14(@types/react@18.3.3)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       "@types/react-transition-group": 4.4.10
       clsx: 2.1.1
       csstype: 3.1.3
@@ -5603,10 +5668,10 @@ snapshots:
       "@emotion/styled": 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       "@types/react": 18.3.3
 
-  "@mui/private-theming@5.15.20(@types/react@18.3.3)(react@18.3.1)":
+  "@mui/private-theming@5.16.0(@types/react@18.3.3)(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       prop-types: 15.8.1
       react: 18.3.1
     optionalDependencies:
@@ -5623,13 +5688,13 @@ snapshots:
       "@emotion/react": 11.11.4(@types/react@18.3.3)(react@18.3.1)
       "@emotion/styled": 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
 
-  "@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)":
+  "@mui/system@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
-      "@mui/private-theming": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/private-theming": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       "@mui/styled-engine": 5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
       "@mui/types": 7.2.14(@types/react@18.3.3)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -5643,7 +5708,7 @@ snapshots:
     optionalDependencies:
       "@types/react": 18.3.3
 
-  "@mui/utils@5.15.20(@types/react@18.3.3)(react@18.3.1)":
+  "@mui/utils@5.16.0(@types/react@18.3.3)(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
       "@types/prop-types": 15.7.12
@@ -5653,12 +5718,13 @@ snapshots:
     optionalDependencies:
       "@types/react": 18.3.3
 
-  "@mui/x-data-grid@7.8.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
+  "@mui/x-data-grid@7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
-      "@mui/material": 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      "@mui/material": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      "@mui/system": 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      "@mui/system": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
+      "@mui/x-internals": 7.9.0(@types/react@18.3.3)(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -5669,15 +5735,23 @@ snapshots:
       - "@emotion/styled"
       - "@types/react"
 
-  "@mui/x-tree-view@6.0.0-alpha.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/base@5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/material@5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
+  "@mui/x-internals@7.9.0(@types/react@18.3.3)(react@18.3.1)":
+    dependencies:
+      "@babel/runtime": 7.24.7
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    transitivePeerDependencies:
+      - "@types/react"
+
+  "@mui/x-tree-view@6.0.0-alpha.1(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/base@5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
       "@emotion/react": 11.11.4(@types/react@18.3.3)(react@18.3.1)
       "@emotion/styled": 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       "@mui/base": 5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      "@mui/material": 5.15.21(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      "@mui/material": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      "@mui/system": 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      "@mui/system": 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      "@mui/utils": 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      "@mui/utils": 5.16.0(@types/react@18.3.3)(react@18.3.1)
       "@types/react-transition-group": 4.4.10
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -5751,9 +5825,13 @@ snapshots:
     dependencies:
       "@octokit/openapi-types": 12.11.0
 
+  "@peggyjs/from-mem@1.3.0":
+    dependencies:
+      semver: 7.6.0
+
   "@popperjs/core@2.11.8": {}
 
-  "@remix-run/router@1.17.0": {}
+  "@remix-run/router@1.17.1": {}
 
   "@rollup/pluginutils@5.1.0(rollup@4.18.0)":
     dependencies:
@@ -5959,7 +6037,7 @@ snapshots:
 
   "@types/fs-extra@9.0.13":
     dependencies:
-      "@types/node": 20.14.9
+      "@types/node": 20.14.10
 
   "@types/hast@3.0.4":
     dependencies:
@@ -5983,7 +6061,7 @@ snapshots:
 
   "@types/ms@0.7.34": {}
 
-  "@types/node@20.14.9":
+  "@types/node@20.14.10":
     dependencies:
       undici-types: 5.26.5
 
@@ -6010,7 +6088,7 @@ snapshots:
 
   "@ungap/structured-clone@1.2.0": {}
 
-  "@vitejs/plugin-legacy@5.4.1(terser@5.31.1)(vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1))":
+  "@vitejs/plugin-legacy@5.4.1(terser@5.31.1)(vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1))":
     dependencies:
       "@babel/core": 7.24.7
       "@babel/preset-env": 7.24.7(@babel/core@7.24.7)
@@ -6021,22 +6099,22 @@ snapshots:
       regenerator-runtime: 0.14.1
       systemjs: 6.15.1
       terser: 5.31.1
-      vite: 5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1)
+      vite: 5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - supports-color
 
-  "@vitejs/plugin-react@4.3.1(vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1))":
+  "@vitejs/plugin-react@4.3.1(vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1))":
     dependencies:
       "@babel/core": 7.24.7
       "@babel/plugin-transform-react-jsx-self": 7.24.7(@babel/core@7.24.7)
       "@babel/plugin-transform-react-jsx-source": 7.24.7(@babel/core@7.24.7)
       "@types/babel__core": 7.20.5
       react-refresh: 0.14.2
-      vite: 5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1)
+      vite: 5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - supports-color
 
-  acorn@8.12.0: {}
+  acorn@8.12.1: {}
 
   adm-zip@0.5.14: {}
 
@@ -6127,10 +6205,10 @@ snapshots:
 
   browserslist@4.23.1:
     dependencies:
-      caniuse-lite: 1.0.30001639
+      caniuse-lite: 1.0.30001640
-      electron-to-chromium: 1.4.816
+      electron-to-chromium: 1.4.818
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.1)
+      update-browserslist-db: 1.1.0(browserslist@4.23.1)
 
   buffer-from@1.1.2: {}
 
@@ -6138,7 +6216,7 @@ snapshots:
 
   camelcase@6.3.0: {}
 
-  caniuse-lite@1.0.30001639: {}
+  caniuse-lite@1.0.30001640: {}
 
   ccount@2.0.1: {}
 
@@ -6186,6 +6264,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@12.1.0: {}
+
   commander@2.20.3: {}
 
   convert-source-map@1.9.0: {}
@@ -6259,7 +6339,7 @@ snapshots:
       no-case: 3.0.4
       tslib: 2.6.3
 
-  electron-to-chromium@1.4.816: {}
+  electron-to-chromium@1.4.818: {}
 
   end-of-stream@1.4.4:
     dependencies:
@@ -6492,6 +6572,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  js-base64@3.7.7: {}
+
   js-cookie@2.2.1: {}
 
   js-tokens@4.0.0: {}
@@ -6542,6 +6624,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
   magic-string@0.30.10:
     dependencies:
       "@jridgewell/sourcemap-codec": 1.4.15
@@ -6914,6 +7000,12 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  peggy@4.0.3:
+    dependencies:
+      "@peggyjs/from-mem": 1.3.0
+      commander: 12.1.0
+      source-map-generator: 0.8.0
+
   picocolors@1.0.1: {}
 
   picomatch@2.3.1: {}
@@ -7010,16 +7102,16 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-router-dom@6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router-dom@6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      "@remix-run/router": 1.17.0
+      "@remix-run/router": 1.17.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.24.0(react@18.3.1)
+      react-router: 6.24.1(react@18.3.1)
 
-  react-router@6.24.0(react@18.3.1):
+  react-router@6.24.1(react@18.3.1):
     dependencies:
-      "@remix-run/router": 1.17.0
+      "@remix-run/router": 1.17.1
       react: 18.3.1
 
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -7134,6 +7226,10 @@ snapshots:
 
   semver@6.3.1: {}
 
+  semver@7.6.0:
+    dependencies:
+      lru-cache: 6.0.0
+
   server-only@0.0.1: {}
 
   shebang-command@2.0.0:
@@ -7151,6 +7247,8 @@ snapshots:
 
   sockette@2.0.6: {}
 
+  source-map-generator@0.8.0: {}
+
   source-map-js@1.2.0: {}
 
   source-map-support@0.5.21:
@@ -7205,7 +7303,7 @@ snapshots:
   terser@5.31.1:
     dependencies:
       "@jridgewell/source-map": 0.3.6
-      acorn: 8.12.0
+      acorn: 8.12.1
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -7288,7 +7386,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  update-browserslist-db@1.0.16(browserslist@4.23.1):
+  update-browserslist-db@1.1.0(browserslist@4.23.1):
     dependencies:
       browserslist: 4.23.1
       escalade: 3.1.2
@@ -7313,24 +7411,24 @@ snapshots:
     dependencies:
       monaco-editor: 0.49.0
 
-  vite-plugin-svgr@4.2.0(rollup@4.18.0)(typescript@5.5.3)(vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1)):
+  vite-plugin-svgr@4.2.0(rollup@4.18.0)(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1)):
     dependencies:
       "@rollup/pluginutils": 5.1.0(rollup@4.18.0)
       "@svgr/core": 8.1.0(typescript@5.5.3)
       "@svgr/plugin-jsx": 8.1.0(@svgr/core@8.1.0(typescript@5.5.3))
-      vite: 5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1)
+      vite: 5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  vite@5.3.2(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.1):
+  vite@5.3.3(@types/node@20.14.10)(sass@1.77.6)(terser@5.31.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.39
       rollup: 4.18.0
     optionalDependencies:
-      "@types/node": 20.14.9
+      "@types/node": 20.14.10
       fsevents: 2.3.3
       sass: 1.77.6
       terser: 5.31.1

scripts/check.mjs

@@ -400,16 +400,6 @@ const resolveUninstall = () => {
   });
 };
 
-const resolveSetDnsScript = () =>
-  resolveResource({
-    file: "set_dns.sh",
-    downloadURL: `https://github.com/clash-verge-rev/set-dns-script/releases/download/script/set_dns.sh`,
-  });
-const resolveUnSetDnsScript = () =>
-  resolveResource({
-    file: "unset_dns.sh",
-    downloadURL: `https://github.com/clash-verge-rev/set-dns-script/releases/download/script/unset_dns.sh`,
-  });
 const resolveMmdb = () =>
   resolveResource({
     file: "Country.mmdb",
@@ -449,8 +439,6 @@ const tasks = [
   { name: "service", func: resolveService, retry: 5 },
   { name: "install", func: resolveInstall, retry: 5 },
   { name: "uninstall", func: resolveUninstall, retry: 5 },
-  { name: "set_dns_script", func: resolveSetDnsScript, retry: 5 },
-  { name: "unset_dns_script", func: resolveUnSetDnsScript, retry: 5 },
   { name: "mmdb", func: resolveMmdb, retry: 5 },
   { name: "geosite", func: resolveGeosite, retry: 5 },
   { name: "geoip", func: resolveGeoIP, retry: 5 },

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "clash-verge"
-version = "1.7.2"
+version = "1.7.3"
 description = "clash verge"
 authors = ["zzzgydi", "wonfen", "MystiPanda"]
 license = "GPL-3.0-only"

src-tauri/src/config/verge.rs

@@ -227,16 +227,16 @@ impl IVerge {
             #[cfg(not(target_os = "windows"))]
             verge_redir_port: Some(7895),
             #[cfg(not(target_os = "windows"))]
-            verge_redir_enabled: Some(true),
+            verge_redir_enabled: Some(false),
             #[cfg(target_os = "linux")]
             verge_tproxy_port: Some(7896),
             #[cfg(target_os = "linux")]
-            verge_tproxy_enabled: Some(true),
+            verge_tproxy_enabled: Some(false),
             verge_mixed_port: Some(7897),
             verge_socks_port: Some(7898),
-            verge_socks_enabled: Some(true),
+            verge_socks_enabled: Some(false),
             verge_port: Some(7899),
-            verge_http_enabled: Some(true),
+            verge_http_enabled: Some(false),
             enable_proxy_guard: Some(false),
             use_default_bypass: Some(true),
             proxy_guard_duration: Some(30),

src-tauri/src/enhance/builtin/meta_guard.js

@@ -1,4 +1,4 @@
-function main(config) {
+function main(config, _name) {
   if (config.mode === "script") {
     config.mode = "rule";
   }

src-tauri/src/enhance/builtin/meta_hy_alpn.js

@@ -1,4 +1,4 @@
-function main(config) {
+function main(config, _name) {
   if (Array.isArray(config.proxies)) {
     config.proxies.forEach((p, i) => {
       if (p.type === "hysteria" && typeof p.alpn === "string") {

src-tauri/src/enhance/mod.rs

@@ -32,21 +32,21 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
             verge.clash_core.clone(),
             verge.enable_tun_mode.unwrap_or(false),
             verge.enable_builtin_enhanced.unwrap_or(true),
-            verge.verge_socks_enabled.unwrap_or(true),
+            verge.verge_socks_enabled.unwrap_or(false),
-            verge.verge_http_enabled.unwrap_or(true),
+            verge.verge_http_enabled.unwrap_or(false),
         )
     };
     #[cfg(not(target_os = "windows"))]
     let redir_enabled = {
         let verge = Config::verge();
         let verge = verge.latest();
-        verge.verge_redir_enabled.unwrap_or(true)
+        verge.verge_redir_enabled.unwrap_or(false)
     };
     #[cfg(target_os = "linux")]
     let tproxy_enabled = {
         let verge = Config::verge();
         let verge = verge.latest();
-        verge.verge_tproxy_enabled.unwrap_or(true)
+        verge.verge_tproxy_enabled.unwrap_or(false)
     };
 
     // 从profiles里拿东西
@@ -59,6 +59,7 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
         groups_item,
         global_merge,
         global_script,
+        profile_name,
     ) = {
         let profiles = Config::profiles();
         let profiles = profiles.latest();
@@ -123,6 +124,12 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
                 data: ChainType::Script(tmpl::ITEM_SCRIPT.into()),
             });
 
+        let name = profiles
+            .get_item(&profiles.get_current().unwrap_or_default())
+            .ok()
+            .and_then(|item| item.name.clone())
+            .unwrap_or_default();
+
         (
             current,
             merge,
@@ -132,6 +139,7 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
             groups,
             global_merge,
             global_script,
+            name,
         )
     };
 
@@ -147,7 +155,7 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
     if let ChainType::Script(script) = global_script.data {
         let mut logs = vec![];
 
-        match use_script(script, config.to_owned()) {
+        match use_script(script, config.to_owned(), profile_name.to_owned()) {
             Ok((res_config, res_logs)) => {
                 exists_keys.extend(use_keys(&res_config));
                 config = res_config;
@@ -180,7 +188,7 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
     if let ChainType::Script(script) = script_item.data {
         let mut logs = vec![];
 
-        match use_script(script, config.to_owned()) {
+        match use_script(script, config.to_owned(), profile_name.to_owned()) {
             Ok((res_config, res_logs)) => {
                 exists_keys.extend(use_keys(&res_config));
                 config = res_config;
@@ -239,7 +247,7 @@ pub async fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
             .for_each(|item| {
                 log::debug!(target: "app", "run builtin script {}", item.uid);
                 if let ChainType::Script(script) = item.data {
-                    match use_script(script, config.to_owned()) {
+                    match use_script(script, config.to_owned(), "".to_string()) {
                         Ok((res_config, _)) => {
                             config = res_config;
                         }

src-tauri/src/enhance/script.rs

@@ -2,7 +2,11 @@ use super::use_lowercase;
 use anyhow::{Error, Result};
 use serde_yaml::Mapping;
 
-pub fn use_script(script: String, config: Mapping) -> Result<(Mapping, Vec<(String, String)>)> {
+pub fn use_script(
+    script: String,
+    config: Mapping,
+    name: String,
+) -> Result<(Mapping, Vec<(String, String)>)> {
     use boa_engine::{native_function::NativeFunction, Context, JsValue, Source};
     use std::sync::{Arc, Mutex};
     let mut context = Context::default();
@@ -42,7 +46,7 @@ pub fn use_script(script: String, config: Mapping) -> Result<(Mapping, Vec<(Stri
     let code = format!(
         r#"try{{
         {script};
-        JSON.stringify(main({config_str})||'')
+        JSON.stringify(main({config_str},'{name}')||'')
       }} catch(err) {{
         `__error_flag__ ${{err.toString()}}`
       }}"#
@@ -97,7 +101,7 @@ fn test_script() {
   "#;
 
     let config = serde_yaml::from_str(config).unwrap();
-    let (config, results) = use_script(script.into(), config).unwrap();
+    let (config, results) = use_script(script.into(), config, "".to_string()).unwrap();
 
     let config_str = serde_yaml::to_string(&config).unwrap();
 

src-tauri/src/enhance/seq.rs

@@ -16,14 +16,7 @@ pub fn use_seq(seq_map: SeqMap, config: Mapping, name: &str) -> Mapping {
         val.as_sequence().unwrap_or(&Sequence::default()).clone()
     });
     let mut seq = origin_seq.clone();
-    prepend.reverse();
-    for item in prepend {
-        seq.insert(0, item);
-    }
 
-    for item in append {
-        seq.push(item);
-    }
     let mut delete_names = Vec::new();
     for item in delete {
         let item = item.clone();
@@ -47,6 +40,15 @@ pub fn use_seq(seq_map: SeqMap, config: Mapping, name: &str) -> Mapping {
         }
     });
 
+    prepend.reverse();
+    for item in prepend {
+        seq.insert(0, item);
+    }
+
+    for item in append {
+        seq.push(item);
+    }
+
     let mut config = config.clone();
     config.insert(Value::from(name), Value::from(seq));
     return config;

src-tauri/src/utils/tmpl.rs

@@ -27,7 +27,7 @@ pub const ITEM_MERGE_EMPTY: &str = "# Profile Enhancement Merge Template for Cla
 /// enhanced profile
 pub const ITEM_SCRIPT: &str = "// Define main function (script entry)
 
-function main(config) {
+function main(config, profileName) {
   return config;
 }
 ";

src-tauri/tauri.conf.json

@@ -2,7 +2,7 @@
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "package": {
     "productName": "Clash Verge",
-    "version": "1.7.2"
+    "version": "1.7.3"
   },
   "build": {
     "distDir": "../dist",

src/components/profile/group-item.tsx

@@ -0,0 +1,163 @@
+import {
+  Box,
+  IconButton,
+  ListItem,
+  ListItemText,
+  alpha,
+  styled,
+} from "@mui/material";
+import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { downloadIconCache } from "@/services/cmds";
+import { convertFileSrc } from "@tauri-apps/api/tauri";
+import { useEffect, useState } from "react";
+interface Props {
+  type: "prepend" | "original" | "delete" | "append";
+  group: IProxyGroupConfig;
+  onDelete: () => void;
+}
+
+export const GroupItem = (props: Props) => {
+  let { type, group, onDelete } = props;
+  const sortable = type === "prepend" || type === "append";
+
+  const { attributes, listeners, setNodeRef, transform, transition } = sortable
+    ? useSortable({ id: group.name })
+    : {
+        attributes: {},
+        listeners: {},
+        setNodeRef: null,
+        transform: null,
+        transition: null,
+      };
+
+  const [iconCachePath, setIconCachePath] = useState("");
+
+  useEffect(() => {
+    initIconCachePath();
+  }, [group]);
+
+  async function initIconCachePath() {
+    if (group.icon && group.icon.trim().startsWith("http")) {
+      const fileName =
+        group.name.replaceAll(" ", "") + "-" + getFileName(group.icon);
+      const iconPath = await downloadIconCache(group.icon, fileName);
+      setIconCachePath(convertFileSrc(iconPath));
+    }
+  }
+
+  function getFileName(url: string) {
+    return url.substring(url.lastIndexOf("/") + 1);
+  }
+
+  return (
+    <ListItem
+      dense
+      sx={({ palette }) => ({
+        background:
+          type === "original"
+            ? palette.mode === "dark"
+              ? alpha(palette.background.paper, 0.3)
+              : alpha(palette.grey[400], 0.3)
+            : type === "delete"
+            ? alpha(palette.error.main, 0.3)
+            : alpha(palette.success.main, 0.3),
+        height: "100%",
+        margin: "8px 0",
+        borderRadius: "8px",
+        transform: CSS.Transform.toString(transform),
+        transition,
+      })}
+    >
+      {group.icon && group.icon?.trim().startsWith("http") && (
+        <img
+          src={iconCachePath === "" ? group.icon : iconCachePath}
+          width="32px"
+          style={{
+            marginRight: "12px",
+            borderRadius: "6px",
+          }}
+        />
+      )}
+      {group.icon && group.icon?.trim().startsWith("data") && (
+        <img
+          src={group.icon}
+          width="32px"
+          style={{
+            marginRight: "12px",
+            borderRadius: "6px",
+          }}
+        />
+      )}
+      {group.icon && group.icon?.trim().startsWith("<svg") && (
+        <img
+          src={`data:image/svg+xml;base64,${btoa(group.icon ?? "")}`}
+          width="32px"
+        />
+      )}
+      <ListItemText
+        {...attributes}
+        {...listeners}
+        ref={setNodeRef}
+        sx={{ cursor: sortable ? "move" : "" }}
+        primary={
+          <StyledPrimary
+            sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
+          >
+            {group.name}
+          </StyledPrimary>
+        }
+        secondary={
+          <ListItemTextChild
+            sx={{
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              pt: "2px",
+            }}
+          >
+            <Box sx={{ marginTop: "2px" }}>
+              <StyledTypeBox>{group.type}</StyledTypeBox>
+            </Box>
+          </ListItemTextChild>
+        }
+        secondaryTypographyProps={{
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            color: "#ccc",
+          },
+        }}
+      />
+      <IconButton onClick={onDelete}>
+        {type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />}
+      </IconButton>
+    </ListItem>
+  );
+};
+
+const StyledPrimary = styled("div")`
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ListItemTextChild = styled("span")`
+  display: block;
+`;
+
+const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.primary.main, 0.5),
+  color: alpha(theme.palette.primary.main, 0.8),
+  borderRadius: 4,
+  fontSize: 10,
+  padding: "0 4px",
+  lineHeight: 1.5,
+  marginRight: "8px",
+}));

src/components/profile/groups-editor-viewer.tsx

@@ -0,0 +1,875 @@
+import { ReactNode, useEffect, useMemo, useState } from "react";
+import { useLockFn } from "ahooks";
+import yaml from "js-yaml";
+import { useTranslation } from "react-i18next";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemText,
+  TextField,
+  styled,
+} from "@mui/material";
+import { GroupItem } from "@/components/profile/group-item";
+import { readProfileFile, saveProfileFile } from "@/services/cmds";
+import { Notice, Switch } from "@/components/base";
+import getSystem from "@/utils/get-system";
+import { BaseSearchBox } from "../base/base-search-box";
+import { Virtuoso } from "react-virtuoso";
+import MonacoEditor from "react-monaco-editor";
+import { useThemeMode } from "@/services/states";
+import { Controller, useForm } from "react-hook-form";
+
+interface Props {
+  proxiesUid: string;
+  mergeUid: string;
+  profileUid: string;
+  property: string;
+  open: boolean;
+  onClose: () => void;
+  onSave?: (prev?: string, curr?: string) => void;
+}
+
+const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
+
+export const GroupsEditorViewer = (props: Props) => {
+  const { mergeUid, proxiesUid, profileUid, property, open, onClose, onSave } =
+    props;
+  const { t } = useTranslation();
+  const themeMode = useThemeMode();
+  const [prevData, setPrevData] = useState("");
+  const [currData, setCurrData] = useState("");
+  const [visualization, setVisualization] = useState(true);
+  const [match, setMatch] = useState(() => (_: string) => true);
+
+  const { control, watch, register, ...formIns } = useForm<IProxyGroupConfig>({
+    defaultValues: {
+      type: "select",
+      name: "",
+      interval: 300,
+      timeout: 5000,
+      "max-failed-times": 5,
+      lazy: true,
+    },
+  });
+  const [groupList, setGroupList] = useState<IProxyGroupConfig[]>([]);
+  const [proxyPolicyList, setProxyPolicyList] = useState<string[]>([]);
+  const [proxyProviderList, setProxyProviderList] = useState<string[]>([]);
+  const [prependSeq, setPrependSeq] = useState<IProxyGroupConfig[]>([]);
+  const [appendSeq, setAppendSeq] = useState<IProxyGroupConfig[]>([]);
+  const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
+
+  const filteredPrependSeq = useMemo(
+    () => prependSeq.filter((group) => match(group.name)),
+    [prependSeq, match]
+  );
+  const filteredGroupList = useMemo(
+    () => groupList.filter((group) => match(group.name)),
+    [groupList, match]
+  );
+  const filteredAppendSeq = useMemo(
+    () => appendSeq.filter((group) => match(group.name)),
+    [appendSeq, match]
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+  const reorder = (
+    list: IProxyGroupConfig[],
+    startIndex: number,
+    endIndex: number
+  ) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+  };
+  const onPrependDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over) {
+      if (active.id !== over.id) {
+        let activeIndex = 0;
+        let overIndex = 0;
+        prependSeq.forEach((item, index) => {
+          if (item.name === active.id) {
+            activeIndex = index;
+          }
+          if (item.name === over.id) {
+            overIndex = index;
+          }
+        });
+
+        setPrependSeq(reorder(prependSeq, activeIndex, overIndex));
+      }
+    }
+  };
+  const onAppendDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over) {
+      if (active.id !== over.id) {
+        let activeIndex = 0;
+        let overIndex = 0;
+        appendSeq.forEach((item, index) => {
+          if (item.name === active.id) {
+            activeIndex = index;
+          }
+          if (item.name === over.id) {
+            overIndex = index;
+          }
+        });
+        setAppendSeq(reorder(appendSeq, activeIndex, overIndex));
+      }
+    }
+  };
+  const fetchContent = async () => {
+    let data = await readProfileFile(property);
+    let obj = yaml.load(data) as ISeqProfileConfig | null;
+
+    setPrependSeq(obj?.prepend || []);
+    setAppendSeq(obj?.append || []);
+    setDeleteSeq(obj?.delete || []);
+
+    setPrevData(data);
+    setCurrData(data);
+  };
+
+  useEffect(() => {
+    if (currData === "") return;
+    if (visualization !== true) return;
+
+    let obj = yaml.load(currData) as {
+      prepend: [];
+      append: [];
+      delete: [];
+    } | null;
+    setPrependSeq(obj?.prepend || []);
+    setAppendSeq(obj?.append || []);
+    setDeleteSeq(obj?.delete || []);
+  }, [visualization]);
+
+  useEffect(() => {
+    if (prependSeq && appendSeq && deleteSeq)
+      setCurrData(
+        yaml.dump(
+          { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
+          {
+            forceQuotes: true,
+          }
+        )
+      );
+  }, [prependSeq, appendSeq, deleteSeq]);
+
+  const fetchProxyPolicy = async () => {
+    let data = await readProfileFile(profileUid);
+    let proxiesData = await readProfileFile(proxiesUid);
+    let originGroupsObj = yaml.load(data) as {
+      "proxy-groups": IProxyGroupConfig[];
+    } | null;
+
+    let originProxiesObj = yaml.load(data) as { proxies: [] } | null;
+    let originProxies = originProxiesObj?.proxies || [];
+    let moreProxiesObj = yaml.load(proxiesData) as ISeqProfileConfig | null;
+    let morePrependProxies = moreProxiesObj?.prepend || [];
+    let moreAppendProxies = moreProxiesObj?.append || [];
+    let moreDeleteProxies =
+      moreProxiesObj?.delete || ([] as string[] | { name: string }[]);
+
+    let proxies = morePrependProxies.concat(
+      originProxies.filter((proxy: any) => {
+        if (proxy.name) {
+          return !moreDeleteProxies.includes(proxy.name);
+        } else {
+          return !moreDeleteProxies.includes(proxy);
+        }
+      }),
+      moreAppendProxies
+    );
+
+    setProxyPolicyList(
+      builtinProxyPolicies.concat(
+        prependSeq.map((group: IProxyGroupConfig) => group.name),
+        originGroupsObj?.["proxy-groups"]
+          .map((group: IProxyGroupConfig) => group.name)
+          .filter((name) => !deleteSeq.includes(name)) || [],
+        appendSeq.map((group: IProxyGroupConfig) => group.name),
+        proxies.map((proxy: any) => proxy.name)
+      )
+    );
+  };
+  const fetchProfile = async () => {
+    let data = await readProfileFile(profileUid);
+    let mergeData = await readProfileFile(mergeUid);
+    let globalMergeData = await readProfileFile("Merge");
+
+    let originGroupsObj = yaml.load(data) as {
+      "proxy-groups": IProxyGroupConfig[];
+    } | null;
+
+    let originProviderObj = yaml.load(data) as { "proxy-providers": {} } | null;
+    let originProvider = originProviderObj?.["proxy-providers"] || {};
+
+    let moreProviderObj = yaml.load(mergeData) as {
+      "proxy-providers": {};
+    } | null;
+    let moreProvider = moreProviderObj?.["proxy-providers"] || {};
+
+    let globalProviderObj = yaml.load(globalMergeData) as {
+      "proxy-providers": {};
+    } | null;
+    let globalProvider = globalProviderObj?.["proxy-providers"] || {};
+
+    let provider = Object.assign(
+      {},
+      originProvider,
+      moreProvider,
+      globalProvider
+    );
+
+    setProxyProviderList(Object.keys(provider));
+    setGroupList(originGroupsObj?.["proxy-groups"] || []);
+  };
+  useEffect(() => {
+    fetchProxyPolicy();
+  }, [prependSeq, appendSeq, deleteSeq]);
+  useEffect(() => {
+    if (!open) return;
+    fetchContent();
+    fetchProxyPolicy();
+    fetchProfile();
+  }, [open]);
+
+  const validateGroup = () => {
+    let group = formIns.getValues();
+    if (group.name === "") {
+      throw new Error(t("Group Name Cannot Be Empty"));
+    }
+  };
+
+  const handleSave = useLockFn(async () => {
+    try {
+      await saveProfileFile(property, currData);
+      onSave?.(prevData, currData);
+      onClose();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+      <DialogTitle>
+        {
+          <Box display="flex" justifyContent="space-between">
+            {t("Edit Groups")}
+            <Box>
+              <Button
+                variant="contained"
+                size="small"
+                onClick={() => {
+                  setVisualization((prev) => !prev);
+                }}
+              >
+                {visualization ? t("Advanced") : t("Visualization")}
+              </Button>
+            </Box>
+          </Box>
+        }
+      </DialogTitle>
+
+      <DialogContent
+        sx={{ display: "flex", width: "auto", height: "calc(100vh - 185px)" }}
+      >
+        {visualization ? (
+          <>
+            <List
+              sx={{
+                width: "50%",
+                padding: "0 10px",
+              }}
+            >
+              <Box
+                sx={{
+                  height: "calc(100% - 80px)",
+                  overflowY: "auto",
+                }}
+              >
+                <Controller
+                  name="type"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Group Type")} />
+                      <Autocomplete
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        options={[
+                          "select",
+                          "url-test",
+                          "fallback",
+                          "load-balance",
+                          "relay",
+                        ]}
+                        value={field.value}
+                        onChange={(_, value) => value && field.onChange(value)}
+                        renderInput={(params) => <TextField {...params} />}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="name"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Group Name")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        {...field}
+                        error={field.value === ""}
+                        required={true}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="icon"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Icon")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        {...field}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="proxies"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Use Proxies")} />
+                      <Autocomplete
+                        size="small"
+                        sx={{
+                          width: "calc(100% - 150px)",
+                        }}
+                        multiple
+                        options={proxyPolicyList}
+                        disableCloseOnSelect
+                        onChange={(_, value) => value && field.onChange(value)}
+                        renderInput={(params) => <TextField {...params} />}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="use"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Use Provider")} />
+                      <Autocomplete
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        multiple
+                        options={proxyProviderList}
+                        disableCloseOnSelect
+                        onChange={(_, value) => value && field.onChange(value)}
+                        renderInput={(params) => <TextField {...params} />}
+                      />
+                    </Item>
+                  )}
+                />
+
+                <Controller
+                  name="url"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Health Check Url")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        {...field}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="interval"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Interval")} />
+                      <TextField
+                        autoComplete="off"
+                        type="number"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        onChange={(e) => {
+                          field.onChange(parseInt(e.target.value));
+                        }}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="timeout"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Timeout")} />
+                      <TextField
+                        autoComplete="off"
+                        type="number"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        onChange={(e) => {
+                          field.onChange(parseInt(e.target.value));
+                        }}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="max-failed-times"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Max Failed Times")} />
+                      <TextField
+                        autoComplete="off"
+                        type="number"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        onChange={(e) => {
+                          field.onChange(parseInt(e.target.value));
+                        }}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="interface-name"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Interface Name")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        {...field}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="routing-mark"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Routing Mark")} />
+                      <TextField
+                        autoComplete="off"
+                        type="number"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        onChange={(e) => {
+                          field.onChange(parseInt(e.target.value));
+                        }}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="filter"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Filter")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        {...field}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="exclude-filter"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Exclude Filter")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        {...field}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="exclude-type"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Exclude Type")} />
+                      <Autocomplete
+                        multiple
+                        options={[
+                          "Direct",
+                          "Reject",
+                          "RejectDrop",
+                          "Compatible",
+                          "Pass",
+                          "Dns",
+                          "Shadowsocks",
+                          "ShadowsocksR",
+                          "Snell",
+                          "Socks5",
+                          "Http",
+                          "Vmess",
+                          "Vless",
+                          "Trojan",
+                          "Hysteria",
+                          "Hysteria2",
+                          "WireGuard",
+                          "Tuic",
+                          "Relay",
+                          "Selector",
+                          "Fallback",
+                          "URLTest",
+                          "LoadBalance",
+                          "Ssh",
+                        ]}
+                        size="small"
+                        disableCloseOnSelect
+                        sx={{ width: "calc(100% - 150px)" }}
+                        value={field.value?.split("|")}
+                        onChange={(_, value) => {
+                          field.onChange(value.join("|"));
+                        }}
+                        renderInput={(params) => <TextField {...params} />}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="expected-status"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Expected Status")} />
+                      <TextField
+                        autoComplete="off"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        onChange={(e) => {
+                          field.onChange(parseInt(e.target.value));
+                        }}
+                      />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="include-all"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Include All")} />
+                      <Switch checked={field.value} {...field} />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="include-all-proxies"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Include All Proxies")} />
+                      <Switch checked={field.value} {...field} />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="include-all-providers"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Include All Providers")} />
+                      <Switch checked={field.value} {...field} />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="lazy"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Lazy")} />
+                      <Switch checked={field.value} {...field} />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="disable-udp"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Disable UDP")} />
+                      <Switch checked={field.value} {...field} />
+                    </Item>
+                  )}
+                />
+                <Controller
+                  name="hidden"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Hidden")} />
+                      <Switch checked={field.value} {...field} />
+                    </Item>
+                  )}
+                />
+              </Box>
+              <Item>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  onClick={() => {
+                    try {
+                      validateGroup();
+                      for (const item of prependSeq) {
+                        if (item.name === formIns.getValues().name) {
+                          throw new Error(t("Group Name Already Exists"));
+                        }
+                      }
+                      setPrependSeq([...prependSeq, formIns.getValues()]);
+                    } catch (err: any) {
+                      Notice.error(err.message || err.toString());
+                    }
+                  }}
+                >
+                  {t("Prepend Group")}
+                </Button>
+              </Item>
+              <Item>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  onClick={() => {
+                    try {
+                      validateGroup();
+                      for (const item of appendSeq) {
+                        if (item.name === formIns.getValues().name) {
+                          throw new Error(t("Group Name Already Exists"));
+                        }
+                      }
+                      setAppendSeq([...appendSeq, formIns.getValues()]);
+                    } catch (err: any) {
+                      Notice.error(err.message || err.toString());
+                    }
+                  }}
+                >
+                  {t("Append Group")}
+                </Button>
+              </Item>
+            </List>
+
+            <List
+              sx={{
+                width: "50%",
+                padding: "0 10px",
+              }}
+            >
+              <BaseSearchBox
+                matchCase={false}
+                onSearch={(match) => setMatch(() => match)}
+              />
+              <Virtuoso
+                style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
+                totalCount={
+                  filteredGroupList.length +
+                  (filteredPrependSeq.length > 0 ? 1 : 0) +
+                  (filteredAppendSeq.length > 0 ? 1 : 0)
+                }
+                increaseViewportBy={256}
+                itemContent={(index) => {
+                  let shift = filteredPrependSeq.length > 0 ? 1 : 0;
+                  if (filteredPrependSeq.length > 0 && index === 0) {
+                    return (
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={onPrependDragEnd}
+                      >
+                        <SortableContext
+                          items={filteredPrependSeq.map((x) => {
+                            return x.name;
+                          })}
+                        >
+                          {filteredPrependSeq.map((item, index) => {
+                            return (
+                              <GroupItem
+                                key={`${item.name}-${index}`}
+                                type="prepend"
+                                group={item}
+                                onDelete={() => {
+                                  setPrependSeq(
+                                    prependSeq.filter(
+                                      (v) => v.name !== item.name
+                                    )
+                                  );
+                                }}
+                              />
+                            );
+                          })}
+                        </SortableContext>
+                      </DndContext>
+                    );
+                  } else if (index < filteredGroupList.length + shift) {
+                    let newIndex = index - shift;
+                    return (
+                      <GroupItem
+                        key={`${filteredGroupList[newIndex].name}-${index}`}
+                        type={
+                          deleteSeq.includes(filteredGroupList[newIndex].name)
+                            ? "delete"
+                            : "original"
+                        }
+                        group={filteredGroupList[newIndex]}
+                        onDelete={() => {
+                          if (
+                            deleteSeq.includes(filteredGroupList[newIndex].name)
+                          ) {
+                            setDeleteSeq(
+                              deleteSeq.filter(
+                                (v) => v !== filteredGroupList[newIndex].name
+                              )
+                            );
+                          } else {
+                            setDeleteSeq((prev) => [
+                              ...prev,
+                              filteredGroupList[newIndex].name,
+                            ]);
+                          }
+                        }}
+                      />
+                    );
+                  } else {
+                    return (
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={onAppendDragEnd}
+                      >
+                        <SortableContext
+                          items={filteredAppendSeq.map((x) => {
+                            return x.name;
+                          })}
+                        >
+                          {filteredAppendSeq.map((item, index) => {
+                            return (
+                              <GroupItem
+                                key={`${item.name}-${index}`}
+                                type="append"
+                                group={item}
+                                onDelete={() => {
+                                  setAppendSeq(
+                                    appendSeq.filter(
+                                      (v) => v.name !== item.name
+                                    )
+                                  );
+                                }}
+                              />
+                            );
+                          })}
+                        </SortableContext>
+                      </DndContext>
+                    );
+                  }
+                }}
+              />
+            </List>
+          </>
+        ) : (
+          <MonacoEditor
+            height="100%"
+            language="yaml"
+            value={currData}
+            theme={themeMode === "light" ? "vs" : "vs-dark"}
+            options={{
+              tabSize: 2, // 根据语言类型设置缩进大小
+              minimap: {
+                enabled: document.documentElement.clientWidth >= 1500, // 超过一定宽度显示minimap滚动条
+              },
+              mouseWheelZoom: true, // 按住Ctrl滚轮调节缩放比例
+              quickSuggestions: {
+                strings: true, // 字符串类型的建议
+                comments: true, // 注释类型的建议
+                other: true, // 其他类型的建议
+              },
+              padding: {
+                top: 33, // 顶部padding防止遮挡snippets
+              },
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
+                getSystem() === "windows" ? ", twemoji mozilla" : ""
+              }`,
+              fontLigatures: true, // 连字符
+              smoothScrolling: true, // 平滑滚动
+            }}
+            onChange={(value) => setCurrData(value)}
+          />
+        )}
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} variant="outlined">
+          {t("Cancel")}
+        </Button>
+
+        <Button onClick={handleSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));

src/components/profile/profile-item.tsx

@@ -24,12 +24,14 @@ import {
   saveProfileFile,
 } from "@/services/cmds";
 import { Notice } from "@/components/base";
+import { GroupsEditorViewer } from "@/components/profile/groups-editor-viewer";
 import { RulesEditorViewer } from "@/components/profile/rules-editor-viewer";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { ProfileBox } from "./profile-box";
 import parseTraffic from "@/utils/parse-traffic";
 import { ConfirmViewer } from "@/components/profile/confirm-viewer";
 import { open } from "@tauri-apps/api/shell";
+import { ProxiesEditorViewer } from "./proxies-editor-viewer";
 const round = keyframes`
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -483,30 +485,28 @@ export const ProfileItem = (props: Props) => {
         onClose={() => setFileOpen(false)}
       />
       <RulesEditorViewer
+        groupsUid={option?.groups ?? ""}
+        mergeUid={option?.merge ?? ""}
         profileUid={uid}
         property={option?.rules ?? ""}
         open={rulesOpen}
         onSave={onSave}
         onClose={() => setRulesOpen(false)}
       />
-      <EditorViewer
+      <ProxiesEditorViewer
+        profileUid={uid}
+        property={option?.proxies ?? ""}
         open={proxiesOpen}
-        initialData={readProfileFile(option?.proxies ?? "")}
+        onSave={onSave}
-        language="yaml"
-        onSave={async (prev, curr) => {
-          await saveProfileFile(option?.proxies ?? "", curr ?? "");
-          onSave && onSave(prev, curr);
-        }}
         onClose={() => setProxiesOpen(false)}
       />
-      <EditorViewer
+      <GroupsEditorViewer
+        mergeUid={option?.merge ?? ""}
+        proxiesUid={option?.proxies ?? ""}
+        profileUid={uid}
+        property={option?.groups ?? ""}
         open={groupsOpen}
-        initialData={readProfileFile(option?.groups ?? "")}
+        onSave={onSave}
-        language="yaml"
-        onSave={async (prev, curr) => {
-          await saveProfileFile(option?.groups ?? "", curr ?? "");
-          onSave && onSave(prev, curr);
-        }}
         onClose={() => setGroupsOpen(false)}
       />
       <EditorViewer

src/components/profile/proxies-editor-viewer.tsx

@@ -0,0 +1,457 @@
+import { ReactNode, useEffect, useMemo, useState } from "react";
+import { useLockFn } from "ahooks";
+import yaml from "js-yaml";
+import { useTranslation } from "react-i18next";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemText,
+  TextField,
+  styled,
+} from "@mui/material";
+import { ProxyItem } from "@/components/profile/proxy-item";
+import { readProfileFile, saveProfileFile } from "@/services/cmds";
+import { Notice } from "@/components/base";
+import getSystem from "@/utils/get-system";
+import { BaseSearchBox } from "../base/base-search-box";
+import { Virtuoso } from "react-virtuoso";
+import MonacoEditor from "react-monaco-editor";
+import { useThemeMode } from "@/services/states";
+import parseUri from "@/utils/uri-parser";
+
+interface Props {
+  profileUid: string;
+  property: string;
+  open: boolean;
+  onClose: () => void;
+  onSave?: (prev?: string, curr?: string) => void;
+}
+
+export const ProxiesEditorViewer = (props: Props) => {
+  const { profileUid, property, open, onClose, onSave } = props;
+  const { t } = useTranslation();
+  const themeMode = useThemeMode();
+  const [prevData, setPrevData] = useState("");
+  const [currData, setCurrData] = useState("");
+  const [visualization, setVisualization] = useState(true);
+  const [match, setMatch] = useState(() => (_: string) => true);
+  const [proxyUri, setProxyUri] = useState<string>("");
+
+  const [proxyList, setProxyList] = useState<IProxyConfig[]>([]);
+  const [prependSeq, setPrependSeq] = useState<IProxyConfig[]>([]);
+  const [appendSeq, setAppendSeq] = useState<IProxyConfig[]>([]);
+  const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
+
+  const filteredPrependSeq = useMemo(
+    () => prependSeq.filter((proxy) => match(proxy.name)),
+    [prependSeq, match]
+  );
+  const filteredProxyList = useMemo(
+    () => proxyList.filter((proxy) => match(proxy.name)),
+    [proxyList, match]
+  );
+  const filteredAppendSeq = useMemo(
+    () => appendSeq.filter((proxy) => match(proxy.name)),
+    [appendSeq, match]
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+  const reorder = (
+    list: IProxyConfig[],
+    startIndex: number,
+    endIndex: number
+  ) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+  };
+  const onPrependDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over) {
+      if (active.id !== over.id) {
+        let activeIndex = 0;
+        let overIndex = 0;
+        prependSeq.forEach((item, index) => {
+          if (item.name === active.id) {
+            activeIndex = index;
+          }
+          if (item.name === over.id) {
+            overIndex = index;
+          }
+        });
+
+        setPrependSeq(reorder(prependSeq, activeIndex, overIndex));
+      }
+    }
+  };
+  const onAppendDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over) {
+      if (active.id !== over.id) {
+        let activeIndex = 0;
+        let overIndex = 0;
+        appendSeq.forEach((item, index) => {
+          if (item.name === active.id) {
+            activeIndex = index;
+          }
+          if (item.name === over.id) {
+            overIndex = index;
+          }
+        });
+        setAppendSeq(reorder(appendSeq, activeIndex, overIndex));
+      }
+    }
+  };
+  const handleParse = () => {
+    let proxies = [] as IProxyConfig[];
+    let names: string[] = [];
+    let uris = "";
+    try {
+      uris = atob(proxyUri);
+    } catch {
+      uris = proxyUri;
+    }
+    uris
+      .trim()
+      .split("\n")
+      .forEach((uri) => {
+        try {
+          let proxy = parseUri(uri.trim());
+          if (!names.includes(proxy.name)) {
+            proxies.push(proxy);
+            names.push(proxy.name);
+          }
+        } catch (err: any) {
+          Notice.error(err.message || err.toString());
+        }
+      });
+    return proxies;
+  };
+  const fetchProfile = async () => {
+    let data = await readProfileFile(profileUid);
+
+    let originProxiesObj = yaml.load(data) as {
+      proxies: IProxyConfig[];
+    } | null;
+
+    setProxyList(originProxiesObj?.proxies || []);
+  };
+
+  const fetchContent = async () => {
+    let data = await readProfileFile(property);
+    let obj = yaml.load(data) as ISeqProfileConfig | null;
+
+    setPrependSeq(obj?.prepend || []);
+    setAppendSeq(obj?.append || []);
+    setDeleteSeq(obj?.delete || []);
+
+    setPrevData(data);
+    setCurrData(data);
+  };
+
+  useEffect(() => {
+    if (currData === "") return;
+    if (visualization !== true) return;
+
+    let obj = yaml.load(currData) as {
+      prepend: [];
+      append: [];
+      delete: [];
+    } | null;
+    setPrependSeq(obj?.prepend || []);
+    setAppendSeq(obj?.append || []);
+    setDeleteSeq(obj?.delete || []);
+  }, [visualization]);
+
+  useEffect(() => {
+    if (prependSeq && appendSeq && deleteSeq)
+      setCurrData(
+        yaml.dump(
+          { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
+          {
+            forceQuotes: true,
+          }
+        )
+      );
+  }, [prependSeq, appendSeq, deleteSeq]);
+
+  useEffect(() => {
+    if (!open) return;
+    fetchContent();
+    fetchProfile();
+  }, [open]);
+
+  const handleSave = useLockFn(async () => {
+    try {
+      await saveProfileFile(property, currData);
+      onSave?.(prevData, currData);
+      onClose();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+      <DialogTitle>
+        {
+          <Box display="flex" justifyContent="space-between">
+            {t("Edit Proxies")}
+            <Box>
+              <Button
+                variant="contained"
+                size="small"
+                onClick={() => {
+                  setVisualization((prev) => !prev);
+                }}
+              >
+                {visualization ? t("Advanced") : t("Visualization")}
+              </Button>
+            </Box>
+          </Box>
+        }
+      </DialogTitle>
+
+      <DialogContent
+        sx={{ display: "flex", width: "auto", height: "calc(100vh - 185px)" }}
+      >
+        {visualization ? (
+          <>
+            <List
+              sx={{
+                width: "50%",
+                padding: "0 10px",
+              }}
+            >
+              <Box
+                sx={{
+                  height: "calc(100% - 80px)",
+                  overflowY: "auto",
+                }}
+              >
+                <Item>
+                  <TextField
+                    autoComplete="off"
+                    placeholder={t("Use newlines for multiple uri")}
+                    fullWidth
+                    rows={9}
+                    multiline
+                    size="small"
+                    onChange={(e) => setProxyUri(e.target.value)}
+                  />
+                </Item>
+              </Box>
+              <Item>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  onClick={() => {
+                    let proxies = handleParse();
+                    setPrependSeq([...prependSeq, ...proxies]);
+                  }}
+                >
+                  {t("Prepend Proxy")}
+                </Button>
+              </Item>
+              <Item>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  onClick={() => {
+                    let proxies = handleParse();
+                    setAppendSeq([...appendSeq, ...proxies]);
+                  }}
+                >
+                  {t("Append Proxy")}
+                </Button>
+              </Item>
+            </List>
+
+            <List
+              sx={{
+                width: "50%",
+                padding: "0 10px",
+              }}
+            >
+              <BaseSearchBox
+                matchCase={false}
+                onSearch={(match) => setMatch(() => match)}
+              />
+              <Virtuoso
+                style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
+                totalCount={
+                  filteredProxyList.length +
+                  (filteredPrependSeq.length > 0 ? 1 : 0) +
+                  (filteredAppendSeq.length > 0 ? 1 : 0)
+                }
+                increaseViewportBy={256}
+                itemContent={(index) => {
+                  let shift = filteredPrependSeq.length > 0 ? 1 : 0;
+                  if (filteredPrependSeq.length > 0 && index === 0) {
+                    return (
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={onPrependDragEnd}
+                      >
+                        <SortableContext
+                          items={filteredPrependSeq.map((x) => {
+                            return x.name;
+                          })}
+                        >
+                          {filteredPrependSeq.map((item, index) => {
+                            return (
+                              <ProxyItem
+                                key={`${item.name}-${index}`}
+                                type="prepend"
+                                proxy={item}
+                                onDelete={() => {
+                                  setPrependSeq(
+                                    prependSeq.filter(
+                                      (v) => v.name !== item.name
+                                    )
+                                  );
+                                }}
+                              />
+                            );
+                          })}
+                        </SortableContext>
+                      </DndContext>
+                    );
+                  } else if (index < filteredProxyList.length + shift) {
+                    let newIndex = index - shift;
+                    return (
+                      <ProxyItem
+                        key={`${filteredProxyList[newIndex].name}-${index}`}
+                        type={
+                          deleteSeq.includes(filteredProxyList[newIndex].name)
+                            ? "delete"
+                            : "original"
+                        }
+                        proxy={filteredProxyList[newIndex]}
+                        onDelete={() => {
+                          if (
+                            deleteSeq.includes(filteredProxyList[newIndex].name)
+                          ) {
+                            setDeleteSeq(
+                              deleteSeq.filter(
+                                (v) => v !== filteredProxyList[newIndex].name
+                              )
+                            );
+                          } else {
+                            setDeleteSeq((prev) => [
+                              ...prev,
+                              filteredProxyList[newIndex].name,
+                            ]);
+                          }
+                        }}
+                      />
+                    );
+                  } else {
+                    return (
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={onAppendDragEnd}
+                      >
+                        <SortableContext
+                          items={filteredAppendSeq.map((x) => {
+                            return x.name;
+                          })}
+                        >
+                          {filteredAppendSeq.map((item, index) => {
+                            return (
+                              <ProxyItem
+                                key={`${item.name}-${index}`}
+                                type="append"
+                                proxy={item}
+                                onDelete={() => {
+                                  setAppendSeq(
+                                    appendSeq.filter(
+                                      (v) => v.name !== item.name
+                                    )
+                                  );
+                                }}
+                              />
+                            );
+                          })}
+                        </SortableContext>
+                      </DndContext>
+                    );
+                  }
+                }}
+              />
+            </List>
+          </>
+        ) : (
+          <MonacoEditor
+            height="100%"
+            language="yaml"
+            value={currData}
+            theme={themeMode === "light" ? "vs" : "vs-dark"}
+            options={{
+              tabSize: 2, // 根据语言类型设置缩进大小
+              minimap: {
+                enabled: document.documentElement.clientWidth >= 1500, // 超过一定宽度显示minimap滚动条
+              },
+              mouseWheelZoom: true, // 按住Ctrl滚轮调节缩放比例
+              quickSuggestions: {
+                strings: true, // 字符串类型的建议
+                comments: true, // 注释类型的建议
+                other: true, // 其他类型的建议
+              },
+              padding: {
+                top: 33, // 顶部padding防止遮挡snippets
+              },
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
+                getSystem() === "windows" ? ", twemoji mozilla" : ""
+              }`,
+              fontLigatures: true, // 连字符
+              smoothScrolling: true, // 平滑滚动
+            }}
+            onChange={(value) => setCurrData(value)}
+          />
+        )}
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} variant="outlined">
+          {t("Cancel")}
+        </Button>
+
+        <Button onClick={handleSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));

src/components/profile/proxy-item.tsx

@@ -0,0 +1,116 @@
+import {
+  Box,
+  IconButton,
+  ListItem,
+  ListItemText,
+  alpha,
+  styled,
+} from "@mui/material";
+import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface Props {
+  type: "prepend" | "original" | "delete" | "append";
+  proxy: IProxyConfig;
+  onDelete: () => void;
+}
+
+export const ProxyItem = (props: Props) => {
+  let { type, proxy, onDelete } = props;
+  const sortable = type === "prepend" || type === "append";
+
+  const { attributes, listeners, setNodeRef, transform, transition } = sortable
+    ? useSortable({ id: proxy.name })
+    : {
+        attributes: {},
+        listeners: {},
+        setNodeRef: null,
+        transform: null,
+        transition: null,
+      };
+
+  return (
+    <ListItem
+      dense
+      sx={({ palette }) => ({
+        background:
+          type === "original"
+            ? palette.mode === "dark"
+              ? alpha(palette.background.paper, 0.3)
+              : alpha(palette.grey[400], 0.3)
+            : type === "delete"
+            ? alpha(palette.error.main, 0.3)
+            : alpha(palette.success.main, 0.3),
+        height: "100%",
+        margin: "8px 0",
+        borderRadius: "8px",
+        transform: CSS.Transform.toString(transform),
+        transition,
+      })}
+    >
+      <ListItemText
+        {...attributes}
+        {...listeners}
+        ref={setNodeRef}
+        sx={{ cursor: sortable ? "move" : "" }}
+        primary={
+          <StyledPrimary
+            sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
+          >
+            {proxy.name}
+          </StyledPrimary>
+        }
+        secondary={
+          <ListItemTextChild
+            sx={{
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              pt: "2px",
+            }}
+          >
+            <Box sx={{ marginTop: "2px" }}>
+              <StyledTypeBox>{proxy.type}</StyledTypeBox>
+            </Box>
+          </ListItemTextChild>
+        }
+        secondaryTypographyProps={{
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            color: "#ccc",
+          },
+        }}
+      />
+      <IconButton onClick={onDelete}>
+        {type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />}
+      </IconButton>
+    </ListItem>
+  );
+};
+
+const StyledPrimary = styled("div")`
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ListItemTextChild = styled("span")`
+  display: block;
+`;
+
+const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.primary.main, 0.5),
+  color: alpha(theme.palette.primary.main, 0.8),
+  borderRadius: 4,
+  fontSize: 10,
+  padding: "0 4px",
+  lineHeight: 1.5,
+  marginRight: "8px",
+}));

src/components/profile/rule-item.tsx

@@ -1,11 +1,10 @@
 import {
   Box,
-  Divider,
   IconButton,
   ListItem,
   ListItemText,
-  Typography,
   alpha,
+  styled,
 } from "@mui/material";
 import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
 import { useSortable } from "@dnd-kit/sortable";
@@ -19,7 +18,12 @@ interface Props {
 export const RuleItem = (props: Props) => {
   let { type, ruleRaw, onDelete } = props;
   const sortable = type === "prepend" || type === "append";
-  const rule = ruleRaw.replace(",no-resolve", "").split(",");
+  const rule = ruleRaw.replace(",no-resolve", "");
+
+  const ruleType = rule.match(/^[^,]+/)?.[0] ?? "";
+  const proxyPolicy = rule.match(/[^,]+$/)?.[0] ?? "";
+  const ruleContent = rule.slice(ruleType.length + 1, -proxyPolicy.length - 1);
+
   const { attributes, listeners, setNodeRef, transform, transition } = sortable
     ? useSortable({ id: ruleRaw })
     : {
@@ -31,17 +35,19 @@ export const RuleItem = (props: Props) => {
       };
   return (
     <ListItem
+      dense
       sx={({ palette }) => ({
-        p: 0,
+        background:
-        borderRadius: "10px",
-        border: "solid 2px",
-        borderColor:
           type === "original"
-            ? "var(--divider-color)"
+            ? palette.mode === "dark"
+              ? alpha(palette.background.paper, 0.3)
+              : alpha(palette.grey[400], 0.3)
             : type === "delete"
-            ? alpha(palette.error.main, 0.5)
+            ? alpha(palette.error.main, 0.3)
-            : alpha(palette.success.main, 0.5),
+            : alpha(palette.success.main, 0.3),
-        mb: 1,
+        height: "100%",
+        margin: "8px 0",
+        borderRadius: "8px",
         transform: CSS.Transform.toString(transform),
         transition,
       })}
@@ -50,34 +56,76 @@ export const RuleItem = (props: Props) => {
         {...attributes}
         {...listeners}
         ref={setNodeRef}
-        sx={{ px: 1 }}
+        sx={{ cursor: sortable ? "move" : "" }}
         primary={
-          <>
+          <StyledPrimary
-            <Typography
+            sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
-              sx={{
+          >
-                textDecoration: type === "delete" ? "line-through" : "",
+            {ruleContent || "-"}
-                overflow: "hidden",
+          </StyledPrimary>
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis",
-              }}
-              variant="h6"
-              title={rule.length === 3 ? rule[1] : "-"}
-            >
-              {rule.length === 3 ? rule[1] : "-"}
-            </Typography>
-          </>
         }
         secondary={
-          <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+          <ListItemTextChild
-            <Box>{rule[0]}</Box>
+            sx={{
-            <Box>{rule.length === 3 ? rule[2] : rule[1]}</Box>
+              width: "62%",
-          </Box>
+              overflow: "hidden",
+              display: "flex",
+              justifyContent: "space-between",
+              pt: "2px",
+            }}
+          >
+            <Box sx={{ marginTop: "2px" }}>
+              <StyledTypeBox>{ruleType}</StyledTypeBox>
+            </Box>
+            <StyledSubtitle sx={{ color: "text.secondary" }}>
+              {proxyPolicy}
+            </StyledSubtitle>
+          </ListItemTextChild>
         }
+        secondaryTypographyProps={{
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            color: "#ccc",
+          },
+        }}
       />
-      <Divider orientation="vertical" flexItem />
+      <IconButton onClick={onDelete}>
-      <IconButton size="small" color="inherit" onClick={onDelete}>
         {type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />}
       </IconButton>
     </ListItem>
   );
 };
+
+const StyledPrimary = styled("div")`
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledSubtitle = styled("span")`
+  font-size: 13px;
+  overflow: hidden;
+  color: text.secondary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ListItemTextChild = styled("span")`
+  display: block;
+`;
+
+const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.primary.main, 0.5),
+  color: alpha(theme.palette.primary.main, 0.8),
+  borderRadius: 4,
+  fontSize: 10,
+  padding: "0 4px",
+  lineHeight: 1.5,
+  marginRight: "8px",
+}));

src/components/profile/rules-editor-viewer.tsx

@@ -40,8 +40,9 @@ import MonacoEditor from "react-monaco-editor";
 import { useThemeMode } from "@/services/states";
 
 interface Props {
+  groupsUid: string;
+  mergeUid: string;
   profileUid: string;
-  title?: string | ReactNode;
   property: string;
   open: boolean;
   onClose: () => void;
@@ -230,13 +231,14 @@ const rules: {
 const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
 
 export const RulesEditorViewer = (props: Props) => {
-  const { title, profileUid, property, open, onClose, onSave } = props;
+  const { groupsUid, mergeUid, profileUid, property, open, onClose, onSave } =
+    props;
   const { t } = useTranslation();
   const themeMode = useThemeMode();
 
   const [prevData, setPrevData] = useState("");
   const [currData, setCurrData] = useState("");
-  const [visible, setVisible] = useState(true);
+  const [visualization, setVisualization] = useState(true);
   const [match, setMatch] = useState(() => (_: string) => true);
 
   const [ruleType, setRuleType] = useState<(typeof rules)[number]>(rules[0]);
@@ -252,10 +254,18 @@ export const RulesEditorViewer = (props: Props) => {
   const [appendSeq, setAppendSeq] = useState<string[]>([]);
   const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
 
+  const filteredPrependSeq = useMemo(
+    () => prependSeq.filter((rule) => match(rule)),
+    [prependSeq, match]
+  );
   const filteredRuleList = useMemo(
     () => ruleList.filter((rule) => match(rule)),
     [ruleList, match]
   );
+  const filteredAppendSeq = useMemo(
+    () => appendSeq.filter((rule) => match(rule)),
+    [appendSeq, match]
+  );
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -291,11 +301,11 @@ export const RulesEditorViewer = (props: Props) => {
   };
   const fetchContent = async () => {
     let data = await readProfileFile(property);
-    let obj = yaml.load(data) as { prepend: []; append: []; delete: [] };
+    let obj = yaml.load(data) as ISeqProfileConfig | null;
 
-    setPrependSeq(obj.prepend || []);
+    setPrependSeq(obj?.prepend || []);
-    setAppendSeq(obj.append || []);
+    setAppendSeq(obj?.append || []);
-    setDeleteSeq(obj.delete || []);
+    setDeleteSeq(obj?.delete || []);
 
     setPrevData(data);
     setCurrData(data);
@@ -303,46 +313,83 @@ export const RulesEditorViewer = (props: Props) => {
 
   useEffect(() => {
     if (currData === "") return;
-    if (visible !== true) return;
+    if (visualization !== true) return;
 
-    let obj = yaml.load(currData) as { prepend: []; append: []; delete: [] };
+    let obj = yaml.load(currData) as ISeqProfileConfig | null;
-    setPrependSeq(obj.prepend || []);
+    setPrependSeq(obj?.prepend || []);
-    setAppendSeq(obj.append || []);
+    setAppendSeq(obj?.append || []);
-    setDeleteSeq(obj.delete || []);
+    setDeleteSeq(obj?.delete || []);
-  }, [visible]);
+  }, [visualization]);
 
   useEffect(() => {
     if (prependSeq && appendSeq && deleteSeq)
       setCurrData(
-        yaml.dump({ prepend: prependSeq, append: appendSeq, delete: deleteSeq })
+        yaml.dump(
+          { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
+          {
+            forceQuotes: true,
+          }
+        )
       );
   }, [prependSeq, appendSeq, deleteSeq]);
 
   const fetchProfile = async () => {
-    let data = await readProfileFile(profileUid);
+    let data = await readProfileFile(profileUid); // 原配置文件
-    let groupsObj = yaml.load(data) as { "proxy-groups": [] };
+    let groupsData = await readProfileFile(groupsUid); // groups配置文件
-    let rulesObj = yaml.load(data) as { rules: [] };
+    let mergeData = await readProfileFile(mergeUid); // merge配置文件
-    let ruleSetObj = yaml.load(data) as { "rule-providers": [] };
+    let globalMergeData = await readProfileFile("Merge"); // global merge配置文件
-    let subRuleObj = yaml.load(data) as { "sub-rules": [] };
+
+    let rulesObj = yaml.load(data) as { rules: [] } | null;
+
+    let originGroupsObj = yaml.load(data) as { "proxy-groups": [] } | null;
+    let originGroups = originGroupsObj?.["proxy-groups"] || [];
+    let moreGroupsObj = yaml.load(groupsData) as ISeqProfileConfig | null;
+    let morePrependGroups = moreGroupsObj?.["prepend"] || [];
+    let moreAppendGroups = moreGroupsObj?.["append"] || [];
+    let moreDeleteGroups =
+      moreGroupsObj?.["delete"] || ([] as string[] | { name: string }[]);
+    let groups = morePrependGroups.concat(
+      originGroups.filter((group: any) => {
+        if (group.name) {
+          return !moreDeleteGroups.includes(group.name);
+        } else {
+          return !moreDeleteGroups.includes(group);
+        }
+      }),
+      moreAppendGroups
+    );
+
+    let originRuleSetObj = yaml.load(data) as { "rule-providers": {} } | null;
+    let originRuleSet = originRuleSetObj?.["rule-providers"] || {};
+    let moreRuleSetObj = yaml.load(mergeData) as {
+      "rule-providers": {};
+    } | null;
+    let moreRuleSet = moreRuleSetObj?.["rule-providers"] || {};
+    let globalRuleSetObj = yaml.load(globalMergeData) as {
+      "rule-providers": {};
+    } | null;
+    let globalRuleSet = globalRuleSetObj?.["rule-providers"] || {};
+    let ruleSet = Object.assign({}, originRuleSet, moreRuleSet, globalRuleSet);
+
+    let originSubRuleObj = yaml.load(data) as { "sub-rules": {} } | null;
+    let originSubRule = originSubRuleObj?.["sub-rules"] || {};
+    let moreSubRuleObj = yaml.load(mergeData) as { "sub-rules": {} } | null;
+    let moreSubRule = moreSubRuleObj?.["sub-rules"] || {};
+    let globalSubRuleObj = yaml.load(globalMergeData) as {
+      "sub-rules": {};
+    } | null;
+    let globalSubRule = globalSubRuleObj?.["sub-rules"] || {};
+    let subRule = Object.assign({}, originSubRule, moreSubRule, globalSubRule);
     setProxyPolicyList(
-      builtinProxyPolicies.concat(
+      builtinProxyPolicies.concat(groups.map((group: any) => group.name))
-        groupsObj["proxy-groups"]
-          ? groupsObj["proxy-groups"].map((item: any) => item.name)
-          : []
-      )
-    );
-    setRuleList(rulesObj.rules || []);
-    setRuleSetList(
-      ruleSetObj["rule-providers"]
-        ? Object.keys(ruleSetObj["rule-providers"])
-        : []
-    );
-    setSubRuleList(
-      subRuleObj["sub-rules"] ? Object.keys(subRuleObj["sub-rules"]) : []
     );
+    setRuleSetList(Object.keys(ruleSet));
+    setSubRuleList(Object.keys(subRule));
+    setRuleList(rulesObj?.rules || []);
   };
 
   useEffect(() => {
+    if (!open) return;
     fetchContent();
     fetchProfile();
   }, [open]);
@@ -355,9 +402,10 @@ export const RulesEditorViewer = (props: Props) => {
       throw new Error(t("Invalid Rule"));
     }
 
-    return `${ruleType.name}${
+    const condition = ruleType.required ?? true ? ruleContent : "";
-      ruleContent ? "," + ruleContent : ""
+    return `${ruleType.name}${condition ? "," + condition : ""},${proxyPolicy}${
-    },${proxyPolicy}${ruleType.noResolve && noResolve ? ",no-resolve" : ""}`;
+      ruleType.noResolve && noResolve ? ",no-resolve" : ""
+    }`;
   };
 
   const handleSave = useLockFn(async () => {
@@ -381,10 +429,10 @@ export const RulesEditorViewer = (props: Props) => {
                 variant="contained"
                 size="small"
                 onClick={() => {
-                  setVisible((prev) => !prev);
+                  setVisualization((prev) => !prev);
                 }}
               >
-                {visible ? t("Advanced") : t("Visible")}
+                {visualization ? t("Advanced") : t("Visualization")}
               </Button>
             </Box>
           </Box>
@@ -394,7 +442,7 @@ export const RulesEditorViewer = (props: Props) => {
       <DialogContent
         sx={{ display: "flex", width: "auto", height: "calc(100vh - 185px)" }}
       >
-        {visible ? (
+        {visualization ? (
           <>
             <List
               sx={{
@@ -533,13 +581,13 @@ export const RulesEditorViewer = (props: Props) => {
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={
                   filteredRuleList.length +
-                  (prependSeq.length > 0 ? 1 : 0) +
+                  (filteredPrependSeq.length > 0 ? 1 : 0) +
-                  (appendSeq.length > 0 ? 1 : 0)
+                  (filteredAppendSeq.length > 0 ? 1 : 0)
                 }
                 increaseViewportBy={256}
                 itemContent={(index) => {
-                  let shift = prependSeq.length > 0 ? 1 : 0;
+                  let shift = filteredPrependSeq.length > 0 ? 1 : 0;
-                  if (prependSeq.length > 0 && index === 0) {
+                  if (filteredPrependSeq.length > 0 && index === 0) {
                     return (
                       <DndContext
                         sensors={sensors}
@@ -547,11 +595,11 @@ export const RulesEditorViewer = (props: Props) => {
                         onDragEnd={onPrependDragEnd}
                       >
                         <SortableContext
-                          items={prependSeq.map((x) => {
+                          items={filteredPrependSeq.map((x) => {
                             return x;
                           })}
                         >
-                          {prependSeq.map((item, index) => {
+                          {filteredPrependSeq.map((item, index) => {
                             return (
                               <RuleItem
                                 key={`${item}-${index}`}
@@ -603,11 +651,11 @@ export const RulesEditorViewer = (props: Props) => {
                         onDragEnd={onAppendDragEnd}
                       >
                         <SortableContext
-                          items={appendSeq.map((x) => {
+                          items={filteredAppendSeq.map((x) => {
                             return x;
                           })}
                         >
-                          {appendSeq.map((item, index) => {
+                          {filteredAppendSeq.map((item, index) => {
                             return (
                               <RuleItem
                                 key={`${item}-${index}`}

src/components/setting/mods/clash-port-viewer.tsx

@@ -19,13 +19,13 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
     verge?.verge_redir_port ?? clashInfo?.redir_port ?? 7895
   );
   const [redirEnabled, setRedirEnabled] = useState(
-    verge?.verge_redir_enabled ?? true
+    verge?.verge_redir_enabled ?? false
   );
   const [tproxyPort, setTproxyPort] = useState(
     verge?.verge_tproxy_port ?? clashInfo?.tproxy_port ?? 7896
   );
   const [tproxyEnabled, setTproxyEnabled] = useState(
-    verge?.verge_tproxy_enabled ?? true
+    verge?.verge_tproxy_enabled ?? false
   );
   const [mixedPort, setMixedPort] = useState(
     verge?.verge_mixed_port ?? clashInfo?.mixed_port ?? 7897
@@ -34,26 +34,26 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
     verge?.verge_socks_port ?? clashInfo?.socks_port ?? 7898
   );
   const [socksEnabled, setSocksEnabled] = useState(
-    verge?.verge_socks_enabled ?? true
+    verge?.verge_socks_enabled ?? false
   );
   const [port, setPort] = useState(
     verge?.verge_port ?? clashInfo?.port ?? 7899
   );
   const [httpEnabled, setHttpEnabled] = useState(
-    verge?.verge_http_enabled ?? true
+    verge?.verge_http_enabled ?? false
   );
 
   useImperativeHandle(ref, () => ({
     open: () => {
       if (verge?.verge_redir_port) setRedirPort(verge?.verge_redir_port);
-      setRedirEnabled(verge?.verge_redir_enabled ?? true);
+      setRedirEnabled(verge?.verge_redir_enabled ?? false);
       if (verge?.verge_tproxy_port) setTproxyPort(verge?.verge_tproxy_port);
-      setTproxyEnabled(verge?.verge_tproxy_enabled ?? true);
+      setTproxyEnabled(verge?.verge_tproxy_enabled ?? false);
       if (verge?.verge_mixed_port) setMixedPort(verge?.verge_mixed_port);
       if (verge?.verge_socks_port) setSocksPort(verge?.verge_socks_port);
-      setSocksEnabled(verge?.verge_socks_enabled ?? true);
+      setSocksEnabled(verge?.verge_socks_enabled ?? false);
       if (verge?.verge_port) setPort(verge?.verge_port);
-      setHttpEnabled(verge?.verge_http_enabled ?? true);
+      setHttpEnabled(verge?.verge_http_enabled ?? false);
       setOpen(true);
     },
     close: () => setOpen(false),

src/components/setting/mods/sysproxy-viewer.tsx

@@ -28,10 +28,10 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   let validReg;
   if (getSystem() === "windows") {
     validReg =
-      /^((\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(\d{1,3}\.){1,3}\d{1,3}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\*|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+|localhost|<local>)(;((\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(\d{1,3}\.){1,3}\d{1,3}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\*|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+|localhost|<local>))*;?$/;
+      /^((\*\.)?([a-zA-Z0-9-]+\.?)+(local|test|example|invalid|localhost|onion|([a-zA-Z]{2,}))|(\d{1,3}\.){1,3}\d{1,3}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\*|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+|localhost|<local>)(;((\*\.)?([a-zA-Z0-9-]+\.?)+(local|test|example|invalid|localhost|onion|([a-zA-Z]{2,}))|(\d{1,3}\.){1,3}\d{1,3}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\d{1,3}\.\*|\d{1,3}\.\*|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+|localhost|<local>))*;?$/;
   } else {
     validReg =
-      /^((\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(\d{1,3}\.){1,3}\d{1,3}(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+(\/\d{1,3})?|localhost|<local>)(,((\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(\d{1,3}\.){1,3}\d{1,3}(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+(\/\d{1,3})?|localhost|<local>))*,?$/;
+      /^((\*\.)?([a-zA-Z0-9-]+\.?)+(local|test|example|invalid|localhost|onion|([a-zA-Z]{2,}))|(\d{1,3}\.){1,3}\d{1,3}(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+(\/\d{1,3})?|localhost|<local>)(,((\*\.)?([a-zA-Z0-9-]+\.?)+(local|test|example|invalid|localhost|onion|([a-zA-Z]{2,}))|(\d{1,3}\.){1,3}\d{1,3}(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\d{1,3}\.\*(\/\d{1,2}|\/3[0-2])?|\d{1,3}\.\*(\/3[0-2])?|([a-fA-F0-9:]+:+)+[a-fA-F0-9]+(\/\d{1,3})?|localhost|<local>))*,?$/;
   }
 
   const [open, setOpen] = useState(false);

src/locales/en.json

@@ -54,6 +54,7 @@
   "Create Profile": "Create Profile",
   "Edit Profile": "Edit Profile",
   "Edit Proxies": "Edit Proxies",
+  "Use newlines for multiple uri": "Use newlines for multiple uri",
   "Edit Rules": "Edit Rules",
   "Rule Type": "Rule Type",
   "Rule Content": "Rule Content",
@@ -61,11 +62,14 @@
   "No Resolve": "No Resolve",
   "Prepend Rule": "Prepend Rule",
   "Append Rule": "Append Rule",
-  "Delete Rule": "Delete Rule",
+  "Prepend Group": "Prepend Group",
+  "Append Group": "Append Group",
+  "Prepend Proxy": "Prepend Proxy",
+  "Append Proxy": "Append Proxy",
   "Rule Condition Required": "Rule Condition Required",
   "Invalid Rule": "Invalid Rule",
   "Advanced": "Advanced",
-  "Visible": "Visible",
+  "Visualization": "Visualization",
   "DOMAIN": "Matches the full domain name",
   "DOMAIN-SUFFIX": "Matches the domain suffix",
   "DOMAIN-KEYWORD": "Matches the domain keyword",
@@ -104,6 +108,25 @@
   "REJECT-DROP": "Discards requests",
   "PASS": "Skips this rule when matched",
   "Edit Groups": "Edit Proxy Groups",
+  "Group Type": "Group Type",
+  "Group Name": "Group Name",
+  "Use Proxies": "Use Proxies",
+  "Use Provider": "Use Provider",
+  "Health Check Url": "Health Check Url",
+  "Interval": "Interval",
+  "Lazy": "Lazy",
+  "Timeout": "Timeout",
+  "Max Failed Times": "Max Failed Times",
+  "Interface Name": "Interface Name",
+  "Routing Mark": "Routing Mark",
+  "Include All": "Include All Proxies and Providers",
+  "Include All Providers": "Include All Providers",
+  "Include All Proxies": "Include All Proxies",
+  "Exclude Filter": "Exclude Filter",
+  "Exclude Type": "Exclude Type",
+  "Expected Status": "Expected Status",
+  "Disable UDP": "Disable UDP",
+  "Hidden": "Hidden",
   "Extend Config": "Extend Config",
   "Extend Script": "Extend Script",
   "Global Merge": "Global Extend Config",

src/locales/fa.json

@@ -54,6 +54,7 @@
   "Create Profile": "ایجاد پروفایل",
   "Edit Profile": "ویرایش پروفایل",
   "Edit Proxies": "ویرایش پروکسی‌ها",
+  "Use newlines for multiple uri": "استفاده از خطوط جدید برای چندین آدرس",
   "Edit Rules": "ویرایش قوانین",
   "Rule Type": "نوع قانون",
   "Rule Content": "محتوای قانون",
@@ -61,9 +62,12 @@
   "No Resolve": "بدون حل",
   "Prepend Rule": "اضافه کردن قانون به ابتدا",
   "Append Rule": "اضافه کردن قانون به انتها",
-  "Delete Rule": "حذف قانون",
+  "Prepend Group": "اضافه کردن گروه به ابتدا",
+  "Append Group": "اضافه کردن گروه به انتها",
   "Rule Condition Required": "شرط قانون الزامی است",
   "Invalid Rule": "قانون نامعتبر",
+  "Advanced": "پیشرفته",
+  "Visualization": "تجسم",
   "DOMAIN": "مطابقت با نام کامل دامنه",
   "DOMAIN-SUFFIX": "مطابقت با پسوند دامنه",
   "DOMAIN-KEYWORD": "مطابقت با کلمه کلیدی دامنه",
@@ -102,6 +106,25 @@
   "REJECT-DROP": "درخواست‌ها را نادیده می‌گیرد",
   "PASS": "این قانون را در صورت تطابق نادیده می‌گیرد",
   "Edit Groups": "ویرایش گروه‌های پروکسی",
+  "Group Type": "نوع گروه",
+  "Group Name": "نام گروه",
+  "Use Proxies": "استفاده از پروکسی‌ها",
+  "Use Provider": "استفاده از ارائه‌دهنده",
+  "Health Check Url": "آدرس بررسی سلامت",
+  "Interval": "فاصله زمانی",
+  "Lazy": "تنبل",
+  "Timeout": "زمان قطع",
+  "Max Failed Times": "حداکثر تعداد شکست‌ها",
+  "Interface Name": "نام رابط",
+  "Routing Mark": "علامت مسیریابی",
+  "Include All": "شامل همه پروکسی‌ها و ارائه‌دهنده‌ها",
+  "Include All Providers": "شامل همه ارائه‌دهنده‌ها",
+  "Include All Proxies": "شامل همه پروکسی‌ها",
+  "Exclude Filter": "فیلتر استثناء",
+  "Exclude Type": "نوع استثناء",
+  "Expected Status": "وضعیت مورد انتظار",
+  "Disable UDP": "غیرفعال کردن UDP",
+  "Hidden": "مخفی",
   "Extend Config": "توسعه پیکربندی",
   "Extend Script": "ادغام اسکریپت",
   "Global Merge": "تنظیمات گسترده‌ی سراسری",

src/locales/ru.json

@@ -54,6 +54,7 @@
   "Create Profile": "Создать профиль",
   "Edit Profile": "Изменить профиль",
   "Edit Proxies": "Редактировать прокси",
+  "Use newlines for multiple uri": "Используйте новые строки для нескольких URI",
   "Edit Rules": "Редактировать правила",
   "Rule Type": "Тип правила",
   "Rule Content": "Содержимое правила",
@@ -61,9 +62,12 @@
   "No Resolve": "Без разрешения",
   "Prepend Rule": "Добавить правило в начало",
   "Append Rule": "Добавить правило в конец",
-  "Delete Rule": "Удалить правило",
+  "Prepend Group": "Добавить группу в начало",
+  "Append Group": "Добавить группу в конец",
   "Rule Condition Required": "Требуется условие правила",
   "Invalid Rule": "Недействительное правило",
+  "Advanced": "Дополнительно",
+  "Visualization": "Визуализация",
   "DOMAIN": "Соответствует полному доменному имени",
   "DOMAIN-SUFFIX": "Соответствует суффиксу домена",
   "DOMAIN-KEYWORD": "Соответствует ключевому слову домена",
@@ -102,6 +106,25 @@
   "REJECT-DROP": "Отклоняет запросы",
   "PASS": "Пропускает это правило при совпадении",
   "Edit Groups": "Редактировать группы прокси",
+  "Group Type": "Тип группы",
+  "Group Name": "Имя группы",
+  "Use Proxies": "Использовать прокси",
+  "Use Provider": "Использовать провайдера",
+  "Health Check Url": "URL проверки здоровья",
+  "Interval": "Интервал",
+  "Lazy": "Ленивый",
+  "Timeout": "Таймаут",
+  "Max Failed Times": "Максимальное количество неудач",
+  "Interface Name": "Имя интерфейса",
+  "Routing Mark": "Марка маршрутизации",
+  "Include All": "Включить все прокси и провайдеры",
+  "Include All Providers": "Включить всех провайдеров",
+  "Include All Proxies": "Включить все прокси",
+  "Exclude Filter": "Исключить фильтр",
+  "Exclude Type": "Тип исключения",
+  "Expected Status": "Ожидаемый статус",
+  "Disable UDP": "Отключить UDP",
+  "Hidden": "Скрытый",
   "Extend Config": "Изменить Merge.",
   "Extend Script": "Изменить Script",
   "Global Merge": "Глобальный расширенный Настройки",

src/locales/zh.json

@@ -54,6 +54,7 @@
   "Create Profile": "新建配置",
   "Edit Profile": "编辑配置",
   "Edit Proxies": "编辑节点",
+  "Use newlines for multiple uri": "多条URI请使用换行分隔",
   "Edit Rules": "编辑规则",
   "Rule Type": "规则类型",
   "Rule Content": "规则内容",
@@ -61,11 +62,14 @@
   "No Resolve": "跳过DNS解析",
   "Prepend Rule": "添加前置规则",
   "Append Rule": "添加后置规则",
-  "Delete Rule": "删除规则",
+  "Prepend Group": "添加前置代理组",
+  "Append Group": "添加后置代理组",
+  "Prepend Proxy": "添加前置代理节点",
+  "Append Proxy": "添加后置代理节点",
   "Rule Condition Required": "规则条件缺失",
   "Invalid Rule": "无效规则",
   "Advanced": "高级",
-  "Visible": "可视化",
+  "Visualization": "可视化",
   "DOMAIN": "匹配完整域名",
   "DOMAIN-SUFFIX": "匹配域名后缀",
   "DOMAIN-KEYWORD": "匹配域名关键字",
@@ -104,6 +108,25 @@
   "REJECT-DROP": "抛弃请求",
   "PASS": "跳过此规则",
   "Edit Groups": "编辑代理组",
+  "Group Type": "代理组类型",
+  "Group Name": "代理组组名",
+  "Use Proxies": "引入代理",
+  "Use Provider": "引入代理集合",
+  "Health Check Url": "健康检查测试地址",
+  "Interval": "检查间隔",
+  "Lazy": "懒惰状态",
+  "Timeout": "超时时间",
+  "Max Failed Times": "最大失败次数",
+  "Interface Name": "出站接口",
+  "Routing Mark": "路由标记",
+  "Include All": "引入所有出站代理以及代理集合",
+  "Include All Providers": "引入所有代理集合",
+  "Include All Proxies": "引入所有出站代理",
+  "Exclude Filter": "排除节点",
+  "Exclude Type": "排除节点类型",
+  "Expected Status": "期望状态码",
+  "Disable UDP": "禁用UDP",
+  "Hidden": "隐藏该组",
   "Extend Config": "扩展配置",
   "Extend Script": "扩展脚本",
   "Global Merge": "全局扩展配置",

src/services/types.d.ts

@@ -199,9 +199,460 @@ interface IVergeTestItem {
 }
 
 interface ISeqProfileConfig {
-  prepend: string[];
+  prepend: [];
-  append: string[];
+  append: [];
-  delete: string[];
+  delete: [];
+}
+
+interface IProxyGroupConfig {
+  name: string;
+  type: "select" | "url-test" | "fallback" | "load-balance" | "relay";
+  proxies?: string[];
+  use?: string[];
+  url?: string;
+  interval?: number;
+  lazy?: boolean;
+  timeout?: number;
+  "max-failed-times"?: number;
+  "disable-udp"?: boolean;
+  "interface-name": string;
+  "routing-mark"?: number;
+  "include-all"?: boolean;
+  "include-all-proxies"?: boolean;
+  "include-all-providers"?: boolean;
+  filter?: string;
+  "exclude-filter"?: string;
+  "exclude-type"?: string;
+  "expected-status"?: string;
+  hidden?: boolean;
+  icon?: string;
+}
+
+interface WsOptions {
+  path?: string;
+  headers?: {
+    [key: string]: string;
+  };
+  "max-early-data"?: number;
+  "early-data-header-name"?: string;
+  "v2ray-http-upgrade"?: boolean;
+  "v2ray-http-upgrade-fast-open"?: boolean;
+}
+
+interface HttpOptions {
+  method?: string;
+  path?: string[];
+  headers?: {
+    [key: string]: string[];
+  };
+}
+
+interface H2Options {
+  path?: string;
+  host?: string;
+}
+
+interface GrpcOptions {
+  "grpc-service-name"?: string;
+}
+
+interface RealityOptions {
+  "public-key"?: string;
+  "short-id"?: string;
+}
+
+type NetworkType = "ws" | "http" | "h2" | "grpc";
+type CipherType =
+  | "none"
+  | "auto"
+  | "dummy"
+  | "aes-128-gcm"
+  | "aes-192-gcm"
+  | "aes-256-gcm"
+  | "lea-128-gcm"
+  | "lea-192-gcm"
+  | "lea-256-gcm"
+  | "aes-128-gcm-siv"
+  | "aes-256-gcm-siv"
+  | "2022-blake3-aes-128-gcm"
+  | "2022-blake3-aes-256-gcm"
+  | "aes-128-cfb"
+  | "aes-192-cfb"
+  | "aes-256-cfb"
+  | "aes-128-ctr"
+  | "aes-192-ctr"
+  | "aes-256-ctr"
+  | "chacha20"
+  | "chacha20-ietf"
+  | "chacha20-ietf-poly1305"
+  | "2022-blake3-chacha20-poly1305"
+  | "rabbit128-poly1305"
+  | "xchacha20-ietf-poly1305"
+  | "xchacha20"
+  | "aegis-128l"
+  | "aegis-256"
+  | "aez-384"
+  | "deoxys-ii-256-128"
+  | "rc4-md5";
+// base
+interface IProxyBaseConfig {
+  tfo?: boolean;
+  mptcp?: boolean;
+  "interface-name"?: string;
+  "routing-mark"?: number;
+  "ip-version"?: "dual" | "ipv4" | "ipv6" | "ipv4-prefer" | "ipv6-prefer";
+  "dialer-proxy"?: string;
+}
+// direct
+interface IProxyDirectConfig extends IProxyBaseConfig {
+  name: string;
+  type: "direct";
+}
+// dns
+interface IProxyDnsConfig extends IProxyBaseConfig {
+  name: string;
+  type: "dns";
+}
+// http
+interface IProxyHttpConfig extends IProxyBaseConfig {
+  name: string;
+  type: "http";
+  server?: string;
+  port?: number;
+  username?: string;
+  password?: string;
+  tls?: boolean;
+  sni?: string;
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  headers?: {
+    [key: string]: string;
+  };
+}
+// socks5
+interface IProxySocks5Config extends IProxyBaseConfig {
+  name: string;
+  type: "socks5";
+  server?: string;
+  port?: number;
+  username?: string;
+  password?: string;
+  tls?: boolean;
+  udp?: boolean;
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+}
+// ssh
+interface IProxySshConfig extends IProxyBaseConfig {
+  name: string;
+  type: "ssh";
+  server?: string;
+  port?: number;
+  username?: string;
+  password?: string;
+  "private-key"?: string;
+  "private-key-passphrase"?: string;
+  "host-key"?: string;
+  "host-key-algorithms"?: string;
+}
+// trojan
+interface IProxyTrojanConfig extends IProxyBaseConfig {
+  name: string;
+  type: "trojan";
+  server?: string;
+  port?: number;
+  password?: string;
+  alpn?: string[];
+  sni?: string;
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  udp?: boolean;
+  network?: NetworkType;
+  "reality-opts"?: RealityOptions;
+  "grpc-opts"?: GrpcOptions;
+  "ws-opts"?: WsOptions;
+  "ss-opts"?: {
+    enabled?: boolean;
+    method?: string;
+    password?: string;
+  };
+  "client-fingerprint"?: string;
+}
+// tuic
+interface IProxyTuicConfig extends IProxyBaseConfig {
+  name: string;
+  type: "tuic";
+  server?: string;
+  port?: number;
+  token?: string;
+  uuid?: string;
+  password?: string;
+  ip?: string;
+  "heartbeat-interval"?: number;
+  alpn?: string[];
+  "reduce-rtt"?: boolean;
+  "request-timeout"?: number;
+  "udp-relay-mode"?: string;
+  "congestion-controller"?: string;
+  "disable-sni"?: boolean;
+  "max-udp-relay-packet-size"?: number;
+  "fast-open"?: boolean;
+  "max-open-streams"?: number;
+  cwnd?: number;
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  ca?: string;
+  "ca-str"?: string;
+  "recv-window-conn"?: number;
+  "recv-window"?: number;
+  "disable-mtu-discovery"?: boolean;
+  "max-datagram-frame-size"?: number;
+  sni?: string;
+  "udp-over-stream"?: boolean;
+  "udp-over-stream-version"?: number;
+}
+// vless
+interface IProxyVlessConfig extends IProxyBaseConfig {
+  name: string;
+  type: "vless";
+  server?: string;
+  port?: number;
+  uuid?: string;
+  flow?: string;
+  tls?: boolean;
+  alpn?: string[];
+  udp?: boolean;
+  "packet-addr"?: boolean;
+  xudp?: boolean;
+  "packet-encoding"?: string;
+  network?: NetworkType;
+  "reality-opts"?: RealityOptions;
+  "http-opts"?: HttpOptions;
+  "h2-opts"?: H2Options;
+  "grpc-opts"?: GrpcOptions;
+  "ws-opts"?: WsOptions;
+  "ws-path"?: string;
+  "ws-headers"?: {
+    [key: string]: string;
+  };
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  servername?: string;
+  "client-fingerprint"?: string;
+}
+// vmess
+interface IProxyVmessConfig extends IProxyBaseConfig {
+  name: string;
+  type: "vmess";
+  server?: string;
+  port?: number;
+  uuid?: string;
+  alterId?: number;
+  cipher?: CipherType;
+  udp?: boolean;
+  network?: NetworkType;
+  tls?: boolean;
+  alpn?: string[];
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  servername?: string;
+  "reality-opts"?: RealityOptions;
+  "http-opts"?: HttpOptions;
+  "h2-opts"?: H2Options;
+  "grpc-opts"?: GrpcOptions;
+  "ws-opts"?: WsOptions;
+  "packet-addr"?: boolean;
+  xudp?: boolean;
+  "packet-encoding"?: string;
+  "global-padding"?: boolean;
+  "authenticated-length"?: boolean;
+  "client-fingerprint"?: string;
+}
+interface WireGuardPeerOptions {
+  server?: string;
+  port?: number;
+  "public-key"?: string;
+  "pre-shared-key"?: string;
+  reserved?: number[];
+  "allowed-ips"?: string[];
+}
+// wireguard
+interface IProxyWireguardConfig extends IProxyBaseConfig, WireGuardPeerOptions {
+  name: string;
+  type: "wireguard";
+  ip?: string;
+  ipv6?: string;
+  "private-key"?: string;
+  workers?: number;
+  mtu?: number;
+  udp?: boolean;
+  "persistent-keepalive"?: number;
+  peers?: WireGuardPeerOptions[];
+  "remote-dns-resolve"?: boolean;
+  dns?: string[];
+  "refresh-server-ip-interval"?: number;
+}
+// hysteria
+interface IProxyHysteriaConfig extends IProxyBaseConfig {
+  name: string;
+  type: "hysteria";
+  server?: string;
+  port?: number;
+  ports?: string;
+  protocol?: string;
+  "obfs-protocol"?: string;
+  up?: string;
+  "up-speed"?: number;
+  down?: string;
+  "down-speed"?: number;
+  auth?: string;
+  "auth-str"?: string;
+  obfs?: string;
+  sni?: string;
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  alpn?: string[];
+  ca?: string;
+  "ca-str"?: string;
+  "recv-window-conn"?: number;
+  "recv-window"?: number;
+  "disable-mtu-discovery"?: boolean;
+  "fast-open"?: boolean;
+  "hop-interval"?: number;
+}
+// hysteria2
+interface IProxyHysteria2Config extends IProxyBaseConfig {
+  name: string;
+  type: "hysteria2";
+  server?: string;
+  port?: number;
+  ports?: string;
+  "hop-interval"?: number;
+  protocol?: string;
+  "obfs-protocol"?: string;
+  up?: string;
+  down?: string;
+  password?: string;
+  obfs?: string;
+  "obfs-password"?: string;
+  sni?: string;
+  "skip-cert-verify"?: boolean;
+  fingerprint?: string;
+  alpn?: string[];
+  ca?: string;
+  "ca-str"?: string;
+  cwnd?: number;
+  "udp-mtu"?: number;
+}
+// shadowsocks
+interface IProxyShadowsocksConfig extends IProxyBaseConfig {
+  name: string;
+  type: "ss";
+  server?: string;
+  port?: number;
+  password?: string;
+  cipher?: CipherType;
+  udp?: boolean;
+  plugin?: "obfs" | "v2ray-plugin" | "shadow-tls" | "restls";
+  "plugin-opts"?: {
+    mode?: string;
+    host?: string;
+    password?: string;
+    path?: string;
+    tls?: string;
+    fingerprint?: string;
+    headers?: {
+      [key: string]: string;
+    };
+    "skip-cert-verify"?: boolean;
+    version?: number;
+    mux?: boolean;
+    "v2ray-http-upgrade"?: boolean;
+    "v2ray-http-upgrade-fast-open"?: boolean;
+    "version-hint"?: string;
+    "restls-script"?: string;
+  };
+  "udp-over-tcp"?: boolean;
+  "udp-over-tcp-version"?: number;
+  "client-fingerprint"?: string;
+}
+// shadowsocksR
+interface IProxyshadowsocksRConfig extends IProxyBaseConfig {
+  name: string;
+  type: "ssr";
+  server?: string;
+  port?: number;
+  password?: string;
+  cipher?: CipherType;
+  obfs?: string;
+  "obfs-param"?: string;
+  protocol?: string;
+  "protocol-param"?: string;
+  udp?: boolean;
+}
+// sing-mux
+interface IProxySmuxConfig {
+  smux?: {
+    enabled?: boolean;
+    protocol?: "smux" | "yamux" | "h2mux";
+    "max-connections"?: number;
+    "min-streams"?: number;
+    "max-streams"?: number;
+    padding?: boolean;
+    statistic?: boolean;
+    "only-tcp"?: boolean;
+    "brutal-opts"?: {
+      enabled?: boolean;
+      up?: string;
+      down?: string;
+    };
+  };
+}
+// snell
+interface IProxySnellConfig extends IProxyBaseConfig {
+  name: string;
+  type: "snell";
+  server?: string;
+  port?: number;
+  psk?: string;
+  udp?: boolean;
+  version?: number;
+  "obfs-opts"?: {};
+}
+interface IProxyConfig
+  extends IProxyBaseConfig,
+    IProxyDirectConfig,
+    IProxyDnsConfig,
+    IProxyHttpConfig,
+    IProxySocks5Config,
+    IProxySshConfig,
+    IProxyTrojanConfig,
+    IProxyTuicConfig,
+    IProxyVlessConfig,
+    IProxyVmessConfig,
+    IProxyWireguardConfig,
+    IProxyHysteriaConfig,
+    IProxyHysteria2Config,
+    IProxyShadowsocksConfig,
+    IProxyshadowsocksRConfig,
+    IProxySmuxConfig,
+    IProxySnellConfig {
+  type:
+    | "ss"
+    | "ssr"
+    | "direct"
+    | "dns"
+    | "snell"
+    | "http"
+    | "trojan"
+    | "hysteria"
+    | "hysteria2"
+    | "tuic"
+    | "wireguard"
+    | "ssh"
+    | "socks5"
+    | "vmess"
+    | "vless";
 }
 
 interface IVergeConfig {

src/utils/trojan-uri.peg

@@ -0,0 +1,131 @@
+// global initializer
+{{
+  function $set(obj, path, value) {
+    if (Object(obj) !== obj) return obj;
+    if (!Array.isArray(path)) path = path.toString().match(/[^.[\]]+/g) || [];
+    path
+      .slice(0, -1)
+      .reduce((a, c, i) => (Object(a[c]) === a[c] ? a[c] : (a[c] = Math.abs(path[i + 1]) >> 0 === +path[i + 1] ? [] : {})), obj)[
+      path[path.length - 1]
+    ] = value;
+    return obj;
+  }
+
+  function toBool(str) {
+    if (typeof str === 'undefined' || str === null) return undefined;
+    return /(TRUE)|1/i.test(str);
+  }
+}}
+
+{
+  const proxy = {};
+  const obfs = {};
+  const $ = {};
+  const params = {};
+}
+
+start = (trojan) {
+  return proxy
+}
+
+trojan = "trojan://" password:password "@" server:server ":" port:port "/"? params? name:name?{
+  proxy.type = "trojan";
+  proxy.password = password;
+  proxy.server = server;
+  proxy.port = port;
+  proxy.name = name;
+
+  // name may be empty
+  if (!proxy.name) {
+    proxy.name = server + ":" + port;
+  }
+};
+
+password = match:$[^@]+ {
+  return decodeURIComponent(match);
+};
+
+server = ip/domain;
+
+domain = match:[0-9a-zA-z-_.]+ { 
+  const domain = match.join(""); 
+  if (/(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/.test(domain)) {
+    return domain;
+  }
+}
+
+ip = & {
+  const start = peg$currPos;
+  let end;
+  let j = start;
+  while (j < input.length) {
+    if (input[j] === ",") break;
+    if (input[j] === ":") end = j;
+    j++;
+  }
+  peg$currPos = end || j;
+  $.ip = input.substring(start, end).trim();
+  return true;
+} { return $.ip; }
+
+port = digits:[0-9]+ { 
+  const port = parseInt(digits.join(""), 10); 
+  if (port >= 0 && port <= 65535) {
+    return port;
+  } else {
+    throw new Error("Invalid port: " + port);
+  }
+}
+
+params = "?" head:param tail:("&"@param)* {
+  proxy["skip-cert-verify"] = toBool(params["allowInsecure"]);
+  proxy.sni = params["sni"] || params["peer"];
+
+  if (toBool(params["ws"])) {
+    proxy.network = "ws";
+    $set(proxy, "ws-opts.path", params["wspath"]);
+  }
+  
+  if (params["type"]) {
+    let httpupgrade
+    proxy.network = params["type"]
+    if(proxy.network === 'httpupgrade') {
+      proxy.network = 'ws'
+      httpupgrade = true
+    }
+    if (['grpc'].includes(proxy.network)) {
+        proxy[proxy.network + '-opts'] = {
+            'grpc-service-name': params["serviceName"],
+            '_grpc-type': params["mode"],
+        };
+    } else {
+      if (params["path"]) {
+        $set(proxy, proxy.network+"-opts.path", decodeURIComponent(params["path"]));  
+      }
+      if (params["host"]) {
+        $set(proxy, proxy.network+"-opts.headers.Host", decodeURIComponent(params["host"])); 
+      }
+      if (httpupgrade) {
+        $set(proxy, proxy.network+"-opts.v2ray-http-upgrade", true); 
+        $set(proxy, proxy.network+"-opts.v2ray-http-upgrade-fast-open", true); 
+      }
+    }
+  }
+
+  proxy.udp = toBool(params["udp"]);
+  proxy.tfo = toBool(params["tfo"]);
+}
+
+param = kv/single;
+
+kv = key:$[a-z]i+ "=" value:$[^&#]i* {
+  params[key] = value;
+}
+
+single = key:$[a-z]i+ {
+  params[key] = true;
+};
+
+name = "#" + match:$.* {
+  return decodeURIComponent(match);
+}

src/utils/trojan-uri.ts

@@ -0,0 +1,141 @@
+import * as peggy from "peggy";
+const grammars = String.raw`
+// global initializer
+{{
+  function $set(obj, path, value) {
+    if (Object(obj) !== obj) return obj;
+    if (!Array.isArray(path)) path = path.toString().match(/[^.[\]]+/g) || [];
+    path
+      .slice(0, -1)
+      .reduce((a, c, i) => (Object(a[c]) === a[c] ? a[c] : (a[c] = Math.abs(path[i + 1]) >> 0 === +path[i + 1] ? [] : {})), obj)[
+      path[path.length - 1]
+    ] = value;
+    return obj;
+  }
+
+  function toBool(str) {
+    if (typeof str === 'undefined' || str === null) return undefined;
+    return /(TRUE)|1/i.test(str);
+  }
+}}
+
+{
+  const proxy = {};
+  const obfs = {};
+  const $ = {};
+  const params = {};
+}
+
+start = (trojan) {
+  return proxy
+}
+
+trojan = "trojan://" password:password "@" server:server ":" port:port "/"? params? name:name?{
+  proxy.type = "trojan";
+  proxy.password = password;
+  proxy.server = server;
+  proxy.port = port;
+  proxy.name = name;
+
+  // name may be empty
+  if (!proxy.name) {
+    proxy.name = server + ":" + port;
+  }
+};
+
+password = match:$[^@]+ {
+  return decodeURIComponent(match);
+};
+
+server = ip/domain;
+
+domain = match:[0-9a-zA-z-_.]+ { 
+  const domain = match.join(""); 
+  if (/(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/.test(domain)) {
+    return domain;
+  }
+}
+
+ip = & {
+  const start = peg$currPos;
+  let end;
+  let j = start;
+  while (j < input.length) {
+    if (input[j] === ",") break;
+    if (input[j] === ":") end = j;
+    j++;
+  }
+  peg$currPos = end || j;
+  $.ip = input.substring(start, end).trim();
+  return true;
+} { return $.ip; }
+
+port = digits:[0-9]+ { 
+  const port = parseInt(digits.join(""), 10); 
+  if (port >= 0 && port <= 65535) {
+    return port;
+  } else {
+    throw new Error("Invalid port: " + port);
+  }
+}
+
+params = "?" head:param tail:("&"@param)* {
+  proxy["skip-cert-verify"] = toBool(params["allowInsecure"]);
+  proxy.sni = params["sni"] || params["peer"];
+
+  if (toBool(params["ws"])) {
+    proxy.network = "ws";
+    $set(proxy, "ws-opts.path", params["wspath"]);
+  }
+  
+  if (params["type"]) {
+    let httpupgrade
+    proxy.network = params["type"]
+    if(proxy.network === 'httpupgrade') {
+      proxy.network = 'ws'
+      httpupgrade = true
+    }
+    if (['grpc'].includes(proxy.network)) {
+        proxy[proxy.network + '-opts'] = {
+            'grpc-service-name': params["serviceName"],
+            '_grpc-type': params["mode"],
+        };
+    } else {
+      if (params["path"]) {
+        $set(proxy, proxy.network+"-opts.path", decodeURIComponent(params["path"]));  
+      }
+      if (params["host"]) {
+        $set(proxy, proxy.network+"-opts.headers.Host", decodeURIComponent(params["host"])); 
+      }
+      if (httpupgrade) {
+        $set(proxy, proxy.network+"-opts.v2ray-http-upgrade", true); 
+        $set(proxy, proxy.network+"-opts.v2ray-http-upgrade-fast-open", true); 
+      }
+    }
+  }
+
+  proxy.udp = toBool(params["udp"]);
+  proxy.tfo = toBool(params["tfo"]);
+}
+
+param = kv/single;
+
+kv = key:$[a-z]i+ "=" value:$[^&#]i* {
+  params[key] = value;
+}
+
+single = key:$[a-z]i+ {
+  params[key] = true;
+};
+
+name = "#" + match:$.* {
+  return decodeURIComponent(match);
+}
+`;
+let parser: any;
+export default function getParser() {
+  if (!parser) {
+    parser = peggy.generate(grammars);
+  }
+  return parser;
+}