Merge remote-tracking branch 'nyanpasu/main'

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,8 +3,7 @@ name: Bug report
 about: Create a report to help us improve
 title: "[BUG]"
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,6 +24,7 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Information**
+
 - OS: [e.g. macOS]
 - Clash Verge Version: [e.g. 1.3.4]
 - Clash Core: [e.g. Clash or Clash Meta]

.github/workflows/dev.yaml

@@ -1,11 +1,10 @@
-name: Alpha CI
+name: Dev Build
 
 on:
   workflow_dispatch:
-    inputs:
-      debug:
-        type: boolean
-        default: false
+  push:
+    branches:
+      - dev
 
 env:
   CARGO_INCREMENTAL: 0
@@ -14,9 +13,9 @@ env:
 jobs:
   release:
     strategy:
-      fail-fast: false
       matrix:
-        os: [windows-latest, ubuntu-20.04, macos-latest]
+        os: [windows-latest, ubuntu-latest, macos-latest]
+
     runs-on: ${{ matrix.os }}
     if: startsWith(github.repository, 'wonfen')
     steps:
@@ -34,15 +33,20 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "16"
-          cache: "yarn"
+          node-version: "20"
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
 
       - name: Delete current release assets
         if: startsWith(matrix.os, 'ubuntu-')
         uses: mknejp/delete-release-assets@v1
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          tag: alpha
+          token: ${{ secrets.GH_TOKEN }}
+          tag: dev
           fail-if-no-assets: false
           fail-if-no-release: false
           assets: |
@@ -54,40 +58,41 @@ jobs:
             *.msi
             *.sig
             *.exe
+            *.json
 
-      - name: Install Dependencies (ubuntu only)
+      - name: Install Dependencies (Ubuntu Only)
         if: startsWith(matrix.os, 'ubuntu-')
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf openssl
 
-      - name: Yarn install and check
+      - name: Pnpm install and check
         run: |
-          yarn install --network-timeout 1000000 --frozen-lockfile
-          yarn run check --force
+          pnpm i
+          pnpm check
 
       - name: Tauri build
         uses: tauri-apps/tauri-action@v0
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
         with:
-          tagName: alpha
-          releaseName: "Clash Verge Alpha"
-          releaseBody: "Alpha Version (include debug)"
+          tagName: dev
+          releaseName: "Clash Verge Dev"
+          releaseBody: "More new features are now supported."
           releaseDraft: false
           prerelease: true
-          includeDebug: ${{ github.event.inputs.debug }}
+          tauriScript: pnpm
+          args: -f default-meta
 
       - name: Portable Bundle
-        if: startsWith(matrix.os, 'windows-')
+        if: matrix.os == 'windows-latest'
         run: |
-          yarn build
-          yarn run portable
+          pnpm portable
         env:
-          TAG_NAME: alpha
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAG_NAME: dev
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
           VITE_WIN_PORTABLE: 1

.github/workflows/release.yml

@@ -1,10 +1,10 @@
-name: Release CI
+name: Release Build
 
 on:
   workflow_dispatch:
   push:
-    tags:
-      - v**
+    branches:
+      - main
 
 env:
   CARGO_INCREMENTAL: 0
@@ -42,19 +42,24 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "16"
-          cache: "yarn"
+          node-version: "20"
 
-      - name: Install Dependencies (ubuntu only)
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install Dependencies (Ubuntu Only)
         if: startsWith(matrix.os, 'ubuntu-')
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf openssl
 
-      - name: Yarn install and check
+      - name: Pnpm install and check
         run: |
-          yarn install --network-timeout 1000000 --frozen-lockfile
-          yarn run check
+          pnpm i
+          pnpm check
 
       - name: Tauri build
         uses: tauri-apps/tauri-action@v0
@@ -62,7 +67,7 @@ jobs:
         # continue-on-error: true
         if: matrix.portable == false
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
         with:
@@ -70,17 +75,16 @@ jobs:
           releaseName: "Clash Verge v__VERSION__"
           releaseBody: "More new features are now supported."
           releaseDraft: false
-          prerelease: true
+          prerelease: false
+          tauriScript: pnpm
           args: -f default-meta
 
       - name: Portable Bundle
-        if: matrix.portable == true
+        if: matrix.os == 'windows-latest'
         run: |
-          yarn install --network-timeout 1000000 --frozen-lockfile
-          yarn build -f default-meta
-          yarn run portable
+          pnpm portable
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
           VITE_WIN_PORTABLE: 1
@@ -98,13 +102,18 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v4
         with:
-          node-version: "16"
-          cache: "yarn"
+          node-version: "20"
 
-      - name: Yarn install
-        run: yarn install --network-timeout 1000000 --frozen-lockfile
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Pnpm install
+        run: pnpm i
 
       - name: Release updater file
-        run: yarn run updater
+        run: pnpm updater
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/updater.yaml

@@ -0,0 +1,31 @@
+name: Updater CI
+
+on: workflow_dispatch
+
+jobs:
+  release-update:
+    runs-on: ubuntu-latest
+    if: |
+      startsWith(github.repository, 'keiko233')
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Pnpm install
+        run: pnpm i
+
+      - name: Release updater file
+        run: pnpm updater
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pretty-quick --staged
+pnpm pretty-quick --staged

README.md

@@ -17,7 +17,7 @@ A 接盘 Clash Meta GUI based on <a href="https://github.com/tauri-apps/tauri">t
 - Built-in support [Clash.Meta](https://github.com/MetaCubeX/Clash.Meta) core.
 - System proxy setting and guard.
 
-## Promotion
+## Preview
 
 [狗狗加速 —— 技术流机场 Doggygo VPN](https://狗狗加速.com)
 
@@ -50,66 +50,44 @@ Notes: If you could not start the app on Windows, please check that you have [We
 
 #### 1. **macOS** "Clash Verge" is damaged and can't be opened
 
-open the terminal and run `sudo xattr -r -d com.apple.quarantine /Applications/Clash\ Verge.app`
+open the terminal and run `sudo xattr -r -d com.apple.quarantine /Applications/Clash\ Nyanpasu.app`
 
 ## Development
 
 You should install Rust and Nodejs, see [here](https://tauri.app/v1/guides/getting-started/prerequisites) for more details. Then install Nodejs packages.
 
 ```shell
-yarn install
+pnpm i
 ```
 
 Then download the clash binary... Or you can download it from [clash meta release](https://github.com/MetaCubeX/Clash.Meta/releases) and rename it according to [tauri config](https://tauri.studio/docs/api/config/#tauri.bundle.externalBin).
 
 ```shell
 # force update to latest version
-# yarn run check --force
+# pnpm run check --force
 
-yarn run check
+pnpm run check
 ```
 
 Then run
 
 ```shell
-yarn dev
+pnpm dev
 
 # run it in another way if app instance exists
-yarn dev:diff
+pnpm dev:diff
 ```
 
 Or you can build it
 
 ```shell
-yarn build
+pnpm build
 ```
 
 ## Todos
 
 > This keng is a little big...
 
-## Screenshots
-
-<div align="center">
-  <img src="./docs/demo1.png" alt="demo1" width="32%" />
-  <img src="./docs/demo2.png" alt="demo2" width="32%" />
-  <img src="./docs/demo3.png" alt="demo3" width="32%" />
-  <img src="./docs/demo4.png" alt="demo4" width="32%" />
-  <img src="./docs/demo5.png" alt="demo5" width="32%" />
-  <img src="./docs/demo6.png" alt="demo6" width="32%" />
-</div>
-
-### Custom Theme
-
-<div align="center">
-  <img src="./docs/color1.png" alt="demo1" width="16%" />
-  <img src="./docs/color2.png" alt="demo2" width="16%" />
-  <img src="./docs/color3.png" alt="demo3" width="16%" />
-  <img src="./docs/color4.png" alt="demo4" width="16%" />
-  <img src="./docs/color5.png" alt="demo5" width="16%" />
-  <img src="./docs/color6.png" alt="demo6" width="16%" />
-</div>
-
 ## Disclaimer
 
 This is a learning project for Rust practice.
@@ -122,6 +100,8 @@ Issue and PR welcome!
 
 Clash Verge was based on or inspired by these projects and so on:
 
+- [keiko233/clash-nyanpasu](https://github.com/keiko233/clash-nyanpasu): A Clash Verge.
+- [zzzgydi/clash-verge](https://github.com/zzzgydi/clash-verge): A Clash GUI based on tauri. Supports Windows, macOS and Linux.
 - [tauri-apps/tauri](https://github.com/tauri-apps/tauri): Build smaller, faster, and more secure desktop applications with a web frontend.
 - [Dreamacro/clash](https://github.com/Dreamacro/clash): A rule-based tunnel in Go.
 - [MetaCubeX/Clash.Meta](https://github.com/MetaCubeX/Clash.Meta): A rule-based tunnel in Go.

UPDATELOG.md

@@ -1,9 +1,13 @@
-## v1.3.9
+## v1.4.0
 
 ### Features
 
 - update clash meta core to newest 虚空终端
 - delete clash core, no longer maintain
+- merge Clash nyanpasu changes
+- remove delay display different color
+- use Meta Country.mmdb
+- update dependencies
 - small changes here and there
 
 ---

package.json

@@ -1,11 +1,11 @@
 {
   "name": "clash-verge",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "license": "GPL-3.0",
   "scripts": {
-    "dev": "tauri dev",
+    "dev": "tauri dev -f default-meta",
     "dev:diff": "tauri dev -f verge-dev",
-    "build": "tauri build",
+    "build": "tauri build -f default-meta",
     "tauri": "tauri",
     "web:dev": "vite",
     "web:build": "tsc && vite build",
@@ -18,12 +18,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@mui/icons-material": "^5.10.9",
-    "@mui/material": "^5.10.13",
-    "@mui/x-data-grid": "^5.17.11",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/lab": "5.0.0-alpha.149",
+    "@mui/material": "^5.14.14",
+    "@mui/x-data-grid": "^6.16.3",
     "@tauri-apps/api": "^1.3.0",
     "ahooks": "^3.7.2",
     "axios": "^1.1.3",
@@ -37,6 +38,7 @@
     "react-hook-form": "^7.39.5",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
+    "react-transition-group": "^4.4.5",
     "react-virtuoso": "^3.1.3",
     "recoil": "^0.7.6",
     "snarkdown": "^2.0.0",
@@ -49,8 +51,10 @@
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.180",
     "@types/lodash-es": "^4.17.7",
+    "@types/react": "^18.2.37",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@types/react-transition-group": "^4.4.9",
+    "@vitejs/plugin-react": "^4.1.0",
     "adm-zip": "^0.5.9",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.0.0",
@@ -61,9 +65,9 @@
     "pretty-quick": "^3.1.3",
     "sass": "^1.54.0",
     "typescript": "^4.7.4",
-    "vite": "^3.2.5",
+    "vite": "^4.5.0",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-svgr": "^2.2.1"
+    "vite-plugin-svgr": "^4.1.0"
   },
   "prettier": {
     "tabWidth": 2,

scripts/aarch.mjs

@@ -33,7 +33,7 @@ async function resolve() {
   const { version } = require("../package.json");
 
   const tag = META ? "meta" : ALPHA ? "alpha" : `v${version}`;
-  const buildCmd = META ? `yarn build -f default-meta` : `yarn build`;
+  const buildCmd = META ? `pnpm build -f default-meta` : `pnpm build`;
 
   console.log(`[INFO]: Upload to tag "${tag}"`);
   console.log(`[INFO]: Building app. "${buildCmd}"`);

scripts/check.mjs

@@ -20,6 +20,13 @@ const CLASH_URL_PREFIX =
   "https://github.com/Dreamacro/clash/releases/download/premium/";
 const CLASH_LATEST_DATE = "latest";
 
+const CLASH_BACKUP_URL_PREFIX =
+  "https://github.com/zhongfly/Clash-premium-backup/releases/download/";
+const CLASH_BACKUP_LATEST_DATE = "2023-09-05-gdcc8d87";
+
+//https://github.com/zhongfly/Clash-premium-backup/releases/download/2023-09-05-gdcc8d87/clash-windows-amd64-2023-09-05-gdcc8d87.zip
+//https://github.com/zhongfly/Clash-premium-backup/releases/download/2023-09-05-gdcc8d87/clash-windows-amd64-n2023-09-05-gdcc8d87.zip
+
 const CLASH_MAP = {
   "win32-x64": "clash-windows-amd64",
   "darwin-x64": "clash-darwin-amd64",
@@ -30,10 +37,10 @@ const CLASH_MAP = {
 */
 /* ======= clash meta ======= */
 const META_URL_PREFIX = `https://github.com/wonfen/Clash.Meta/releases/download/`;
-const META_VERSION = "2023.11.22";
+const META_VERSION = "2023.11.21";
 
 const META_MAP = {
-  "win32-x64": "clash.meta-windows-amd64",
+  "win32-x64": "clash.meta-win-amd64",
   "darwin-x64": "clash.meta-darwin-amd64",
   "darwin-arm64": "clash.meta-darwin-arm64",
   "linux-x64": "clash.meta-linux-amd64",
@@ -72,6 +79,24 @@ function clash() {
   };
 }
 
+function clashBackup() {
+  const name = CLASH_MAP[`${platform}-${arch}`];
+
+  const isWin = platform === "win32";
+  const urlExt = isWin ? "zip" : "gz";
+  const downloadURL = `${CLASH_BACKUP_URL_PREFIX}${CLASH_BACKUP_LATEST_DATE}/${name}-n${CLASH_BACKUP_LATEST_DATE}.${urlExt}`;
+  const exeFile = `${name}${isWin ? ".exe" : ""}`;
+  const zipFile = `${name}.${urlExt}`;
+
+  return {
+    name: "clash",
+    targetFile: `clash-${SIDECAR_HOST}${isWin ? ".exe" : ""}`,
+    exeFile,
+    zipFile,
+    downloadURL,
+  };
+}
+
 function clashS3() {
   const name = CLASH_MAP[`${platform}-${arch}`];
 

scripts/updater.mjs

@@ -41,12 +41,10 @@ async function resolveUpdater() {
       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: "" },
       "darwin-x86_64": { signature: "", url: "" },
       "linux-x86_64": { signature: "", url: "" },
       "windows-x86_64": { signature: "", url: "" },
-      "windows-i686": { signature: "", url: "" }, // no supported
     },
   };
 
@@ -79,16 +77,6 @@ async function resolveUpdater() {
       updateData.platforms["darwin-x86_64"].signature = sig;
     }
 
-    // darwin url (aarch)
-    if (name.endsWith("aarch64.app.tar.gz")) {
-      updateData.platforms["darwin-aarch64"].url = browser_download_url;
-    }
-    // darwin signature (aarch)
-    if (name.endsWith("aarch64.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;

src-tauri/Cargo.lock

@@ -547,7 +547,7 @@ dependencies = [
 
 [[package]]
 name = "clash-verge"
-version = "1.3.9"
+version = "1.4.0"
 dependencies = [
  "anyhow",
  "auto-launch",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "clash-verge"
-version = "1.3.9"
+version = "1.4.0"
 description = "clash verge"
 authors = ["zzzgydi"]
 license = "GPL-3.0"

src-tauri/src/cmds.rs

@@ -176,9 +176,9 @@ pub async fn restart_sidecar() -> CmdResult {
 }
 
 #[tauri::command]
-pub fn grant_permission(core: String) -> CmdResult {
+pub fn grant_permission(_core: String) -> CmdResult {
     #[cfg(any(target_os = "macos", target_os = "linux"))]
-    return wrap_err!(manager::grant_permission(core));
+    return wrap_err!(manager::grant_permission(_core));
 
     #[cfg(not(any(target_os = "macos", target_os = "linux")))]
     return Err("Unsupported target".into());

src-tauri/src/config/clash.rs

@@ -42,6 +42,11 @@ impl IClashTemp {
             },
         );
         map.insert("secret".into(), "".into());
+        #[cfg(feature = "default-meta")]
+        map.insert("unified-delay".into(), true.into());
+        #[cfg(feature = "default-meta")]
+        map.insert("tcp-concurrent".into(), true.into());
+        map.insert("ipv6".into(), false.into());
 
         Self(map)
     }

src-tauri/src/config/profiles.rs

@@ -55,7 +55,7 @@ impl IProfiles {
 
     pub fn template() -> Self {
         Self {
-            valid: Some(vec!["dns".into(), "sub-rules".into(), "unified-delay".into()]),
+            valid: Some(vec!["dns".into(), "sub-rules".into(), "unified-delay".into(), "tcp-concurrent".into()]),
             items: Some(vec![]),
             ..Self::default()
         }

src-tauri/src/core/sysopt.rs

@@ -23,11 +23,11 @@ pub struct Sysopt {
 }
 
 #[cfg(target_os = "windows")]
-static DEFAULT_BYPASS: &str = "localhost;127.*;192.168.*;<local>";
+static DEFAULT_BYPASS: &str = "localhost;127.*;192.168.*;10.*;172.16.*;<local>";
 #[cfg(target_os = "linux")]
-static DEFAULT_BYPASS: &str = "localhost,127.0.0.1,::1";
+static DEFAULT_BYPASS: &str = "localhost,127.0.0.1,192.168.0.0/16,10.0.0.0/8,172.16.0.0/12,::1";
 #[cfg(target_os = "macos")]
-static DEFAULT_BYPASS: &str = "127.0.0.1,localhost,<local>";
+static DEFAULT_BYPASS: &str = "127.0.0.1,192.168.0.0/16,10.0.0.0/8,172.16.0.0/12,localhost,*.local,*.crashlytics.com,<local>";
 
 impl Sysopt {
     pub fn global() -> &'static Sysopt {

src-tauri/src/core/tray.rs

@@ -52,8 +52,16 @@ impl Tray {
             ))
             .add_item(CustomMenuItem::new("tun_mode", t!("TUN Mode", "Tun 模式")))
             .add_item(CustomMenuItem::new(
-                "copy_env",
-                t!("Copy Env", "复制环境变量"),
+                "copy_env_sh",
+                t!("Copy Env (sh)", "复制环境变量(sh)"),
+            ))
+            .add_item(CustomMenuItem::new(
+                "copy_env_cmd",
+                t!("Copy Env (CMD)", "复制环境变量(CMD)"),
+            ))
+            .add_item(CustomMenuItem::new(
+                "copy_env_ps",
+                t!("Copy Env (PS)", "复制环境变量(PS)"),
             ))
             .add_submenu(SystemTraySubmenu::new(
                 t!("Open Dir", "打开目录"),
@@ -149,7 +157,11 @@ impl Tray {
                 "open_window" => resolve::create_window(app_handle),
                 "system_proxy" => feat::toggle_system_proxy(),
                 "tun_mode" => feat::toggle_tun_mode(),
-                "copy_env" => feat::copy_clash_env(),
+                "copy_env_sh" => feat::copy_clash_env("sh"),
+                #[cfg(target_os = "windows")]
+                "copy_env_cmd" => feat::copy_clash_env("cmd"),
+                #[cfg(target_os = "windows")]
+                "copy_env_ps" => feat::copy_clash_env("ps"),
                 "open_app_dir" => crate::log_err!(cmds::open_app_dir()),
                 "open_core_dir" => crate::log_err!(cmds::open_core_dir()),
                 "open_logs_dir" => crate::log_err!(cmds::open_logs_dir()),

src-tauri/src/feat.rs

@@ -332,10 +332,21 @@ async fn update_core_config() -> Result<()> {
 }
 
 /// copy env variable
-pub fn copy_clash_env() {
+pub fn copy_clash_env(option: &str) {
     let port = { Config::clash().data().get_client_info().port };
-    let text = format!("export https_proxy=http://127.0.0.1:{port} http_proxy=http://127.0.0.1:{port} all_proxy=socks5://127.0.0.1:{port}");
+    let http_proxy = format!("http://127.0.0.1:{}", port);
+    let socks5_proxy = format!("socks5://127.0.0.1:{}", port);
+    
+    let sh = format!("export https_proxy={http_proxy} http_proxy={http_proxy} all_proxy={socks5_proxy}");
+    let cmd: String = format!("set http_proxy={http_proxy} \n set https_proxy={http_proxy}");
+    let ps: String = format!("$env:HTTP_PROXY=\"{http_proxy}\"; $env:HTTPS_PROXY=\"{http_proxy}\"");
 
     let mut cliboard = Clipboard::new();
-    cliboard.write_text(text);
+
+    match option {
+        "sh" => cliboard.write_text(sh),
+        "cmd" => cliboard.write_text(cmd),
+        "ps" => cliboard.write_text(ps),
+        _ => log::error!(target: "app", "copy_clash_env: Invalid option! {option}"),
+    }
 }

src-tauri/src/utils/init.rs

@@ -161,7 +161,7 @@ pub fn init_config() -> Result<()> {
 
     crate::log_err!(dirs::clash_path().map(|path| {
         if !path.exists() {
-            help::save_yaml(&path, &IClashTemp::template().0, Some("# Clash Verge"))?;
+            help::save_yaml(&path, &IClashTemp::template().0, Some("# Clash Vergeasu"))?;
         }
         <Result<()>>::Ok(())
     }));

src-tauri/tauri.conf.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "productName": "Clash Verge",
-    "version": "1.3.9"
+    "version": "1.4.0"
   },
   "build": {
     "distDir": "../dist",
     "devPath": "http://localhost:3000/",
-    "beforeDevCommand": "yarn run web:dev",
-    "beforeBuildCommand": "yarn run web:build"
+    "beforeDevCommand": "pnpm run web:dev",
+    "beforeBuildCommand": "pnpm run web:build"
   },
   "tauri": {
     "systemTray": {
@@ -17,7 +17,7 @@
     "bundle": {
       "active": true,
       "targets": "all",
-      "identifier": "top.gydi.clashverge",
+      "identifier": "moe.elaina.clash.verge",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",

src/assets/image/logo.svg

@@ -1,18 +1,36 @@
-<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400"
-  height="400" viewBox="0, 0, 400,400">
+<!--
+     Copyright (C) 2022 The Project Verge
+
+     SPDX-License-Identifier: Apache-2.0
+
+     thanks: @ReallySnow
+-->
+
+<svg width="420px" height="490px" viewBox="0 0 420 490" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
-    <linearGradient id="Gradient2" x1="0" x2="-0.1" y1="0" y2="1">
-      <stop offset="0%" stop-color="#5b5c9d" />
-      <stop offset="80%" stop-color="rgb(63, 64, 109)" />
-      <stop offset="100%" stop-color="rgb(63, 64, 109)" />
-    </linearGradient>
+    <style><![CDATA[
+      #element {
+        fill: #000000;
+      }
+    ]]></style>
   </defs>
-  <g id="svgg">
-    <path id="path0"
-      d="M118.124 39.858 C 116.645 40.182,114.562 42.930,113.283 46.247 C 111.908 49.812,110.887 54.542,107.205 74.400 C 106.736 76.930,105.926 81.160,105.404 83.800 C 104.527 88.237,103.654 92.889,102.177 101.000 C 101.856 102.760,101.413 105.100,101.192 106.200 C 100.754 108.375,100.784 108.199,98.436 122.200 C 96.675 132.702,95.947 137.215,94.984 143.600 C 94.636 145.910,94.098 149.420,93.789 151.400 C 92.649 158.697,91.961 164.413,92.180 164.768 C 92.304 164.968,92.223 165.192,92.000 165.266 C 91.777 165.340,96.852 165.347,103.277 165.282 C 116.520 165.149,115.721 165.379,116.358 161.519 C 122.839 122.279,179.334 121.580,186.617 160.650 C 186.981 162.602,187.463 164.425,187.689 164.700 C 188.328 165.481,229.717 165.423,230.367 164.640 C 230.622 164.332,231.013 162.937,231.235 161.540 C 237.531 121.949,295.239 121.807,301.620 161.367 C 302.274 165.421,301.855 165.252,310.962 165.117 C 315.273 165.052,318.861 165.090,318.935 165.200 C 319.009 165.310,319.005 165.152,318.927 164.848 C 318.849 164.545,318.519 162.610,318.193 160.548 C 317.867 158.487,317.330 155.135,317.000 153.100 C 316.162 147.934,315.312 142.663,314.823 139.600 C 314.595 138.170,314.226 136.010,314.004 134.800 C 313.781 133.590,312.423 125.400,310.985 116.600 C 304.278 75.545,304.008 74.156,298.145 50.400 C 295.961 41.553,294.621 39.584,290.800 39.611 C 287.927 39.631,283.053 43.395,279.420 48.400 C 277.509 51.032,261.566 79.109,256.960 87.953 C 253.991 93.654,253.647 93.789,245.600 92.402 C 218.757 87.774,194.454 87.780,170.478 92.420 C 162.868 93.893,163.987 94.596,157.579 84.306 C 133.879 46.247,126.566 38.009,118.124 39.858 M147.277 134.807 C 123.365 138.118,111.083 165.918,124.948 185.349 C 140.543 207.202,173.704 202.274,182.466 176.800 C 190.000 154.900,170.471 131.596,147.277 134.807 M262.051 134.810 C 235.780 138.440,224.730 170.720,243.356 189.422 C 264.398 210.548,299.874 195.275,298.689 165.600 C 297.927 146.523,280.892 132.207,262.051 134.810 M157.600 153.840 C 163.092 156.341,166.343 161.914,165.902 168.074 C 164.875 182.425,145.082 186.221,138.715 173.287 C 132.759 161.189,145.324 148.250,157.600 153.840 M273.193 153.597 C 279.788 156.926,283.287 165.159,280.844 171.600 C 275.229 186.406,253.594 183.910,252.135 168.287 C 251.125 157.467,263.609 148.758,273.193 153.597 M91.200 168.809 C 91.200 169.522,90.939 171.836,90.621 173.952 C 89.933 178.523,87.567 196.170,85.788 210.000 C 85.462 212.530,85.012 215.860,84.786 217.400 C 84.561 218.940,84.191 221.820,83.964 223.800 C 83.737 225.780,83.288 229.560,82.965 232.200 C 81.886 241.026,80.172 255.664,79.404 262.600 C 78.867 267.450,78.532 270.381,76.987 283.800 C 76.251 290.187,75.405 297.881,74.568 305.800 C 74.220 309.100,73.789 313.150,73.613 314.800 C 73.436 316.450,73.063 320.230,72.784 323.200 C 72.504 326.170,72.169 328.723,72.038 328.874 C 71.701 329.262,59.638 327.033,54.028 325.546 C 34.668 320.412,26.096 301.951,35.625 285.911 C 38.026 281.869,41.515 278.587,49.795 272.581 C 58.081 266.570,59.262 265.247,59.510 261.702 C 59.969 255.136,50.677 252.070,40.551 255.447 C -6.127 271.014,-3.894 337.227,43.806 351.951 C 50.541 354.030,58.050 355.239,67.760 355.807 C 72.410 356.079,75.202 356.542,82.181 358.199 C 88.822 359.777,100.215 360.425,156.000 362.398 C 170.725 362.918,255.192 362.921,267.760 362.401 C 273.062 362.182,281.900 361.820,287.400 361.597 C 302.851 360.972,326.558 359.339,333.200 358.444 C 343.055 357.116,343.889 354.966,341.839 336.200 C 341.502 333.120,340.948 327.900,340.607 324.600 C 340.266 321.300,339.709 315.990,339.370 312.800 C 339.030 309.610,338.499 304.570,338.189 301.600 C 337.022 290.393,335.650 278.160,334.622 269.800 C 333.105 257.460,332.638 254.027,330.408 238.800 C 329.716 234.070,328.983 229.030,328.781 227.600 C 328.579 226.170,328.231 223.920,328.008 222.600 C 327.785 221.280,326.695 214.260,325.587 207.000 C 324.478 199.740,323.124 191.010,322.578 187.600 C 322.032 184.190,321.325 179.780,321.007 177.800 C 320.689 175.820,320.203 172.711,319.925 170.892 C 319.508 168.155,319.315 167.635,318.810 167.885 C 318.475 168.051,314.780 168.279,310.600 168.393 C 301.870 168.631,302.159 168.535,301.810 171.300 C 299.468 189.825,283.036 203.371,264.230 202.279 C 247.552 201.310,233.532 188.465,231.203 172.020 C 230.651 168.125,232.337 168.400,209.000 168.400 C 185.703 168.400,187.432 168.114,186.814 172.064 C 180.639 211.474,123.556 212.329,116.559 173.117 C 115.684 168.218,116.787 168.629,103.881 168.400 C 97.676 168.290,92.285 168.046,91.900 167.857 C 91.307 167.567,91.200 167.712,91.200 168.809 M211.015 197.632 C 214.247 200.942,215.394 201.357,220.447 201.050 C 225.236 200.759,225.846 201.071,224.310 203.023 C 221.899 206.089,216.333 205.843,210.779 202.425 C 208.312 200.907,207.846 200.906,205.600 202.405 C 200.180 206.022,193.561 206.136,191.600 202.647 C 190.824 201.267,191.555 200.665,193.600 201.001 C 199.643 201.993,201.561 201.450,204.900 197.805 C 207.534 194.929,208.352 194.906,211.015 197.632 "
-      stroke="none" fill="url(#Gradient2)" fill-rule="evenodd"></path>
-    <path id="path1"
-      d="M148.000 131.622 C 132.020 133.140,119.114 145.293,116.377 161.400 C 115.675 165.535,116.697 165.239,103.579 165.112 C 97.252 165.050,92.159 165.135,92.261 165.300 C 92.364 165.465,92.279 165.600,92.074 165.600 C 91.391 165.600,91.684 167.617,92.424 168.013 C 92.839 168.235,97.730 168.400,103.897 168.400 C 116.551 168.400,115.666 168.070,116.562 173.117 C 123.522 212.326,180.639 211.470,186.814 172.064 C 187.432 168.114,185.703 168.400,209.000 168.400 C 232.337 168.400,230.651 168.125,231.203 172.020 C 233.532 188.465,247.552 201.310,264.230 202.279 C 283.039 203.371,299.468 189.826,301.811 171.294 C 302.169 168.458,302.345 168.400,310.600 168.400 C 318.988 168.400,319.609 168.159,318.852 165.200 C 318.824 165.090,315.273 165.052,310.961 165.117 C 301.855 165.252,302.274 165.421,301.620 161.367 C 295.239 121.807,237.531 121.949,231.235 161.540 C 231.013 162.937,230.622 164.332,230.367 164.640 C 229.717 165.423,188.328 165.481,187.689 164.700 C 187.463 164.425,186.981 162.602,186.617 160.650 C 183.194 142.288,166.648 129.850,148.000 131.622 M159.886 135.622 C 183.880 141.759,192.035 172.033,174.435 189.636 C 156.404 207.671,125.892 198.962,119.944 174.084 C 114.368 150.761,136.343 129.601,159.886 135.622 M274.658 135.615 C 299.082 141.861,307.061 172.817,288.734 190.222 C 267.975 209.936,234.188 195.420,234.219 166.800 C 234.241 145.502,253.935 130.315,274.658 135.615 M148.542 152.793 C 139.499 154.706,134.598 164.925,138.715 173.287 C 145.082 186.221,164.875 182.425,165.902 168.074 C 166.591 158.446,157.916 150.811,148.542 152.793 M262.091 153.188 C 253.922 156.127,249.883 165.408,253.408 173.139 C 257.835 182.850,271.593 184.491,278.201 176.097 C 287.389 164.426,275.974 148.192,262.091 153.188 M204.900 197.805 C 201.561 201.450,199.643 201.993,193.600 201.001 C 191.555 200.665,190.824 201.267,191.600 202.647 C 193.561 206.136,200.180 206.022,205.600 202.405 C 207.846 200.906,208.312 200.907,210.779 202.425 C 216.333 205.843,221.899 206.089,224.310 203.023 C 225.846 201.071,225.236 200.759,220.447 201.050 C 215.394 201.357,214.247 200.942,211.015 197.632 C 208.352 194.906,207.534 194.929,204.900 197.805 "
-      stroke="none" fill="#ffffff" fill-rule="evenodd"></path>
+
+  <g id="Verge_logo" fill-rule="nonzero">
+    <path
+      d="M349.980734,470.820835 C362.906597,470.820835 375.380055,471.040616 387.808272,470.736801 C394.678368,470.562269 398.898662,465.526692 400.333433,457.394784 C402.20122,446.832354 400.417451,436.780592 395.809381,427.284747 C390.832924,417.03906 385.255414,407.090725 380.233716,396.903216 C360.528238,356.825451 356.463054,315.532425 371.896535,273.134028 C376.646789,260.076434 384.111475,248.479739 394.781775,239.255389 C400.869857,233.993566 405.684741,233.870747 409.911498,238.718864 C414.138255,243.56698 413.285148,248.415097 407.500824,253.663991 C390.535629,269.081003 384.285974,289.34613 382.230762,311.27901 C379.516331,340.367711 385.669042,367.633519 399.499715,393.373787 C407.100123,407.523823 416.070671,421.169656 418.88851,437.433471 C420.614112,447.317165 420.484854,457.129754 417.402035,466.787202 C412.613003,481.764651 401.244707,490.012913 385.513931,490 C273.567341,489.896558 161.622905,489.814679 49.6806226,489.754347 C42.5713979,489.754347 35.4621733,489.993521 28.605003,487.73753 C11.4136053,482.081394 -0.0322464095,467.259085 0,448.855634 C0.103475152,390.930336 0.374918274,333.011502 3.10227536,275.124988 C4.89250738,237.057576 7.30964376,199.054805 11.2067914,161.148996 C16.3771366,110.612228 23.6608604,60.405131 34.5315112,10.7604159 C35.0024707,8.67513302 35.7547542,6.66358964 36.7676855,4.78107191 C38.5191399,1.50374502 41.1689418,-0.513071536 45.1694964,0.113951558 C49.170051,0.740974653 49.3768648,4.11526388 49.9326769,6.9530282 C53.9913979,27.6706469 60.3056819,47.7612426 66.8590945,67.7742684 C68.9853989,74.238424 70.1875042,82.4543658 74.7891114,86.326395 C79.26146,90.0949977 87.6051045,87.3541957 94.2425352,87.3735882 C154.302557,87.5028713 214.369043,86.8176708 274.422602,88.3755323 C279.256875,88.4983513 281.615845,87.0827012 283.509484,82.6353621 C293.203881,59.8750702 301.967616,36.8044988 308.495177,12.925908 C309.309506,9.94593225 309.942874,6.778496 313.710763,6.46175237 C317.129653,6.17732953 319.346439,8.49796139 320.858765,11.1547293 C321.981523,13.2263513 322.777248,15.4591645 323.217735,17.7740247 C332.832735,64.3247661 340.022746,111.343788 344.758685,158.640904 C354.220417,251.724745 355.745669,345.112401 356.152834,438.538842 C356.152834,444.123872 356.217463,449.695975 355.370819,455.274541 C354.569415,460.646254 352.048872,465.38448 349.980734,470.820835 Z"
+      id="element" fill-rule="evenodd"></path>
+    <path
+      d="M314.373914,51.8580359 C319.16418,79.1645649 322.474053,106.509891 325.189183,133.926344 C335.474355,237.585109 337,341.580114 337,445.633314 C337,462.193111 328.052999,470.974135 311.283837,470.980602 C222.356854,471.006466 133.429871,471.006466 44.5028879,470.980602 C27.8242301,470.980602 18.9741981,462.050856 19,445.491059 C19.0776317,397.460537 19.1422776,349.423548 20.816608,301.425356 C22.7559868,246.3726 25.665055,191.384506 31.4637977,136.538667 C34.2500385,110.221458 37.8831415,84.0335719 41.044329,57.7745583 C41.348165,55.2398296 42.0398768,52.7503639 42.8026991,49 C47.5541772,66.3034032 53.702008,81.848015 58.6926762,97.7676631 C60.6902363,104.123883 64.0001095,106.632747 70.7620769,106.632747 C141.816607,106.58964 212.868982,106.72974 283.919202,107.053047 C290.11875,107.053047 293.415694,104.679972 295.555475,99.1643504 C301.63866,83.3804912 308.652746,67.9328716 314.373914,51.8580359 Z"
+      id="bg" fill="#ffffff" fill-rule="evenodd"></path>
+    <path
+      d="M119.999315,204.118735 C120.083729,213.985193 112.350174,222.057169 102.850433,222 C94.0584657,221.961379 86.9547636,214.451375 87,205.249067 C87.0456702,196.148935 94.5909186,188.268541 103.493273,188.006712 C112.395627,187.744884 119.921396,195.178255 119.999315,204.118735 Z"
+      id="element" fill-rule="evenodd"></path>
+    <path
+      d="M236,204.861743 C236,195.671258 243.035135,188.142475 251.816026,188.001869 C261.124552,187.861264 268.993481,195.671258 269,205.104607 C269.006509,214.537955 262.179823,221.772746 253.255623,221.996436 C244.16206,222.194562 236.026056,214.103357 236,204.861743 Z"
+      id="element" fill-rule="evenodd"></path>
+    <path
+      d="M190.493614,267.920884 C185.555364,268.142338 181.468093,262.430145 177.097162,262.137045 C172.945422,261.850458 168.716321,267.914371 162.875519,267.999044 C153.295574,268.096744 144.921179,260.691085 144.089542,251.064378 C143.851011,248.296212 143.844564,245.541072 147.312943,245.059085 C150.362279,244.622692 151.0263,246.902358 151.638746,249.481638 C153.327808,256.646305 157.286143,260.411011 162.701456,259.935538 C168.890385,259.394931 172.371657,255.649765 173.087252,249.468612 C173.383805,247.045652 174.234782,245.104678 176.819949,245.026518 C179.869286,244.935332 180.481732,247.208485 180.855647,249.813818 C181.751752,255.988458 185.426428,259.870405 191.570229,259.889945 C197.71403,259.909485 201.433834,255.981945 202.342833,249.872438 C202.774769,246.954465 203.516151,244.433805 206.907168,245.111192 C210.130569,245.762525 210.195037,248.634905 209.872697,251.383532 C208.750953,260.769245 200.621538,268.044638 190.493614,267.920884 Z"
+      id="element" fill-rule="evenodd"></path>
   </g>
 </svg>

src/assets/styles/anime.scss

@@ -0,0 +1,21 @@
+.page-enter {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 300ms, transform 300ms;
+}
+
+.page-exit {
+  opacity: 1;
+  transform: scale(0);
+}
+
+.page-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 300ms, transform 300ms;
+}

src/assets/styles/index.scss

@@ -16,6 +16,9 @@ body {
   --text-primary: #637381;
   --selection-color: #f5f5f5;
   --scroller-color: #90939980;
+  --background-color: #ffffff;
+  --background-color-alpha: rgba(24, 103, 192, 0.1);
+  --border-radius: 12px;
 }
 
 ::selection {
@@ -33,8 +36,13 @@ body {
   background-color: var(--scroller-color);
 }
 
+body {
+  overflow: hidden;
+}
+
 @import "./layout.scss";
 @import "./page.scss";
+@import "./anime.scss";
 
 @media (prefers-color-scheme: dark) {
   :root {

src/assets/styles/layout.scss

@@ -10,7 +10,8 @@
     height: 100%;
     max-width: 225px;
     min-width: 125px;
-    padding: 16px 0 8px;
+    padding: 36px 0 28px;
+    position: relative;
     flex-direction: column;
     box-sizing: border-box;
     user-select: none;
@@ -18,6 +19,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
+    background-color: var(--background-color-alpha);
 
     $maxLogo: 100px;
 
@@ -37,6 +39,11 @@
         width: 100%;
         height: 100%;
         pointer-events: none;
+        fill: var(--primary-main);
+
+        #bg {
+          fill: var(--background-color);
+        }
       }
 
       .the-newbtn {
@@ -66,6 +73,7 @@
     position: relative;
     flex: 1 1 75%;
     height: 100%;
+    background-color: var(--background-color-alpha);
 
     .the-bar {
       position: absolute;
@@ -82,8 +90,8 @@
       position: absolute;
       top: 0;
       left: 0;
-      right: 2px;
-      bottom: 10px;
+      right: 28px;
+      bottom: 28px;
     }
   }
 }

src/assets/styles/page.scss

@@ -6,7 +6,7 @@
 
   > header {
     flex: 0 0 58px;
-    width: 90%;
+    width: 100%;
     // max-width: 850px;
     margin: 0 auto;
     padding-right: 4px;
@@ -16,20 +16,40 @@
     justify-content: space-between;
   }
 
+  .base-container {
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+
     > section {
       position: relative;
       flex: 1 1 100%;
       width: 100%;
       height: 100%;
       overflow: auto;
-    padding: 8px 0;
+      padding: 28px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
+      background-color: var(--background-color);
 
       .base-content {
         width: 90%;
         // max-width: 850px;
         margin: 0 auto;
+        animation: baseContentIn 0.3s normal 1 forwards;
+
+        @keyframes baseContentIn {
+          0% {
+            opacity: 0;
+            transform: translateY(50%) scale(0.9);
+          }
+
+          100% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+      }
     }
   }
 }

src/components/base/base-dialog.tsx

@@ -8,6 +8,7 @@ import {
   type SxProps,
   type Theme,
 } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
 
 interface Props {
   title: ReactNode;
@@ -19,6 +20,7 @@ interface Props {
   disableFooter?: boolean;
   contentSx?: SxProps<Theme>;
   children?: ReactNode;
+  loading?: boolean;
   onOk?: () => void;
   onCancel?: () => void;
   onClose?: () => void;
@@ -40,6 +42,7 @@ export const BaseDialog: React.FC<Props> = (props) => {
     disableCancel,
     disableOk,
     disableFooter,
+    loading,
   } = props;
 
   return (
@@ -56,9 +59,13 @@ export const BaseDialog: React.FC<Props> = (props) => {
             </Button>
           )}
           {!disableOk && (
-            <Button variant="contained" onClick={props.onOk}>
+            <LoadingButton
+              loading={loading}
+              variant="contained"
+              onClick={props.onOk}
+            >
               {okBtn}
-            </Button>
+            </LoadingButton>
           )}
         </DialogActions>
       )}

src/components/base/base-page.tsx

@@ -23,12 +23,14 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
+        <div className="base-container">
           <section>
             <div className="base-content" style={contentStyle} data-windrag>
               {children}
             </div>
           </section>
         </div>
+      </div>
     </BaseErrorBoundary>
   );
 };

src/components/layout/layout-item.tsx

@@ -15,7 +15,7 @@ export const LayoutItem = (props: LinkProps) => {
         selected={!!match}
         sx={[
           {
-            borderRadius: 2,
+            borderRadius: 8,
             textAlign: "center",
             "& .MuiListItemText-primary": { color: "text.secondary" },
           },

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
-import { createTheme, Theme } from "@mui/material";
+import { alpha, createTheme, Theme } from "@mui/material";
 import { appWindow } from "@tauri-apps/api/window";
 import { atomThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
@@ -84,13 +84,19 @@ export const useCustomTheme = () => {
     }
 
     // css
+    const backgroundColor = mode === "light" ? "#ffffff" : "#121212";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
 
     const rootEle = document.documentElement;
+    rootEle.style.setProperty("--background-color", backgroundColor);
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);
     rootEle.style.setProperty("--primary-main", theme.palette.primary.main);
+    rootEle.style.setProperty(
+      "--background-color-alpha",
+      alpha(theme.palette.primary.main, 0.1)
+    );
 
     // inject css
     let style = document.querySelector("style#verge-theme");

src/components/profile/profile-viewer.tsx

@@ -40,6 +40,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
     const { t } = useTranslation();
     const [open, setOpen] = useState(false);
     const [openType, setOpenType] = useState<"new" | "edit">("new");
+    const [loading, setLoading] = useState(false);
 
     // file input
     const fileDataRef = useRef<string | null>(null);
@@ -87,6 +88,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
 
     const handleOk = useLockFn(
       formIns.handleSubmit(async (form) => {
+        setLoading(true);
         try {
           if (!form.type) throw new Error("`Type` should not be null");
           if (form.type === "remote" && !form.url) {
@@ -111,11 +113,13 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
             await patchProfile(form.uid, item);
           }
           setOpen(false);
+          setLoading(false);
           setTimeout(() => formIns.reset(), 500);
           fileDataRef.current = null;
           props.onChange();
         } catch (err: any) {
           Notice.error(err.message || err.toString());
+          setLoading(false);
         }
       })
     );
@@ -149,6 +153,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
         onClose={handleClose}
         onCancel={handleClose}
         onOk={handleOk}
+        loading={loading}
       >
         <Controller
           name="type"

src/locales/en.json

@@ -7,6 +7,9 @@
   "Label-Settings": "Settings",
 
   "Connections": "Connections",
+  "Upload Total": "Upload Total",
+  "Download Total": "Download Total",
+  "Active Connections": "Active Connections",
   "Logs": "Logs",
   "Clear": "Clear",
   "Proxies": "Proxies",

src/locales/zh.json

@@ -7,6 +7,9 @@
   "Label-Settings": "设 置",
 
   "Connections": "连接",
+  "Upload Total": "上传总量",
+  "Download Total": "下载总量",
+  "Active Connections": "活动连接",
   "Logs": "日志",
   "Clear": "清除",
   "Proxies": "代理",
@@ -91,7 +94,7 @@
   "Open Core Dir": "内核目录",
   "Open Logs Dir": "日志目录",
   "Check for Updates": "检查更新",
-  "Verge Version": "应用版本",
+  "Verge Version": "Verge 版本",
   "theme.light": "浅色",
   "theme.dark": "深色",
   "theme.system": "系统",

src/pages/_layout.tsx

@@ -4,14 +4,15 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { SWRConfig, mutate } from "swr";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { alpha, List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
 import { appWindow } from "@tauri-apps/api/window";
 import { routers } from "./_routers";
 import { getAxios } from "@/services/api";
 import { useVerge } from "@/hooks/use-verge";
-import { ReactComponent as LogoSvg } from "@/assets/image/logo.svg";
+import LogoSvg from "@/assets/image/logo.svg?react";
 import { BaseErrorBoundary, Notice } from "@/components/base";
 import { LayoutItem } from "@/components/layout/layout-item";
 import { LayoutControl } from "@/components/layout/layout-control";
@@ -34,6 +35,8 @@ const Layout = () => {
   const { verge } = useVerge();
   const { theme_blur, language } = verge || {};
 
+  const location = useLocation();
+
   useEffect(() => {
     window.addEventListener("keydown", (e) => {
       // macOS有cmd+w
@@ -136,7 +139,12 @@ const Layout = () => {
               </div>
             )}
 
-            <div className="the-content">
+            <TransitionGroup className="the-content">
+              <CSSTransition
+                key={location.pathname}
+                timeout={300}
+                classNames="page"
+              >
                 <Routes>
                   {routers.map(({ label, link, ele: Ele }) => (
                     <Route
@@ -150,7 +158,8 @@ const Layout = () => {
                     />
                   ))}
                 </Routes>
-            </div>
+              </CSSTransition>
+            </TransitionGroup>
           </div>
         </Paper>
       </ThemeProvider>

src/pages/_theme.tsx

@@ -1,9 +1,9 @@
 // default theme setting
 export const defaultTheme = {
-  primary_color: "#5b5c9d",
-  secondary_color: "#9c27b0",
-  primary_text: "#637381",
-  secondary_text: "#909399",
+  primary_color: "#1867c0",
+  secondary_color: "#3a88bb",
+  primary_text: "#1d1d1f",
+  secondary_text: "#424245",
   info_color: "#0288d1",
   error_color: "#d32f2f",
   warning_color: "#ed6c02",
@@ -14,6 +14,6 @@ export const defaultTheme = {
 // dark mode
 export const defaultDarkTheme = {
   ...defaultTheme,
-  primary_text: "#757575",
-  secondary_text: "#637381",
+  primary_text: "#E8E8ED",
+  secondary_text: "#bbbbbb",
 };

src/pages/connections.tsx

@@ -3,16 +3,24 @@ import { useLockFn } from "ahooks";
 import {
   Box,
   Button,
+  Grid,
   IconButton,
   MenuItem,
   Paper,
   Select,
   TextField,
+  Typography,
 } from "@mui/material";
 import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
-import { TableChartRounded, TableRowsRounded } from "@mui/icons-material";
+import {
+  ArrowDownward,
+  ArrowUpward,
+  Link,
+  TableChartRounded,
+  TableRowsRounded,
+} from "@mui/icons-material";
 import { closeAllConnections } from "@/services/api";
 import { atomConnectionSetting } from "@/services/states";
 import { useClashInfo } from "@/hooks/use-clash";
@@ -24,6 +32,7 @@ import {
   ConnectionDetail,
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
+import parseTraffic from "@/utils/parse-traffic";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -48,6 +57,10 @@ const ConnectionsPage = () => {
       list.sort((a, b) => b.curDownload! - a.curDownload!),
   };
 
+  const uploadTotal = connData.uploadTotal;
+
+  const downloadTotal = connData.downloadTotal;
+
   const filterConn = useMemo(() => {
     const orderFunc = orderOpts[curOrderOpt];
     const connections = connData.connections.filter((conn) =>
@@ -112,6 +125,24 @@ const ConnectionsPage = () => {
 
   const detailRef = useRef<ConnectionDetailRef>(null!);
 
+  const connectionItems = [
+    {
+      icon: <ArrowUpward />,
+      label: t("Upload Total"),
+      value: parseTraffic(uploadTotal).join(" "),
+    },
+    {
+      icon: <ArrowDownward />,
+      label: t("Download Total"),
+      value: parseTraffic(downloadTotal).join(" "),
+    },
+    {
+      icon: <Link />,
+      label: t("Active Connections"),
+      value: filterConn.length,
+    },
+  ];
+
   return (
     <BasePage
       title={t("Connections")}
@@ -142,7 +173,21 @@ const ConnectionsPage = () => {
         </Box>
       }
     >
-      <Paper sx={{ boxShadow: 2, height: "100%" }}>
+      <Paper sx={{ padding: 2, mb: 2 }}>
+        <Grid container>
+          {connectionItems.map((item, index) => (
+            <Grid item xs={4} key={index}>
+              <Box display="flex" alignItems="center" whiteSpace="nowrap">
+                {item.icon}
+                <Typography sx={{ ml: 1, mr: 1 }}>{item.label}</Typography>
+                <Typography>{item.value}</Typography>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </Paper>
+
+      <Paper sx={{ boxShadow: 2, height: "calc(100% - 56px - 16px)" }}>
         <Box
           sx={{
             pt: 1,

src/pages/profiles.tsx

@@ -3,6 +3,7 @@ import { useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useSetRecoilState } from "recoil";
 import { Box, Button, Grid, IconButton, Stack, TextField } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
 import {
   ClearRounded,
   ContentCopyRounded,
@@ -38,6 +39,7 @@ const ProfilePage = () => {
   const [url, setUrl] = useState("");
   const [disabled, setDisabled] = useState(false);
   const [activating, setActivating] = useState("");
+  const [loading, setLoading] = useState(false);
 
   const {
     profiles = {},
@@ -76,12 +78,13 @@ const ProfilePage = () => {
 
   const onImport = async () => {
     if (!url) return;
-    setUrl("");
-    setDisabled(true);
+    setLoading(true);
 
     try {
       await importProfile(url);
       Notice.success("Successfully import profile.");
+      setUrl("");
+      setLoading(false);
 
       getProfiles().then((newProfiles) => {
         mutate("getProfiles", newProfiles);
@@ -96,8 +99,10 @@ const ProfilePage = () => {
       });
     } catch (err: any) {
       Notice.error(err.message || err.toString());
+      setLoading(false);
     } finally {
       setDisabled(false);
+      setLoading(false);
     }
   };
 
@@ -271,14 +276,15 @@ const ProfilePage = () => {
             ),
           }}
         />
-        <Button
+        <LoadingButton
           disabled={!url || disabled}
+          loading={loading}
           variant="contained"
           size="small"
           onClick={onImport}
         >
           {t("Import")}
-        </Button>
+        </LoadingButton>
         <Button
           variant="contained"
           size="small"

src/pages/settings.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Paper } from "@mui/material";
+import { Grid, IconButton, Paper } from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { BasePage, Notice } from "@/components/base";
@@ -33,17 +33,25 @@ const SettingPage = () => {
         </IconButton>
       }
     >
-      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+      <Grid container spacing={{ xs: 2, lg: 3 }}>
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
             <SettingClash onError={onError} />
           </Paper>
+        </Grid>
 
-      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
             <SettingSystem onError={onError} />
           </Paper>
+        </Grid>
 
+        <Grid item xs={12} md={6}>
           <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
             <SettingVerge onError={onError} />
           </Paper>
+        </Grid>
+      </Grid>
     </BasePage>
   );
 };

tsconfig.json

@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,