v0.0.29

.github/workflows/ci.yml

@@ -76,7 +76,7 @@ jobs:
       - name: Green zip bundle
         if: matrix.os == 'windows-latest'
         run: |
-          yarn run green
+          yarn run portable
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -106,7 +106,7 @@ jobs:
       - name: Yarn install
         run: yarn install
 
-      - name: Release update.json
+      - name: Release updater file
-        run: yarn run release
+        run: yarn run updater
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/updater.yml

@@ -0,0 +1,32 @@
+name: Updater CI
+
+on: workflow_dispatch
+
+jobs:
+  release-update:
+    runs-on: macos-latest
+    if: startsWith(github.repository, 'zzzgydi')
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Get yarn cache dir path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Yarn Cache
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Release updater file
+        run: yarn run updater
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -12,7 +12,8 @@ A <a href="https://github.com/Dreamacro/clash">Clash</a> GUI based on <a href="h
 ## Features
 
 - Full `clash` config supported, Partial `clash premium` config supported.
-- Profiles management and enhancement (by yaml and Javascript).
+- Profiles management and enhancement (by yaml and Javascript). [Doc](https://github.com/zzzgydi/clash-verge/issues/12)
+- Simple UI and supports custom theme color.
 - System proxy setting and guard.
 
 ## Install
@@ -64,6 +65,17 @@ yarn build
   <img src="./docs/demo6.png" alt="demo6" width="32%" />
 </div>
 
+### Custom Theme
+
+<div align="center">
+  <img src="./docs/color1.png" alt="demo1" width="16%" />
+  <img src="./docs/color2.png" alt="demo2" width="16%" />
+  <img src="./docs/color3.png" alt="demo3" width="16%" />
+  <img src="./docs/color4.png" alt="demo4" width="16%" />
+  <img src="./docs/color5.png" alt="demo5" width="16%" />
+  <img src="./docs/color6.png" alt="demo6" width="16%" />
+</div>
+
 ## Disclaimer
 
 This is a learning project for Rust practice.

UPDATELOG.md

@@ -1,3 +1,42 @@
+## v0.0.29
+
+### Features
+
+- sort proxy node
+- custom proxy test url
+- logs page filter
+- connections page filter
+- default user agent for subscription
+- system tray add tun mode toggle
+- enable to change the config dir (Windows only)
+
+## v0.0.28
+
+### Features
+
+- enable to use clash config fields (UI)
+
+### Bug Fixes
+
+- remove the character
+- fix some icon color
+
+---
+
+## v0.0.27
+
+### Features
+
+- supports custom theme color
+- tun mode setting control the final config
+
+### Bug Fixes
+
+- fix transition flickers (macOS)
+- reduce proxy page render
+
+---
+
 ## v0.0.26
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "0.0.26",
+  "version": "0.0.29",
   "license": "GPL-3.0",
   "scripts": {
     "dev": "tauri dev",
@@ -10,36 +10,37 @@
     "web:build": "tsc && vite build",
     "web:serve": "vite preview",
     "check": "node scripts/check.mjs",
-    "green": "node scripts/green.mjs",
+    "updater": "node scripts/updater.mjs",
     "publish": "node scripts/publish.mjs",
-    "release": "node scripts/release.mjs",
+    "portable": "node scripts/portable.mjs",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.4.4",
+    "@mui/icons-material": "^5.6.1",
-    "@mui/material": "^5.4.4",
+    "@mui/material": "^5.6.1",
-    "@tauri-apps/api": "^1.0.0-rc.2",
+    "@tauri-apps/api": "^1.0.0-rc.3",
-    "ahooks": "^3.1.13",
+    "ahooks": "^3.2.0",
     "axios": "^0.26.0",
-    "dayjs": "^1.10.8",
+    "dayjs": "^1.11.0",
     "i18next": "^21.6.14",
     "monaco-editor": "^0.33.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.6",
     "react-router-dom": "^6.2.2",
-    "react-virtuoso": "^2.7.0",
+    "react-virtuoso": "~2.7.2",
     "recoil": "^0.6.1",
     "snarkdown": "^2.0.0",
-    "swr": "^1.2.1"
+    "swr": "^1.2.2"
   },
   "devDependencies": {
     "@actions/github": "^5.0.0",
-    "@tauri-apps/cli": "^1.0.0-rc.7",
+    "@tauri-apps/cli": "^1.0.0-rc.8",
     "@types/fs-extra": "^9.0.13",
     "@types/js-cookie": "^3.0.1",
+    "@types/lodash": "^4.14.180",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.2.0",
@@ -51,7 +52,8 @@
     "sass": "^1.49.7",
     "typescript": "^4.5.5",
     "vite": "^2.8.6",
-    "vite-plugin-monaco-editor": "^1.0.10"
+    "vite-plugin-monaco-editor": "^1.0.10",
+    "vite-plugin-svgr": "^1.1.0"
   },
   "prettier": {
     "tabWidth": 2,

scripts/check.mjs

@@ -16,7 +16,7 @@ function resolveClash() {
 
   const CLASH_URL_PREFIX =
     "https://github.com/Dreamacro/clash/releases/download/premium/";
-  const CLASH_LATEST_DATE = "2022.03.21";
+  const CLASH_LATEST_DATE = "2022.04.11";
 
   // todo
   const map = {

scripts/portable.mjs

@@ -6,7 +6,7 @@ import { getOctokit, context } from "@actions/github";
 
 /// Script for ci
 /// 打包绿色版/便携版 (only Windows)
-async function resolveGreen() {
+async function resolvePortable() {
   if (process.platform !== "win32") return;
 
   const releaseDir = "./src-tauri/target/release";
@@ -25,10 +25,10 @@ async function resolveGreen() {
   const packageJson = require("../package.json");
   const { version } = packageJson;
 
-  const zipFile = `Clash.Verge_${version}_x64_green.zip`;
+  const zipFile = `Clash.Verge_${version}_x64_portable.zip`;
   zip.writeZip(zipFile);
 
-  console.log("[INFO]: create green zip successfully");
+  console.log("[INFO]: create portable zip successfully");
 
   // push release assets
   if (process.env.GITHUB_TOKEN === undefined) {
@@ -53,4 +53,4 @@ async function resolveGreen() {
   });
 }
 
-resolveGreen().catch(console.error);
+resolvePortable().catch(console.error);

scripts/updater.mjs

@@ -8,7 +8,7 @@ const UPDATE_JSON_PROXY = "update-proxy.json";
 
 /// generate update.json
 /// upload to update tag's release asset
-async function resolveRelease() {
+async function resolveUpdater() {
   if (process.env.GITHUB_TOKEN === undefined) {
     throw new Error("GITHUB_TOKEN is required");
   }
@@ -38,9 +38,14 @@ async function resolveRelease() {
     notes: await resolveUpdateLog(tag.name), // use updatelog.md
     pub_date: new Date().toISOString(),
     platforms: {
-      win64: { signature: "", url: "" },
+      win64: { signature: "", url: "" }, // compatible with older formats
-      linux: { signature: "", url: "" },
+      linux: { signature: "", url: "" }, // compatible with older formats
-      darwin: { signature: "", url: "" },
+      darwin: { signature: "", url: "" }, // compatible with older formats
+      "darwin-aarch64": { signature: "", url: "" },
+      "darwin-intel": { signature: "", url: "" },
+      "linux-x86_64": { signature: "", url: "" },
+      "windows-x86_64": { signature: "", url: "" },
+      "windows-i686": { signature: "", url: "" }, // no supported
     },
   };
 
@@ -48,36 +53,49 @@ async function resolveRelease() {
     const { name, browser_download_url } = asset;
 
     // win64 url
-    if (/\.msi\.zip$/.test(name)) {
+    if (name.endsWith(".msi.zip")) {
       updateData.platforms.win64.url = browser_download_url;
+      updateData.platforms["windows-x86_64"].url = browser_download_url;
     }
     // win64 signature
-    if (/\.msi\.zip\.sig$/.test(name)) {
+    if (name.endsWith(".msi.zip.sig")) {
-      updateData.platforms.win64.signature = await getSignature(
+      const sig = await getSignature(browser_download_url);
-        browser_download_url
+      updateData.platforms.win64.signature = sig;
-      );
+      updateData.platforms["windows-x86_64"].signature = sig;
     }
 
-    // darwin url
+    // darwin url (intel)
-    if (/\.app\.tar\.gz$/.test(name)) {
+    if (name.endsWith(".app.tar.gz") && !name.includes("aarch")) {
       updateData.platforms.darwin.url = browser_download_url;
+      updateData.platforms["darwin-intel"].url = browser_download_url;
     }
-    // darwin signature
+    // darwin signature (intel)
-    if (/\.app\.tar\.gz\.sig$/.test(name)) {
+    if (name.endsWith(".app.tar.gz.sig") && !name.includes("aarch")) {
-      updateData.platforms.darwin.signature = await getSignature(
+      const sig = await getSignature(browser_download_url);
-        browser_download_url
+      updateData.platforms.darwin.signature = sig;
-      );
+      updateData.platforms["darwin-intel"].signature = sig;
+    }
+
+    // darwin url (aarch)
+    if (name.endsWith("aarch.app.tar.gz")) {
+      updateData.platforms["darwin-aarch64"].url = browser_download_url;
+    }
+    // darwin signature (aarch)
+    if (name.endsWith("aarch.app.tar.gz.sig")) {
+      const sig = await getSignature(browser_download_url);
+      updateData.platforms["darwin-aarch64"].signature = sig;
     }
 
     // linux url
-    if (/\.AppImage\.tar\.gz$/.test(name)) {
+    if (name.endsWith(".AppImage.tar.gz")) {
       updateData.platforms.linux.url = browser_download_url;
+      updateData.platforms["linux-x86_64"].url = browser_download_url;
     }
     // linux signature
-    if (/\.AppImage\.tar\.gz\.sig$/.test(name)) {
+    if (name.endsWith(".AppImage.tar.gz.sig")) {
-      updateData.platforms.linux.signature = await getSignature(
+      const sig = await getSignature(browser_download_url);
-        browser_download_url
+      updateData.platforms.linux.signature = sig;
-      );
+      updateData.platforms["linux-x86_64"].signature = sig;
     }
   });
 
@@ -85,29 +103,24 @@ async function resolveRelease() {
   console.log(updateData);
 
   // maybe should test the signature as well
-  const { darwin, win64, linux } = updateData.platforms;
+  // delete the null field
-  if (!darwin.url) {
+  Object.entries(updateData.platforms).forEach(([key, value]) => {
-    console.log(`[Error]: failed to parse release for darwin`);
+    if (!value.url) {
-    delete updateData.platforms.darwin;
+      console.log(`[Error]: failed to parse release for "${key}"`);
-  }
+      delete updateData.platforms[key];
-  if (!win64.url) {
+    }
-    console.log(`[Error]: failed to parse release for win64`);
+  });
-    delete updateData.platforms.win64;
-  }
-  if (!linux.url) {
-    console.log(`[Error]: failed to parse release for linux`);
-    delete updateData.platforms.linux;
-  }
 
   // 生成一个代理github的更新文件
   // 使用 https://hub.fastgit.xyz/ 做github资源的加速
   const updateDataNew = JSON.parse(JSON.stringify(updateData));
 
-  Object.keys(updateDataNew.platforms).forEach((key) => {
+  Object.entries(updateDataNew.platforms).forEach(([key, value]) => {
-    if (updateDataNew.platforms[key]) {
+    if (value.url) {
-      updateDataNew.platforms[key].url = updateDataNew.platforms[
+      updateDataNew.platforms[key].url = value.url.replace(
-        key
+        "https://github.com/",
-      ].url.replace("https://github.com/", "https://hub.fastgit.xyz/");
+        "https://hub.fastgit.xyz/"
+      );
     } else {
       console.log(`[Error]: updateDataNew.platforms.${key} is null`);
     }
@@ -135,7 +148,7 @@ async function resolveRelease() {
     }
   }
 
-  // upload assets
+  // upload new assets
   await github.rest.repos.uploadReleaseAsset({
     ...options,
     release_id: updateRelease.id,
@@ -161,4 +174,4 @@ async function getSignature(url) {
   return response.text();
 }
 
-resolveRelease().catch(console.error);
+resolveUpdater().catch(console.error);

src-tauri/Cargo.toml

@@ -10,7 +10,7 @@ edition = "2021"
 build = "build.rs"
 
 [build-dependencies]
-tauri-build = { version = "1.0.0-rc.4", features = [] }
+tauri-build = { version = "1.0.0-rc.5", features = [] }
 
 [dependencies]
 anyhow = "1.0"
@@ -22,7 +22,7 @@ chrono = "0.4.19"
 serde_json = "1.0"
 serde_yaml = "0.8"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.0.0-rc.4", features = ["process-all", "shell-all", "system-tray", "updater", "window-all"] }
+tauri = { version = "1.0.0-rc.6", features = ["process-all", "shell-all", "system-tray", "updater", "window-all"] }
 window-shadows = { git = "https://github.com/tauri-apps/window-shadows" }
 window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy" }
 
@@ -42,6 +42,7 @@ winreg = { version = "0.10", features = ["transactions"] }
 default = [ "custom-protocol" ]
 custom-protocol = [ "tauri/custom-protocol" ]
 verge-dev = []
+debug-yml = []
 
 [profile.release]
 panic = "abort"

src-tauri/src/cmds.rs

@@ -125,6 +125,23 @@ pub fn change_profile_chain(
   wrap_err!(clash.activate_enhanced(&profiles, false, false))
 }
 
+/// change the profile valid fields
+#[tauri::command]
+pub fn change_profile_valid(
+  valid: Option<Vec<String>>,
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+  let mut profiles = profiles_state.0.lock().unwrap();
+
+  profiles.put_valid(valid);
+  clash.set_window(app_handle.get_window("main"));
+
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
+}
+
 /// manually exec enhanced profile
 #[tauri::command]
 pub fn enhance_profiles(
@@ -317,26 +334,29 @@ pub fn patch_verge_config(
   let tun_mode = payload.enable_tun_mode.clone();
   let system_proxy = payload.enable_system_proxy.clone();
 
-  // change tun mode
-  if tun_mode.is_some() {
-    let mut clash = clash_state.0.lock().unwrap();
-    let profiles = profiles_state.0.lock().unwrap();
-
-    wrap_err!(clash.tun_mode(tun_mode.unwrap()))?;
-    clash.update_config();
-    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
-  }
-
   let mut verge = verge_state.0.lock().unwrap();
   wrap_err!(verge.patch_config(payload))?;
 
+  // change tun mode
+  if tun_mode.is_some() {
+    #[cfg(target_os = "windows")]
+    if *tun_mode.as_ref().unwrap() {
+      let wintun_dll = dirs::app_home_dir().join("wintun.dll");
+      if !wintun_dll.exists() {
+        log::error!("failed to enable TUN for missing `wintun.dll`");
+        return Err("failed to enable TUN for missing `wintun.dll`".into());
+      }
+    }
+
+    let clash = clash_state.0.lock().unwrap();
+    let profiles = profiles_state.0.lock().unwrap();
+
+    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
+  }
+
   // change system tray
-  if system_proxy.is_some() {
+  if system_proxy.is_some() || tun_mode.is_some() {
-    app_handle
+    verge.update_systray(&app_handle).unwrap();
-      .tray_handle()
-      .get_item("system_proxy")
-      .set_selected(system_proxy.unwrap())
-      .unwrap();
   }
 
   Ok(())

src-tauri/src/core/clash.rs

@@ -1,4 +1,4 @@
-use super::{PrfEnhancedResult, Profiles, Verge};
+use super::{PrfEnhancedResult, Profiles, Verge, VergeConfig};
 use crate::log_if_err;
 use crate::utils::{config, dirs, help};
 use anyhow::{bail, Result};
@@ -222,18 +222,8 @@ impl Clash {
     Ok(())
   }
 
-  /// enable tun mode
+  /// revise the `tun` and `dns` config
-  /// only revise the config
+  fn _tun_mode(mut config: Mapping, enable: bool) -> Mapping {
-  pub fn tun_mode(&mut self, enable: bool) -> Result<()> {
-    // Windows 需要wintun.dll文件
-    #[cfg(target_os = "windows")]
-    if enable {
-      let wintun_dll = dirs::app_home_dir().join("wintun.dll");
-      if !wintun_dll.exists() {
-        bail!("failed to enable TUN for missing `wintun.dll`");
-      }
-    }
-
     macro_rules! revise {
       ($map: expr, $key: expr, $val: expr) => {
         let ret_key = Value::String($key.into());
@@ -252,7 +242,7 @@ impl Clash {
     }
 
     // tun config
-    let tun_val = self.config.get(&Value::from("tun"));
+    let tun_val = config.get(&Value::from("tun"));
     let mut new_tun = Mapping::new();
 
     if tun_val.is_some() && tun_val.as_ref().unwrap().is_mapping() {
@@ -260,15 +250,18 @@ impl Clash {
     }
 
     revise!(new_tun, "enable", enable);
-    append!(new_tun, "stack", "gvisor");
-    append!(new_tun, "dns-hijack", vec!["198.18.0.2:53"]);
-    append!(new_tun, "auto-route", true);
-    append!(new_tun, "auto-detect-interface", true);
 
-    revise!(self.config, "tun", new_tun);
+    if enable {
+      append!(new_tun, "stack", "gvisor");
+      append!(new_tun, "dns-hijack", vec!["198.18.0.2:53"]);
+      append!(new_tun, "auto-route", true);
+      append!(new_tun, "auto-detect-interface", true);
+    }
+
+    revise!(config, "tun", new_tun);
 
     // dns config
-    let dns_val = self.config.get(&Value::from("dns"));
+    let dns_val = config.get(&Value::from("dns"));
     let mut new_dns = Mapping::new();
 
     if dns_val.is_some() && dns_val.as_ref().unwrap().is_mapping() {
@@ -277,34 +270,41 @@ impl Clash {
 
     // 借鉴cfw的默认配置
     revise!(new_dns, "enable", enable);
-    append!(new_dns, "enhanced-mode", "fake-ip");
-    append!(
-      new_dns,
-      "nameserver",
-      vec!["114.114.114.114", "223.5.5.5", "8.8.8.8"]
-    );
-    append!(new_dns, "fallback", vec![] as Vec<&str>);
 
-    #[cfg(target_os = "windows")]
+    if enable {
-    append!(
+      append!(new_dns, "enhanced-mode", "fake-ip");
-      new_dns,
+      append!(
-      "fake-ip-filter",
+        new_dns,
-      vec![
+        "nameserver",
-        "dns.msftncsi.com",
+        vec!["114.114.114.114", "223.5.5.5", "8.8.8.8"]
-        "www.msftncsi.com",
+      );
-        "www.msftconnecttest.com"
+      append!(new_dns, "fallback", vec![] as Vec<&str>);
-      ]
-    );
 
-    revise!(self.config, "dns", new_dns);
+      #[cfg(target_os = "windows")]
+      append!(
+        new_dns,
+        "fake-ip-filter",
+        vec![
+          "dns.msftncsi.com",
+          "www.msftncsi.com",
+          "www.msftconnecttest.com"
+        ]
+      );
+    }
 
-    self.save_config()
+    revise!(config, "dns", new_dns);
+    config
   }
 
   /// activate the profile
   /// generate a new profile to the temp_dir
   /// then put the path to the clash core
   fn _activate(info: ClashInfo, config: Mapping, window: Option<Window>) -> Result<()> {
+    let verge_config = VergeConfig::new();
+    let tun_enable = verge_config.enable_tun_mode.unwrap_or(false);
+
+    let config = Clash::_tun_mode(config, tun_enable);
+
     let temp_path = dirs::profiles_temp_path();
     config::save_yaml(temp_path.clone(), &config, Some("# Clash Verge Temp File"))?;
 

src-tauri/src/core/profiles.rs

@@ -196,9 +196,8 @@ impl PrfItem {
     if !with_proxy {
       builder = builder.no_proxy();
     }
-    if let Some(user_agent) = user_agent {
+
-      builder = builder.user_agent(user_agent);
+    builder = builder.user_agent(user_agent.unwrap_or("clash-verge/v0.1.0".into()));
-    }
 
     let resp = builder.build()?.get(url).send().await?;
     let header = resp.headers();
@@ -316,6 +315,9 @@ pub struct Profiles {
   /// same as PrfConfig.chain
   chain: Option<Vec<String>>,
 
+  /// record valid fields for clash
+  valid: Option<Vec<String>>,
+
   /// profile list
   items: Option<Vec<PrfItem>>,
 }
@@ -399,6 +401,11 @@ impl Profiles {
     self.chain = chain;
   }
 
+  /// just change the `field`
+  pub fn put_valid(&mut self, valid: Option<Vec<String>>) {
+    self.valid = valid;
+  }
+
   /// find the item by the uid
   pub fn get_item(&self, uid: &String) -> Result<&PrfItem> {
     if self.items.is_some() {
@@ -599,9 +606,12 @@ impl Profiles {
       None => vec![],
     };
 
+    let valid = self.valid.clone().unwrap_or(vec![]);
+
     Ok(PrfEnhanced {
       current,
       chain,
+      valid,
       callback,
     })
   }
@@ -613,6 +623,8 @@ pub struct PrfEnhanced {
 
   pub chain: Vec<PrfData>,
 
+  pub valid: Vec<String>,
+
   pub callback: String,
 }
 

src-tauri/src/core/verge.rs

@@ -8,6 +8,7 @@ use auto_launch::{AutoLaunch, AutoLaunchBuilder};
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 use tauri::{async_runtime::Mutex, utils::platform::current_exe};
+use tauri::{AppHandle, Manager};
 
 /// ### `verge.yaml` schema
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
@@ -45,6 +46,25 @@ pub struct VergeConfig {
 
   /// proxy guard duration
   pub proxy_guard_duration: Option<u64>,
+
+  /// theme setting
+  pub theme_setting: Option<VergeTheme>,
+}
+
+#[derive(Default, Debug, Clone, Deserialize, Serialize)]
+pub struct VergeTheme {
+  pub primary_color: Option<String>,
+  pub secondary_color: Option<String>,
+  pub primary_text: Option<String>,
+  pub secondary_text: Option<String>,
+
+  pub info_color: Option<String>,
+  pub error_color: Option<String>,
+  pub warning_color: Option<String>,
+  pub success_color: Option<String>,
+
+  pub font_family: Option<String>,
+  pub css_injection: Option<String>,
 }
 
 impl VergeConfig {
@@ -130,7 +150,7 @@ impl Verge {
     if let Some(sysproxy) = self.old_sysproxy.take() {
       match sysproxy.set_sys() {
         Ok(_) => self.cur_sysproxy = None,
-        Err(_) => log::error!("failed to reset proxy for"),
+        Err(_) => log::error!("failed to reset proxy"),
       }
     }
   }
@@ -203,6 +223,9 @@ impl Verge {
     if patch.enable_silent_start.is_some() {
       self.config.enable_silent_start = patch.enable_silent_start;
     }
+    if patch.theme_setting.is_some() {
+      self.config.theme_setting = patch.theme_setting;
+    }
 
     // should update system startup
     if patch.enable_auto_launch.is_some() {
@@ -220,7 +243,6 @@ impl Verge {
         if sysproxy.set_sys().is_err() {
           self.cur_sysproxy = Some(sysproxy);
 
-          log::error!("failed to set system proxy");
           bail!("failed to set system proxy");
         }
         self.cur_sysproxy = Some(sysproxy);
@@ -239,7 +261,6 @@ impl Verge {
           if sysproxy.set_sys().is_err() {
             self.cur_sysproxy = Some(sysproxy);
 
-            log::error!("failed to set system proxy");
             bail!("failed to set system proxy");
           }
         }
@@ -271,6 +292,35 @@ impl Verge {
 
     self.config.save_file()
   }
+
+  /// update the system tray state
+  pub fn update_systray(&self, app_handle: &AppHandle) -> Result<()> {
+    // system proxy
+    let system_proxy = self.config.enable_system_proxy.as_ref();
+    system_proxy.map(|system_proxy| {
+      app_handle
+        .tray_handle()
+        .get_item("system_proxy")
+        .set_selected(*system_proxy)
+        .unwrap();
+    });
+
+    // tun mode
+    let tun_mode = self.config.enable_tun_mode.as_ref();
+    tun_mode.map(|tun_mode| {
+      app_handle
+        .tray_handle()
+        .get_item("tun_mode")
+        .set_selected(*tun_mode)
+        .unwrap();
+    });
+
+    // update verge config
+    let window = app_handle.get_window("main").unwrap();
+    window.emit("verge://refresh-verge-config", "yes").unwrap();
+
+    Ok(())
+  }
 }
 
 impl Verge {

src-tauri/src/main.rs

@@ -10,7 +10,7 @@ mod utils;
 
 use crate::{
   core::VergeConfig,
-  utils::{resolve, server},
+  utils::{dirs, resolve, server},
 };
 use tauri::{
   api, CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem,
@@ -22,9 +22,15 @@ fn main() -> std::io::Result<()> {
     return Ok(());
   }
 
+  #[cfg(target_os = "windows")]
+  unsafe {
+    dirs::init_portable_flag();
+  }
+
   let tray_menu = SystemTrayMenu::new()
     .add_item(CustomMenuItem::new("open_window", "Show"))
     .add_item(CustomMenuItem::new("system_proxy", "System Proxy"))
+    .add_item(CustomMenuItem::new("tun_mode", "Tun Mode"))
     .add_item(CustomMenuItem::new("restart_clash", "Restart Clash"))
     .add_native_item(SystemTrayMenuItem::Separator)
     .add_item(CustomMenuItem::new("quit", "Quit").accelerator("CmdOrControl+Q"));
@@ -55,17 +61,22 @@ fn main() -> std::io::Result<()> {
             enable_system_proxy: Some(new_value),
             ..VergeConfig::default()
           }) {
-            Ok(_) => {
+            Ok(_) => verge.update_systray(app_handle).unwrap(),
-              app_handle
+            Err(err) => log::error!("{err}"),
-                .tray_handle()
+          }
-                .get_item(id.as_str())
+        }
-                .set_selected(new_value)
+        "tun_mode" => {
-                .unwrap();
+          let verge_state = app_handle.state::<states::VergeState>();
+          let mut verge = verge_state.0.lock().unwrap();
 
-              // update verge config
+          let old_value = verge.config.enable_tun_mode.clone().unwrap_or(false);
-              let window = app_handle.get_window("main").unwrap();
+          let new_value = !old_value;
-              window.emit("verge://refresh-verge-config", "yes").unwrap();
+
-            }
+          match verge.patch_config(VergeConfig {
+            enable_tun_mode: Some(new_value),
+            ..VergeConfig::default()
+          }) {
+            Ok(_) => verge.update_systray(app_handle).unwrap(),
             Err(err) => log::error!("{err}"),
           }
         }
@@ -119,6 +130,7 @@ fn main() -> std::io::Result<()> {
       cmds::sync_profiles,
       cmds::enhance_profiles,
       cmds::change_profile_chain,
+      cmds::change_profile_valid,
       cmds::read_profile_file,
       cmds::save_profile_file
     ]);
@@ -144,11 +156,14 @@ fn main() -> std::io::Result<()> {
     .build(tauri::generate_context!())
     .expect("error while running tauri application")
     .run(|app_handle, e| match e {
-      tauri::RunEvent::CloseRequested { label, api, .. } => {
+      tauri::RunEvent::WindowEvent { label, event, .. } => match event {
-        let app_handle = app_handle.clone();
+        tauri::WindowEvent::CloseRequested { api, .. } => {
-        api.prevent_close();
+          let app_handle = app_handle.clone();
-        app_handle.get_window(&label).unwrap().hide().unwrap();
+          api.prevent_close();
-      }
+          app_handle.get_window(&label).unwrap().hide().unwrap();
+        }
+        _ => {}
+      },
       tauri::RunEvent::ExitRequested { .. } => {
         resolve::resolve_reset(app_handle);
         api::process::kill_children();

src-tauri/src/utils/dirs.rs

@@ -1,5 +1,6 @@
 use std::env::temp_dir;
-use std::path::{Path, PathBuf};
+use std::path::PathBuf;
+use tauri::utils::platform::current_exe;
 use tauri::{
   api::path::{home_dir, resource_dir},
   Env, PackageInfo,
@@ -15,12 +16,40 @@ static VERGE_CONFIG: &str = "verge.yaml";
 static PROFILE_YAML: &str = "profiles.yaml";
 static PROFILE_TEMP: &str = "clash-verge-runtime.yaml";
 
+/// portable flag
+#[allow(unused)]
+static mut PORTABLE_FLAG: bool = false;
+
+/// initialize portable flag
+pub unsafe fn init_portable_flag() {
+  #[cfg(target_os = "windows")]
+  {
+    let exe = current_exe().unwrap();
+    let dir = exe.parent().unwrap();
+    let dir = PathBuf::from(dir).join(".config/PORTABLE");
+
+    if dir.exists() {
+      PORTABLE_FLAG = true;
+    }
+  }
+}
+
 /// get the verge app home dir
 pub fn app_home_dir() -> PathBuf {
-  home_dir()
+  #[cfg(target_os = "windows")]
-    .unwrap()
+  unsafe {
-    .join(Path::new(".config"))
+    if !PORTABLE_FLAG {
-    .join(Path::new(APP_DIR))
+      home_dir().unwrap().join(".config").join(APP_DIR)
+    } else {
+      let app_exe = current_exe().unwrap();
+      let app_exe = dunce::canonicalize(app_exe).unwrap();
+      let app_dir = app_exe.parent().unwrap();
+      PathBuf::from(app_dir).join(".config").join(APP_DIR)
+    }
+  }
+
+  #[cfg(not(target_os = "windows"))]
+  home_dir().unwrap().join(".config").join(APP_DIR)
 }
 
 /// get the resources dir
@@ -53,5 +82,9 @@ pub fn profiles_path() -> PathBuf {
 }
 
 pub fn profiles_temp_path() -> PathBuf {
-  temp_dir().join(PROFILE_TEMP)
+  #[cfg(not(feature = "debug-yml"))]
+  return temp_dir().join(PROFILE_TEMP);
+
+  #[cfg(feature = "debug-yml")]
+  return app_home_dir().join(PROFILE_TEMP);
 }

src-tauri/src/utils/resolve.rs

@@ -28,14 +28,6 @@ pub fn resolve_setup(app: &App) {
   log_if_err!(clash.activate_enhanced(&profiles, true, true));
 
   verge.init_sysproxy(clash.info.port.clone());
-  // enable tun mode
-  if verge.config.enable_tun_mode.clone().unwrap_or(false)
-    && verge.cur_sysproxy.is_some()
-    && verge.cur_sysproxy.as_ref().unwrap().enable
-  {
-    log::info!("enable tun mode");
-    clash.tun_mode(true).unwrap();
-  }
 
   log_if_err!(verge.init_launch());
 

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "Clash Verge",
-    "version": "0.0.26"
+    "version": "0.0.29"
   },
   "build": {
     "distDir": "../dist",
@@ -83,7 +83,7 @@
       }
     ],
     "security": {
-      "csp": "script-src 'unsafe-eval' 'self'; default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self'; img-src 'self';"
+      "csp": "script-src 'unsafe-eval' 'self'; default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self'; img-src data: 'self';"
     }
   }
 }

src/assets/styles/layout.scss

@@ -18,7 +18,7 @@
 
     .the-logo {
       position: relative;
-      flex: 0 1 180px;
+      flex: 0 1 168px;
       width: 100%;
       max-width: 168px;
       max-height: 168px;
@@ -27,8 +27,11 @@
       text-align: center;
       box-sizing: border-box;
 
-      img {
+      img,
+      svg {
         width: 100%;
+        height: 100%;
+        pointer-events: none;
       }
 
       .the-newbtn {

src/components/connection/connection-item.tsx

@@ -4,6 +4,7 @@ import { styled, ListItem, IconButton, ListItemText } from "@mui/material";
 import { CloseRounded } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { deleteConnection } from "../../services/api";
+import parseTraffic from "../../utils/parse-traffic";
 
 const Tag = styled("span")(({ theme }) => ({
   display: "inline-block",
@@ -23,32 +24,39 @@ interface Props {
 const ConnectionItem = (props: Props) => {
   const { value } = props;
 
-  const onDelete = useLockFn(async () => deleteConnection(value.id));
+  const { id, metadata, chains, start, curUpload, curDownload } = value;
+
+  const onDelete = useLockFn(async () => deleteConnection(id));
+  const showTraffic = curUpload! > 1024 || curDownload! > 1024;
 
   return (
     <ListItem
       dense
       secondaryAction={
-        <IconButton edge="end" onClick={onDelete}>
+        <IconButton edge="end" color="inherit" onClick={onDelete}>
           <CloseRounded />
         </IconButton>
       }
     >
       <ListItemText
-        primary={value.metadata.host || value.metadata.destinationIP}
+        primary={metadata.host || metadata.destinationIP}
         secondary={
           <>
             <Tag sx={{ textTransform: "uppercase", color: "success" }}>
-              {value.metadata.network}
+              {metadata.network}
             </Tag>
 
-            <Tag>{value.metadata.type}</Tag>
+            <Tag>{metadata.type}</Tag>
 
-            {value.chains.length > 0 && (
+            {chains.length > 0 && <Tag>{chains[value.chains.length - 1]}</Tag>}
-              <Tag>{value.chains[value.chains.length - 1]}</Tag>
+
+            <Tag>{dayjs(start).fromNow()}</Tag>
+
+            {showTraffic && (
+              <Tag>
+                {parseTraffic(curUpload!)} / {parseTraffic(curDownload!)}
+              </Tag>
             )}
-
-            <Tag>{dayjs(value.start).fromNow()}</Tag>
           </>
         }
       />

src/components/layout/use-custom-theme.ts

@@ -0,0 +1,79 @@
+import useSWR from "swr";
+import { useMemo } from "react";
+import { createTheme } from "@mui/material";
+import { getVergeConfig } from "../../services/cmds";
+import { defaultTheme as dt } from "../../pages/_theme";
+
+/**
+ * custome theme
+ */
+export default function useCustomTheme() {
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_mode, theme_setting } = data ?? {};
+
+  const theme = useMemo(() => {
+    const mode = theme_mode ?? "light";
+    // const background = mode === "light" ? "#f5f5f5" : "#000";
+    const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
+
+    const rootEle = document.documentElement;
+    rootEle.style.background = "transparent";
+    rootEle.style.setProperty("--selection-color", selectColor);
+
+    const setting = theme_setting || {};
+
+    const theme = createTheme({
+      breakpoints: {
+        values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
+      },
+      palette: {
+        mode,
+        primary: { main: setting.primary_color || dt.primary_color },
+        secondary: { main: setting.secondary_color || dt.secondary_color },
+        info: { main: setting.info_color || dt.info_color },
+        error: { main: setting.error_color || dt.error_color },
+        warning: { main: setting.warning_color || dt.warning_color },
+        success: { main: setting.success_color || dt.success_color },
+        text: {
+          primary: setting.primary_text || dt.primary_text,
+          secondary: setting.secondary_text || dt.secondary_text,
+        },
+      },
+      typography: {
+        // todo
+        fontFamily: setting.font_family
+          ? `${setting.font_family}, ${dt.font_family}`
+          : dt.font_family,
+      },
+    });
+
+    // inject css
+    let style = document.querySelector("style#verge-theme");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "verge-theme";
+      document.head.appendChild(style!);
+    }
+    if (style) {
+      style.innerHTML = setting.css_injection || "";
+    }
+
+    // update svg icon
+    const { palette } = theme;
+
+    setTimeout(() => {
+      const dom = document.querySelector("#Gradient2");
+      if (dom) {
+        dom.innerHTML = `
+        <stop offset="0%" stop-color="${palette.primary.main}" />
+        <stop offset="80%" stop-color="${palette.primary.dark}" />
+        <stop offset="100%" stop-color="${palette.primary.dark}" />
+        `;
+      }
+    }, 0);
+
+    return theme;
+  }, [theme_mode, theme_setting]);
+
+  return { theme };
+}

src/components/layout/use-traffic-graph.ts

@@ -1,19 +1,17 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+import { useTheme } from "@mui/material";
 
 const minPoint = 10;
 const maxPoint = 36;
 
-const refLineAlpha = 0.5;
+const refLineAlpha = 1;
 const refLineWidth = 2;
-const refLineColor = "#ccc";
 
 const upLineAlpha = 0.6;
 const upLineWidth = 4;
-const upLineColor = "#9c27b0";
 
 const downLineAlpha = 1;
 const downLineWidth = 4;
-const downLineColor = "#5b5c9d";
 
 /**
  * draw the traffic graph
@@ -24,11 +22,23 @@ export default function useTrafficGraph() {
   const styleRef = useRef(true);
   const canvasRef = useRef<HTMLCanvasElement>(null!);
 
+  const { palette } = useTheme();
+  const paletteRef = useRef(palette);
+
+  useEffect(() => {
+    paletteRef.current = palette;
+  }, [palette]);
+
   const drawGraph = () => {
     const canvas = canvasRef.current!;
 
     if (!canvas) return;
 
+    const { primary, secondary, divider } = paletteRef.current;
+    const refLineColor = divider || "rgba(0, 0, 0, 0.12)";
+    const upLineColor = secondary.main || "#9c27b0";
+    const downLineColor = primary.main || "#5b5c9d";
+
     const context = canvas.getContext("2d")!;
     const width = canvas.width;
     const height = canvas.height;

src/components/profile/enhanced.tsx

@@ -0,0 +1,221 @@
+import useSWR from "swr";
+import { useState } from "react";
+import { useLockFn } from "ahooks";
+import {
+  Box,
+  Divider,
+  Grid,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+} from "@mui/material";
+import {
+  AddchartRounded,
+  CheckRounded,
+  MenuRounded,
+  RestartAltRounded,
+} from "@mui/icons-material";
+import {
+  getProfiles,
+  deleteProfile,
+  enhanceProfiles,
+  changeProfileChain,
+  changeProfileValid,
+} from "../../services/cmds";
+import { CmdType } from "../../services/types";
+import getSystem from "../../utils/get-system";
+import ProfileMore from "./profile-more";
+import Notice from "../base/base-notice";
+
+interface Props {
+  items: CmdType.ProfileItem[];
+  chain: string[];
+}
+
+const OS = getSystem();
+
+const EnhancedMode = (props: Props) => {
+  const { items, chain } = props;
+
+  const { data, mutate } = useSWR("getProfiles", getProfiles);
+  const valid = data?.valid || [];
+
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+
+  // handler
+  const onEnhance = useLockFn(async () => {
+    try {
+      await enhanceProfiles();
+      Notice.success("Refresh clash config", 2000);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  const onEnhanceEnable = useLockFn(async (uid: string) => {
+    if (chain.includes(uid)) return;
+
+    const newChain = [...chain, uid];
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  const onEnhanceDisable = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = chain.filter((i) => i !== uid);
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  const onEnhanceDelete = useLockFn(async (uid: string) => {
+    try {
+      await onEnhanceDisable(uid);
+      await deleteProfile(uid);
+      mutate();
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
+
+  const onMoveTop = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = [uid].concat(chain.filter((i) => i !== uid));
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  const onMoveEnd = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = chain.filter((i) => i !== uid).concat([uid]);
+    await changeProfileChain(newChain);
+    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+  });
+
+  // update valid list
+  const onToggleValid = useLockFn(async (key: string) => {
+    try {
+      const newValid = valid.includes(key)
+        ? valid.filter((i) => i !== key)
+        : valid.concat(key);
+      await changeProfileValid(newValid);
+      mutate();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Box sx={{ mt: 4 }}>
+      <Stack
+        spacing={1}
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        sx={{ mb: 0.5 }}
+      >
+        <IconButton
+          size="small"
+          color="inherit"
+          title="refresh enhanced profiles"
+          onClick={onEnhance}
+        >
+          <RestartAltRounded />
+        </IconButton>
+
+        <IconButton
+          size="small"
+          color="inherit"
+          id="profile-use-button"
+          title="enable clash fields"
+          aria-controls={!!anchorEl ? "profile-use-menu" : undefined}
+          aria-haspopup="true"
+          aria-expanded={!!anchorEl ? "true" : undefined}
+          onClick={(e) => setAnchorEl(e.currentTarget)}
+        >
+          <MenuRounded />
+        </IconButton>
+
+        <Menu
+          id="profile-use-menu"
+          open={!!anchorEl}
+          anchorEl={anchorEl}
+          onClose={() => setAnchorEl(null)}
+          transitionDuration={225}
+          TransitionProps={
+            OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+          }
+          MenuListProps={{
+            dense: true,
+            "aria-labelledby": "profile-use-button",
+          }}
+          onContextMenu={(e) => {
+            setAnchorEl(null);
+            e.preventDefault();
+          }}
+        >
+          <MenuItem>
+            <ListItemIcon color="inherit">
+              <AddchartRounded />
+            </ListItemIcon>
+            Use Clash Fields
+          </MenuItem>
+
+          <Divider />
+
+          {[
+            "tun",
+            "dns",
+            "hosts",
+            "script",
+            "profile",
+            "payload",
+            "interface-name",
+            "routing-mark",
+          ].map((key) => {
+            const has = valid.includes(key);
+
+            return (
+              <MenuItem
+                key={key}
+                sx={{ width: 180 }}
+                onClick={() => onToggleValid(key)}
+              >
+                {has && (
+                  <ListItemIcon color="inherit">
+                    <CheckRounded />
+                  </ListItemIcon>
+                )}
+                <ListItemText inset={!has}>{key}</ListItemText>
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </Stack>
+
+      <Grid container spacing={2}>
+        {items.map((item) => (
+          <Grid item xs={12} sm={6} key={item.file}>
+            <ProfileMore
+              selected={!!chain.includes(item.uid)}
+              itemData={item}
+              enableNum={chain.length}
+              onEnable={() => onEnhanceEnable(item.uid)}
+              onDisable={() => onEnhanceDisable(item.uid)}
+              onDelete={() => onEnhanceDelete(item.uid)}
+              onMoveTop={() => onMoveTop(item.uid)}
+              onMoveEnd={() => onMoveEnd(item.uid)}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default EnhancedMode;

src/components/profile/profile-item.tsx

@@ -20,6 +20,7 @@ import { CmdType } from "../../services/types";
 import { atomLoadingCache } from "../../services/states";
 import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
 import parseTraffic from "../../utils/parse-traffic";
+import getSystem from "../../utils/get-system";
 import ProfileEdit from "./profile-edit";
 import FileEditor from "./file-editor";
 import Notice from "../base/base-notice";
@@ -40,6 +41,8 @@ const round = keyframes`
   to { transform: rotate(360deg); }
 `;
 
+const OS = getSystem();
+
 interface Props {
   selected: boolean;
   itemData: CmdType.ProfileItem;
@@ -267,6 +270,9 @@ const ProfileItem = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
         onContextMenu={(e) => {
           setAnchorEl(null);
           e.preventDefault();

src/components/profile/profile-more.tsx

@@ -13,6 +13,7 @@ import {
 } from "@mui/material";
 import { CmdType } from "../../services/types";
 import { viewProfile } from "../../services/cmds";
+import getSystem from "../../utils/get-system";
 import enhance from "../../services/enhance";
 import ProfileEdit from "./profile-edit";
 import FileEditor from "./file-editor";
@@ -29,15 +30,17 @@ const Wrapper = styled(Box)(({ theme }) => ({
   boxSizing: "border-box",
 }));
 
+const OS = getSystem();
+
 interface Props {
   selected: boolean;
   itemData: CmdType.ProfileItem;
+  enableNum: number;
   onEnable: () => void;
   onDisable: () => void;
   onMoveTop: () => void;
   onMoveEnd: () => void;
   onDelete: () => void;
-  onEnhance: () => void;
 }
 
 // profile enhanced item
@@ -45,12 +48,12 @@ const ProfileMore = (props: Props) => {
   const {
     selected,
     itemData,
+    enableNum,
     onEnable,
     onDisable,
     onMoveTop,
     onMoveEnd,
     onDelete,
-    onEnhance,
   } = props;
 
   const { uid, type } = itemData;
@@ -92,14 +95,15 @@ const ProfileMore = (props: Props) => {
     return fn();
   };
 
+  const showMove = enableNum > 1 && !hasError;
+
   const enableMenu = [
     { label: "Disable", handler: fnWrapper(onDisable) },
-    { label: "Refresh", handler: fnWrapper(onEnhance) },
     { label: "Edit Info", handler: onEditInfo },
     { label: "Edit File", handler: onEditFile },
     { label: "Open File", handler: onOpenFile },
-    { label: "To Top", show: !hasError, handler: fnWrapper(onMoveTop) },
+    { label: "To Top", show: showMove, handler: fnWrapper(onMoveTop) },
-    { label: "To End", show: !hasError, handler: fnWrapper(onMoveEnd) },
+    { label: "To End", show: showMove, handler: fnWrapper(onMoveEnd) },
     { label: "Delete", handler: fnWrapper(onDelete) },
   ];
 
@@ -219,6 +223,9 @@ const ProfileMore = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
         onContextMenu={(e) => {
           setAnchorEl(null);
           e.preventDefault();

src/components/proxy/proxy-global.tsx

@@ -2,20 +2,13 @@ import useSWR, { useSWRConfig } from "swr";
 import { useEffect, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
-import { Box, IconButton, TextField } from "@mui/material";
-import {
-  MyLocationRounded,
-  NetworkCheckRounded,
-  FilterAltRounded,
-  FilterAltOffRounded,
-  VisibilityRounded,
-  VisibilityOffRounded,
-} from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import { getProfiles, patchProfile } from "../../services/cmds";
-import delayManager from "../../services/delay";
+import useSortProxy, { ProxySortType } from "./use-sort-proxy";
 import useFilterProxy from "./use-filter-proxy";
+import delayManager from "../../services/delay";
+import ProxyHead from "./proxy-head";
 import ProxyItem from "./proxy-item";
 
 interface Props {
@@ -30,12 +23,14 @@ const ProxyGlobal = (props: Props) => {
 
   const { mutate } = useSWRConfig();
   const [now, setNow] = useState(curProxy || "DIRECT");
+
   const [showType, setShowType] = useState(true);
-  const [showFilter, setShowFilter] = useState(false);
+  const [sortType, setSortType] = useState<ProxySortType>(0);
   const [filterText, setFilterText] = useState("");
 
   const virtuosoRef = useRef<any>();
   const filterProxies = useFilterProxy(proxies, groupName, filterText);
+  const sortedProxies = useSortProxy(filterProxies, groupName, sortType);
 
   const { data: profiles } = useSWR("getProfiles", getProfiles);
 
@@ -61,7 +56,7 @@ const ProxyGlobal = (props: Props) => {
   });
 
   const onLocation = (smooth = true) => {
-    const index = filterProxies.findIndex((p) => p.name === now);
+    const index = sortedProxies.findIndex((p) => p.name === now);
 
     if (index >= 0) {
       virtuosoRef.current?.scrollToIndex?.({
@@ -73,22 +68,15 @@ const ProxyGlobal = (props: Props) => {
   };
 
   const onCheckAll = useLockFn(async () => {
-    const names = filterProxies.map((p) => p.name);
+    const names = sortedProxies.map((p) => p.name);
 
-    await delayManager.checkListDelay(
+    await delayManager.checkListDelay({ names, groupName, skipNum: 8 }, () =>
-      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      mutate("getProxies")
-      () => mutate("getProxies")
     );
-
-    mutate("getProxies");
   });
 
   useEffect(() => onLocation(false), [groupName]);
 
-  useEffect(() => {
-    if (!showFilter) setFilterText("");
-  }, [showFilter]);
-
   useEffect(() => {
     if (groupName === "DIRECT") setNow("DIRECT");
     else if (groupName === "GLOBAL") {
@@ -112,66 +100,28 @@ const ProxyGlobal = (props: Props) => {
 
   return (
     <>
-      <Box
+      <ProxyHead
-        sx={{
+        sx={{ px: 3, my: 0.5, button: { mr: 0.5 } }}
-          px: 3,
+        showType={showType}
-          my: 0.5,
+        sortType={sortType}
-          display: "flex",
+        groupName={groupName}
-          alignItems: "center",
+        filterText={filterText}
-          button: { mr: 0.5 },
+        onLocation={onLocation}
-        }}
+        onCheckDelay={onCheckAll}
-      >
+        onShowType={setShowType}
-        <IconButton
+        onSortType={setSortType}
-          size="small"
+        onFilterText={setFilterText}
-          title="location"
+      />
-          onClick={() => onLocation(true)}
-        >
-          <MyLocationRounded />
-        </IconButton>
-
-        <IconButton size="small" title="check" onClick={onCheckAll}>
-          <NetworkCheckRounded />
-        </IconButton>
-
-        <IconButton
-          size="small"
-          title="check"
-          onClick={() => setShowType(!showType)}
-        >
-          {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
-        </IconButton>
-
-        <IconButton
-          size="small"
-          title="check"
-          onClick={() => setShowFilter(!showFilter)}
-        >
-          {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
-        </IconButton>
-
-        {showFilter && (
-          <TextField
-            autoFocus
-            hiddenLabel
-            value={filterText}
-            size="small"
-            variant="outlined"
-            placeholder="Filter conditions"
-            onChange={(e) => setFilterText(e.target.value)}
-            sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
-          />
-        )}
-      </Box>
 
       <Virtuoso
         ref={virtuosoRef}
         style={{ height: "calc(100% - 40px)" }}
-        totalCount={filterProxies.length}
+        totalCount={sortedProxies.length}
         itemContent={(index) => (
           <ProxyItem
             groupName={groupName}
-            proxy={filterProxies[index]}
+            proxy={sortedProxies[index]}
-            selected={filterProxies[index].name === now}
+            selected={sortedProxies[index].name === now}
             showType={showType}
             onClick={onChangeProxy}
             sx={{ py: 0, px: 2 }}

src/components/proxy/proxy-group.tsx

@@ -6,28 +6,22 @@ import {
   Box,
   Collapse,
   Divider,
-  IconButton,
   List,
   ListItem,
   ListItemText,
-  TextField,
 } from "@mui/material";
 import {
   SendRounded,
   ExpandLessRounded,
   ExpandMoreRounded,
-  MyLocationRounded,
-  NetworkCheckRounded,
-  FilterAltRounded,
-  FilterAltOffRounded,
-  VisibilityRounded,
-  VisibilityOffRounded,
 } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import { getProfiles, patchProfile } from "../../services/cmds";
-import delayManager from "../../services/delay";
+import useSortProxy, { ProxySortType } from "./use-sort-proxy";
 import useFilterProxy from "./use-filter-proxy";
+import delayManager from "../../services/delay";
+import ProxyHead from "./proxy-head";
 import ProxyItem from "./proxy-item";
 
 interface Props {
@@ -38,13 +32,14 @@ const ProxyGroup = ({ group }: Props) => {
   const { mutate } = useSWRConfig();
   const [open, setOpen] = useState(false);
   const [now, setNow] = useState(group.now);
+
   const [showType, setShowType] = useState(false);
-  const [showFilter, setShowFilter] = useState(false);
+  const [sortType, setSortType] = useState<ProxySortType>(0);
   const [filterText, setFilterText] = useState("");
 
-  const proxies = group.all ?? [];
   const virtuosoRef = useRef<any>();
-  const filterProxies = useFilterProxy(proxies, group.name, filterText);
+  const filterProxies = useFilterProxy(group.all, group.name, filterText);
+  const sortedProxies = useSortProxy(filterProxies, group.name, sortType);
 
   const { data: profiles } = useSWR("getProfiles", getProfiles);
 
@@ -82,7 +77,7 @@ const ProxyGroup = ({ group }: Props) => {
   });
 
   const onLocation = (smooth = true) => {
-    const index = filterProxies.findIndex((p) => p.name === now);
+    const index = sortedProxies.findIndex((p) => p.name === now);
 
     if (index >= 0) {
       virtuosoRef.current?.scrollToIndex?.({
@@ -94,21 +89,14 @@ const ProxyGroup = ({ group }: Props) => {
   };
 
   const onCheckAll = useLockFn(async () => {
-    const names = filterProxies.map((p) => p.name);
+    const names = sortedProxies.map((p) => p.name);
     const groupName = group.name;
 
-    await delayManager.checkListDelay(
+    await delayManager.checkListDelay({ names, groupName, skipNum: 8 }, () =>
-      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      mutate("getProxies")
-      () => mutate("getProxies")
     );
-
-    mutate("getProxies");
   });
 
-  useEffect(() => {
-    if (!showFilter) setFilterText("");
-  }, [showFilter]);
-
   // auto scroll to current index
   useEffect(() => {
     if (open) {
@@ -136,59 +124,20 @@ const ProxyGroup = ({ group }: Props) => {
       </ListItem>
 
       <Collapse in={open} timeout="auto" unmountOnExit>
-        <Box
+        <ProxyHead
-          sx={{
+          sx={{ pl: 4, pr: 3, my: 0.5, button: { mr: 0.5 } }}
-            pl: 4,
+          showType={showType}
-            pr: 3,
+          sortType={sortType}
-            my: 0.5,
+          groupName={group.name}
-            display: "flex",
+          filterText={filterText}
-            alignItems: "center",
+          onLocation={onLocation}
-            button: { mr: 0.5 },
+          onCheckDelay={onCheckAll}
-          }}
+          onShowType={setShowType}
-        >
+          onSortType={setSortType}
-          <IconButton
+          onFilterText={setFilterText}
-            size="small"
+        />
-            title="location"
-            onClick={() => onLocation(true)}
-          >
-            <MyLocationRounded />
-          </IconButton>
 
-          <IconButton size="small" title="check" onClick={onCheckAll}>
+        {!sortedProxies.length && (
-            <NetworkCheckRounded />
-          </IconButton>
-
-          <IconButton
-            size="small"
-            title="check"
-            onClick={() => setShowType(!showType)}
-          >
-            {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
-          </IconButton>
-
-          <IconButton
-            size="small"
-            title="check"
-            onClick={() => setShowFilter(!showFilter)}
-          >
-            {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
-          </IconButton>
-
-          {showFilter && (
-            <TextField
-              autoFocus
-              hiddenLabel
-              value={filterText}
-              size="small"
-              variant="outlined"
-              placeholder="Filter conditions"
-              onChange={(e) => setFilterText(e.target.value)}
-              sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
-            />
-          )}
-        </Box>
-
-        {!filterProxies.length && (
           <Box
             sx={{
               py: 3,
@@ -201,16 +150,16 @@ const ProxyGroup = ({ group }: Props) => {
           </Box>
         )}
 
-        {filterProxies.length >= 10 ? (
+        {sortedProxies.length >= 10 ? (
           <Virtuoso
             ref={virtuosoRef}
             style={{ height: "320px", marginBottom: "4px" }}
-            totalCount={filterProxies.length}
+            totalCount={sortedProxies.length}
             itemContent={(index) => (
               <ProxyItem
                 groupName={group.name}
-                proxy={filterProxies[index]}
+                proxy={sortedProxies[index]}
-                selected={filterProxies[index].name === now}
+                selected={sortedProxies[index].name === now}
                 showType={showType}
                 sx={{ py: 0, pl: 4 }}
                 onClick={onChangeProxy}
@@ -223,7 +172,7 @@ const ProxyGroup = ({ group }: Props) => {
             disablePadding
             sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
           >
-            {filterProxies.map((proxy) => (
+            {sortedProxies.map((proxy) => (
               <ProxyItem
                 key={proxy.name}
                 groupName={group.name}

src/components/proxy/proxy-head.tsx

@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { Box, IconButton, TextField, SxProps } from "@mui/material";
+import {
+  AccessTimeRounded,
+  MyLocationRounded,
+  NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
+  WifiTetheringRounded,
+  WifiTetheringOffRounded,
+  SortByAlphaRounded,
+  SortRounded,
+} from "@mui/icons-material";
+import delayManager from "../../services/delay";
+import type { ProxySortType } from "./use-sort-proxy";
+
+interface Props {
+  sx?: SxProps;
+  groupName: string;
+  showType: boolean;
+  sortType: ProxySortType;
+  filterText: string;
+  onLocation: () => void;
+  onCheckDelay: () => void;
+  onShowType: (val: boolean) => void;
+  onSortType: (val: ProxySortType) => void;
+  onFilterText: (val: string) => void;
+}
+
+const ProxyHead = (props: Props) => {
+  const { sx = {}, groupName, showType, sortType, filterText } = props;
+
+  const [textState, setTextState] = useState<"url" | "filter" | null>(null);
+
+  const [testUrl, setTestUrl] = useState(delayManager.getUrl(groupName) || "");
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", ...sx }}>
+      <IconButton
+        size="small"
+        title="location"
+        color="inherit"
+        onClick={props.onLocation}
+      >
+        <MyLocationRounded />
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="delay check"
+        onClick={() => {
+          // Remind the user that it is custom test url
+          if (testUrl?.trim() && textState !== "filter") {
+            setTextState("url");
+          }
+          props.onCheckDelay();
+        }}
+      >
+        <NetworkCheckRounded />
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title={["sort by default", "sort by delay", "sort by name"][sortType]}
+        onClick={() => props.onSortType(((sortType + 1) % 3) as ProxySortType)}
+      >
+        {sortType === 0 && <SortRounded />}
+        {sortType === 1 && <AccessTimeRounded />}
+        {sortType === 2 && <SortByAlphaRounded />}
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="edit test url"
+        onClick={() => setTextState((ts) => (ts === "url" ? null : "url"))}
+      >
+        {textState === "url" ? (
+          <WifiTetheringRounded />
+        ) : (
+          <WifiTetheringOffRounded />
+        )}
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="proxy detail"
+        onClick={() => props.onShowType(!showType)}
+      >
+        {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+      </IconButton>
+
+      <IconButton
+        size="small"
+        color="inherit"
+        title="filter"
+        onClick={() =>
+          setTextState((ts) => (ts === "filter" ? null : "filter"))
+        }
+      >
+        {textState === "filter" ? (
+          <FilterAltRounded />
+        ) : (
+          <FilterAltOffRounded />
+        )}
+      </IconButton>
+
+      {textState === "filter" && (
+        <TextField
+          autoFocus
+          hiddenLabel
+          value={filterText}
+          size="small"
+          variant="outlined"
+          placeholder="Filter conditions"
+          onChange={(e) => props.onFilterText(e.target.value)}
+          sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+        />
+      )}
+
+      {textState === "url" && (
+        <TextField
+          autoFocus
+          hiddenLabel
+          autoSave="off"
+          autoComplete="off"
+          value={testUrl}
+          size="small"
+          variant="outlined"
+          placeholder="Test url"
+          onChange={(e) => {
+            setTestUrl(e.target.value);
+            delayManager.setUrl(groupName, e.target.value);
+          }}
+          sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ProxyHead;

src/components/proxy/proxy-item.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
+import { useLockFn } from "ahooks";
 import { CheckCircleOutlineRounded } from "@mui/icons-material";
 import {
   alpha,
@@ -24,8 +25,9 @@ interface Props {
 }
 
 const Widget = styled(Box)(() => ({
-  padding: "4px 6px",
+  padding: "3px 6px",
   fontSize: 14,
+  borderRadius: "4px",
 }));
 
 const TypeBox = styled(Box)(({ theme }) => ({
@@ -50,20 +52,12 @@ const ProxyItem = (props: Props) => {
     }
   }, [proxy]);
 
-  const delayRef = useRef(false);
+  const onDelay = useLockFn(async () => {
-  const onDelay = (e: any) => {
+    return delayManager
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (delayRef.current) return;
-    delayRef.current = true;
-
-    delayManager
       .checkDelay(proxy.name, groupName)
       .then((result) => setDelay(result))
-      .catch(() => setDelay(1e6))
+      .catch(() => setDelay(1e6));
-      .finally(() => (delayRef.current = false));
+  });
-  };
 
   return (
     <ListItem sx={sx}>
@@ -111,13 +105,27 @@ const ProxyItem = (props: Props) => {
         <ListItemIcon
           sx={{ justifyContent: "flex-end", color: "primary.main" }}
         >
-          <Widget className="the-check" onClick={onDelay}>
+          <Widget
+            className="the-check"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onDelay();
+            }}
+            sx={(theme) => ({
+              ":hover": { bgcolor: alpha(theme.palette.primary.main, 0.15) },
+            })}
+          >
             Check
           </Widget>
 
           <Widget
             className="the-delay"
-            onClick={onDelay}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onDelay();
+            }}
             color={
               delay > 500
                 ? "error.main"
@@ -125,6 +133,9 @@ const ProxyItem = (props: Props) => {
                 ? "success.main"
                 : "text.secondary"
             }
+            sx={(theme) => ({
+              ":hover": { bgcolor: alpha(theme.palette.primary.main, 0.15) },
+            })}
           >
             {delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}ms`}
           </Widget>

src/components/proxy/use-filter-proxy.ts

@@ -15,6 +15,7 @@ export default function useFilterProxy(
   filterText: string
 ) {
   return useMemo(() => {
+    if (!proxies) return [];
     if (!filterText) return proxies;
 
     const res1 = regex1.exec(filterText);

src/components/proxy/use-sort-proxy.ts

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { ApiType } from "../../services/types";
+import delayManager from "../../services/delay";
+
+// default | delay | alpha
+export type ProxySortType = 0 | 1 | 2;
+
+/**
+ * sort the proxy
+ */
+export default function useSortProxy(
+  proxies: ApiType.ProxyItem[],
+  groupName: string,
+  sortType: ProxySortType
+) {
+  return useMemo(() => {
+    if (!proxies) return [];
+    if (sortType === 0) return proxies;
+
+    const list = proxies.slice();
+
+    if (sortType === 1) {
+      list.sort((a, b) => {
+        const ad = delayManager.getDelay(a.name, groupName);
+        const bd = delayManager.getDelay(b.name, groupName);
+
+        if (ad === -1) return 1;
+        if (bd === -1) return -1;
+
+        return ad - bd;
+      });
+    } else {
+      list.sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    return list;
+  }, [proxies, groupName, sortType]);
+}

src/components/setting/setting-theme.tsx

@@ -0,0 +1,146 @@
+import useSWR from "swr";
+import { useEffect, useState } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemText,
+  styled,
+  TextField,
+} from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { defaultTheme } from "../../pages/_theme";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onError?: (err: Error) => void;
+}
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));
+
+const Round = styled("div")(() => ({
+  width: "24px",
+  height: "24px",
+  borderRadius: "18px",
+  display: "inline-block",
+  marginRight: "8px",
+}));
+
+const SettingTheme = (props: Props) => {
+  const { open, onClose, onError } = props;
+
+  const { t } = useTranslation();
+  const { data: vergeConfig, mutate } = useSWR(
+    "getVergeConfig",
+    getVergeConfig
+  );
+
+  const { theme_setting } = vergeConfig ?? {};
+  const [theme, setTheme] = useState(theme_setting || {});
+
+  useEffect(() => {
+    setTheme({ ...theme_setting } || {});
+  }, [theme_setting]);
+
+  const textProps = {
+    size: "small",
+    autoComplete: "off",
+    sx: { width: 135 },
+  } as const;
+
+  const handleChange = (field: keyof typeof theme) => (e: any) => {
+    setTheme((t) => ({ ...t, [field]: e.target.value }));
+  };
+
+  const onSave = useLockFn(async () => {
+    try {
+      await patchVergeConfig({ theme_setting: theme });
+      mutate();
+      onClose();
+    } catch (err: any) {
+      onError?.(err);
+    }
+  });
+
+  const renderItem = (label: string, key: keyof typeof defaultTheme) => {
+    return (
+      <Item>
+        <ListItemText primary={label} />
+        <Round sx={{ background: theme[key] || defaultTheme[key] }} />
+        <TextField
+          {...textProps}
+          value={theme[key] ?? ""}
+          placeholder={defaultTheme[key]}
+          onChange={handleChange(key)}
+          onKeyDown={(e) => e.key === "Enter" && onSave()}
+        />
+      </Item>
+    );
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t("Theme Setting")}</DialogTitle>
+
+      <DialogContent
+        sx={{ width: 400, maxHeight: 300, overflow: "auto", pb: 0 }}
+      >
+        <List sx={{ pt: 0 }}>
+          {renderItem("Primary Color", "primary_color")}
+
+          {renderItem("Secondary Color", "secondary_color")}
+
+          {renderItem("Primary Text", "primary_text")}
+
+          {renderItem("Secondary Text", "secondary_text")}
+
+          {renderItem("Info Color", "info_color")}
+
+          {renderItem("Error Color", "error_color")}
+
+          {renderItem("Warning Color", "warning_color")}
+
+          {renderItem("Success Color", "success_color")}
+
+          <Item>
+            <ListItemText primary="Font Family" />
+            <TextField
+              {...textProps}
+              value={theme.font_family ?? ""}
+              onChange={handleChange("font_family")}
+              onKeyDown={(e) => e.key === "Enter" && onSave()}
+            />
+          </Item>
+
+          <Item>
+            <ListItemText primary="CSS Injection" />
+            <TextField
+              {...textProps}
+              value={theme.css_injection ?? ""}
+              onChange={handleChange("css_injection")}
+              onKeyDown={(e) => e.key === "Enter" && onSave()}
+            />
+          </Item>
+        </List>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>{t("Cancel")}</Button>
+        <Button onClick={onSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SettingTheme;

src/components/setting/setting-verge.tsx

@@ -1,4 +1,5 @@
 import useSWR, { useSWRConfig } from "swr";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   IconButton,
@@ -20,6 +21,7 @@ import { CmdType } from "../../services/types";
 import { version } from "../../../package.json";
 import PaletteSwitch from "./palette-switch";
 import GuardState from "./guard-state";
+import SettingTheme from "./setting-theme";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -32,6 +34,8 @@ const SettingVerge = ({ onError }: Props) => {
 
   const { theme_mode, theme_blur, traffic_graph, language } = vergeConfig ?? {};
 
+  const [themeOpen, setThemeOpen] = useState(false);
+
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
     mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
@@ -99,6 +103,17 @@ const SettingVerge = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
+      <SettingItem>
+        <ListItemText primary={t("Theme Setting")} />
+        <IconButton
+          color="inherit"
+          size="small"
+          onClick={() => setThemeOpen(true)}
+        >
+          <ArrowForward />
+        </IconButton>
+      </SettingItem>
+
       <SettingItem>
         <ListItemText primary={t("Open App Dir")} />
         <IconButton color="inherit" size="small" onClick={openAppDir}>
@@ -117,6 +132,8 @@ const SettingVerge = ({ onError }: Props) => {
         <ListItemText primary={t("Version")} />
         <Typography sx={{ py: "6px" }}>v{version}</Typography>
       </SettingItem>
+
+      <SettingTheme open={themeOpen} onClose={() => setThemeOpen(false)} />
     </SettingList>
   );
 };

src/locales/en.json

@@ -48,6 +48,7 @@
   "Proxy Bypass": "Proxy Bypass",
   "Theme Mode": "Theme Mode",
   "Theme Blur": "Theme Blur",
+  "Theme Setting": "Theme Setting",
   "Traffic Graph": "Traffic Graph",
   "Language": "Language",
   "Open App Dir": "Open App Dir",

src/locales/zh.json

@@ -48,6 +48,7 @@
   "Proxy Bypass": "Proxy Bypass",
   "Theme Mode": "暗夜模式",
   "Theme Blur": "背景模糊",
+  "Theme Setting": "主题设置",
   "Traffic Graph": "流量图显",
   "Language": "语言设置",
   "Open App Dir": "应用目录",

src/main.tsx

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
 import "./assets/styles/index.scss";
 
 import React from "react";

src/pages/_layout.tsx

@@ -2,20 +2,21 @@ import dayjs from "dayjs";
 import i18next from "i18next";
 import relativeTime from "dayjs/plugin/relativeTime";
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Route, Routes } from "react-router-dom";
-import { alpha, createTheme, List, Paper, ThemeProvider } from "@mui/material";
+import { alpha, List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
 import { appWindow } from "@tauri-apps/api/window";
 import { routers } from "./_routers";
 import { getAxios } from "../services/api";
 import { getVergeConfig } from "../services/cmds";
-import LogoSvg from "../assets/image/logo.svg";
+import { ReactComponent as LogoSvg } from "../assets/image/logo.svg";
 import LayoutItem from "../components/layout/layout-item";
 import LayoutControl from "../components/layout/layout-control";
 import LayoutTraffic from "../components/layout/layout-traffic";
 import UpdateButton from "../components/layout/update-button";
+import useCustomTheme from "../components/layout/use-custom-theme";
 import getSystem from "../utils/get-system";
 import "dayjs/locale/zh-cn";
 
@@ -26,10 +27,11 @@ const OS = getSystem();
 const Layout = () => {
   const { t } = useTranslation();
   const { mutate } = useSWRConfig();
-  const { data } = useSWR("getVergeConfig", getVergeConfig);
 
-  const blur = !!data?.theme_blur;
+  const { theme } = useCustomTheme();
-  const mode = data?.theme_mode ?? "light";
+
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_blur, language } = vergeConfig || {};
 
   useEffect(() => {
     window.addEventListener("keydown", (e) => {
@@ -48,37 +50,11 @@ const Layout = () => {
   }, []);
 
   useEffect(() => {
-    if (data?.language) {
+    if (language) {
-      dayjs.locale(data.language === "zh" ? "zh-cn" : data.language);
+      dayjs.locale(language === "zh" ? "zh-cn" : language);
-      i18next.changeLanguage(data.language);
+      i18next.changeLanguage(language);
     }
-  }, [data?.language]);
+  }, [language]);
-
-  const theme = useMemo(() => {
-    // const background = mode === "light" ? "#f5f5f5" : "#000";
-    const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
-
-    const rootEle = document.documentElement;
-    rootEle.style.background = "transparent";
-    rootEle.style.setProperty("--selection-color", selectColor);
-
-    return createTheme({
-      breakpoints: {
-        values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
-      },
-      palette: {
-        mode,
-        primary: { main: "#5b5c9d" },
-        text: { primary: "#637381", secondary: "#909399" },
-      },
-    });
-  }, [mode]);
-
-  const onDragging = (e: any) => {
-    if (e?.target?.dataset?.windrag) {
-      appWindow.startDragging();
-    }
-  };
 
   return (
     <SWRConfig value={{}}>
@@ -87,20 +63,22 @@ const Layout = () => {
           square
           elevation={0}
           className={`${OS} layout`}
-          onPointerDown={onDragging}
+          onPointerDown={(e: any) => {
+            if (e.target?.dataset?.windrag) appWindow.startDragging();
+          }}
           onContextMenu={(e) => {
             // only prevent it on Windows
             if (OS === "windows") e.preventDefault();
           }}
           sx={[
-            (theme) => ({
+            ({ palette }) => ({
-              bgcolor: alpha(theme.palette.background.paper, blur ? 0.85 : 1),
+              bgcolor: alpha(palette.background.paper, theme_blur ? 0.85 : 1),
             }),
           ]}
         >
           <div className="layout__left" data-windrag>
             <div className="the-logo" data-windrag>
-              <img src={LogoSvg} alt="" data-windrag />
+              <LogoSvg />
 
               <UpdateButton className="the-newbtn" />
             </div>

src/pages/_theme.tsx

@@ -0,0 +1,12 @@
+// default theme setting
+export const defaultTheme = {
+  primary_color: "#5b5c9d",
+  secondary_color: "#9c27b0",
+  primary_text: "#637381",
+  secondary_text: "#909399",
+  info_color: "#0288d1",
+  error_color: "#d32f2f",
+  warning_color: "#ed6c02",
+  success_color: "#2e7d32",
+  font_family: `"Roboto", "Helvetica", "Arial", sans-serif`,
+};

src/pages/connections.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useLockFn } from "ahooks";
-import { Button, Paper } from "@mui/material";
+import { Box, Button, Paper, TextField } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 import { ApiType } from "../services/types";
@@ -8,12 +8,20 @@ import { closeAllConnections, getInfomation } from "../services/api";
 import BasePage from "../components/base/base-page";
 import ConnectionItem from "../components/connection/connection-item";
 
-const ConnectionsPage = () => {
+const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
-  const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
+const ConnectionsPage = () => {
   const { t } = useTranslation();
+
+  const [filterText, setFilterText] = useState("");
   const [connData, setConnData] = useState<ApiType.Connections>(initConn);
 
+  const filterConn = useMemo(() => {
+    return connData.connections.filter((conn) =>
+      (conn.metadata.host || conn.metadata.destinationIP)?.includes(filterText)
+    );
+  }, [connData, filterText]);
+
   useEffect(() => {
     let ws: WebSocket | null = null;
 
@@ -23,32 +31,35 @@ const ConnectionsPage = () => {
 
       ws.addEventListener("message", (event) => {
         const data = JSON.parse(event.data) as ApiType.Connections;
+
+        // 与前一次connections的展示顺序尽量保持一致
         setConnData((old) => {
           const oldConn = old.connections;
-          const oldList = oldConn.map((each) => each.id);
           const maxLen = data.connections.length;
 
           const connections: typeof oldConn = [];
 
-          // 与前一次连接的顺序尽量保持一致
+          const rest = data.connections.filter((each) => {
-          data.connections
+            const index = oldConn.findIndex((o) => o.id === each.id);
-            .filter((each) => {
-              const index = oldList.indexOf(each.id);
 
-              if (index >= 0 && index < maxLen) {
+            if (index >= 0 && index < maxLen) {
-                connections[index] = each;
+              const old = oldConn[index];
-                return false;
+              each.curUpload = each.upload - old.upload;
-              }
+              each.curDownload = each.download - old.download;
-              return true;
+
-            })
+              connections[index] = each;
-            .forEach((each) => {
+              return false;
-              for (let i = 0; i < maxLen; ++i) {
+            }
-                if (!connections[i]) {
+            return true;
-                  connections[i] = each;
+          });
-                  return;
+
-                }
+          for (let i = 0; i < maxLen; ++i) {
-              }
+            if (!connections[i] && rest.length > 0) {
-            });
+              connections[i] = rest.shift()!;
+              connections[i].curUpload = 0;
+              connections[i].curDownload = 0;
+            }
+          }
 
           return { ...data, connections };
         });
@@ -76,11 +87,48 @@ const ConnectionsPage = () => {
       }
     >
       <Paper sx={{ boxShadow: 2, height: "100%" }}>
-        <Virtuoso
+        <Box
-          initialTopMostItemIndex={999}
+          sx={{
-          data={connData.connections}
+            pt: 1,
-          itemContent={(index, item) => <ConnectionItem value={item} />}
+            mb: 0.5,
-        />
+            mx: "12px",
+            height: "36px",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          {/* <Select
+            size="small"
+            autoComplete="off"
+            value={logState}
+            onChange={(e) => setLogState(e.target.value)}
+            sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
+          >
+            <MenuItem value="all">ALL</MenuItem>
+            <MenuItem value="info">INFO</MenuItem>
+            <MenuItem value="warn">WARN</MenuItem>
+          </Select> */}
+
+          <TextField
+            hiddenLabel
+            fullWidth
+            size="small"
+            autoComplete="off"
+            variant="outlined"
+            placeholder="Filter conditions"
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+            sx={{ input: { py: 0.65, px: 1.25 } }}
+          />
+        </Box>
+
+        <Box height="calc(100% - 50px)">
+          <Virtuoso
+            initialTopMostItemIndex={999}
+            data={filterConn}
+            itemContent={(index, item) => <ConnectionItem value={item} />}
+          />
+        </Box>
       </Paper>
     </BasePage>
   );

src/pages/logs.tsx

@@ -1,5 +1,6 @@
+import { useMemo, useState } from "react";
 import { useRecoilState } from "recoil";
-import { Button, Paper } from "@mui/material";
+import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 import { atomLogData } from "../services/states";
@@ -10,6 +11,18 @@ const LogPage = () => {
   const { t } = useTranslation();
   const [logData, setLogData] = useRecoilState(atomLogData);
 
+  const [logState, setLogState] = useState("all");
+  const [filterText, setFilterText] = useState("");
+
+  const filterLogs = useMemo(() => {
+    return logData.filter((data) => {
+      return (
+        data.payload.includes(filterText) &&
+        (logState === "all" ? true : data.type.includes(logState))
+      );
+    });
+  }, [logData, logState, filterText]);
+
   return (
     <BasePage
       title={t("Logs")}
@@ -25,13 +38,50 @@ const LogPage = () => {
         </Button>
       }
     >
-      <Paper sx={{ boxShadow: 2, height: "100%" }}>
+      <Paper sx={{ boxSizing: "border-box", boxShadow: 2, height: "100%" }}>
-        <Virtuoso
+        <Box
-          initialTopMostItemIndex={999}
+          sx={{
-          data={logData}
+            pt: 1,
-          itemContent={(index, item) => <LogItem value={item} />}
+            mb: 0.5,
-          followOutput={"smooth"}
+            mx: "12px",
-        />
+            height: "36px",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <Select
+            size="small"
+            autoComplete="off"
+            value={logState}
+            onChange={(e) => setLogState(e.target.value)}
+            sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
+          >
+            <MenuItem value="all">ALL</MenuItem>
+            <MenuItem value="info">INFO</MenuItem>
+            <MenuItem value="warn">WARN</MenuItem>
+          </Select>
+
+          <TextField
+            hiddenLabel
+            fullWidth
+            size="small"
+            autoComplete="off"
+            variant="outlined"
+            placeholder="Filter conditions"
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+            sx={{ input: { py: 0.65, px: 1.25 } }}
+          />
+        </Box>
+
+        <Box height="calc(100% - 50px)">
+          <Virtuoso
+            initialTopMostItemIndex={999}
+            data={filterLogs}
+            itemContent={(index, item) => <LogItem value={item} />}
+            followOutput={"smooth"}
+          />
+        </Box>
       </Paper>
     </BasePage>
   );

src/pages/profiles.tsx

@@ -6,18 +6,15 @@ import { useTranslation } from "react-i18next";
 import {
   getProfiles,
   patchProfile,
-  deleteProfile,
   selectProfile,
   importProfile,
-  enhanceProfiles,
-  changeProfileChain,
 } from "../services/cmds";
 import { getProxies, updateProxy } from "../services/api";
 import Notice from "../components/base/base-notice";
 import BasePage from "../components/base/base-page";
 import ProfileNew from "../components/profile/profile-new";
 import ProfileItem from "../components/profile/profile-item";
-import ProfileMore from "../components/profile/profile-more";
+import EnhancedMode from "../components/profile/enhanced";
 
 const ProfilePage = () => {
   const { t } = useTranslation();
@@ -130,54 +127,6 @@ const ProfilePage = () => {
     }
   });
 
-  /** enhanced profile mode */
-
-  const chain = profiles.chain || [];
-
-  const onEnhance = useLockFn(enhanceProfiles);
-
-  const onEnhanceEnable = useLockFn(async (uid: string) => {
-    if (chain.includes(uid)) return;
-
-    const newChain = [...chain, uid];
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
-  const onEnhanceDisable = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = chain.filter((i) => i !== uid);
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
-  const onEnhanceDelete = useLockFn(async (uid: string) => {
-    try {
-      await onEnhanceDisable(uid);
-      await deleteProfile(uid);
-      mutate("getProfiles");
-    } catch (err: any) {
-      Notice.error(err?.message || err.toString());
-    }
-  });
-
-  const onMoveTop = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = [uid].concat(chain.filter((i) => i !== uid));
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
-  const onMoveEnd = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = chain.filter((i) => i !== uid).concat([uid]);
-    await changeProfileChain(newChain);
-    mutate("getProfiles", { ...profiles, chain: newChain }, true);
-  });
-
   return (
     <BasePage title={t("Profiles")}>
       <Box sx={{ display: "flex", mb: 2.5 }}>
@@ -216,22 +165,9 @@ const ProfilePage = () => {
         ))}
       </Grid>
 
-      <Grid container spacing={2} sx={{ mt: 3 }}>
+      {enhanceItems.length > 0 && (
-        {enhanceItems.map((item) => (
+        <EnhancedMode items={enhanceItems} chain={profiles.chain || []} />
-          <Grid item xs={12} sm={6} key={item.file}>
+      )}
-            <ProfileMore
-              selected={!!profiles.chain?.includes(item.uid)}
-              itemData={item}
-              onEnable={() => onEnhanceEnable(item.uid)}
-              onDisable={() => onEnhanceDisable(item.uid)}
-              onDelete={() => onEnhanceDelete(item.uid)}
-              onMoveTop={() => onMoveTop(item.uid)}
-              onMoveEnd={() => onMoveEnd(item.uid)}
-              onEnhance={onEnhance}
-            />
-          </Grid>
-        ))}
-      </Grid>
 
       <ProfileNew open={dialogOpen} onClose={() => setDialogOpen(false)} />
     </BasePage>

src/pages/proxies.tsx

@@ -17,7 +17,7 @@ const ProxyPage = () => {
   const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
 
   const modeList = ["rule", "global", "direct"];
-  const curMode = clashConfig?.mode.toLowerCase() ?? "direct";
+  const curMode = clashConfig?.mode.toLowerCase();
   const { groups = [], proxies = [] } = proxiesData ?? {};
 
   // make sure that fetch the proxies successfully

src/services/api.ts

@@ -142,6 +142,14 @@ export async function getProviders() {
   return response.providers as any;
 }
 
+// todo: proxy providers health check
+export async function getProviderHealthCheck(name: string) {
+  const instance = await getAxios();
+  return instance.get(
+    `/providers/proxies/${encodeURIComponent(name)}/healthcheck`
+  );
+}
+
 // Close specific connection
 export async function deleteConnection(id: string) {
   const instance = await getAxios();

src/services/cmds.ts

@@ -66,6 +66,10 @@ export async function changeProfileChain(chain?: string[]) {
   return invoke<void>("change_profile_chain", { chain });
 }
 
+export async function changeProfileValid(valid?: string[]) {
+  return invoke<void>("change_profile_valid", { valid });
+}
+
 export async function getClashInfo() {
   return invoke<CmdType.ClashInfo | null>("get_clash_info");
 }

src/services/delay.ts

@@ -4,6 +4,15 @@ const hashKey = (name: string, group: string) => `${group ?? ""}::${name}`;
 
 class DelayManager {
   private cache = new Map<string, [number, number]>();
+  private urlMap = new Map<string, string>();
+
+  setUrl(group: string, url: string) {
+    this.urlMap.set(group, url);
+  }
+
+  getUrl(group: string) {
+    return this.urlMap.get(group);
+  }
 
   setDelay(name: string, group: string, delay: number) {
     this.cache.set(hashKey(name, group), [Date.now(), delay]);
@@ -23,7 +32,8 @@ class DelayManager {
     let delay = -1;
 
     try {
-      const result = await getProxyDelay(name);
+      const url = this.getUrl(group);
+      const result = await getProxyDelay(name, url);
       delay = result.delay;
     } catch {
       delay = 1e6; // error
@@ -38,32 +48,36 @@ class DelayManager {
       names: readonly string[];
       groupName: string;
       skipNum: number;
-      maxTimeout: number;
     },
     callback: Function
   ) {
-    let names = [...options.names];
+    const { groupName, skipNum } = options;
-    const { groupName, skipNum, maxTimeout } = options;
 
-    while (names.length) {
+    const names = [...options.names];
-      const list = names.slice(0, skipNum);
+    const total = names.length;
-      names = names.slice(skipNum);
 
-      let called = false;
+    let count = 0;
-      setTimeout(() => {
+    let current = 0;
-        if (!called) {
-          called = true;
-          callback();
-        }
-      }, maxTimeout);
 
-      await Promise.all(list.map((n) => this.checkDelay(n, groupName)));
+    return new Promise((resolve) => {
+      const help = async (): Promise<void> => {
+        if (current >= skipNum) return;
 
-      if (!called) {
+        const task = names.shift();
-        called = true;
+        if (!task) return;
-        callback();
+
-      }
+        current += 1;
-    }
+        await this.checkDelay(task, groupName);
+        current -= 1;
+
+        if (count++ % skipNum === 0 || count === total) callback();
+        if (count === total) resolve(null);
+
+        return help();
+      };
+
+      for (let i = 0; i < skipNum; ++i) help();
+    });
   }
 }
 

src/services/enhance.ts

@@ -145,11 +145,12 @@ class Enhance {
   // enhanced mode runner
   private async runner(payload: CmdType.EnhancedPayload) {
     const chain = payload.chain || [];
+    const valid = payload.valid || [];
 
     if (!Array.isArray(chain)) throw new Error("unhandle error");
 
     let pdata = payload.current || {};
-    let useList = [] as string[];
+    let useList = valid;
 
     for (const each of chain) {
       const { uid, type = "" } = each.item;

src/services/types.ts

@@ -65,6 +65,8 @@ export namespace ApiType {
     chains: string[];
     rule: string;
     rulePayload: string;
+    curUpload?: number; // calculate
+    curDownload?: number; // calculate
   }
 
   export interface Connections {
@@ -116,6 +118,7 @@ export namespace CmdType {
   export interface ProfilesConfig {
     current?: string;
     chain?: string[];
+    valid?: string[];
     items?: ProfileItem[];
   }
 
@@ -130,6 +133,18 @@ export namespace CmdType {
     enable_system_proxy?: boolean;
     enable_proxy_guard?: boolean;
     system_proxy_bypass?: string;
+    theme_setting?: {
+      primary_color?: string;
+      secondary_color?: string;
+      primary_text?: string;
+      secondary_text?: string;
+      info_color?: string;
+      error_color?: string;
+      warning_color?: string;
+      success_color?: string;
+      font_family?: string;
+      css_injection?: string;
+    };
   }
 
   type ClashConfigValue = any;
@@ -179,6 +194,7 @@ export namespace CmdType {
 
   export interface EnhancedPayload {
     chain: ChainItem[];
+    valid: string[];
     current: ProfileData;
     callback: string;
   }

vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
+import svgr from "vite-plugin-svgr";
 import react from "@vitejs/plugin-react";
 import monaco from "vite-plugin-monaco-editor";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   root: "src",
-  plugins: [react(), monaco()],
+  plugins: [svgr(), react(), monaco()],
   build: {
     outDir: "../dist",
     emptyOutDir: true,