v0.0.27

chore: update log
refactor: update profile menu
2022-04-06 01:21:33 +08:00 · 2022-04-06 01:19:13 +08:00 · 2022-04-06 01:13:06 +08:00 · 2022-04-05 23:24:52 +08:00 · 2022-04-05 23:19:54 +08:00 · 2022-04-05 20:21:53 +08:00
49 changed files with 2213 additions and 1555 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -106,7 +106,7 @@ jobs:
      - name: Yarn install
        run: yarn install

-      - name: Release update.json
-        run: yarn run release
+      - name: Release updater file
+        run: yarn run updater
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/updater.yml
+++ b/.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 }}
--- a/README.md
+++ b/README.md
@@ -12,12 +12,12 @@ 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)
 - System proxy setting and guard.

 ## Install

-Download from [release](https://github.com/zzzgydi/clash-verge/releases). Supports Windows x64 and macOS 11+
+Download from [release](https://github.com/zzzgydi/clash-verge/releases). Supports Windows x64, Linux x86_64 and macOS 11+

 Or you can build it yourself. Supports Windows, Linux and macOS 10.15+

--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -1,3 +1,50 @@
+## 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
+
+- silent start
+- profile editor
+- profile enhance mode supports more fields
+- optimize profile enhance mode strategy
+
+### Bug Fixes
+
+- fix csp restriction on macOS
+- window controllers on Linux
+
+---
+
+## v0.0.25
+
+### Features
+
+- update clash core version
+
+### Bug Fixes
+
+- app updater error
+- display window controllers on Linux
+
+### Notes
+
+If you can't update the app properly, please consider downloading the latest version from github release.
+
+---
+
 ## v0.0.24

 ### Features
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "clash-verge",
-  "version": "0.0.24",
+  "version": "0.0.27",
  "license": "GPL-3.0",
  "scripts": {
    "dev": "tauri dev",
@@ -12,33 +12,35 @@
    "check": "node scripts/check.mjs",
    "green": "node scripts/green.mjs",
    "publish": "node scripts/publish.mjs",
-    "release": "node scripts/release.mjs",
+    "updater": "node scripts/updater.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/material": "^5.4.4",
-    "@tauri-apps/api": "^1.0.0-rc.2",
-    "ahooks": "^3.1.13",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "^5.5.3",
+    "@tauri-apps/api": "^1.0.0-rc.3",
+    "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",
@@ -49,7 +51,9 @@
    "pretty-quick": "^3.1.3",
    "sass": "^1.49.7",
    "typescript": "^4.5.5",
-    "vite": "^2.8.6"
+    "vite": "^2.8.6",
+    "vite-plugin-monaco-editor": "^1.0.10",
+    "vite-plugin-svgr": "^1.1.0"
  },
  "prettier": {
    "tabWidth": 2,
--- a/scripts/check.mjs
+++ b/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.19";
+  const CLASH_LATEST_DATE = "2022.03.21";

  // todo
  const map = {
--- a/scripts/updater.mjs
+++ b/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: "" },
-      linux: { signature: "", url: "" },
-      darwin: { signature: "", url: "" },
+      win64: { signature: "", url: "" }, // compatible with older formats
+      linux: { signature: "", url: "" }, // compatible with older formats
+      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)) {
-      updateData.platforms.win64.signature = await getSignature(
-        browser_download_url
-      );
+    if (name.endsWith(".msi.zip.sig")) {
+      const sig = await getSignature(browser_download_url);
+      updateData.platforms.win64.signature = sig;
+      updateData.platforms["windows-x86_64"].signature = sig;
    }

-    // darwin url
-    if (/\.app\.tar\.gz$/.test(name)) {
+    // darwin url (intel)
+    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
-    if (/\.app\.tar\.gz\.sig$/.test(name)) {
-      updateData.platforms.darwin.signature = await getSignature(
-        browser_download_url
-      );
+    // darwin signature (intel)
+    if (name.endsWith(".app.tar.gz.sig") && !name.includes("aarch")) {
+      const sig = await getSignature(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)) {
-      updateData.platforms.linux.signature = await getSignature(
-        browser_download_url
-      );
+    if (name.endsWith(".AppImage.tar.gz.sig")) {
+      const sig = await getSignature(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;
-  if (!darwin.url) {
-    console.log(`[Error]: failed to parse release for darwin`);
-    delete updateData.platforms.darwin;
-  }
-  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;
-  }
+  // delete the null field
+  Object.entries(updateData.platforms).forEach(([key, value]) => {
+    if (!value.url) {
+      console.log(`[Error]: failed to parse release for "${key}"`);
+      delete updateData.platforms[key];
+    }
+  });

  // 生成一个代理github的更新文件
  // 使用 https://hub.fastgit.xyz/ 做github资源的加速
  const updateDataNew = JSON.parse(JSON.stringify(updateData));

-  Object.keys(updateDataNew.platforms).forEach((key) => {
-    if (updateDataNew.platforms[key]) {
-      updateDataNew.platforms[key].url = updateDataNew.platforms[
-        key
-      ].url.replace("https://github.com/", "https://hub.fastgit.xyz/");
+  Object.entries(updateDataNew.platforms).forEach(([key, value]) => {
+    if (value.url) {
+      updateDataNew.platforms[key].url = value.url.replace(
+        "https://github.com/",
+        "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);
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -10,18 +10,19 @@ 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"
 dirs = "4.0.0"
+open = "2.1.1"
 dunce = "1.0.2"
 nanoid = "0.4.0"
 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 = ["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" }

@@ -41,3 +42,10 @@ winreg = { version = "0.10", features = ["transactions"] }
 default = [ "custom-protocol" ]
 custom-protocol = [ "tauri/custom-protocol" ]
 verge-dev = []
+debug-yml = []
+
+[profile.release]
+panic = "abort"
+codegen-units = 1
+lto = true
+opt-level = "s"
--- a/src-tauri/src/cmds.rs
+++ b/src-tauri/src/cmds.rs
@@ -6,7 +6,7 @@ use crate::{
 use crate::{ret_err, wrap_err};
 use anyhow::Result;
 use serde_yaml::Mapping;
-use std::{path::PathBuf, process::Command};
+use std::process::Command;
 use tauri::{api, Manager, State};

 /// get all profiles from `profiles.yaml`
@@ -88,7 +88,7 @@ pub async fn update_profile(
  // reactivate the profile
  if Some(index) == profiles.get_current() {
    let clash = clash_state.0.lock().unwrap();
-    wrap_err!(clash.activate(&profiles, false))?;
+    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
  }

  Ok(())
@@ -105,7 +105,7 @@ pub fn select_profile(
  wrap_err!(profiles.put_current(index))?;

  let clash = clash_state.0.lock().unwrap();
-  wrap_err!(clash.activate(&profiles, false))
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
 }

 /// change the profile chain
@@ -122,7 +122,7 @@ pub fn change_profile_chain(
  profiles.put_chain(chain);
  clash.set_window(app_handle.get_window("main"));

-  wrap_err!(clash.activate_enhanced(&profiles, false))
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
 }

 /// manually exec enhanced profile
@@ -137,7 +137,7 @@ pub fn enhance_profiles(

  clash.set_window(app_handle.get_window("main"));

-  wrap_err!(clash.activate_enhanced(&profiles, false))
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
 }

 /// delete profile item
@@ -151,7 +151,7 @@ pub fn delete_profile(

  if wrap_err!(profiles.delete_item(index))? {
    let clash = clash_state.0.lock().unwrap();
-    wrap_err!(clash.activate(&profiles, false))?;
+    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
  }

  Ok(())
@@ -195,21 +195,50 @@ pub fn view_profile(index: String, profiles_state: State<'_, ProfilesState>) ->
        .arg(path)
        .spawn()
      {
-        log::error!("{err}");
+        log::error!("failed to open file by VScode for {err}");
        return Err("failed to open file by VScode".into());
      }
    }

    #[cfg(not(target_os = "windows"))]
    if let Err(err) = Command::new(code).arg(path).spawn() {
-      log::error!("{err}");
+      log::error!("failed to open file by VScode for {err}");
      return Err("failed to open file by VScode".into());
    }

    return Ok(());
  }

-  open_path_cmd(path, "failed to open file by `open`")
+  wrap_err!(open::that(path))
+}
+
+/// read the profile item file data
+#[tauri::command]
+pub fn read_profile_file(
+  index: String,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<String, String> {
+  let profiles = profiles_state.0.lock().unwrap();
+  let item = wrap_err!(profiles.get_item(&index))?;
+  let data = wrap_err!(item.read_file())?;
+
+  Ok(data)
+}
+
+/// save the profile item file data
+#[tauri::command]
+pub fn save_profile_file(
+  index: String,
+  file_data: Option<String>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  if file_data.is_none() {
+    return Ok(());
+  }
+
+  let profiles = profiles_state.0.lock().unwrap();
+  let item = wrap_err!(profiles.get_item(&index))?;
+  wrap_err!(item.save_file(file_data.unwrap()))
 }

 /// restart the sidecar
@@ -288,16 +317,6 @@ 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(&profiles, false))?;
-  }
-
  let mut verge = verge_state.0.lock().unwrap();
  wrap_err!(verge.patch_config(payload))?;

@@ -310,6 +329,23 @@ pub fn patch_verge_config(
      .unwrap();
  }

+  // 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))?;
+  }
+
  Ok(())
 }

@@ -323,66 +359,12 @@ pub fn kill_sidecars() {
 #[tauri::command]
 pub fn open_app_dir() -> Result<(), String> {
  let app_dir = dirs::app_home_dir();
-  open_path_cmd(app_dir, "failed to open app dir")
+  wrap_err!(open::that(app_dir))
 }

 /// open logs dir
 #[tauri::command]
 pub fn open_logs_dir() -> Result<(), String> {
  let log_dir = dirs::app_logs_dir();
-  open_path_cmd(log_dir, "failed to open logs dir")
-}
-
-/// use the os default open command to open file or dir
-fn open_path_cmd(path: PathBuf, err_str: &str) -> Result<(), String> {
-  let result;
-
-  #[cfg(target_os = "windows")]
-  {
-    use std::os::windows::process::CommandExt;
-
-    result = Command::new("explorer")
-      .creation_flags(0x08000000)
-      .arg(&path)
-      .spawn();
-  }
-
-  #[cfg(target_os = "macos")]
-  {
-    result = Command::new("open").arg(&path).spawn();
-  }
-
-  #[cfg(target_os = "linux")]
-  {
-    result = Command::new("xdg-open").arg(&path).spawn();
-  }
-
-  match result {
-    Ok(child) => match child.wait_with_output() {
-      Ok(out) => {
-        // 退出码不为0 不一定没有调用成功
-        // 因此仅做warn log且不返回错误
-        if let Some(code) = out.status.code() {
-          if code != 0 {
-            log::warn!("failed to open {:?} (code {})", &path, code);
-            log::warn!(
-              "open cmd stdout: {}, stderr: {}",
-              String::from_utf8_lossy(&out.stdout),
-              String::from_utf8_lossy(&out.stderr),
-            );
-          }
-        }
-      }
-      Err(err) => {
-        log::error!("failed to open {:?} for {err}", &path);
-        return Err(err_str.into());
-      }
-    },
-    Err(err) => {
-      log::error!("failed to open {:?} for {err}", &path);
-      return Err(err_str.into());
-    }
-  }
-
-  return Ok(());
+  wrap_err!(open::that(log_dir))
 }
--- a/src-tauri/src/core/clash.rs
+++ b/src-tauri/src/core/clash.rs
@@ -1,4 +1,5 @@
-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};
 use reqwest::header::HeaderMap;
@@ -176,7 +177,8 @@ impl Clash {
    self.update_config();
    self.drop_sidecar()?;
    self.run_sidecar()?;
-    self.activate(profiles, false)
+    self.activate(profiles)?;
+    self.activate_enhanced(profiles, false, true)
  }

  /// update the clash info
@@ -220,18 +222,8 @@ impl Clash {
    Ok(())
  }

-  /// enable tun mode
-  /// only revise the config and restart the
-  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`");
-      }
-    }
-
+  /// revise the `tun` and `dns` config
+  fn _tun_mode(mut config: Mapping, enable: bool) -> Mapping {
    macro_rules! revise {
      ($map: expr, $key: expr, $val: expr) => {
        let ret_key = Value::String($key.into());
@@ -250,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() {
@@ -258,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() {
@@ -275,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")]
-    append!(
-      new_dns,
-      "fake-ip-filter",
-      vec![
-        "dns.msftncsi.com",
-        "www.msftncsi.com",
-        "www.msftconnecttest.com"
-      ]
-    );
+    if 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>);

-    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"))?;

@@ -354,62 +356,57 @@ impl Clash {
  }

  /// enhanced profiles mode
-  /// only change the enhanced profiles
-  pub fn activate_enhanced(&self, profiles: &Profiles, delay: bool) -> Result<()> {
+  /// - (sync) refresh config if enhance chain is null
+  /// - (async) enhanced config
+  pub fn activate_enhanced(&self, profiles: &Profiles, delay: bool, skip: bool) -> Result<()> {
    if self.window.is_none() {
      bail!("failed to get the main window");
    }

-    let win = self.window.clone().unwrap();
    let event_name = help::get_uid("e");
    let event_name = format!("enhanced-cb-{event_name}");

-    let info = self.info.clone();
-    let mut config = self.config.clone();
-
    // generate the payload
    let payload = profiles.gen_enhanced(event_name.clone())?;
-    let window = self.window.clone();

-    win.once(&event_name, move |event| {
+    let info = self.info.clone();
+
+    // do not run enhanced
+    if payload.chain.len() == 0 {
+      if skip {
+        return Ok(());
+      }
+
+      let mut config = self.config.clone();
+      let filter_data = Clash::strict_filter(payload.current);
+
+      for (key, value) in filter_data.into_iter() {
+        config.insert(key, value);
+      }
+
+      return Clash::_activate(info, config, self.window.clone());
+    }
+
+    let window = self.window.clone().unwrap();
+    let window_move = self.window.clone();
+
+    window.once(&event_name, move |event| {
      if let Some(result) = event.payload() {
        let result: PrfEnhancedResult = serde_json::from_str(result).unwrap();

        if let Some(data) = result.data {
-          // all of these can not be revised by script
-          // http/https/socks port should be under control
-          let not_allow = vec![
-            "port",
-            "socks-port",
-            "mixed-port",
-            "allow-lan",
-            "mode",
-            "external-controller",
-            "secret",
-            "log-level",
-          ];
+          let mut config = Clash::read_config();
+          let filter_data = Clash::loose_filter(data); // loose filter

-          for (key, value) in data.into_iter() {
-            key.as_str().map(|key_str| {
-              // change to lowercase
-              let mut key_str = String::from(key_str);
-              key_str.make_ascii_lowercase();
-
-              // filter
-              if !not_allow.contains(&&*key_str) {
-                config.insert(Value::String(key_str), value);
-              }
-            });
+          for (key, value) in filter_data.into_iter() {
+            config.insert(key, value);
          }

+          log_if_err!(Clash::_activate(info, config, window_move));
          log::info!("profile enhanced status {}", result.status);
-
-          Self::_activate(info, config, window).unwrap();
        }

-        if let Some(error) = result.error {
-          log::error!("{error}");
-        }
+        result.error.map(|err| log::error!("{err}"));
      }
    });

@@ -418,7 +415,7 @@ impl Clash {
      if delay {
        sleep(Duration::from_secs(2)).await;
      }
-      win.emit("script-handler", payload).unwrap();
+      window.emit("script-handler", payload).unwrap();
    });

    Ok(())
@@ -426,17 +423,83 @@ impl Clash {

  /// activate the profile
  /// auto activate enhanced profile
-  pub fn activate(&self, profiles: &Profiles, delay: bool) -> Result<()> {
-    let gen_map = profiles.gen_activate()?;
+  pub fn activate(&self, profiles: &Profiles) -> Result<()> {
+    let data = profiles.gen_activate()?;
+    let data = Clash::strict_filter(data);
+
    let info = self.info.clone();
    let mut config = self.config.clone();

-    for (key, value) in gen_map.into_iter() {
+    for (key, value) in data.into_iter() {
      config.insert(key, value);
    }

-    Self::_activate(info, config, self.window.clone())?;
-    self.activate_enhanced(profiles, delay)
+    Clash::_activate(info, config, self.window.clone())
+  }
+
+  /// only 5 default fields available (clash config fields)
+  /// convert to lowercase
+  fn strict_filter(config: Mapping) -> Mapping {
+    // Only the following fields are allowed:
+    // proxies/proxy-providers/proxy-groups/rule-providers/rules
+    let valid_keys = vec![
+      "proxies",
+      "proxy-providers",
+      "proxy-groups",
+      "rules",
+      "rule-providers",
+    ];
+
+    let mut new_config = Mapping::new();
+
+    for (key, value) in config.into_iter() {
+      key.as_str().map(|key_str| {
+        // change to lowercase
+        let mut key_str = String::from(key_str);
+        key_str.make_ascii_lowercase();
+
+        // filter
+        if valid_keys.contains(&&*key_str) {
+          new_config.insert(Value::String(key_str), value);
+        }
+      });
+    }
+
+    new_config
+  }
+
+  /// more clash config fields available
+  /// convert to lowercase
+  fn loose_filter(config: Mapping) -> Mapping {
+    // all of these can not be revised by script or merge
+    // http/https/socks port should be under control
+    let not_allow = vec![
+      "port",
+      "socks-port",
+      "mixed-port",
+      "allow-lan",
+      "mode",
+      "external-controller",
+      "secret",
+      "log-level",
+    ];
+
+    let mut new_config = Mapping::new();
+
+    for (key, value) in config.into_iter() {
+      key.as_str().map(|key_str| {
+        // change to lowercase
+        let mut key_str = String::from(key_str);
+        key_str.make_ascii_lowercase();
+
+        // filter
+        if !not_allow.contains(&&*key_str) {
+          new_config.insert(Value::String(key_str), value);
+        }
+      });
+    }
+
+    new_config
  }
 }

--- a/src-tauri/src/core/profiles.rs
+++ b/src-tauri/src/core/profiles.rs
@@ -1,7 +1,7 @@
 use crate::utils::{config, dirs, help, tmpl};
 use anyhow::{bail, Context, Result};
 use serde::{Deserialize, Serialize};
-use serde_yaml::{Mapping, Value};
+use serde_yaml::Mapping;
 use std::{fs, io::Write};

 #[derive(Debug, Clone, Deserialize, Serialize)]
@@ -279,6 +279,28 @@ impl PrfItem {
      file_data: Some(tmpl::ITEM_SCRIPT.into()),
    })
  }
+
+  /// get the file data
+  pub fn read_file(&self) -> Result<String> {
+    if self.file.is_none() {
+      bail!("could not find the file");
+    }
+
+    let file = self.file.clone().unwrap();
+    let path = dirs::app_profiles_dir().join(file);
+    fs::read_to_string(path).context("failed to read the file")
+  }
+
+  /// save the file data
+  pub fn save_file(&self, data: String) -> Result<()> {
+    if self.file.is_none() {
+      bail!("could not find the file");
+    }
+
+    let file = self.file.clone().unwrap();
+    let path = dirs::app_profiles_dir().join(file);
+    fs::write(path, data.as_bytes()).context("failed to save the file")
+  }
 }

 ///
@@ -553,32 +575,7 @@ impl Profiles {
          bail!("failed to read the file \"{}\"", file_path.display());
        }

-        let mut new_config = Mapping::new();
-        let def_config = config::read_yaml::<Mapping>(file_path.clone());
-
-        // Only the following fields are allowed:
-        // proxies/proxy-providers/proxy-groups/rule-providers/rules
-        let valid_keys = vec![
-          "proxies",
-          "proxy-providers",
-          "proxy-groups",
-          "rule-providers",
-          "rules",
-        ];
-
-        for (key, value) in def_config.into_iter() {
-          key.as_str().map(|key_str| {
-            // change to lowercase
-            let mut key_str = String::from(key_str);
-            key_str.make_ascii_lowercase();
-
-            if valid_keys.contains(&&*key_str) {
-              new_config.insert(Value::String(key_str), value);
-            }
-          });
-        }
-
-        return Ok(new_config);
+        return Ok(config::read_yaml::<Mapping>(file_path.clone()));
      }
    }

@@ -612,11 +609,11 @@ impl Profiles {

 #[derive(Default, Debug, Clone, Serialize, Deserialize)]
 pub struct PrfEnhanced {
-  current: Mapping,
+  pub current: Mapping,

-  chain: Vec<PrfData>,
+  pub chain: Vec<PrfData>,

-  callback: String,
+  pub callback: String,
 }

 #[derive(Default, Debug, Clone, Serialize, Deserialize)]
--- a/src-tauri/src/core/verge.rs
+++ b/src-tauri/src/core/verge.rs
@@ -31,6 +31,9 @@ pub struct VergeConfig {
  /// can the app auto startup
  pub enable_auto_launch: Option<bool>,

+  /// not show the window on launch
+  pub enable_silent_start: Option<bool>,
+
  /// set system proxy
  pub enable_system_proxy: Option<bool>,

@@ -42,6 +45,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 {
@@ -197,6 +219,12 @@ impl Verge {
    if patch.traffic_graph.is_some() {
      self.config.traffic_graph = patch.traffic_graph;
    }
+    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() {
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -118,7 +118,9 @@ fn main() -> std::io::Result<()> {
      cmds::get_profiles,
      cmds::sync_profiles,
      cmds::enhance_profiles,
-      cmds::change_profile_chain
+      cmds::change_profile_chain,
+      cmds::read_profile_file,
+      cmds::save_profile_file
    ]);

  #[cfg(target_os = "macos")]
@@ -142,11 +144,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, .. } => {
-        let app_handle = app_handle.clone();
-        api.prevent_close();
-        app_handle.get_window(&label).unwrap().hide().unwrap();
-      }
+      tauri::RunEvent::WindowEvent { label, event, .. } => match event {
+        tauri::WindowEvent::CloseRequested { api, .. } => {
+          let app_handle = app_handle.clone();
+          api.prevent_close();
+          app_handle.get_window(&label).unwrap().hide().unwrap();
+        }
+        _ => {}
+      },
      tauri::RunEvent::ExitRequested { .. } => {
        resolve::resolve_reset(app_handle);
        api::process::kill_children();
--- a/src-tauri/src/utils/dirs.rs
+++ b/src-tauri/src/utils/dirs.rs
@@ -53,5 +53,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);
 }
--- a/src-tauri/src/utils/resolve.rs
+++ b/src-tauri/src/utils/resolve.rs
@@ -4,8 +4,6 @@ use tauri::{App, AppHandle, Manager};

 /// handle something when start app
 pub fn resolve_setup(app: &App) {
-  resolve_window(app);
-
  // setup a simple http server for singleton
  server::embed_server(&app.handle());

@@ -26,17 +24,10 @@ pub fn resolve_setup(app: &App) {
  *profiles = Profiles::read_file();

  clash.set_window(app.get_window("main"));
-  log_if_err!(clash.activate(&profiles, true));
+  log_if_err!(clash.activate(&profiles));
+  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());

@@ -46,6 +37,8 @@ pub fn resolve_setup(app: &App) {
      .get_item("system_proxy")
      .set_selected(enable));
  });
+
+  resolve_window(app, verge.config.enable_silent_start.clone());
 }

 /// reset system proxy
@@ -57,9 +50,16 @@ pub fn resolve_reset(app_handle: &AppHandle) {
 }

 /// customize the window theme
-fn resolve_window(app: &App) {
+fn resolve_window(app: &App, hide: Option<bool>) {
  let window = app.get_window("main").unwrap();

+  // silent start
+  hide.map(|hide| {
+    if hide {
+      window.hide().unwrap();
+    }
+  });
+
  #[cfg(target_os = "windows")]
  {
    use window_shadows::set_shadow;
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "package": {
    "productName": "Clash Verge",
-    "version": "0.0.24"
+    "version": "0.0.27"
  },
  "build": {
    "distDir": "../dist",
@@ -64,6 +64,9 @@
      },
      "window": {
        "all": true
+      },
+      "process": {
+        "all": true
      }
    },
    "windows": [
@@ -80,7 +83,7 @@
      }
    ],
    "security": {
-      "csp": "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';"
    }
  }
 }
--- a/src/assets/styles/layout.scss
+++ b/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 {
@@ -80,8 +83,12 @@
  }
 }

-.windows.layout {
-  .layout__right .the-content {
-    top: 30px;
+.linux,
+.windows,
+.unknown {
+  &.layout {
+    .layout__right .the-content {
+      top: 30px;
+    }
  }
 }
--- a/src/components/connection/connection-item.tsx
+++ b/src/components/connection/connection-item.tsx
@@ -1,11 +1,11 @@
 import dayjs from "dayjs";
 import { useLockFn } from "ahooks";
-import { styled, Box, ListItem, IconButton, ListItemText } from "@mui/material";
+import { styled, ListItem, IconButton, ListItemText } from "@mui/material";
 import { CloseRounded } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { deleteConnection } from "../../services/api";

-const Tag = styled(Box)(({ theme }) => ({
+const Tag = styled("span")(({ theme }) => ({
  display: "inline-block",
  fontSize: "12px",
  padding: "0 4px",
@@ -37,16 +37,19 @@ const ConnectionItem = (props: Props) => {
      <ListItemText
        primary={value.metadata.host || value.metadata.destinationIP}
        secondary={
-          <Box>
+          <>
            <Tag sx={{ textTransform: "uppercase", color: "success" }}>
              {value.metadata.network}
            </Tag>
+
            <Tag>{value.metadata.type}</Tag>
+
            {value.chains.length > 0 && (
              <Tag>{value.chains[value.chains.length - 1]}</Tag>
            )}
+
            <Tag>{dayjs(value.start).fromNow()}</Tag>
-          </Box>
+          </>
        }
      />
    </ListItem>
--- a/src/components/layout/update-dialog.tsx
+++ b/src/components/layout/update-dialog.tsx
@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import snarkdown from "snarkdown";
-import { useState, useMemo } from "react";
+import { useMemo } from "react";
+import { useRecoilState } from "recoil";
 import {
  Box,
  Button,
@@ -13,6 +14,7 @@ import {
 import { relaunch } from "@tauri-apps/api/process";
 import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
 import { killSidecars, restartSidecar } from "../../services/cmds";
+import { atomUpdateState } from "../../services/states";
 import Notice from "../base/base-notice";

 interface Props {
@@ -24,8 +26,6 @@ const UpdateLog = styled(Box)(() => ({
  "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
 }));

-let uploadingState = false;
-
 const UpdateDialog = (props: Props) => {
  const { open, onClose } = props;
  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
@@ -33,22 +33,22 @@ const UpdateDialog = (props: Props) => {
    revalidateIfStale: false,
    focusThrottleInterval: 36e5, // 1 hour
  });
-  const [uploading, setUploading] = useState(uploadingState);
+
+  const [updateState, setUpdateState] = useRecoilState(atomUpdateState);

  const onUpdate = async () => {
-    setUploading(true);
-    uploadingState = true;
+    if (updateState) return;
+    setUpdateState(true);

    try {
-      await installUpdate();
      await killSidecars();
+      await installUpdate();
      await relaunch();
    } catch (err: any) {
      await restartSidecar();
      Notice.error(err?.message || err.toString());
    } finally {
-      setUploading(false);
-      uploadingState = false;
+      setUpdateState(false);
    }
  };

@@ -73,7 +73,7 @@ const UpdateDialog = (props: Props) => {
        <Button
          autoFocus
          variant="contained"
-          disabled={uploading}
+          disabled={updateState}
          onClick={onUpdate}
        >
          Update
--- a/src/components/layout/use-custom-theme.ts
+++ b/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 };
+}
--- a/src/components/layout/use-traffic-graph.ts
+++ b/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;
--- a/src/components/log/log-item.tsx
+++ b/src/components/log/log-item.tsx
@@ -6,6 +6,8 @@ const Item = styled(Box)(({ theme }) => ({
  margin: "0 12px",
  lineHeight: 1.35,
  borderBottom: `1px solid ${theme.palette.divider}`,
+  fontSize: "0.875rem",
+  userSelect: "text",
  "& .time": {},
  "& .type": {
    display: "inline-block",
--- a/src/components/profile/enhanced.tsx
+++ b/src/components/profile/enhanced.tsx
@@ -0,0 +1,120 @@
+import useSWR from "swr";
+import { useLockFn } from "ahooks";
+import { Box, Grid, IconButton, Stack } from "@mui/material";
+import { RestartAltRounded } from "@mui/icons-material";
+import {
+  getProfiles,
+  deleteProfile,
+  enhanceProfiles,
+  changeProfileChain,
+} from "../../services/cmds";
+import { CmdType } from "../../services/types";
+import Notice from "../base/base-notice";
+import ProfileMore from "./profile-more";
+
+interface Props {
+  items: CmdType.ProfileItem[];
+  chain: string[];
+}
+
+const EnhancedMode = (props: Props) => {
+  const { items, chain } = props;
+
+  const { mutate } = useSWR("getProfiles", getProfiles);
+
+  // 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);
+  });
+
+  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">
+          <MenuRounded />
+        </IconButton> */}
+      </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;
--- a/src/components/profile/file-editor.tsx
+++ b/src/components/profile/file-editor.tsx
@@ -0,0 +1,98 @@
+import useSWR from "swr";
+import { useEffect, useRef } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import {
+  getVergeConfig,
+  readProfileFile,
+  saveProfileFile,
+} from "../../services/cmds";
+import Notice from "../base/base-notice";
+
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
+import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
+import "monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+
+interface Props {
+  uid: string;
+  open: boolean;
+  mode: "yaml" | "javascript";
+  onClose: () => void;
+  onChange?: () => void;
+}
+
+const FileEditor = (props: Props) => {
+  const { uid, open, mode, onClose, onChange } = props;
+
+  const { t } = useTranslation();
+  const editorRef = useRef<any>();
+  const instanceRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_mode } = vergeConfig ?? {};
+
+  useEffect(() => {
+    if (!open) return;
+
+    readProfileFile(uid).then((data) => {
+      const dom = editorRef.current;
+
+      if (!dom) return;
+      if (instanceRef.current) instanceRef.current.dispose();
+
+      instanceRef.current = editor.create(editorRef.current, {
+        value: data,
+        language: mode,
+        theme: theme_mode === "light" ? "vs" : "vs-dark",
+        minimap: { enabled: false },
+      });
+    });
+
+    return () => {
+      if (instanceRef.current) {
+        instanceRef.current.dispose();
+        instanceRef.current = null;
+      }
+    };
+  }, [open]);
+
+  const onSave = useLockFn(async () => {
+    const value = instanceRef.current?.getValue();
+
+    if (value == null) return;
+
+    try {
+      await saveProfileFile(uid, value);
+      onChange?.();
+      onClose();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t("Edit File")}</DialogTitle>
+
+      <DialogContent sx={{ width: 520, pb: 1 }}>
+        <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>{t("Cancel")}</Button>
+        <Button onClick={onSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default FileEditor;
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -1,7 +1,8 @@
 import dayjs from "dayjs";
+import { useState } from "react";
 import { useLockFn } from "ahooks";
 import { useSWRConfig } from "swr";
-import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import {
  alpha,
@@ -16,9 +17,12 @@ import {
 } from "@mui/material";
 import { RefreshRounded } from "@mui/icons-material";
 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";

 const Wrapper = styled(Box)(({ theme }) => ({
@@ -37,8 +41,7 @@ const round = keyframes`
  to { transform: rotate(360deg); }
 `;

-// save the state of each item loading
-const loadingCache: Record<string, boolean> = {};
+const OS = getSystem();

 interface Props {
  selected: boolean;
@@ -51,11 +54,11 @@ const ProfileItem = (props: Props) => {

  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
-  const [loading, setLoading] = useState(loadingCache[itemData.uid] ?? false);
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const [position, setPosition] = useState({ left: 0, top: 0 });
+  const [loadingCache, setLoadingCache] = useRecoilState(atomLoadingCache);

-  const { name = "Profile", extra, updated = 0 } = itemData;
+  const { uid, name = "Profile", extra, updated = 0 } = itemData;
  const { upload = 0, download = 0, total = 0 } = extra ?? {};
  const from = parseUrl(itemData.url);
  const expire = parseExpire(extra?.expire);
@@ -68,23 +71,19 @@ const ProfileItem = (props: Props) => {
  const hasUrl = !!itemData.url;
  const hasExtra = !!extra; // only subscription url has extra info

-  useEffect(() => {
-    loadingCache[itemData.uid] = loading;
-  }, [itemData, loading]);
+  const loading = loadingCache[itemData.uid] ?? false;

  const [editOpen, setEditOpen] = useState(false);
-  const onEdit = () => {
+  const [fileOpen, setFileOpen] = useState(false);
+
+  const onEditInfo = () => {
    setAnchorEl(null);
    setEditOpen(true);
  };

-  const onView = async () => {
+  const onEditFile = () => {
    setAnchorEl(null);
-    try {
-      await viewProfile(itemData.uid);
-    } catch (err: any) {
-      Notice.error(err?.message || err.toString());
-    }
+    setFileOpen(true);
  };

  const onForceSelect = () => {
@@ -92,19 +91,28 @@ const ProfileItem = (props: Props) => {
    onSelect(true);
  };

-  const onUpdateWrapper = (withProxy: boolean) => async () => {
+  const onOpenFile = useLockFn(async () => {
    setAnchorEl(null);
-    if (loading) return;
-    setLoading(true);
    try {
-      await updateProfile(itemData.uid, { with_proxy: withProxy });
-      setLoading(false);
-      mutate("getProfiles");
+      await viewProfile(itemData.uid);
    } catch (err: any) {
-      setLoading(false);
      Notice.error(err?.message || err.toString());
    }
-  };
+  });
+
+  const onUpdate = useLockFn(async (withProxy: boolean) => {
+    setAnchorEl(null);
+    setLoadingCache((cache) => ({ ...cache, [itemData.uid]: true }));
+
+    try {
+      await updateProfile(itemData.uid, { with_proxy: withProxy });
+      mutate("getProfiles");
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    } finally {
+      setLoadingCache((cache) => ({ ...cache, [itemData.uid]: false }));
+    }
+  });

  const onDelete = useLockFn(async () => {
    setAnchorEl(null);
@@ -125,16 +133,18 @@ const ProfileItem = (props: Props) => {

  const urlModeMenu = [
    { label: "Select", handler: onForceSelect },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
-    { label: "Update", handler: onUpdateWrapper(false) },
-    { label: "Update(Proxy)", handler: onUpdateWrapper(true) },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
+    { label: "Update", handler: () => onUpdate(false) },
+    { label: "Update(Proxy)", handler: () => onUpdate(true) },
    { label: "Delete", handler: onDelete },
  ];
  const fileModeMenu = [
    { label: "Select", handler: onForceSelect },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
    { label: "Delete", handler: onDelete },
  ];

@@ -199,7 +209,7 @@ const ProfileItem = (props: Props) => {
              disabled={loading}
              onClick={(e) => {
                e.stopPropagation();
-                onUpdateWrapper(false)();
+                onUpdate(false);
              }}
            >
              <RefreshRounded />
@@ -259,6 +269,10 @@ const ProfileItem = (props: Props) => {
        onClose={() => setAnchorEl(null)}
        anchorPosition={position}
        anchorReference="anchorPosition"
+        transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
        onContextMenu={(e) => {
          setAnchorEl(null);
          e.preventDefault();
@@ -282,6 +296,15 @@ const ProfileItem = (props: Props) => {
          onClose={() => setEditOpen(false)}
        />
      )}
+
+      {fileOpen && (
+        <FileEditor
+          uid={uid}
+          open={fileOpen}
+          mode="yaml"
+          onClose={() => setFileOpen(false)}
+        />
+      )}
    </>
  );
 };
--- a/src/components/profile/profile-more.tsx
+++ b/src/components/profile/profile-more.tsx
@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLockFn } from "ahooks";
 import {
  alpha,
  Box,
@@ -12,9 +13,11 @@ import {
 } from "@mui/material";
 import { CmdType } from "../../services/types";
 import { viewProfile } from "../../services/cmds";
-import ProfileEdit from "./profile-edit";
-import Notice from "../base/base-notice";
+import getSystem from "../../utils/get-system";
 import enhance from "../../services/enhance";
+import ProfileEdit from "./profile-edit";
+import FileEditor from "./file-editor";
+import Notice from "../base/base-notice";

 const Wrapper = styled(Box)(({ theme }) => ({
  width: "100%",
@@ -27,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
@@ -43,12 +48,12 @@ const ProfileMore = (props: Props) => {
  const {
    selected,
    itemData,
+    enableNum,
    onEnable,
    onDisable,
    onMoveTop,
    onMoveEnd,
    onDelete,
-    onEnhance,
  } = props;

  const { uid, type } = itemData;
@@ -57,6 +62,7 @@ const ProfileMore = (props: Props) => {
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const [position, setPosition] = useState({ left: 0, top: 0 });
  const [editOpen, setEditOpen] = useState(false);
+  const [fileOpen, setFileOpen] = useState(false);
  const [status, setStatus] = useState(enhance.status(uid));

  // unlisten when unmount
@@ -65,40 +71,48 @@ const ProfileMore = (props: Props) => {
  // error during enhanced mode
  const hasError = selected && status?.status === "error";

-  const onEdit = () => {
+  const onEditInfo = () => {
    setAnchorEl(null);
    setEditOpen(true);
  };

-  const onView = async () => {
+  const onEditFile = () => {
+    setAnchorEl(null);
+    setFileOpen(true);
+  };
+
+  const onOpenFile = useLockFn(async () => {
    setAnchorEl(null);
    try {
      await viewProfile(itemData.uid);
    } catch (err: any) {
      Notice.error(err?.message || err.toString());
    }
-  };
+  });

-  const closeWrapper = (fn: () => void) => () => {
+  const fnWrapper = (fn: () => void) => () => {
    setAnchorEl(null);
    return fn();
  };

+  const showMove = enableNum > 1 && !hasError;
+
  const enableMenu = [
-    { label: "Disable", handler: closeWrapper(onDisable) },
-    { label: "Refresh", handler: closeWrapper(onEnhance) },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
-    { label: "To Top", show: !hasError, handler: closeWrapper(onMoveTop) },
-    { label: "To End", show: !hasError, handler: closeWrapper(onMoveEnd) },
-    { label: "Delete", handler: closeWrapper(onDelete) },
+    { label: "Disable", handler: fnWrapper(onDisable) },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
+    { label: "To Top", show: showMove, handler: fnWrapper(onMoveTop) },
+    { label: "To End", show: showMove, handler: fnWrapper(onMoveEnd) },
+    { label: "Delete", handler: fnWrapper(onDelete) },
  ];

  const disableMenu = [
-    { label: "Enable", handler: closeWrapper(onEnable) },
-    { label: "Edit", handler: onEdit },
-    { label: "File", handler: onView },
-    { label: "Delete", handler: closeWrapper(onDelete) },
+    { label: "Enable", handler: fnWrapper(onEnable) },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
+    { label: "Delete", handler: fnWrapper(onDelete) },
  ];

  const boxStyle = {
@@ -208,6 +222,10 @@ const ProfileMore = (props: Props) => {
        onClose={() => setAnchorEl(null)}
        anchorPosition={position}
        anchorReference="anchorPosition"
+        transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
        onContextMenu={(e) => {
          setAnchorEl(null);
          e.preventDefault();
@@ -233,6 +251,15 @@ const ProfileMore = (props: Props) => {
          onClose={() => setEditOpen(false)}
        />
      )}
+
+      {fileOpen && (
+        <FileEditor
+          uid={uid}
+          open={fileOpen}
+          mode={type === "merge" ? "yaml" : "javascript"}
+          onClose={() => setFileOpen(false)}
+        />
+      )}
    </>
  );
 };
--- a/src/components/proxy/proxy-global.tsx
+++ b/src/components/proxy/proxy-global.tsx
@@ -1,5 +1,5 @@
+import useSWR, { useSWRConfig } from "swr";
 import { useEffect, useRef, useState } from "react";
-import { useSWRConfig } from "swr";
 import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
 import { Box, IconButton, TextField } from "@mui/material";
@@ -13,6 +13,7 @@ import {
 } 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 useFilterProxy from "./use-filter-proxy";
 import ProxyItem from "./proxy-item";
@@ -23,6 +24,7 @@ interface Props {
  proxies: ApiType.ProxyItem[];
 }

+// this component will be used for DIRECT/GLOBAL
 const ProxyGlobal = (props: Props) => {
  const { groupName, curProxy, proxies } = props;

@@ -35,10 +37,27 @@ const ProxyGlobal = (props: Props) => {
  const virtuosoRef = useRef<any>();
  const filterProxies = useFilterProxy(proxies, groupName, filterText);

+  const { data: profiles } = useSWR("getProfiles", getProfiles);
+
  const onChangeProxy = useLockFn(async (name: string) => {
-    await updateProxy("GLOBAL", name);
-    mutate("getProxies");
+    await updateProxy(groupName, name);
    setNow(name);
+
+    if (groupName === "DIRECT") return;
+
+    // update global selected
+    const profile = profiles?.items?.find((p) => p.uid === profiles.current);
+    if (!profile) return;
+    if (!profile.selected) profile.selected = [];
+
+    const index = profile.selected.findIndex((item) => item.name === groupName);
+    if (index < 0) {
+      profile.selected.unshift({ name: groupName, now: name });
+    } else {
+      profile.selected[index] = { name: groupName, now: name };
+    }
+
+    await patchProfile(profiles!.current!, { selected: profile.selected });
  });

  const onLocation = (smooth = true) => {
@@ -72,8 +91,24 @@ const ProxyGlobal = (props: Props) => {

  useEffect(() => {
    if (groupName === "DIRECT") setNow("DIRECT");
-    if (groupName === "GLOBAL") setNow(curProxy || "DIRECT");
-  }, [groupName, curProxy]);
+    else if (groupName === "GLOBAL") {
+      if (profiles) {
+        const current = profiles.current;
+        const profile = profiles.items?.find((p) => p.uid === current);
+
+        profile?.selected?.forEach((item) => {
+          if (item.name === "GLOBAL") {
+            if (item.now && item.now !== curProxy) {
+              updateProxy("GLOBAL", item.now).then(() => setNow(item!.now!));
+              mutate("getProxies");
+            }
+          }
+        });
+      }
+
+      setNow(curProxy || "DIRECT");
+    }
+  }, [groupName, curProxy, profiles]);

  return (
    <>
@@ -94,13 +129,13 @@ const ProxyGlobal = (props: Props) => {
          <MyLocationRounded />
        </IconButton>

-        <IconButton size="small" title="check" onClick={onCheckAll}>
+        <IconButton size="small" title="delay check" onClick={onCheckAll}>
          <NetworkCheckRounded />
        </IconButton>

        <IconButton
          size="small"
-          title="check"
+          title="proxy detail"
          onClick={() => setShowType(!showType)}
        >
          {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
@@ -108,7 +143,7 @@ const ProxyGlobal = (props: Props) => {

        <IconButton
          size="small"
-          title="check"
+          title="filter"
          onClick={() => setShowFilter(!showFilter)}
        >
          {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
--- a/src/components/proxy/proxy-group.tsx
+++ b/src/components/proxy/proxy-group.tsx
@@ -154,13 +154,13 @@ const ProxyGroup = ({ group }: Props) => {
            <MyLocationRounded />
          </IconButton>

-          <IconButton size="small" title="check" onClick={onCheckAll}>
+          <IconButton size="small" title="delay check" onClick={onCheckAll}>
            <NetworkCheckRounded />
          </IconButton>

          <IconButton
            size="small"
-            title="check"
+            title="proxy detail"
            onClick={() => setShowType(!showType)}
          >
            {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
@@ -168,7 +168,7 @@ const ProxyGroup = ({ group }: Props) => {

          <IconButton
            size="small"
-            title="check"
+            title="filter"
            onClick={() => setShowFilter(!showFilter)}
          >
            {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
@@ -176,7 +176,6 @@ const ProxyGroup = ({ group }: Props) => {

          {showFilter && (
            <TextField
-              autoFocus
              hiddenLabel
              value={filterText}
              size="small"
--- a/src/components/setting/setting-system.tsx
+++ b/src/components/setting/setting-system.tsx
@@ -19,6 +19,7 @@ const SettingSystem = ({ onError }: Props) => {
  const {
    enable_tun_mode,
    enable_auto_launch,
+    enable_silent_start,
    enable_system_proxy,
    system_proxy_bypass,
    enable_proxy_guard,
@@ -59,6 +60,20 @@ const SettingSystem = ({ onError }: Props) => {
        </GuardState>
      </SettingItem>

+      <SettingItem>
+        <ListItemText primary={t("Silent Start")} />
+        <GuardState
+          value={enable_silent_start ?? false}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_silent_start: e })}
+          onGuard={(e) => patchVergeConfig({ enable_silent_start: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
      <SettingItem>
        <ListItemText
          primary={
--- a/src/components/setting/setting-theme.tsx
+++ b/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;
--- a/src/components/setting/setting-verge.tsx
+++ b/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>
  );
 };
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -19,8 +19,9 @@
  "New": "New",
  "Close All": "Close All",
  "Select": "Select",
-  "Edit": "Edit",
-  "File": "File",
+  "Edit Info": "Edit Info",
+  "Edit File": "Edit File",
+  "Open File": "Open File",
  "Update": "Update",
  "Update(Proxy)": "Update(Proxy)",
  "Delete": "Delete",
@@ -41,14 +42,19 @@
  "Clash core": "Clash core",
  "Tun Mode": "Tun Mode",
  "Auto Launch": "Auto Launch",
+  "Silent Start": "Silent Start",
  "System Proxy": "System Proxy",
  "Proxy Guard": "Proxy Guard",
  "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",
  "Open Logs Dir": "Open Logs Dir",
-  "Version": "Version"
+  "Version": "Version",
+
+  "Save": "Save",
+  "Cancel": "Cancel"
 }
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -19,8 +19,9 @@
  "New": "新建",
  "Close All": "关闭全部",
  "Select": "使用",
-  "Edit": "编辑信息",
-  "File": "打开文件",
+  "Edit Info": "编辑信息",
+  "Edit File": "编辑文件",
+  "Open File": "打开文件",
  "Update": "更新",
  "Update(Proxy)": "更新(代理)",
  "Delete": "删除",
@@ -41,14 +42,19 @@
  "Clash core": "Clash 内核",
  "Tun Mode": "Tun 模式",
  "Auto Launch": "开机自启",
+  "Silent Start": "静默启动",
  "System Proxy": "系统代理",
  "Proxy Guard": "系统代理守卫",
  "Proxy Bypass": "Proxy Bypass",
  "Theme Mode": "暗夜模式",
  "Theme Blur": "背景模糊",
+  "Theme Setting": "主题设置",
  "Traffic Graph": "流量图显",
  "Language": "语言设置",
  "Open App Dir": "应用目录",
  "Open Logs Dir": "日志目录",
-  "Version": "版本"
+  "Version": "版本",
+
+  "Save": "保存",
+  "Cancel": "取消"
 }
--- a/src/main.tsx
+++ b/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";
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -2,33 +2,36 @@ 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";

 dayjs.extend(relativeTime);

-const isWinOs = /win64|win32/i.test(navigator.userAgent);
+const OS = getSystem();

 const Layout = () => {
  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
-  const { data } = useSWR("getVergeConfig", getVergeConfig);

-  const blur = !!data?.theme_blur;
-  const mode = data?.theme_mode ?? "light";
+  const { theme } = useCustomTheme();
+
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_blur, language } = vergeConfig || {};

  useEffect(() => {
    window.addEventListener("keydown", (e) => {
@@ -47,37 +50,11 @@ const Layout = () => {
  }, []);

  useEffect(() => {
-    if (data?.language) {
-      dayjs.locale(data.language === "zh" ? "zh-cn" : data.language);
-      i18next.changeLanguage(data.language);
+    if (language) {
+      dayjs.locale(language === "zh" ? "zh-cn" : language);
+      i18next.changeLanguage(language);
    }
-  }, [data?.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();
-    }
-  };
+  }, [language]);

  return (
    <SWRConfig value={{}}>
@@ -85,21 +62,23 @@ const Layout = () => {
        <Paper
          square
          elevation={0}
-          className={`${isWinOs ? "windows " : ""}layout`}
-          onPointerDown={onDragging}
+          className={`${OS} layout`}
+          onPointerDown={(e: any) => {
+            if (e.target?.dataset?.windrag) appWindow.startDragging();
+          }}
          onContextMenu={(e) => {
            // only prevent it on Windows
-            if (isWinOs) e.preventDefault();
+            if (OS === "windows") e.preventDefault();
          }}
          sx={[
-            (theme) => ({
-              bgcolor: alpha(theme.palette.background.paper, blur ? 0.85 : 1),
+            ({ palette }) => ({
+              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>
@@ -118,7 +97,7 @@ const Layout = () => {
          </div>

          <div className="layout__right" data-windrag>
-            {isWinOs && (
+            {OS !== "macos" && (
              <div className="the-bar">
                <LayoutControl />
              </div>
--- a/src/pages/_theme.tsx
+++ b/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`,
+};
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -12,7 +12,7 @@ const ConnectionsPage = () => {
  const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };

  const { t } = useTranslation();
-  const [conn, setConn] = useState<ApiType.Connections>(initConn);
+  const [connData, setConnData] = useState<ApiType.Connections>(initConn);

  useEffect(() => {
    let ws: WebSocket | null = null;
@@ -23,7 +23,35 @@ const ConnectionsPage = () => {

      ws.addEventListener("message", (event) => {
        const data = JSON.parse(event.data) as ApiType.Connections;
-        setConn(data);
+        setConnData((old) => {
+          const oldConn = old.connections;
+          const oldList = oldConn.map((each) => each.id);
+          const maxLen = data.connections.length;
+
+          const connections: typeof oldConn = [];
+
+          // 与前一次连接的顺序尽量保持一致
+          data.connections
+            .filter((each) => {
+              const index = oldList.indexOf(each.id);
+
+              if (index >= 0 && index < maxLen) {
+                connections[index] = each;
+                return false;
+              }
+              return true;
+            })
+            .forEach((each) => {
+              for (let i = 0; i < maxLen; ++i) {
+                if (!connections[i]) {
+                  connections[i] = each;
+                  return;
+                }
+              }
+            });
+
+          return { ...data, connections };
+        });
      });
    });

@@ -50,7 +78,7 @@ const ConnectionsPage = () => {
      <Paper sx={{ boxShadow: 2, height: "100%" }}>
        <Virtuoso
          initialTopMostItemIndex={999}
-          data={conn.connections}
+          data={connData.connections}
          itemContent={(index, item) => <ConnectionItem value={item} />}
        />
      </Paper>
--- a/src/pages/profiles.tsx
+++ b/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();
@@ -29,6 +26,7 @@ const ProfilePage = () => {

  const { data: profiles = {} } = useSWR("getProfiles", getProfiles);

+  // distinguish type
  const { regularItems, enhanceItems } = useMemo(() => {
    const items = profiles.items || [];
    const chain = profiles.chain || [];
@@ -48,6 +46,7 @@ const ProfilePage = () => {
    return { regularItems, enhanceItems };
  }, [profiles]);

+  // sync selected proxy
  useEffect(() => {
    if (profiles.current == null) return;

@@ -65,9 +64,10 @@ const ProfilePage = () => {
        selected.map((each) => [each.name!, each.now!])
      );

-      // todo: enhance error handle
      let hasChange = false;
-      proxiesData.groups.forEach((group) => {
+
+      const { global, groups } = proxiesData;
+      [global, ...groups].forEach((group) => {
        const { name, now } = group;

        if (!now || selectedMap[name] === now) return;
@@ -78,15 +78,14 @@ const ProfilePage = () => {
          updateProxy(name, selectedMap[name]);
        }
      });
+
      // update profile selected list
      profile.selected = Object.entries(selectedMap).map(([name, now]) => ({
        name,
        now,
      }));

-      patchProfile(current!, { selected: profile.selected }).catch(
-        console.error
-      );
+      patchProfile(current!, { selected: profile.selected });
      // update proxies cache
      if (hasChange) mutate("getProxies", getProxies());
    }, 100);
@@ -128,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 }}>
@@ -214,22 +165,9 @@ const ProfilePage = () => {
        ))}
      </Grid>

-      <Grid container spacing={2} sx={{ mt: 3 }}>
-        {enhanceItems.map((item) => (
-          <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>
+      {enhanceItems.length && (
+        <EnhancedMode items={enhanceItems} chain={profiles.chain || []} />
+      )}

      <ProfileNew open={dialogOpen} onClose={() => setDialogOpen(false)} />
    </BasePage>
--- a/src/pages/proxies.tsx
+++ b/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
--- a/src/services/api.ts
+++ b/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();
--- a/src/services/cmds.ts
+++ b/src/services/cmds.ts
@@ -25,6 +25,14 @@ export async function viewProfile(index: string) {
  return invoke<void>("view_profile", { index });
 }

+export async function readProfileFile(index: string) {
+  return invoke<string>("read_profile_file", { index });
+}
+
+export async function saveProfileFile(index: string, fileData: string) {
+  return invoke<void>("save_profile_file", { index, fileData });
+}
+
 export async function importProfile(url: string) {
  return invoke<void>("import_profile", {
    url,
--- a/src/services/enhance.ts
+++ b/src/services/enhance.ts
@@ -1,48 +1,80 @@
 import { emit, listen } from "@tauri-apps/api/event";
 import { CmdType } from "./types";
+import ignoreCase from "../utils/ignore-case";
+
+const DEFAULT_FIELDS = [
+  "rules",
+  "proxies",
+  "proxy-groups",
+  "proxy-providers",
+  "rule-providers",
+] as const;
+
+const USE_FLAG_FIELDS = [
+  "tun",
+  "dns",
+  "hosts",
+  "script",
+  "profile",
+  "payload",
+  "interface-name",
+  "routing-mark",
+] as const;

 /**
 * process the merge mode
 */
-function toMerge(
-  merge: CmdType.ProfileMerge,
-  data: CmdType.ProfileData
-): CmdType.ProfileData {
-  if (!merge) return data;
+function toMerge(merge: CmdType.ProfileMerge, data: CmdType.ProfileData) {
+  if (!merge) return { data, use: [] };

-  const newData = { ...data };
+  const {
+    use,
+    "prepend-rules": preRules,
+    "append-rules": postRules,
+    "prepend-proxies": preProxies,
+    "append-proxies": postProxies,
+    "prepend-proxy-groups": preProxyGroups,
+    "append-proxy-groups": postProxyGroups,
+    ...mergeConfig
+  } = merge;
+
+  [...DEFAULT_FIELDS, ...USE_FLAG_FIELDS].forEach((key) => {
+    // the value should not be null
+    if (mergeConfig[key] != null) {
+      data[key] = mergeConfig[key];
+    }
+  });
+
+  // init
+  if (!data.rules) data.rules = [];
+  if (!data.proxies) data.proxies = [];
+  if (!data["proxy-groups"]) data["proxy-groups"] = [];

  // rules
-  if (Array.isArray(merge["prepend-rules"])) {
-    if (!newData.rules) newData.rules = [];
-    newData.rules.unshift(...merge["prepend-rules"]);
+  if (Array.isArray(preRules)) {
+    data.rules.unshift(...preRules);
  }
-  if (Array.isArray(merge["append-rules"])) {
-    if (!newData.rules) newData.rules = [];
-    newData.rules.push(...merge["append-rules"]);
+  if (Array.isArray(postRules)) {
+    data.rules.push(...postRules);
  }

  // proxies
-  if (Array.isArray(merge["prepend-proxies"])) {
-    if (!newData.proxies) newData.proxies = [];
-    newData.proxies.unshift(...merge["prepend-proxies"]);
+  if (Array.isArray(preProxies)) {
+    data.proxies.unshift(...preProxies);
  }
-  if (Array.isArray(merge["append-proxies"])) {
-    if (!newData.proxies) newData.proxies = [];
-    newData.proxies.push(...merge["append-proxies"]);
+  if (Array.isArray(postProxies)) {
+    data.proxies.push(...postProxies);
  }

  // proxy-groups
-  if (Array.isArray(merge["prepend-proxy-groups"])) {
-    if (!newData["proxy-groups"]) newData["proxy-groups"] = [];
-    newData["proxy-groups"].unshift(...merge["prepend-proxy-groups"]);
+  if (Array.isArray(preProxyGroups)) {
+    data["proxy-groups"].unshift(...preProxyGroups);
  }
-  if (Array.isArray(merge["append-proxy-groups"])) {
-    if (!newData["proxy-groups"]) newData["proxy-groups"] = [];
-    newData["proxy-groups"].push(...merge["append-proxy-groups"]);
+  if (Array.isArray(postProxyGroups)) {
+    data["proxy-groups"].push(...postProxyGroups);
  }

-  return newData;
+  return { data, use: Array.isArray(use) ? use : [] };
 }

 /**
@@ -99,70 +131,75 @@ class Enhance {

    listen("script-handler", async (event) => {
      const payload = event.payload as CmdType.EnhancedPayload;
-      let pdata = payload.current || {};

-      let hasScript = false;
+      const result = await this.runner(payload).catch((err: any) => ({
+        data: null,
+        status: "error",
+        error: err.message,
+      }));

-      for (const each of payload.chain) {
-        const { uid, type = "" } = each.item;
-
-        try {
-          // process script
-          if (type === "script") {
-            // support async main function
-            pdata = await toScript(each.script!, { ...pdata });
-            hasScript = true;
-          }
-
-          // process merge
-          else if (type === "merge") {
-            pdata = toMerge(each.merge!, { ...pdata });
-          }
-
-          // invalid type
-          else {
-            throw new Error(`invalid enhanced profile type "${type}"`);
-          }
-
-          this.exec(uid, { status: "ok" });
-        } catch (err: any) {
-          this.exec(uid, {
-            status: "error",
-            message: err.message || err.toString(),
-          });
-
-          console.error(err);
-        }
-      }
-
-      // If script is never used
-      // filter other fields
-      if (!hasScript) {
-        const validKeys = [
-          "proxies",
-          "proxy-providers",
-          "proxy-groups",
-          "rule-providers",
-          "rules",
-        ];
-
-        // to lowercase
-        const newData: any = {};
-        Object.keys(pdata).forEach((key) => {
-          const newKey = key.toLowerCase();
-          if (validKeys.includes(newKey)) {
-            newData[newKey] = (pdata as any)[key];
-          }
-        });
-
-        pdata = newData;
-      }
-
-      const result = { data: pdata, status: "ok" };
      emit(payload.callback, JSON.stringify(result)).catch(console.error);
    });
  }

+  // enhanced mode runner
+  private async runner(payload: CmdType.EnhancedPayload) {
+    const chain = payload.chain || [];
+
+    if (!Array.isArray(chain)) throw new Error("unhandle error");
+
+    let pdata = payload.current || {};
+    let useList = [] as string[];
+
+    for (const each of chain) {
+      const { uid, type = "" } = each.item;
+
+      try {
+        // process script
+        if (type === "script") {
+          // support async main function
+          pdata = await toScript(each.script!, ignoreCase(pdata));
+        }
+
+        // process merge
+        else if (type === "merge") {
+          const temp = toMerge(each.merge!, ignoreCase(pdata));
+          pdata = temp.data;
+          useList = useList.concat(temp.use || []);
+        }
+
+        // invalid type
+        else {
+          throw new Error(`invalid enhanced profile type "${type}"`);
+        }
+
+        this.exec(uid, { status: "ok" });
+      } catch (err: any) {
+        console.error(err);
+
+        this.exec(uid, {
+          status: "error",
+          message: err.message || err.toString(),
+        });
+      }
+    }
+
+    pdata = ignoreCase(pdata);
+
+    // filter the data
+    const filterData: typeof pdata = {};
+    Object.keys(pdata).forEach((key: any) => {
+      if (
+        DEFAULT_FIELDS.includes(key) ||
+        (USE_FLAG_FIELDS.includes(key) && useList.includes(key))
+      ) {
+        filterData[key] = pdata[key];
+      }
+    });
+
+    return { data: filterData, status: "ok" };
+  }
+
  // exec the listener
  private exec(uid: string, status: EStatus) {
    this.resultMap.set(uid, status);
--- a/src/services/states.ts
+++ b/src/services/states.ts
@@ -10,3 +10,15 @@ export const atomLogData = atom<ApiType.LogItem[]>({
  key: "atomLogData",
  default: [],
 });
+
+// save the state of each profile item loading
+export const atomLoadingCache = atom<Record<string, boolean>>({
+  key: "atomLoadingCache",
+  default: {},
+});
+
+// save update state
+export const atomUpdateState = atom<boolean>({
+  key: "atomUpdateState",
+  default: false,
+});
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -126,12 +126,51 @@ export namespace CmdType {
    traffic_graph?: boolean;
    enable_tun_mode?: boolean;
    enable_auto_launch?: boolean;
+    enable_silent_start?: boolean;
    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;
+    };
  }

-  export type ProfileMerge = Record<string, any>;
+  type ClashConfigValue = any;
+
+  export interface ProfileMerge {
+    // clash config fields (default supports)
+    rules?: ClashConfigValue;
+    proxies?: ClashConfigValue;
+    "proxy-groups"?: ClashConfigValue;
+    "proxy-providers"?: ClashConfigValue;
+    "rule-providers"?: ClashConfigValue;
+    // clash config fields (use flag)
+    tun?: ClashConfigValue;
+    dns?: ClashConfigValue;
+    hosts?: ClashConfigValue;
+    script?: ClashConfigValue;
+    profile?: ClashConfigValue;
+    payload?: ClashConfigValue;
+    "interface-name"?: ClashConfigValue;
+    "routing-mark"?: ClashConfigValue;
+    // functional fields
+    use?: string[];
+    "prepend-rules"?: any[];
+    "append-rules"?: any[];
+    "prepend-proxies"?: any[];
+    "append-proxies"?: any[];
+    "prepend-proxy-groups"?: any[];
+    "append-proxy-groups"?: any[];
+  }

  // partial of the clash config
  export type ProfileData = Partial<{
@@ -140,6 +179,8 @@ export namespace CmdType {
    "proxy-groups": any[];
    "proxy-providers": any[];
    "rule-providers": any[];
+
+    [k: string]: any;
  }>;

  export interface ChainItem {
--- a/src/utils/get-system.ts
+++ b/src/utils/get-system.ts
@@ -0,0 +1,13 @@
+// get the system os
+// according to UA
+export default function getSystem() {
+  const ua = navigator.userAgent;
+
+  if (ua.includes("Mac OS X")) return "macos";
+
+  if (/win64|win32/i.test(ua)) return "windows";
+
+  if (/linux/i.test(ua)) return "linux";
+
+  return "unknown";
+}
--- a/src/utils/ignore-case.ts
+++ b/src/utils/ignore-case.ts
@@ -0,0 +1,14 @@
+// Deep copy and change all keys to lowercase
+type TData = Record<string, any>;
+
+export default function ignoreCase(data: TData): TData {
+  if (!data) return data;
+
+  const newData = {} as TData;
+
+  Object.entries(data).forEach(([key, value]) => {
+    newData[key.toLowerCase()] = JSON.parse(JSON.stringify(value));
+  });
+
+  return newData;
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +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()],
+  plugins: [svgr(), react(), monaco()],
  build: {
    outDir: "../dist",
    emptyOutDir: true,
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
GyDi	e80be8e7b6	v0.0.27	2022-04-06 01:21:33 +08:00
GyDi	fe0ad0f5cb	chore: update log	2022-04-06 01:19:13 +08:00
GyDi	cb8e162f4e	refactor: update profile menu	2022-04-06 01:13:06 +08:00
GyDi	ae8c30fe57	chore: add updater script	2022-04-05 23:24:52 +08:00
GyDi	ab82db9e22	chore: updater json supports arch field	2022-04-05 23:19:54 +08:00
GyDi	cb9d3098de	chore: add ci	2022-04-05 20:21:53 +08:00
GyDi	c927419c99	refactor: enhanced mode ui component	2022-04-03 01:41:48 +08:00
GyDi	c009026961	feat: add text color	2022-04-02 17:18:38 +08:00
GyDi	51cf442fa5	fix: i18n add value	2022-04-02 13:49:48 +08:00
GyDi	954e3553ee	fix: proxy page first render	2022-04-02 01:23:31 +08:00
GyDi	cde17385b4	feat: control final tun config	2022-04-01 23:55:44 +08:00
GyDi	5b9e078061	chore: add debug feature	2022-04-01 23:43:35 +08:00
GyDi	0290d9ddfc	feat: support css injection	2022-04-01 02:08:42 +08:00
GyDi	eab671d102	fix: console warning	2022-04-01 01:16:23 +08:00
GyDi	f9a96ff914	feat: support theme setting	2022-03-31 23:38:00 +08:00
GyDi	3ec2b46d28	feat: add text color	2022-03-31 23:34:36 +08:00
GyDi	aec30b89e0	feat: add theme setting	2022-03-31 23:11:50 +08:00
GyDi	309c33e190	refactor: ui theme	2022-03-30 12:36:39 +08:00
GyDi	9c0276f97b	chore: add api	2022-03-30 01:30:22 +08:00
GyDi	0a3402ff43	fix: icon button title	2022-03-30 01:29:25 +08:00
GyDi	bd82308024	chore: update tauri	2022-03-29 23:05:32 +08:00
GyDi	db3b634e62	fix: macOS transition flickers close #47	2022-03-29 01:39:54 +08:00
GyDi	40bcb22977	chore: update deps	2022-03-29 01:33:14 +08:00
GyDi	4bd94092f1	fix: csp image data	2022-03-28 23:17:11 +08:00
GyDi	cac1ce6895	chore: readme	2022-03-28 01:33:58 +08:00
GyDi	5c3696123a	v0.0.26	2022-03-28 01:30:54 +08:00
GyDi	4140fc86ee	chore: update log	2022-03-28 01:18:18 +08:00
GyDi	2ad771e7fd	fix: close dialog after save	2022-03-28 01:09:34 +08:00
GyDi	5a38468144	refactor: optimize enhance mode strategy	2022-03-28 01:07:14 +08:00
GyDi	0a9c81772f	fix: change to deep copy	2022-03-28 00:56:48 +08:00
GyDi	c9649ac501	feat: enhanced mode supports more fields	2022-03-27 20:36:13 +08:00
GyDi	6ea567742b	chore: profile release	2022-03-27 01:38:40 +08:00
GyDi	f31349eaa0	feat: supports edit profile file	2022-03-27 00:58:17 +08:00
GyDi	9d44668d5f	feat: supports silent start	2022-03-26 18:56:16 +08:00
GyDi	a12f58c1c7	feat: use crate open	2022-03-23 23:00:14 +08:00
GyDi	b5283eaaed	fix: window style close #45	2022-03-23 21:43:13 +08:00
GyDi	4b6189af5f	feat: enhance connections display order	2022-03-23 14:02:08 +08:00
GyDi	5d0ffbe453	chore: adjust style	2022-03-23 13:58:57 +08:00
GyDi	502706931e	fix: manage global proxy correctly	2022-03-23 12:49:34 +08:00
GyDi	57c411288f	fix: tauri csp	2022-03-23 01:47:35 +08:00
GyDi	b09b7b11a1	feat: save global selected	2022-03-22 12:38:59 +08:00
GyDi	1a7b3c7294	v0.0.25	2022-03-22 01:51:06 +08:00
GyDi	4678fc7dde	chore: update log	2022-03-22 01:50:24 +08:00
GyDi	9f492fad49	chore: update clash core	2022-03-22 01:50:15 +08:00
GyDi	bd0a959e18	fix: windows style	2022-03-22 01:36:06 +08:00
GyDi	dd605e2610	fix: update state	2022-03-22 01:27:22 +08:00
inRm3D	9910f6b817	chore: readme (#43 )	2022-03-21 21:55:45 +08:00
GyDi	991897aff4	chore: tauri feature	2022-03-21 11:40:52 +08:00
GyDi	3cde019208	fix: profile item loading state	2022-03-21 11:40:27 +08:00
GyDi	2f6efbed63	chore: tauri allowList	2022-03-20 13:16:50 +08:00