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
91 changed files with 6582 additions and 2903 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,4 +1,4 @@
-name: CI
+name: Release CI

 on: [push]

@@ -10,7 +10,7 @@ jobs:
  release:
    strategy:
      matrix:
-        os: [windows-latest, macos-11]
+        os: [windows-latest, ubuntu-latest, macos-latest]
    runs-on: ${{ matrix.os }}
    if: |
      startsWith(github.repository, 'zzzgydi') &&
@@ -34,6 +34,12 @@ jobs:
        with:
          node-version: 14

+      - name: Install Dependencies (ubuntu only)
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
+
      - name: Get yarn cache dir path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -53,9 +59,9 @@ jobs:
          yarn run check

      - name: Tauri build
-        uses: tauri-apps/tauri-action@v0
+        uses: tauri-apps/tauri-action@0e558392ccadcb49bcc89e7df15a400e8f0c954d
        # enable cache even though failed
-        continue-on-error: true
+        # continue-on-error: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
@@ -63,13 +69,20 @@ jobs:
        with:
          tagName: v__VERSION__
          releaseName: "Clash Verge v__VERSION__"
-          releaseBody: "Clash Verge now supports Windows and macos(intel)."
+          releaseBody: "More new features are now supported."
          releaseDraft: false
          prerelease: true

+      - name: Green zip bundle
+        if: matrix.os == 'windows-latest'
+        run: |
+          yarn run green
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
  release-update:
    needs: release
-    runs-on: macos-11
+    runs-on: macos-latest
    if: |
      startsWith(github.repository, 'zzzgydi') &&
      startsWith(github.ref, 'refs/tags/v')
@@ -91,10 +104,9 @@ jobs:
            ${{ runner.os }}-yarn-

      - name: Yarn install
-        run: yarn
+        run: yarn install

-      - name: Release update.json
-        run: yarn run release
-        continue-on-error: true
+      - 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
@@ -11,19 +11,27 @@ A <a href="https://github.com/Dreamacro/clash">Clash</a> GUI based on <a href="h

 ## Features

-Now it's no different from the others, even fewer. (WIP)
+- Full `clash` config supported, Partial `clash premium` config supported.
+- 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, Linux x86_64 and macOS 11+
+
+Or you can build it yourself. Supports Windows, Linux and macOS 10.15+
+
+Notes: If you could not start the app on Windows, please check that you have [Webview2](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section) installed.

 ## Development

-You should install Rust and Nodejs. Then install tauri cli and packages.
+You should install Rust and Nodejs, see [here](https://tauri.studio/docs/getting-started/prerequisites) for more details. Then install Nodejs packages.

 ```shell
-cargo install tauri-cli --git https://github.com/tauri-apps/tauri
-
 yarn install
 ```

-Then download the clash binary... Or you can download it from [clash premium release](https://github.com/Dreamacro/clash/releases/tag/premium) and rename it according to [tauri config](https://tauri.studio/en/docs/api/config#tauri.bundle.externalBin).
+Then download the clash binary... Or you can download it from [clash premium release](https://github.com/Dreamacro/clash/releases/tag/premium) and rename it according to [tauri config](https://tauri.studio/docs/api/config/#tauri.bundle.externalBin).

 ```shell
 yarn run check
@@ -35,6 +43,12 @@ Then run
 yarn dev
 ```

+Or you can build it
+
+```shell
+yarn build
+```
+
 ## Todos

 > This keng is a little big...
@@ -56,7 +70,7 @@ This is a learning project for Rust practice.

 ## Contributions

-PR welcome!
+Issue and PR welcome!

 ## Acknowledgement

--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -0,0 +1,76 @@
+## 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
+
+- Connections page
+- add wintun.dll (Windows)
+- supports create local profile with selected file (Windows)
+- system tray enable set system proxy
+
+### Bug Fixes
+
+- open dir error
+- auto launch path (Windows)
+- fix some clash config error
+- reduce the impact of the enhanced mode
+
+---
+
+## v0.0.23
+
+### Features
+
+- i18n supports
+- Remote profile User Agent supports
+
+### Bug Fixes
+
+- clash config file case ignore
+- clash `external-controller` only port
--- a/docs/demo1.png
+++ b/docs/demo1.png
--- a/docs/demo2.png
+++ b/docs/demo2.png
--- a/docs/demo3.png
+++ b/docs/demo3.png
--- a/docs/demo4.png
+++ b/docs/demo4.png
--- a/docs/demo5.png
+++ b/docs/demo5.png
--- a/docs/demo6.png
+++ b/docs/demo6.png
--- a/package.json
+++ b/package.json
@@ -1,40 +1,46 @@
 {
  "name": "clash-verge",
-  "version": "0.0.15",
+  "version": "0.0.27",
  "license": "GPL-3.0",
  "scripts": {
-    "dev": "cargo tauri dev",
-    "build": "cargo tauri build",
+    "dev": "tauri dev",
+    "build": "tauri build",
    "tauri": "tauri",
    "web:dev": "vite",
    "web:build": "tsc && vite build",
    "web:serve": "vite preview",
    "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.7.0",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.4.1",
-    "@tauri-apps/api": "^1.0.0-rc.1",
-    "ahooks": "^3.1.9",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@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.7",
+    "dayjs": "^1.11.0",
+    "i18next": "^21.6.14",
+    "monaco-editor": "^0.33.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1",
-    "react-virtuoso": "^2.7.0",
+    "react-i18next": "^11.15.6",
+    "react-router-dom": "^6.2.2",
+    "react-virtuoso": "~2.7.2",
    "recoil": "^0.6.1",
-    "swr": "^1.2.1"
+    "snarkdown": "^2.0.0",
+    "swr": "^1.2.2"
  },
  "devDependencies": {
    "@actions/github": "^5.0.0",
-    "@tauri-apps/cli": "^1.0.0-rc.4",
+    "@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",
@@ -45,7 +51,9 @@
    "pretty-quick": "^3.1.3",
    "sass": "^1.49.7",
    "typescript": "^4.5.5",
-    "vite": "^2.8.0"
+    "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
@@ -6,10 +6,7 @@ import fetch from "node-fetch";
 import { execSync } from "child_process";

 const cwd = process.cwd();
-
-const CLASH_URL_PREFIX =
-  "https://github.com/Dreamacro/clash/releases/download/premium/";
-const CLASH_LATEST_DATE = "2022.01.27";
+const FORCE = process.argv.includes("--force");

 /**
 * get the correct clash release infomation
@@ -17,11 +14,16 @@ const CLASH_LATEST_DATE = "2022.01.27";
 function resolveClash() {
  const { platform, arch } = process;

+  const CLASH_URL_PREFIX =
+    "https://github.com/Dreamacro/clash/releases/download/premium/";
+  const CLASH_LATEST_DATE = "2022.03.21";
+
  // todo
  const map = {
-    "win32-x64": "clash-windows-386",
+    "win32-x64": "clash-windows-amd64",
    "darwin-x64": "clash-darwin-amd64",
    "darwin-arm64": "clash-darwin-arm64",
+    "linux-x64": "clash-linux-amd64",
  };

  const name = map[`${platform}-${arch}`];
@@ -50,8 +52,8 @@ async function resolveSidecar() {
  const sidecarFile = `clash-${host}${ext}`;
  const sidecarPath = path.join(sidecarDir, sidecarFile);

-  if (!(await fs.pathExists(sidecarDir))) await fs.mkdir(sidecarDir);
-  if (await fs.pathExists(sidecarPath)) return;
+  await fs.mkdirp(sidecarDir);
+  if (!FORCE && (await fs.pathExists(sidecarPath))) return;

  // download sidecar
  const binInfo = resolveClash();
@@ -59,7 +61,7 @@ async function resolveSidecar() {
  const tempZip = path.join(tempDir, binInfo.zipfile);
  const tempExe = path.join(tempDir, binInfo.exefile);

-  if (!(await fs.pathExists(tempDir))) await fs.mkdir(tempDir);
+  await fs.mkdirp(tempDir);
  if (!(await fs.pathExists(tempZip))) await downloadFile(binInfo.url, tempZip);

  if (binInfo.zip === "zip") {
@@ -82,13 +84,55 @@ async function resolveSidecar() {
        console.log(`[INFO]: gunzip finished`);
        execSync(`chmod 755 ${sidecarPath}`);
        console.log(`[INFO]: chmod binary finished`);
-      });
+      })
+      .on("error", (error) => console.error(error));
  }

  // delete temp dir
  await fs.remove(tempDir);
 }

+/**
+ * only Windows
+ * get the wintun.dll (not required)
+ */
+async function resolveWintun() {
+  const { platform } = process;
+
+  if (platform !== "win32") return;
+
+  const url = "https://www.wintun.net/builds/wintun-0.14.1.zip";
+
+  const tempDir = path.join(cwd, "pre-dev-temp-1");
+  const tempZip = path.join(tempDir, "wintun.zip");
+
+  const wintunPath = path.join(tempDir, "wintun/bin/amd64/wintun.dll");
+  const targetPath = path.join(cwd, "src-tauri/resources", "wintun.dll");
+
+  if (!FORCE && (await fs.pathExists(targetPath))) return;
+
+  await fs.mkdirp(tempDir);
+
+  if (!(await fs.pathExists(tempZip))) {
+    await downloadFile(url, tempZip);
+  }
+
+  // unzip
+  const zip = new AdmZip(tempZip);
+  zip.extractAllTo(tempDir, true);
+
+  if (!(await fs.pathExists(wintunPath))) {
+    throw new Error(`path not found "${wintunPath}"`);
+  }
+
+  // move wintun.dll to resources
+  await fs.rename(wintunPath, targetPath);
+  // delete temp dir
+  await fs.remove(tempDir);
+
+  console.log(`[INFO]: resolve wintun.dll finished`);
+}
+
 /**
 * get the Country.mmdb (not required)
 */
@@ -96,8 +140,10 @@ async function resolveMmdb() {
  const url =
    "https://github.com/Dreamacro/maxmind-geoip/releases/latest/download/Country.mmdb";

-  const resPath = path.join(cwd, "src-tauri", "resources", "Country.mmdb");
-  if (await fs.pathExists(resPath)) return;
+  const resDir = path.join(cwd, "src-tauri", "resources");
+  const resPath = path.join(resDir, "Country.mmdb");
+  if (!FORCE && (await fs.pathExists(resPath))) return;
+  await fs.mkdirp(resDir);
  await downloadFile(url, resPath);
 }

@@ -118,5 +164,6 @@ async function downloadFile(url, path) {
 }

 /// main
-resolveSidecar();
-resolveMmdb();
+resolveSidecar().catch(console.error);
+resolveWintun().catch(console.error);
+resolveMmdb().catch(console.error);
--- a/scripts/green.mjs
+++ b/scripts/green.mjs
@@ -0,0 +1,56 @@
+import fs from "fs-extra";
+import path from "path";
+import AdmZip from "adm-zip";
+import { createRequire } from "module";
+import { getOctokit, context } from "@actions/github";
+
+/// Script for ci
+/// 打包绿色版/便携版 (only Windows)
+async function resolveGreen() {
+  if (process.platform !== "win32") return;
+
+  const releaseDir = "./src-tauri/target/release";
+
+  if (!(await fs.pathExists(releaseDir))) {
+    throw new Error("could not found the release dir");
+  }
+
+  const zip = new AdmZip();
+
+  zip.addLocalFile(path.join(releaseDir, "Clash Verge.exe"));
+  zip.addLocalFile(path.join(releaseDir, "clash.exe"));
+  zip.addLocalFolder(path.join(releaseDir, "resources"), "resources");
+
+  const require = createRequire(import.meta.url);
+  const packageJson = require("../package.json");
+  const { version } = packageJson;
+
+  const zipFile = `Clash.Verge_${version}_x64_green.zip`;
+  zip.writeZip(zipFile);
+
+  console.log("[INFO]: create green zip successfully");
+
+  // push release assets
+  if (process.env.GITHUB_TOKEN === undefined) {
+    throw new Error("GITHUB_TOKEN is required");
+  }
+
+  const options = { owner: context.repo.owner, repo: context.repo.repo };
+  const github = getOctokit(process.env.GITHUB_TOKEN);
+
+  const { data: release } = await github.rest.repos.getReleaseByTag({
+    ...options,
+    tag: `v${version}`,
+  });
+
+  console.log(release.name);
+
+  await github.rest.repos.uploadReleaseAsset({
+    ...options,
+    release_id: release.id,
+    name: zipFile,
+    data: zip.toBuffer(),
+  });
+}
+
+resolveGreen().catch(console.error);
--- a/scripts/publish.mjs
+++ b/scripts/publish.mjs
@@ -1,9 +1,11 @@
 import fs from "fs-extra";
 import { createRequire } from "module";
 import { execSync } from "child_process";
+import { resolveUpdateLog } from "./updatelog.mjs";

 const require = createRequire(import.meta.url);

+// publish
 async function resolvePublish() {
  const flag = process.argv[2] ?? "patch";
  const packageJson = require("../package.json");
@@ -26,6 +28,10 @@ async function resolvePublish() {
  packageJson.version = nextVersion;
  tauriJson.package.version = nextVersion;

+  // 发布更新前先写更新日志
+  const nextTag = `v${nextVersion}`;
+  await resolveUpdateLog(nextTag);
+
  await fs.writeFile(
    "./package.json",
    JSON.stringify(packageJson, undefined, 2)
--- a/scripts/release.mjs
+++ b/scripts/release.mjs
@@ -1,68 +0,0 @@
-import { createRequire } from "module";
-import { getOctokit, context } from "@actions/github";
-
-const require = createRequire(import.meta.url);
-
-/// generate update.json
-/// upload to update tag's release asset
-async function resolveRelease() {
-  if (process.env.GITHUB_TOKEN === undefined) {
-    throw new Error("GITHUB_TOKEN is required");
-  }
-
-  const packageJson = require("../package.json");
-
-  const { version } = packageJson;
-  const urlPrefix = "https://github.com/zzzgydi/clash-verge/releases/download";
-  const updateData = {
-    name: `v${version}`,
-    notes: `Version ${version} is available now!!!`,
-    pub_date: new Date().toISOString(),
-    platforms: {
-      win64: {
-        signature: "",
-        url: `${urlPrefix}/v${version}/clash-verge_${version}_x64.msi.zip`,
-      },
-      darwin: {
-        signature: "",
-        url: `${urlPrefix}/v${version}/clash-verge.app.tar.gz`,
-      },
-    },
-  };
-
-  console.log(`Generating Version "${version}" update.json`);
-
-  const github = getOctokit(process.env.GITHUB_TOKEN);
-
-  const { data: release } = await github.rest.repos.getReleaseByTag({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    tag: "updater",
-  });
-  const { data: assets } = await github.rest.repos.listReleaseAssets({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    release_id: release.id,
-  });
-
-  for (let asset of assets) {
-    if (asset.name === "update.json") {
-      await github.rest.repos.deleteReleaseAsset({
-        owner: context.repo.owner,
-        repo: context.repo.repo,
-        asset_id: asset.id,
-      });
-      break;
-    }
-  }
-
-  await github.rest.repos.uploadReleaseAsset({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    release_id: release.id,
-    name: "update.json",
-    data: JSON.stringify(updateData, null, 2),
-  });
-}
-
-resolveRelease();
--- a/scripts/updatelog.mjs
+++ b/scripts/updatelog.mjs
@@ -0,0 +1,44 @@
+import fs from "fs-extra";
+import path from "path";
+
+const UPDATE_LOG = "UPDATELOG.md";
+
+// parse the UPDATELOG.md
+export async function resolveUpdateLog(tag) {
+  const cwd = process.cwd();
+
+  const reTitle = /^## v[\d\.]+/;
+  const reEnd = /^---/;
+
+  const file = path.join(cwd, UPDATE_LOG);
+
+  if (!(await fs.pathExists(file))) {
+    throw new Error("could not found UPDATELOG.md");
+  }
+
+  const data = await fs.readFile(file).then((d) => d.toString("utf8"));
+
+  const map = {};
+  let p = "";
+
+  data.split("\n").forEach((line) => {
+    if (reTitle.test(line)) {
+      p = line.slice(3).trim();
+      if (!map[p]) {
+        map[p] = [];
+      } else {
+        throw new Error(`Tag ${p} dup`);
+      }
+    } else if (reEnd.test(line)) {
+      p = "";
+    } else if (p) {
+      map[p].push(line);
+    }
+  });
+
+  if (!map[tag]) {
+    throw new Error(`could not found "${tag}" in UPDATELOG.md`);
+  }
+
+  return map[tag].join("\n").trim();
+}
--- a/scripts/updater.mjs
+++ b/scripts/updater.mjs
@@ -0,0 +1,177 @@
+import fetch from "node-fetch";
+import { getOctokit, context } from "@actions/github";
+import { resolveUpdateLog } from "./updatelog.mjs";
+
+const UPDATE_TAG_NAME = "updater";
+const UPDATE_JSON_FILE = "update.json";
+const UPDATE_JSON_PROXY = "update-proxy.json";
+
+/// generate update.json
+/// upload to update tag's release asset
+async function resolveUpdater() {
+  if (process.env.GITHUB_TOKEN === undefined) {
+    throw new Error("GITHUB_TOKEN is required");
+  }
+
+  const options = { owner: context.repo.owner, repo: context.repo.repo };
+  const github = getOctokit(process.env.GITHUB_TOKEN);
+
+  const { data: tags } = await github.rest.repos.listTags({
+    ...options,
+    per_page: 10,
+    page: 1,
+  });
+
+  // get the latest publish tag
+  const tag = tags.find((t) => t.name.startsWith("v"));
+
+  console.log(tag);
+  console.log();
+
+  const { data: latestRelease } = await github.rest.repos.getReleaseByTag({
+    ...options,
+    tag: tag.name,
+  });
+
+  const updateData = {
+    name: tag.name,
+    notes: await resolveUpdateLog(tag.name), // use updatelog.md
+    pub_date: new Date().toISOString(),
+    platforms: {
+      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
+    },
+  };
+
+  const promises = latestRelease.assets.map(async (asset) => {
+    const { name, browser_download_url } = asset;
+
+    // win64 url
+    if (name.endsWith(".msi.zip")) {
+      updateData.platforms.win64.url = browser_download_url;
+      updateData.platforms["windows-x86_64"].url = browser_download_url;
+    }
+    // win64 signature
+    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 (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 (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 (name.endsWith(".AppImage.tar.gz")) {
+      updateData.platforms.linux.url = browser_download_url;
+      updateData.platforms["linux-x86_64"].url = browser_download_url;
+    }
+    // linux signature
+    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;
+    }
+  });
+
+  await Promise.allSettled(promises);
+  console.log(updateData);
+
+  // maybe should test the signature as well
+  // 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.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`);
+    }
+  });
+
+  // update the update.json
+  const { data: updateRelease } = await github.rest.repos.getReleaseByTag({
+    ...options,
+    tag: UPDATE_TAG_NAME,
+  });
+
+  // delete the old assets
+  for (let asset of updateRelease.assets) {
+    if (asset.name === UPDATE_JSON_FILE) {
+      await github.rest.repos.deleteReleaseAsset({
+        ...options,
+        asset_id: asset.id,
+      });
+    }
+
+    if (asset.name === UPDATE_JSON_PROXY) {
+      await github.rest.repos
+        .deleteReleaseAsset({ ...options, asset_id: asset.id })
+        .catch(console.error); // do not break the pipeline
+    }
+  }
+
+  // upload new assets
+  await github.rest.repos.uploadReleaseAsset({
+    ...options,
+    release_id: updateRelease.id,
+    name: UPDATE_JSON_FILE,
+    data: JSON.stringify(updateData, null, 2),
+  });
+
+  await github.rest.repos.uploadReleaseAsset({
+    ...options,
+    release_id: updateRelease.id,
+    name: UPDATE_JSON_PROXY,
+    data: JSON.stringify(updateDataNew, null, 2),
+  });
+}
+
+// get the signature file content
+async function getSignature(url) {
+  const response = await fetch(url, {
+    method: "GET",
+    headers: { "Content-Type": "application/octet-stream" },
+  });
+
+  return response.text();
+}
+
+resolveUpdater().catch(console.error);
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@@ -2,5 +2,5 @@
 # will have compiled files and executables
 /target/
 WixTools
-resources/Country.mmdb
+resources
 sidecar
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -10,17 +10,21 @@ edition = "2021"
 build = "build.rs"

 [build-dependencies]
-tauri-build = { version = "1.0.0-rc.1", 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.2", features = ["shell-all", "system-tray", "updater", "window-all"] }
-tauri-plugin-shadows = { git = "https://github.com/tauri-apps/tauri-plugin-shadows", features = ["tauri-impl"] }
-tauri-plugin-vibrancy = { git = "https://github.com/tauri-apps/tauri-plugin-vibrancy", features = ["tauri-impl"] }
+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" }

 reqwest = { version = "0.11", features = ["json"] }
 tokio = { version = "1", features = ["full"] }
@@ -37,3 +41,11 @@ winreg = { version = "0.10", features = ["transactions"] }
 [features]
 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/icons/icon-shrink.png
+++ b/src-tauri/icons/icon-shrink.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/resources/config_tmp.yaml
+++ b/src-tauri/resources/config_tmp.yaml
@@ -1,8 +0,0 @@
-# Default Config For Clash Core
-
-mixed-port: 7890
-log-level: info
-allow-lan: false
-external-controller: 127.0.0.1:9090
-mode: rule
-secret: ""
--- a/src-tauri/resources/item_tmp.yaml
+++ b/src-tauri/resources/item_tmp.yaml
@@ -1,16 +0,0 @@
-# Profile Template for clash verge
-
-# the profile's name
-name: New Profile
-
-# the description of this profile(optional)
-description:
-
-# proxies defination (optional, the same as clash)
-proxies:
-
-# proxy-groups (optional, the same as clash)
-proxy-groups:
-
-# rules (optional, the same as clash)
-rules:
--- a/src-tauri/resources/profiles_tmp.yaml
+++ b/src-tauri/resources/profiles_tmp.yaml
@@ -1,3 +0,0 @@
-# Profiles Config for Clash Verge
-
-current: 0
--- a/src-tauri/resources/verge_tmp.yaml
+++ b/src-tauri/resources/verge_tmp.yaml
@@ -1,6 +0,0 @@
-# Defaulf Config For Clash Verge
-
-theme_mode: light
-enable_self_startup: false
-enable_system_proxy: false
-system_proxy_bypass: localhost;127.*;10.*;172.16.*;172.17.*;172.18.*;172.19.*;172.20.*;172.21.*;172.22.*;172.23.*;172.24.*;172.25.*;172.26.*;172.27.*;172.28.*;172.29.*;172.30.*;172.31.*;192.168.*;<local>
--- a/src-tauri/src/cmds.rs
+++ b/src-tauri/src/cmds.rs
@@ -1,29 +1,26 @@
 use crate::{
-  core::{ClashInfo, ProfileItem, Profiles, VergeConfig},
+  core::{ClashInfo, PrfItem, PrfOption, Profiles, VergeConfig},
  states::{ClashState, ProfilesState, VergeState},
-  utils::{dirs::app_home_dir, fetch::fetch_profile, sysopt::SysProxyConfig},
+  utils::{dirs, sysopt::SysProxyConfig},
 };
+use crate::{ret_err, wrap_err};
+use anyhow::Result;
 use serde_yaml::Mapping;
 use std::process::Command;
-use tauri::State;
+use tauri::{api, Manager, State};

 /// get all profiles from `profiles.yaml`
-/// do not acquire the lock of ProfileLock
 #[tauri::command]
-pub fn get_profiles(profiles_state: State<'_, ProfilesState>) -> Result<Profiles, String> {
-  match profiles_state.0.lock() {
-    Ok(profiles) => Ok(profiles.clone()),
-    Err(_) => Err("failed to get profiles lock".into()),
-  }
+pub fn get_profiles<'a>(profiles_state: State<'_, ProfilesState>) -> Result<Profiles, String> {
+  let profiles = profiles_state.0.lock().unwrap();
+  Ok(profiles.clone())
 }

 /// synchronize data irregularly
 #[tauri::command]
 pub fn sync_profiles(profiles_state: State<'_, ProfilesState>) -> Result<(), String> {
-  match profiles_state.0.lock() {
-    Ok(mut profiles) => profiles.sync_file(),
-    Err(_) => Err("failed to get profiles lock".into()),
-  }
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.sync_file())
 }

 /// import the profile from url
@@ -31,159 +28,217 @@ pub fn sync_profiles(profiles_state: State<'_, ProfilesState>) -> Result<(), Str
 #[tauri::command]
 pub async fn import_profile(
  url: String,
-  with_proxy: bool,
+  option: Option<PrfOption>,
  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
-  match fetch_profile(&url, with_proxy).await {
-    Some(result) => {
-      let mut profiles = profiles_state.0.lock().unwrap();
-      profiles.import_from_url(url, result)
-    }
-    None => Err(format!("failed to fetch profile from `{}`", url)),
-  }
+  let item = wrap_err!(PrfItem::from_url(&url, None, None, option).await)?;
+
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.append_item(item))
 }

 /// new a profile
 /// append a temp profile item file to the `profiles` dir
 /// view the temp profile file by using vscode or other editor
 #[tauri::command]
-pub async fn new_profile(
-  name: String,
-  desc: String,
+pub async fn create_profile(
+  item: PrfItem, // partial
+  file_data: Option<String>,
  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
+  let item = wrap_err!(PrfItem::from(item, file_data).await)?;
  let mut profiles = profiles_state.0.lock().unwrap();
-  profiles.append_item(name, desc)?;
-  Ok(())
+
+  wrap_err!(profiles.append_item(item))
 }

 /// Update the profile
 #[tauri::command]
 pub async fn update_profile(
-  index: usize,
-  with_proxy: bool,
+  index: String,
+  option: Option<PrfOption>,
  clash_state: State<'_, ClashState>,
  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
-  // maybe we can get the url from the web app directly
-  let url = match profiles_state.0.lock() {
-    Ok(mut profile) => {
-      let items = profile.items.take().unwrap_or(vec![]);
-      if index >= items.len() {
-        return Err("the index out of bound".into());
+  let (url, opt) = {
+    // must release the lock here
+    let profiles = profiles_state.0.lock().unwrap();
+    let item = wrap_err!(profiles.get_item(&index))?;
+
+    // check the profile type
+    if let Some(typ) = item.itype.as_ref() {
+      if *typ != "remote" {
+        ret_err!(format!("could not update the `{typ}` profile"));
      }
-      let url = match &items[index].url {
-        Some(u) => u.clone(),
-        None => return Err("failed to update profile for `invalid url`".into()),
-      };
-      profile.items = Some(items);
-      url
    }
-    Err(_) => return Err("failed to get profiles lock".into()),
+
+    if item.url.is_none() {
+      ret_err!("failed to get the item url");
+    }
+
+    (item.url.clone().unwrap(), item.option.clone())
  };

-  match fetch_profile(&url, with_proxy).await {
-    Some(result) => match profiles_state.0.lock() {
-      Ok(mut profiles) => {
-        profiles.update_item(index, result)?;
+  let fetch_opt = PrfOption::merge(opt, option);
+  let item = wrap_err!(PrfItem::from_url(&url, None, None, fetch_opt).await)?;

-        // reactivate the profile
-        let current = profiles.current.clone().unwrap_or(0);
-        if current == index {
-          let clash = clash_state.0.lock().unwrap();
-          profiles.activate(&clash)
-        } else {
-          Ok(())
-        }
-      }
-      Err(_) => Err("failed to get profiles lock".into()),
-    },
-    None => Err(format!("failed to fetch profile from `{}`", url)),
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.update_item(index.clone(), item))?;
+
+  // reactivate the profile
+  if Some(index) == profiles.get_current() {
+    let clash = clash_state.0.lock().unwrap();
+    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
  }
+
+  Ok(())
 }

 /// change the current profile
 #[tauri::command]
 pub fn select_profile(
-  index: usize,
+  index: String,
  clash_state: State<'_, ClashState>,
  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.put_current(index))?;

-  match profiles.put_current(index) {
-    Ok(()) => {
-      let clash = clash_state.0.lock().unwrap();
-      profiles.activate(&clash)
-    }
-    Err(err) => Err(err),
-  }
+  let clash = clash_state.0.lock().unwrap();
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
+}
+
+/// change the profile chain
+#[tauri::command]
+pub fn change_profile_chain(
+  chain: Option<Vec<String>>,
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+  let mut profiles = profiles_state.0.lock().unwrap();
+
+  profiles.put_chain(chain);
+  clash.set_window(app_handle.get_window("main"));
+
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
+}
+
+/// manually exec enhanced profile
+#[tauri::command]
+pub fn enhance_profiles(
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+  let profiles = profiles_state.0.lock().unwrap();
+
+  clash.set_window(app_handle.get_window("main"));
+
+  wrap_err!(clash.activate_enhanced(&profiles, false, false))
 }

 /// delete profile item
 #[tauri::command]
 pub fn delete_profile(
-  index: usize,
+  index: String,
  clash_state: State<'_, ClashState>,
  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
  let mut profiles = profiles_state.0.lock().unwrap();
-  match profiles.delete_item(index) {
-    Ok(change) => match change {
-      true => {
-        let clash = clash_state.0.lock().unwrap();
-        profiles.activate(&clash)
-      }
-      false => Ok(()),
-    },
-    Err(err) => Err(err),
+
+  if wrap_err!(profiles.delete_item(index))? {
+    let clash = clash_state.0.lock().unwrap();
+    wrap_err!(clash.activate_enhanced(&profiles, false, false))?;
  }
+
+  Ok(())
 }

 /// patch the profile config
 #[tauri::command]
 pub fn patch_profile(
-  index: usize,
-  profile: ProfileItem,
+  index: String,
+  profile: PrfItem,
  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
-  match profiles_state.0.lock() {
-    Ok(mut profiles) => profiles.patch_item(index, profile),
-    Err(_) => Err("can not get profiles lock".into()),
-  }
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.patch_item(index, profile))
 }

 /// run vscode command to edit the profile
 #[tauri::command]
-pub fn view_profile(index: usize, profiles_state: State<'_, ProfilesState>) -> Result<(), String> {
-  let mut profiles = profiles_state.0.lock().unwrap();
-  let items = profiles.items.take().unwrap_or(vec![]);
+pub fn view_profile(index: String, profiles_state: State<'_, ProfilesState>) -> Result<(), String> {
+  let profiles = profiles_state.0.lock().unwrap();
+  let item = wrap_err!(profiles.get_item(&index))?;

-  if index >= items.len() {
-    profiles.items = Some(items);
-    return Err("the index out of bound".into());
+  let file = item.file.clone();
+  if file.is_none() {
+    ret_err!("the file is null");
  }

-  let file = items[index].file.clone().unwrap_or("".into());
-  profiles.items = Some(items);
-
-  let path = app_home_dir().join("profiles").join(file);
+  let path = dirs::app_profiles_dir().join(file.unwrap());
  if !path.exists() {
-    return Err("the file not found".into());
+    ret_err!("the file not found");
  }

  // use vscode first
  if let Ok(code) = which::which("code") {
-    return match Command::new(code).arg(path).spawn() {
-      Ok(_) => Ok(()),
-      Err(_) => Err("failed to open file by VScode".into()),
-    };
+    #[cfg(target_os = "windows")]
+    {
+      use std::os::windows::process::CommandExt;
+
+      if let Err(err) = Command::new(code)
+        .creation_flags(0x08000000)
+        .arg(path)
+        .spawn()
+      {
+        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!("failed to open file by VScode for {err}");
+      return Err("failed to open file by VScode".into());
+    }
+
+    return Ok(());
  }

-  match open_command().arg(path).spawn() {
-    Ok(_) => Ok(()),
-    Err(_) => Err("failed to open file by `open`".into()),
+  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
@@ -195,23 +250,15 @@ pub fn restart_sidecar(
  let mut clash = clash_state.0.lock().unwrap();
  let mut profiles = profiles_state.0.lock().unwrap();

-  match clash.restart_sidecar(&mut profiles) {
-    Ok(_) => Ok(()),
-    Err(err) => {
-      log::error!("{}", err);
-      Err(err)
-    }
-  }
+  wrap_err!(clash.restart_sidecar(&mut profiles))
 }

 /// get the clash core info from the state
 /// the caller can also get the infomation by clash's api
 #[tauri::command]
 pub fn get_clash_info(clash_state: State<'_, ClashState>) -> Result<ClashInfo, String> {
-  match clash_state.0.lock() {
-    Ok(clash) => Ok(clash.info.clone()),
-    Err(_) => Err("failed to get clash lock".into()),
-  }
+  let clash = clash_state.0.lock().unwrap();
+  Ok(clash.info.clone())
 }

 /// update the clash core config
@@ -227,26 +274,21 @@ pub fn patch_clash_config(
  let mut clash = clash_state.0.lock().unwrap();
  let mut verge = verge_state.0.lock().unwrap();
  let mut profiles = profiles_state.0.lock().unwrap();
-  clash.patch_config(payload, &mut verge, &mut profiles)
+  wrap_err!(clash.patch_config(payload, &mut verge, &mut profiles))
 }

 /// get the system proxy
 #[tauri::command]
 pub fn get_sys_proxy() -> Result<SysProxyConfig, String> {
-  match SysProxyConfig::get_sys() {
-    Ok(value) => Ok(value),
-    Err(err) => Err(err.to_string()),
-  }
+  wrap_err!(SysProxyConfig::get_sys())
 }

 /// get the current proxy config
 /// which may not the same as system proxy
 #[tauri::command]
 pub fn get_cur_proxy(verge_state: State<'_, VergeState>) -> Result<Option<SysProxyConfig>, String> {
-  match verge_state.0.lock() {
-    Ok(verge) => Ok(verge.cur_sysproxy.clone()),
-    Err(_) => Err("failed to get verge lock".into()),
-  }
+  let verge = verge_state.0.lock().unwrap();
+  Ok(verge.cur_sysproxy.clone())
 }

 /// get the verge config
@@ -265,42 +307,64 @@ pub fn get_verge_config(verge_state: State<'_, VergeState>) -> Result<VergeConfi
 /// patch the verge config
 /// this command only save the config and not responsible for other things
 #[tauri::command]
-pub async fn patch_verge_config(
+pub fn patch_verge_config(
  payload: VergeConfig,
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
  verge_state: State<'_, VergeState>,
+  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
+  let tun_mode = payload.enable_tun_mode.clone();
+  let system_proxy = payload.enable_system_proxy.clone();
+
  let mut verge = verge_state.0.lock().unwrap();
-  verge.patch_config(payload)
+  wrap_err!(verge.patch_config(payload))?;
+
+  // change system tray
+  if system_proxy.is_some() {
+    app_handle
+      .tray_handle()
+      .get_item("system_proxy")
+      .set_selected(system_proxy.unwrap())
+      .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(())
+}
+
+/// kill all sidecars when update app
+#[tauri::command]
+pub fn kill_sidecars() {
+  api::process::kill_children();
 }

 /// open app config dir
 #[tauri::command]
 pub fn open_app_dir() -> Result<(), String> {
-  let app_dir = app_home_dir();
-
-  match open_command().arg(app_dir).spawn() {
-    Ok(_) => Ok(()),
-    Err(_) => Err("failed to open logs dir".into()),
-  }
+  let app_dir = dirs::app_home_dir();
+  wrap_err!(open::that(app_dir))
 }

 /// open logs dir
 #[tauri::command]
 pub fn open_logs_dir() -> Result<(), String> {
-  let log_dir = app_home_dir().join("logs");
-
-  match open_command().arg(log_dir).spawn() {
-    Ok(_) => Ok(()),
-    Err(_) => Err("failed to open logs dir".into()),
-  }
-}
-
-/// get open/explorer command
-fn open_command() -> Command {
-  let open = if cfg!(target_os = "windows") {
-    "explorer"
-  } else {
-    "open"
-  };
-  Command::new(open)
+  let log_dir = dirs::app_logs_dir();
+  wrap_err!(open::that(log_dir))
 }
--- a/src-tauri/src/core/clash.rs
+++ b/src-tauri/src/core/clash.rs
@@ -1,8 +1,14 @@
-use super::{Profiles, Verge};
-use crate::utils::{config, dirs};
+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;
 use serde::{Deserialize, Serialize};
 use serde_yaml::{Mapping, Value};
+use std::{collections::HashMap, time::Duration};
 use tauri::api::process::{Command, CommandChild, CommandEvent};
+use tauri::Window;
+use tokio::time::sleep;

 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
 pub struct ClashInfo {
@@ -19,7 +25,6 @@ pub struct ClashInfo {
  pub secret: Option<String>,
 }

-#[derive(Debug)]
 pub struct Clash {
  /// maintain the clash config
  pub config: Mapping,
@@ -29,23 +34,38 @@ pub struct Clash {

  /// clash sidecar
  pub sidecar: Option<CommandChild>,
+
+  /// save the main window
+  pub window: Option<Window>,
 }

-static CLASH_CONFIG: &str = "config.yaml";
-
-// todo: be able to change config field
 impl Clash {
  pub fn new() -> Clash {
-    let config = Clash::get_config();
+    let config = Clash::read_config();
    let info = Clash::get_info(&config);

    Clash {
      config,
      info,
      sidecar: None,
+      window: None,
    }
  }

+  /// get clash config
+  fn read_config() -> Mapping {
+    config::read_yaml::<Mapping>(dirs::clash_path())
+  }
+
+  /// save the clash config
+  fn save_config(&self) -> Result<()> {
+    config::save_yaml(
+      dirs::clash_path(),
+      &self.config,
+      Some("# Default Config For Clash Core\n\n"),
+    )
+  }
+
  /// parse the clash's config.yaml
  /// get some information
  fn get_info(clash_config: &Mapping) -> ClashInfo {
@@ -76,7 +96,18 @@ impl Clash {

    let server = match clash_config.get(&key_server) {
      Some(value) => match value {
-        Value::String(val_str) => Some(val_str.clone()),
+        Value::String(val_str) => {
+          // `external-controller` could be
+          // "127.0.0.1:9090" or ":9090"
+          // Todo: maybe it could support single port
+          let server = val_str.clone();
+          let server = match server.starts_with(":") {
+            true => format!("127.0.0.1{server}"),
+            false => server,
+          };
+
+          Some(server)
+        }
        _ => None,
      },
      _ => None,
@@ -99,8 +130,13 @@ impl Clash {
    }
  }

+  /// save the main window
+  pub fn set_window(&mut self, win: Option<Window>) {
+    self.window = win;
+  }
+
  /// run clash sidecar
-  pub fn run_sidecar(&mut self) -> Result<(), String> {
+  pub fn run_sidecar(&mut self) -> Result<()> {
    let app_dir = dirs::app_home_dir();
    let app_dir = app_dir.as_os_str().to_str().unwrap();

@@ -113,95 +149,357 @@ impl Clash {
          tauri::async_runtime::spawn(async move {
            while let Some(event) = rx.recv().await {
              match event {
-                CommandEvent::Stdout(line) => log::info!("[stdout]: {}", line),
-                CommandEvent::Stderr(err) => log::error!("[stderr]: {}", err),
+                CommandEvent::Stdout(line) => log::info!("[clash]: {}", line),
+                CommandEvent::Stderr(err) => log::error!("[clash]: {}", err),
                _ => {}
              }
            }
          });
          Ok(())
        }
-        Err(err) => Err(err.to_string()),
+        Err(err) => bail!(err.to_string()),
      },
-      Err(err) => Err(err.to_string()),
+      Err(err) => bail!(err.to_string()),
    }
  }

  /// drop clash sidecar
-  pub fn drop_sidecar(&mut self) -> Result<(), String> {
+  pub fn drop_sidecar(&mut self) -> Result<()> {
    if let Some(sidecar) = self.sidecar.take() {
-      if let Err(err) = sidecar.kill() {
-        return Err(format!("failed to drop clash for \"{}\"", err));
-      }
+      sidecar.kill()?;
    }
    Ok(())
  }

  /// restart clash sidecar
  /// should reactivate profile after restart
-  pub fn restart_sidecar(&mut self, profiles: &mut Profiles) -> Result<(), String> {
+  pub fn restart_sidecar(&mut self, profiles: &mut Profiles) -> Result<()> {
    self.update_config();
    self.drop_sidecar()?;
    self.run_sidecar()?;
-    profiles.activate(&self)
+    self.activate(profiles)?;
+    self.activate_enhanced(profiles, false, true)
  }

  /// update the clash info
  pub fn update_config(&mut self) {
-    self.config = Clash::get_config();
+    self.config = Clash::read_config();
    self.info = Clash::get_info(&self.config);
  }

-  /// get clash config
-  fn get_config() -> Mapping {
-    config::read_yaml::<Mapping>(dirs::app_home_dir().join(CLASH_CONFIG))
-  }
-
-  /// save the clash config
-  fn save_config(&self) -> Result<(), String> {
-    config::save_yaml(
-      dirs::app_home_dir().join(CLASH_CONFIG),
-      &self.config,
-      Some("# Default Config For Clash Core\n\n"),
-    )
-  }
-
  /// patch update the clash config
  pub fn patch_config(
    &mut self,
    patch: Mapping,
    verge: &mut Verge,
    profiles: &mut Profiles,
-  ) -> Result<(), String> {
-    for (key, value) in patch.iter() {
+  ) -> Result<()> {
+    let mix_port_key = Value::from("mixed-port");
+    let mut port = None;
+
+    for (key, value) in patch.into_iter() {
      let value = value.clone();
-      let key_str = key.as_str().clone().unwrap_or("");

-      // restart the clash
-      if key_str == "mixed-port" {
-        self.restart_sidecar(profiles)?;
-
-        let port = if value.is_number() {
-          match value.as_i64().clone() {
-            Some(num) => Some(format!("{num}")),
-            None => None,
-          }
+      // check whether the mix_port is changed
+      if key == mix_port_key {
+        if value.is_number() {
+          port = value.as_i64().as_ref().map(|n| n.to_string());
        } else {
-          match value.as_str().clone() {
-            Some(num) => Some(num.into()),
-            None => None,
-          }
-        };
-        verge.init_sysproxy(port);
+          port = value.as_str().as_ref().map(|s| s.to_string());
+        }
      }

-      if self.config.contains_key(key) {
-        self.config[key] = value;
-      } else {
-        self.config.insert(key.clone(), value);
-      }
+      self.config.insert(key.clone(), value);
    }
-    self.save_config()
+
+    self.save_config()?;
+
+    if let Some(port) = port {
+      self.restart_sidecar(profiles)?;
+      verge.init_sysproxy(Some(port));
+    }
+
+    Ok(())
+  }
+
+  /// 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());
+        $map.insert(ret_key, Value::from($val));
+      };
+    }
+
+    // if key not exists then append value
+    macro_rules! append {
+      ($map: expr, $key: expr, $val: expr) => {
+        let ret_key = Value::String($key.into());
+        if !$map.contains_key(&ret_key) {
+          $map.insert(ret_key, Value::from($val));
+        }
+      };
+    }
+
+    // tun config
+    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() {
+      new_tun = tun_val.as_ref().unwrap().as_mapping().unwrap().clone();
+    }
+
+    revise!(new_tun, "enable", enable);
+
+    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 = config.get(&Value::from("dns"));
+    let mut new_dns = Mapping::new();
+
+    if dns_val.is_some() && dns_val.as_ref().unwrap().is_mapping() {
+      new_dns = dns_val.as_ref().unwrap().as_mapping().unwrap().clone();
+    }
+
+    // 借鉴cfw的默认配置
+    revise!(new_dns, "enable", enable);
+
+    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>);
+
+      #[cfg(target_os = "windows")]
+      append!(
+        new_dns,
+        "fake-ip-filter",
+        vec![
+          "dns.msftncsi.com",
+          "www.msftncsi.com",
+          "www.msftconnecttest.com"
+        ]
+      );
+    }
+
+    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"))?;
+
+    tauri::async_runtime::spawn(async move {
+      let server = info.server.unwrap();
+      let server = format!("http://{server}/configs");
+
+      let mut headers = HeaderMap::new();
+      headers.insert("Content-Type", "application/json".parse().unwrap());
+
+      if let Some(secret) = info.secret.as_ref() {
+        let secret = format!("Bearer {}", secret.clone()).parse().unwrap();
+        headers.insert("Authorization", secret);
+      }
+
+      let mut data = HashMap::new();
+      data.insert("path", temp_path.as_os_str().to_str().unwrap());
+
+      // retry 5 times
+      for _ in 0..5 {
+        match reqwest::ClientBuilder::new().no_proxy().build() {
+          Ok(client) => {
+            let builder = client.put(&server).headers(headers.clone()).json(&data);
+
+            match builder.send().await {
+              Ok(resp) => {
+                if resp.status() != 204 {
+                  log::error!("failed to activate clash for status \"{}\"", resp.status());
+                }
+
+                // emit the window to update something
+                if let Some(window) = window {
+                  window.emit("verge://refresh-clash-config", "yes").unwrap();
+                }
+
+                // do not retry
+                break;
+              }
+              Err(err) => log::error!("failed to activate for `{err}`"),
+            }
+          }
+          Err(err) => log::error!("failed to activate for `{err}`"),
+        }
+        sleep(Duration::from_millis(500)).await;
+      }
+    });
+
+    Ok(())
+  }
+
+  /// enhanced profiles mode
+  /// - (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 event_name = help::get_uid("e");
+    let event_name = format!("enhanced-cb-{event_name}");
+
+    // generate the payload
+    let payload = profiles.gen_enhanced(event_name.clone())?;
+
+    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 {
+          let mut config = Clash::read_config();
+          let filter_data = Clash::loose_filter(data); // loose filter
+
+          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);
+        }
+
+        result.error.map(|err| log::error!("{err}"));
+      }
+    });
+
+    tauri::async_runtime::spawn(async move {
+      // wait the window setup during resolve app
+      if delay {
+        sleep(Duration::from_secs(2)).await;
+      }
+      window.emit("script-handler", payload).unwrap();
+    });
+
+    Ok(())
+  }
+
+  /// activate the profile
+  /// auto activate enhanced profile
+  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 data.into_iter() {
+      config.insert(key, value);
+    }
+
+    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
  }
 }

@@ -214,7 +512,7 @@ impl Default for Clash {
 impl Drop for Clash {
  fn drop(&mut self) {
    if let Err(err) = self.drop_sidecar() {
-      log::error!("{}", err);
+      log::error!("{err}");
    }
  }
 }
--- a/src-tauri/src/core/profiles.rs
+++ b/src-tauri/src/core/profiles.rs
@@ -1,53 +1,60 @@
-use super::{Clash, ClashInfo};
-use crate::utils::{config, dirs};
-use reqwest::header::HeaderMap;
+use crate::utils::{config, dirs, help, tmpl};
+use anyhow::{bail, Context, Result};
 use serde::{Deserialize, Serialize};
-use serde_yaml::{Mapping, Value};
-use std::collections::HashMap;
-use std::env::temp_dir;
-use std::fs::File;
-use std::io::Write;
-use std::path::PathBuf;
-use std::time::{SystemTime, UNIX_EPOCH};
+use serde_yaml::Mapping;
+use std::{fs, io::Write};

-/// Define the `profiles.yaml` schema
-#[derive(Default, Debug, Clone, Deserialize, Serialize)]
-pub struct Profiles {
-  /// current profile's name
-  pub current: Option<usize>,
+#[derive(Debug, Clone, Deserialize, Serialize)]
+pub struct PrfItem {
+  pub uid: Option<String>,

-  /// profile list
-  pub items: Option<Vec<ProfileItem>>,
-}
+  /// profile item type
+  /// enum value: remote | local | script | merge
+  #[serde(rename = "type")]
+  pub itype: Option<String>,

-#[derive(Default, Debug, Clone, Deserialize, Serialize)]
-pub struct ProfileItem {
  /// profile name
  pub name: Option<String>,
+
  /// profile description
+  #[serde(skip_serializing_if = "Option::is_none")]
  pub desc: Option<String>,
+
  /// profile file
  pub file: Option<String>,
-  /// current mode
-  pub mode: Option<String>,
+
  /// source url
+  #[serde(skip_serializing_if = "Option::is_none")]
  pub url: Option<String>,
+
  /// selected infomation
-  pub selected: Option<Vec<ProfileSelected>>,
-  /// user info
-  pub extra: Option<ProfileExtra>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub selected: Option<Vec<PrfSelected>>,
+
+  /// subscription user info
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub extra: Option<PrfExtra>,
+
  /// updated time
  pub updated: Option<usize>,
+
+  /// some options of the item
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub option: Option<PrfOption>,
+
+  /// the file data
+  #[serde(skip)]
+  pub file_data: Option<String>,
 }

 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
-pub struct ProfileSelected {
+pub struct PrfSelected {
  pub name: Option<String>,
  pub now: Option<String>,
 }

 #[derive(Default, Debug, Clone, Copy, Deserialize, Serialize)]
-pub struct ProfileExtra {
+pub struct PrfExtra {
  pub upload: usize,
  pub download: usize,
  pub total: usize,
@@ -55,343 +62,606 @@ pub struct ProfileExtra {
 }

 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
-/// the result from url
-pub struct ProfileResponse {
-  pub name: String,
-  pub file: String,
-  pub data: String,
-  pub extra: ProfileExtra,
+pub struct PrfOption {
+  /// for `remote` profile's http request
+  /// see issue #13
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub user_agent: Option<String>,
+
+  /// for `remote` profile
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub with_proxy: Option<bool>,
 }

-static PROFILE_YAML: &str = "profiles.yaml";
-static PROFILE_TEMP: &str = "clash-verge-runtime.yaml";
+impl PrfOption {
+  pub fn merge(one: Option<Self>, other: Option<Self>) -> Option<Self> {
+    if one.is_some() && other.is_some() {
+      let mut one = one.unwrap();
+      let other = other.unwrap();
+
+      if let Some(val) = other.user_agent {
+        one.user_agent = Some(val);
+      }
+
+      if let Some(val) = other.with_proxy {
+        one.with_proxy = Some(val);
+      }
+
+      return Some(one);
+    }
+
+    if one.is_none() {
+      return other;
+    }
+
+    return one;
+  }
+}
+
+impl Default for PrfItem {
+  fn default() -> Self {
+    PrfItem {
+      uid: None,
+      itype: None,
+      name: None,
+      desc: None,
+      file: None,
+      url: None,
+      selected: None,
+      extra: None,
+      updated: None,
+      option: None,
+      file_data: None,
+    }
+  }
+}
+
+impl PrfItem {
+  /// From partial item
+  /// must contain `itype`
+  pub async fn from(item: PrfItem, file_data: Option<String>) -> Result<PrfItem> {
+    if item.itype.is_none() {
+      bail!("type should not be null");
+    }
+
+    match item.itype.unwrap().as_str() {
+      "remote" => {
+        if item.url.is_none() {
+          bail!("url should not be null");
+        }
+        let url = item.url.as_ref().unwrap().as_str();
+        let name = item.name;
+        let desc = item.desc;
+        PrfItem::from_url(url, name, desc, item.option).await
+      }
+      "local" => {
+        let name = item.name.unwrap_or("Local File".into());
+        let desc = item.desc.unwrap_or("".into());
+        PrfItem::from_local(name, desc, file_data)
+      }
+      "merge" => {
+        let name = item.name.unwrap_or("Merge".into());
+        let desc = item.desc.unwrap_or("".into());
+        PrfItem::from_merge(name, desc)
+      }
+      "script" => {
+        let name = item.name.unwrap_or("Script".into());
+        let desc = item.desc.unwrap_or("".into());
+        PrfItem::from_script(name, desc)
+      }
+      typ @ _ => bail!("invalid type \"{typ}\""),
+    }
+  }
+
+  /// ## Local type
+  /// create a new item from name/desc
+  pub fn from_local(name: String, desc: String, file_data: Option<String>) -> Result<PrfItem> {
+    let uid = help::get_uid("l");
+    let file = format!("{uid}.yaml");
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("local".into()),
+      name: Some(name),
+      desc: Some(desc),
+      file: Some(file),
+      url: None,
+      selected: None,
+      extra: None,
+      option: None,
+      updated: Some(help::get_now()),
+      file_data: Some(file_data.unwrap_or(tmpl::ITEM_LOCAL.into())),
+    })
+  }
+
+  /// ## Remote type
+  /// create a new item from url
+  pub async fn from_url(
+    url: &str,
+    name: Option<String>,
+    desc: Option<String>,
+    option: Option<PrfOption>,
+  ) -> Result<PrfItem> {
+    let with_proxy = match option.as_ref() {
+      Some(opt) => opt.with_proxy.unwrap_or(false),
+      None => false,
+    };
+    let user_agent = match option.as_ref() {
+      Some(opt) => opt.user_agent.clone(),
+      None => None,
+    };
+
+    let mut builder = reqwest::ClientBuilder::new();
+
+    if !with_proxy {
+      builder = builder.no_proxy();
+    }
+    if let Some(user_agent) = user_agent {
+      builder = builder.user_agent(user_agent);
+    }
+
+    let resp = builder.build()?.get(url).send().await?;
+    let header = resp.headers();
+
+    // parse the Subscription Userinfo
+    let extra = match header.get("Subscription-Userinfo") {
+      Some(value) => {
+        let sub_info = value.to_str().unwrap_or("");
+
+        Some(PrfExtra {
+          upload: help::parse_str(sub_info, "upload=").unwrap_or(0),
+          download: help::parse_str(sub_info, "download=").unwrap_or(0),
+          total: help::parse_str(sub_info, "total=").unwrap_or(0),
+          expire: help::parse_str(sub_info, "expire=").unwrap_or(0),
+        })
+      }
+      None => None,
+    };
+
+    let uid = help::get_uid("r");
+    let file = format!("{uid}.yaml");
+    let name = name.unwrap_or(uid.clone());
+    let data = resp.text_with_charset("utf-8").await?;
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("remote".into()),
+      name: Some(name),
+      desc,
+      file: Some(file),
+      url: Some(url.into()),
+      selected: None,
+      extra,
+      option,
+      updated: Some(help::get_now()),
+      file_data: Some(data),
+    })
+  }
+
+  /// ## Merge type (enhance)
+  /// create the enhanced item by using `merge` rule
+  pub fn from_merge(name: String, desc: String) -> Result<PrfItem> {
+    let uid = help::get_uid("m");
+    let file = format!("{uid}.yaml");
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("merge".into()),
+      name: Some(name),
+      desc: Some(desc),
+      file: Some(file),
+      url: None,
+      selected: None,
+      extra: None,
+      option: None,
+      updated: Some(help::get_now()),
+      file_data: Some(tmpl::ITEM_MERGE.into()),
+    })
+  }
+
+  /// ## Script type (enhance)
+  /// create the enhanced item by using javascript(browserjs)
+  pub fn from_script(name: String, desc: String) -> Result<PrfItem> {
+    let uid = help::get_uid("s");
+    let file = format!("{uid}.js"); // js ext
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("script".into()),
+      name: Some(name),
+      desc: Some(desc),
+      file: Some(file),
+      url: None,
+      selected: None,
+      extra: None,
+      option: None,
+      updated: Some(help::get_now()),
+      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")
+  }
+}
+
+///
+/// ## Profiles Config
+///
+/// Define the `profiles.yaml` schema
+///
+#[derive(Default, Debug, Clone, Deserialize, Serialize)]
+pub struct Profiles {
+  /// same as PrfConfig.current
+  current: Option<String>,
+
+  /// same as PrfConfig.chain
+  chain: Option<Vec<String>>,
+
+  /// profile list
+  items: Option<Vec<PrfItem>>,
+}
+
+macro_rules! patch {
+  ($lv: expr, $rv: expr, $key: tt) => {
+    if ($rv.$key).is_some() {
+      $lv.$key = $rv.$key;
+    }
+  };
+}

 impl Profiles {
  /// read the config from the file
  pub fn read_file() -> Self {
-    config::read_yaml::<Profiles>(dirs::app_home_dir().join(PROFILE_YAML))
+    let mut profiles = config::read_yaml::<Self>(dirs::profiles_path());
+
+    if profiles.items.is_none() {
+      profiles.items = Some(vec![]);
+    }
+
+    profiles.items.as_mut().map(|items| {
+      for mut item in items.iter_mut() {
+        if item.uid.is_none() {
+          item.uid = Some(help::get_uid("d"));
+        }
+      }
+    });
+
+    profiles
  }

  /// save the config to the file
-  pub fn save_file(&self) -> Result<(), String> {
+  pub fn save_file(&self) -> Result<()> {
    config::save_yaml(
-      dirs::app_home_dir().join(PROFILE_YAML),
+      dirs::profiles_path(),
      self,
      Some("# Profiles Config for Clash Verge\n\n"),
    )
  }

  /// sync the config between file and memory
-  pub fn sync_file(&mut self) -> Result<(), String> {
-    let data = config::read_yaml::<Self>(dirs::app_home_dir().join(PROFILE_YAML));
-    if data.current.is_none() {
-      Err("failed to read profiles.yaml".into())
-    } else {
-      self.current = data.current;
-      self.items = data.items;
-      Ok(())
+  pub fn sync_file(&mut self) -> Result<()> {
+    let data = Self::read_file();
+    if data.current.is_none() && data.items.is_none() {
+      bail!("failed to read profiles.yaml");
    }
+
+    self.current = data.current;
+    self.chain = data.chain;
+    self.items = data.items;
+    Ok(())
  }

-  /// import the new profile from the url
-  /// and update the config file
-  pub fn import_from_url(&mut self, url: String, result: ProfileResponse) -> Result<(), String> {
-    // save the profile file
-    let path = dirs::app_home_dir().join("profiles").join(&result.file);
-    let file_data = result.data.as_bytes();
-    File::create(path).unwrap().write(file_data).unwrap();
-
-    // update `profiles.yaml`
-    let data = Profiles::read_file();
-    let mut items = data.items.unwrap_or(vec![]);
-
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs();
-
-    items.push(ProfileItem {
-      name: Some(result.name),
-      desc: Some("imported url".into()),
-      file: Some(result.file),
-      mode: Some(format!("rule")),
-      url: Some(url),
-      selected: Some(vec![]),
-      extra: Some(result.extra),
-      updated: Some(now as usize),
-    });
-
-    self.items = Some(items);
-    if data.current.is_none() {
-      self.current = Some(0);
-    }
-
-    self.save_file()
+  /// get the current uid
+  pub fn get_current(&self) -> Option<String> {
+    self.current.clone()
  }

-  /// set the current and save to file
-  pub fn put_current(&mut self, index: usize) -> Result<(), String> {
-    let items = self.items.take().unwrap_or(vec![]);
-
-    if index >= items.len() {
-      return Err("the index out of bound".into());
+  /// only change the main to the target id
+  pub fn put_current(&mut self, uid: String) -> Result<()> {
+    if self.items.is_none() {
+      self.items = Some(vec![]);
    }

-    self.items = Some(items);
-    self.current = Some(index);
-    self.save_file()
+    let items = self.items.as_ref().unwrap();
+    let some_uid = Some(uid.clone());
+
+    for each in items.iter() {
+      if each.uid == some_uid {
+        self.current = some_uid;
+        return self.save_file();
+      }
+    }
+
+    bail!("invalid uid \"{uid}\"");
+  }
+
+  /// just change the `chain`
+  pub fn put_chain(&mut self, chain: Option<Vec<String>>) {
+    self.chain = chain;
+  }
+
+  /// find the item by the uid
+  pub fn get_item(&self, uid: &String) -> Result<&PrfItem> {
+    if self.items.is_some() {
+      let items = self.items.as_ref().unwrap();
+      let some_uid = Some(uid.clone());
+
+      for each in items.iter() {
+        if each.uid == some_uid {
+          return Ok(each);
+        }
+      }
+    }
+
+    bail!("failed to get the item by \"{}\"", uid);
  }

  /// append new item
-  /// return the new item's index
-  pub fn append_item(&mut self, name: String, desc: String) -> Result<(usize, PathBuf), String> {
-    let mut items = self.items.take().unwrap_or(vec![]);
+  /// if the file_data is some
+  /// then should save the data to file
+  pub fn append_item(&mut self, mut item: PrfItem) -> Result<()> {
+    if item.uid.is_none() {
+      bail!("the uid should not be null");
+    }

-    // create a new profile file
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs();
-    let file = format!("{}.yaml", now);
-    let path = dirs::app_home_dir().join("profiles").join(&file);
-
-    let file_data = b"# Profile Template for clash verge\n
-# proxies defination (optional, the same as clash)
-proxies:\n
-# proxy-groups (optional, the same as clash)
-proxy-groups:\n
-# rules (optional, the same as clash)
-rules:\n\n
-";
-
-    match File::create(&path).unwrap().write(file_data) {
-      Ok(_) => {
-        items.push(ProfileItem {
-          name: Some(name),
-          desc: Some(desc),
-          file: Some(file),
-          mode: None,
-          url: None,
-          selected: Some(vec![]),
-          extra: None,
-          updated: Some(now as usize),
-        });
-
-        let index = items.len();
-        self.items = Some(items);
-        Ok((index, path))
+    // save the file data
+    // move the field value after save
+    if let Some(file_data) = item.file_data.take() {
+      if item.file.is_none() {
+        bail!("the file should not be null");
      }
-      Err(_) => Err("failed to create file".into()),
+
+      let file = item.file.clone().unwrap();
+      let path = dirs::app_profiles_dir().join(&file);
+
+      fs::File::create(path)
+        .context(format!("failed to create file \"{}\"", file))?
+        .write(file_data.as_bytes())
+        .context(format!("failed to write to file \"{}\"", file))?;
    }
-  }

-  /// update the target profile
-  /// and save to config file
-  /// only support the url item
-  pub fn update_item(&mut self, index: usize, result: ProfileResponse) -> Result<(), String> {
-    let mut items = self.items.take().unwrap_or(vec![]);
+    if self.items.is_none() {
+      self.items = Some(vec![]);
+    }

-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs() as usize;
-
-    // update file
-    let file_path = &items[index].file.as_ref().unwrap();
-    let file_path = dirs::app_home_dir().join("profiles").join(file_path);
-    let file_data = result.data.as_bytes();
-    File::create(file_path).unwrap().write(file_data).unwrap();
-
-    items[index].name = Some(result.name);
-    items[index].extra = Some(result.extra);
-    items[index].updated = Some(now);
-
-    self.items = Some(items);
+    self.items.as_mut().map(|items| items.push(item));
    self.save_file()
  }

-  /// patch item
-  pub fn patch_item(&mut self, index: usize, profile: ProfileItem) -> Result<(), String> {
+  /// update the item's value
+  pub fn patch_item(&mut self, uid: String, item: PrfItem) -> Result<()> {
    let mut items = self.items.take().unwrap_or(vec![]);
-    if index >= items.len() {
-      return Err("index out of bound".into());
-    }

-    if profile.name.is_some() {
-      items[index].name = profile.name;
-    }
-    if profile.file.is_some() {
-      items[index].file = profile.file;
-    }
-    if profile.mode.is_some() {
-      items[index].mode = profile.mode;
-    }
-    if profile.url.is_some() {
-      items[index].url = profile.url;
-    }
-    if profile.selected.is_some() {
-      items[index].selected = profile.selected;
-    }
-    if profile.extra.is_some() {
-      items[index].extra = profile.extra;
+    for mut each in items.iter_mut() {
+      if each.uid == Some(uid.clone()) {
+        patch!(each, item, itype);
+        patch!(each, item, name);
+        patch!(each, item, desc);
+        patch!(each, item, file);
+        patch!(each, item, url);
+        patch!(each, item, selected);
+        patch!(each, item, extra);
+        patch!(each, item, updated);
+        patch!(each, item, option);
+
+        self.items = Some(items);
+        return self.save_file();
+      }
    }

    self.items = Some(items);
+    bail!("failed to found the uid \"{uid}\"")
+  }
+
+  /// be used to update the remote item
+  /// only patch `updated` `extra` `file_data`
+  pub fn update_item(&mut self, uid: String, mut item: PrfItem) -> Result<()> {
+    if self.items.is_none() {
+      self.items = Some(vec![]);
+    }
+
+    // find the item
+    let _ = self.get_item(&uid)?;
+
+    self.items.as_mut().map(|items| {
+      let some_uid = Some(uid.clone());
+
+      for mut each in items.iter_mut() {
+        if each.uid == some_uid {
+          each.extra = item.extra;
+          each.updated = item.updated;
+
+          // save the file data
+          // move the field value after save
+          if let Some(file_data) = item.file_data.take() {
+            let file = each.file.take();
+            let file = file.unwrap_or(item.file.take().unwrap_or(format!("{}.yaml", &uid)));
+
+            // the file must exists
+            each.file = Some(file.clone());
+
+            let path = dirs::app_profiles_dir().join(&file);
+
+            fs::File::create(path)
+              .unwrap()
+              .write(file_data.as_bytes())
+              .unwrap();
+          }
+
+          break;
+        }
+      }
+    });
+
    self.save_file()
  }

-  /// delete the item
-  pub fn delete_item(&mut self, index: usize) -> Result<bool, String> {
-    let mut current = self.current.clone().unwrap_or(0);
-    let mut items = self.items.clone().unwrap_or(vec![]);
+  /// delete item
+  /// if delete the current then return true
+  pub fn delete_item(&mut self, uid: String) -> Result<bool> {
+    let current = self.current.as_ref().unwrap_or(&uid);
+    let current = current.clone();

-    if index >= items.len() {
-      return Err("index out of bound".into());
+    let mut items = self.items.take().unwrap_or(vec![]);
+    let mut index = None;
+
+    // get the index
+    for i in 0..items.len() {
+      if items[i].uid == Some(uid.clone()) {
+        index = Some(i);
+        break;
+      }
    }

-    items.remove(index);
-
-    let mut should_change = false;
-
-    if current == index {
-      current = 0;
-      should_change = true;
-    } else if current > index {
-      current = current - 1;
+    if let Some(index) = index {
+      items.remove(index).file.map(|file| {
+        let path = dirs::app_profiles_dir().join(file);
+        if path.exists() {
+          let _ = fs::remove_file(path);
+        }
+      });
+    }
+
+    // delete the original uid
+    if current == uid {
+      self.current = match items.len() > 0 {
+        true => items[0].uid.clone(),
+        false => None,
+      };
    }

-    self.current = Some(current);
    self.items = Some(items);
-
-    match self.save_file() {
-      Ok(_) => Ok(should_change),
-      Err(err) => Err(err),
-    }
+    self.save_file()?;
+    Ok(current == uid)
  }

-  /// activate current profile
-  pub fn activate(&self, clash: &Clash) -> Result<(), String> {
-    let current = self.current.unwrap_or(0);
-    match self.items.clone() {
-      Some(items) => {
-        if current >= items.len() {
-          return Err("the index out of bound".into());
+  /// only generate config mapping
+  pub fn gen_activate(&self) -> Result<Mapping> {
+    let config = Mapping::new();
+
+    if self.current.is_none() || self.items.is_none() {
+      return Ok(config);
+    }
+
+    let current = self.current.clone().unwrap();
+
+    for item in self.items.as_ref().unwrap().iter() {
+      if item.uid == Some(current.clone()) {
+        let file_path = match item.file.clone() {
+          Some(file) => dirs::app_profiles_dir().join(file),
+          None => bail!("failed to get the file field"),
+        };
+
+        if !file_path.exists() {
+          bail!("failed to read the file \"{}\"", file_path.display());
        }

-        let profile = items[current].clone();
-        let clash_config = clash.config.clone();
-        let clash_info = clash.info.clone();
-        tauri::async_runtime::spawn(async move {
-          let mut count = 5; // retry times
-          let mut err = String::from("");
-          while count > 0 {
-            match activate_profile(&profile, &clash_config, &clash_info).await {
-              Ok(_) => return,
-              Err(e) => err = e,
-            }
-            count -= 1;
-          }
-          log::error!("failed to activate for `{}`", err);
-        });
-
-        Ok(())
+        return Ok(config::read_yaml::<Mapping>(file_path.clone()));
      }
-      None => Err("empty profiles".into()),
    }
+
+    bail!("failed to found the uid \"{current}\"");
  }
-}

-/// put the profile to clash
-pub async fn activate_profile(
-  profile_item: &ProfileItem,
-  clash_config: &Mapping,
-  clash_info: &ClashInfo,
-) -> Result<(), String> {
-  // temp profile's path
-  let temp_path = temp_dir().join(PROFILE_TEMP);
+  /// gen the enhanced profiles
+  pub fn gen_enhanced(&self, callback: String) -> Result<PrfEnhanced> {
+    let current = self.gen_activate()?;

-  // generate temp profile
-  {
-    let file_name = match profile_item.file.clone() {
-      Some(file_name) => file_name,
-      None => return Err("profile item should have `file` field".into()),
+    let chain = match self.chain.as_ref() {
+      Some(chain) => chain
+        .iter()
+        .map(|uid| self.get_item(uid))
+        .filter(|item| item.is_ok())
+        .map(|item| item.unwrap())
+        .map(|item| PrfData::from_item(item))
+        .filter(|o| o.is_some())
+        .map(|o| o.unwrap())
+        .collect::<Vec<PrfData>>(),
+      None => vec![],
    };

-    let file_path = dirs::app_home_dir().join("profiles").join(file_name);
-    if !file_path.exists() {
-      return Err(format!(
-        "profile `{}` not exists",
-        file_path.as_os_str().to_str().unwrap()
-      ));
-    }
-
-    // begin to generate the new profile config
-    let def_config = config::read_yaml::<Mapping>(file_path.clone());
-    let mut new_config = Mapping::new();
-
-    // 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",
-    ];
-    valid_keys.iter().for_each(|key| {
-      let key = Value::String(key.to_string());
-      if def_config.contains_key(&key) {
-        let value = def_config[&key].clone();
-        new_config.insert(key, value);
-      }
-    });
-
-    // add some of the clash `config.yaml` config to it
-    let valid_keys = vec![
-      "mixed-port",
-      "log-level",
-      "allow-lan",
-      "external-controller",
-      "secret",
-      "mode",
-      "ipv6",
-    ];
-    valid_keys.iter().for_each(|key| {
-      let key = Value::String(key.to_string());
-      if clash_config.contains_key(&key) {
-        let value = clash_config[&key].clone();
-        new_config.insert(key, value);
-      }
-    });
-
-    config::save_yaml(
-      temp_path.clone(),
-      &new_config,
-      Some("# Clash Verge Temp File"),
-    )?
-  };
-
-  let server = format!("http://{}/configs", clash_info.server.clone().unwrap());
-
-  let mut headers = HeaderMap::new();
-  headers.insert("Content-Type", "application/json".parse().unwrap());
-
-  if let Some(secret) = clash_info.secret.clone() {
-    headers.insert(
-      "Authorization",
-      format!("Bearer {}", secret).parse().unwrap(),
-    );
-  }
-
-  let mut data = HashMap::new();
-  data.insert("path", temp_path.as_os_str().to_str().unwrap());
-
-  let client = match reqwest::ClientBuilder::new().no_proxy().build() {
-    Ok(c) => c,
-    Err(_) => return Err("failed to create http::put".into()),
-  };
-  match client.put(server).headers(headers).json(&data).send().await {
-    Ok(_) => Ok(()),
-    Err(err) => Err(format!("request failed `{}`", err.to_string())),
+    Ok(PrfEnhanced {
+      current,
+      chain,
+      callback,
+    })
+  }
+}
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize)]
+pub struct PrfEnhanced {
+  pub current: Mapping,
+
+  pub chain: Vec<PrfData>,
+
+  pub callback: String,
+}
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize)]
+pub struct PrfEnhancedResult {
+  pub data: Option<Mapping>,
+
+  pub status: String,
+
+  pub error: Option<String>,
+}
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize)]
+pub struct PrfData {
+  item: PrfItem,
+
+  #[serde(skip_serializing_if = "Option::is_none")]
+  merge: Option<Mapping>,
+
+  #[serde(skip_serializing_if = "Option::is_none")]
+  script: Option<String>,
+}
+
+impl PrfData {
+  pub fn from_item(item: &PrfItem) -> Option<PrfData> {
+    match item.itype.as_ref() {
+      Some(itype) => {
+        let file = item.file.clone()?;
+        let path = dirs::app_profiles_dir().join(file);
+
+        if !path.exists() {
+          return None;
+        }
+
+        match itype.as_str() {
+          "script" => Some(PrfData {
+            item: item.clone(),
+            script: Some(fs::read_to_string(path).unwrap_or("".into())),
+            merge: None,
+          }),
+          "merge" => Some(PrfData {
+            item: item.clone(),
+            merge: Some(config::read_yaml::<Mapping>(path)),
+            script: None,
+          }),
+          _ => None,
+        }
+      }
+      None => None,
+    }
  }
 }
--- a/src-tauri/src/core/verge.rs
+++ b/src-tauri/src/core/verge.rs
@@ -1,11 +1,20 @@
-use crate::utils::{config, dirs, sysopt::SysProxyConfig};
+use crate::log_if_err;
+use crate::{
+  core::Clash,
+  utils::{config, dirs, sysopt::SysProxyConfig},
+};
+use anyhow::{bail, Result};
 use auto_launch::{AutoLaunch, AutoLaunchBuilder};
 use serde::{Deserialize, Serialize};
-use tauri::api::path::resource_dir;
+use std::sync::Arc;
+use tauri::{async_runtime::Mutex, utils::platform::current_exe};

 /// ### `verge.yaml` schema
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
 pub struct VergeConfig {
+  // i18n
+  pub language: Option<String>,
+
  /// `light` or `dark`
  pub theme_mode: Option<String>,

@@ -13,27 +22,59 @@ pub struct VergeConfig {
  /// maybe be able to set the alpha
  pub theme_blur: Option<bool>,

+  /// enable traffic graph default is true
+  pub traffic_graph: Option<bool>,
+
+  /// clash tun mode
+  pub enable_tun_mode: Option<bool>,
+
  /// 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>,

+  /// enable proxy guard
+  pub enable_proxy_guard: Option<bool>,
+
  /// set system proxy bypass
  pub system_proxy_bypass: Option<String>,
+
+  /// proxy guard duration
+  pub proxy_guard_duration: Option<u64>,
+
+  /// theme setting
+  pub theme_setting: Option<VergeTheme>,
 }

-static VERGE_CONFIG: &str = "verge.yaml";
+#[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 {
  pub fn new() -> Self {
-    config::read_yaml::<VergeConfig>(dirs::app_home_dir().join(VERGE_CONFIG))
+    config::read_yaml::<VergeConfig>(dirs::verge_path())
  }

  /// Save Verge App Config
-  pub fn save_file(&self) -> Result<(), String> {
+  pub fn save_file(&self) -> Result<()> {
    config::save_yaml(
-      dirs::app_home_dir().join(VERGE_CONFIG),
+      dirs::verge_path(),
      self,
      Some("# The Config for Clash Verge App\n\n"),
    )
@@ -43,13 +84,21 @@ impl VergeConfig {
 /// Verge App abilities
 #[derive(Debug)]
 pub struct Verge {
+  /// manage the verge config
  pub config: VergeConfig,

-  pub old_sysproxy: Option<SysProxyConfig>,
-
+  /// current system proxy setting
  pub cur_sysproxy: Option<SysProxyConfig>,

-  pub auto_launch: Option<AutoLaunch>,
+  /// record the original system proxy
+  /// recover it when exit
+  old_sysproxy: Option<SysProxyConfig>,
+
+  /// helps to auto launch the app
+  auto_launch: Option<AutoLaunch>,
+
+  /// record whether the guard async is running or not
+  guard_state: Arc<Mutex<bool>>,
 }

 impl Default for Verge {
@@ -65,6 +114,7 @@ impl Verge {
      old_sysproxy: None,
      cur_sysproxy: None,
      auto_launch: None,
+      guard_state: Arc::new(Mutex::new(false)),
    }
  }

@@ -89,6 +139,9 @@ impl Verge {

      self.cur_sysproxy = Some(sysproxy);
    }
+
+    // launchs the system proxy guard
+    Verge::guard_proxy(self.guard_state.clone());
  }

  /// reset the sysproxy
@@ -102,47 +155,37 @@ impl Verge {
  }

  /// init the auto launch
-  pub fn init_launch(&mut self, package_info: &tauri::PackageInfo) {
-    let app_name = "clash-verge";
-    let app_path = get_app_path(app_name);
-    let app_path = resource_dir(package_info, &tauri::Env::default())
-      .unwrap()
-      .join(app_path);
-    let app_path = app_path.as_os_str().to_str().unwrap();
+  pub fn init_launch(&mut self) -> Result<()> {
+    let app_exe = current_exe().unwrap();
+    let app_exe = dunce::canonicalize(app_exe).unwrap();
+    let app_name = app_exe.file_stem().unwrap().to_str().unwrap();
+    let app_path = app_exe.as_os_str().to_str().unwrap();
+
+    // fix issue #26
+    #[cfg(target_os = "windows")]
+    let app_path = format!("\"{app_path}\"");
+    #[cfg(target_os = "windows")]
+    let app_path = app_path.as_str();

    let auto = AutoLaunchBuilder::new()
      .set_app_name(app_name)
      .set_app_path(app_path)
      .build();

-    self.auto_launch = Some(auto);
-  }
-
-  /// sync the startup when run the app
-  pub fn sync_launch(&self) -> Result<(), String> {
-    let enable = self.config.enable_auto_launch.clone().unwrap_or(false);
-    if !enable {
-      return Ok(());
-    }
-
-    if self.auto_launch.is_none() {
-      return Err("should init the auto launch first".into());
-    }
-
-    let auto_launch = self.auto_launch.clone().unwrap();
-
-    let is_enabled = auto_launch.is_enabled().unwrap_or(false);
-    if !is_enabled {
-      if let Err(_) = auto_launch.enable() {
-        return Err("failed to enable auto-launch".into());
+    if let Some(enable) = self.config.enable_auto_launch.as_ref() {
+      // fix issue #26
+      if *enable {
+        auto.enable()?;
      }
    }

+    self.auto_launch = Some(auto);
+
    Ok(())
  }

  /// update the startup
-  fn update_launch(&mut self, enable: bool) -> Result<(), String> {
+  fn update_launch(&mut self, enable: bool) -> Result<()> {
    let conf_enable = self.config.enable_auto_launch.clone().unwrap_or(false);

    if enable == conf_enable {
@@ -151,50 +194,37 @@ impl Verge {

    let auto_launch = self.auto_launch.clone().unwrap();

-    let result = if enable {
-      auto_launch.enable()
-    } else {
-      auto_launch.disable()
+    match enable {
+      true => auto_launch.enable()?,
+      false => auto_launch.disable()?,
    };

-    match result {
-      Ok(_) => Ok(()),
-      Err(err) => {
-        log::error!("{err}");
-        Err("failed to set system startup info".into())
-      }
-    }
+    Ok(())
  }

-  // fn guard_thread(&mut self) -> Result<(), String> {
-  //   let sysproxy = self.cur_sysproxy.clone();
-
-  //   use std::{thread, time};
-  //   tauri::async_runtime::spawn(async move {
-  //     if let Some(sysproxy) = sysproxy {
-  //       sysproxy.set_sys();
-  //     }
-
-  //     let ten_millis = time::Duration::from_millis(10);
-  //     let now = time::Instant::now();
-
-  //     thread::sleep(ten_millis);
-  //   });
-
-  //   Ok(())
-  // }
-
  /// patch verge config
  /// There should be only one update at a time here
  /// so call the save_file at the end is savely
-  pub fn patch_config(&mut self, patch: VergeConfig) -> Result<(), String> {
+  pub fn patch_config(&mut self, patch: VergeConfig) -> Result<()> {
    // only change it
+    if patch.language.is_some() {
+      self.config.language = patch.language;
+    }
    if patch.theme_mode.is_some() {
      self.config.theme_mode = patch.theme_mode;
    }
    if patch.theme_blur.is_some() {
      self.config.theme_blur = patch.theme_blur;
    }
+    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() {
@@ -206,34 +236,119 @@ impl Verge {
    // should update system proxy
    if patch.enable_system_proxy.is_some() {
      let enable = patch.enable_system_proxy.unwrap();
+
      if let Some(mut sysproxy) = self.cur_sysproxy.take() {
        sysproxy.enable = enable;
        if sysproxy.set_sys().is_err() {
+          self.cur_sysproxy = Some(sysproxy);
+
          log::error!("failed to set system proxy");
-          return Err("failed to set system proxy".into());
+          bail!("failed to set system proxy");
        }
        self.cur_sysproxy = Some(sysproxy);
      }
      self.config.enable_system_proxy = Some(enable);
    }

-    // todo
    // should update system proxy too
    if patch.system_proxy_bypass.is_some() {
-      self.config.system_proxy_bypass = patch.system_proxy_bypass;
+      let bypass = patch.system_proxy_bypass.unwrap();
+
+      if let Some(mut sysproxy) = self.cur_sysproxy.take() {
+        if sysproxy.enable {
+          sysproxy.bypass = bypass.clone();
+
+          if sysproxy.set_sys().is_err() {
+            self.cur_sysproxy = Some(sysproxy);
+
+            log::error!("failed to set system proxy");
+            bail!("failed to set system proxy");
+          }
+        }
+
+        self.cur_sysproxy = Some(sysproxy);
+      }
+
+      self.config.system_proxy_bypass = Some(bypass);
+    }
+
+    // proxy guard
+    // only change it
+    if patch.enable_proxy_guard.is_some() {
+      self.config.enable_proxy_guard = patch.enable_proxy_guard;
+    }
+    if patch.proxy_guard_duration.is_some() {
+      self.config.proxy_guard_duration = patch.proxy_guard_duration;
+    }
+
+    // relaunch the guard
+    if patch.enable_system_proxy.is_some() || patch.enable_proxy_guard.is_some() {
+      Verge::guard_proxy(self.guard_state.clone());
+    }
+
+    // handle the tun mode
+    if patch.enable_tun_mode.is_some() {
+      self.config.enable_tun_mode = patch.enable_tun_mode;
    }

    self.config.save_file()
  }
 }

-// Get the target app_path
-fn get_app_path(app_name: &str) -> String {
-  #[cfg(target_os = "linux")]
-  let ext = "";
-  #[cfg(target_os = "macos")]
-  let ext = "";
-  #[cfg(target_os = "windows")]
-  let ext = ".exe";
-  String::from(app_name) + ext
+impl Verge {
+  /// launch a system proxy guard
+  /// read config from file directly
+  pub fn guard_proxy(guard_state: Arc<Mutex<bool>>) {
+    use tokio::time::{sleep, Duration};
+
+    tauri::async_runtime::spawn(async move {
+      // if it is running, exit
+      let mut state = guard_state.lock().await;
+      if *state {
+        return;
+      }
+      *state = true;
+      std::mem::drop(state);
+
+      // default duration is 10s
+      let mut wait_secs = 10u64;
+
+      loop {
+        sleep(Duration::from_secs(wait_secs)).await;
+
+        log::debug!("guard heartbeat detection");
+
+        let verge = Verge::new();
+
+        let enable_proxy = verge.config.enable_system_proxy.unwrap_or(false);
+        let enable_guard = verge.config.enable_proxy_guard.unwrap_or(false);
+        let guard_duration = verge.config.proxy_guard_duration.unwrap_or(10);
+
+        // update duration
+        wait_secs = guard_duration;
+
+        // stop loop
+        if !enable_guard || !enable_proxy {
+          break;
+        }
+
+        log::info!("try to guard proxy");
+
+        let clash = Clash::new();
+
+        match &clash.info.port {
+          Some(port) => {
+            let bypass = verge.config.system_proxy_bypass.clone();
+            let sysproxy = SysProxyConfig::new(true, port.clone(), bypass);
+
+            log_if_err!(sysproxy.set_sys());
+          }
+          None => log::error!("fail to parse clash port"),
+        }
+      }
+
+      let mut state = guard_state.lock().await;
+      *state = false;
+    });
+  }
 }
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -8,7 +8,10 @@ mod core;
 mod states;
 mod utils;

-use crate::utils::{resolve, server};
+use crate::{
+  core::VergeConfig,
+  utils::{resolve, server},
+};
 use tauri::{
  api, CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem,
 };
@@ -19,18 +22,20 @@ fn main() -> std::io::Result<()> {
    return Ok(());
  }

-  let menu = SystemTrayMenu::new()
+  let tray_menu = SystemTrayMenu::new()
    .add_item(CustomMenuItem::new("open_window", "Show"))
+    .add_item(CustomMenuItem::new("system_proxy", "System Proxy"))
    .add_item(CustomMenuItem::new("restart_clash", "Restart Clash"))
    .add_native_item(SystemTrayMenuItem::Separator)
    .add_item(CustomMenuItem::new("quit", "Quit").accelerator("CmdOrControl+Q"));

-  tauri::Builder::default()
+  #[allow(unused_mut)]
+  let mut builder = tauri::Builder::default()
    .manage(states::VergeState::default())
    .manage(states::ClashState::default())
    .manage(states::ProfilesState::default())
    .setup(|app| Ok(resolve::resolve_setup(app)))
-    .system_tray(SystemTray::new().with_menu(menu))
+    .system_tray(SystemTray::new().with_menu(tray_menu))
    .on_system_tray_event(move |app_handle, event| match event {
      SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
        "open_window" => {
@@ -39,18 +44,38 @@ fn main() -> std::io::Result<()> {
          window.show().unwrap();
          window.set_focus().unwrap();
        }
+        "system_proxy" => {
+          let verge_state = app_handle.state::<states::VergeState>();
+          let mut verge = verge_state.0.lock().unwrap();
+
+          let old_value = verge.config.enable_system_proxy.clone().unwrap_or(false);
+          let new_value = !old_value;
+
+          match verge.patch_config(VergeConfig {
+            enable_system_proxy: Some(new_value),
+            ..VergeConfig::default()
+          }) {
+            Ok(_) => {
+              app_handle
+                .tray_handle()
+                .get_item(id.as_str())
+                .set_selected(new_value)
+                .unwrap();
+
+              // update verge config
+              let window = app_handle.get_window("main").unwrap();
+              window.emit("verge://refresh-verge-config", "yes").unwrap();
+            }
+            Err(err) => log::error!("{err}"),
+          }
+        }
        "restart_clash" => {
          let clash_state = app_handle.state::<states::ClashState>();
          let profiles_state = app_handle.state::<states::ProfilesState>();
          let mut clash = clash_state.0.lock().unwrap();
          let mut profiles = profiles_state.0.lock().unwrap();
-          match clash.restart_sidecar(&mut profiles) {
-            Ok(_) => {
-              let window = app_handle.get_window("main").unwrap();
-              window.emit("restart_clash", "yes").unwrap();
-            }
-            Err(err) => log::error!("{}", err),
-          }
+
+          crate::log_if_err!(clash.restart_sidecar(&mut profiles));
        }
        "quit" => {
          resolve::resolve_reset(app_handle);
@@ -59,13 +84,12 @@ fn main() -> std::io::Result<()> {
        }
        _ => {}
      },
+      #[cfg(target_os = "windows")]
      SystemTrayEvent::LeftClick { .. } => {
-        if cfg![target_os = "windows"] {
-          let window = app_handle.get_window("main").unwrap();
-          window.unminimize().unwrap();
-          window.show().unwrap();
-          window.set_focus().unwrap();
-        }
+        let window = app_handle.get_window("main").unwrap();
+        window.unminimize().unwrap();
+        window.show().unwrap();
+        window.set_focus().unwrap();
      }
      _ => {}
    })
@@ -74,6 +98,7 @@ fn main() -> std::io::Result<()> {
      cmds::restart_sidecar,
      cmds::get_sys_proxy,
      cmds::get_cur_proxy,
+      cmds::kill_sidecars,
      cmds::open_app_dir,
      cmds::open_logs_dir,
      // clash
@@ -83,24 +108,50 @@ fn main() -> std::io::Result<()> {
      cmds::get_verge_config,
      cmds::patch_verge_config,
      // profile
-      cmds::new_profile,
      cmds::view_profile,
      cmds::patch_profile,
+      cmds::create_profile,
      cmds::import_profile,
      cmds::update_profile,
      cmds::delete_profile,
      cmds::select_profile,
      cmds::get_profiles,
      cmds::sync_profiles,
-    ])
+      cmds::enhance_profiles,
+      cmds::change_profile_chain,
+      cmds::read_profile_file,
+      cmds::save_profile_file
+    ]);
+
+  #[cfg(target_os = "macos")]
+  {
+    use tauri::{Menu, MenuItem, Submenu};
+
+    let submenu_file = Submenu::new(
+      "File",
+      Menu::new()
+        .add_native_item(MenuItem::Undo)
+        .add_native_item(MenuItem::Redo)
+        .add_native_item(MenuItem::Copy)
+        .add_native_item(MenuItem::Paste)
+        .add_native_item(MenuItem::Cut)
+        .add_native_item(MenuItem::SelectAll),
+    );
+    builder = builder.menu(Menu::new().add_submenu(submenu_file));
+  }
+
+  builder
    .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/config.rs
+++ b/src-tauri/src/utils/config.rs
@@ -1,3 +1,4 @@
+use anyhow::{Context, Result};
 use serde::{de::DeserializeOwned, Serialize};
 use std::{fs, path::PathBuf};

@@ -7,26 +8,16 @@ pub fn read_yaml<T: DeserializeOwned + Default>(path: PathBuf) -> T {
  serde_yaml::from_str::<T>(&yaml_str).unwrap_or(T::default())
 }

-/// - save the data to the file
-/// - can set `prefix` string to add some comments
-pub fn save_yaml<T: Serialize>(
-  path: PathBuf,
-  data: &T,
-  prefix: Option<&str>,
-) -> Result<(), String> {
-  match serde_yaml::to_string(data) {
-    Ok(data_str) => {
-      let yaml_str = match prefix {
-        Some(prefix) => format!("{}{}", prefix, data_str),
-        None => data_str,
-      };
+/// save the data to the file
+/// can set `prefix` string to add some comments
+pub fn save_yaml<T: Serialize>(path: PathBuf, data: &T, prefix: Option<&str>) -> Result<()> {
+  let data_str = serde_yaml::to_string(data)?;

-      let path_str = path.as_os_str().to_string_lossy().to_string();
-      match fs::write(path, yaml_str.as_bytes()) {
-        Ok(_) => Ok(()),
-        Err(_) => Err(format!("can not save file `{}`", path_str)),
-      }
-    }
-    Err(_) => Err("can not convert the data to yaml".into()),
-  }
+  let yaml_str = match prefix {
+    Some(prefix) => format!("{prefix}{data_str}"),
+    None => data_str,
+  };
+
+  let path_str = path.as_os_str().to_string_lossy().to_string();
+  fs::write(path, yaml_str.as_bytes()).context(format!("failed to save file \"{path_str}\""))
 }
--- a/src-tauri/src/utils/dirs.rs
+++ b/src-tauri/src/utils/dirs.rs
@@ -1,15 +1,26 @@
+use std::env::temp_dir;
 use std::path::{Path, PathBuf};
 use tauri::{
  api::path::{home_dir, resource_dir},
  Env, PackageInfo,
 };

+#[cfg(not(feature = "verge-dev"))]
+static APP_DIR: &str = "clash-verge";
+#[cfg(feature = "verge-dev")]
+static APP_DIR: &str = "clash-verge-dev";
+
+static CLASH_CONFIG: &str = "config.yaml";
+static VERGE_CONFIG: &str = "verge.yaml";
+static PROFILE_YAML: &str = "profiles.yaml";
+static PROFILE_TEMP: &str = "clash-verge-runtime.yaml";
+
 /// get the verge app home dir
 pub fn app_home_dir() -> PathBuf {
  home_dir()
    .unwrap()
    .join(Path::new(".config"))
-    .join(Path::new("clash-verge"))
+    .join(Path::new(APP_DIR))
 }

 /// get the resources dir
@@ -18,3 +29,33 @@ pub fn app_resources_dir(package_info: &PackageInfo) -> PathBuf {
    .unwrap()
    .join("resources")
 }
+
+/// profiles dir
+pub fn app_profiles_dir() -> PathBuf {
+  app_home_dir().join("profiles")
+}
+
+/// logs dir
+pub fn app_logs_dir() -> PathBuf {
+  app_home_dir().join("logs")
+}
+
+pub fn clash_path() -> PathBuf {
+  app_home_dir().join(CLASH_CONFIG)
+}
+
+pub fn verge_path() -> PathBuf {
+  app_home_dir().join(VERGE_CONFIG)
+}
+
+pub fn profiles_path() -> PathBuf {
+  app_home_dir().join(PROFILE_YAML)
+}
+
+pub fn profiles_temp_path() -> PathBuf {
+  #[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/fetch.rs
+++ b/src-tauri/src/utils/fetch.rs
@@ -1,105 +0,0 @@
-use crate::core::{ProfileExtra, ProfileResponse};
-use std::{
-  str::FromStr,
-  time::{SystemTime, UNIX_EPOCH},
-};
-
-/// parse the string
-fn parse_string<T: FromStr>(target: &str, key: &str) -> Option<T> {
-  match target.find(key) {
-    Some(idx) => {
-      let idx = idx + key.len();
-      let value = &target[idx..];
-      match match value.split(';').nth(0) {
-        Some(value) => value.trim().parse(),
-        None => value.trim().parse(),
-      } {
-        Ok(r) => Some(r),
-        Err(_) => None,
-      }
-    }
-    None => None,
-  }
-}
-
-/// fetch and parse the profile
-pub async fn fetch_profile(url: &str, with_proxy: bool) -> Option<ProfileResponse> {
-  let builder = reqwest::ClientBuilder::new();
-  let client = match with_proxy {
-    true => builder.build(),
-    false => builder.no_proxy().build(),
-  };
-  let resp = match client {
-    Ok(client) => match client.get(url).send().await {
-      Ok(res) => res,
-      Err(_) => return None,
-    },
-    Err(_) => return None,
-  };
-
-  let header = resp.headers();
-
-  // parse the Subscription Userinfo
-  let extra = {
-    let sub_info = match header.get("Subscription-Userinfo") {
-      Some(value) => value.to_str().unwrap_or(""),
-      None => "",
-    };
-
-    ProfileExtra {
-      upload: parse_string(sub_info, "upload=").unwrap_or(0),
-      download: parse_string(sub_info, "download=").unwrap_or(0),
-      total: parse_string(sub_info, "total=").unwrap_or(0),
-      expire: parse_string(sub_info, "expire=").unwrap_or(0),
-    }
-  };
-
-  // parse the `name` and `file`
-  let (name, file) = {
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs();
-    let file = format!("{}.yaml", now);
-    let name = header.get("Content-Disposition").unwrap().to_str().unwrap();
-    let name = parse_string::<String>(name, "filename=");
-
-    match name {
-      Some(f) => (f, file),
-      None => (file.clone(), file),
-    }
-  };
-
-  // get the data
-  let data = match resp.text_with_charset("utf-8").await {
-    Ok(d) => d,
-    Err(_) => return None,
-  };
-
-  Some(ProfileResponse {
-    file,
-    name,
-    data,
-    extra,
-  })
-}
-
-#[test]
-fn test_parse_value() {
-  let test_1 = "upload=111; download=2222; total=3333; expire=444";
-  let test_2 = "attachment; filename=Clash.yaml";
-
-  assert_eq!(parse_string::<usize>(test_1, "upload=").unwrap(), 111);
-  assert_eq!(parse_string::<usize>(test_1, "download=").unwrap(), 2222);
-  assert_eq!(parse_string::<usize>(test_1, "total=").unwrap(), 3333);
-  assert_eq!(parse_string::<usize>(test_1, "expire=").unwrap(), 444);
-  assert_eq!(
-    parse_string::<String>(test_2, "filename=").unwrap(),
-    format!("Clash.yaml")
-  );
-
-  assert_eq!(parse_string::<usize>(test_1, "aaa="), None);
-  assert_eq!(parse_string::<usize>(test_1, "upload1="), None);
-  assert_eq!(parse_string::<usize>(test_1, "expire1="), None);
-  assert_eq!(parse_string::<usize>(test_2, "attachment="), None);
-}
--- a/src-tauri/src/utils/help.rs
+++ b/src-tauri/src/utils/help.rs
@@ -0,0 +1,94 @@
+use nanoid::nanoid;
+use std::str::FromStr;
+use std::time::{SystemTime, UNIX_EPOCH};
+
+pub fn get_now() -> usize {
+  SystemTime::now()
+    .duration_since(UNIX_EPOCH)
+    .unwrap()
+    .as_secs() as _
+}
+
+const ALPHABET: [char; 62] = [
+  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
+  'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B',
+  'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
+  'V', 'W', 'X', 'Y', 'Z',
+];
+
+/// generate the uid
+pub fn get_uid(prefix: &str) -> String {
+  let id = nanoid!(11, &ALPHABET);
+  format!("{prefix}{id}")
+}
+
+/// parse the string
+/// xxx=123123; => 123123
+pub fn parse_str<T: FromStr>(target: &str, key: &str) -> Option<T> {
+  match target.find(key) {
+    Some(idx) => {
+      let idx = idx + key.len();
+      let value = &target[idx..];
+      match match value.split(';').nth(0) {
+        Some(value) => value.trim().parse(),
+        None => value.trim().parse(),
+      } {
+        Ok(r) => Some(r),
+        Err(_) => None,
+      }
+    }
+    None => None,
+  }
+}
+
+#[macro_export]
+macro_rules! log_if_err {
+  ($result: expr) => {
+    if let Err(err) = $result {
+      log::error!("{err}");
+    }
+  };
+}
+
+/// wrap the anyhow error
+/// transform the error to String
+#[macro_export]
+macro_rules! wrap_err {
+  ($stat: expr) => {
+    match $stat {
+      Ok(a) => Ok(a),
+      Err(err) => {
+        log::error!("{}", err.to_string());
+        Err(format!("{}", err.to_string()))
+      }
+    }
+  };
+}
+
+/// return the string literal error
+#[macro_export]
+macro_rules! ret_err {
+  ($str: expr) => {
+    return Err($str.into())
+  };
+}
+
+#[test]
+fn test_parse_value() {
+  let test_1 = "upload=111; download=2222; total=3333; expire=444";
+  let test_2 = "attachment; filename=Clash.yaml";
+
+  assert_eq!(parse_str::<usize>(test_1, "upload=").unwrap(), 111);
+  assert_eq!(parse_str::<usize>(test_1, "download=").unwrap(), 2222);
+  assert_eq!(parse_str::<usize>(test_1, "total=").unwrap(), 3333);
+  assert_eq!(parse_str::<usize>(test_1, "expire=").unwrap(), 444);
+  assert_eq!(
+    parse_str::<String>(test_2, "filename=").unwrap(),
+    format!("Clash.yaml")
+  );
+
+  assert_eq!(parse_str::<usize>(test_1, "aaa="), None);
+  assert_eq!(parse_str::<usize>(test_1, "upload1="), None);
+  assert_eq!(parse_str::<usize>(test_1, "expire1="), None);
+  assert_eq!(parse_str::<usize>(test_2, "attachment="), None);
+}
--- a/src-tauri/src/utils/init.rs
+++ b/src-tauri/src/utils/init.rs
@@ -1,13 +1,11 @@
-extern crate serde_yaml;
-
-use crate::utils::dirs;
+use crate::utils::{dirs, tmpl};
 use chrono::Local;
 use log::LevelFilter;
 use log4rs::append::console::ConsoleAppender;
 use log4rs::append::file::FileAppender;
 use log4rs::config::{Appender, Config, Root};
 use log4rs::encode::pattern::PatternEncoder;
-use std::fs::{self, File};
+use std::fs;
 use std::io::Write;
 use std::path::PathBuf;
 use tauri::PackageInfo;
@@ -33,7 +31,7 @@ fn init_log(log_dir: &PathBuf) {
    .build(
      Root::builder()
        .appenders(["stdout", "file"])
-        .build(LevelFilter::Debug),
+        .build(LevelFilter::Info),
    )
    .unwrap();

@@ -41,65 +39,62 @@ fn init_log(log_dir: &PathBuf) {
 }

 /// Initialize all the files from resources
-fn init_config_file(app_dir: &PathBuf, res_dir: &PathBuf) {
+fn init_config(app_dir: &PathBuf) -> std::io::Result<()> {
  // target path
  let clash_path = app_dir.join("config.yaml");
  let verge_path = app_dir.join("verge.yaml");
  let profile_path = app_dir.join("profiles.yaml");
-  let mmdb_path = app_dir.join("Country.mmdb");
-
-  // template path
-  let clash_tmpl = res_dir.join("config_tmp.yaml");
-  let verge_tmpl = res_dir.join("verge_tmp.yaml");
-  let profiles_tmpl = res_dir.join("profiles_tmp.yaml");
-  let mmdb_tmpl = res_dir.join("Country.mmdb");

  if !clash_path.exists() {
-    if clash_tmpl.exists() {
-      fs::copy(clash_tmpl, clash_path).unwrap();
-    } else {
-      // make sure that the config.yaml not null
-      let content = b"\
-        mixed-port: 7890\n\
-        log-level: info\n\
-        allow-lan: false\n\
-        external-controller: 127.0.0.1:9090\n\
-        secret: \"\"\n";
-      File::create(clash_path).unwrap().write(content).unwrap();
-    }
+    fs::File::create(clash_path)?.write(tmpl::CLASH_CONFIG)?;
  }
-
-  // only copy it
-  if !verge_path.exists() && verge_tmpl.exists() {
-    fs::copy(verge_tmpl, verge_path).unwrap();
+  if !verge_path.exists() {
+    fs::File::create(verge_path)?.write(tmpl::VERGE_CONFIG)?;
  }
-  if !profile_path.exists() && profiles_tmpl.exists() {
-    fs::copy(profiles_tmpl, profile_path).unwrap();
-  }
-  if !mmdb_path.exists() && mmdb_tmpl.exists() {
-    fs::copy(mmdb_tmpl, mmdb_path).unwrap();
+  if !profile_path.exists() {
+    fs::File::create(profile_path)?.write(tmpl::PROFILES_CONFIG)?;
  }
+  Ok(())
 }

 /// initialize app
 pub fn init_app(package_info: &PackageInfo) {
  // create app dir
  let app_dir = dirs::app_home_dir();
-  let log_dir = app_dir.join("logs");
-  let profiles_dir = app_dir.join("profiles");
+  let log_dir = dirs::app_logs_dir();
+  let profiles_dir = dirs::app_profiles_dir();

  let res_dir = dirs::app_resources_dir(package_info);

  if !app_dir.exists() {
-    fs::create_dir(&app_dir).unwrap();
+    fs::create_dir_all(&app_dir).unwrap();
  }
  if !log_dir.exists() {
-    fs::create_dir(&log_dir).unwrap();
+    fs::create_dir_all(&log_dir).unwrap();
  }
  if !profiles_dir.exists() {
-    fs::create_dir(&profiles_dir).unwrap();
+    fs::create_dir_all(&profiles_dir).unwrap();
  }

  init_log(&log_dir);
-  init_config_file(&app_dir, &res_dir);
+  if let Err(err) = init_config(&app_dir) {
+    log::error!("{err}");
+  }
+
+  // copy the resource file
+  let mmdb_path = app_dir.join("Country.mmdb");
+  let mmdb_tmpl = res_dir.join("Country.mmdb");
+  if !mmdb_path.exists() && mmdb_tmpl.exists() {
+    fs::copy(mmdb_tmpl, mmdb_path).unwrap();
+  }
+
+  // copy the wintun.dll
+  #[cfg(target_os = "windows")]
+  {
+    let wintun_path = app_dir.join("wintun.dll");
+    let wintun_tmpl = res_dir.join("wintun.dll");
+    if !wintun_path.exists() && wintun_tmpl.exists() {
+      fs::copy(wintun_tmpl, wintun_path).unwrap();
+    }
+  }
 }
--- a/src-tauri/src/utils/mod.rs
+++ b/src-tauri/src/utils/mod.rs
@@ -1,7 +1,8 @@
 pub mod config;
 pub mod dirs;
-pub mod fetch;
+pub mod help;
 pub mod init;
 pub mod resolve;
 pub mod server;
 pub mod sysopt;
+pub mod tmpl;
--- a/src-tauri/src/utils/resolve.rs
+++ b/src-tauri/src/utils/resolve.rs
@@ -1,25 +1,9 @@
 use super::{init, server};
-use crate::{core::Profiles, states};
+use crate::{core::Profiles, log_if_err, states};
 use tauri::{App, AppHandle, Manager};
-use tauri_plugin_shadows::Shadows;

 /// handle something when start app
 pub fn resolve_setup(app: &App) {
-  // set shadow when window decorations
-  let window = app.get_window("main").unwrap();
-  window.set_shadow(true);
-
-  // enable system blur
-  use tauri_plugin_vibrancy::Vibrancy;
-  #[cfg(target_os = "windows")]
-  window.apply_blur();
-  #[cfg(target_os = "macos")]
-  {
-    use tauri_plugin_vibrancy::MacOSVibrancy;
-    #[allow(deprecated)]
-    window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
-  }
-
  // setup a simple http server for singleton
  server::embed_server(&app.handle());

@@ -35,20 +19,26 @@ pub fn resolve_setup(app: &App) {
  let mut verge = verge_state.0.lock().unwrap();
  let mut profiles = profiles_state.0.lock().unwrap();

-  if let Err(err) = clash.run_sidecar() {
-    log::error!("{}", err);
-  }
+  log_if_err!(clash.run_sidecar());

  *profiles = Profiles::read_file();
-  if let Err(err) = profiles.activate(&clash) {
-    log::error!("{}", err);
-  }
+
+  clash.set_window(app.get_window("main"));
+  log_if_err!(clash.activate(&profiles));
+  log_if_err!(clash.activate_enhanced(&profiles, true, true));

  verge.init_sysproxy(clash.info.port.clone());
-  verge.init_launch(app.package_info());
-  if let Err(err) = verge.sync_launch() {
-    log::error!("{}", err);
-  }
+
+  log_if_err!(verge.init_launch());
+
+  verge.config.enable_system_proxy.map(|enable| {
+    log_if_err!(app
+      .tray_handle()
+      .get_item("system_proxy")
+      .set_selected(enable));
+  });
+
+  resolve_window(app, verge.config.enable_silent_start.clone());
 }

 /// reset system proxy
@@ -58,3 +48,41 @@ pub fn resolve_reset(app_handle: &AppHandle) {

  verge.reset_sysproxy();
 }
+
+/// customize the window theme
+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;
+    use window_vibrancy::apply_blur;
+
+    window.set_decorations(false).unwrap();
+    set_shadow(&window, true).unwrap();
+    apply_blur(&window, None).unwrap();
+  }
+
+  #[cfg(target_os = "macos")]
+  {
+    use tauri::LogicalSize;
+    use tauri::Size::Logical;
+    window.set_decorations(true).unwrap();
+    window
+      .set_size(Logical(LogicalSize {
+        width: 800.0,
+        height: 610.0,
+      }))
+      .unwrap();
+    // use tauri_plugin_vibrancy::MacOSVibrancy;
+    // #[allow(deprecated)]
+    // window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
+  }
+}
--- a/src-tauri/src/utils/server.rs
+++ b/src-tauri/src/utils/server.rs
@@ -4,7 +4,10 @@ use port_scanner::local_port_available;
 use tauri::{AppHandle, Manager};
 use warp::Filter;

+#[cfg(not(feature = "verge-dev"))]
 const SERVER_PORT: u16 = 33333;
+#[cfg(feature = "verge-dev")]
+const SERVER_PORT: u16 = 11233;

 /// check whether there is already exists
 pub fn check_singleton() -> Result<(), ()> {
--- a/src-tauri/src/utils/sysopt.rs
+++ b/src-tauri/src/utils/sysopt.rs
@@ -1,8 +1,10 @@
+use anyhow::Result;
 use serde::{Deserialize, Serialize};
-use std::io;

 #[cfg(target_os = "windows")]
 static DEFAULT_BYPASS: &str = "localhost;127.*;10.*;172.16.*;172.17.*;172.18.*;172.19.*;172.20.*;172.21.*;172.22.*;172.23.*;172.24.*;172.25.*;172.26.*;172.27.*;172.28.*;172.29.*;172.30.*;172.31.*;192.168.*;<local>";
+#[cfg(target_os = "linux")]
+static DEFAULT_BYPASS: &str = "localhost,127.0.0.1/8,::1";
 #[cfg(target_os = "macos")]
 static DEFAULT_BYPASS: &str =
  "192.168.0.0/16\n10.0.0.0/8\n172.16.0.0/12\n127.0.0.1\nlocalhost\n*.local\ntimestamp.apple.com\n";
@@ -34,10 +36,12 @@ impl SysProxyConfig {
      bypass: bypass.unwrap_or(DEFAULT_BYPASS.into()),
    }
  }
+}

-  #[cfg(target_os = "windows")]
+#[cfg(target_os = "windows")]
+impl SysProxyConfig {
  /// Get the windows system proxy config
-  pub fn get_sys() -> io::Result<Self> {
+  pub fn get_sys() -> Result<Self> {
    use winreg::enums::*;
    use winreg::RegKey;

@@ -54,9 +58,30 @@ impl SysProxyConfig {
    })
  }

-  #[cfg(target_os = "macos")]
+  /// Set the windows system proxy config
+  pub fn set_sys(&self) -> Result<()> {
+    use winreg::enums::*;
+    use winreg::RegKey;
+    let hkcu = RegKey::predef(HKEY_CURRENT_USER);
+    let cur_var = hkcu.open_subkey_with_flags(
+      "SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Internet Settings",
+      KEY_SET_VALUE,
+    )?;
+
+    let enable: u32 = if self.enable { 1u32 } else { 0u32 };
+
+    cur_var.set_value("ProxyEnable", &enable)?;
+    cur_var.set_value("ProxyServer", &self.server)?;
+    cur_var.set_value("ProxyOverride", &self.bypass)?;
+
+    Ok(())
+  }
+}
+
+#[cfg(target_os = "macos")]
+impl SysProxyConfig {
  /// Get the macos system proxy config
-  pub fn get_sys() -> io::Result<Self> {
+  pub fn get_sys() -> Result<Self> {
    use std::process::Command;

    let http = macproxy::get_proxy(&["-getwebproxy", MACOS_SERVICE])?;
@@ -82,63 +107,59 @@ impl SysProxyConfig {
    let bypass_output = Command::new("networksetup")
      .args(["-getproxybypassdomains", MACOS_SERVICE])
      .output()?;
-    let bypass = std::str::from_utf8(&bypass_output.stdout).unwrap_or(DEFAULT_BYPASS);
+
+    // change the format to xxx,xxx
+    let bypass = std::str::from_utf8(&bypass_output.stdout)
+      .unwrap_or(DEFAULT_BYPASS)
+      .to_string()
+      .split('\n')
+      .collect::<Vec<_>>()
+      .join(",");

    Ok(SysProxyConfig {
      enable,
      server,
-      bypass: bypass.into(),
+      bypass,
    })
  }

-  #[cfg(target_os = "windows")]
-  /// Set the windows system proxy config
-  pub fn set_sys(&self) -> io::Result<()> {
-    use winreg::enums::*;
-    use winreg::RegKey;
-    let hkcu = RegKey::predef(HKEY_CURRENT_USER);
-    let cur_var = hkcu.open_subkey_with_flags(
-      "SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Internet Settings",
-      KEY_SET_VALUE,
-    )?;
-
-    let enable: u32 = if self.enable { 1u32 } else { 0u32 };
-
-    cur_var.set_value("ProxyEnable", &enable)?;
-    cur_var.set_value("ProxyServer", &self.server)?;
-    cur_var.set_value("ProxyOverride", &self.bypass)
-  }
-
-  #[cfg(target_os = "macos")]
  /// Set the macos system proxy config
-  pub fn set_sys(&self) -> io::Result<()> {
+  pub fn set_sys(&self) -> Result<()> {
+    use std::process::Command;
+
    let enable = self.enable;
    let server = self.server.as_str();
+    let bypass = self.bypass.clone();
    macproxy::set_proxy("-setwebproxy", MACOS_SERVICE, enable, server)?;
    macproxy::set_proxy("-setsecurewebproxy", MACOS_SERVICE, enable, server)?;
-    macproxy::set_proxy("-setsocksfirewallproxy", MACOS_SERVICE, enable, server)
+    macproxy::set_proxy("-setsocksfirewallproxy", MACOS_SERVICE, enable, server)?;
+
+    let domains = bypass.split(",").collect::<Vec<_>>();
+    Command::new("networksetup")
+      .args([["-setproxybypassdomains", MACOS_SERVICE].to_vec(), domains].concat())
+      .status()?;
+
+    Ok(())
  }
 }

 #[cfg(target_os = "macos")]
 mod macproxy {
  use super::*;
+  use anyhow::bail;
  use std::process::Command;

  /// use networksetup
  /// get the target proxy config
-  pub(super) fn get_proxy(args: &[&str; 2]) -> io::Result<(String, String)> {
+  pub(super) fn get_proxy(args: &[&str; 2]) -> Result<(String, String)> {
    let output = Command::new("networksetup").args(args).output()?;
-    match std::str::from_utf8(&output.stdout) {
-      Ok(stdout) => {
-        let enable = parse(stdout, "Enabled:");
-        let server = parse(stdout, "Server:");
-        let port = parse(stdout, "Port:");
-        let server = format!("{}:{}", server, port);
-        Ok((enable.into(), server))
-      }
-      Err(_) => Err(io::Error::from_raw_os_error(1)),
-    }
+
+    let stdout = std::str::from_utf8(&output.stdout)?;
+    let enable = parse(stdout, "Enabled:");
+    let server = parse(stdout, "Server:");
+    let port = parse(stdout, "Port:");
+    let server = format!("{server}:{port}");
+    Ok((enable.into(), server))
  }

  /// use networksetup
@@ -148,17 +169,17 @@ mod macproxy {
    device: &str,
    enable: bool,
    server: &str,
-  ) -> io::Result<()> {
+  ) -> Result<()> {
    let mut split = server.split(":");
-    let domain = split.next();
+    let host = split.next();
    let port = split.next();

    // can not parse the field
-    if domain.is_none() || port.is_none() {
-      return Err(io::Error::from_raw_os_error(1));
+    if host.is_none() || port.is_none() {
+      bail!("failed to parse the server into host:port");
    }

-    let args = vec![target, device, domain.unwrap(), port.unwrap()];
+    let args = vec![target, device, host.unwrap(), port.unwrap()];
    Command::new("networksetup").args(&args).status()?;

    let target_state = String::from(target) + "state";
@@ -169,7 +190,7 @@ mod macproxy {
  }

  /// parse the networksetup output
-  pub(super) fn parse<'a>(target: &'a str, key: &'a str) -> &'a str {
+  fn parse<'a>(target: &'a str, key: &'a str) -> &'a str {
    match target.find(key) {
      Some(idx) => {
        let idx = idx + key.len();
@@ -209,3 +230,137 @@ mod macproxy {
    dbg!(sysproxy.set_sys().unwrap());
  }
 }
+
+///
+/// Linux Desktop System Proxy Supports
+/// by using `gsettings`
+#[cfg(target_os = "linux")]
+impl SysProxyConfig {
+  /// Get the system proxy config [http/https/socks]
+  pub fn get_sys() -> Result<Self> {
+    use std::process::Command;
+
+    let schema = "org.gnome.system.proxy";
+
+    // get enable
+    let mode = Command::new("gsettings")
+      .args(["get", schema, "mode"])
+      .output()?;
+    let mode = std::str::from_utf8(&mode.stdout)?;
+    let enable = mode == "manual";
+
+    // get bypass
+    // Todo: parse the ignore-hosts
+    // ['aaa', 'bbb'] -> aaa,bbb
+    let ignore = Command::new("gsettings")
+      .args(["get", schema, "ignore-hosts"])
+      .output()?;
+    let ignore = std::str::from_utf8(&ignore.stdout)?;
+    let bypass = ignore.to_string();
+
+    let http = Self::get_proxy("http")?;
+    let https = Self::get_proxy("https")?;
+    let socks = Self::get_proxy("socks")?;
+
+    let mut server = "".into();
+
+    if socks.len() > 0 {
+      server = socks;
+    }
+    if https.len() > 0 {
+      server = https;
+    }
+    if http.len() > 0 {
+      server = http;
+    }
+
+    Ok(SysProxyConfig {
+      enable,
+      server,
+      bypass,
+    })
+  }
+
+  /// Get the system proxy config [http/https/socks]
+  pub fn set_sys(&self) -> Result<()> {
+    use anyhow::bail;
+    use std::process::Command;
+
+    let enable = self.enable;
+    let server = self.server.as_str();
+    let bypass = self.bypass.clone();
+    let schema = "org.gnome.system.proxy";
+
+    if enable {
+      let mut split = server.split(":");
+      let host = split.next();
+      let port = split.next();
+
+      if port.is_none() {
+        bail!("failed to parse the port");
+      }
+
+      let host = format!("'{}'", host.unwrap_or("127.0.0.1"));
+      let host = host.as_str();
+      let port = port.unwrap();
+
+      let http = format!("{schema}.http");
+      Command::new("gsettings")
+        .args(["set", http.as_str(), "host", host])
+        .status()?;
+      Command::new("gsettings")
+        .args(["set", http.as_str(), "port", port])
+        .status()?;
+
+      let https = format!("{schema}.https");
+      Command::new("gsettings")
+        .args(["set", https.as_str(), "host", host])
+        .status()?;
+      Command::new("gsettings")
+        .args(["set", https.as_str(), "port", port])
+        .status()?;
+
+      let socks = format!("{schema}.socks");
+      Command::new("gsettings")
+        .args(["set", socks.as_str(), "host", host])
+        .status()?;
+      Command::new("gsettings")
+        .args(["set", socks.as_str(), "port", port])
+        .status()?;
+
+      // set bypass
+      // Todo: parse the ignore-hosts
+      // aaa,bbb,cccc -> ['aaa', 'bbb', 'ccc']
+      Command::new("gsettings")
+        .args(["set", schema, "ignore-hosts", bypass.as_str()]) //  todo
+        .status()?;
+    }
+
+    let mode = if enable { "'manual'" } else { "'none'" };
+    Command::new("gsettings")
+      .args(["set", schema, "mode", mode])
+      .status()?;
+
+    Ok(())
+  }
+
+  /// help function
+  fn get_proxy(typ: &str) -> Result<String> {
+    use std::process::Command;
+
+    let schema = format!("org.gnome.system.proxy.{typ}");
+    let schema = schema.as_str();
+
+    let host = Command::new("gsettings")
+      .args(["get", schema, "host"])
+      .output()?;
+    let host = std::str::from_utf8(&host.stdout)?;
+
+    let port = Command::new("gsettings")
+      .args(["get", schema, "port"])
+      .output()?;
+    let port = std::str::from_utf8(&port.stdout)?;
+
+    Ok(format!("{host}:{port}"))
+  }
+}
--- a/src-tauri/src/utils/tmpl.rs
+++ b/src-tauri/src/utils/tmpl.rs
@@ -0,0 +1,70 @@
+///! Some config file template
+
+/// template for clash core `config.yaml`
+pub const CLASH_CONFIG: &[u8] = br#"# Default Config For Clash Core
+
+mixed-port: 7890
+log-level: info
+allow-lan: false
+external-controller: 127.0.0.1:9090
+mode: rule
+secret: ""
+"#;
+
+/// template for `profiles.yaml`
+pub const PROFILES_CONFIG: &[u8] = b"# Profiles Config for Clash Verge
+
+current: ~
+items: ~
+";
+
+/// template for `verge.yaml`
+pub const VERGE_CONFIG: &[u8] = b"# Defaulf Config For Clash Verge
+
+language: en
+theme_mode: light
+theme_blur: false
+traffic_graph: true
+enable_self_startup: false
+enable_system_proxy: false
+enable_proxy_guard: false
+proxy_guard_duration: 10
+system_proxy_bypass: localhost;127.*;10.*;192.168.*;<local>
+";
+
+/// template for new a profile item
+pub const ITEM_LOCAL: &str = "# Profile Template for clash verge
+
+proxies:
+
+proxy-groups:
+
+rules:
+";
+
+/// enhanced profile
+pub const ITEM_MERGE: &str = "# Merge Template for clash verge
+# The `Merge` format used to enhance profile
+
+prepend-rules:
+
+prepend-proxies:
+
+prepend-proxy-groups:
+
+append-rules:
+
+append-proxies:
+
+append-proxy-groups:
+";
+
+/// enhanced profile
+pub const ITEM_SCRIPT: &str = "// Should define the `main` function
+// The argument to this function is the clash config 
+// or the result of the previous handler
+// so you should return the config after processing
+function main(params) {
+  return params;
+}
+";
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "package": {
-    "productName": "clash-verge",
-    "version": "0.0.15"
+    "productName": "Clash Verge",
+    "version": "0.0.27"
  },
  "build": {
    "distDir": "../dist",
@@ -27,7 +27,7 @@
      ],
      "resources": ["resources"],
      "externalBin": ["sidecar/clash"],
-      "copyright": "© 2021 zzzgydi All Rights Reserved",
+      "copyright": "© 2022 zzzgydi All Rights Reserved",
      "category": "DeveloperTool",
      "shortDescription": "A Clash GUI based on tauri.",
      "longDescription": "A Clash GUI based on tauri.",
@@ -52,7 +52,8 @@
    "updater": {
      "active": true,
      "endpoints": [
-        "https://github.com/zzzgydi/clash-verge/releases/download/updater/update.json"
+        "https://github.com/zzzgydi/clash-verge/releases/download/updater/update.json",
+        "https://hub.fastgit.xyz/zzzgydi/clash-verge/releases/download/updater/update-proxy.json"
      ],
      "dialog": false,
      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDExNUFBNTBBN0FDNEFBRTUKUldUbHFzUjZDcVZhRVRJM25NS3NkSFlFVElxUkNZMzZ6bHUwRVJjb2F3alJXVzRaeDdSaTA2YWYK"
@@ -63,6 +64,9 @@
      },
      "window": {
        "all": true
+      },
+      "process": {
+        "all": true
      }
    },
    "windows": [
@@ -79,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/index.scss
+++ b/src/assets/styles/index.scss
@@ -4,6 +4,7 @@ body {
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
+  user-select: none;
 }

 :root {
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -18,17 +18,20 @@

    .the-logo {
      position: relative;
-      flex: 0 1 180px;
+      flex: 0 1 168px;
      width: 100%;
-      max-width: 180px;
-      max-height: 180px;
+      max-width: 168px;
+      max-height: 168px;
      margin: 0 auto;
      padding: 0 8px;
      text-align: center;
      box-sizing: border-box;

-      img {
+      img,
+      svg {
        width: 100%;
+        height: 100%;
+        pointer-events: none;
      }

      .the-newbtn {
@@ -72,10 +75,20 @@

    .the-content {
      position: absolute;
-      top: 30px;
+      top: 0;
      left: 0;
      right: 2px;
      bottom: 10px;
    }
  }
 }
+
+.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,4 +1,20 @@
+import dayjs from "dayjs";
+import { useLockFn } from "ahooks";
+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("span")(({ theme }) => ({
+  display: "inline-block",
+  fontSize: "12px",
+  padding: "0 4px",
+  lineHeight: 1.375,
+  border: "1px solid #ccc",
+  borderRadius: 4,
+  marginRight: "0.1em",
+  transform: "scale(0.92)",
+}));

 interface Props {
  value: ApiType.ConnectionsItem;
@@ -7,7 +23,37 @@ interface Props {
 const ConnectionItem = (props: Props) => {
  const { value } = props;

-  return <div>{value.metadata.host || value.metadata.destinationIP}</div>;
+  const onDelete = useLockFn(async () => deleteConnection(value.id));
+
+  return (
+    <ListItem
+      dense
+      secondaryAction={
+        <IconButton edge="end" onClick={onDelete}>
+          <CloseRounded />
+        </IconButton>
+      }
+    >
+      <ListItemText
+        primary={value.metadata.host || value.metadata.destinationIP}
+        secondary={
+          <>
+            <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>
+          </>
+        }
+      />
+    </ListItem>
+  );
 };

 export default ConnectionItem;
--- a/src/components/layout/layout-traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@@ -1,15 +1,41 @@
+import useSWR from "swr";
 import { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
-import { getInfomation } from "../../services/api";
+import { listen } from "@tauri-apps/api/event";
 import { ApiType } from "../../services/types";
-import { atomClashPort } from "../../states/setting";
+import { getInfomation } from "../../services/api";
+import { getVergeConfig } from "../../services/cmds";
+import { atomClashPort } from "../../services/states";
+import useLogSetup from "./use-log-setup";
+import useTrafficGraph from "./use-traffic-graph";
 import parseTraffic from "../../utils/parse-traffic";

+// setup the traffic
 const LayoutTraffic = () => {
  const portValue = useRecoilValue(atomClashPort);
  const [traffic, setTraffic] = useState({ up: 0, down: 0 });
+  const { canvasRef, appendData, toggleStyle } = useTrafficGraph();
+  const [refresh, setRefresh] = useState({});
+
+  // whether hide traffic graph
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
+  const trafficGraph = data?.traffic_graph ?? true;
+
+  // setup log ws during layout
+  useLogSetup();
+
+  useEffect(() => {
+    // should reconnect the traffic ws
+    const unlisten = listen("verge://refresh-clash-config", () =>
+      setRefresh({})
+    );
+
+    return () => {
+      unlisten.then((fn) => fn());
+    };
+  }, []);

  useEffect(() => {
    let ws: WebSocket | null = null;
@@ -19,12 +45,14 @@ const LayoutTraffic = () => {
      ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);

      ws.addEventListener("message", (event) => {
-        setTraffic(JSON.parse(event.data) as ApiType.TrafficItem);
+        const data = JSON.parse(event.data) as ApiType.TrafficItem;
+        appendData(data);
+        setTraffic(data);
      });
    });

    return () => ws?.close();
-  }, [portValue]);
+  }, [portValue, refresh]);

  const [up, upUnit] = parseTraffic(traffic.up);
  const [down, downUnit] = parseTraffic(traffic.down);
@@ -44,7 +72,14 @@ const LayoutTraffic = () => {
  };

  return (
-    <Box width="110px">
+    <Box width="110px" position="relative" onClick={toggleStyle}>
+      {trafficGraph && (
+        <canvas
+          ref={canvasRef}
+          style={{ width: "100%", height: 60, marginBottom: 6 }}
+        />
+      )}
+
      <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
        <ArrowUpward
          fontSize="small"
--- a/src/components/layout/update-button.tsx
+++ b/src/components/layout/update-button.tsx
@@ -32,7 +32,9 @@ const UpdateButton = (props: Props) => {
        New
      </Button>

-      <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+      {dialogOpen && (
+        <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+      )}
    </>
  );
 };
--- a/src/components/layout/update-dialog.tsx
+++ b/src/components/layout/update-dialog.tsx
@@ -1,22 +1,30 @@
 import useSWR from "swr";
-import { useState } from "react";
-import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
-import { relaunch } from "@tauri-apps/api/process";
+import snarkdown from "snarkdown";
+import { useMemo } from "react";
+import { useRecoilState } from "recoil";
 import {
+  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
-  DialogContentText,
  DialogTitle,
+  styled,
 } from "@mui/material";
+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 {
  open: boolean;
  onClose: () => void;
 }

-let uploadingState = false;
+const UpdateLog = styled(Box)(() => ({
+  "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
+}));

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

  const onUpdate = async () => {
+    if (updateState) return;
+    setUpdateState(true);
+
    try {
-      setUploading(true);
-      uploadingState = true;
+      await killSidecars();
      await installUpdate();
      await relaunch();
-    } catch (error) {
-      console.log(error);
-      window.alert("Failed to upload, please try again.");
+    } catch (err: any) {
+      await restartSidecar();
+      Notice.error(err?.message || err.toString());
    } finally {
-      setUploading(true);
-      uploadingState = true;
+      setUpdateState(false);
    }
  };

+  // markdown parser
+  const parseContent = useMemo(() => {
+    if (!updateInfo?.manifest?.body) {
+      return "New Version is available";
+    }
+    return snarkdown(updateInfo?.manifest?.body);
+  }, [updateInfo]);
+
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>New Version v{updateInfo?.manifest?.version}</DialogTitle>
+
      <DialogContent sx={{ minWidth: 360, maxWidth: 400, maxHeight: "50vh" }}>
-        <DialogContentText>{updateInfo?.manifest?.body}</DialogContentText>
+        <UpdateLog dangerouslySetInnerHTML={{ __html: parseContent }} />
      </DialogContent>
+
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button
-          variant="contained"
          autoFocus
+          variant="contained"
+          disabled={updateState}
          onClick={onUpdate}
-          disabled={uploading}
        >
          Update
        </Button>
--- 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-log-setup.ts
+++ b/src/components/layout/use-log-setup.ts
@@ -0,0 +1,43 @@
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { useSetRecoilState } from "recoil";
+import { listen } from "@tauri-apps/api/event";
+import { ApiType } from "../../services/types";
+import { getInfomation } from "../../services/api";
+import { atomLogData } from "../../services/states";
+
+const MAX_LOG_NUM = 1000;
+
+// setup the log websocket
+export default function useLogSetup() {
+  const [refresh, setRefresh] = useState({});
+  const setLogData = useSetRecoilState(atomLogData);
+
+  useEffect(() => {
+    let ws: WebSocket = null!;
+
+    const handler = (event: MessageEvent<any>) => {
+      const data = JSON.parse(event.data) as ApiType.LogItem;
+      const time = dayjs().format("MM-DD HH:mm:ss");
+      setLogData((l) => {
+        if (l.length >= MAX_LOG_NUM) l.shift();
+        return [...l, { ...data, time }];
+      });
+    };
+
+    getInfomation().then((info) => {
+      const { server = "", secret = "" } = info;
+      ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+      ws.addEventListener("message", handler);
+    });
+
+    const unlisten = listen("verge://refresh-clash-config", () =>
+      setRefresh({})
+    );
+
+    return () => {
+      ws?.close();
+      unlisten?.then((fn) => fn());
+    };
+  }, [refresh]);
+}
--- a/src/components/layout/use-traffic-graph.ts
+++ b/src/components/layout/use-traffic-graph.ts
@@ -0,0 +1,156 @@
+import { useEffect, useRef } from "react";
+import { useTheme } from "@mui/material";
+
+const minPoint = 10;
+const maxPoint = 36;
+
+const refLineAlpha = 1;
+const refLineWidth = 2;
+
+const upLineAlpha = 0.6;
+const upLineWidth = 4;
+
+const downLineAlpha = 1;
+const downLineWidth = 4;
+
+/**
+ * draw the traffic graph
+ */
+export default function useTrafficGraph() {
+  type TrafficData = { up: number; down: number };
+  const listRef = useRef<TrafficData[]>([]);
+  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;
+    const l1 = height * 0.2;
+    const l2 = height * 0.6;
+    const dl = height * 0.4;
+
+    context.clearRect(0, 0, width, height);
+
+    // Reference lines
+    context.beginPath();
+    context.globalAlpha = refLineAlpha;
+    context.lineWidth = refLineWidth;
+    context.strokeStyle = refLineColor;
+    context.moveTo(0, l1);
+    context.lineTo(width, l1);
+    context.moveTo(0, l2);
+    context.lineTo(width, l2);
+    context.stroke();
+    context.closePath();
+
+    const countY = (value: number) => {
+      let v = value;
+      if (v < 1024) v = (v / 1024) * dl;
+      else if (v < 1048576) v = dl + (v / 1048576) * dl;
+      else v = 2 * dl + (v / 10485760) * l1;
+      return height - v;
+    };
+
+    const drawBezier = (list: number[]) => {
+      const len = list.length;
+      const size = Math.min(Math.max(len, minPoint), maxPoint);
+      const axis = width / size;
+
+      let lx = 0;
+      let ly = height;
+      let llx = 0;
+      let lly = height;
+
+      list.forEach((val, index) => {
+        const x = (axis * index) | 0;
+        const y = countY(val);
+        const s = 0.25;
+
+        if (index === 0) context.moveTo(x, y);
+        else {
+          let nx = (axis * (index + 1)) | 0;
+          let ny = index < len - 1 ? countY(list[index + 1]) | 0 : 0;
+          const ax = (lx + (x - llx) * s) | 0;
+          const ay = (ly + (y - lly) * s) | 0;
+          const bx = (x - (nx - lx) * s) | 0;
+          const by = (y - (ny - ly) * s) | 0;
+          context.bezierCurveTo(ax, ay, bx, by, x, y);
+        }
+
+        llx = lx;
+        lly = ly;
+        lx = x;
+        ly = y;
+      });
+    };
+
+    const drawLine = (list: number[]) => {
+      const len = list.length;
+      const size = Math.min(Math.max(len, minPoint), maxPoint);
+      const axis = width / size;
+
+      list.forEach((val, index) => {
+        const x = (axis * index) | 0;
+        const y = countY(val);
+
+        if (index === 0) context.moveTo(x, y);
+        else context.lineTo(x, y);
+      });
+    };
+
+    const listUp = listRef.current.map((v) => v.up);
+    const listDown = listRef.current.map((v) => v.down);
+    const lineStyle = styleRef.current;
+
+    context.beginPath();
+    context.globalAlpha = upLineAlpha;
+    context.lineWidth = upLineWidth;
+    context.strokeStyle = upLineColor;
+    lineStyle ? drawLine(listUp) : drawBezier(listUp);
+    context.stroke();
+    context.closePath();
+
+    context.beginPath();
+    context.globalAlpha = downLineAlpha;
+    context.lineWidth = downLineWidth;
+    context.strokeStyle = downLineColor;
+    lineStyle ? drawLine(listDown) : drawBezier(listDown);
+    context.stroke();
+    context.closePath();
+  };
+
+  const appendData = (data: TrafficData) => {
+    const list = listRef.current;
+    if (list.length > maxPoint) list.shift();
+    list.push(data);
+    drawGraph();
+  };
+
+  const toggleStyle = () => {
+    styleRef.current = !styleRef.current;
+    drawGraph();
+  };
+
+  return {
+    canvasRef,
+    appendData,
+    toggleStyle,
+  };
+}
--- 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/file-input.tsx
+++ b/src/components/profile/file-input.tsx
@@ -0,0 +1,61 @@
+import { useRef, useState } from "react";
+import { useLockFn } from "ahooks";
+import { Box, Button, Typography } from "@mui/material";
+
+interface Props {
+  onChange: (value: string) => void;
+}
+
+const FileInput = (props: Props) => {
+  const { onChange } = props;
+
+  // file input
+  const inputRef = useRef<any>();
+  const [loading, setLoading] = useState(false);
+  const [fileName, setFileName] = useState("");
+
+  const onFileInput = useLockFn(async (e: any) => {
+    const file = e.target.files?.[0] as File;
+
+    if (!file) return;
+
+    setFileName(file.name);
+    setLoading(true);
+
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        resolve(null);
+        onChange(event.target?.result as string);
+      };
+      reader.onerror = reject;
+      reader.readAsText(file);
+    }).finally(() => setLoading(false));
+  });
+
+  return (
+    <Box sx={{ mt: 2, mb: 1, display: "flex", alignItems: "center" }}>
+      <Button
+        variant="outlined"
+        sx={{ flex: "none" }}
+        onClick={() => inputRef.current?.click()}
+      >
+        Choose File
+      </Button>
+
+      <input
+        type="file"
+        accept=".yaml,.yml"
+        ref={inputRef}
+        style={{ display: "none" }}
+        onChange={onFileInput}
+      />
+
+      <Typography noWrap sx={{ ml: 1 }}>
+        {loading ? "Loading..." : fileName}
+      </Typography>
+    </Box>
+  );
+};
+
+export default FileInput;
--- a/src/components/profile/profile-edit.tsx
+++ b/src/components/profile/profile-edit.tsx
@@ -0,0 +1,137 @@
+import { mutate } from "swr";
+import { useEffect, useState } from "react";
+import { useLockFn, useSetState } from "ahooks";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+} from "@mui/material";
+import { Settings } from "@mui/icons-material";
+import { CmdType } from "../../services/types";
+import { patchProfile } from "../../services/cmds";
+import Notice from "../base/base-notice";
+
+interface Props {
+  open: boolean;
+  itemData: CmdType.ProfileItem;
+  onClose: () => void;
+}
+
+// edit the profile item
+// remote / local file / merge / script
+const ProfileEdit = (props: Props) => {
+  const { open, itemData, onClose } = props;
+  const [form, setForm] = useSetState({ ...itemData });
+  const [option, setOption] = useSetState(itemData.option ?? {});
+  const [showOpt, setShowOpt] = useState(!!itemData.option);
+
+  useEffect(() => {
+    if (itemData) {
+      setForm({ ...itemData });
+      setOption(itemData.option ?? {});
+      setShowOpt(!!itemData.option?.user_agent);
+    }
+  }, [itemData]);
+
+  const onUpdate = useLockFn(async () => {
+    try {
+      const { uid } = itemData;
+      const { name, desc, url } = form;
+      const option_ = itemData.type === "remote" ? option : undefined;
+
+      if (itemData.type === "remote" && !url) {
+        throw new Error("Remote URL should not be null");
+      }
+
+      await patchProfile(uid, { uid, name, desc, url, option: option_ });
+      setShowOpt(false);
+      mutate("getProfiles");
+      onClose();
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
+
+  const textFieldProps = {
+    fullWidth: true,
+    size: "small",
+    margin: "normal",
+    variant: "outlined",
+  } as const;
+
+  const type =
+    form.type ||
+    (form.url ? "remote" : form.file?.endsWith("js") ? "script" : "local");
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle sx={{ pb: 0.5 }}>Edit Profile</DialogTitle>
+
+      <DialogContent sx={{ width: 336, pb: 1 }}>
+        <TextField
+          {...textFieldProps}
+          disabled
+          label="Type"
+          value={type}
+          sx={{ input: { textTransform: "capitalize" } }}
+        />
+
+        <TextField
+          {...textFieldProps}
+          autoFocus
+          label="Name"
+          value={form.name}
+          onChange={(e) => setForm({ name: e.target.value })}
+        />
+
+        <TextField
+          {...textFieldProps}
+          label="Descriptions"
+          value={form.desc}
+          onChange={(e) => setForm({ desc: e.target.value })}
+        />
+
+        {type === "remote" && (
+          <TextField
+            {...textFieldProps}
+            label="Subscription Url"
+            value={form.url}
+            onChange={(e) => setForm({ url: e.target.value })}
+          />
+        )}
+
+        {showOpt && (
+          <TextField
+            {...textFieldProps}
+            label="User Agent"
+            value={option.user_agent}
+            onChange={(e) => setOption({ user_agent: e.target.value })}
+          />
+        )}
+      </DialogContent>
+
+      <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>
+        {form.type === "remote" && (
+          <IconButton
+            size="small"
+            sx={{ position: "absolute", left: 18 }}
+            onClick={() => setShowOpt((o) => !o)}
+          >
+            <Settings />
+          </IconButton>
+        )}
+
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onUpdate} variant="contained">
+          Update
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ProfileEdit;
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -1,5 +1,9 @@
-import React, { useRef, useState } from "react";
 import dayjs from "dayjs";
+import { useState } from "react";
+import { useLockFn } from "ahooks";
+import { useSWRConfig } from "swr";
+import { useRecoilState } from "recoil";
+import { useTranslation } from "react-i18next";
 import {
  alpha,
  Box,
@@ -11,15 +15,15 @@ import {
  MenuItem,
  Menu,
 } from "@mui/material";
-import { useSWRConfig } from "swr";
 import { RefreshRounded } from "@mui/icons-material";
 import { CmdType } from "../../services/types";
+import { atomLoadingCache } from "../../services/states";
 import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
-import Notice from "../base/base-notice";
 import parseTraffic from "../../utils/parse-traffic";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime);
+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 }) => ({
  width: "100%",
@@ -37,38 +41,49 @@ const round = keyframes`
  to { transform: rotate(360deg); }
 `;

+const OS = getSystem();
+
 interface Props {
-  index: number;
  selected: boolean;
  itemData: CmdType.ProfileItem;
  onSelect: (force: boolean) => void;
 }

-const ProfileItem: React.FC<Props> = (props) => {
-  const { index, selected, itemData, onSelect } = props;
+const ProfileItem = (props: Props) => {
+  const { selected, itemData, onSelect } = props;

+  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
-  const [loading, setLoading] = useState(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);
  const progress = Math.round(((download + upload) * 100) / (total + 0.1));
  const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";

-  // url or file mode
-  const isUrlMode = itemData.url && extra;
+  // local file mode
+  // remote file mode
+  // subscription url mode
+  const hasUrl = !!itemData.url;
+  const hasExtra = !!extra; // only subscription url has extra info

-  const onView = async () => {
+  const loading = loadingCache[itemData.uid] ?? false;
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [fileOpen, setFileOpen] = useState(false);
+
+  const onEditInfo = () => {
    setAnchorEl(null);
-    try {
-      await viewProfile(index);
-    } catch (err: any) {
-      Notice.error(err.toString());
-    }
+    setEditOpen(true);
+  };
+
+  const onEditFile = () => {
+    setAnchorEl(null);
+    setFileOpen(true);
  };

  const onForceSelect = () => {
@@ -76,43 +91,38 @@ const ProfileItem: React.FC<Props> = (props) => {
    onSelect(true);
  };

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

-  const deleteRef = useRef(false);
-  const onDelete = async () => {
+  const onDelete = useLockFn(async () => {
    setAnchorEl(null);
-    if (deleteRef.current) return;
-    deleteRef.current = true;
    try {
-      await deleteProfile(index);
+      await deleteProfile(itemData.uid);
      mutate("getProfiles");
    } catch (err: any) {
-      Notice.error(err.toString());
-    } finally {
-      deleteRef.current = false;
+      Notice.error(err?.message || err.toString());
    }
-  };
-
-  const handleContextMenu = (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
-    const { clientX, clientY } = event;
-    setPosition({ top: clientY, left: clientX });
-    setAnchorEl(event.currentTarget);
-    event.preventDefault();
-  };
+  });

  const boxStyle = {
    height: 26,
@@ -123,14 +133,18 @@ const ProfileItem: React.FC<Props> = (props) => {

  const urlModeMenu = [
    { label: "Select", handler: onForceSelect },
-    { label: "View", 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: onView },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
    { label: "Delete", handler: onDelete },
  ];

@@ -165,7 +179,12 @@ const ProfileItem: React.FC<Props> = (props) => {
          return { bgcolor, color, "& h2": { color: h2color } };
        }}
        onClick={() => onSelect(false)}
-        onContextMenu={handleContextMenu}
+        onContextMenu={(event) => {
+          const { clientX, clientY } = event;
+          setPosition({ top: clientY, left: clientX });
+          setAnchorEl(event.currentTarget);
+          event.preventDefault();
+        }}
      >
        <Box display="flex" justifyContent="space-between">
          <Typography
@@ -178,7 +197,8 @@ const ProfileItem: React.FC<Props> = (props) => {
            {name}
          </Typography>

-          {isUrlMode && (
+          {/* only if has url can it be updated */}
+          {hasUrl && (
            <IconButton
              sx={{
                width: 26,
@@ -189,7 +209,7 @@ const ProfileItem: React.FC<Props> = (props) => {
              disabled={loading}
              onClick={(e) => {
                e.stopPropagation();
-                onUpdateWrapper(false)();
+                onUpdate(false);
              }}
            >
              <RefreshRounded />
@@ -197,43 +217,43 @@ const ProfileItem: React.FC<Props> = (props) => {
          )}
        </Box>

-        {isUrlMode ? (
-          <>
-            <Box sx={boxStyle}>
-              <Typography noWrap title={`From: ${from}`}>
-                {from}
-              </Typography>
+        {/* the second line show url's info or description */}
+        {hasUrl ? (
+          <Box sx={boxStyle}>
+            <Typography noWrap title={`From: ${from}`}>
+              {from}
+            </Typography>

-              <Typography
-                noWrap
-                flex="1 0 auto"
-                fontSize={14}
-                textAlign="right"
-                title="updated time"
-              >
-                {fromnow}
-              </Typography>
-            </Box>
-
-            <Box sx={{ ...boxStyle, fontSize: 14 }}>
-              <span title="used / total">
-                {parseTraffic(upload + download)} / {parseTraffic(total)}
-              </span>
-              <span title="expire time">{expire}</span>
-            </Box>
-          </>
+            <Typography
+              noWrap
+              flex="1 0 auto"
+              fontSize={14}
+              textAlign="right"
+              title="updated time"
+            >
+              {fromnow}
+            </Typography>
+          </Box>
        ) : (
-          <>
-            <Box sx={boxStyle}>
-              <Typography noWrap title={itemData.desc}>
-                {itemData.desc}
-              </Typography>
-            </Box>
+          <Box sx={boxStyle}>
+            <Typography noWrap title={itemData.desc}>
+              {itemData.desc}
+            </Typography>
+          </Box>
+        )}

-            <Box sx={{ ...boxStyle, fontSize: 14, justifyContent: "flex-end" }}>
-              <span title="updated time">{parseExpire(updated)}</span>
-            </Box>
-          </>
+        {/* the third line show extra info or last updated time */}
+        {hasExtra ? (
+          <Box sx={{ ...boxStyle, fontSize: 14 }}>
+            <span title="used / total">
+              {parseTraffic(upload + download)} / {parseTraffic(total)}
+            </span>
+            <span title="expire time">{expire}</span>
+          </Box>
+        ) : (
+          <Box sx={{ ...boxStyle, fontSize: 14, justifyContent: "flex-end" }}>
+            <span title="updated time">{parseExpire(updated)}</span>
+          </Box>
        )}

        <LinearProgress
@@ -249,13 +269,42 @@ const ProfileItem: React.FC<Props> = (props) => {
        onClose={() => setAnchorEl(null)}
        anchorPosition={position}
        anchorReference="anchorPosition"
+        transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
+        onContextMenu={(e) => {
+          setAnchorEl(null);
+          e.preventDefault();
+        }}
      >
-        {(isUrlMode ? urlModeMenu : fileModeMenu).map((item) => (
-          <MenuItem key={item.label} onClick={item.handler}>
-            {item.label}
+        {(hasUrl ? urlModeMenu : fileModeMenu).map((item) => (
+          <MenuItem
+            key={item.label}
+            onClick={item.handler}
+            sx={{ minWidth: 133 }}
+          >
+            {t(item.label)}
          </MenuItem>
        ))}
      </Menu>
+
+      {editOpen && (
+        <ProfileEdit
+          open={editOpen}
+          itemData={itemData}
+          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
@@ -0,0 +1,272 @@
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLockFn } from "ahooks";
+import {
+  alpha,
+  Box,
+  Chip,
+  styled,
+  Typography,
+  MenuItem,
+  Menu,
+} from "@mui/material";
+import { CmdType } from "../../services/types";
+import { viewProfile } from "../../services/cmds";
+import getSystem from "../../utils/get-system";
+import enhance from "../../services/enhance";
+import ProfileEdit from "./profile-edit";
+import FileEditor from "./file-editor";
+import Notice from "../base/base-notice";
+
+const Wrapper = styled(Box)(({ theme }) => ({
+  width: "100%",
+  display: "block",
+  cursor: "pointer",
+  textAlign: "left",
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[2],
+  padding: "8px 16px",
+  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;
+}
+
+// profile enhanced item
+const ProfileMore = (props: Props) => {
+  const {
+    selected,
+    itemData,
+    enableNum,
+    onEnable,
+    onDisable,
+    onMoveTop,
+    onMoveEnd,
+    onDelete,
+  } = props;
+
+  const { uid, type } = itemData;
+  const { t } = useTranslation();
+
+  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
+  useEffect(() => enhance.listen(uid, setStatus), [uid]);
+
+  // error during enhanced mode
+  const hasError = selected && status?.status === "error";
+
+  const onEditInfo = () => {
+    setAnchorEl(null);
+    setEditOpen(true);
+  };
+
+  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 fnWrapper = (fn: () => void) => () => {
+    setAnchorEl(null);
+    return fn();
+  };
+
+  const showMove = enableNum > 1 && !hasError;
+
+  const enableMenu = [
+    { 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: fnWrapper(onEnable) },
+    { label: "Edit Info", handler: onEditInfo },
+    { label: "Edit File", handler: onEditFile },
+    { label: "Open File", handler: onOpenFile },
+    { label: "Delete", handler: fnWrapper(onDelete) },
+  ];
+
+  const boxStyle = {
+    height: 26,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    lineHeight: 1,
+  };
+
+  return (
+    <>
+      <Wrapper
+        sx={({ palette }) => {
+          // todo
+          // 区分 selected 和 error 和 mode 下各种颜色的排列组合
+          const { mode, primary, text, grey, error } = palette;
+          const key = `${mode}-${selected}`;
+          const bgkey = hasError ? `${mode}-err` : key;
+
+          const bgcolor = {
+            "light-true": alpha(primary.main, 0.15),
+            "light-false": palette.background.paper,
+            "dark-true": alpha(primary.main, 0.35),
+            "dark-false": alpha(grey[700], 0.35),
+            "light-err": alpha(error.main, 0.12),
+            "dark-err": alpha(error.main, 0.3),
+          }[bgkey]!;
+
+          const color = {
+            "light-true": text.secondary,
+            "light-false": text.secondary,
+            "dark-true": alpha(text.secondary, 0.6),
+            "dark-false": alpha(text.secondary, 0.6),
+          }[key]!;
+
+          const h2color = {
+            "light-true": primary.main,
+            "light-false": text.primary,
+            "dark-true": primary.light,
+            "dark-false": text.primary,
+          }[key]!;
+
+          return { bgcolor, color, "& h2": { color: h2color } };
+        }}
+        // onClick={() => onSelect(false)}
+        onContextMenu={(event) => {
+          const { clientX, clientY } = event;
+          setPosition({ top: clientY, left: clientX });
+          setAnchorEl(event.currentTarget);
+          event.preventDefault();
+        }}
+      >
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography
+            width="calc(100% - 52px)"
+            variant="h6"
+            component="h2"
+            noWrap
+            title={itemData.name}
+          >
+            {itemData.name}
+          </Typography>
+
+          <Chip
+            label={type}
+            color="primary"
+            size="small"
+            variant="outlined"
+            sx={{ textTransform: "capitalize" }}
+          />
+        </Box>
+
+        <Box sx={boxStyle}>
+          {hasError ? (
+            <Typography
+              noWrap
+              color="error"
+              sx={{ width: "calc(100% - 75px)" }}
+              title={status.message}
+            >
+              {status.message}
+            </Typography>
+          ) : (
+            <Typography
+              noWrap
+              title={itemData.desc}
+              sx={{ width: "calc(100% - 75px)" }}
+            >
+              {itemData.desc}
+            </Typography>
+          )}
+
+          <Typography
+            component="span"
+            title="updated time"
+            style={{ fontSize: 14 }}
+          >
+            {parseExpire(itemData.updated)}
+          </Typography>
+        </Box>
+      </Wrapper>
+
+      <Menu
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorPosition={position}
+        anchorReference="anchorPosition"
+        transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
+        onContextMenu={(e) => {
+          setAnchorEl(null);
+          e.preventDefault();
+        }}
+      >
+        {(selected ? enableMenu : disableMenu)
+          .filter((item: any) => item.show !== false)
+          .map((item) => (
+            <MenuItem
+              key={item.label}
+              onClick={item.handler}
+              sx={{ minWidth: 133 }}
+            >
+              {t(item.label)}
+            </MenuItem>
+          ))}
+      </Menu>
+
+      {editOpen && (
+        <ProfileEdit
+          open={editOpen}
+          itemData={itemData}
+          onClose={() => setEditOpen(false)}
+        />
+      )}
+
+      {fileOpen && (
+        <FileEditor
+          uid={uid}
+          open={fileOpen}
+          mode={type === "merge" ? "yaml" : "javascript"}
+          onClose={() => setFileOpen(false)}
+        />
+      )}
+    </>
+  );
+};
+
+function parseExpire(expire?: number) {
+  if (!expire) return "-";
+  return dayjs(expire * 1000).format("YYYY-MM-DD");
+}
+
+export default ProfileMore;
--- a/src/components/profile/profile-new.tsx
+++ b/src/components/profile/profile-new.tsx
@@ -1,64 +1,158 @@
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
+import { useSWRConfig } from "swr";
+import { useLockFn, useSetState } from "ahooks";
 import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
  TextField,
 } from "@mui/material";
+import { Settings } from "@mui/icons-material";
+import { createProfile } from "../../services/cmds";
 import Notice from "../base/base-notice";
+import FileInput from "./file-input";

 interface Props {
  open: boolean;
  onClose: () => void;
-  onSubmit: (name: string, desc: string) => void;
 }

+// create a new profile
+// remote / local file / merge / script
 const ProfileNew = (props: Props) => {
-  const { open, onClose, onSubmit } = props;
-  const [name, setName] = useState("");
-  const [desc, setDesc] = useState("");
+  const { open, onClose } = props;

-  const onCreate = () => {
-    if (!name.trim()) {
-      Notice.error("`Name` should not be null");
+  const { mutate } = useSWRConfig();
+  const [form, setForm] = useSetState({
+    type: "remote",
+    name: "",
+    desc: "",
+    url: "",
+  });
+
+  const [showOpt, setShowOpt] = useState(false);
+  // can add more option
+  const [option, setOption] = useSetState({ user_agent: "" });
+  // file input
+  const fileDataRef = useRef<string | null>(null);
+
+  const onCreate = useLockFn(async () => {
+    if (!form.type) {
+      Notice.error("`Type` should not be null");
      return;
    }
-    onSubmit(name, desc);
-  };

-  useEffect(() => {
-    if (!open) {
-      setName("");
-      setDesc("");
+    try {
+      const name = form.name || `${form.type} file`;
+
+      if (form.type === "remote" && !form.url) {
+        throw new Error("The URL should not be null");
+      }
+
+      const option_ = form.type === "remote" ? option : undefined;
+      const item = { ...form, name, option: option_ };
+      const fileData = form.type === "local" ? fileDataRef.current : null;
+
+      await createProfile(item, fileData);
+
+      setForm({ type: "remote", name: "", desc: "", url: "" });
+      setOption({ user_agent: "" });
+      setShowOpt(false);
+      fileDataRef.current = null;
+
+      mutate("getProfiles");
+      onClose();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
    }
-  }, [open]);
+  });
+
+  const textFieldProps = {
+    fullWidth: true,
+    size: "small",
+    margin: "normal",
+    variant: "outlined",
+  } as const;

  return (
    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Create Profile</DialogTitle>
-      <DialogContent sx={{ width: 320, pb: 0.5 }}>
+      <DialogTitle sx={{ pb: 0.5 }}>Create Profile</DialogTitle>
+
+      <DialogContent sx={{ width: 336, pb: 1 }}>
+        <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
+          <InputLabel>Type</InputLabel>
+          <Select
+            autoFocus
+            label="Type"
+            value={form.type}
+            onChange={(e) => setForm({ type: e.target.value })}
+          >
+            <MenuItem value="remote">Remote</MenuItem>
+            <MenuItem value="local">Local</MenuItem>
+            <MenuItem value="script">Script</MenuItem>
+            <MenuItem value="merge">Merge</MenuItem>
+          </Select>
+        </FormControl>
+
        <TextField
-          autoFocus
-          fullWidth
+          {...textFieldProps}
          label="Name"
-          margin="dense"
-          variant="outlined"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
+          autoComplete="off"
+          value={form.name}
+          onChange={(e) => setForm({ name: e.target.value })}
        />

        <TextField
-          fullWidth
+          {...textFieldProps}
          label="Descriptions"
-          margin="normal"
-          variant="outlined"
-          value={desc}
-          onChange={(e) => setDesc(e.target.value)}
+          autoComplete="off"
+          value={form.desc}
+          onChange={(e) => setForm({ desc: e.target.value })}
        />
+
+        {form.type === "remote" && (
+          <TextField
+            {...textFieldProps}
+            label="Subscription Url"
+            autoComplete="off"
+            value={form.url}
+            onChange={(e) => setForm({ url: e.target.value })}
+          />
+        )}
+
+        {form.type === "local" && (
+          <FileInput onChange={(val) => (fileDataRef.current = val)} />
+        )}
+
+        {showOpt && (
+          <TextField
+            {...textFieldProps}
+            label="User Agent"
+            autoComplete="off"
+            value={option.user_agent}
+            onChange={(e) => setOption({ user_agent: e.target.value })}
+          />
+        )}
      </DialogContent>
-      <DialogActions sx={{ px: 2, pb: 2 }}>
+
+      <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>
+        {form.type === "remote" && (
+          <IconButton
+            size="small"
+            sx={{ position: "absolute", left: 18 }}
+            onClick={() => setShowOpt((o) => !o)}
+          >
+            <Settings />
+          </IconButton>
+        )}
+
        <Button onClick={onClose}>Cancel</Button>
        <Button onClick={onCreate} variant="contained">
          Create
--- a/src/components/proxy/proxy-global.tsx
+++ b/src/components/proxy/proxy-global.tsx
@@ -0,0 +1,185 @@
+import useSWR, { useSWRConfig } from "swr";
+import { useEffect, useRef, useState } from "react";
+import { useLockFn } from "ahooks";
+import { Virtuoso } from "react-virtuoso";
+import { Box, IconButton, TextField } from "@mui/material";
+import {
+  MyLocationRounded,
+  NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
+} from "@mui/icons-material";
+import { ApiType } from "../../services/types";
+import { updateProxy } from "../../services/api";
+import { getProfiles, patchProfile } from "../../services/cmds";
+import delayManager from "../../services/delay";
+import useFilterProxy from "./use-filter-proxy";
+import ProxyItem from "./proxy-item";
+
+interface Props {
+  groupName: string;
+  curProxy?: string;
+  proxies: ApiType.ProxyItem[];
+}
+
+// this component will be used for DIRECT/GLOBAL
+const ProxyGlobal = (props: Props) => {
+  const { groupName, curProxy, proxies } = props;
+
+  const { mutate } = useSWRConfig();
+  const [now, setNow] = useState(curProxy || "DIRECT");
+  const [showType, setShowType] = useState(true);
+  const [showFilter, setShowFilter] = useState(false);
+  const [filterText, setFilterText] = useState("");
+
+  const virtuosoRef = useRef<any>();
+  const filterProxies = useFilterProxy(proxies, groupName, filterText);
+
+  const { data: profiles } = useSWR("getProfiles", getProfiles);
+
+  const onChangeProxy = useLockFn(async (name: string) => {
+    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) => {
+    const index = filterProxies.findIndex((p) => p.name === now);
+
+    if (index >= 0) {
+      virtuosoRef.current?.scrollToIndex?.({
+        index,
+        align: "center",
+        behavior: smooth ? "smooth" : "auto",
+      });
+    }
+  };
+
+  const onCheckAll = useLockFn(async () => {
+    const names = filterProxies.map((p) => p.name);
+
+    await delayManager.checkListDelay(
+      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      () => mutate("getProxies")
+    );
+
+    mutate("getProxies");
+  });
+
+  useEffect(() => onLocation(false), [groupName]);
+
+  useEffect(() => {
+    if (!showFilter) setFilterText("");
+  }, [showFilter]);
+
+  useEffect(() => {
+    if (groupName === "DIRECT") setNow("DIRECT");
+    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 (
+    <>
+      <Box
+        sx={{
+          px: 3,
+          my: 0.5,
+          display: "flex",
+          alignItems: "center",
+          button: { mr: 0.5 },
+        }}
+      >
+        <IconButton
+          size="small"
+          title="location"
+          onClick={() => onLocation(true)}
+        >
+          <MyLocationRounded />
+        </IconButton>
+
+        <IconButton size="small" title="delay check" onClick={onCheckAll}>
+          <NetworkCheckRounded />
+        </IconButton>
+
+        <IconButton
+          size="small"
+          title="proxy detail"
+          onClick={() => setShowType(!showType)}
+        >
+          {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+        </IconButton>
+
+        <IconButton
+          size="small"
+          title="filter"
+          onClick={() => setShowFilter(!showFilter)}
+        >
+          {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
+        </IconButton>
+
+        {showFilter && (
+          <TextField
+            autoFocus
+            hiddenLabel
+            value={filterText}
+            size="small"
+            variant="outlined"
+            placeholder="Filter conditions"
+            onChange={(e) => setFilterText(e.target.value)}
+            sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+          />
+        )}
+      </Box>
+
+      <Virtuoso
+        ref={virtuosoRef}
+        style={{ height: "calc(100% - 40px)" }}
+        totalCount={filterProxies.length}
+        itemContent={(index) => (
+          <ProxyItem
+            groupName={groupName}
+            proxy={filterProxies[index]}
+            selected={filterProxies[index].name === now}
+            showType={showType}
+            onClick={onChangeProxy}
+            sx={{ py: 0, px: 2 }}
+          />
+        )}
+      />
+    </>
+  );
+};
+
+export default ProxyGlobal;
--- a/src/components/proxy/proxy-group.tsx
+++ b/src/components/proxy/proxy-group.tsx
@@ -1,5 +1,6 @@
-import { useRef, useState } from "react";
-import { useSWRConfig } from "swr";
+import useSWR, { useSWRConfig } from "swr";
+import { useEffect, useRef, useState } from "react";
+import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
 import {
  Box,
@@ -9,6 +10,7 @@ import {
  List,
  ListItem,
  ListItemText,
+  TextField,
 } from "@mui/material";
 import {
  SendRounded,
@@ -16,11 +18,16 @@ import {
  ExpandMoreRounded,
  MyLocationRounded,
  NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
 } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import { getProfiles, patchProfile } from "../../services/cmds";
 import delayManager from "../../services/delay";
+import useFilterProxy from "./use-filter-proxy";
 import ProxyItem from "./proxy-item";

 interface Props {
@@ -29,28 +36,33 @@ interface Props {

 const ProxyGroup = ({ group }: Props) => {
  const { mutate } = useSWRConfig();
-
-  const listRef = useRef<any>();
  const [open, setOpen] = useState(false);
  const [now, setNow] = useState(group.now);
+  const [showType, setShowType] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [filterText, setFilterText] = useState("");

  const proxies = group.all ?? [];
+  const virtuosoRef = useRef<any>();
+  const filterProxies = useFilterProxy(proxies, group.name, filterText);
+
+  const { data: profiles } = useSWR("getProfiles", getProfiles);
+
+  const onChangeProxy = useLockFn(async (name: string) => {
+    // Todo: support another proxy group type
+    if (group.type !== "Selector") return;

-  const onSelect = async (name: string) => {
-    // can not call update
-    if (group.type !== "Selector") {
-      // Todo
-      // error Tips
-      return;
-    }
    const oldValue = now;
    try {
      setNow(name);
      await updateProxy(group.name, name);
+    } catch {
+      setNow(oldValue);
+      return; // do not update profile
+    }

-      const profiles = await getProfiles().catch(console.error);
-      if (!profiles) return;
-      const profile = profiles.items![profiles.current!]!;
+    try {
+      const profile = profiles?.items?.find((p) => p.uid === profiles.current);
      if (!profile) return;
      if (!profile.selected) profile.selected = [];

@@ -63,41 +75,46 @@ const ProxyGroup = ({ group }: Props) => {
      } else {
        profile.selected[index] = { name: group.name, now: name };
      }
-
-      patchProfile(profiles.current!, profile).catch(console.error);
-    } catch {
-      setNow(oldValue);
-      // Todo
-      // error tips
+      await patchProfile(profiles!.current!, { selected: profile.selected });
+    } catch (err) {
+      console.error(err);
    }
-  };
+  });

-  const onLocation = () => {
-    const index = proxies.findIndex((p) => p.name === now);
+  const onLocation = (smooth = true) => {
+    const index = filterProxies.findIndex((p) => p.name === now);

    if (index >= 0) {
-      listRef.current?.scrollToIndex?.({
+      virtuosoRef.current?.scrollToIndex?.({
        index,
        align: "center",
-        behavior: "smooth",
+        behavior: smooth ? "smooth" : "auto",
      });
    }
  };

-  const onCheckAll = async () => {
-    let names = proxies.map((p) => p.name);
+  const onCheckAll = useLockFn(async () => {
+    const names = filterProxies.map((p) => p.name);
+    const groupName = group.name;

-    while (names.length) {
-      const list = names.slice(0, 10);
-      names = names.slice(10);
+    await delayManager.checkListDelay(
+      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      () => mutate("getProxies")
+    );

-      await Promise.all(
-        list.map((n) => delayManager.checkDelay(n, group.name))
-      );
+    mutate("getProxies");
+  });

-      mutate("getProxies");
+  useEffect(() => {
+    if (!showFilter) setFilterText("");
+  }, [showFilter]);
+
+  // auto scroll to current index
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => onLocation(false), 5);
    }
-  };
+  }, [open]);

  return (
    <>
@@ -119,27 +136,83 @@ const ProxyGroup = ({ group }: Props) => {
      </ListItem>

      <Collapse in={open} timeout="auto" unmountOnExit>
-        <Box sx={{ pl: 4, pr: 3, my: 0.5 }}>
-          <IconButton size="small" title="location" onClick={onLocation}>
+        <Box
+          sx={{
+            pl: 4,
+            pr: 3,
+            my: 0.5,
+            display: "flex",
+            alignItems: "center",
+            button: { mr: 0.5 },
+          }}
+        >
+          <IconButton
+            size="small"
+            title="location"
+            onClick={() => onLocation(true)}
+          >
            <MyLocationRounded />
          </IconButton>
-          <IconButton size="small" title="check" onClick={onCheckAll}>
+
+          <IconButton size="small" title="delay check" onClick={onCheckAll}>
            <NetworkCheckRounded />
          </IconButton>
+
+          <IconButton
+            size="small"
+            title="proxy detail"
+            onClick={() => setShowType(!showType)}
+          >
+            {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+          </IconButton>
+
+          <IconButton
+            size="small"
+            title="filter"
+            onClick={() => setShowFilter(!showFilter)}
+          >
+            {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
+          </IconButton>
+
+          {showFilter && (
+            <TextField
+              hiddenLabel
+              value={filterText}
+              size="small"
+              variant="outlined"
+              placeholder="Filter conditions"
+              onChange={(e) => setFilterText(e.target.value)}
+              sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+            />
+          )}
        </Box>

-        {proxies.length >= 10 ? (
+        {!filterProxies.length && (
+          <Box
+            sx={{
+              py: 3,
+              fontSize: 18,
+              textAlign: "center",
+              color: "text.secondary",
+            }}
+          >
+            Empty
+          </Box>
+        )}
+
+        {filterProxies.length >= 10 ? (
          <Virtuoso
-            ref={listRef}
+            ref={virtuosoRef}
            style={{ height: "320px", marginBottom: "4px" }}
-            totalCount={proxies.length}
+            totalCount={filterProxies.length}
            itemContent={(index) => (
              <ProxyItem
                groupName={group.name}
-                proxy={proxies[index]}
-                selected={proxies[index].name === now}
+                proxy={filterProxies[index]}
+                selected={filterProxies[index].name === now}
+                showType={showType}
                sx={{ py: 0, pl: 4 }}
-                onClick={onSelect}
+                onClick={onChangeProxy}
              />
            )}
          />
@@ -149,14 +222,15 @@ const ProxyGroup = ({ group }: Props) => {
            disablePadding
            sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
          >
-            {proxies.map((proxy) => (
+            {filterProxies.map((proxy) => (
              <ProxyItem
                key={proxy.name}
                groupName={group.name}
                proxy={proxy}
                selected={proxy.name === now}
+                showType={showType}
                sx={{ py: 0, pl: 4 }}
-                onClick={onSelect}
+                onClick={onChangeProxy}
              />
            ))}
          </List>
--- a/src/components/proxy/proxy-item.tsx
+++ b/src/components/proxy/proxy-item.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { CheckCircleOutlineRounded } from "@mui/icons-material";
 import {
  alpha,
@@ -18,6 +18,7 @@ interface Props {
  groupName: string;
  proxy: ApiType.ProxyItem;
  selected: boolean;
+  showType?: boolean;
  sx?: SxProps<Theme>;
  onClick?: (name: string) => void;
 }
@@ -27,8 +28,20 @@ const Widget = styled(Box)(() => ({
  fontSize: 14,
 }));

+const TypeBox = styled(Box)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.text.secondary, 0.36),
+  color: alpha(theme.palette.text.secondary, 0.42),
+  borderRadius: 4,
+  fontSize: 10,
+  marginLeft: 4,
+  padding: "0 2px",
+  lineHeight: 1.25,
+}));
+
 const ProxyItem = (props: Props) => {
-  const { groupName, proxy, selected, sx, onClick } = props;
+  const { groupName, proxy, selected, showType = true, sx, onClick } = props;
  const [delay, setDelay] = useState(-1);

  useEffect(() => {
@@ -37,14 +50,19 @@ const ProxyItem = (props: Props) => {
    }
  }, [proxy]);

+  const delayRef = useRef(false);
  const onDelay = (e: any) => {
    e.preventDefault();
    e.stopPropagation();

+    if (delayRef.current) return;
+    delayRef.current = true;
+
    delayManager
      .checkDelay(proxy.name, groupName)
      .then((result) => setDelay(result))
-      .catch(() => setDelay(1e6));
+      .catch(() => setDelay(1e6))
+      .finally(() => (delayRef.current = false));
  };

  return (
@@ -78,7 +96,17 @@ const ProxyItem = (props: Props) => {
          },
        ]}
      >
-        <ListItemText title={proxy.name} secondary={proxy.name} />
+        <ListItemText
+          title={proxy.name}
+          secondary={
+            <>
+              {proxy.name}
+
+              {showType && <TypeBox component="span">{proxy.type}</TypeBox>}
+              {showType && proxy.udp && <TypeBox component="span">UDP</TypeBox>}
+            </>
+          }
+        />

        <ListItemIcon
          sx={{ justifyContent: "flex-end", color: "primary.main" }}
--- a/src/components/proxy/use-filter-proxy.ts
+++ b/src/components/proxy/use-filter-proxy.ts
@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+import { ApiType } from "../../services/types";
+import delayManager from "../../services/delay";
+
+const regex1 = /delay([=<>])(\d+|timeout|error)/i;
+const regex2 = /type=(.*)/i;
+
+/**
+ * filter the proxy
+ * according to the regular conditions
+ */
+export default function useFilterProxy(
+  proxies: ApiType.ProxyItem[],
+  groupName: string,
+  filterText: string
+) {
+  return useMemo(() => {
+    if (!filterText) return proxies;
+
+    const res1 = regex1.exec(filterText);
+    if (res1) {
+      const symbol = res1[1];
+      const symbol2 = res1[2].toLowerCase();
+      const value =
+        symbol2 === "error" ? 1e5 : symbol2 === "timeout" ? 3000 : +symbol2;
+
+      return proxies.filter((p) => {
+        const delay = delayManager.getDelay(p.name, groupName);
+
+        if (delay < 0) return false;
+        if (symbol === "=" && symbol2 === "error") return delay >= 1e5;
+        if (symbol === "=" && symbol2 === "timeout")
+          return delay < 1e5 && delay >= 3000;
+        if (symbol === "=") return delay == value;
+        if (symbol === "<") return delay <= value;
+        if (symbol === ">") return delay >= value;
+        return false;
+      });
+    }
+
+    const res2 = regex2.exec(filterText);
+    if (res2) {
+      const type = res2[1].toLowerCase();
+      return proxies.filter((p) => p.type.toLowerCase().includes(type));
+    }
+
+    return proxies.filter((p) => p.name.includes(filterText.trim()));
+  }, [proxies, groupName, filterText]);
+}
--- a/src/components/setting/guard-state.tsx
+++ b/src/components/setting/guard-state.tsx
@@ -5,6 +5,7 @@ interface Props<Value> {
  value?: Value;
  valueProps?: string;
  onChangeProps?: string;
+  waitTime?: number;
  onChange?: (value: Value) => void;
  onFormat?: (...args: any[]) => Value;
  onGuard?: (value: Value, oldValue: Value) => Promise<void>;
@@ -18,6 +19,7 @@ function GuardState<T>(props: Props<T>) {
    children,
    valueProps = "value",
    onChangeProps = "onChange",
+    waitTime = 0, // debounce wait time default 0
    onGuard = noop,
    onCatch = noop,
    onChange = noop,
@@ -25,34 +27,61 @@ function GuardState<T>(props: Props<T>) {
  } = props;

  const lockRef = useRef(false);
+  const saveRef = useRef(value);
+  const lastRef = useRef(0);
+  const timeRef = useRef<any>();

-  if (isValidElement(children)) {
-    const childProps = { ...children.props };
-
-    childProps[valueProps] = value;
-    childProps[onChangeProps] = async (...args: any[]) => {
-      // 多次操作无效
-      if (lockRef.current) return;
-
-      lockRef.current = true;
-      const oldValue = value;
-
-      try {
-        const newValue = (onFormat as any)(...args);
-        // 先在ui上响应操作
-        onChange(newValue);
-        await onGuard(newValue, oldValue!);
-      } catch (err: any) {
-        // 状态回退
-        onChange(oldValue!);
-        onCatch(err);
-      }
-      lockRef.current = false;
-    };
-    return cloneElement(children, childProps);
+  if (!isValidElement(children)) {
+    return children as any;
  }

-  return children as any;
+  const childProps = { ...children.props };
+
+  childProps[valueProps] = value;
+  childProps[onChangeProps] = async (...args: any[]) => {
+    // 多次操作无效
+    if (lockRef.current) return;
+
+    lockRef.current = true;
+
+    try {
+      const newValue = (onFormat as any)(...args);
+      // 先在ui上响应操作
+      onChange(newValue);
+
+      const now = Date.now();
+
+      // save the old value
+      if (waitTime <= 0 || now - lastRef.current >= waitTime) {
+        saveRef.current = value;
+      }
+
+      lastRef.current = now;
+
+      if (waitTime <= 0) {
+        await onGuard(newValue, value!);
+      } else {
+        // debounce guard
+        clearTimeout(timeRef.current);
+
+        timeRef.current = setTimeout(async () => {
+          try {
+            await onGuard(newValue, saveRef.current!);
+          } catch (err: any) {
+            // 状态回退
+            onChange(saveRef.current!);
+            onCatch(err);
+          }
+        }, waitTime);
+      }
+    } catch (err: any) {
+      // 状态回退
+      onChange(saveRef.current!);
+      onCatch(err);
+    }
+    lockRef.current = false;
+  };
+  return cloneElement(children, childProps);
 }

 export default GuardState;
--- a/src/components/setting/setting-clash.tsx
+++ b/src/components/setting/setting-clash.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
-import { useDebounceFn } from "ahooks";
-import { useSetRecoilState } from "recoil";
 import useSWR, { useSWRConfig } from "swr";
+import { useSetRecoilState } from "recoil";
+import { useTranslation } from "react-i18next";
 import {
  ListItemText,
  TextField,
@@ -11,7 +10,7 @@ import {
  Typography,
 } from "@mui/material";
 import { ApiType } from "../../services/types";
-import { atomClashPort } from "../../states/setting";
+import { atomClashPort } from "../../services/states";
 import { patchClashConfig } from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
 import { getClashConfig, getVersion, updateConfigs } from "../../services/api";
@@ -23,20 +22,19 @@ interface Props {
 }

 const SettingClash = ({ onError }: Props) => {
+  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
  const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
+  const { data: versionData } = useSWR("getVersion", getVersion);

  const {
-    ipv6 = false,
-    "allow-lan": allowLan = false,
-    "log-level": logLevel = "silent",
-    "mixed-port": thePort = 0,
+    ipv6,
+    "allow-lan": allowLan,
+    "log-level": logLevel,
+    "mixed-port": mixedPort,
  } = clashConfig ?? {};

-  const setPort = useSetRecoilState(atomClashPort);
-  const [mixedPort, setMixedPort] = useState(thePort);
-
-  useEffect(() => setMixedPort(thePort), [thePort]);
+  const setGlobalClashPort = useSetRecoilState(atomClashPort);

  const onSwitchFormat = (_e: any, value: boolean) => value;
  const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
@@ -47,42 +45,32 @@ const SettingClash = ({ onError }: Props) => {
    await patchClashConfig(patch);
  };

-  // restart clash when port is changed
-  const { run: onUpdatePort } = useDebounceFn(
-    async (port: number) => {
-      try {
-        if (port < 1000) {
-          throw new Error("The port should not < 1000");
-        }
-        if (port > 65536) {
-          throw new Error("The port should not > 65536");
-        }
-        await patchClashConfig({ "mixed-port": port });
-        onChangeData({ "mixed-port": port });
-        setPort(port);
-        Notice.success("Change Clash port successfully!");
-      } catch (err: any) {
-        setMixedPort(thePort); // back to old port value
-        Notice.error(err.message ?? err.toString());
-      }
-    },
-    { wait: 1000 }
-  );
+  const onUpdatePort = async (port: number) => {
+    if (port < 1000) {
+      throw new Error("The port should not < 1000");
+    }
+    if (port > 65536) {
+      throw new Error("The port should not > 65536");
+    }
+    await patchClashConfig({ "mixed-port": port });
+    setGlobalClashPort(port);
+    Notice.success("Change Clash port successfully!");
+
+    // update the config
+    mutate("getClashConfig");
+  };

  // get clash core version
-  const [clashVer, setClashVer] = useState("");
-  useEffect(() => {
-    getVersion().then(({ premium, version }) => {
-      setClashVer(premium ? `${version} Premium` : version);
-    });
-  }, []);
+  const clashVer = versionData?.premium
+    ? `${versionData.version} Premium`
+    : versionData?.version || "-";

  return (
-    <SettingList title="Clash Setting">
+    <SettingList title={t("Clash Setting")}>
      <SettingItem>
-        <ListItemText primary="Allow Lan" />
+        <ListItemText primary={t("Allow Lan")} />
        <GuardState
-          value={allowLan}
+          value={allowLan ?? false}
          valueProps="checked"
          onCatch={onError}
          onFormat={onSwitchFormat}
@@ -94,9 +82,9 @@ const SettingClash = ({ onError }: Props) => {
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="IPv6" />
+        <ListItemText primary={t("IPv6")} />
        <GuardState
-          value={ipv6}
+          value={ipv6 ?? false}
          valueProps="checked"
          onCatch={onError}
          onFormat={onSwitchFormat}
@@ -108,9 +96,9 @@ const SettingClash = ({ onError }: Props) => {
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Log Level" />
+        <ListItemText primary={t("Log Level")} />
        <GuardState
-          value={logLevel}
+          value={logLevel ?? "info"}
          onCatch={onError}
          onFormat={(e: any) => e.target.value}
          onChange={(e) => onChangeData({ "log-level": e })}
@@ -127,19 +115,21 @@ const SettingClash = ({ onError }: Props) => {
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Mixed Port" />
+        <ListItemText primary={t("Mixed Port")} />
        <GuardState
-          value={mixedPort!}
+          value={mixedPort ?? 0}
+          onCatch={onError}
          onFormat={(e: any) => +e.target.value?.replace(/\D+/, "")}
-          onChange={setMixedPort}
+          onChange={(e) => onChangeData({ "mixed-port": e })}
          onGuard={onUpdatePort}
+          waitTime={800}
        >
          <TextField autoComplete="off" size="small" sx={{ width: 120 }} />
        </GuardState>
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Clash core" />
+        <ListItemText primary={t("Clash core")} />
        <Typography sx={{ py: 1 }}>{clashVer}</Typography>
      </SettingItem>
    </SettingList>
--- a/src/components/setting/setting-system.tsx
+++ b/src/components/setting/setting-system.tsx
@@ -1,4 +1,5 @@
 import useSWR, { useSWRConfig } from "swr";
+import { useTranslation } from "react-i18next";
 import { Box, ListItemText, Switch, TextField } from "@mui/material";
 import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
@@ -11,13 +12,17 @@ interface Props {
 }

 const SettingSystem = ({ onError }: Props) => {
+  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);

  const {
-    enable_auto_launch: startup = false,
-    enable_system_proxy: proxy = false,
-    system_proxy_bypass: bypass = "",
+    enable_tun_mode,
+    enable_auto_launch,
+    enable_silent_start,
+    enable_system_proxy,
+    system_proxy_bypass,
+    enable_proxy_guard,
  } = vergeConfig ?? {};

  const onSwitchFormat = (_e: any, value: boolean) => value;
@@ -26,11 +31,25 @@ const SettingSystem = ({ onError }: Props) => {
  };

  return (
-    <SettingList title="System Setting">
+    <SettingList title={t("System Setting")}>
      <SettingItem>
-        <ListItemText primary="Auto Launch" />
+        <ListItemText primary={t("Tun Mode")} />
        <GuardState
-          value={startup}
+          value={enable_tun_mode ?? false}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_tun_mode: e })}
+          onGuard={(e) => patchVergeConfig({ enable_tun_mode: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary={t("Auto Launch")} />
+        <GuardState
+          value={enable_auto_launch ?? false}
          valueProps="checked"
          onCatch={onError}
          onFormat={onSwitchFormat}
@@ -41,17 +60,31 @@ 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={
            <Box sx={{ display: "flex", alignItems: "center" }}>
-              System Proxy
+              {t("System Proxy")}
              <SysproxyTooltip />
            </Box>
          }
        />
        <GuardState
-          value={proxy}
+          value={enable_system_proxy ?? false}
          valueProps="checked"
          onCatch={onError}
          onFormat={onSwitchFormat}
@@ -65,15 +98,32 @@ const SettingSystem = ({ onError }: Props) => {
        </GuardState>
      </SettingItem>

-      {proxy && (
+      {enable_system_proxy && (
        <SettingItem>
-          <ListItemText primary="Proxy Bypass" />
+          <ListItemText primary={t("Proxy Guard")} />
          <GuardState
-            value={bypass ?? ""}
+            value={enable_proxy_guard ?? false}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => onChangeData({ enable_proxy_guard: e })}
+            onGuard={(e) => patchVergeConfig({ enable_proxy_guard: e })}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </SettingItem>
+      )}
+
+      {enable_system_proxy && (
+        <SettingItem>
+          <ListItemText primary={t("Proxy Bypass")} />
+          <GuardState
+            value={system_proxy_bypass ?? ""}
            onCatch={onError}
            onFormat={(e: any) => e.target.value}
            onChange={(e) => onChangeData({ system_proxy_bypass: e })}
            onGuard={(e) => patchVergeConfig({ system_proxy_bypass: e })}
+            waitTime={1000}
          >
            <TextField autoComplete="off" size="small" sx={{ width: 120 }} />
          </GuardState>
--- 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,28 +1,40 @@
 import useSWR, { useSWRConfig } from "swr";
-import { IconButton, ListItemText, Switch, Typography } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  IconButton,
+  ListItemText,
+  MenuItem,
+  Select,
+  Switch,
+  Typography,
+} from "@mui/material";
 import {
  getVergeConfig,
  openAppDir,
  openLogsDir,
  patchVergeConfig,
 } from "../../services/cmds";
+import { ArrowForward } from "@mui/icons-material";
 import { SettingList, SettingItem } from "./setting";
 import { CmdType } from "../../services/types";
 import { version } from "../../../package.json";
-import GuardState from "./guard-state";
 import PaletteSwitch from "./palette-switch";
-import { ArrowForward } from "@mui/icons-material";
+import GuardState from "./guard-state";
+import SettingTheme from "./setting-theme";

 interface Props {
  onError?: (err: Error) => void;
 }

 const SettingVerge = ({ onError }: Props) => {
+  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);

-  const { theme_mode: mode = "light", theme_blur: blur = false } =
-    vergeConfig ?? {};
+  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>) => {
@@ -30,17 +42,17 @@ const SettingVerge = ({ onError }: Props) => {
  };

  return (
-    <SettingList title="Verge Setting">
+    <SettingList title={t("Verge Setting")}>
      <SettingItem>
-        <ListItemText primary="Theme Mode" />
+        <ListItemText primary={t("Theme Mode")} />
        <GuardState
-          value={mode === "dark"}
+          value={theme_mode === "dark"}
          valueProps="checked"
          onCatch={onError}
          onFormat={onSwitchFormat}
          onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
-          onGuard={(c) =>
-            patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+          onGuard={(e) =>
+            patchVergeConfig({ theme_mode: e ? "dark" : "light" })
          }
        >
          <PaletteSwitch edge="end" />
@@ -48,9 +60,9 @@ const SettingVerge = ({ onError }: Props) => {
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Theme Blur" />
+        <ListItemText primary={t("Theme Blur")} />
        <GuardState
-          value={blur}
+          value={theme_blur ?? false}
          valueProps="checked"
          onCatch={onError}
          onFormat={onSwitchFormat}
@@ -62,30 +74,66 @@ const SettingVerge = ({ onError }: Props) => {
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Open App Dir" />
+        <ListItemText primary={t("Traffic Graph")} />
+        <GuardState
+          value={traffic_graph ?? true}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ traffic_graph: e })}
+          onGuard={(e) => patchVergeConfig({ traffic_graph: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary={t("Language")} />
+        <GuardState
+          value={language ?? "en"}
+          onCatch={onError}
+          onFormat={(e: any) => e.target.value}
+          onChange={(e) => onChangeData({ language: e })}
+          onGuard={(e) => patchVergeConfig({ language: e })}
+        >
+          <Select size="small" sx={{ width: 100 }}>
+            <MenuItem value="zh">中文</MenuItem>
+            <MenuItem value="en">English</MenuItem>
+          </Select>
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary={t("Theme Setting")} />
        <IconButton
          color="inherit"
          size="small"
-          onClick={() => {
-            console.log("click");
-            openAppDir().then(console.log).catch(console.log);
-          }}
+          onClick={() => setThemeOpen(true)}
        >
          <ArrowForward />
        </IconButton>
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Open Logs Dir" />
+        <ListItemText primary={t("Open App Dir")} />
+        <IconButton color="inherit" size="small" onClick={openAppDir}>
+          <ArrowForward />
+        </IconButton>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary={t("Open Logs Dir")} />
        <IconButton color="inherit" size="small" onClick={openLogsDir}>
          <ArrowForward />
        </IconButton>
      </SettingItem>

      <SettingItem>
-        <ListItemText primary="Version" />
+        <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
@@ -0,0 +1,60 @@
+{
+  "Label-Proxies": "Proxies",
+  "Label-Profiles": "Profiles",
+  "Label-Connections": "Connections",
+  "Label-Logs": "Logs",
+  "Label-Settings": "Settings",
+
+  "Connections": "Connections",
+  "Logs": "Logs",
+  "Clear": "Clear",
+  "Proxies": "Proxies",
+  "Proxy Groups": "Proxy Groups",
+  "rule": "rule",
+  "global": "global",
+  "direct": "direct",
+  "Profiles": "Profiles",
+  "Profile URL": "Profile URL",
+  "Import": "Import",
+  "New": "New",
+  "Close All": "Close All",
+  "Select": "Select",
+  "Edit Info": "Edit Info",
+  "Edit File": "Edit File",
+  "Open File": "Open File",
+  "Update": "Update",
+  "Update(Proxy)": "Update(Proxy)",
+  "Delete": "Delete",
+  "Enable": "Enable",
+  "Disable": "Disable",
+  "Refresh": "Refresh",
+  "To Top": "To Top",
+  "To End": "To End",
+
+  "Settings": "Settings",
+  "Clash Setting": "Clash Setting",
+  "System Setting": "System Setting",
+  "Verge Setting": "Verge Setting",
+  "Allow Lan": "Allow Lan",
+  "IPv6": "IPv6",
+  "Log Level": "Log Level",
+  "Mixed Port": "Mixed Port",
+  "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",
+
+  "Save": "Save",
+  "Cancel": "Cancel"
+}
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -0,0 +1,60 @@
+{
+  "Label-Proxies": "代 理",
+  "Label-Profiles": "配 置",
+  "Label-Connections": "连 接",
+  "Label-Logs": "日 志",
+  "Label-Settings": "设 置",
+
+  "Connections": "连接",
+  "Logs": "日志",
+  "Clear": "清除",
+  "Proxies": "代理",
+  "Proxy Groups": "代理组",
+  "rule": "规则",
+  "global": "全局",
+  "direct": "直连",
+  "Profiles": "配置",
+  "Profile URL": "配置文件链接",
+  "Import": "导入",
+  "New": "新建",
+  "Close All": "关闭全部",
+  "Select": "使用",
+  "Edit Info": "编辑信息",
+  "Edit File": "编辑文件",
+  "Open File": "打开文件",
+  "Update": "更新",
+  "Update(Proxy)": "更新(代理)",
+  "Delete": "删除",
+  "Enable": "启用",
+  "Disable": "禁用",
+  "Refresh": "刷新",
+  "To Top": "移到最前",
+  "To End": "移到末尾",
+
+  "Settings": "设置",
+  "Clash Setting": "Clash 设置",
+  "System Setting": "系统设置",
+  "Verge Setting": "Verge 设置",
+  "Allow Lan": "局域网连接",
+  "IPv6": "IPv6",
+  "Log Level": "日志等级",
+  "Mixed Port": "端口设置",
+  "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": "版本",
+
+  "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";
@@ -6,6 +7,10 @@ import ReactDOM from "react-dom";
 import { RecoilRoot } from "recoil";
 import { BrowserRouter } from "react-router-dom";
 import Layout from "./pages/_layout";
+import enhance from "./services/enhance";
+import "./services/i18n";
+
+enhance.setup();

 ReactDOM.render(
  <React.StrictMode>
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -1,72 +1,60 @@
+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 { useRecoilState } from "recoil";
-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 { atomPaletteMode, atomThemeBlur } from "../states/setting";
-import { getVergeConfig } from "../services/cmds";
-import { getAxios } from "../services/api";
 import { routers } from "./_routers";
-import LogoSvg from "../assets/image/logo.svg";
+import { getAxios } from "../services/api";
+import { getVergeConfig } from "../services/cmds";
+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 OS = getSystem();

 const Layout = () => {
+  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
-  const [mode, setMode] = useRecoilState(atomPaletteMode);
-  const [blur, setBlur] = useRecoilState(atomThemeBlur);
+
+  const { theme } = useCustomTheme();
+
  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { theme_blur, language } = vergeConfig || {};

  useEffect(() => {
    window.addEventListener("keydown", (e) => {
      if (e.key === "Escape") appWindow.hide();
    });

-    listen("restart_clash", async () => {
+    listen("verge://refresh-clash-config", async () => {
      // the clash info may be updated
      await getAxios(true);
-      // make sure that the clash is ok
-      setTimeout(() => mutate("getProxies"), 1000);
-      setTimeout(() => mutate("getProxies"), 2000);
+      mutate("getProxies");
      mutate("getClashConfig");
    });
+
+    // update the verge config
+    listen("verge://refresh-verge-config", () => mutate("getVergeConfig"));
  }, []);

  useEffect(() => {
-    if (!vergeConfig) return;
-    setBlur(!!vergeConfig.theme_blur);
-    setMode(vergeConfig.theme_mode ?? "light");
-  }, [vergeConfig]);
-
-  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();
+    if (language) {
+      dayjs.locale(language === "zh" ? "zh-cn" : language);
+      i18next.changeLanguage(language);
    }
-  };
+  }, [language]);

  return (
    <SWRConfig value={{}}>
@@ -74,17 +62,23 @@ const Layout = () => {
        <Paper
          square
          elevation={0}
-          className="layout"
-          onPointerDown={onDragging}
+          className={`${OS} layout`}
+          onPointerDown={(e: any) => {
+            if (e.target?.dataset?.windrag) appWindow.startDragging();
+          }}
+          onContextMenu={(e) => {
+            // only prevent it on Windows
+            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>
@@ -92,7 +86,7 @@ const Layout = () => {
            <List className="the-menu" data-windrag>
              {routers.map((router) => (
                <LayoutItem key={router.label} to={router.link}>
-                  {router.label}
+                  {t(router.label)}
                </LayoutItem>
              ))}
            </List>
@@ -103,9 +97,11 @@ const Layout = () => {
          </div>

          <div className="layout__right" data-windrag>
-            <div className="the-bar">
-              <LayoutControl />
-            </div>
+            {OS !== "macos" && (
+              <div className="the-bar">
+                <LayoutControl />
+              </div>
+            )}

            <div className="the-content">
              <Routes>
--- a/src/pages/_routers.tsx
+++ b/src/pages/_routers.tsx
@@ -6,27 +6,27 @@ import ConnectionsPage from "./connections";

 export const routers = [
  {
-    label: "Proxies",
+    label: "Label-Proxies",
    link: "/",
    ele: ProxiesPage,
  },
  {
-    label: "Profiles",
+    label: "Label-Profiles",
    link: "/profile",
    ele: ProfilesPage,
  },
  {
-    label: "Connections",
+    label: "Label-Connections",
    link: "/connections",
    ele: ConnectionsPage,
  },
  {
-    label: "Logs",
+    label: "Label-Logs",
    link: "/logs",
    ele: LogsPage,
  },
  {
-    label: "Settings",
+    label: "Label-Settings",
    link: "/settings",
    ele: SettingsPage,
  },
--- 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
@@ -1,14 +1,18 @@
 import { useEffect, useState } from "react";
-import { Paper } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { Button, Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
+import { useTranslation } from "react-i18next";
 import { ApiType } from "../services/types";
-import { getInfomation } from "../services/api";
+import { closeAllConnections, getInfomation } from "../services/api";
 import BasePage from "../components/base/base-page";
 import ConnectionItem from "../components/connection/connection-item";

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

  useEffect(() => {
    let ws: WebSocket | null = null;
@@ -19,18 +23,62 @@ 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 };
+        });
      });
    });

    return () => ws?.close();
  }, []);

+  const onCloseAll = useLockFn(closeAllConnections);
+
  return (
-    <BasePage title="Connections" contentStyle={{ height: "100%" }}>
+    <BasePage
+      title={t("Connections")}
+      contentStyle={{ height: "100%" }}
+      header={
+        <Button
+          size="small"
+          sx={{ mt: 1 }}
+          variant="contained"
+          onClick={onCloseAll}
+        >
+          {t("Close All")}
+        </Button>
+      }
+    >
      <Paper sx={{ boxShadow: 2, height: "100%" }}>
        <Virtuoso
-          data={conn.connections}
+          initialTopMostItemIndex={999}
+          data={connData.connections}
          itemContent={(index, item) => <ConnectionItem value={item} />}
        />
      </Paper>
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@@ -1,51 +1,27 @@
-import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
 import { Button, Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
-import { ApiType } from "../services/types";
-import { getInfomation } from "../services/api";
+import { useTranslation } from "react-i18next";
+import { atomLogData } from "../services/states";
 import BasePage from "../components/base/base-page";
 import LogItem from "../components/log/log-item";

-let logCache: ApiType.LogItem[] = [];
-
 const LogPage = () => {
-  const [logData, setLogData] = useState(logCache);
-
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-
-    getInfomation().then((result) => {
-      const { server = "", secret = "" } = result;
-      ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
-
-      ws.addEventListener("message", (event) => {
-        const data = JSON.parse(event.data) as ApiType.LogItem;
-        const time = dayjs().format("MM-DD HH:mm:ss");
-        setLogData((l) => (logCache = [...l, { ...data, time }]));
-      });
-    });
-
-    return () => ws?.close();
-  }, []);
-
-  const onClear = () => {
-    setLogData([]);
-    logCache = [];
-  };
+  const { t } = useTranslation();
+  const [logData, setLogData] = useRecoilState(atomLogData);

  return (
    <BasePage
-      title="Logs"
+      title={t("Logs")}
      contentStyle={{ height: "100%" }}
      header={
        <Button
          size="small"
          sx={{ mt: 1 }}
          variant="contained"
-          onClick={onClear}
+          onClick={() => setLogData([])}
        >
-          Clear
+          {t("Clear")}
        </Button>
      }
    >
--- a/src/pages/profiles.tsx
+++ b/src/pages/profiles.tsx
@@ -1,33 +1,57 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useRef, useState } from "react";
+import { useLockFn } from "ahooks";
+import { useEffect, useMemo, useState } from "react";
 import { Box, Button, Grid, TextField } from "@mui/material";
+import { useTranslation } from "react-i18next";
 import {
  getProfiles,
-  selectProfile,
  patchProfile,
+  selectProfile,
  importProfile,
-  newProfile,
 } from "../services/cmds";
 import { getProxies, updateProxy } from "../services/api";
-import noop from "../utils/noop";
 import Notice from "../components/base/base-notice";
 import BasePage from "../components/base/base-page";
-import ProfileItem from "../components/profile/profile-item";
 import ProfileNew from "../components/profile/profile-new";
+import ProfileItem from "../components/profile/profile-item";
+import EnhancedMode from "../components/profile/enhanced";

 const ProfilePage = () => {
+  const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
+
  const [url, setUrl] = useState("");
  const [disabled, setDisabled] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);

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

+  // distinguish type
+  const { regularItems, enhanceItems } = useMemo(() => {
+    const items = profiles.items || [];
+    const chain = profiles.chain || [];
+
+    const type1 = ["local", "remote"];
+    const type2 = ["merge", "script"];
+
+    const regularItems = items.filter((i) => type1.includes(i.type!));
+    const restItems = items.filter((i) => type2.includes(i.type!));
+
+    const restMap = Object.fromEntries(restItems.map((i) => [i.uid, i]));
+
+    const enhanceItems = chain
+      .map((i) => restMap[i]!)
+      .concat(restItems.filter((i) => !chain.includes(i.uid)));
+
+    return { regularItems, enhanceItems };
+  }, [profiles]);
+
+  // sync selected proxy
  useEffect(() => {
    if (profiles.current == null) return;
-    if (!profiles.items) profiles.items = [];

    const current = profiles.current;
-    const profile = profiles.items![current];
+    const profile = regularItems.find((p) => p.uid === current);
    if (!profile) return;

    setTimeout(async () => {
@@ -40,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;
@@ -53,16 +78,18 @@ const ProfilePage = () => {
          updateProxy(name, selectedMap[name]);
        }
      });
+
      // update profile selected list
      profile.selected = Object.entries(selectedMap).map(([name, now]) => ({
        name,
        now,
      }));
-      patchProfile(current!, profile).catch(console.error);
+
+      patchProfile(current!, { selected: profile.selected });
      // update proxies cache
      if (hasChange) mutate("getProxies", getProxies());
    }, 100);
-  }, [profiles]);
+  }, [profiles, regularItems]);

  const onImport = async () => {
    if (!url) return;
@@ -71,9 +98,17 @@ const ProfilePage = () => {

    try {
      await importProfile(url);
-      mutate("getProfiles", getProfiles());
-      if (!profiles.items?.length) selectProfile(0).catch(noop);
      Notice.success("Successfully import profile.");
+
+      getProfiles().then((newProfiles) => {
+        mutate("getProfiles", newProfiles);
+
+        if (!newProfiles.current && newProfiles.items?.length) {
+          const current = newProfiles.items[0].uid;
+          selectProfile(current);
+          mutate("getProfiles", { ...newProfiles, current }, true);
+        }
+      });
    } catch {
      Notice.error("Failed to import profile.");
    } finally {
@@ -81,45 +116,24 @@ const ProfilePage = () => {
    }
  };

-  const lockRef = useRef(false);
-  const onSelect = async (index: number, force: boolean) => {
-    if (lockRef.current) return;
-    if (!force && index === profiles.current) return;
-    lockRef.current = true;
-    try {
-      await selectProfile(index);
-      mutate("getProfiles", { ...profiles, current: index }, true);
-    } catch (err: any) {
-      err && Notice.error(err.toString());
-    } finally {
-      lockRef.current = false;
-    }
-  };
-
-  const lockNewRef = useRef(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const onNew = async (name: string, desc: string) => {
-    if (lockNewRef.current) return;
-    lockNewRef.current = true;
+  const onSelect = useLockFn(async (uid: string, force: boolean) => {
+    if (!force && uid === profiles.current) return;

    try {
-      await newProfile(name, desc);
-      setDialogOpen(false);
-      mutate("getProfiles");
+      await selectProfile(uid);
+      mutate("getProfiles", { ...profiles, current: uid }, true);
    } catch (err: any) {
-      err && Notice.error(err.toString());
-    } finally {
-      lockNewRef.current = false;
+      Notice.error(err?.message || err.toString());
    }
-  };
+  });

  return (
-    <BasePage title="Profiles">
-      <Box sx={{ display: "flex", mb: 3 }}>
+    <BasePage title={t("Profiles")}>
+      <Box sx={{ display: "flex", mb: 2.5 }}>
        <TextField
-          id="profile_url"
+          id="clas_verge_profile_url"
          name="profile_url"
-          label="Profile URL"
+          label={t("Profile URL")}
          size="small"
          fullWidth
          value={url}
@@ -132,31 +146,30 @@ const ProfilePage = () => {
          onClick={onImport}
          sx={{ mr: 1 }}
        >
-          Import
+          {t("Import")}
        </Button>
        <Button variant="contained" onClick={() => setDialogOpen(true)}>
-          New
+          {t("New")}
        </Button>
      </Box>

-      <Grid container spacing={3}>
-        {profiles?.items?.map((item, idx) => (
+      <Grid container spacing={2}>
+        {regularItems.map((item) => (
          <Grid item xs={12} sm={6} key={item.file}>
            <ProfileItem
-              index={idx}
-              selected={profiles.current === idx}
+              selected={profiles.current === item.uid}
              itemData={item}
-              onSelect={(f) => onSelect(idx, f)}
+              onSelect={(f) => onSelect(item.uid, f)}
            />
          </Grid>
        ))}
      </Grid>

-      <ProfileNew
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        onSubmit={onNew}
-      />
+      {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
@@ -1,90 +1,53 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { useEffect } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
 import { Button, ButtonGroup, List, Paper } from "@mui/material";
-import { getClashConfig, updateConfigs, updateProxy } from "../services/api";
+import { getClashConfig, updateConfigs } from "../services/api";
 import { patchClashConfig } from "../services/cmds";
 import { getProxies } from "../services/api";
 import BasePage from "../components/base/base-page";
-import ProxyItem from "../components/proxy/proxy-item";
 import ProxyGroup from "../components/proxy/proxy-group";
+import ProxyGlobal from "../components/proxy/proxy-global";

 const ProxyPage = () => {
+  const { t } = useTranslation();
  const { mutate } = useSWRConfig();
  const { data: proxiesData } = useSWR("getProxies", getProxies);
  const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
-  const [curProxy, setCurProxy] = useState<string>("DIRECT");
-  const curMode = clashConfig?.mode.toLowerCase();
-
-  // proxy groups
-  const { groups = [] } = proxiesData ?? {};
-  // proxies and sorted
-  const filterProxies = useMemo(() => {
-    if (!proxiesData?.proxies) return [];
-
-    const list = Object.values(proxiesData.proxies);
-    const retList = list.filter(
-      (p) => !p.all?.length && p.name !== "DIRECT" && p.name !== "REJECT"
-    );
-    const direct = list.filter((p) => p.name === "DIRECT");
-    const reject = list.filter((p) => p.name === "REJECT");
-
-    return direct.concat(retList).concat(reject);
-  }, [proxiesData]);

  const modeList = ["rule", "global", "direct"];
-  const asGroup = curMode === "rule" && groups.length;
+  const curMode = clashConfig?.mode.toLowerCase();
+  const { groups = [], proxies = [] } = proxiesData ?? {};

  // make sure that fetch the proxies successfully
  useEffect(() => {
    if (
      (curMode === "rule" && !groups.length) ||
-      (curMode === "global" && filterProxies.length < 4)
+      (curMode === "global" && proxies.length < 2)
    ) {
      setTimeout(() => mutate("getProxies"), 500);
    }
-  }, [groups, filterProxies, curMode]);
+  }, [groups, proxies, curMode]);

-  // update the current proxy
-  useEffect(() => {
-    if (curMode === "direct") setCurProxy("DIRECT");
-    if (curMode === "global") {
-      const globalNow = proxiesData?.proxies?.GLOBAL?.now;
-      setCurProxy(globalNow || "DIRECT");
-    }
-  }, [curMode, proxiesData]);
-
-  const changeLockRef = useRef(false);
-  const onChangeMode = async (mode: string) => {
-    if (changeLockRef.current) return;
-    changeLockRef.current = true;
-
-    try {
-      // switch rapidly
-      await updateConfigs({ mode });
-      await patchClashConfig({ mode });
-      mutate("getClashConfig");
-    } finally {
-      changeLockRef.current = false;
-    }
-  };
-
-  const onChangeProxy = async (name: string) => {
-    if (curMode !== "global") return;
-    await updateProxy("GLOBAL", name);
-    setCurProxy(name);
-  };
+  const onChangeMode = useLockFn(async (mode: string) => {
+    // switch rapidly
+    await updateConfigs({ mode });
+    await patchClashConfig({ mode });
+    mutate("getClashConfig");
+  });

  // difference style
-  const pageStyle = asGroup ? {} : { height: "100%" };
-  const paperStyle: any = asGroup
+  const showGroup = curMode === "rule" && !!groups.length;
+  const pageStyle = showGroup ? {} : { height: "100%" };
+  const paperStyle: any = showGroup
    ? { mb: 0.5 }
    : { py: 1, height: "100%", boxSizing: "border-box" };

  return (
    <BasePage
      contentStyle={pageStyle}
-      title={asGroup ? "Proxy Groups" : "Proxies"}
+      title={showGroup ? t("Proxy Groups") : t("Proxies")}
      header={
        <ButtonGroup size="small">
          {modeList.map((mode) => (
@@ -94,33 +57,32 @@ const ProxyPage = () => {
              onClick={() => onChangeMode(mode)}
              sx={{ textTransform: "capitalize" }}
            >
-              {mode}
+              {t(mode)}
            </Button>
          ))}
        </ButtonGroup>
      }
    >
      <Paper sx={{ borderRadius: 1, boxShadow: 2, ...paperStyle }}>
-        {asGroup ? (
+        {curMode === "rule" && !!groups.length && (
          <List>
            {groups.map((group) => (
              <ProxyGroup key={group.name} group={group} />
            ))}
          </List>
-        ) : (
-          // virtual list
-          <Virtuoso
-            style={{ height: "100%" }}
-            totalCount={filterProxies.length}
-            itemContent={(index) => (
-              <ProxyItem
-                groupName="GLOBAL"
-                proxy={filterProxies[index]}
-                selected={filterProxies[index].name === curProxy}
-                onClick={onChangeProxy}
-                sx={{ py: 0, px: 2 }}
-              />
-            )}
+        )}
+        {((curMode === "rule" && !groups.length) || curMode === "global") && (
+          <ProxyGlobal
+            groupName="GLOBAL"
+            curProxy={proxiesData?.global?.now}
+            proxies={proxies}
+          />
+        )}
+        {curMode === "direct" && (
+          <ProxyGlobal
+            groupName="DIRECT"
+            curProxy="DIRECT"
+            proxies={[proxiesData?.direct!].filter(Boolean)}
          />
        )}
      </Paper>
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,4 +1,5 @@
 import { Paper } from "@mui/material";
+import { useTranslation } from "react-i18next";
 import Notice from "../components/base/base-notice";
 import BasePage from "../components/base/base-page";
 import SettingVerge from "../components/setting/setting-verge";
@@ -6,12 +7,14 @@ import SettingClash from "../components/setting/setting-clash";
 import SettingSystem from "../components/setting/setting-system";

 const SettingPage = () => {
-  const onError = (error: any) => {
-    error && Notice.error(error.toString());
+  const { t } = useTranslation();
+
+  const onError = (err: any) => {
+    Notice.error(err?.message || err.toString());
  };

  return (
-    <BasePage title="Settings">
+    <BasePage title={t("Settings")}>
      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
        <SettingClash onError={onError} />
      </Paper>
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -14,7 +14,13 @@ export async function getAxios(force: boolean = false) {
  try {
    const info = await getClashInfo();

-    if (info?.server) server = info?.server;
+    if (info?.server) {
+      server = info.server;
+
+      // compatible width `external-controller`
+      if (server.startsWith(":")) server = `127.0.0.1${server}`;
+      else if (/^\d+$/.test(server)) server = `127.0.0.1:${server}`;
+    }
    if (info?.secret) secret = info?.secret;
  } catch {}

@@ -84,33 +90,74 @@ export async function updateProxy(group: string, proxy: string) {
 export async function getProxies() {
  const instance = await getAxios();
  const response = await instance.get<any, any>("/proxies");
-  const proxies = (response?.proxies ?? {}) as Record<
+  const records = (response?.proxies ?? {}) as Record<
    string,
    ApiType.ProxyItem
  >;

-  const global = proxies["GLOBAL"];
+  const global = records["GLOBAL"];
+  const direct = records["DIRECT"];
+  const reject = records["REJECT"];
  const order = global?.all;

  let groups: ApiType.ProxyGroupItem[] = [];

+  // compatible with proxy-providers
+  const generateItem = (name: string) => {
+    if (records[name]) return records[name];
+    return { name, type: "unknown", udp: false, history: [] };
+  };
+
  if (order) {
    groups = order
-      .filter((name) => proxies[name]?.all)
-      .map((name) => proxies[name])
+      .filter((name) => records[name]?.all)
+      .map((name) => records[name])
      .map((each) => ({
        ...each,
-        all: each.all!.map((item) => proxies[item]),
+        all: each.all!.map((item) => generateItem(item)),
      }));
  } else {
-    groups = Object.values(proxies)
+    groups = Object.values(records)
      .filter((each) => each.name !== "GLOBAL" && each.all)
      .map((each) => ({
        ...each,
-        all: each.all!.map((item) => proxies[item]),
+        all: each.all!.map((item) => generateItem(item)),
      }));
    groups.sort((a, b) => b.name.localeCompare(a.name));
  }

-  return { global, groups, proxies };
+  const proxies = [direct, reject].concat(
+    Object.values(records).filter(
+      (p) => !p.all?.length && p.name !== "DIRECT" && p.name !== "REJECT"
+    )
+  );
+
+  return { global, direct, groups, records, proxies };
+}
+
+// todo: get proxy providers
+export async function getProviders() {
+  const instance = await getAxios();
+  const response = await instance.get<any, any>("/providers/proxies");
+  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();
+  await instance.delete<any, any>(`/connections/${encodeURIComponent(id)}`);
+}
+
+// Close all connections
+export async function closeAllConnections() {
+  const instance = await getAxios();
+  await instance.delete<any, any>(`/connections`);
 }
--- a/src/services/cmds.ts
+++ b/src/services/cmds.ts
@@ -1,5 +1,6 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { ApiType, CmdType } from "./types";
+import Notice from "../components/base/base-notice";

 export async function getProfiles() {
  return invoke<CmdType.ProfilesConfig>("get_profiles");
@@ -9,39 +10,60 @@ export async function syncProfiles() {
  return invoke<void>("sync_profiles");
 }

-export async function newProfile(name: string, desc: string) {
-  return invoke<void>("new_profile", { name, desc });
+export async function enhanceProfiles() {
+  return invoke<void>("enhance_profiles");
 }

-export async function viewProfile(index: number) {
+export async function createProfile(
+  item: Partial<CmdType.ProfileItem>,
+  fileData?: string | null
+) {
+  return invoke<void>("create_profile", { item, fileData });
+}
+
+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, withProxy: true });
+  return invoke<void>("import_profile", {
+    url,
+    option: { with_proxy: true },
+  });
 }

-export async function updateProfile(index: number, withProxy: boolean) {
-  return invoke<void>("update_profile", { index, withProxy });
+export async function updateProfile(
+  index: string,
+  option?: CmdType.ProfileOption
+) {
+  return invoke<void>("update_profile", { index, option });
 }

-export async function deleteProfile(index: number) {
+export async function deleteProfile(index: string) {
  return invoke<void>("delete_profile", { index });
 }

 export async function patchProfile(
-  index: number,
-  profile: CmdType.ProfileItem
+  index: string,
+  profile: Partial<CmdType.ProfileItem>
 ) {
  return invoke<void>("patch_profile", { index, profile });
 }

-export async function selectProfile(index: number) {
+export async function selectProfile(index: string) {
  return invoke<void>("select_profile", { index });
 }

-export async function restartSidecar() {
-  return invoke<void>("restart_sidecar");
+export async function changeProfileChain(chain?: string[]) {
+  return invoke<void>("change_profile_chain", { chain });
 }

 export async function getClashInfo() {
@@ -64,10 +86,22 @@ export async function getSystemProxy() {
  return invoke<any>("get_sys_proxy");
 }

+export async function restartSidecar() {
+  return invoke<void>("restart_sidecar");
+}
+
+export async function killSidecars() {
+  return invoke<any>("kill_sidecars");
+}
+
 export async function openAppDir() {
-  return invoke<void>("open_app_dir");
+  return invoke<void>("open_app_dir").catch((err) =>
+    Notice.error(err?.message || err.toString(), 1500)
+  );
 }

 export async function openLogsDir() {
-  return invoke<void>("open_logs_dir");
+  return invoke<void>("open_logs_dir").catch((err) =>
+    Notice.error(err?.message || err.toString(), 1500)
+  );
 }
--- a/src/services/delay.ts
+++ b/src/services/delay.ts
@@ -32,6 +32,39 @@ class DelayManager {
    this.setDelay(name, group, delay);
    return delay;
  }
+
+  async checkListDelay(
+    options: {
+      names: readonly string[];
+      groupName: string;
+      skipNum: number;
+      maxTimeout: number;
+    },
+    callback: Function
+  ) {
+    let names = [...options.names];
+    const { groupName, skipNum, maxTimeout } = options;
+
+    while (names.length) {
+      const list = names.slice(0, skipNum);
+      names = names.slice(skipNum);
+
+      let called = false;
+      setTimeout(() => {
+        if (!called) {
+          called = true;
+          callback();
+        }
+      }, maxTimeout);
+
+      await Promise.all(list.map((n) => this.checkDelay(n, groupName)));
+
+      if (!called) {
+        called = true;
+        callback();
+      }
+    }
+  }
 }

 export default new DelayManager();
--- a/src/services/enhance.ts
+++ b/src/services/enhance.ts
@@ -0,0 +1,210 @@
+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) {
+  if (!merge) return { data, use: [] };
+
+  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(preRules)) {
+    data.rules.unshift(...preRules);
+  }
+  if (Array.isArray(postRules)) {
+    data.rules.push(...postRules);
+  }
+
+  // proxies
+  if (Array.isArray(preProxies)) {
+    data.proxies.unshift(...preProxies);
+  }
+  if (Array.isArray(postProxies)) {
+    data.proxies.push(...postProxies);
+  }
+
+  // proxy-groups
+  if (Array.isArray(preProxyGroups)) {
+    data["proxy-groups"].unshift(...preProxyGroups);
+  }
+  if (Array.isArray(postProxyGroups)) {
+    data["proxy-groups"].push(...postProxyGroups);
+  }
+
+  return { data, use: Array.isArray(use) ? use : [] };
+}
+
+/**
+ * process the script mode
+ */
+function toScript(
+  script: string,
+  data: CmdType.ProfileData
+): Promise<CmdType.ProfileData> {
+  if (!script) {
+    throw new Error("miss the main function");
+  }
+
+  const paramsName = `__verge${Math.floor(Math.random() * 1000)}`;
+  const code = `'use strict';${script};return main(${paramsName});`;
+  const func = new Function(paramsName, code);
+  return func(data);
+}
+
+export type EStatus = { status: "ok" | "error"; message?: string };
+export type EListener = (status: EStatus) => void;
+export type EUnlistener = () => void;
+
+/**
+ * The service helps to
+ * implement enhanced profiles
+ */
+class Enhance {
+  private isSetup = false;
+  private listenMap: Map<string, EListener>;
+  private resultMap: Map<string, EStatus>;
+
+  constructor() {
+    this.listenMap = new Map();
+    this.resultMap = new Map();
+  }
+
+  // setup some listener
+  // for the enhanced running status
+  listen(uid: string, cb: EListener): EUnlistener {
+    this.listenMap.set(uid, cb);
+    return () => this.listenMap.delete(uid);
+  }
+
+  // get the running status
+  status(uid: string): EStatus | undefined {
+    return this.resultMap.get(uid);
+  }
+
+  // setup the handler
+  setup() {
+    if (this.isSetup) return;
+    this.isSetup = true;
+
+    listen("script-handler", async (event) => {
+      const payload = event.payload as CmdType.EnhancedPayload;
+
+      const result = await this.runner(payload).catch((err: any) => ({
+        data: null,
+        status: "error",
+        error: err.message,
+      }));
+
+      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);
+    this.listenMap.get(uid)?.(status);
+  }
+}
+
+export default new Enhance();
--- a/src/services/i18n.ts
+++ b/src/services/i18n.ts
@@ -0,0 +1,17 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "../locales/en.json";
+import zh from "../locales/zh.json";
+
+const resources = {
+  en: { translation: en },
+  zh: { translation: zh },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "en",
+  interpolation: {
+    escapeValue: false,
+  },
+});
--- a/src/services/states.ts
+++ b/src/services/states.ts
@@ -0,0 +1,24 @@
+import { atom } from "recoil";
+import { ApiType } from "./types";
+
+export const atomClashPort = atom<number>({
+  key: "atomClashPort",
+  default: 0,
+});
+
+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
@@ -78,6 +78,8 @@ export namespace ApiType {
 * Some interface for command
 */
 export namespace CmdType {
+  export type ProfileType = "local" | "remote" | "merge" | "script";
+
  export interface ClashInfo {
    status: string;
    port?: string;
@@ -86,10 +88,11 @@ export namespace CmdType {
  }

  export interface ProfileItem {
+    uid: string;
+    type?: ProfileType | string;
    name?: string;
    desc?: string;
    file?: string;
-    mode?: string;
    url?: string;
    updated?: number;
    selected?: {
@@ -102,18 +105,99 @@ export namespace CmdType {
      total: number;
      expire: number;
    };
+    option?: ProfileOption;
+  }
+
+  export interface ProfileOption {
+    user_agent?: string;
+    with_proxy?: boolean;
  }

  export interface ProfilesConfig {
-    current?: number;
+    current?: string;
+    chain?: string[];
    items?: ProfileItem[];
  }

  export interface VergeConfig {
+    language?: string;
    theme_mode?: "light" | "dark";
    theme_blur?: boolean;
+    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;
+    };
+  }
+
+  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<{
+    rules: any[];
+    proxies: any[];
+    "proxy-groups": any[];
+    "proxy-providers": any[];
+    "rule-providers": any[];
+
+    [k: string]: any;
+  }>;
+
+  export interface ChainItem {
+    item: ProfileItem;
+    merge?: ProfileMerge;
+    script?: string;
+  }
+
+  export interface EnhancedPayload {
+    chain: ChainItem[];
+    current: ProfileData;
+    callback: string;
+  }
+
+  export interface EnhancedResult {
+    data: ProfileData;
+    status: string;
+    error?: string;
  }
 }
--- a/src/states/setting.ts
+++ b/src/states/setting.ts
@@ -1,16 +0,0 @@
-import { atom } from "recoil";
-
-export const atomPaletteMode = atom<"light" | "dark">({
-  key: "atomPaletteMode",
-  default: "light",
-});
-
-export const atomThemeBlur = atom<boolean>({
-  key: "atomThemeBlur",
-  default: false,
-});
-
-export const atomClashPort = atom<number>({
-  key: "atomClashPort",
-  default: 0,
-});
--- 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
GyDi	5cff4e299b	chore: update clash version	2022-03-20 12:37:55 +08:00
GyDi	bce33639da	v0.0.24	2022-03-20 01:50:39 +08:00
GyDi	366c465cad	chore: update log	2022-03-20 01:50:15 +08:00
GyDi	acc6e05bdc	feat: system tray supports system proxy setting	2022-03-20 01:36:43 +08:00
GyDi	4ce15577cd	feat: prevent context menu on Windows close #22	2022-03-19 19:28:53 +08:00
GyDi	98fa4d5e65	feat: create local profile with selected file	2022-03-19 19:21:55 +08:00
GyDi	7fe94076c7	feat: reduce the impact of the enhanced mode	2022-03-19 16:02:47 +08:00
GyDi	b8b0c8fa63	fix: adjust windows style	2022-03-19 15:35:59 +08:00
GyDi	e585e87bec	feat: parse update log	2022-03-19 15:31:58 +08:00
GyDi	6a4924bb16	chore: update log supports	2022-03-19 14:04:58 +08:00
GyDi	ab0d516d91	chore: updater proxy	2022-03-19 11:14:12 +08:00
GyDi	b756ae39d0	chore: ci support linux	2022-03-19 10:50:44 +08:00
GyDi	c15c38ea8f	chore: readme	2022-03-18 19:02:53 +08:00
GyDi	743963318f	feat: fill i18n	2022-03-18 14:59:23 +08:00
GyDi	ed3fc50858	feat: dayjs i18n	2022-03-18 14:45:24 +08:00
GyDi	5b886fe6be	feat: connections page simply support	2022-03-18 14:43:22 +08:00
GyDi	7074bbc405	feat: add wintun.dll by default	2022-03-18 11:49:00 +08:00
GyDi	ef314c1707	fix: change mixed port error	2022-03-18 11:39:02 +08:00
GyDi	a3e7626dd9	chore: add dev feature	2022-03-18 10:59:35 +08:00
GyDi	5cb5d74eed	chore: rename temp dir	2022-03-18 10:20:24 +08:00
GyDi	6eee10d46d	chore: resolve wintun.dll	2022-03-17 19:29:30 +08:00
GyDi	2d95f2b0d6	fix: auto launch path	2022-03-16 18:44:25 +08:00
GyDi	ec41bb9c70	fix: tun mode config	2022-03-15 14:23:57 +08:00
GyDi	2d1780b1cf	fix: adjsut open cmd error	2022-03-15 12:51:39 +08:00
GyDi	d9ce99887c	chore: fix ci env	2022-03-15 00:00:20 +08:00
GyDi	9b9cc90414	v0.0.23	2022-03-14 01:34:26 +08:00
GyDi	c1eb539a5c	feat: event emit when clash config update	2022-03-13 01:37:41 +08:00
GyDi	e1793f57ef	chore: fix ci	2022-03-13 00:59:42 +08:00
GyDi	dbd09a8743	chore: update tauri action	2022-03-13 00:58:49 +08:00
GyDi	0d189ca617	chore: green version bundle	2022-03-13 00:52:31 +08:00
GyDi	dc9bcc40ee	chore: rm then	2022-03-12 23:58:20 +08:00
GyDi	4991f7ff39	feat: i18n supports	2022-03-12 23:07:45 +08:00
GyDi	a393b8b122	fix: parse external-controller	2022-03-12 21:35:20 +08:00
GyDi	c73b354386	fix: config file case close #18	2022-03-12 21:03:17 +08:00
GyDi	392ecee3ff	chore: merge	2022-03-12 18:45:07 +08:00
ttyS3	bae721c49e	chore: show open app and log dir failed message	2022-03-12 18:04:56 +08:00
GyDi	4e806e21a6	chore: adjust error log	2022-03-12 15:57:16 +08:00
GyDi	ec0fdf83b2	feat: change open command on linux refactor(logging): refine open dir failed log message, add Linux support	2022-03-12 15:40:23 +08:00
ttyS3	cb94d8414f	feat: add Linux open dir support refactor(logging): refine open dir failed log message	2022-03-12 03:18:25 +08:00
GyDi	8890051c17	fix: patch item option	2022-03-11 19:56:56 +08:00
GyDi	cf00c9476f	fix: user agent not works	2022-03-11 19:50:51 +08:00
GyDi	b2a24c7abd	v0.0.22	2022-03-10 02:27:00 +08:00
GyDi	732a1f4694	chore: rm dead code	2022-03-10 02:25:35 +08:00
GyDi	4c5aa7084e	fix: external-controller	2022-03-10 02:19:06 +08:00
GyDi	fe1fea671c	feat: support more options for remote profile	2022-03-10 02:03:55 +08:00
GyDi	04c754c0ac	chore: reduce icon size on macOS	2022-03-10 01:04:53 +08:00
GyDi	754c22c84e	chore: adjust icon	2022-03-10 00:04:59 +08:00
GyDi	629331870b	chore: add linux link	2022-03-09 20:14:15 +08:00
GyDi	78774315cb	feat: linux system proxy	2022-03-09 19:48:32 +08:00
GyDi	36b9c07928	chore: update deps	2022-03-09 02:36:40 +08:00
GyDi	40a818630d	fix: change proxy bypass on mac	2022-03-09 02:36:03 +08:00
GyDi	568511a4cf	fix: kill sidecars after install still in test	2022-03-09 02:09:51 +08:00
GyDi	109fb39e09	fix: log some error	2022-03-09 02:00:56 +08:00
GyDi	68450d2042	chore: rename productName	2022-03-09 01:53:34 +08:00
GyDi	8a052bbed6	chore: update tauri version	2022-03-09 01:50:37 +08:00
GyDi	3afbb56640	fix: apply_blur parameter	2022-03-08 10:44:41 +08:00
GyDi	c0ad84a491	fix: limit enhanced profile range	2022-03-08 01:45:46 +08:00
GyDi	c72f17605c	chore: update deps	2022-03-08 01:18:20 +08:00
GyDi	42fbee0cdb	chore: add default bypass	2022-03-08 00:39:09 +08:00
GyDi	e9b7ec735f	fix: profile updated field	2022-03-07 01:41:42 +08:00
GyDi	743788135f	fix: profile field check	2022-03-07 01:30:32 +08:00
GyDi	8ea3e6fa26	fix: create dir panic	2022-03-07 01:06:21 +08:00
GyDi	f23c83e681	v0.0.21	2022-03-06 18:36:02 +08:00
GyDi	b615bda17e	chore: default release body	2022-03-06 18:34:38 +08:00
GyDi	f7c7cd1d3c	chore: update deps	2022-03-06 18:04:44 +08:00
GyDi	c7e7be4379	fix: only error when selected	2022-03-06 17:06:45 +08:00
GyDi	d63d49f246	feat: enhance profile status	2022-03-06 17:02:29 +08:00
GyDi	dad94edb20	feat: menu item refresh enhanced mode	2022-03-06 15:46:16 +08:00
GyDi	7108d5f3ab	fix: enhanced profile consistency	2022-03-06 15:40:16 +08:00
GyDi	ef47a74920	feat: profile enhanced mode	2022-03-06 14:59:25 +08:00
GyDi	a43dab8057	feat: profile enhanced ui	2022-03-05 22:54:39 +08:00
GyDi	f44039b628	feat: profile item adjust	2022-03-05 19:04:20 +08:00
GyDi	08fa5205b0	fix: simply compatible with proxy providers	2022-03-05 16:18:44 +08:00
GyDi	b91daebd92	fix: component warning	2022-03-05 15:48:39 +08:00
GyDi	9cd6c5c624	chore: update copyright	2022-03-05 01:51:29 +08:00
GyDi	650e017b72	fix: when updater failed	2022-03-04 02:10:27 +08:00
GyDi	18f9d6dec5	fix: log file	2022-03-04 02:08:26 +08:00
GyDi	4df6571ad9	chore: update deps	2022-03-03 20:37:06 +08:00
GyDi	0f5923a10a	chore: enhance wip	2022-03-03 01:58:05 +08:00
GyDi	bcdae1169e	fix: result	2022-03-03 01:56:47 +08:00
GyDi	f260d5df49	feat: enhanced profile (wip)	2022-03-03 01:52:02 +08:00
GyDi	808b861dd1	v0.0.20	2022-03-02 01:59:53 +08:00
GyDi	17f1c487a8	feat: edit profile item	2022-03-02 01:58:16 +08:00
GyDi	8dc2c1a38f	fix: cover profile extra	2022-03-02 01:45:00 +08:00
GyDi	220a494692	chore: adjust log field	2022-03-02 01:13:31 +08:00
GyDi	db6bc10196	chore: rm file	2022-03-02 00:58:07 +08:00
GyDi	1880363aeb	feat: use nanoid	2022-03-02 00:56:05 +08:00
GyDi	19c7b59883	feat: compatible profile config	2022-03-01 11:05:33 +08:00
GyDi	749df89229	refactor: profile config	2022-03-01 08:58:47 +08:00
GyDi	444f2172fa	v0.0.19	2022-02-28 01:59:53 +08:00
GyDi	77a77c0ea7	wip: refactor profile	2022-02-28 01:59:13 +08:00
GyDi	dbf380a0d1	refactor: use anyhow to handle error	2022-02-28 01:34:25 +08:00
GyDi	ade34f5217	fix: display menu only on macos	2022-02-27 01:47:56 +08:00
GyDi	e89607799a	fix: proxy global showType	2022-02-27 01:33:22 +08:00
GyDi	d05d8d6a9e	feat: native menu supports	2022-02-27 01:29:57 +08:00
GyDi	b6aa50d3dc	chore: update deps	2022-02-27 01:16:43 +08:00
GyDi	9df361935f	feat: filter proxy and display type	2022-02-27 00:58:14 +08:00
GyDi	98b8a122b6	feat: use lock fn	2022-02-26 17:39:36 +08:00
GyDi	c7232522ee	feat: refactor proxy page	2022-02-26 17:39:08 +08:00
GyDi	5280f1d745	feat: proxy group auto scroll to current	2022-02-26 01:21:39 +08:00
GyDi	b52a081e7b	v0.0.18	2022-02-25 02:13:41 +08:00
GyDi	f981a44861	chore: ci	2022-02-25 02:12:55 +08:00
GyDi	d7c5ce0750	feat: clash tun mode supports	2022-02-25 02:09:39 +08:00
GyDi	9ccc66ca1e	feat: use enhanced guard-state	2022-02-25 01:22:33 +08:00
GyDi	8606af3616	feat: guard state supports debounce guard	2022-02-25 01:21:13 +08:00
GyDi	f6e821ba6b	feat: adjust clash version display	2022-02-24 23:04:18 +08:00
GyDi	e8dbcf819b	feat: hide command window	2022-02-24 22:46:12 +08:00
GyDi	bbe2ef4e8e	fix: use full clash config	2022-02-23 23:23:07 +08:00
GyDi	dd15455031	feat: enhance log data	2022-02-23 02:00:45 +08:00
GyDi	12ac7bb338	chore: update readme	2022-02-22 21:54:33 +08:00
GyDi	46ef348f0d	v0.0.17	2022-02-22 02:08:31 +08:00
GyDi	1a55cca8af	fix: reconnect websocket when restart clash	2022-02-22 02:05:22 +08:00
GyDi	81ee989f1f	chore: enhance publish ci	2022-02-22 01:56:06 +08:00
GyDi	c9c06f8a3d	fix: wrong exe path	2022-02-21 22:33:37 +08:00
GyDi	72127979c3	chore: use tauri cli	2022-02-21 22:31:00 +08:00
GyDi	1ad3ddef94	v0.0.16	2022-02-21 01:33:11 +08:00
GyDi	97ec5eabf7	feat: change window style	2022-02-20 23:46:13 +08:00
GyDi	e12e3a3f2d	feat: fill verge template	2022-02-20 20:12:55 +08:00
GyDi	4ff625f23b	feat: enable customize guard duration	2022-02-20 20:11:39 +08:00
GyDi	e38dcd85ac	feat: system proxy guard	2022-02-20 18:53:21 +08:00
GyDi	0245baf1b6	feat: enable show or hide traffic graph	2022-02-19 18:14:40 +08:00
GyDi	10b55c043c	fix: patch verge config	2022-02-19 17:32:23 +08:00
GyDi	457655b416	feat: traffic line graph	2022-02-19 17:02:24 +08:00
GyDi	7e4506c860	chore: update deps	2022-02-19 00:34:09 +08:00
GyDi	794d376348	feat: adjust profile item ui	2022-02-19 00:23:47 +08:00
GyDi	c60578f5b5	feat: adjust fetch profile url	2022-02-19 00:09:36 +08:00
GyDi	3a9a392a77	feat: inline config file template	2022-02-18 23:57:13 +08:00
GyDi	a13d4698be	chore: update check script	2022-02-18 23:49:39 +08:00
GyDi	c046a1993e	fix: fetch profile panic	2022-02-17 13:44:26 +08:00
GyDi	f709117cc4	feat: kill sidecars when update app	2022-02-17 02:10:25 +08:00
GyDi	30dd298fca	feat: delete file	2022-02-17 01:58:12 +08:00
GyDi	0ff8bb8090	feat: lock some async functions	2022-02-17 01:42:25 +08:00