docs: UPDATELOG

#46

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: bug
+assignees: ""
+---
+
+**Describe the bug**
+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 '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+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]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature]"
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/ci.yml

@@ -1,122 +0,0 @@
-name: Release CI
-
-on:
-  push:
-    tags:
-      - v**
-
-env:
-  CARGO_INCREMENTAL: 0
-  RUST_BACKTRACE: short
-
-jobs:
-  release:
-    strategy:
-      matrix:
-        os: [windows-latest, ubuntu-latest, macos-latest]
-    runs-on: ${{ matrix.os }}
-    if: |
-      startsWith(github.repository, 'zzzgydi') &&
-      startsWith(github.ref, 'refs/tags/v')
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Install Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: stable
-          profile: minimal
-          override: true
-
-      - name: Rust Cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          workspaces: src-tauri
-
-      - name: Install Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16
-
-      - 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
-
-      - 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 and check
-        run: |
-          yarn install --network-timeout 1000000
-          yarn run check
-
-      - name: Tauri build
-        uses: tauri-apps/tauri-action@v0
-        # enable cache even though failed
-        # continue-on-error: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-        with:
-          tagName: v__VERSION__
-          releaseName: "Clash Verge v__VERSION__"
-          releaseBody: "More new features are now supported."
-          releaseDraft: false
-          prerelease: true
-
-      - name: Portable Bundle
-        if: matrix.os == 'windows-latest'
-        # rebuild with env settings
-        run: |
-          yarn build
-          yarn run portable
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-          VITE_WIN_PORTABLE: 1
-
-  release-update:
-    needs: release
-    runs-on: macos-latest
-    if: |
-      startsWith(github.repository, 'zzzgydi') &&
-      startsWith(github.ref, 'refs/tags/v')
-    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 }}

.github/workflows/compatible.yml

@@ -2,9 +2,9 @@ name: Compatible CI
 
 on:
   workflow_dispatch:
-  push:
-    tags:
-      - v**
+  # push:
+  #   tags:
+  #     - v**
 
 env:
   CARGO_INCREMENTAL: 0
@@ -24,7 +24,6 @@ jobs:
             os: ubuntu-22.04
 
     runs-on: ${{ matrix.targets.os }}
-    if: startsWith(github.repository, 'zzzgydi')
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2

.github/workflows/dev.yaml

@@ -0,0 +1,97 @@
+name: Dev Build
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - dev
+
+env:
+  CARGO_INCREMENTAL: 0
+  RUST_BACKTRACE: short
+
+jobs:
+  release:
+    strategy:
+      matrix:
+        os: [windows-latest, ubuntu-latest, macos-latest]
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: src-tauri
+
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          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: dev
+          fail-if-no-assets: false
+          fail-if-no-release: false
+          assets: |
+            *.zip
+            *.gz
+            *.AppImage
+            *.deb
+            *.dmg
+            *.msi
+            *.sig
+            *.exe
+            *.json
+
+      - 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: Pnpm install and check
+        run: |
+          pnpm i
+          pnpm check
+
+      - name: Tauri build
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+        with:
+          tagName: dev
+          releaseName: "Clash Verge Dev"
+          releaseBody: "More new features are now supported."
+          releaseDraft: false
+          prerelease: true
+          tauriScript: pnpm
+          args: -f default-meta
+
+      - name: Portable Bundle
+        if: matrix.os == 'windows-latest'
+        run: |
+          pnpm portable
+        env:
+          TAG_NAME: dev
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          VITE_WIN_PORTABLE: 1

.github/workflows/meta.yml

@@ -1,11 +1,10 @@
-name: Alpha CI
+name: Meta CI
 
 on:
   workflow_dispatch:
-    inputs:
-      debug:
-        type: boolean
-        default: false
+  push:
+    tags:
+      - v**
 
 env:
   CARGO_INCREMENTAL: 0
@@ -18,7 +17,6 @@ jobs:
       matrix:
         os: [windows-latest, ubuntu-latest, macos-latest]
     runs-on: ${{ matrix.os }}
-    if: startsWith(github.repository, 'zzzgydi')
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
@@ -40,11 +38,28 @@ jobs:
         with:
           node-version: 16
 
-      - name: Install Dependencies (ubuntu only)
+      - name: Delete current release assets
         if: matrix.os == 'ubuntu-latest'
+        uses: mknejp/delete-release-assets@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          tag: meta
+          fail-if-no-assets: false
+          fail-if-no-release: false
+          assets: |
+            *.zip
+            *.gz
+            *.AppImage
+            *.deb
+            *.dmg
+            *.msi
+            *.sig
+
+      - 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
+          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf openssl
 
       - name: Get yarn cache dir path
         id: yarn-cache-dir-path
@@ -71,17 +86,21 @@ jobs:
           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: meta
+          releaseName: "Clash Verge Meta"
+          releaseBody: ""
           releaseDraft: false
-          includeDebug: ${{ github.event.inputs.debug }}
           prerelease: true
+          args: -f default-meta
 
       - name: Portable Bundle
         if: matrix.os == 'windows-latest'
         run: |
+          yarn build -f default-meta
           yarn run portable
         env:
-          TAG_NAME: alpha
+          TAG_NAME: meta
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          VITE_WIN_PORTABLE: 1

.github/workflows/release.yml

@@ -0,0 +1,192 @@
+name: Release Build
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v**
+permissions: write-all
+env:
+  CARGO_INCREMENTAL: 0
+  RUST_BACKTRACE: short
+
+jobs:
+  release:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: windows-latest
+            target: x86_64-pc-windows-msvc
+          - os: windows-latest
+            target: i686-pc-windows-msvc
+          # - os: windows-latest
+          #   target: aarch64-pc-windows-msvc
+          - os: macos-latest
+            target: aarch64-apple-darwin
+          - os: macos-latest
+            target: x86_64-apple-darwin
+          - os: ubuntu-latest
+            target: x86_64-unknown-linux-gnu
+          - os: ubuntu-latest
+            target: aarch64-unknown-linux-gnu
+          # - os: ubuntu-latest
+          #   target: armv7-unknown-linux-gnueabihf
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Install Rust Stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Add Rust Target
+        run: |
+          rustup target add ${{ matrix.target }}
+
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: src-tauri
+
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install Dependencies (Ubuntu Only)
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.target,'x86_64')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libayatana-appindicator3-dev librsvg2-dev patchelf openssl
+
+      - name: Install Dependencies (Ubuntu Only)
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.target,'aarch64')
+        run: |
+          sed 's/mirror+file:\/etc\/apt\/apt-mirrors.txt/[arch-=amd64] http:\/\/ports.ubuntu.com\/ubuntu-ports\//g' /etc/apt/sources.list | sudo tee /etc/apt/sources.list.d/ports.list
+          sudo sed -i 's/mirror+file/[arch=amd64] mirror+file/g' /etc/apt/sources.list
+          cat /etc/apt/sources.list
+          cat /etc/apt/sources.list.d/ports.list
+          sudo dpkg --add-architecture arm64
+          sudo apt-get update
+          sudo apt-get install -y libncurses6:arm64 libtinfo6:arm64 linux-libc-dev:arm64 libncursesw6:arm64 libssl3:arm64 libcups2:arm64
+          sudo apt-get install -y --no-install-recommends g++-aarch64-linux-gnu libc6-dev-arm64-cross libssl-dev:arm64 libwebkit2gtk-4.0-dev:arm64 libgtk-3-dev:arm64 patchelf:arm64 librsvg2-dev:arm64 libayatana-appindicator3-dev:arm64
+
+      - name: Install Dependencies (Ubuntu Only)
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.target,'armv7')
+        run: |
+          sed 's/mirror+file:\/etc\/apt\/apt-mirrors.txt/[arch-=amd64] http:\/\/ports.ubuntu.com\/ubuntu-ports\//g' /etc/apt/sources.list | sudo tee /etc/apt/sources.list.d/ports.list
+          sudo sed -i 's/mirror+file/[arch=amd64] mirror+file/g' /etc/apt/sources.list
+          cat /etc/apt/sources.list
+          cat /etc/apt/sources.list.d/ports.list
+          sudo dpkg --add-architecture armhf
+          sudo apt-get update
+          sudo apt-get install -y libncurses6:armhf libtinfo6:armhf linux-libc-dev:armhf libncursesw6:armhf libssl3:armhf libcups2:armhf
+          sudo apt-get install -y --no-install-recommends g++-arm-linux-gnueabihf libc6-dev-armhf-cross libssl-dev:armhf libwebkit2gtk-4.0-dev:armhf libgtk-3-dev:armhf patchelf:armhf librsvg2-dev:armhf libayatana-appindicator3-dev:armhf
+
+      - name: Pnpm install and check
+        run: |
+          pnpm i
+          pnpm check ${{ matrix.target }}
+
+      - name: Tauri build
+        if: startsWith(matrix.os, 'windows') || startsWith(matrix.os,'macos') || startsWith(matrix.target,'x86_64')
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+        with:
+          tagName: v__VERSION__
+          releaseName: "Clash Verge v__VERSION__"
+          releaseBody: "More new features are now supported."
+          releaseDraft: false
+          prerelease: false
+          tauriScript: pnpm
+          args: -f default-meta --target ${{ matrix.target }}
+
+      - name: Tauri build (Ubuntu Arm64)
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.target,'aarch64')
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          CARGO_TARGET_AARCH64_UNKNOWN_LINUX_GNU_LINKER: aarch64-linux-gnu-gcc
+          CC_aarch64_unknown_linux_gnu: aarch64-linux-gnu-gcc
+          CXX_aarch64_unknown_linux_gnu: aarch64-linux-gnu-g++
+          PKG_CONFIG_PATH: /usr/lib/aarch64-linux-gnu/pkgconfig
+          PKG_CONFIG_ALLOW_CROSS: 1
+        with:
+          tagName: v__VERSION__
+          releaseName: "Clash Verge v__VERSION__"
+          releaseBody: "More new features are now supported."
+          releaseDraft: false
+          prerelease: false
+          tauriScript: pnpm
+          args: -f default-meta --target ${{ matrix.target }} -b deb,updater
+
+      - name: Tauri build (Ubuntu Armv7)
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.target,'armv7')
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          CARGO_TARGET_ARMV7_UNKNOWN_LINUX_GNUEABIHF_LINKER: arm-linux-gnueabihf-gcc
+          CC_armv7_unknown_linux_gnueabihf: arm-linux-gnueabihf-gcc
+          CXX_armv7_unknown_linux_gnueabihf: arm-linux-gnueabihf-g++
+          PKG_CONFIG_PATH: /usr/lib/arm-linux-gnueabihf/pkgconfig
+          PKG_CONFIG_ALLOW_CROSS: 1
+        with:
+          tagName: v__VERSION__
+          releaseName: "Clash Verge v__VERSION__"
+          releaseBody: "More new features are now supported."
+          releaseDraft: false
+          prerelease: false
+          tauriScript: pnpm
+          args: -f default-meta --target ${{ matrix.target }} -b deb,updater
+
+      - name: Portable Bundle
+        if: matrix.os == 'windows-latest'
+        run: |
+          pnpm portable ${{ matrix.target }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          VITE_WIN_PORTABLE: 1
+
+  release-update:
+    needs: [release]
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v')
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install Node
+        uses: actions/setup-node@v4
+        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.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -28,21 +28,16 @@ env:
 jobs:
   release:
     runs-on: ${{ github.event.inputs.os }}
-    if: startsWith(github.repository, 'zzzgydi')
     steps:
       - name: System Version
         run: |
           echo ${{ github.event.inputs.os }}
 
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Install Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: stable
-          profile: minimal
-          override: true
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
 
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2
@@ -50,32 +45,20 @@ jobs:
           workspaces: src-tauri
 
       - name: Install Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: "16"
+          cache: "yarn"
 
       - name: Install Dependencies (ubuntu only)
         if: startsWith(github.event.inputs.os, 'ubuntu-')
         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)"
-
-      - 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-
+          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
 
       - name: Yarn install and check
         run: |
-          yarn install --network-timeout 1000000
+          yarn install --network-timeout 1000000 --frozen-lockfile
           yarn run check
 
       - name: Tauri build
@@ -84,3 +67,9 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_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)"
+          releaseDraft: false
+          includeUpdaterJson: false

.github/workflows/updater.yml

@@ -1,32 +1,29 @@
 name: Updater CI
 
 on: workflow_dispatch
-
+permissions: write-all
 jobs:
   release-update:
-    runs-on: macos-latest
-    if: startsWith(github.repository, 'zzzgydi')
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - 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
+      - name: Install Node
+        uses: actions/setup-node@v3
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: "20"
 
-      - name: Yarn install
-        run: yarn install
+      - 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 }}

.husky/pre-commit

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

README.md

@@ -1,82 +1,102 @@
 <h1 align="center">
   <img src="./src/assets/image/logo.png" alt="Clash" width="128" />
   <br>
-  Clash Verge
+  Continuation of <a href="https://github.com/zzzgydi/clash-verge">Clash Verge</a>
   <br>
 </h1>
 
 <h3 align="center">
-A <a href="https://github.com/Dreamacro/clash">Clash</a> GUI based on <a href="https://github.com/tauri-apps/tauri">tauri</a>.
+A Clash Meta GUI based on <a href="https://github.com/tauri-apps/tauri">Tauri</a>.
 </h3>
 
 ## Features
 
-- Full `clash` config supported, Partial `clash premium` config supported.
-- Profiles management and enhancement (by yaml and Javascript). [Doc](https://github.com/zzzgydi/clash-verge/wiki/%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97)
+- Since the clash core has been removed. The project no longer maintains the clash core, but only the Clash Meta core.
+- Profiles management and enhancement (by yaml and Javascript). [Doc](https://github.com/clash-verge-rev/clash-verge-rev/wiki/%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97)
 - Simple UI and supports custom theme color.
-- Built-in support [Clash.Meta](https://github.com/MetaCubeX/Clash.Meta) core.
+- Built-in support [Clash.Meta(mihomo)](https://github.com/MetaCubeX/mihomo) core.
 - System proxy setting and guard.
 
+#### TG Group: [@clash_verge_rev](https://t.me/clash_verge_rev)
+
+## Promotion
+
+[狗狗加速 —— 技术流机场 Doggygo VPN](https://狗狗加速.com)
+
+- 高性能海外机场，免费试用，优惠套餐，解锁流媒体，全球首家支持 Hysteria 协议。
+- 使用 Clash Verge 专属邀请链接注册送 3 天，每天 1G 流量免费试用：https://verge.狗狗加速.com/#/register?code=oaxsAGo6
+- Clash Verge 专属 8 折优惠码: verge20 (仅有 500 份)
+- 优惠套餐每月仅需 15.8 元，160G 流量，年付 8 折
+- 海外团队，无跑路风险，高达 50% 返佣
+- 集群负载均衡设计，高速专线(兼容老客户端)，极低延迟，无视晚高峰，4K 秒开
+- 全球首家 Hysteria 协议机场，现已上线更快的 `Hysteria2` 协议(Clash Verge 客户端最佳搭配)
+- 解锁流媒体及 ChatGPT
+- 官网：https://狗狗加速.com
+
+## Preview
+
+![preview](./docs/preview.gif)
+
 ## Install
 
-Download from [release](https://github.com/zzzgydi/clash-verge/releases). Supports Windows x64, Linux x86_64 and macOS 11+
+Download from [release](https://github.com/clash-verge-rev/clash-verge-rev/releases). Supports Windows (x64/x86), Linux (x64/arm64) and macOS 10.15+ (intel/apple).
+
+- [Windows x64](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/Clash.Verge_1.4.2_x64-setup.exe)
+- [Windows x86](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/Clash.Verge_1.4.2_x86-setup.exe)
+
+- [macOS intel](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/Clash.Verge_1.4.2_x64.dmg)
+- [macOS apple](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/Clash.Verge_1.4.2_aarch64.dmg)
+
+- [Linux x64 AppImage](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/clash-verge_1.4.2_amd64.AppImage)
+- [Linux x64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/clash-verge_1.4.2_amd64.deb)
+- [Linux arm64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.2/clash-verge_1.4.2_arm64.deb)
 
 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.
 
+### FAQ
+
+#### 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`
+
 ## Development
 
-You should install Rust and Nodejs, see [here](https://tauri.studio/docs/getting-started/prerequisites) for more details. Then install Nodejs packages.
+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 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).
+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
-yarn run check
+# force update to latest version
+# pnpm run check --force
+
+pnpm run check
 ```
 
 Then run
 
 ```shell
-yarn dev
+pnpm dev
+
+# run it in another way if app instance exists
+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.
@@ -87,8 +107,10 @@ Issue and PR welcome!
 
 ## Acknowledgement
 
-Clash Verge was based on or inspired by these projects and so on:
+Clash Verge rev was based on or inspired by these projects and so on:
 
+- [keiko233/clash-nyanpasu](https://github.com/keiko233/clash-nyanpasu): A Clash Verge variant.
+- [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,3 +1,269 @@
+## v1.4.3
+
+### Break Changes
+
+- 更改配置文件路径到标准目录(可以保证卸载时没有残留)
+- 更改 appid 为 `io.github.clash-verge-rev.clash-verge-rev`
+- 建议卸载旧版本后再安装新版本，该版本安装后不会使用旧版配置文件，你可以手动将旧版配置文件迁移到新版配置文件目录下
+
+### Features
+
+- 移除页面切换动画
+- 更改 Tun 模式托盘图标颜色
+- Portable 版本默认使用当前目录作为配置文件目录
+- 禁用 Clash 字段过滤时隐藏 Clash 字段选项
+- 优化拖拽时光标样式
+
+### Bugs Fixes
+
+- 修复 windows 下更新时没有关闭内核导致的更新失败的问题
+- 修复打开文件报错的问题
+- 修复 url 导入时无法获取中文配置名称的问题
+- 修复 alpha 内核无法显示内存信息的问题
+
+---
+
+## v1.4.2
+
+### Features
+
+- update clash meta core to mihomo 1.17.0
+- support both clash meta stable release and prerelease-alpha release
+- fixed the problem of not being able to set the system proxy when there is a dial-up link on windows system [#833](https://github.com/zzzgydi/clash-verge/issues/833)
+- support new clash field
+- support random mixed port
+- add windows x86 and linux armv7 support
+- support disable tray click event
+- add download progress for updater
+- support drag to reorder the profile
+- embed emoji fonts
+- update depends
+- improve UI style
+
+---
+
+## v1.4.1
+
+### Features
+
+- update clash meta core to newest 虚空终端(2023.11.23)
+- delete clash core UI
+- improve UI
+- change Logo to original
+
+---
+
+## 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
+
+---
+
+## v1.3.8
+
+### Features
+
+- update clash meta core
+- add default valid keys
+- adjust the delay display interval and color
+
+### Bug Fixes
+
+- fix connections page undefined exception
+
+---
+
+## v1.3.7
+
+### Features
+
+- update clash and clash meta core
+- profiles page add paste button
+- subscriptions url textfield use multi lines
+- set min window size
+- add check for updates buttons
+- add open dashboard to the hotkey list
+
+### Bug Fixes
+
+- fix profiles page undefined exception
+
+---
+
+## v1.3.6
+
+### Features
+
+- add russian translation
+- support to show connection detail
+- support clash meta memory usage display
+- support proxy provider update ui
+- update geo data file from meta repo
+- adjust setting page
+
+### Bug Fixes
+
+- center the window when it is out of screen
+- use `sudo` when `pkexec` not found (Linux)
+- reconnect websocket when window focus
+
+### Notes
+
+- The current version of the Linux installation package is built by Ubuntu 20.04 (Github Action).
+
+---
+
+## v1.3.5
+
+### Features
+
+- update clash core
+
+### Bug Fixes
+
+- fix blurry system tray icon (Windows)
+- fix v1.3.4 wintun.dll not found (Windows)
+- fix v1.3.4 clash core not found (macOS, Linux)
+
+---
+
+## v1.3.4
+
+### Features
+
+- update clash and clash meta core
+- optimize traffic graph high CPU usage when window hidden
+- use polkit to elevate permission (Linux)
+- support app log level setting
+- support copy environment variable
+- overwrite resource file according to file modified
+- save window size and position
+
+### Bug Fixes
+
+- remove fallback group select status
+- enable context menu on editable element (Windows)
+
+---
+
+## v1.3.3
+
+### Features
+
+- update clash and clash meta core
+- show tray icon variants in different system proxy status (Windows)
+- close all connections when mode changed
+
+### Bug Fixes
+
+- encode controller secret into uri
+- error boundary for each page
+
+---
+
+## v1.3.2
+
+### Features
+
+- update clash and clash meta core
+
+### Bug Fixes
+
+- fix import url issue
+- fix profile undefined issue
+
+---
+
+## v1.3.1
+
+### Features
+
+- update clash and clash meta core
+
+### Bug Fixes
+
+- fix open url issue
+- fix appimage path panic
+- fix grant root permission in macOS
+- fix linux system proxy default bypass
+
+---
+
+## v1.3.0
+
+### Features
+
+- update clash and clash meta
+- support opening dir on tray
+- support updating all profiles with one click
+- support granting root permission to clash core(Linux, macOS)
+- support enable/disable clash fields filter, feel free to experience the latest features of Clash Meta
+
+### Bug Fixes
+
+- deb add openssl depend(Linux)
+- fix the AppImage auto launch path(Linux)
+- fix get the default network service(macOS)
+- remove the esc key listener in macOS, cmd+w instead(macOS)
+- fix infinite retry when websocket error
+
+---
+
+## v1.2.3
+
+### Features
+
+- update clash
+- adjust macOS window style
+- profile supports UTF8 with BOM
+
+### Bug Fixes
+
+- fix selected proxy
+- fix error log
+
+---
+
+## v1.2.2
+
+### Features
+
+- update clash meta
+- recover clash core after panic
+- use system window decorations(Linux)
+
+### Bug Fixes
+
+- flush system proxy settings(Windows)
+- fix parse log panic
+- fix ui bug
+
+---
+
+## v1.2.1
+
+### Features
+
+- update clash version
+- proxy groups support multi columns
+- optimize ui
+
+### Bug Fixes
+
+- fix ui websocket connection
+- adjust delay check concurrency
+- avoid setting login item repeatedly(macOS)
+
+---
+
 ## v1.2.0
 
 ### Features

package.json

@@ -1,11 +1,11 @@
 {
   "name": "clash-verge",
-  "version": "1.2.0",
+  "version": "1.4.3",
   "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,49 +18,60 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.10.9",
-    "@mui/material": "^5.10.13",
-    "@mui/x-data-grid": "^5.17.11",
-    "@tauri-apps/api": "^1.2.0",
-    "ahooks": "^3.7.2",
-    "axios": "^1.1.3",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@juggle/resize-observer": "^3.4.0",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/lab": "5.0.0-alpha.149",
+    "@mui/material": "^5.14.19",
+    "@mui/x-data-grid": "^6.18.2",
+    "@tauri-apps/api": "^1.5.1",
+    "ahooks": "^3.7.8",
+    "axios": "^1.6.2",
     "dayjs": "1.11.5",
-    "i18next": "^22.0.4",
+    "i18next": "^23.7.7",
+    "lodash-es": "^4.17.21",
     "monaco-editor": "^0.34.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
-    "react-i18next": "^12.0.0",
-    "react-router-dom": "^6.4.3",
-    "react-virtuoso": "^3.1.3",
-    "recoil": "^0.7.6",
+    "react-hook-form": "^7.48.2",
+    "react-i18next": "^13.5.0",
+    "react-router-dom": "^6.20.0",
+    "react-transition-group": "^4.4.5",
+    "react-virtuoso": "^4.6.2",
+    "recoil": "^0.7.7",
     "snarkdown": "^2.0.0",
-    "swr": "^1.3.0"
+    "swr": "^1.3.0",
+    "tar": "^6.2.0"
   },
   "devDependencies": {
-    "@actions/github": "^5.0.3",
-    "@tauri-apps/cli": "^1.2.0",
+    "@actions/github": "^5.1.1",
+    "@tauri-apps/cli": "^1.5.6",
     "@types/fs-extra": "^9.0.13",
-    "@types/js-cookie": "^3.0.2",
-    "@types/lodash": "^4.14.180",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@vitejs/plugin-react": "^2.0.1",
-    "adm-zip": "^0.5.9",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.14.202",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-transition-group": "^4.4.9",
+    "@vitejs/plugin-react": "^4.2.0",
+    "adm-zip": "^0.5.10",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.2.0",
     "https-proxy-agent": "^5.0.1",
-    "husky": "^7.0.0",
-    "node-fetch": "^3.2.6",
-    "prettier": "^2.7.1",
+    "husky": "^7.0.4",
+    "node-fetch": "^3.3.2",
+    "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
-    "sass": "^1.54.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.9",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.2",
+    "vite": "^4.5.0",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-svgr": "^2.2.1"
+    "vite-plugin-svgr": "^4.2.0"
   },
   "prettier": {
     "tabWidth": 2,

scripts/aarch.mjs

@@ -1,12 +1,19 @@
 /**
- * Build and upload assets for macOS(aarch)
+ * Build and upload assets
+ * for macOS(aarch)
  */
 import fs from "fs-extra";
 import path from "path";
 import { exit } from "process";
+import { execSync } from "child_process";
 import { createRequire } from "module";
 import { getOctokit, context } from "@actions/github";
 
+// to `meta` tag
+const META = process.argv.includes("--meta");
+// to `alpha` tag
+const ALPHA = process.argv.includes("--alpha");
+
 const require = createRequire(import.meta.url);
 
 async function resolve() {
@@ -25,6 +32,14 @@ async function resolve() {
 
   const { version } = require("../package.json");
 
+  const tag = META ? "meta" : ALPHA ? "alpha" : `v${version}`;
+  const buildCmd = META ? `pnpm build -f default-meta` : `pnpm build`;
+
+  console.log(`[INFO]: Upload to tag "${tag}"`);
+  console.log(`[INFO]: Building app. "${buildCmd}"`);
+
+  execSync(buildCmd);
+
   const cwd = process.cwd();
   const bundlePath = path.join(cwd, "src-tauri/target/release/bundle");
   const join = (p) => path.join(bundlePath, p);
@@ -48,7 +63,7 @@ async function resolve() {
 
   const { data: release } = await github.rest.repos.getReleaseByTag({
     ...options,
-    tag: `v${version}`,
+    tag,
   });
 
   if (!release.id) throw new Error("failed to find the release");

scripts/check.mjs

@@ -1,5 +1,6 @@
 import fs from "fs-extra";
 import zlib from "zlib";
+import tar from "tar";
 import path from "path";
 import AdmZip from "adm-zip";
 import fetch from "node-fetch";
@@ -10,59 +11,114 @@ const cwd = process.cwd();
 const TEMP_DIR = path.join(cwd, "node_modules/.verge");
 const FORCE = process.argv.includes("--force");
 
-const SIDECAR_HOST = execSync("rustc -vV")
-  .toString()
-  .match(/(?<=host: ).+(?=\s*)/g)[0];
-
-/* ======= clash ======= */
-const CLASH_URL_PREFIX =
-  "https://github.com/Dreamacro/clash/releases/download/premium/";
-const CLASH_LATEST_DATE = "2022.08.26";
-
-const CLASH_MAP = {
-  "win32-x64": "clash-windows-amd64",
-  "darwin-x64": "clash-darwin-amd64",
-  "darwin-arm64": "clash-darwin-arm64",
-  "linux-x64": "clash-linux-amd64",
-  "linux-arm64": "clash-linux-armv8",
+const PLATFORM_MAP = {
+  "x86_64-pc-windows-msvc": "win32",
+  "i686-pc-windows-msvc": "win32",
+  "aarch64-pc-windows-msvc": "win32",
+  "x86_64-apple-darwin": "darwin",
+  "aarch64-apple-darwin": "darwin",
+  "x86_64-unknown-linux-gnu": "linux",
+  "aarch64-unknown-linux-gnu": "linux",
+  "armv7-unknown-linux-gnueabihf": "linux",
+};
+const ARCH_MAP = {
+  "x86_64-pc-windows-msvc": "x64",
+  "i686-pc-windows-msvc": "ia32",
+  "aarch64-pc-windows-msvc": "arm64",
+  "x86_64-apple-darwin": "x64",
+  "aarch64-apple-darwin": "arm64",
+  "x86_64-unknown-linux-gnu": "x64",
+  "aarch64-unknown-linux-gnu": "arm64",
+  "armv7-unknown-linux-gnueabihf": "arm",
 };
 
-/* ======= clash meta ======= */
-const META_URL_PREFIX = `https://github.com/MetaCubeX/Clash.Meta/releases/download/`;
-const META_VERSION = "v1.13.2";
+const arg1 = process.argv.slice(2)[0];
+const arg2 = process.argv.slice(2)[1];
+const target = arg1 === "--force" ? arg2 : arg1;
+const { platform, arch } = target
+  ? { platform: PLATFORM_MAP[target], arch: ARCH_MAP[target] }
+  : process;
+
+const SIDECAR_HOST = target
+  ? target
+  : execSync("rustc -vV")
+      .toString()
+      .match(/(?<=host: ).+(?=\s*)/g)[0];
+
+/* ======= clash meta alpha======= */
+const VERSION_URL =
+  "https://github.com/MetaCubeX/mihomo/releases/download/Prerelease-Alpha/version.txt";
+const META_ALPHA_URL_PREFIX = `https://github.com/MetaCubeX/mihomo/releases/download/Prerelease-Alpha`;
+let META_ALPHA_VERSION;
+
+const META_ALPHA_MAP = {
+  "win32-x64": "mihomo-windows-amd64-compatible",
+  "win32-ia32": "mihomo-windows-386",
+  "win32-arm64": "mihomo-windows-arm64",
+  "darwin-x64": "mihomo-darwin-amd64",
+  "darwin-arm64": "mihomo-darwin-arm64",
+  "linux-x64": "mihomo-linux-amd64-compatible",
+  "linux-arm64": "mihomo-linux-arm64",
+  "linux-arm": "mihomo-linux-armv7",
+};
+
+// Fetch the latest release version from the version.txt file
+async function getLatestVersion() {
+  try {
+    const response = await fetch(VERSION_URL, { method: "GET" });
+    let v = await response.text();
+    META_ALPHA_VERSION = v.trim(); // Trim to remove extra whitespaces
+    console.log(`Latest release version: ${META_ALPHA_VERSION}`);
+  } catch (error) {
+    console.error("Error fetching latest release version:", error.message);
+    process.exit(1);
+  }
+}
+
+/* ======= clash meta stable ======= */
+const META_URL_PREFIX = `https://github.com/MetaCubeX/mihomo/releases/download`;
+let META_VERSION = "v1.17.0";
 
 const META_MAP = {
-  "win32-x64": "Clash.Meta-windows-amd64-compatible",
-  "darwin-x64": "Clash.Meta-darwin-amd64",
-  "darwin-arm64": "Clash.Meta-darwin-arm64",
-  "linux-x64": "Clash.Meta-linux-amd64-compatible",
-  "linux-arm64": "Clash.Meta-linux-arm64",
+  "win32-x64": "mihomo-windows-amd64-compatible",
+  "win32-ia32": "mihomo-windows-386",
+  "win32-arm64": "mihomo-windows-arm64",
+  "darwin-x64": "mihomo-darwin-amd64",
+  "darwin-arm64": "mihomo-darwin-arm64",
+  "linux-x64": "mihomo-linux-amd64-compatible",
+  "linux-arm64": "mihomo-linux-arm64",
+  "linux-arm": "mihomo-linux-armv7",
 };
 
-/**
+/*
  * check available
  */
-
-const { platform, arch } = process;
-if (!CLASH_MAP[`${platform}-${arch}`]) {
-  throw new Error(`clash unsupport platform "${platform}-${arch}"`);
-}
 if (!META_MAP[`${platform}-${arch}`]) {
-  throw new Error(`clash meta unsupport platform "${platform}-${arch}"`);
+  throw new Error(
+    `clash meta alpha unsupported platform "${platform}-${arch}"`
+  );
 }
 
-function clash() {
-  const name = CLASH_MAP[`${platform}-${arch}`];
+if (!META_ALPHA_MAP[`${platform}-${arch}`]) {
+  throw new Error(
+    `clash meta alpha unsupported platform "${platform}-${arch}"`
+  );
+}
 
+/**
+ * core info
+ */
+function clashMetaAlpha() {
+  const name = META_ALPHA_MAP[`${platform}-${arch}`];
   const isWin = platform === "win32";
   const urlExt = isWin ? "zip" : "gz";
-  const downloadURL = `${CLASH_URL_PREFIX}${name}-${CLASH_LATEST_DATE}.${urlExt}`;
+  const downloadURL = `${META_ALPHA_URL_PREFIX}/${name}-${META_ALPHA_VERSION}.${urlExt}`;
   const exeFile = `${name}${isWin ? ".exe" : ""}`;
-  const zipFile = `${name}.${urlExt}`;
+  const zipFile = `${name}-${META_ALPHA_VERSION}.${urlExt}`;
 
   return {
-    name: "clash",
-    targetFile: `clash-${SIDECAR_HOST}${isWin ? ".exe" : ""}`,
+    name: "clash-meta-alpha",
+    targetFile: `clash-meta-alpha-${SIDECAR_HOST}${isWin ? ".exe" : ""}`,
     exeFile,
     zipFile,
     downloadURL,
@@ -73,7 +129,7 @@ function clashMeta() {
   const name = META_MAP[`${platform}-${arch}`];
   const isWin = platform === "win32";
   const urlExt = isWin ? "zip" : "gz";
-  const downloadURL = `${META_URL_PREFIX}${META_VERSION}/${name}-${META_VERSION}.${urlExt}`;
+  const downloadURL = `${META_URL_PREFIX}/${META_VERSION}/${name}-${META_VERSION}.${urlExt}`;
   const exeFile = `${name}${isWin ? ".exe" : ""}`;
   const zipFile = `${name}-${META_VERSION}.${urlExt}`;
 
@@ -85,7 +141,6 @@ function clashMeta() {
     downloadURL,
   };
 }
-
 /**
  * download sidecar and rename
  */
@@ -103,75 +158,68 @@ async function resolveSidecar(binInfo) {
   const tempExe = path.join(tempDir, exeFile);
 
   await fs.mkdirp(tempDir);
-  if (!(await fs.pathExists(tempZip))) await downloadFile(downloadURL, tempZip);
+  try {
+    if (!(await fs.pathExists(tempZip))) {
+      await downloadFile(downloadURL, tempZip);
+    }
 
-  if (zipFile.endsWith(".zip")) {
-    const zip = new AdmZip(tempZip);
-    zip.getEntries().forEach((entry) => {
-      console.log(`[DEBUG]: ${name} entry name`, entry.entryName);
-    });
-    zip.extractAllTo(tempDir, true);
-    await fs.rename(tempExe, sidecarPath);
-    console.log(`[INFO]: ${name} unzip finished`);
-  } else {
-    // gz
-    const readStream = fs.createReadStream(tempZip);
-    const writeStream = fs.createWriteStream(sidecarPath);
-    readStream
-      .pipe(zlib.createGunzip())
-      .pipe(writeStream)
-      .on("finish", () => {
-        console.log(`[INFO]: ${name} gunzip finished`);
-        execSync(`chmod 755 ${sidecarPath}`);
-        console.log(`[INFO]: ${name} chmod binary finished`);
-      })
-      .on("error", (error) => {
-        console.error(`[ERROR]: ${name} gz failed`, error.message);
-        throw error;
+    if (zipFile.endsWith(".zip")) {
+      const zip = new AdmZip(tempZip);
+      zip.getEntries().forEach((entry) => {
+        console.log(`[DEBUG]: "${name}" entry name`, entry.entryName);
       });
+      zip.extractAllTo(tempDir, true);
+      await fs.rename(tempExe, sidecarPath);
+      console.log(`[INFO]: "${name}" unzip finished`);
+    } else if (zipFile.endsWith(".tgz")) {
+      // tgz
+      await fs.mkdirp(tempDir);
+      await tar.extract({
+        cwd: tempDir,
+        file: tempZip,
+        //strip: 1, // 可能需要根据实际的 .tgz 文件结构调整
+      });
+      const files = await fs.readdir(tempDir);
+      console.log(`[DEBUG]: "${name}" files in tempDir:`, files);
+      const extractedFile = files.find((file) => file.startsWith("虚空终端-"));
+      if (extractedFile) {
+        const extractedFilePath = path.join(tempDir, extractedFile);
+        await fs.rename(extractedFilePath, sidecarPath);
+        console.log(`[INFO]: "${name}" file renamed to "${sidecarPath}"`);
+        execSync(`chmod 755 ${sidecarPath}`);
+        console.log(`[INFO]: "${name}" chmod binary finished`);
+      } else {
+        throw new Error(`Expected file not found in ${tempDir}`);
+      }
+    } else {
+      // gz
+      const readStream = fs.createReadStream(tempZip);
+      const writeStream = fs.createWriteStream(sidecarPath);
+      await new Promise((resolve, reject) => {
+        const onError = (error) => {
+          console.error(`[ERROR]: "${name}" gz failed:`, error.message);
+          reject(error);
+        };
+        readStream
+          .pipe(zlib.createGunzip().on("error", onError))
+          .pipe(writeStream)
+          .on("finish", () => {
+            console.log(`[INFO]: "${name}" gunzip finished`);
+            execSync(`chmod 755 ${sidecarPath}`);
+            console.log(`[INFO]: "${name}" chmod binary finished`);
+            resolve();
+          })
+          .on("error", onError);
+      });
+    }
+  } catch (err) {
+    // 需要删除文件
+    await fs.remove(sidecarPath);
+    throw err;
+  } finally {
+    // delete temp dir
+    await fs.remove(tempDir);
   }
-
-  // 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(TEMP_DIR, "wintun");
-  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}"`);
-  }
-
-  await fs.rename(wintunPath, targetPath);
-  await fs.remove(tempDir);
-
-  console.log(`[INFO]: resolve wintun.dll finished`);
 }
 
 /**
@@ -242,29 +290,49 @@ const resolveUninstall = () =>
 const resolveMmdb = () =>
   resolveResource({
     file: "Country.mmdb",
-    downloadURL: `https://github.com/Dreamacro/maxmind-geoip/releases/download/20221112/Country.mmdb`,
+    downloadURL: `https://github.com/MetaCubeX/meta-rules-dat/releases/download/latest/country.mmdb`,
   });
 const resolveGeosite = () =>
   resolveResource({
     file: "geosite.dat",
-    downloadURL: `https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geosite.dat`,
+    downloadURL: `https://github.com/MetaCubeX/meta-rules-dat/releases/download/latest/geosite.dat`,
   });
 const resolveGeoIP = () =>
   resolveResource({
     file: "geoip.dat",
-    downloadURL: `https://github.com/Loyalsoldier/geoip/releases/latest/download/geoip.dat`,
+    downloadURL: `https://github.com/MetaCubeX/meta-rules-dat/releases/download/latest/geoip.dat`,
+  });
+const resolveEnableLoopback = () =>
+  resolveResource({
+    file: "enableLoopback.exe",
+    downloadURL: `https://github.com/Kuingsmile/uwp-tool/releases/download/latest/enableLoopback.exe`,
   });
 
 const tasks = [
-  { name: "clash", func: () => resolveSidecar(clash()), retry: 5 },
-  { name: "clash-meta", func: () => resolveSidecar(clashMeta()), retry: 5 },
-  { name: "wintun", func: resolveWintun, retry: 5, winOnly: true },
+  // { name: "clash", func: resolveClash, retry: 5 },
+  {
+    name: "clash-meta-alpha",
+    func: () => getLatestVersion().then(() => resolveSidecar(clashMetaAlpha())),
+    retry: 5,
+  },
+  {
+    name: "clash-meta",
+    func: () => resolveSidecar(clashMeta()),
+    retry: 5,
+  },
+  // { name: "wintun", func: resolveWintun, retry: 5, winOnly: true },
   { name: "service", func: resolveService, retry: 5, winOnly: true },
   { name: "install", func: resolveInstall, retry: 5, winOnly: true },
   { name: "uninstall", func: resolveUninstall, retry: 5, winOnly: true },
   { name: "mmdb", func: resolveMmdb, retry: 5 },
   { name: "geosite", func: resolveGeosite, retry: 5 },
   { name: "geoip", func: resolveGeoIP, retry: 5 },
+  {
+    name: "enableLoopback",
+    func: resolveEnableLoopback,
+    retry: 5,
+    winOnly: true,
+  },
 ];
 
 async function runTask() {
@@ -277,7 +345,8 @@ async function runTask() {
       await task.func();
       break;
     } catch (err) {
-      console.error(`[ERROR]: task::${task.name} try ${i} == `, err.message);
+      console.error(`[ERROR]: task::${task.name} try ${i} ==`, err.message);
+      if (i === task.retry - 1) throw err;
     }
   }
   return runTask();

scripts/portable.mjs

@@ -4,29 +4,44 @@ import AdmZip from "adm-zip";
 import { createRequire } from "module";
 import { getOctokit, context } from "@actions/github";
 
+const target = process.argv.slice(2)[0];
+
+const ARCH_MAP = {
+  "i686-pc-windows-msvc": "x86",
+  "x86_64-pc-windows-msvc": "x64",
+};
+
 /// Script for ci
 /// 打包绿色版/便携版 (only Windows)
 async function resolvePortable() {
   if (process.platform !== "win32") return;
 
-  const releaseDir = "./src-tauri/target/release";
+  const releaseDir = target
+    ? `./src-tauri/target/${target}/release`
+    : `./src-tauri/target/release`;
+  const configDir = path.join(releaseDir, ".config");
 
   if (!(await fs.pathExists(releaseDir))) {
     throw new Error("could not found the release dir");
   }
 
+  await fs.mkdir(configDir);
+  await fs.createFile(path.join(configDir, "PORTABLE"));
+
   const zip = new AdmZip();
 
   zip.addLocalFile(path.join(releaseDir, "Clash Verge.exe"));
-  zip.addLocalFile(path.join(releaseDir, "clash.exe"));
+  // zip.addLocalFile(path.join(releaseDir, "clash.exe"));
   zip.addLocalFile(path.join(releaseDir, "clash-meta.exe"));
+  zip.addLocalFile(path.join(releaseDir, "clash-meta-alpha.exe"));
   zip.addLocalFolder(path.join(releaseDir, "resources"), "resources");
+  zip.addLocalFolder(configDir, ".config");
 
   const require = createRequire(import.meta.url);
   const packageJson = require("../package.json");
   const { version } = packageJson;
 
-  const zipFile = `Clash.Verge_${version}_x64_portable.zip`;
+  const zipFile = `Clash.Verge_${version}_${ARCH_MAP[target]}_portable.zip`;
   zip.writeZip(zipFile);
 
   console.log("[INFO]: create portable zip successfully");

scripts/updater.mjs

@@ -43,9 +43,11 @@ async function resolveUpdater() {
       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: "" },
+      "linux-aarch64": { signature: "", url: "" },
       "windows-x86_64": { signature: "", url: "" },
-      "windows-i686": { signature: "", url: "" }, // no supported
+      "windows-i686": { signature: "", url: "" },
     },
   };
 
@@ -53,27 +55,39 @@ async function resolveUpdater() {
     const { name, browser_download_url } = asset;
 
     // win64 url
-    if (name.endsWith(".msi.zip") && name.includes("en-US")) {
+    if (name.endsWith("x64-setup.nsis.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") && name.includes("en-US")) {
+    if (name.endsWith("x64-setup.nsis.zip.sig")) {
       const sig = await getSignature(browser_download_url);
       updateData.platforms.win64.signature = sig;
       updateData.platforms["windows-x86_64"].signature = sig;
     }
 
+    // win32 url
+    if (name.endsWith("x86-setup.nsis.zip")) {
+      updateData.platforms["windows-i686"].url = browser_download_url;
+    }
+    // win32 signature
+    if (name.endsWith("x86-setup.nsis.zip.sig")) {
+      const sig = await getSignature(browser_download_url);
+      updateData.platforms["windows-i686"].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;
+      updateData.platforms["darwin-x86_64"].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;
+      updateData.platforms["darwin-x86_64"].signature = sig;
     }
 
     // darwin url (aarch)
@@ -90,12 +104,18 @@ async function resolveUpdater() {
     if (name.endsWith(".AppImage.tar.gz")) {
       updateData.platforms.linux.url = browser_download_url;
       updateData.platforms["linux-x86_64"].url = browser_download_url;
+      // 暂时使用x64版本的url和sig，使得可以检查更新，但aarch64版本还不支持构建appimage
+      updateData.platforms["linux-aarch64"].url = browser_download_url;
+      // updateData.platforms["linux-armv7"].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;
+      // 暂时使用x64版本的url和sig，使得可以检查更新，但aarch64版本还不支持构建appimage
+      updateData.platforms["linux-aarch64"].signature = sig;
+      // updateData.platforms["linux-armv7"].signature = sig;
     }
   });
 
@@ -117,10 +137,8 @@ async function resolveUpdater() {
 
   Object.entries(updateDataNew.platforms).forEach(([key, value]) => {
     if (value.url) {
-      updateDataNew.platforms[key].url = value.url.replace(
-        "https://github.com/",
-        "https://hub.fastgit.xyz/"
-      );
+      updateDataNew.platforms[key].url =
+        "https://mirror.ghproxy.com/" + value.url;
     } else {
       console.log(`[Error]: updateDataNew.platforms.${key} is null`);
     }

src-tauri/Cargo.toml

@@ -1,10 +1,10 @@
 [package]
 name = "clash-verge"
-version = "0.1.0"
+version = "1.4.3"
 description = "clash verge"
 authors = ["zzzgydi"]
 license = "GPL-3.0"
-repository = "https://github.com/zzzgydi/clash-verge.git"
+repository = "https://github.com/clash-verge-rev/clash-verge-rev.git"
 default-run = "clash-verge"
 edition = "2021"
 build = "build.rs"
@@ -14,45 +14,53 @@ tauri-build = { version = "1", features = [] }
 
 [dependencies]
 warp = "0.3"
-which = "4.2.2"
+which = "5.0.0"
 anyhow = "1.0"
-dirs = "4.0.0"
-open = "3.0.3"
-log = "0.4.14"
-ctrlc = "3.2.3"
-dunce = "1.0.2"
-log4rs = "1.0.0"
-nanoid = "0.4.0"
-chrono = "0.4.19"
-sysinfo = "0.26.2"
-sysproxy = "0.1"
-rquickjs = "0.1.7"
+dirs = "5.0"
+open = "5.0"
+log = "0.4"
+ctrlc = "3.4"
+dunce = "1.0"
+log4rs = "1"
+nanoid = "0.4"
+chrono = "0.4"
+sysinfo = "0.29"
+sysproxy = { git="https://github.com/zzzgydi/sysproxy-rs", branch = "main" }
+rquickjs = "0.3"
 serde_json = "1.0"
 serde_yaml = "0.9"
-auto-launch = "0.4"
-once_cell = "1.14.0"
+auto-launch = "0.5"
+once_cell = "1.18"
 port_scanner = "0.1.5"
-delay_timer = "0.11.1"
-parking_lot = "0.12.0"
+delay_timer = "0.11"
+parking_lot = "0.12"
 tokio = { version = "1", features = ["full"] }
 serde = { version = "1.0", features = ["derive"] }
-reqwest = { version = "0.11", features = ["json"] }
-tauri = { version = "1.1.1", features = ["global-shortcut-all", "process-all", "shell-all", "system-tray", "updater", "window-all"] }
-tauri-runtime-wry = { version = "0.12" }
-window-vibrancy = { version = "0.3.0" }
-window-shadows = { version = "0.2.0" }
+reqwest = { version = "0.11", features = ["json", "rustls-tls"] }
+tauri = { version = "1.5", features = ["clipboard-all", "global-shortcut-all", "process-all", "shell-all", "system-tray", "updater", "window-all"] }
+window-vibrancy = { version = "0.4.3" }
+window-shadows = { version = "0.2" }
+percent-encoding = "2.3.1"
+
 
 [target.'cfg(windows)'.dependencies]
-runas = "0.2.1"
+runas = "=1.0.0"
 deelevate = "0.2.0"
-winreg = { version = "0.10", features = ["transactions"] }
-windows-sys = { version = "0.36", features = ["Win32_System_LibraryLoader", "Win32_System_SystemInformation"] }
+winreg = { version = "0.52", features = ["transactions"] }
+windows-sys = { version = "0.52", features = ["Win32_System_LibraryLoader", "Win32_System_SystemInformation"] }
+
+[target.'cfg(windows)'.dependencies.tauri]
+features = ["global-shortcut-all", "icon-png", "process-all", "shell-all", "system-tray", "updater", "window-all"]
+
+[target.'cfg(linux)'.dependencies.tauri]
+features = ["global-shortcut-all", "process-all", "shell-all", "system-tray", "updater", "window-all", "native-tls-vendored", "reqwest-native-tls-vendored"]
+
 
 [features]
 default = ["custom-protocol"]
 custom-protocol = ["tauri/custom-protocol"]
 verge-dev = []
-debug-yml = []
+default-meta = []
 
 [profile.release]
 panic = "abort"

src-tauri/src/cmds.rs

@@ -30,6 +30,11 @@ pub async fn import_profile(url: String, option: Option<PrfOption>) -> CmdResult
     wrap_err!(Config::profiles().data().append_item(item))
 }
 
+#[tauri::command]
+pub async fn reorder_profile(active_id: String, over_id: String) -> CmdResult {
+    wrap_err!(Config::profiles().data().reorder(active_id, over_id))
+}
+
 #[tauri::command]
 pub async fn create_profile(item: PrfItem, file_data: Option<String>) -> CmdResult {
     let item = wrap_err!(PrfItem::from(item, file_data).await)?;
@@ -80,7 +85,7 @@ pub fn patch_profile(index: String, profile: PrfItem) -> CmdResult {
 }
 
 #[tauri::command]
-pub fn view_profile(index: String) -> CmdResult {
+pub fn view_profile(app_handle: tauri::AppHandle, index: String) -> CmdResult {
     let file = {
         wrap_err!(Config::profiles().latest().get_item(&index))?
             .file
@@ -93,7 +98,7 @@ pub fn view_profile(index: String) -> CmdResult {
         ret_err!("the file not found");
     }
 
-    wrap_err!(help::open_file(path))
+    wrap_err!(help::open_file(app_handle, path))
 }
 
 #[tauri::command]
@@ -175,6 +180,15 @@ pub async fn restart_sidecar() -> CmdResult {
     wrap_err!(CoreManager::global().run_core().await)
 }
 
+#[tauri::command]
+pub fn grant_permission(_core: String) -> CmdResult {
+    #[cfg(any(target_os = "macos", target_os = "linux"))]
+    return wrap_err!(manager::grant_permission(_core));
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux")))]
+    return Err("Unsupported target".into());
+}
+
 /// get the system proxy
 #[tauri::command]
 pub fn get_sys_proxy() -> CmdResult<Mapping> {
@@ -202,6 +216,13 @@ pub fn open_app_dir() -> CmdResult<()> {
     wrap_err!(open::that(app_dir))
 }
 
+#[tauri::command]
+pub fn open_core_dir() -> CmdResult<()> {
+    let core_dir = wrap_err!(tauri::utils::platform::current_exe())?;
+    let core_dir = core_dir.parent().ok_or(format!("failed to get core dir"))?;
+    wrap_err!(open::that(core_dir))
+}
+
 #[tauri::command]
 pub fn open_logs_dir() -> CmdResult<()> {
     let log_dir = wrap_err!(dirs::app_logs_dir())?;
@@ -213,6 +234,28 @@ pub fn open_web_url(url: String) -> CmdResult<()> {
     wrap_err!(open::that(url))
 }
 
+#[cfg(windows)]
+pub mod uwp {
+    use super::*;
+    use crate::core::win_uwp;
+
+    #[tauri::command]
+    pub async fn invoke_uwp_tool() -> CmdResult {
+        wrap_err!(win_uwp::invoke_uwptools().await)
+    }
+}
+
+#[tauri::command]
+pub async fn clash_api_get_proxy_delay(
+    name: String,
+    url: Option<String>,
+) -> CmdResult<clash_api::DelayRes> {
+    match clash_api::get_proxy_delay(name, url).await {
+        Ok(res) => Ok(res),
+        Err(err) => Err(format!("{}", err.to_string())),
+    }
+}
+
 #[cfg(windows)]
 pub mod service {
     use super::*;
@@ -251,3 +294,13 @@ pub mod service {
         Ok(())
     }
 }
+
+#[cfg(not(windows))]
+pub mod uwp {
+    use super::*;
+
+    #[tauri::command]
+    pub async fn invoke_uwp_tool() -> CmdResult {
+        Ok(())
+    }
+}

src-tauri/src/config/clash.rs

@@ -24,12 +24,29 @@ impl IClashTemp {
     pub fn template() -> Self {
         let mut map = Mapping::new();
 
-        map.insert("mixed-port".into(), 7890.into());
+        map.insert(
+            "mixed-port".into(),
+            match cfg!(feature = "default-meta") {
+                false => 7890.into(),
+                true => 7898.into(),
+            },
+        );
         map.insert("log-level".into(), "info".into());
         map.insert("allow-lan".into(), false.into());
         map.insert("mode".into(), "rule".into());
-        map.insert("external-controller".into(), "127.0.0.1:9090".into());
+        map.insert(
+            "external-controller".into(),
+            match cfg!(feature = "default-meta") {
+                false => "127.0.0.1:9090".into(),
+                true => "127.0.0.1:9098".into(),
+            },
+        );
         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/config.rs

@@ -45,7 +45,7 @@ impl Config {
         Self::global().runtime_config.clone()
     }
 
-    /// 初始化配置
+    /// 初始化订阅
     pub fn init_config() -> Result<()> {
         crate::log_err!(Self::generate());
         if let Err(err) = Self::generate_file(ConfigType::Run) {
@@ -64,7 +64,7 @@ impl Config {
         Ok(())
     }
 
-    /// 将配置丢到对应的文件中
+    /// 将订阅丢到对应的文件中
     pub fn generate_file(typ: ConfigType) -> Result<PathBuf> {
         let path = match typ {
             ConfigType::Run => dirs::app_home_dir()?.join(RUNTIME_CONFIG),
@@ -82,7 +82,7 @@ impl Config {
         Ok(path)
     }
 
-    /// 生成配置存好
+    /// 生成订阅存好
     pub fn generate() -> Result<()> {
         let (config, exists_keys, logs) = enhance::enhance();
 

src-tauri/src/config/draft.rs

@@ -26,7 +26,7 @@ macro_rules! draft_define {
             }
 
             pub fn draft(&self) -> MappedMutexGuard<$id> {
-                MutexGuard::map(self.inner.lock(), |mut inner| {
+                MutexGuard::map(self.inner.lock(), |inner| {
                     if inner.1.is_none() {
                         inner.1 = Some(inner.0.clone());
                     }

src-tauri/src/config/prfitem.rs

@@ -190,11 +190,14 @@ impl PrfItem {
         let self_proxy = opt_ref.map_or(false, |o| o.self_proxy.unwrap_or(false));
         let user_agent = opt_ref.map_or(None, |o| o.user_agent.clone());
 
-        let mut builder = reqwest::ClientBuilder::new().no_proxy();
+        let mut builder = reqwest::ClientBuilder::new().use_rustls_tls().no_proxy();
 
         // 使用软件自己的代理
         if self_proxy {
-            let port = Config::clash().data().get_mixed_port();
+            let port = Config::verge()
+                .latest()
+                .verge_mixed_port
+                .unwrap_or(Config::clash().data().get_mixed_port());
 
             let proxy_scheme = format!("http://127.0.0.1:{port}");
 
@@ -260,7 +263,17 @@ impl PrfItem {
         let filename = match header.get("Content-Disposition") {
             Some(value) => {
                 let filename = value.to_str().unwrap_or("");
-                help::parse_str::<String>(filename, "filename=")
+                match help::parse_str::<String>(filename, "filename=") {
+                    Some(filename) => Some(filename),
+                    None => match help::parse_str::<String>(filename, "filename*=") {
+                        Some(filename) => {
+                            let iter = percent_encoding::percent_decode(filename.as_bytes());
+                            let filename = iter.decode_utf8().unwrap_or_default();
+                            filename.split("''").last().map(|s| s.to_string())
+                        }
+                        None => None,
+                    },
+                }
             }
             None => None,
         };
@@ -282,8 +295,11 @@ impl PrfItem {
         let name = name.unwrap_or(filename.unwrap_or("Remote File".into()));
         let data = resp.text_with_charset("utf-8").await?;
 
+        // process the charset "UTF-8 with BOM"
+        let data = data.trim_start_matches('\u{feff}');
+
         // check the data whether the valid yaml format
-        let yaml = serde_yaml::from_str::<Mapping>(&data) //
+        let yaml = serde_yaml::from_str::<Mapping>(data)
             .context("the remote profile data is invalid yaml")?;
 
         if !yaml.contains_key("proxies") && !yaml.contains_key("proxy-providers") {
@@ -301,7 +317,7 @@ impl PrfItem {
             extra,
             option,
             updated: Some(chrono::Local::now().timestamp() as usize),
-            file_data: Some(data),
+            file_data: Some(data.into()),
         })
     }
 

src-tauri/src/config/profiles.rs

@@ -38,7 +38,7 @@ impl IProfiles {
                 }
                 // compatible with the old old old version
                 profiles.items.as_mut().map(|items| {
-                    for mut item in items.iter_mut() {
+                    for item in items.iter_mut() {
                         if item.uid.is_none() {
                             item.uid = Some(help::get_uid("d"));
                         }
@@ -55,7 +55,12 @@ impl IProfiles {
 
     pub fn template() -> Self {
         Self {
-            valid: Some(vec!["dns".into()]),
+            valid: Some(vec![
+                "dns".into(),
+                "sub-rules".into(),
+                "unified-delay".into(),
+                "tcp-concurrent".into(),
+            ]),
             items: Some(vec![]),
             ..Self::default()
         }
@@ -138,9 +143,9 @@ impl IProfiles {
             let path = dirs::app_profiles_dir()?.join(&file);
 
             fs::File::create(path)
-                .context(format!("failed to create file \"{}\"", file))?
+                .with_context(|| format!("failed to create file \"{}\"", file))?
                 .write(file_data.as_bytes())
-                .context(format!("failed to write to file \"{}\"", file))?;
+                .with_context(|| format!("failed to write to file \"{}\"", file))?;
         }
 
         if self.items.is_none() {
@@ -151,11 +156,35 @@ impl IProfiles {
         self.save_file()
     }
 
+    /// reorder items
+    pub fn reorder(&mut self, active_id: String, over_id: String) -> Result<()> {
+        let mut items = self.items.take().unwrap_or(vec![]);
+        let mut old_index = None;
+        let mut new_index = None;
+
+        for i in 0..items.len() {
+            if items[i].uid == Some(active_id.clone()) {
+                old_index = Some(i);
+            }
+            if items[i].uid == Some(over_id.clone()) {
+                new_index = Some(i);
+            }
+        }
+
+        if old_index.is_none() || new_index.is_none() {
+            return Ok(());
+        }
+        let item = items.remove(old_index.unwrap());
+        items.insert(new_index.unwrap(), item);
+        self.items = Some(items);
+        self.save_file()
+    }
+
     /// update the item value
     pub fn patch_item(&mut self, uid: String, item: PrfItem) -> Result<()> {
         let mut items = self.items.take().unwrap_or(vec![]);
 
-        for mut each in items.iter_mut() {
+        for each in items.iter_mut() {
             if each.uid == Some(uid.clone()) {
                 patch!(each, item, itype);
                 patch!(each, item, name);
@@ -189,7 +218,7 @@ impl IProfiles {
         if let Some(items) = self.items.as_mut() {
             let some_uid = Some(uid.clone());
 
-            for mut each in items.iter_mut() {
+            for each in items.iter_mut() {
                 if each.uid == some_uid {
                     each.extra = item.extra;
                     each.updated = item.updated;
@@ -207,9 +236,9 @@ impl IProfiles {
                         let path = dirs::app_profiles_dir()?.join(&file);
 
                         fs::File::create(path)
-                            .context(format!("failed to create file \"{}\"", file))?
+                            .with_context(|| format!("failed to create file \"{}\"", file))?
                             .write(file_data.as_bytes())
-                            .context(format!("failed to write to file \"{}\"", file))?;
+                            .with_context(|| format!("failed to write to file \"{}\"", file))?;
                     }
 
                     break;
@@ -261,7 +290,7 @@ impl IProfiles {
         Ok(current == uid)
     }
 
-    /// 获取current指向的配置内容
+    /// 获取current指向的订阅内容
     pub fn current_mapping(&self) -> Result<Mapping> {
         match (self.current.as_ref(), self.items.as_ref()) {
             (Some(current), Some(items)) => {

src-tauri/src/config/runtime.rs

@@ -5,7 +5,7 @@ use std::collections::HashMap;
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
 pub struct IRuntime {
     pub config: Option<Mapping>,
-    // 记录在配置中（包括merge和script生成的）出现过的keys
+    // 记录在订阅中（包括merge和script生成的）出现过的keys
     // 这些keys不一定都生效
     pub exists_keys: Vec<String>,
     pub chain_logs: HashMap<String, Vec<(String, String)>>,
@@ -15,4 +15,17 @@ impl IRuntime {
     pub fn new() -> Self {
         Self::default()
     }
+
+    // 这里只更改 allow-lan | ipv6 | log-level
+    pub fn patch_config(&mut self, patch: Mapping) {
+        if let Some(config) = self.config.as_mut() {
+            ["allow-lan", "ipv6", "log-level"]
+                .into_iter()
+                .for_each(|key| {
+                    if let Some(value) = patch.get(key).to_owned() {
+                        config.insert(key.into(), value.clone());
+                    }
+                });
+        }
+    }
 }

src-tauri/src/config/verge.rs

@@ -1,5 +1,6 @@
 use crate::utils::{dirs, help};
 use anyhow::Result;
+use log::LevelFilter;
 use serde::{Deserialize, Serialize};
 
 /// ### `verge.yaml` schema
@@ -8,6 +9,10 @@ pub struct IVerge {
     /// app listening port for app singleton
     pub app_singleton_port: Option<u16>,
 
+    /// app log level
+    /// silent | error | warn | info | debug | trace
+    pub app_log_level: Option<String>,
+
     // i18n
     pub language: Option<String>,
 
@@ -18,9 +23,15 @@ pub struct IVerge {
     /// maybe be able to set the alpha
     pub theme_blur: Option<bool>,
 
+    /// tray click event
+    pub tray_event: Option<String>,
+
     /// enable traffic graph default is true
     pub traffic_graph: Option<bool>,
 
+    /// show memory info (only for Clash Meta)
+    pub enable_memory_usage: Option<bool>,
+
     /// clash tun mode
     pub enable_tun_mode: Option<bool>,
 
@@ -66,8 +77,28 @@ pub struct IVerge {
     /// 默认的延迟测试连接
     pub default_latency_test: Option<String>,
 
+    /// 支持关闭字段过滤，避免meta的新字段都被过滤掉，默认为关闭
+    pub enable_clash_fields: Option<bool>,
+
     /// 是否使用内部的脚本支持，默认为真
     pub enable_builtin_enhanced: Option<bool>,
+
+    /// proxy 页面布局 列数
+    pub proxy_layout_column: Option<i32>,
+
+    /// 日志清理
+    /// 0: 不清理; 1: 7天; 2: 30天; 3: 90天
+    pub auto_log_clean: Option<i32>,
+
+    /// window size and position
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub window_size_position: Option<Vec<f64>>,
+
+    /// 是否启用随机端口
+    pub enable_random_port: Option<bool>,
+
+    /// verge mixed port 用于覆盖 clash 的 mixed port
+    pub verge_mixed_port: Option<u16>,
 }
 
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
@@ -99,18 +130,29 @@ impl IVerge {
 
     pub fn template() -> Self {
         Self {
-            clash_core: Some("clash".into()),
-            language: Some("en".into()),
+            clash_core: match cfg!(feature = "default-meta") {
+                false => Some("clash".into()),
+                true => Some("clash-meta".into()),
+            },
+            language: match cfg!(feature = "default-meta") {
+                false => Some("en".into()),
+                true => Some("zh".into()),
+            },
             theme_mode: Some("system".into()),
             theme_blur: Some(false),
             traffic_graph: Some(true),
+            enable_memory_usage: Some(true),
             enable_auto_launch: Some(false),
             enable_silent_start: Some(false),
             enable_system_proxy: Some(false),
+            enable_random_port: Some(false),
+            verge_mixed_port: Some(7890),
             enable_proxy_guard: Some(false),
             proxy_guard_duration: Some(30),
             auto_close_connection: Some(true),
             enable_builtin_enhanced: Some(true),
+            enable_clash_fields: Some(false),
+            auto_log_clean: Some(3),
             ..Self::default()
         }
     }
@@ -131,15 +173,20 @@ impl IVerge {
             };
         }
 
+        patch!(app_log_level);
         patch!(language);
         patch!(theme_mode);
         patch!(theme_blur);
+        patch!(tray_event);
         patch!(traffic_graph);
+        patch!(enable_memory_usage);
 
         patch!(enable_tun_mode);
         patch!(enable_service_mode);
         patch!(enable_auto_launch);
         patch!(enable_silent_start);
+        patch!(enable_random_port);
+        patch!(verge_mixed_port);
         patch!(enable_system_proxy);
         patch!(enable_proxy_guard);
         patch!(system_proxy_bypass);
@@ -153,6 +200,10 @@ impl IVerge {
         patch!(auto_close_connection);
         patch!(default_latency_test);
         patch!(enable_builtin_enhanced);
+        patch!(proxy_layout_column);
+        patch!(enable_clash_fields);
+        patch!(auto_log_clean);
+        patch!(window_size_position);
     }
 
     /// 在初始化前尝试拿到单例端口的值
@@ -167,4 +218,21 @@ impl IVerge {
             Err(_) => SERVER_PORT, // 这里就不log错误了
         }
     }
+
+    /// 获取日志等级
+    pub fn get_log_level(&self) -> LevelFilter {
+        if let Some(level) = self.app_log_level.as_ref() {
+            match level.to_lowercase().as_str() {
+                "silent" => LevelFilter::Off,
+                "error" => LevelFilter::Error,
+                "warn" => LevelFilter::Warn,
+                "info" => LevelFilter::Info,
+                "debug" => LevelFilter::Debug,
+                "trace" => LevelFilter::Trace,
+                _ => LevelFilter::Info,
+            }
+        } else {
+            LevelFilter::Info
+        }
+    }
 }

src-tauri/src/core/clash_api.rs

@@ -1,6 +1,7 @@
 use crate::config::Config;
 use anyhow::{bail, Result};
 use reqwest::header::HeaderMap;
+use serde::{Deserialize, Serialize};
 use serde_yaml::Mapping;
 use std::collections::HashMap;
 
@@ -36,6 +37,32 @@ pub async fn patch_configs(config: &Mapping) -> Result<()> {
     Ok(())
 }
 
+#[derive(Default, Debug, Clone, Deserialize, Serialize)]
+pub struct DelayRes {
+    delay: u64,
+}
+
+/// GET /proxies/{name}/delay
+/// 获取代理延迟
+pub async fn get_proxy_delay(name: String, test_url: Option<String>) -> Result<DelayRes> {
+    let (url, headers) = clash_client_info()?;
+    let url = format!("{url}/proxies/{name}/delay");
+
+    let default_url = "http://1.1.1.1";
+    let test_url = test_url
+        .map(|s| if s.is_empty() { default_url.into() } else { s })
+        .unwrap_or(default_url.into());
+
+    let client = reqwest::ClientBuilder::new().no_proxy().build()?;
+    let builder = client
+        .get(&url)
+        .headers(headers)
+        .query(&[("timeout", "10000"), ("url", &test_url)]);
+    let response = builder.send().await?;
+
+    Ok(response.json::<DelayRes>().await?)
+}
+
 /// 根据clash info获取clash服务地址和请求头
 fn clash_client_info() -> Result<(String, HeaderMap)> {
     let client = { Config::clash().data().get_client_info() };
@@ -55,10 +82,13 @@ fn clash_client_info() -> Result<(String, HeaderMap)> {
 
 /// 缩短clash的日志
 pub fn parse_log(log: String) -> String {
-    if log.starts_with("time=") {
+    if log.starts_with("time=") && log.len() > 33 {
         return (&log[33..]).to_owned();
     }
-    (&log[9..]).to_owned()
+    if log.len() > 9 {
+        return (&log[9..]).to_owned();
+    }
+    return log;
 }
 
 /// 缩短clash -t的错误输出

src-tauri/src/core/core.rs

@@ -51,7 +51,7 @@ impl CoreManager {
         Ok(())
     }
 
-    /// 检查配置是否正确
+    /// 检查订阅是否正确
     pub fn check_config(&self) -> Result<()> {
         let config_path = Config::generate_file(ConfigType::Check)?;
         let config_path = dirs::path_to_str(&config_path)?;
@@ -68,6 +68,10 @@ impl CoreManager {
 
         if !output.status.success() {
             let error = clash_api::parse_check_output(output.stdout.clone());
+            let error = match error.len() > 0 {
+                true => error,
+                false => output.stdout.clone(),
+            };
             Logger::global().set_log(output.stdout);
             bail!("{error}");
         }
@@ -136,12 +140,14 @@ impl CoreManager {
 
         let clash_core = { Config::verge().latest().clash_core.clone() };
         let clash_core = clash_core.unwrap_or("clash".into());
+        let is_clash = clash_core == "clash";
 
         let config_path = dirs::path_to_str(&config_path)?;
 
         // fix #212
         let args = match clash_core.as_str() {
             "clash-meta" => vec!["-m", "-d", app_dir, "-f", config_path],
+            "clash-meta-alpha" => vec!["-m", "-d", app_dir, "-f", config_path],
             _ => vec!["-d", app_dir, "-f", config_path],
         };
 
@@ -161,18 +167,23 @@ impl CoreManager {
 
         let mut sidecar = self.sidecar.lock();
         *sidecar = Some(cmd_child);
+        drop(sidecar);
 
         tauri::async_runtime::spawn(async move {
             while let Some(event) = rx.recv().await {
                 match event {
                     CommandEvent::Stdout(line) => {
-                        let stdout = clash_api::parse_log(line.clone());
-                        log::info!(target: "app", "[clash]: {stdout}");
+                        if is_clash {
+                            let stdout = clash_api::parse_log(line.clone());
+                            log::info!(target: "app", "[clash]: {stdout}");
+                        } else {
+                            log::info!(target: "app", "[clash]: {line}");
+                        };
                         Logger::global().set_log(line);
                     }
                     CommandEvent::Stderr(err) => {
-                        let stdout = clash_api::parse_log(err.clone());
-                        log::error!(target: "app", "[clash]: {stdout}");
+                        // let stdout = clash_api::parse_log(err.clone());
+                        log::error!(target: "app", "[clash]: {err}");
                         Logger::global().set_log(err);
                     }
                     CommandEvent::Error(err) => {
@@ -181,6 +192,7 @@ impl CoreManager {
                     }
                     CommandEvent::Terminated(_) => {
                         log::info!(target: "app", "clash core terminated");
+                        let _ = CoreManager::global().recover_core();
                         break;
                     }
                     _ => {}
@@ -191,6 +203,40 @@ impl CoreManager {
         Ok(())
     }
 
+    /// 重启内核
+    pub fn recover_core(&'static self) -> Result<()> {
+        // 服务模式不管
+        #[cfg(target_os = "windows")]
+        if *self.use_service_mode.lock() {
+            return Ok(());
+        }
+
+        // 清空原来的sidecar值
+        if let Some(sidecar) = self.sidecar.lock().take() {
+            let _ = sidecar.kill();
+        }
+
+        tauri::async_runtime::spawn(async move {
+            // 6秒之后再查看服务是否正常 (时间随便搞的)
+            // terminated 可能是切换内核 (切换内核已经有500ms的延迟)
+            sleep(Duration::from_millis(6666)).await;
+
+            if self.sidecar.lock().is_none() {
+                log::info!(target: "app", "recover clash core");
+
+                // 重新启动app
+                if let Err(err) = self.run_core().await {
+                    log::error!(target: "app", "failed to recover clash core");
+                    log::error!(target: "app", "{err}");
+
+                    let _ = self.recover_core();
+                }
+            }
+        });
+
+        Ok(())
+    }
+
     /// 停止核心运行
     pub fn stop_core(&self) -> Result<()> {
         #[cfg(target_os = "windows")]
@@ -213,8 +259,9 @@ impl CoreManager {
     /// 切换核心
     pub async fn change_core(&self, clash_core: Option<String>) -> Result<()> {
         let clash_core = clash_core.ok_or(anyhow::anyhow!("clash core is null"))?;
+        const CLASH_CORES: [&str; 3] = ["clash", "clash-meta", "clash-meta-alpha"];
 
-        if &clash_core != "clash" && &clash_core != "clash-meta" {
+        if !CLASH_CORES.contains(&clash_core.as_str()) {
             bail!("invalid clash core name \"{clash_core}\"");
         }
 
@@ -222,7 +269,7 @@ impl CoreManager {
 
         Config::verge().draft().clash_core = Some(clash_core);
 
-        // 更新配置
+        // 更新订阅
         Config::generate()?;
 
         self.check_config()?;
@@ -250,13 +297,13 @@ impl CoreManager {
     pub async fn update_config(&self) -> Result<()> {
         log::debug!(target: "app", "try to update clash config");
 
-        // 更新配置
+        // 更新订阅
         Config::generate()?;
 
-        // 检查配置是否正常
+        // 检查订阅是否正常
         self.check_config()?;
 
-        // 更新运行时配置
+        // 更新运行时订阅
         let path = Config::generate_file(ConfigType::Run)?;
         let path = dirs::path_to_str(&path)?;
 

src-tauri/src/core/hotkey.rs

@@ -4,7 +4,6 @@ use once_cell::sync::OnceCell;
 use parking_lot::Mutex;
 use std::{collections::HashMap, sync::Arc};
 use tauri::{AppHandle, GlobalShortcutManager};
-use tauri_runtime_wry::wry::application::accelerator::Accelerator;
 
 pub struct Hotkey {
     current: Arc<Mutex<Vec<String>>>, // 保存当前的热键设置
@@ -35,7 +34,7 @@ impl Hotkey {
 
                 match (key, func) {
                     (Some(key), Some(func)) => {
-                        log_err!(Self::check_key(key).and_then(|_| self.register(key, func)));
+                        log_err!(self.register(key, func));
                     }
                     _ => {
                         let key = key.unwrap_or("None");
@@ -50,16 +49,6 @@ impl Hotkey {
         Ok(())
     }
 
-    /// 检查一个键是否合法
-    fn check_key(hotkey: &str) -> Result<()> {
-        // fix #287
-        // tauri的这几个方法全部有Result expect，会panic，先检测一遍避免挂了
-        if hotkey.parse::<Accelerator>().is_err() {
-            bail!("invalid hotkey `{hotkey}`");
-        }
-        Ok(())
-    }
-
     fn get_manager(&self) -> Result<impl GlobalShortcutManager> {
         let app_handle = self.app_handle.lock();
         if app_handle.is_none() {
@@ -76,6 +65,7 @@ impl Hotkey {
         }
 
         let f = match func.trim() {
+            "open_dashboard" => || feat::open_dashboard(),
             "clash_mode_rule" => || feat::change_clash_mode("rule".into()),
             "clash_mode_global" => || feat::change_clash_mode("global".into()),
             "clash_mode_direct" => || feat::change_clash_mode("direct".into()),
@@ -108,11 +98,6 @@ impl Hotkey {
 
         let (del, add) = Self::get_diff(old_map, new_map);
 
-        // 先检查一遍所有新的热键是不是可以用的
-        for (hotkey, _) in add.iter() {
-            Self::check_key(hotkey)?;
-        }
-
         del.iter().for_each(|key| {
             let _ = self.unregister(key);
         });

src-tauri/src/core/manager.rs

@@ -0,0 +1,82 @@
+use std::borrow::Cow;
+
+/// 给clash内核的tun模式授权
+#[cfg(any(target_os = "macos", target_os = "linux"))]
+pub fn grant_permission(core: String) -> anyhow::Result<()> {
+    use std::process::Command;
+    use tauri::utils::platform::current_exe;
+
+    let path = current_exe()?.with_file_name(core).canonicalize()?;
+    let path = path.display().to_string();
+
+    log::debug!("grant_permission path: {path}");
+
+    #[cfg(target_os = "macos")]
+    let output = {
+        // the path of clash /Applications/Clash Verge.app/Contents/MacOS/clash
+        // https://apple.stackexchange.com/questions/82967/problem-with-empty-spaces-when-executing-shell-commands-in-applescript
+        // let path = escape(&path);
+        let path = path.replace(' ', "\\\\ ");
+        let shell = format!("chown root:admin {path}\nchmod +sx {path}");
+        let command = format!(r#"do shell script "{shell}" with administrator privileges"#);
+        Command::new("osascript")
+            .args(vec!["-e", &command])
+            .output()?
+    };
+
+    #[cfg(target_os = "linux")]
+    let output = {
+        let path = path.replace(' ', "\\ "); // 避免路径中有空格
+        let shell = format!("setcap cap_net_bind_service,cap_net_admin=+ep {path}");
+
+        let sudo = match Command::new("which").arg("pkexec").output() {
+            Ok(output) => {
+                if output.stdout.is_empty() {
+                    "sudo"
+                } else {
+                    "pkexec"
+                }
+            }
+            Err(_) => "sudo",
+        };
+
+        Command::new(sudo).arg("sh").arg("-c").arg(shell).output()?
+    };
+
+    if output.status.success() {
+        Ok(())
+    } else {
+        let stderr = std::str::from_utf8(&output.stderr).unwrap_or("");
+        anyhow::bail!("{stderr}");
+    }
+}
+
+#[allow(unused)]
+pub fn escape<'a>(text: &'a str) -> Cow<'a, str> {
+    let bytes = text.as_bytes();
+
+    let mut owned = None;
+
+    for pos in 0..bytes.len() {
+        let special = match bytes[pos] {
+            b' ' => Some(b' '),
+            _ => None,
+        };
+        if let Some(s) = special {
+            if owned.is_none() {
+                owned = Some(bytes[0..pos].to_owned());
+            }
+            owned.as_mut().unwrap().push(b'\\');
+            owned.as_mut().unwrap().push(b'\\');
+            owned.as_mut().unwrap().push(s);
+        } else if let Some(owned) = owned.as_mut() {
+            owned.push(bytes[pos]);
+        }
+    }
+
+    if let Some(owned) = owned {
+        unsafe { Cow::Owned(String::from_utf8_unchecked(owned)) }
+    } else {
+        unsafe { Cow::Borrowed(std::str::from_utf8_unchecked(bytes)) }
+    }
+}

src-tauri/src/core/mod.rs

@@ -3,9 +3,11 @@ mod core;
 pub mod handle;
 pub mod hotkey;
 pub mod logger;
+pub mod manager;
 pub mod sysopt;
 pub mod timer;
 pub mod tray;
 pub mod win_service;
+pub mod win_uwp;
 
 pub use self::core::*;

src-tauri/src/core/sysopt.rs

@@ -23,11 +23,12 @@ 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/8,::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 {
@@ -43,7 +44,10 @@ impl Sysopt {
 
     /// init the sysproxy
     pub fn init_sysproxy(&self) -> Result<()> {
-        let port = { Config::clash().latest().get_mixed_port() };
+        let port = Config::verge()
+            .latest()
+            .verge_mixed_port
+            .unwrap_or(Config::clash().data().get_mixed_port());
 
         let (enable, bypass) = {
             let verge = Config::verge();
@@ -171,6 +175,24 @@ impl Sysopt {
         })()
         .unwrap_or(app_path);
 
+        // fix #403
+        #[cfg(target_os = "linux")]
+        let app_path = {
+            use crate::core::handle::Handle;
+            use tauri::Manager;
+
+            let handle = Handle::global();
+            match handle.app_handle.lock().as_ref() {
+                Some(app_handle) => {
+                    let appimage = app_handle.env().appimage;
+                    appimage
+                        .and_then(|p| p.to_str().map(|s| s.to_string()))
+                        .unwrap_or(app_path)
+                }
+                None => app_path,
+            }
+        };
+
         let auto = AutoLaunchBuilder::new()
             .set_app_name(app_name)
             .set_app_path(&app_path)
@@ -182,13 +204,22 @@ impl Sysopt {
             return Ok(());
         }
 
-        // macos每次启动都更新登录项，避免重复设置登录项
         #[cfg(target_os = "macos")]
-        let _ = auto.disable();
+        {
+            if enable && !auto.is_enabled().unwrap_or(false) {
+                // 避免重复设置登录项
+                let _ = auto.disable();
+                auto.enable()?;
+            } else if !enable {
+                let _ = auto.disable();
+            }
+        }
 
+        #[cfg(not(target_os = "macos"))]
         if enable {
             auto.enable()?;
         }
+
         *self.auto_launch.lock() = Some(auto);
 
         Ok(())
@@ -257,7 +288,12 @@ impl Sysopt {
 
                 log::debug!(target: "app", "try to guard the system proxy");
 
-                let port = { Config::clash().latest().get_mixed_port() };
+                let port = {
+                    Config::verge()
+                        .latest()
+                        .verge_mixed_port
+                        .unwrap_or(Config::clash().data().get_mixed_port())
+                };
 
                 let sysproxy = Sysproxy {
                     enable: true,

src-tauri/src/core/tray.rs

@@ -1,4 +1,4 @@
-use crate::{config::Config, feat, utils::resolve};
+use crate::{cmds, config::Config, feat, utils::resolve};
 use anyhow::Result;
 use tauri::{
     api, AppHandle, CustomMenuItem, Manager, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem,
@@ -13,53 +13,89 @@ impl Tray {
 
         let version = app_handle.package_info().version.to_string();
 
-        if zh {
-            SystemTrayMenu::new()
-                .add_item(CustomMenuItem::new("open_window", "打开面板"))
-                .add_native_item(SystemTrayMenuItem::Separator)
-                .add_item(CustomMenuItem::new("rule_mode", "规则模式"))
-                .add_item(CustomMenuItem::new("global_mode", "全局模式"))
-                .add_item(CustomMenuItem::new("direct_mode", "直连模式"))
-                .add_item(CustomMenuItem::new("script_mode", "脚本模式"))
-                .add_native_item(SystemTrayMenuItem::Separator)
-                .add_item(CustomMenuItem::new("system_proxy", "系统代理"))
-                .add_item(CustomMenuItem::new("tun_mode", "TUN 模式"))
-                .add_submenu(SystemTraySubmenu::new(
-                    "更多",
-                    SystemTrayMenu::new()
-                        .add_item(CustomMenuItem::new("restart_clash", "重启 Clash"))
-                        .add_item(CustomMenuItem::new("restart_app", "重启应用"))
-                        .add_item(
-                            CustomMenuItem::new("app_version", format!("Version {version}"))
-                                .disabled(),
-                        ),
-                ))
-                .add_native_item(SystemTrayMenuItem::Separator)
-                .add_item(CustomMenuItem::new("quit", "退出").accelerator("CmdOrControl+Q"))
-        } else {
-            SystemTrayMenu::new()
-                .add_item(CustomMenuItem::new("open_window", "Dashboard"))
-                .add_native_item(SystemTrayMenuItem::Separator)
-                .add_item(CustomMenuItem::new("rule_mode", "Rule Mode"))
-                .add_item(CustomMenuItem::new("global_mode", "Global Mode"))
-                .add_item(CustomMenuItem::new("direct_mode", "Direct Mode"))
-                .add_item(CustomMenuItem::new("script_mode", "Script Mode"))
-                .add_native_item(SystemTrayMenuItem::Separator)
-                .add_item(CustomMenuItem::new("system_proxy", "System Proxy"))
-                .add_item(CustomMenuItem::new("tun_mode", "Tun Mode"))
-                .add_submenu(SystemTraySubmenu::new(
-                    "More",
-                    SystemTrayMenu::new()
-                        .add_item(CustomMenuItem::new("restart_clash", "Restart Clash"))
-                        .add_item(CustomMenuItem::new("restart_app", "Restart App"))
-                        .add_item(
-                            CustomMenuItem::new("app_version", format!("Version {version}"))
-                                .disabled(),
-                        ),
-                ))
-                .add_native_item(SystemTrayMenuItem::Separator)
-                .add_item(CustomMenuItem::new("quit", "Quit").accelerator("CmdOrControl+Q"))
+        macro_rules! t {
+            ($en: expr, $zh: expr) => {
+                if zh {
+                    $zh
+                } else {
+                    $en
+                }
+            };
         }
+
+        SystemTrayMenu::new()
+            .add_item(CustomMenuItem::new(
+                "open_window",
+                t!("Dashboard", "打开面板"),
+            ))
+            .add_native_item(SystemTrayMenuItem::Separator)
+            .add_item(CustomMenuItem::new(
+                "rule_mode",
+                t!("Rule Mode", "规则模式"),
+            ))
+            .add_item(CustomMenuItem::new(
+                "global_mode",
+                t!("Global Mode", "全局模式"),
+            ))
+            .add_item(CustomMenuItem::new(
+                "direct_mode",
+                t!("Direct Mode", "直连模式"),
+            ))
+            .add_item(CustomMenuItem::new(
+                "script_mode",
+                t!("Script Mode", "脚本模式"),
+            ))
+            .add_native_item(SystemTrayMenuItem::Separator)
+            .add_item(CustomMenuItem::new(
+                "system_proxy",
+                t!("System Proxy", "系统代理"),
+            ))
+            .add_item(CustomMenuItem::new("tun_mode", t!("TUN Mode", "Tun 模式")))
+            .add_item(CustomMenuItem::new(
+                "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", "打开目录"),
+                SystemTrayMenu::new()
+                    .add_item(CustomMenuItem::new(
+                        "open_app_dir",
+                        t!("App Dir", "应用目录"),
+                    ))
+                    .add_item(CustomMenuItem::new(
+                        "open_core_dir",
+                        t!("Core Dir", "内核目录"),
+                    ))
+                    .add_item(CustomMenuItem::new(
+                        "open_logs_dir",
+                        t!("Logs Dir", "日志目录"),
+                    )),
+            ))
+            .add_submenu(SystemTraySubmenu::new(
+                t!("More", "更多"),
+                SystemTrayMenu::new()
+                    .add_item(CustomMenuItem::new(
+                        "restart_clash",
+                        t!("Restart Clash", "重启 Clash"),
+                    ))
+                    .add_item(CustomMenuItem::new(
+                        "restart_app",
+                        t!("Restart App", "重启应用"),
+                    ))
+                    .add_item(
+                        CustomMenuItem::new("app_version", format!("Version {version}")).disabled(),
+                    ),
+            ))
+            .add_native_item(SystemTrayMenuItem::Separator)
+            .add_item(CustomMenuItem::new("quit", t!("Quit", "退出")).accelerator("CmdOrControl+Q"))
     }
 
     pub fn update_systray(app_handle: &AppHandle) -> Result<()> {
@@ -71,6 +107,20 @@ impl Tray {
     }
 
     pub fn update_part(app_handle: &AppHandle) -> Result<()> {
+        let zh = { Config::verge().latest().language == Some("zh".into()) };
+
+        let version = app_handle.package_info().version.to_string();
+
+        macro_rules! t {
+            ($en: expr, $zh: expr) => {
+                if zh {
+                    $zh
+                } else {
+                    $en
+                }
+            };
+        }
+
         let mode = {
             Config::clash()
                 .latest()
@@ -93,14 +143,58 @@ impl Tray {
         let system_proxy = verge.enable_system_proxy.as_ref().unwrap_or(&false);
         let tun_mode = verge.enable_tun_mode.as_ref().unwrap_or(&false);
 
+        #[cfg(target_os = "windows")]
+        {
+            let mut indication_icon = if *system_proxy {
+                include_bytes!("../../icons/win-tray-icon-activated.png").to_vec()
+            } else {
+                include_bytes!("../../icons/win-tray-icon.png").to_vec()
+            };
+
+            if *tun_mode {
+                indication_icon = include_bytes!("../../icons/win-tray-icon-tun.png").to_vec();
+            }
+
+            let _ = tray.set_icon(tauri::Icon::Raw(indication_icon));
+        }
+
         let _ = tray.get_item("system_proxy").set_selected(*system_proxy);
         let _ = tray.get_item("tun_mode").set_selected(*tun_mode);
 
+        let switch_map = {
+            let mut map = std::collections::HashMap::new();
+            map.insert(true, "on");
+            map.insert(false, "off");
+            map
+        };
+
+        #[cfg(not(target_os = "linux"))]
+        let _ = tray.set_tooltip(&format!(
+            "Clash Verge {version}\n{}: {}\n{}: {}",
+            t!("System Proxy", "系统代理"),
+            switch_map[system_proxy],
+            t!("TUN Mode", "Tun 模式"),
+            switch_map[tun_mode]
+        ));
+
         Ok(())
     }
 
+    pub fn on_left_click(app_handle: &AppHandle) {
+        let tray_event = { Config::verge().latest().tray_event.clone() };
+        let tray_event = tray_event.unwrap_or("main_window".into());
+        match tray_event.as_str() {
+            "system_proxy" => feat::toggle_system_proxy(),
+            "tun_mode" => feat::toggle_tun_mode(),
+            "main_window" => resolve::create_window(app_handle),
+            _ => {}
+        }
+    }
+
     pub fn on_system_tray_event(app_handle: &AppHandle, event: SystemTrayEvent) {
         match event {
+            #[cfg(not(target_os = "linux"))]
+            SystemTrayEvent::LeftClick { .. } => Tray::on_left_click(app_handle),
             SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
                 mode @ ("rule_mode" | "global_mode" | "direct_mode" | "script_mode") => {
                     let mode = &mode[0..mode.len() - 5];
@@ -110,9 +204,19 @@ impl Tray {
                 "open_window" => resolve::create_window(app_handle),
                 "system_proxy" => feat::toggle_system_proxy(),
                 "tun_mode" => feat::toggle_tun_mode(),
+                "copy_env_sh" => feat::copy_clash_env(app_handle, "sh"),
+                #[cfg(target_os = "windows")]
+                "copy_env_cmd" => feat::copy_clash_env(app_handle, "cmd"),
+                #[cfg(target_os = "windows")]
+                "copy_env_ps" => feat::copy_clash_env(app_handle, "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()),
                 "restart_clash" => feat::restart_clash_core(),
                 "restart_app" => api::process::restart(&app_handle.env()),
                 "quit" => {
+                    let _ = resolve::save_window_size_position(app_handle, true);
+
                     resolve::resolve_reset();
                     api::process::kill_children();
                     app_handle.exit(0);
@@ -120,10 +224,6 @@ impl Tray {
                 }
                 _ => {}
             },
-            #[cfg(target_os = "windows")]
-            SystemTrayEvent::LeftClick { .. } => {
-                resolve::create_window(app_handle);
-            }
             _ => {}
         }
     }

src-tauri/src/core/win_uwp.rs

@@ -0,0 +1,27 @@
+#![cfg(target_os = "windows")]
+
+use crate::utils::dirs;
+use anyhow::{bail, Result};
+use deelevate::{PrivilegeLevel, Token};
+use runas::Command as RunasCommand;
+use std::process::Command as StdCommand;
+
+pub async fn invoke_uwptools() -> Result<()> {
+    let binary_path = dirs::service_path()?;
+    let tool_path = binary_path.with_file_name("enableLoopback.exe");
+
+    if !tool_path.exists() {
+        bail!("enableLoopback exe not found");
+    }
+
+    let token = Token::with_current_process()?;
+    let level = token.privilege_level()?;
+
+   match level {
+        PrivilegeLevel::NotPrivileged => RunasCommand::new(tool_path).status()?,
+        _ => StdCommand::new(tool_path)
+            .status()?,
+    };
+
+    Ok(())
+}

src-tauri/src/enhance/chain.rs

@@ -21,6 +21,7 @@ pub enum ChainType {
 pub enum ChainSupport {
     Clash,
     ClashMeta,
+    ClashMetaAlpha,
     All,
 }
 
@@ -60,9 +61,19 @@ impl ChainItem {
         let hy_alpn =
             ChainItem::to_script("verge_hy_alpn", include_str!("./builtin/meta_hy_alpn.js"));
 
+        // meta 的一些处理
+        let meta_guard_alpha =
+            ChainItem::to_script("verge_meta_guard", include_str!("./builtin/meta_guard.js"));
+
+        // meta 1.13.2 alpn string 转 数组
+        let hy_alpn_alpha =
+            ChainItem::to_script("verge_hy_alpn", include_str!("./builtin/meta_hy_alpn.js"));
+
         vec![
             (ChainSupport::ClashMeta, hy_alpn),
             (ChainSupport::ClashMeta, meta_guard),
+            (ChainSupport::ClashMetaAlpha, hy_alpn_alpha),
+            (ChainSupport::ClashMetaAlpha, meta_guard_alpha),
         ]
     }
 
@@ -81,6 +92,7 @@ impl ChainSupport {
                 (ChainSupport::All, _) => true,
                 (ChainSupport::Clash, "clash") => true,
                 (ChainSupport::ClashMeta, "clash-meta") => true,
+                (ChainSupport::ClashMetaAlpha, "clash-meta-alpha") => true,
                 _ => false,
             },
             None => true,

src-tauri/src/enhance/field.rs

@@ -1,33 +1,35 @@
 use serde_yaml::{Mapping, Value};
+use std::collections::HashSet;
 
 pub const HANDLE_FIELDS: [&str; 9] = [
+    "mode",
     "port",
     "socks-port",
     "mixed-port",
-    "mode",
-    "ipv6",
-    "log-level",
     "allow-lan",
-    "external-controller",
+    "log-level",
+    "ipv6",
     "secret",
+    "external-controller",
 ];
 
 pub const DEFAULT_FIELDS: [&str; 5] = [
     "proxies",
     "proxy-groups",
-    "rules",
     "proxy-providers",
+    "rules",
     "rule-providers",
 ];
 
-pub const OTHERS_FIELDS: [&str; 21] = [
-    "tun",
+pub const OTHERS_FIELDS: [&str; 31] = [
     "dns",
+    "tun",
     "ebpf",
     "hosts",
     "script",
     "profile",
     "payload",
+    "tunnels",
     "auto-redir",
     "experimental",
     "interface-name",
@@ -38,10 +40,19 @@ pub const OTHERS_FIELDS: [&str; 21] = [
     "external-ui",
     "bind-address",
     "authentication",
-    "sniffer",        // meta
-    "sub-rules",      // meta
-    "geodata-mode",   // meta
-    "tcp-concurrent", // meta
+    "tls",                       // meta
+    "sniffer",                   // meta
+    "geox-url",                  // meta
+    "listeners",                 // meta
+    "sub-rules",                 // meta
+    "geodata-mode",              // meta
+    "unified-delay",             // meta
+    "tcp-concurrent",            // meta
+    "enable-process",            // meta
+    "find-process-mode",         // meta
+    "skip-auth-prefixes",        // meta
+    "external-controller-tls",   // meta
+    "global-client-fingerprint", // meta
 ];
 
 pub fn use_clash_fields() -> Vec<String> {
@@ -64,7 +75,11 @@ pub fn use_valid_fields(mut valid: Vec<String>) -> Vec<String> {
         .collect()
 }
 
-pub fn use_filter(config: Mapping, filter: &Vec<String>) -> Mapping {
+pub fn use_filter(config: Mapping, filter: &Vec<String>, enable: bool) -> Mapping {
+    if !enable {
+        return config;
+    }
+
     let mut ret = Mapping::new();
 
     for (key, value) in config.into_iter() {
@@ -90,7 +105,7 @@ pub fn use_lowercase(config: Mapping) -> Mapping {
     ret
 }
 
-pub fn use_sort(config: Mapping) -> Mapping {
+pub fn use_sort(config: Mapping, enable_filter: bool) -> Mapping {
     let mut ret = Mapping::new();
 
     HANDLE_FIELDS
@@ -103,6 +118,28 @@ pub fn use_sort(config: Mapping) -> Mapping {
                 ret.insert(key, value.clone());
             });
         });
+
+    if !enable_filter {
+        let supported_keys: HashSet<&str> = HANDLE_FIELDS
+            .into_iter()
+            .chain(OTHERS_FIELDS)
+            .chain(DEFAULT_FIELDS)
+            .collect();
+
+        let config_keys: HashSet<&str> = config
+            .keys()
+            .filter_map(|e| e.as_str())
+            .into_iter()
+            .collect();
+
+        config_keys.difference(&supported_keys).for_each(|&key| {
+            let key = Value::from(key);
+            config.get(&key).map(|value| {
+                ret.insert(key, value.clone());
+            });
+        });
+    }
+
     ret
 }
 

src-tauri/src/enhance/merge.rs

@@ -1,7 +1,6 @@
 use super::{use_filter, use_lowercase};
 use serde_yaml::{self, Mapping, Sequence, Value};
 
-#[allow(unused)]
 const MERGE_FIELDS: [&str; 6] = [
     "prepend-rules",
     "append-rules",
@@ -20,7 +19,7 @@ pub fn use_merge(merge: Mapping, mut config: Mapping) -> Mapping {
         });
 
     let merge_list = MERGE_FIELDS.iter().map(|s| s.to_string());
-    let merge = use_filter(merge, &merge_list.collect());
+    let merge = use_filter(merge, &merge_list.collect(), true);
 
     ["rules", "proxies", "proxy-groups"]
         .iter()

src-tauri/src/enhance/mod.rs

@@ -18,18 +18,19 @@ use std::collections::HashSet;
 type ResultLog = Vec<(String, String)>;
 
 /// Enhance mode
-/// 返回最终配置、该配置包含的键、和script执行的结果
+/// 返回最终订阅、该订阅包含的键、和script执行的结果
 pub fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
-    // config.yaml 的配置
+    // config.yaml 的订阅
     let clash_config = { Config::clash().latest().0.clone() };
 
-    let (clash_core, tun_mode, enable_builtin) = {
+    let (clash_core, enable_tun, enable_builtin, enable_filter) = {
         let verge = Config::verge();
         let verge = verge.latest();
         (
             verge.clash_core.clone(),
-            verge.enable_tun_mode.clone(),
-            verge.enable_builtin_enhanced.clone(),
+            verge.enable_tun_mode.clone().unwrap_or(false),
+            verge.enable_builtin_enhanced.clone().unwrap_or(true),
+            verge.enable_clash_fields.clone().unwrap_or(true),
         )
     };
 
@@ -58,14 +59,14 @@ pub fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
     let mut exists_keys = use_keys(&config); // 保存出现过的keys
 
     let valid = use_valid_fields(valid);
-    config = use_filter(config, &valid);
+    config = use_filter(config, &valid, enable_filter);
 
     // 处理用户的profile
     chain.into_iter().for_each(|item| match item.data {
         ChainType::Merge(merge) => {
             exists_keys.extend(use_keys(&merge));
             config = use_merge(merge, config.to_owned());
-            config = use_filter(config.to_owned(), &valid);
+            config = use_filter(config.to_owned(), &valid, enable_filter);
         }
         ChainType::Script(script) => {
             let mut logs = vec![];
@@ -73,7 +74,7 @@ pub fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
             match use_script(script, config.to_owned()) {
                 Ok((res_config, res_logs)) => {
                     exists_keys.extend(use_keys(&res_config));
-                    config = use_filter(res_config, &valid);
+                    config = use_filter(res_config, &valid, enable_filter);
                     logs.extend(res_logs);
                 }
                 Err(err) => logs.push(("exception".into(), err.to_string())),
@@ -91,7 +92,7 @@ pub fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
     let clash_fields = use_clash_fields();
 
     // 内建脚本最后跑
-    if enable_builtin.unwrap_or(true) {
+    if enable_builtin {
         ChainItem::builtin()
             .into_iter()
             .filter(|(s, _)| s.is_support(clash_core.as_ref()))
@@ -102,7 +103,7 @@ pub fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
                 match item.data {
                     ChainType::Script(script) => match use_script(script, config.to_owned()) {
                         Ok((res_config, _)) => {
-                            config = use_filter(res_config, &clash_fields);
+                            config = use_filter(res_config, &clash_fields, enable_filter);
                         }
                         Err(err) => {
                             log::error!(target: "app", "builtin script error `{err}`");
@@ -113,9 +114,9 @@ pub fn enhance() -> (Mapping, Vec<String>, HashMap<String, ResultLog>) {
             });
     }
 
-    config = use_filter(config, &clash_fields);
-    config = use_tun(config, tun_mode.unwrap_or(false));
-    config = use_sort(config);
+    config = use_filter(config, &clash_fields, enable_filter);
+    config = use_tun(config, enable_tun);
+    config = use_sort(config, enable_filter);
 
     let mut exists_set = HashSet::new();
     exists_set.extend(exists_keys.into_iter().filter(|s| clash_fields.contains(s)));

src-tauri/src/enhance/script.rs

@@ -3,7 +3,7 @@ use anyhow::Result;
 use serde_yaml::Mapping;
 
 pub fn use_script(script: String, config: Mapping) -> Result<(Mapping, Vec<(String, String)>)> {
-    use rquickjs::{Context, Func, Runtime};
+    use rquickjs::{function::Func, Context, Runtime};
     use std::sync::{Arc, Mutex};
 
     let runtime = Runtime::new().unwrap();

src-tauri/src/feat.rs

@@ -7,8 +7,19 @@
 use crate::config::*;
 use crate::core::*;
 use crate::log_err;
+use crate::utils::resolve;
 use anyhow::{bail, Result};
 use serde_yaml::{Mapping, Value};
+use tauri::{AppHandle, ClipboardManager};
+
+// 打开面板
+pub fn open_dashboard() {
+    let handle = handle::Handle::global();
+    let app_handle = handle.app_handle.lock();
+    if let Some(app_handle) = app_handle.as_ref() {
+        resolve::create_window(app_handle);
+    }
+}
 
 // 重启clash
 pub fn restart_clash_core() {
@@ -36,7 +47,7 @@ pub fn change_clash_mode(mode: String) {
 
         match clash_api::patch_configs(&mapping).await {
             Ok(_) => {
-                // 更新配置
+                // 更新订阅
                 Config::clash().data().patch_config(mapping);
 
                 if Config::clash().data().save_config().is_ok() {
@@ -145,14 +156,19 @@ pub fn disable_tun_mode() {
     });
 }
 
-/// 修改clash的配置
+/// 修改clash的订阅
 pub async fn patch_clash(patch: Mapping) -> Result<()> {
     Config::clash().draft().patch_config(patch.clone());
 
     match {
         let mixed_port = patch.get("mixed-port");
-        if mixed_port.is_some() {
-            let changed = mixed_port != Config::clash().data().0.get("mixed-port");
+        let enable_random_port = Config::verge().latest().enable_random_port.unwrap_or(false);
+        if mixed_port.is_some() && !enable_random_port {
+            let changed = mixed_port.clone().unwrap()
+                != Config::verge()
+                    .latest()
+                    .verge_mixed_port
+                    .unwrap_or(Config::clash().data().get_mixed_port());
             // 检查端口占用
             if changed {
                 if let Some(port) = mixed_port.clone().unwrap().as_u64() {
@@ -164,7 +180,7 @@ pub async fn patch_clash(patch: Mapping) -> Result<()> {
             }
         };
 
-        // 激活配置
+        // 激活订阅
         if mixed_port.is_some()
             || patch.get("secret").is_some()
             || patch.get("external-controller").is_some()
@@ -183,6 +199,8 @@ pub async fn patch_clash(patch: Mapping) -> Result<()> {
             log_err!(handle::Handle::update_systray_part());
         }
 
+        Config::runtime().latest().patch_config(patch);
+
         <Result<()>>::Ok(())
     } {
         Ok(()) => {
@@ -197,7 +215,7 @@ pub async fn patch_clash(patch: Mapping) -> Result<()> {
     }
 }
 
-/// 修改verge的配置
+/// 修改verge的订阅
 /// 一般都是一个个的修改
 pub async fn patch_verge(patch: IVerge) -> Result<()> {
     Config::verge().draft().patch_config(patch.clone());
@@ -265,7 +283,7 @@ pub async fn patch_verge(patch: IVerge) -> Result<()> {
 }
 
 /// 更新某个profile
-/// 如果更新当前配置就激活配置
+/// 如果更新当前订阅就激活订阅
 pub async fn update_profile(uid: String, option: Option<PrfOption>) -> Result<()> {
     let url_opt = {
         let profiles = Config::profiles();
@@ -303,7 +321,7 @@ pub async fn update_profile(uid: String, option: Option<PrfOption>) -> Result<()
     Ok(())
 }
 
-/// 更新配置
+/// 更新订阅
 async fn update_core_config() -> Result<()> {
     match CoreManager::global().update_config().await {
         Ok(_) => {
@@ -317,3 +335,23 @@ async fn update_core_config() -> Result<()> {
         }
     }
 }
+
+/// copy env variable
+pub fn copy_clash_env(app_handle: &AppHandle, option: &str) {
+    let port = { Config::verge().latest().verge_mixed_port.unwrap_or(7890) };
+    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 = app_handle.clipboard_manager();
+
+    match option {
+        "sh" => cliboard.write_text(sh).unwrap_or_default(),
+        "cmd" => cliboard.write_text(cmd).unwrap_or_default(),
+        "ps" => cliboard.write_text(ps).unwrap_or_default(),
+        _ => log::error!(target: "app", "copy_clash_env: Invalid option! {option}"),
+    };
+}

src-tauri/src/main.rs

@@ -33,8 +33,10 @@ fn main() -> std::io::Result<()> {
             cmds::open_app_dir,
             cmds::open_logs_dir,
             cmds::open_web_url,
+            cmds::open_core_dir,
             // cmds::kill_sidecar,
             cmds::restart_sidecar,
+            cmds::grant_permission,
             // clash
             cmds::get_clash_info,
             cmds::get_clash_logs,
@@ -44,6 +46,7 @@ fn main() -> std::io::Result<()> {
             cmds::get_runtime_yaml,
             cmds::get_runtime_exists,
             cmds::get_runtime_logs,
+            cmds::uwp::invoke_uwp_tool,
             // verge
             cmds::get_verge_config,
             cmds::patch_verge_config,
@@ -56,6 +59,7 @@ fn main() -> std::io::Result<()> {
             cmds::patch_profile,
             cmds::create_profile,
             cmds::import_profile,
+            cmds::reorder_profile,
             cmds::update_profile,
             cmds::delete_profile,
             cmds::read_profile_file,
@@ -64,6 +68,8 @@ fn main() -> std::io::Result<()> {
             cmds::service::check_service,
             cmds::service::install_service,
             cmds::service::uninstall_service,
+            // clash api
+            cmds::clash_api_get_proxy_delay
         ]);
 
     #[cfg(target_os = "macos")]
@@ -99,6 +105,10 @@ fn main() -> std::io::Result<()> {
             api::process::kill_children();
             app_handle.exit(0);
         }
+        tauri::RunEvent::Updater(tauri::UpdaterEvent::Downloaded) => {
+            resolve::resolve_reset();
+            api::process::kill_children();
+        }
         #[cfg(target_os = "macos")]
         tauri::RunEvent::WindowEvent { label, event, .. } => {
             use tauri::Manager;
@@ -107,6 +117,8 @@ fn main() -> std::io::Result<()> {
                 match event {
                     tauri::WindowEvent::CloseRequested { api, .. } => {
                         api.prevent_close();
+                        let _ = resolve::save_window_size_position(&app_handle, true);
+
                         app_handle.get_window("main").map(|win| {
                             let _ = win.hide();
                         });
@@ -115,6 +127,20 @@ fn main() -> std::io::Result<()> {
                 }
             }
         }
+        #[cfg(not(target_os = "macos"))]
+        tauri::RunEvent::WindowEvent { label, event, .. } => {
+            if label == "main" {
+                match event {
+                    tauri::WindowEvent::CloseRequested { .. } => {
+                        let _ = resolve::save_window_size_position(&app_handle, true);
+                    }
+                    tauri::WindowEvent::Moved(_) | tauri::WindowEvent::Resized(_) => {
+                        let _ = resolve::save_window_size_position(&app_handle, false);
+                    }
+                    _ => {}
+                }
+            }
+        }
         _ => {}
     });
 

src-tauri/src/utils/dirs.rs

@@ -1,14 +1,14 @@
 use anyhow::Result;
 use std::path::PathBuf;
 use tauri::{
-    api::path::{home_dir, resource_dir},
+    api::path::{data_dir, resource_dir},
     Env, PackageInfo,
 };
 
 #[cfg(not(feature = "verge-dev"))]
-static APP_DIR: &str = "clash-verge";
+static APP_ID: &str = "io.github.clash-verge-rev.clash-verge-rev";
 #[cfg(feature = "verge-dev")]
-static APP_DIR: &str = "clash-verge-dev";
+static APP_ID: &str = "io.github.clash-verge-rev.clash-verge-rev.dev";
 
 static CLASH_CONFIG: &str = "config.yaml";
 static VERGE_CONFIG: &str = "verge.yaml";
@@ -20,7 +20,7 @@ static mut RESOURCE_DIR: Option<PathBuf> = None;
 #[allow(unused)]
 static mut PORTABLE_FLAG: bool = false;
 
-pub static mut APP_VERSION: &str = "v1.1.2";
+pub static mut APP_VERSION: &str = "v1.2.0";
 
 /// initialize portable flag
 #[cfg(target_os = "windows")]
@@ -47,25 +47,23 @@ pub fn app_home_dir() -> Result<PathBuf> {
         use tauri::utils::platform::current_exe;
 
         if !PORTABLE_FLAG {
-            Ok(home_dir()
+            Ok(data_dir()
                 .ok_or(anyhow::anyhow!("failed to get app home dir"))?
-                .join(".config")
-                .join(APP_DIR))
+                .join(APP_ID))
         } else {
             let app_exe = current_exe()?;
             let app_exe = dunce::canonicalize(app_exe)?;
             let app_dir = app_exe
                 .parent()
                 .ok_or(anyhow::anyhow!("failed to get the portable app dir"))?;
-            Ok(PathBuf::from(app_dir).join(".config").join(APP_DIR))
+            Ok(PathBuf::from(app_dir).join(".config").join(APP_ID))
         }
     }
 
     #[cfg(not(target_os = "windows"))]
-    Ok(home_dir()
+    Ok(data_dir()
         .ok_or(anyhow::anyhow!("failed to get the app home dir"))?
-        .join(".config")
-        .join(APP_DIR))
+        .join("io.github.clash_verge_rev.clash_verge_rev"))
 }
 
 /// get the resources dir
@@ -107,6 +105,7 @@ pub fn profiles_path() -> Result<PathBuf> {
     Ok(app_home_dir()?.join(PROFILE_YAML))
 }
 
+#[allow(unused)]
 pub fn app_res_dir() -> Result<PathBuf> {
     unsafe {
         Ok(RESOURCE_DIR

src-tauri/src/utils/help.rs

@@ -2,7 +2,11 @@ use anyhow::{anyhow, bail, Context, Result};
 use nanoid::nanoid;
 use serde::{de::DeserializeOwned, Serialize};
 use serde_yaml::{Mapping, Value};
-use std::{fs, path::PathBuf, process::Command, str::FromStr};
+use std::{fs, path::PathBuf, str::FromStr};
+use tauri::{
+    api::shell::{open, Program},
+    Manager,
+};
 
 /// read data from yaml as struct T
 pub fn read_yaml<T: DeserializeOwned>(path: &PathBuf) -> Result<T> {
@@ -11,19 +15,21 @@ pub fn read_yaml<T: DeserializeOwned>(path: &PathBuf) -> Result<T> {
     }
 
     let yaml_str = fs::read_to_string(&path)
-        .context(format!("failed to read the file \"{}\"", path.display()))?;
+        .with_context(|| format!("failed to read the file \"{}\"", path.display()))?;
 
-    serde_yaml::from_str::<T>(&yaml_str).context(format!(
-        "failed to read the file with yaml format \"{}\"",
-        path.display()
-    ))
+    serde_yaml::from_str::<T>(&yaml_str).with_context(|| {
+        format!(
+            "failed to read the file with yaml format \"{}\"",
+            path.display()
+        )
+    })
 }
 
 /// read mapping from yaml fix #165
 pub fn read_merge_mapping(path: &PathBuf) -> Result<Mapping> {
     let mut val: Value = read_yaml(path)?;
     val.apply_merge()
-        .context(format!("failed to apply merge \"{}\"", path.display()))?;
+        .with_context(|| format!("failed to apply merge \"{}\"", path.display()))?;
 
     Ok(val
         .as_mapping()
@@ -45,7 +51,8 @@ pub fn save_yaml<T: Serialize>(path: &PathBuf, data: &T, prefix: Option<&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}\""))
+    fs::write(path, yaml_str.as_bytes())
+        .with_context(|| format!("failed to save file \"{path_str}\""))
 }
 
 const ALPHABET: [char; 62] = [
@@ -78,30 +85,21 @@ pub fn parse_str<T: FromStr>(target: &str, key: &str) -> Option<T> {
 
 /// open file
 /// use vscode by default
-pub fn open_file(path: PathBuf) -> Result<()> {
-    // use vscode first
-    if let Ok(code) = which::which("code") {
-        let mut command = Command::new(&code);
+pub fn open_file(app: tauri::AppHandle, path: PathBuf) -> Result<()> {
+    #[cfg(target_os = "macos")]
+    let code = "Visual Studio Code";
+    #[cfg(not(target_os = "macos"))]
+    let code = "code";
 
-        #[cfg(target_os = "windows")]
-        {
-            use std::os::windows::process::CommandExt;
-            if let Err(err) = command.creation_flags(0x08000000).arg(&path).spawn() {
-                log::error!(target: "app", "failed to open with VScode `{err}`");
-                open::that(path)?;
-            }
+    let _ = match Program::from_str(code) {
+        Ok(code) => open(&app.shell_scope(), &path.to_string_lossy(), Some(code)),
+        Err(err) => {
+            log::error!(target: "app", "Can't find VScode `{err}`");
+            // default open
+            open(&app.shell_scope(), &path.to_string_lossy(), None)
         }
+    };
 
-        #[cfg(not(target_os = "windows"))]
-        if let Err(err) = command.arg(&path).spawn() {
-            log::error!(target: "app", "failed to open with VScode `{err}`");
-            open::that(path)?;
-        }
-
-        return Ok(());
-    }
-
-    open::that(path)?;
     Ok(())
 }
 
@@ -127,6 +125,15 @@ macro_rules! log_err {
     };
 }
 
+#[macro_export]
+macro_rules! trace_err {
+    ($result: expr, $err_str: expr) => {
+        if let Err(err) = $result {
+            log::trace!(target: "app", "{}, err {}", $err_str, err);
+        }
+    }
+}
+
 /// wrap the anyhow error
 /// transform the error to String
 #[macro_export]

src-tauri/src/utils/init.rs

@@ -1,13 +1,14 @@
 use crate::config::*;
 use crate::utils::{dirs, help};
 use anyhow::Result;
-use chrono::Local;
+use chrono::{Local, TimeZone};
 use log::LevelFilter;
 use log4rs::append::console::ConsoleAppender;
 use log4rs::append::file::FileAppender;
-use log4rs::config::{Appender, Config, Logger, Root};
+use log4rs::config::{Appender, Logger, Root};
 use log4rs::encode::pattern::PatternEncoder;
-use std::fs;
+use std::fs::{self, DirEntry};
+use std::str::FromStr;
 use tauri::PackageInfo;
 
 /// initialize this instance's log file
@@ -17,42 +18,126 @@ fn init_log() -> Result<()> {
         let _ = fs::create_dir_all(&log_dir);
     }
 
+    let log_level = Config::verge().data().get_log_level();
+    if log_level == LevelFilter::Off {
+        return Ok(());
+    }
+
     let local_time = Local::now().format("%Y-%m-%d-%H%M").to_string();
     let log_file = format!("{}.log", local_time);
     let log_file = log_dir.join(log_file);
 
-    #[cfg(feature = "verge-dev")]
-    let time_format = "{d(%Y-%m-%d %H:%M:%S)} {l} - {M} {m}{n}";
-    #[cfg(not(feature = "verge-dev"))]
-    let time_format = "{d(%Y-%m-%d %H:%M:%S)} {l} - {m}{n}";
+    let log_pattern = match log_level {
+        LevelFilter::Trace => "{d(%Y-%m-%d %H:%M:%S)} {l} [{M}] - {m}{n}",
+        _ => "{d(%Y-%m-%d %H:%M:%S)} {l} - {m}{n}",
+    };
 
-    let encode = Box::new(PatternEncoder::new(time_format));
+    let encode = Box::new(PatternEncoder::new(log_pattern));
 
     let stdout = ConsoleAppender::builder().encoder(encode.clone()).build();
     let tofile = FileAppender::builder().encoder(encode).build(log_file)?;
 
-    #[cfg(feature = "verge-dev")]
-    let level = LevelFilter::Debug;
-    #[cfg(not(feature = "verge-dev"))]
-    let level = LevelFilter::Info;
+    let mut logger_builder = Logger::builder();
+    let mut root_builder = Root::builder();
 
-    let config = Config::builder()
+    let log_more = log_level == LevelFilter::Trace || log_level == LevelFilter::Debug;
+
+    #[cfg(feature = "verge-dev")]
+    {
+        logger_builder = logger_builder.appenders(["file", "stdout"]);
+        if log_more {
+            root_builder = root_builder.appenders(["file", "stdout"]);
+        } else {
+            root_builder = root_builder.appenders(["stdout"]);
+        }
+    }
+    #[cfg(not(feature = "verge-dev"))]
+    {
+        logger_builder = logger_builder.appenders(["file"]);
+        if log_more {
+            root_builder = root_builder.appenders(["file"]);
+        }
+    }
+
+    let (config, _) = log4rs::config::Config::builder()
         .appender(Appender::builder().build("stdout", Box::new(stdout)))
         .appender(Appender::builder().build("file", Box::new(tofile)))
-        .logger(
-            Logger::builder()
-                .appenders(["file", "stdout"])
-                .additive(false)
-                .build("app", level),
-        )
-        .build(Root::builder().appender("stdout").build(LevelFilter::Info))?;
+        .logger(logger_builder.additive(false).build("app", log_level))
+        .build_lossy(root_builder.build(log_level));
 
     log4rs::init_config(config)?;
 
     Ok(())
 }
 
-/// Initialize all the files from resources
+/// 删除log文件
+pub fn delete_log() -> Result<()> {
+    let log_dir = dirs::app_logs_dir()?;
+    if !log_dir.exists() {
+        return Ok(());
+    }
+
+    let auto_log_clean = {
+        let verge = Config::verge();
+        let verge = verge.data();
+        verge.auto_log_clean.clone().unwrap_or(0)
+    };
+
+    let day = match auto_log_clean {
+        1 => 7,
+        2 => 30,
+        3 => 90,
+        _ => return Ok(()),
+    };
+
+    log::debug!(target: "app", "try to delete log files, day: {day}");
+
+    // %Y-%m-%d to NaiveDateTime
+    let parse_time_str = |s: &str| {
+        let sa: Vec<&str> = s.split('-').collect();
+        if sa.len() != 4 {
+            return Err(anyhow::anyhow!("invalid time str"));
+        }
+
+        let year = i32::from_str(sa[0])?;
+        let month = u32::from_str(sa[1])?;
+        let day = u32::from_str(sa[2])?;
+        let time = chrono::NaiveDate::from_ymd_opt(year, month, day)
+            .ok_or(anyhow::anyhow!("invalid time str"))?
+            .and_hms_opt(0, 0, 0)
+            .ok_or(anyhow::anyhow!("invalid time str"))?;
+        Ok(time)
+    };
+
+    let process_file = |file: DirEntry| -> Result<()> {
+        let file_name = file.file_name();
+        let file_name = file_name.to_str().unwrap_or_default();
+
+        if file_name.ends_with(".log") {
+            let now = Local::now();
+            let created_time = parse_time_str(&file_name[0..file_name.len() - 4])?;
+            let file_time = Local.from_local_datetime(&created_time).single().ok_or(anyhow::anyhow!("invalid local datetime"))?;
+
+            let duration = now.signed_duration_since(file_time);
+            if duration.num_days() > day {
+                let file_path = file.path();
+                let _ = fs::remove_file(file_path);
+                log::info!(target: "app", "delete log file: {file_name}");
+            }
+        }
+        Ok(())
+    };
+
+    for file in fs::read_dir(&log_dir)? {
+        if let Ok(file) = file {
+            let _ = process_file(file);
+        }
+    }
+    Ok(())
+}
+
+/// Initialize all the config files
+/// before tauri setup
 pub fn init_config() -> Result<()> {
     #[cfg(target_os = "windows")]
     unsafe {
@@ -60,6 +145,7 @@ pub fn init_config() -> Result<()> {
     }
 
     let _ = init_log();
+    let _ = delete_log();
 
     crate::log_err!(dirs::app_home_dir().map(|app_dir| {
         if !app_dir.exists() {
@@ -75,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(())
     }));
@@ -97,7 +183,8 @@ pub fn init_config() -> Result<()> {
     Ok(())
 }
 
-/// initialize app
+/// initialize app resources
+/// after tauri setup
 pub fn init_resources(package_info: &PackageInfo) -> Result<()> {
     let app_dir = dirs::app_home_dir()?;
     let res_dir = dirs::app_resources_dir(package_info)?;
@@ -109,13 +196,47 @@ pub fn init_resources(package_info: &PackageInfo) -> Result<()> {
         let _ = fs::create_dir_all(&res_dir);
     }
 
+    #[cfg(target_os = "windows")]
+    let file_list = ["Country.mmdb", "geoip.dat", "geosite.dat"];
+    #[cfg(not(target_os = "windows"))]
+    let file_list = ["Country.mmdb", "geoip.dat", "geosite.dat"];
+
     // copy the resource file
-    for file in ["Country.mmdb", "geoip.dat", "geosite.dat", "wintun.dll"].iter() {
+    // if the source file is newer than the destination file, copy it over
+    for file in file_list.iter() {
         let src_path = res_dir.join(file);
-        let target_path = app_dir.join(file);
-        if src_path.exists() {
-            let _ = fs::copy(src_path, target_path);
+        let dest_path = app_dir.join(file);
+
+        let handle_copy = || {
+            match fs::copy(&src_path, &dest_path) {
+                Ok(_) => log::debug!(target: "app", "resources copied '{file}'"),
+                Err(err) => {
+                    log::error!(target: "app", "failed to copy resources '{file}', {err}")
+                }
+            };
+        };
+
+        if src_path.exists() && !dest_path.exists() {
+            handle_copy();
+            continue;
         }
+
+        let src_modified = fs::metadata(&src_path).and_then(|m| m.modified());
+        let dest_modified = fs::metadata(&dest_path).and_then(|m| m.modified());
+
+        match (src_modified, dest_modified) {
+            (Ok(src_modified), Ok(dest_modified)) => {
+                if src_modified > dest_modified {
+                    handle_copy();
+                } else {
+                    log::debug!(target: "app", "skipping resource copy '{file}'");
+                }
+            }
+            _ => {
+                log::debug!(target: "app", "failed to get modified '{file}'");
+                handle_copy();
+            }
+        };
     }
 
     Ok(())

src-tauri/src/utils/resolve.rs

@@ -1,8 +1,28 @@
-use crate::config::Config;
-use crate::log_err;
-use crate::{core::*, utils::init, utils::server};
+use crate::config::IVerge;
+use crate::{config::Config, core::*, utils::init, utils::server};
+use crate::{log_err, trace_err};
+use anyhow::Result;
+use serde_yaml::Mapping;
+use std::net::TcpListener;
 use tauri::{App, AppHandle, Manager};
 
+pub fn find_unused_port() -> Result<u16> {
+    match TcpListener::bind("127.0.0.1:0") {
+        Ok(listener) => {
+            let port = listener.local_addr()?.port();
+            Ok(port)
+        }
+        Err(_) => {
+            let port = Config::verge()
+                .latest()
+                .verge_mixed_port
+                .unwrap_or(Config::clash().data().get_mixed_port());
+            log::warn!(target: "app", "use default port: {}", port);
+            Ok(port)
+        }
+    }
+}
+
 /// handle something when start app
 pub fn resolve_setup(app: &mut App) {
     #[cfg(target_os = "macos")]
@@ -12,13 +32,45 @@ pub fn resolve_setup(app: &mut App) {
 
     log_err!(init::init_resources(app.package_info()));
 
+    // 处理随机端口
+    let enable_random_port = Config::verge().latest().enable_random_port.unwrap_or(false);
+
+    let mut port = Config::verge()
+        .latest()
+        .verge_mixed_port
+        .unwrap_or(Config::clash().data().get_mixed_port());
+
+    if enable_random_port {
+        port = find_unused_port().unwrap_or(
+            Config::verge()
+                .latest()
+                .verge_mixed_port
+                .unwrap_or(Config::clash().data().get_mixed_port()),
+        );
+    }
+
+    Config::verge().data().patch_config(IVerge {
+        verge_mixed_port: Some(port),
+        ..IVerge::default()
+    });
+    let _ = Config::verge().data().save_file();
+    let mut mapping = Mapping::new();
+    mapping.insert("mixed-port".into(), port.into());
+    Config::clash().data().patch_config(mapping);
+    let _ = Config::clash().data().save_config();
+
     // 启动核心
+    log::trace!("init config");
     log_err!(Config::init_config());
+
+    log::trace!("launch core");
     log_err!(CoreManager::global().init());
 
     // setup a simple http server for singleton
+    log::trace!("launch embed server");
     server::embed_server(app.app_handle());
 
+    log::trace!("init system tray");
     log_err!(tray::Tray::update_systray(&app.app_handle()));
 
     let silent_start = { Config::verge().data().enable_silent_start.clone() };
@@ -43,22 +95,47 @@ pub fn resolve_reset() {
 /// create main window
 pub fn create_window(app_handle: &AppHandle) {
     if let Some(window) = app_handle.get_window("main") {
-        let _ = window.unminimize();
-        let _ = window.show();
-        let _ = window.set_focus();
+        trace_err!(window.unminimize(), "set win unminimize");
+        trace_err!(window.show(), "set win visible");
+        trace_err!(window.set_focus(), "set win focus");
         return;
     }
 
-    let builder = tauri::window::WindowBuilder::new(
+    let mut builder = tauri::window::WindowBuilder::new(
         app_handle,
         "main".to_string(),
         tauri::WindowUrl::App("index.html".into()),
     )
     .title("Clash Verge")
-    .center()
     .fullscreen(false)
     .min_inner_size(600.0, 520.0);
 
+    match Config::verge().latest().window_size_position.clone() {
+        Some(size_pos) if size_pos.len() == 4 => {
+            let size = (size_pos[0], size_pos[1]);
+            let pos = (size_pos[2], size_pos[3]);
+            let w = size.0.clamp(600.0, f64::INFINITY);
+            let h = size.1.clamp(520.0, f64::INFINITY);
+            builder = builder.inner_size(w, h).position(pos.0, pos.1);
+        }
+        _ => {
+            #[cfg(target_os = "windows")]
+            {
+                builder = builder.inner_size(800.0, 636.0).center();
+            }
+
+            #[cfg(target_os = "macos")]
+            {
+                builder = builder.inner_size(800.0, 642.0).center();
+            }
+
+            #[cfg(target_os = "linux")]
+            {
+                builder = builder.inner_size(800.0, 642.0).center();
+            }
+        }
+    };
+
     #[cfg(target_os = "windows")]
     {
         use std::time::Duration;
@@ -68,38 +145,82 @@ pub fn create_window(app_handle: &AppHandle) {
         match builder
             .decorations(false)
             .transparent(true)
-            .inner_size(800.0, 636.0)
             .visible(false)
             .build()
         {
-            Ok(_) => {
-                let app_handle = app_handle.clone();
+            Ok(win) => {
+                log::trace!("try to calculate the monitor size");
+                let center = (|| -> Result<bool> {
+                    let mut center = false;
+                    let monitor = win.current_monitor()?.ok_or(anyhow::anyhow!(""))?;
+                    let size = monitor.size();
+                    let pos = win.outer_position()?;
 
-                if let Some(window) = app_handle.get_window("main") {
-                    let _ = set_shadow(&window, true);
+                    if pos.x < -400
+                        || pos.x > (size.width - 200).try_into()?
+                        || pos.y < -200
+                        || pos.y > (size.height - 200).try_into()?
+                    {
+                        center = true;
+                    }
+                    Ok(center)
+                })();
+
+                if center.unwrap_or(true) {
+                    trace_err!(win.center(), "set win center");
                 }
 
+                log::trace!("try to create window");
+                let app_handle = app_handle.clone();
+
+                // 加点延迟避免界面闪一下
                 tauri::async_runtime::spawn(async move {
-                    sleep(Duration::from_secs(1)).await;
+                    sleep(Duration::from_millis(888)).await;
 
                     if let Some(window) = app_handle.get_window("main") {
-                        let _ = window.show();
-                        let _ = window.unminimize();
-                        let _ = window.set_focus();
+                        trace_err!(set_shadow(&window, true), "set win shadow");
+                        trace_err!(window.show(), "set win visible");
+                        trace_err!(window.unminimize(), "set win unminimize");
+                        trace_err!(window.set_focus(), "set win focus");
+                    } else {
+                        log::error!(target: "app", "failed to create window, get_window is None")
                     }
                 });
             }
-            Err(err) => log::error!(target: "app", "{err}"),
+            Err(err) => log::error!(target: "app", "failed to create window, {err}"),
         }
     }
 
     #[cfg(target_os = "macos")]
-    crate::log_err!(builder.decorations(true).inner_size(800.0, 642.0).build());
+    crate::log_err!(builder
+        .decorations(true)
+        .hidden_title(true)
+        .title_bar_style(tauri::TitleBarStyle::Overlay)
+        .build());
 
     #[cfg(target_os = "linux")]
-    crate::log_err!(builder
-        .decorations(false)
-        .transparent(true)
-        .inner_size(800.0, 636.0)
-        .build());
+    crate::log_err!(builder.decorations(true).transparent(false).build());
+}
+
+/// save window size and position
+pub fn save_window_size_position(app_handle: &AppHandle, save_to_file: bool) -> Result<()> {
+    let win = app_handle
+        .get_window("main")
+        .ok_or(anyhow::anyhow!("failed to get window"))?;
+
+    let scale = win.scale_factor()?;
+    let size = win.inner_size()?;
+    let size = size.to_logical::<f64>(scale);
+    let pos = win.outer_position()?;
+    let pos = pos.to_logical::<f64>(scale);
+
+    let verge = Config::verge();
+    let mut verge = verge.latest();
+    verge.window_size_position = Some(vec![size.width, size.height, pos.x, pos.y]);
+
+    if save_to_file {
+        verge.save_file()?;
+    }
+
+    Ok(())
 }

src-tauri/tauri.conf.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "productName": "Clash Verge",
-    "version": "1.2.0"
+    "version": "1.4.3"
   },
   "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": {
@@ -16,8 +16,8 @@
     },
     "bundle": {
       "active": true,
-      "targets": "all",
-      "identifier": "top.gydi.clashverge",
+      "targets": ["deb", "appimage", "nsis", "app", "dmg", "updater"],
+      "identifier": "io.github.clash-verge-rev.clash-verge-rev",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",
@@ -26,13 +26,13 @@
         "icons/icon.ico"
       ],
       "resources": ["resources"],
-      "externalBin": ["sidecar/clash", "sidecar/clash-meta"],
+      "externalBin": ["sidecar/clash-meta", "sidecar/clash-meta-alpha"],
       "copyright": "© 2022 zzzgydi All Rights Reserved",
       "category": "DeveloperTool",
-      "shortDescription": "A Clash GUI based on tauri.",
-      "longDescription": "A Clash GUI based on tauri.",
+      "shortDescription": "A Clash Meta GUI based on tauri.",
+      "longDescription": "A Clash Meta GUI based on tauri.",
       "deb": {
-        "depends": []
+        "depends": ["openssl"]
       },
       "macOS": {
         "frameworks": [],
@@ -45,19 +45,26 @@
         "certificateThumbprint": null,
         "digestAlgorithm": "sha256",
         "timestampUrl": "",
-        "wix": {
-          "language": ["zh-CN", "en-US"]
+        "webviewInstallMode": {
+          "type": "embedBootstrapper",
+          "silent": true
+        },
+        "nsis": {
+          "displayLanguageSelector": true,
+          "installerIcon": "icons/icon.ico",
+          "languages": ["SimpChinese", "English"],
+          "license": "../LICENSE"
         }
       }
     },
     "updater": {
       "active": true,
       "endpoints": [
-        "https://github.com/zzzgydi/clash-verge/releases/download/updater/update.json",
-        "https://hub.fastgit.xyz/zzzgydi/clash-verge/releases/download/updater/update-proxy.json"
+        "https://mirror.ghproxy.com/https://github.com/clash-verge-rev/clash-verge-rev/releases/download/updater/update-proxy.json",
+        "https://github.com/clash-verge-rev/clash-verge-rev/releases/download/updater/update.json"
       ],
       "dialog": false,
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDExNUFBNTBBN0FDNEFBRTUKUldUbHFzUjZDcVZhRVRJM25NS3NkSFlFVElxUkNZMzZ6bHUwRVJjb2F3alJXVzRaeDdSaTA2YWYK"
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEQyOEMyRjBCQkVGOUJEREYKUldUZnZmbStDeStNMHU5Mmo1N24xQXZwSVRYbXA2NUpzZE5oVzlqeS9Bc0t6RVV4MmtwVjBZaHgK"
     },
     "allowlist": {
       "shell": {
@@ -71,6 +78,9 @@
       },
       "globalShortcut": {
         "all": true
+      },
+      "clipboard": {
+        "all": true
       }
     },
     "windows": [],

src/assets/styles/font.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "twemoji mozilla";
+  src: url("../fonts/Twemoji.Mozilla.ttf");
+}

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: 8px;
 }
 
 ::selection {
@@ -33,8 +36,13 @@ body {
   background-color: var(--scroller-color);
 }
 
+body {
+  overflow: hidden;
+}
+
 @import "./layout.scss";
 @import "./page.scss";
+@import "./font.scss";
 
 @media (prefers-color-scheme: dark) {
   :root {

src/assets/styles/layout.scss

@@ -5,12 +5,13 @@
   overflow: hidden;
 
   &__left {
-    flex: 1 0 25%;
+    flex: 1 0 15%;
     display: flex;
     height: 100%;
     max-width: 225px;
     min-width: 125px;
     padding: 16px 0 8px;
+    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 {
@@ -50,7 +57,7 @@
     .the-menu {
       flex: 1 1 80%;
       overflow-y: auto;
-      margin-bottom: 8px;
+      margin-bottom: 0px;
     }
 
     .the-traffic {
@@ -66,6 +73,7 @@
     position: relative;
     flex: 1 1 75%;
     height: 100%;
+    background-color: var(--background-color-alpha);
 
     .the-bar {
       position: absolute;
@@ -83,7 +91,7 @@
       top: 0;
       left: 0;
       right: 2px;
-      bottom: 10px;
+      bottom: 0px;
     }
   }
 }
@@ -104,3 +112,14 @@
     }
   }
 }
+
+.macos {
+  &.layout {
+    .layout__left {
+      padding-top: 24px;
+    }
+    .layout__right .the-content {
+      top: 20px;
+    }
+  }
+}

src/assets/styles/page.scss

@@ -6,30 +6,36 @@
 
   > header {
     flex: 0 0 58px;
-    width: 90%;
+    width: 100%;
     // max-width: 850px;
     margin: 0 auto;
-    padding-right: 4px;
+    padding-right: 8px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 
-  > section {
-    position: relative;
-    flex: 1 1 100%;
-    width: 100%;
+  .base-container {
     height: 100%;
-    overflow: auto;
-    padding: 8px 0;
-    box-sizing: border-box;
-    scrollbar-gutter: stable;
+    overflow: hidden;
+    border-radius: var(--border-radius);
 
-    .base-content {
-      width: 90%;
-      // max-width: 850px;
-      margin: 0 auto;
+    > section {
+      position: relative;
+      flex: 1 1 100%;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 5px 5px;
+      box-sizing: border-box;
+      scrollbar-gutter: stable;
+
+      .base-content {
+        width: 100%;
+        // max-width: 850px;
+        margin: 0 auto;
+      }
     }
   }
 }

src/components/base/base-dialog.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, useImperativeHandle, useState } from "react";
+import { ReactNode } from "react";
 import {
   Button,
   Dialog,
@@ -8,6 +8,7 @@ import {
   type SxProps,
   type Theme,
 } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
 
 interface Props {
   title: ReactNode;
@@ -18,6 +19,8 @@ interface Props {
   disableCancel?: boolean;
   disableFooter?: boolean;
   contentSx?: SxProps<Theme>;
+  children?: ReactNode;
+  loading?: boolean;
   onOk?: () => void;
   onCancel?: () => void;
   onClose?: () => void;
@@ -39,6 +42,7 @@ export const BaseDialog: React.FC<Props> = (props) => {
     disableCancel,
     disableOk,
     disableFooter,
+    loading,
   } = props;
 
   return (
@@ -55,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-error-boundary.tsx

@@ -1,15 +1,26 @@
+import { ReactNode } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 
 function ErrorFallback({ error }: FallbackProps) {
   return (
-    <div role="alert">
-      <p>Something went wrong:(</p>
+    <div role="alert" style={{ padding: 16 }}>
+      <h4>Something went wrong:(</h4>
+
       <pre>{error.message}</pre>
+
+      <details title="Error Stack">
+        <summary>Error Stack</summary>
+        <pre>{error.stack}</pre>
+      </details>
     </div>
   );
 }
 
-export const BaseErrorBoundary: React.FC = (props) => {
+interface Props {
+  children?: ReactNode;
+}
+
+export const BaseErrorBoundary = (props: Props) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       {props.children}

src/components/base/base-notice.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { ReactNode, useState } from "react";
 import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
 import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
@@ -77,13 +77,14 @@ export const Notice: NoticeInstance = (props) => {
 
   const container = document.createElement("div");
   parent.appendChild(container);
+  const root = createRoot(container);
 
   const onUnmount = () => {
-    const result = ReactDOM.unmountComponentAtNode(container);
-    if (result && parent) setTimeout(() => parent.removeChild(container), 500);
+    root.unmount();
+    if (parent) setTimeout(() => parent.removeChild(container), 500);
   };
 
-  ReactDOM.render(<NoticeInner {...props} onClose={onUnmount} />, container);
+  root.render(<NoticeInner {...props} onClose={onUnmount} />);
 };
 
 (["info", "error", "success"] as const).forEach((type) => {

src/components/base/base-page.tsx

@@ -1,15 +1,20 @@
-import React from "react";
-import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { Typography, alpha } from "@mui/material";
 import { BaseErrorBoundary } from "./base-error-boundary";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 interface Props {
   title?: React.ReactNode; // the page title
   header?: React.ReactNode; // something behind title
   contentStyle?: React.CSSProperties;
+  children?: ReactNode;
 }
 
 export const BasePage: React.FC<Props> = (props) => {
   const { title, header, contentStyle, children } = props;
+  const { theme } = useCustomTheme();
+
+  const isDark = theme.palette.mode === "dark";
 
   return (
     <BaseErrorBoundary>
@@ -22,11 +27,22 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
-        <section>
-          <div className="base-content" style={contentStyle} data-windrag>
-            {children}
-          </div>
-        </section>
+        <div
+          className="base-container"
+          style={{ backgroundColor: isDark ? "#090909" : "#ffffff" }}
+        >
+          <section
+            style={{
+              backgroundColor: isDark
+                ? alpha(theme.palette.primary.main, 0.1)
+                : "",
+            }}
+          >
+            <div className="base-content" style={contentStyle} data-windrag>
+              {children}
+            </div>
+          </section>
+        </div>
       </div>
     </BaseErrorBoundary>
   );

src/components/connection/connection-detail.tsx

@@ -0,0 +1,104 @@
+import dayjs from "dayjs";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useLockFn } from "ahooks";
+import { Box, Button, Snackbar } from "@mui/material";
+import { deleteConnection } from "@/services/api";
+import { truncateStr } from "@/utils/truncate-str";
+import parseTraffic from "@/utils/parse-traffic";
+
+export interface ConnectionDetailRef {
+  open: (detail: IConnectionsItem) => void;
+}
+
+export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
+  (props, ref) => {
+    const [open, setOpen] = useState(false);
+    const [detail, setDetail] = useState<IConnectionsItem>(null!);
+
+    useImperativeHandle(ref, () => ({
+      open: (detail: IConnectionsItem) => {
+        if (open) return;
+        setOpen(true);
+        setDetail(detail);
+      },
+    }));
+
+    const onClose = () => setOpen(false);
+
+    return (
+      <Snackbar
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        open={open}
+        onClose={onClose}
+        message={
+          detail ? (
+            <InnerConnectionDetail data={detail} onClose={onClose} />
+          ) : null
+        }
+      />
+    );
+  }
+);
+
+interface InnerProps {
+  data: IConnectionsItem;
+  onClose?: () => void;
+}
+
+const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
+  const { metadata, rulePayload } = data;
+  const chains = [...data.chains].reverse().join(" / ");
+  const rule = rulePayload ? `${data.rule}(${rulePayload})` : data.rule;
+  const host = metadata.host
+    ? `${metadata.host}:${metadata.destinationPort}`
+    : `${metadata.destinationIP}:${metadata.destinationPort}`;
+
+  const information = [
+    { label: "Host", value: host },
+    { label: "Download", value: parseTraffic(data.download).join(" ") },
+    { label: "Upload", value: parseTraffic(data.upload).join(" ") },
+    {
+      label: "DL Speed",
+      value: parseTraffic(data.curDownload ?? -1).join(" ") + "/s",
+    },
+    {
+      label: "UL Speed",
+      value: parseTraffic(data.curUpload ?? -1).join(" ") + "/s",
+    },
+    { label: "Chains", value: chains },
+    { label: "Rule", value: rule },
+    {
+      label: "Process",
+      value: truncateStr(metadata.process || metadata.processPath),
+    },
+    { label: "Time", value: dayjs(data.start).fromNow() },
+    { label: "Source", value: `${metadata.sourceIP}:${metadata.sourcePort}` },
+    { label: "Destination IP", value: metadata.destinationIP },
+    { label: "Type", value: `${metadata.type}(${metadata.network})` },
+  ];
+
+  const onDelete = useLockFn(async () => deleteConnection(data.id));
+
+  return (
+    <Box sx={{ userSelect: "text" }}>
+      {information.map((each) => (
+        <div key={each.label}>
+          <b>{each.label}</b>: <span>{each.value}</span>
+        </div>
+      ))}
+
+      <Box sx={{ textAlign: "right" }}>
+        <Button
+          variant="contained"
+          title="Close Connection"
+          onClick={() => {
+            onDelete();
+            onClose?.();
+          }}
+        >
+          Close
+        </Button>
+      </Box>
+    </Box>
+  );
+};

src/components/connection/connection-item.tsx

@@ -24,10 +24,11 @@ const Tag = styled("span")(({ theme }) => ({
 
 interface Props {
   value: IConnectionsItem;
+  onShowDetail?: () => void;
 }
 
-const ConnectionItem = (props: Props) => {
-  const { value } = props;
+export const ConnectionItem = (props: Props) => {
+  const { value, onShowDetail } = props;
 
   const { id, metadata, chains, start, curUpload, curDownload } = value;
 
@@ -44,8 +45,9 @@ const ConnectionItem = (props: Props) => {
       }
     >
       <ListItemText
-        sx={{ userSelect: "text" }}
+        sx={{ userSelect: "text", cursor: "pointer" }}
         primary={metadata.host || metadata.destinationIP}
+        onClick={onShowDetail}
         secondary={
           <Box sx={{ display: "flex", flexWrap: "wrap" }}>
             <Tag sx={{ textTransform: "uppercase", color: "success" }}>
@@ -56,7 +58,7 @@ const ConnectionItem = (props: Props) => {
 
             {!!metadata.process && <Tag>{metadata.process}</Tag>}
 
-            {chains.length > 0 && <Tag>{chains[value.chains.length - 1]}</Tag>}
+            {chains?.length > 0 && <Tag>{chains[value.chains.length - 1]}</Tag>}
 
             <Tag>{dayjs(start).fromNow()}</Tag>
 
@@ -71,5 +73,3 @@ const ConnectionItem = (props: Props) => {
     </ListItem>
   );
 };
-
-export default ConnectionItem;

src/components/connection/connection-table.tsx

@@ -1,32 +1,29 @@
 import dayjs from "dayjs";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { truncateStr } from "@/utils/truncate-str";
 import parseTraffic from "@/utils/parse-traffic";
 
 interface Props {
   connections: IConnectionsItem[];
+  onShowDetail: (data: IConnectionsItem) => void;
 }
 
-const ConnectionTable = (props: Props) => {
-  const { connections } = props;
+export const ConnectionTable = (props: Props) => {
+  const { connections, onShowDetail } = props;
+
+  const [columnVisible, setColumnVisible] = useState<
+    Partial<Record<keyof IConnectionsItem, boolean>>
+  >({});
 
   const columns: GridColDef[] = [
-    {
-      field: "host",
-      headerName: "Host",
-      flex: 200,
-      minWidth: 200,
-      resizable: false,
-      disableColumnMenu: true,
-    },
+    { field: "host", headerName: "Host", flex: 220, minWidth: 220 },
     {
       field: "download",
       headerName: "Download",
       width: 88,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) => parseTraffic(params.value).join(" "),
     },
     {
       field: "upload",
@@ -34,18 +31,13 @@ const ConnectionTable = (props: Props) => {
       width: 88,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) => parseTraffic(params.value).join(" "),
     },
     {
       field: "dlSpeed",
       headerName: "DL Speed",
-      align: "right",
       width: 88,
+      align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) =>
-        parseTraffic(params.value).join(" ") + "/s",
     },
     {
       field: "ulSpeed",
@@ -53,55 +45,26 @@ const ConnectionTable = (props: Props) => {
       width: 88,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params: any) =>
-        parseTraffic(params.value).join(" ") + "/s",
-    },
-    {
-      field: "chains",
-      headerName: "Chains",
-      width: 360,
-      disableColumnMenu: true,
-    },
-    {
-      field: "rule",
-      headerName: "Rule",
-      width: 225,
-      disableColumnMenu: true,
-    },
-    {
-      field: "process",
-      headerName: "Process",
-      width: 120,
-      disableColumnMenu: true,
     },
+    { field: "chains", headerName: "Chains", flex: 360, minWidth: 360 },
+    { field: "rule", headerName: "Rule", flex: 300, minWidth: 250 },
+    { field: "process", headerName: "Process", flex: 480, minWidth: 480 },
     {
       field: "time",
       headerName: "Time",
-      width: 120,
+      flex: 120,
+      minWidth: 100,
       align: "right",
       headerAlign: "right",
-      disableColumnMenu: true,
-      valueFormatter: (params) => dayjs(params.value).fromNow(),
-    },
-    {
-      field: "source",
-      headerName: "Source",
-      width: 150,
-      disableColumnMenu: true,
     },
+    { field: "source", headerName: "Source", flex: 200, minWidth: 130 },
     {
       field: "destinationIP",
       headerName: "Destination IP",
-      width: 125,
-      disableColumnMenu: true,
-    },
-    {
-      field: "type",
-      headerName: "Type",
-      width: 160,
-      disableColumnMenu: true,
+      flex: 200,
+      minWidth: 130,
     },
+    { field: "type", headerName: "Type", flex: 160, minWidth: 100 },
   ];
 
   const connRows = useMemo(() => {
@@ -115,30 +78,33 @@ const ConnectionTable = (props: Props) => {
         host: metadata.host
           ? `${metadata.host}:${metadata.destinationPort}`
           : `${metadata.destinationIP}:${metadata.destinationPort}`,
-        download: each.download,
-        upload: each.upload,
-        dlSpeed: each.curDownload,
-        ulSpeed: each.curUpload,
+        download: parseTraffic(each.download).join(" "),
+        upload: parseTraffic(each.upload).join(" "),
+        dlSpeed: parseTraffic(each.curDownload).join(" ") + "/s",
+        ulSpeed: parseTraffic(each.curUpload).join(" ") + "/s",
         chains,
         rule,
-        process: metadata.process || metadata.processPath,
-        time: each.start,
+        process: truncateStr(metadata.process || metadata.processPath),
+        time: dayjs(each.start).fromNow(),
         source: `${metadata.sourceIP}:${metadata.sourcePort}`,
         destinationIP: metadata.destinationIP,
         type: `${metadata.type}(${metadata.network})`,
+
+        connectionData: each,
       };
     });
   }, [connections]);
 
   return (
     <DataGrid
+      hideFooter
       rows={connRows}
       columns={columns}
+      onRowClick={(e) => onShowDetail(e.row.connectionData)}
       density="compact"
       sx={{ border: "none", "div:focus": { outline: "none !important" } }}
-      hideFooter
+      columnVisibilityModel={columnVisible}
+      onColumnVisibilityModelChange={(e) => setColumnVisible(e)}
     />
   );
 };
-
-export default ConnectionTable;

src/components/layout/layout-control.tsx

@@ -6,7 +6,7 @@ import {
   HorizontalRuleRounded,
 } from "@mui/icons-material";
 
-const LayoutControl = () => {
+export const LayoutControl = () => {
   const minWidth = 40;
 
   return (
@@ -37,5 +37,3 @@ const LayoutControl = () => {
     </>
   );
 };
-
-export default LayoutControl;

src/components/layout/layout-item.tsx

@@ -2,7 +2,7 @@ import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
 import type { LinkProps } from "react-router-dom";
 
-const LayoutItem = (props: LinkProps) => {
+export const LayoutItem = (props: LinkProps) => {
   const { to, children } = props;
 
   const resolved = useResolvedPath(to);
@@ -10,12 +10,14 @@ const LayoutItem = (props: LinkProps) => {
   const navigate = useNavigate();
 
   return (
-    <ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto" }}>
+    <ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto", padding: "1px 0px" }}>
       <ListItemButton
         selected={!!match}
         sx={[
           {
-            borderRadius: 2,
+            borderRadius: 3,
+            marginLeft: 1,
+            marginRight: 1,
             textAlign: "center",
             "& .MuiListItemText-primary": { color: "text.secondary" },
           },
@@ -40,5 +42,3 @@ const LayoutItem = (props: LinkProps) => {
     </ListItem>
   );
 };
-
-export default LayoutItem;

src/components/layout/layout-traffic.tsx

@@ -1,56 +1,90 @@
 import { useEffect, useRef, useState } from "react";
 import { Box, Typography } from "@mui/material";
-import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
+import {
+  ArrowDownward,
+  ArrowUpward,
+  MemoryOutlined,
+} from "@mui/icons-material";
 import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
 import { TrafficGraph, type TrafficRef } from "./traffic-graph";
 import { useLogSetup } from "./use-log-setup";
+import { useVisibility } from "@/hooks/use-visibility";
+import { useWebsocket } from "@/hooks/use-websocket";
 import parseTraffic from "@/utils/parse-traffic";
 
 // setup the traffic
-const LayoutTraffic = () => {
+export const LayoutTraffic = () => {
   const { clashInfo } = useClashInfo();
+  const { verge } = useVerge();
 
   // whether hide traffic graph
-  const { verge } = useVerge();
   const trafficGraph = verge?.traffic_graph ?? true;
 
   const trafficRef = useRef<TrafficRef>(null);
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
+  const [memory, setMemory] = useState({ inuse: 0 });
+  const pageVisible = useVisibility();
 
   // setup log ws during layout
   useLogSetup();
 
+  const { connect, disconnect } = useWebsocket((event) => {
+    const data = JSON.parse(event.data) as ITrafficItem;
+    trafficRef.current?.appendData(data);
+    setTraffic(data);
+  });
+
   useEffect(() => {
-    if (!clashInfo) return;
+    if (!clashInfo || !pageVisible) return;
 
     const { server = "", secret = "" } = clashInfo;
-    const ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);
+    connect(`ws://${server}/traffic?token=${encodeURIComponent(secret)}`);
 
-    ws.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data) as ITrafficItem;
-      trafficRef.current?.appendData(data);
-      setTraffic(data);
-    });
+    return () => {
+      disconnect();
+    };
+  }, [clashInfo, pageVisible]);
 
-    return () => ws?.close();
-  }, [clashInfo]);
+  /* --------- meta memory information --------- */
+  const isMetaCore = verge?.clash_core?.includes("clash-meta");
+  const displayMemory = isMetaCore && (verge?.enable_memory_usage ?? true);
+
+  const memoryWs = useWebsocket(
+    (event) => {
+      setMemory(JSON.parse(event.data));
+    },
+    { onError: () => setMemory({ inuse: 0 }) }
+  );
+
+  useEffect(() => {
+    if (!clashInfo || !pageVisible || !displayMemory) return;
+    const { server = "", secret = "" } = clashInfo;
+    memoryWs.connect(
+      `ws://${server}/memory?token=${encodeURIComponent(secret)}`
+    );
+    return () => memoryWs.disconnect();
+  }, [clashInfo, pageVisible, displayMemory]);
 
   const [up, upUnit] = parseTraffic(traffic.up);
   const [down, downUnit] = parseTraffic(traffic.down);
+  const [inuse, inuseUnit] = parseTraffic(memory.inuse);
 
+  const iconStyle: any = {
+    sx: { mr: "8px", fontSize: 16 },
+  };
   const valStyle: any = {
     component: "span",
     color: "primary",
     textAlign: "center",
-    sx: { flex: "1 1 54px", userSelect: "none" },
+    sx: { flex: "1 1 56px", userSelect: "none" },
   };
   const unitStyle: any = {
     component: "span",
     color: "grey.500",
     fontSize: "12px",
     textAlign: "right",
-    sx: { flex: "0 1 28px", userSelect: "none" },
+    sx: { flex: "0 1 27px", userSelect: "none" },
   };
 
   return (
@@ -59,31 +93,44 @@ const LayoutTraffic = () => {
       position="relative"
       onClick={trafficRef.current?.toggleStyle}
     >
-      {trafficGraph && (
+      {trafficGraph && pageVisible && (
         <div style={{ width: "100%", height: 60, marginBottom: 6 }}>
           <TrafficGraph ref={trafficRef} />
         </div>
       )}
 
-      <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
-        <ArrowUpward
-          fontSize="small"
-          color={+up > 0 ? "primary" : "disabled"}
-        />
-        <Typography {...valStyle}>{up}</Typography>
-        <Typography {...unitStyle}>{upUnit}/s</Typography>
-      </Box>
+      <Box display="flex" flexDirection="column" gap={0.75}>
+        <Box display="flex" alignItems="center" whiteSpace="nowrap">
+          <ArrowUpward
+            {...iconStyle}
+            color={+up > 0 ? "primary" : "disabled"}
+          />
+          <Typography {...valStyle}>{up}</Typography>
+          <Typography {...unitStyle}>{upUnit}/s</Typography>
+        </Box>
 
-      <Box display="flex" alignItems="center" whiteSpace="nowrap">
-        <ArrowDownward
-          fontSize="small"
-          color={+down > 0 ? "primary" : "disabled"}
-        />
-        <Typography {...valStyle}>{down}</Typography>
-        <Typography {...unitStyle}>{downUnit}/s</Typography>
+        <Box display="flex" alignItems="center" whiteSpace="nowrap">
+          <ArrowDownward
+            {...iconStyle}
+            color={+down > 0 ? "primary" : "disabled"}
+          />
+          <Typography {...valStyle}>{down}</Typography>
+          <Typography {...unitStyle}>{downUnit}/s</Typography>
+        </Box>
+
+        {displayMemory && (
+          <Box
+            display="flex"
+            alignItems="center"
+            whiteSpace="nowrap"
+            title="Memory Usage"
+          >
+            <MemoryOutlined {...iconStyle} color="disabled" />
+            <Typography {...valStyle}>{inuse}</Typography>
+            <Typography {...unitStyle}>{inuseUnit}</Typography>
+          </Box>
+        )}
       </Box>
     </Box>
   );
 };
-
-export default LayoutTraffic;

src/components/layout/update-button.tsx

@@ -1,17 +1,19 @@
 import useSWR from "swr";
-import { useState } from "react";
+import { useRef } from "react";
 import { Button } from "@mui/material";
 import { checkUpdate } from "@tauri-apps/api/updater";
-import UpdateDialog from "./update-dialog";
+import { UpdateViewer } from "../setting/mods/update-viewer";
+import { DialogRef } from "../base";
 
 interface Props {
   className?: string;
 }
 
-const UpdateButton = (props: Props) => {
+export const UpdateButton = (props: Props) => {
   const { className } = props;
 
-  const [dialogOpen, setDialogOpen] = useState(false);
+  const viewerRef = useRef<DialogRef>(null);
+
   const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
     errorRetryCount: 2,
     revalidateIfStale: false,
@@ -22,21 +24,17 @@ const UpdateButton = (props: Props) => {
 
   return (
     <>
+      <UpdateViewer ref={viewerRef} />
+
       <Button
         color="error"
         variant="contained"
         size="small"
         className={className}
-        onClick={() => setDialogOpen(true)}
+        onClick={() => viewerRef.current?.open()}
       >
         New
       </Button>
-
-      {dialogOpen && (
-        <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
-      )}
     </>
   );
 };
-
-export default UpdateButton;

src/components/layout/update-dialog.tsx

@@ -1,87 +0,0 @@
-import useSWR from "swr";
-import snarkdown from "snarkdown";
-import { useMemo } from "react";
-import { useRecoilState } from "recoil";
-import { useTranslation } from "react-i18next";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  styled,
-} from "@mui/material";
-import { relaunch } from "@tauri-apps/api/process";
-import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
-import { atomUpdateState } from "@/services/states";
-import { Notice } from "@/components/base";
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
-const UpdateLog = styled(Box)(() => ({
-  "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
-}));
-
-const UpdateDialog = (props: Props) => {
-  const { open, onClose } = props;
-  const { t } = useTranslation();
-  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
-    errorRetryCount: 2,
-    revalidateIfStale: false,
-    focusThrottleInterval: 36e5, // 1 hour
-  });
-
-  const [updateState, setUpdateState] = useRecoilState(atomUpdateState);
-
-  const onUpdate = async () => {
-    if (updateState) return;
-    setUpdateState(true);
-
-    try {
-      await installUpdate();
-      await relaunch();
-    } catch (err: any) {
-      Notice.error(err?.message || err.toString());
-    } finally {
-      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" }}>
-        <UpdateLog dangerouslySetInnerHTML={{ __html: parseContent }} />
-      </DialogContent>
-
-      <DialogActions>
-        <Button variant="outlined" onClick={onClose}>
-          {t("Cancel")}
-        </Button>
-        <Button
-          autoFocus
-          variant="contained"
-          disabled={updateState}
-          onClick={onUpdate}
-        >
-          {t("Update")}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default UpdateDialog;

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";
@@ -9,7 +9,7 @@ import { useVerge } from "@/hooks/use-verge";
 /**
  * custom theme
  */
-export default function useCustomTheme() {
+export const useCustomTheme = () => {
   const { verge } = useVerge();
   const { theme_mode, theme_setting } = verge ?? {};
   const [mode, setMode] = useRecoilState(atomThemeMode);
@@ -55,6 +55,9 @@ export default function useCustomTheme() {
             primary: setting.primary_text || dt.primary_text,
             secondary: setting.secondary_text || dt.secondary_text,
           },
+          background: {
+            paper: dt.background_color,
+          },
         },
         typography: {
           // todo
@@ -84,13 +87,19 @@ export default function useCustomTheme() {
     }
 
     // css
+    const backgroundColor = mode === "light" ? "#ffffff" : "#0B121C";
     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");
@@ -121,4 +130,4 @@ export default function useCustomTheme() {
   }, [mode, theme_setting]);
 
   return { theme };
-}
+};

src/components/layout/use-log-setup.ts

@@ -4,6 +4,7 @@ import { useRecoilValue, useSetRecoilState } from "recoil";
 import { getClashLogs } from "@/services/cmds";
 import { useClashInfo } from "@/hooks/use-clash";
 import { atomEnableLog, atomLogData } from "@/services/states";
+import { useWebsocket } from "@/hooks/use-websocket";
 
 const MAX_LOG_NUM = 1000;
 
@@ -14,23 +15,25 @@ export const useLogSetup = () => {
   const enableLog = useRecoilValue(atomEnableLog);
   const setLogData = useSetRecoilState(atomLogData);
 
+  const { connect, disconnect } = useWebsocket((event) => {
+    const data = JSON.parse(event.data) as ILogItem;
+    const time = dayjs().format("MM-DD HH:mm:ss");
+    setLogData((l) => {
+      if (l.length >= MAX_LOG_NUM) l.shift();
+      return [...l, { ...data, time }];
+    });
+  });
+
   useEffect(() => {
     if (!enableLog || !clashInfo) return;
 
     getClashLogs().then(setLogData);
 
     const { server = "", secret = "" } = clashInfo;
-    const ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+    connect(`ws://${server}/logs?token=${encodeURIComponent(secret)}`);
 
-    ws.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data) as ILogItem;
-      const time = dayjs().format("MM-DD HH:mm:ss");
-      setLogData((l) => {
-        if (l.length >= MAX_LOG_NUM) l.shift();
-        return [...l, { ...data, time }];
-      });
-    });
-
-    return () => ws?.close();
+    return () => {
+      disconnect();
+    };
   }, [clashInfo, enableLog]);
 };

src/components/log/log-item.tsx

@@ -1,13 +1,16 @@
 import { styled, Box } from "@mui/material";
 
-const Item = styled(Box)(({ theme }) => ({
+const Item = styled(Box)(({ theme: { palette, typography } }) => ({
   padding: "8px 0",
   margin: "0 12px",
   lineHeight: 1.35,
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${palette.divider}`,
   fontSize: "0.875rem",
+  fontFamily: typography.fontFamily,
   userSelect: "text",
-  "& .time": {},
+  "& .time": {
+    color: palette.text.secondary,
+  },
   "& .type": {
     display: "inline-block",
     marginLeft: 8,
@@ -16,7 +19,18 @@ const Item = styled(Box)(({ theme }) => ({
     textTransform: "uppercase",
     fontWeight: "600",
   },
-  "& .data": {},
+  '& .type[data-type="error"], & .type[data-type="err"]': {
+    color: palette.error.main,
+  },
+  '& .type[data-type="warning"], & .type[data-type="warn"]': {
+    color: palette.warning.main,
+  },
+  '& .type[data-type="info"], & .type[data-type="inf"]': {
+    color: palette.info.main,
+  },
+  "& .data": {
+    color: palette.text.primary,
+  },
 }));
 
 interface Props {
@@ -30,7 +44,9 @@ const LogItem = (props: Props) => {
     <Item>
       <div>
         <span className="time">{value.time}</span>
-        <span className="type">{value.type}</span>
+        <span className="type" data-type={value.type.toLowerCase()}>
+          {value.type}
+        </span>
       </div>
       <div>
         <span className="data">{value.payload}</span>

src/components/profile/editor-viewer.tsx

@@ -74,11 +74,11 @@ export const EditorViewer = (props: Props) => {
   });
 
   return (
-    <Dialog open={open} onClose={onClose}>
+    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
       <DialogTitle>{t("Edit File")}</DialogTitle>
 
-      <DialogContent sx={{ width: 520, pb: 1 }}>
-        <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
+      <DialogContent sx={{ width: "95%", pb: 1, userSelect: "text" }}>
+        <div style={{ width: "100%", height: "500px" }} ref={editorRef} />
       </DialogContent>
 
       <DialogActions>

src/components/profile/enhanced.tsx

@@ -1,93 +0,0 @@
-import useSWR from "swr";
-import { useLockFn } from "ahooks";
-import { Grid } from "@mui/material";
-import {
-  getProfiles,
-  deleteProfile,
-  patchProfilesConfig,
-  getRuntimeLogs,
-} from "@/services/cmds";
-import { Notice } from "@/components/base";
-import { ProfileMore } from "./profile-more";
-
-interface Props {
-  items: IProfileItem[];
-  chain: string[];
-}
-
-export const EnhancedMode = (props: Props) => {
-  const { items, chain } = props;
-
-  const { mutate: mutateProfiles } = useSWR("getProfiles", getProfiles);
-  const { data: chainLogs = {}, mutate: mutateLogs } = useSWR(
-    "getRuntimeLogs",
-    getRuntimeLogs
-  );
-
-  const onEnhanceEnable = useLockFn(async (uid: string) => {
-    if (chain.includes(uid)) return;
-
-    const newChain = [...chain, uid];
-    await patchProfilesConfig({ chain: newChain });
-    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
-    mutateLogs();
-  });
-
-  const onEnhanceDisable = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = chain.filter((i) => i !== uid);
-    await patchProfilesConfig({ chain: newChain });
-    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
-    mutateLogs();
-  });
-
-  const onEnhanceDelete = useLockFn(async (uid: string) => {
-    try {
-      await onEnhanceDisable(uid);
-      await deleteProfile(uid);
-      mutateProfiles();
-      mutateLogs();
-    } 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 patchProfilesConfig({ chain: newChain });
-    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
-    mutateLogs();
-  });
-
-  const onMoveEnd = useLockFn(async (uid: string) => {
-    if (!chain.includes(uid)) return;
-
-    const newChain = chain.filter((i) => i !== uid).concat([uid]);
-    await patchProfilesConfig({ chain: newChain });
-    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
-    mutateLogs();
-  });
-
-  return (
-    <Grid container spacing={{ xs: 2, lg: 3 }}>
-      {items.map((item) => (
-        <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
-          <ProfileMore
-            selected={!!chain.includes(item.uid)}
-            itemData={item}
-            enableNum={chain.length}
-            logInfo={chainLogs[item.uid]}
-            onEnable={() => onEnhanceEnable(item.uid)}
-            onDisable={() => onEnhanceDisable(item.uid)}
-            onDelete={() => onEnhanceDelete(item.uid)}
-            onMoveTop={() => onMoveTop(item.uid)}
-            onMoveEnd={() => onMoveEnd(item.uid)}
-          />
-        </Grid>
-      ))}
-    </Grid>
-  );
-};

src/components/profile/info-viewer.tsx

@@ -1,211 +0,0 @@
-import { mutate } from "swr";
-import { useEffect, useState } from "react";
-import { useLockFn, useSetState } from "ahooks";
-import { useTranslation } from "react-i18next";
-import {
-  Button,
-  Collapse,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControlLabel,
-  IconButton,
-  Switch,
-  TextField,
-} from "@mui/material";
-import { Settings } from "@mui/icons-material";
-import { patchProfile } from "@/services/cmds";
-import { version } from "@root/package.json";
-import { Notice } from "@/components/base";
-
-interface Props {
-  open: boolean;
-  itemData: IProfileItem;
-  onClose: () => void;
-}
-
-// edit the profile item
-// remote / local file / merge / script
-export const InfoViewer = (props: Props) => {
-  const { open, itemData, onClose } = props;
-
-  const { t } = useTranslation();
-  const [form, setForm] = useSetState({ ...itemData });
-  const [option, setOption] = useSetState(itemData.option ?? {});
-  const [showOpt, setShowOpt] = useState(!!itemData.option);
-
-  useEffect(() => {
-    if (itemData) {
-      const { option } = itemData;
-      setForm({ ...itemData });
-      setOption(option ?? {});
-      setShowOpt(
-        itemData.type === "remote" &&
-          (!!option?.user_agent ||
-            !!option?.update_interval ||
-            !!option?.self_proxy ||
-            !!option?.with_proxy)
-      );
-    }
-  }, [itemData]);
-
-  const onUpdate = useLockFn(async () => {
-    try {
-      const { uid } = itemData;
-      const { name, desc, url } = form;
-      const option_ =
-        itemData.type === "remote" || itemData.type === "local"
-          ? 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_ });
-      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 }}>{t("Edit Info")}</DialogTitle>
-
-      <DialogContent sx={{ width: 336, pb: 1 }}>
-        <TextField
-          {...textFieldProps}
-          disabled
-          label={t("Type")}
-          value={type}
-          sx={{ input: { textTransform: "capitalize" } }}
-        />
-
-        <TextField
-          {...textFieldProps}
-          autoFocus
-          label={t("Name")}
-          value={form.name}
-          onChange={(e) => setForm({ name: e.target.value })}
-          onKeyDown={(e) => e.key === "Enter" && onUpdate()}
-        />
-
-        <TextField
-          {...textFieldProps}
-          label={t("Descriptions")}
-          value={form.desc}
-          onChange={(e) => setForm({ desc: e.target.value })}
-          onKeyDown={(e) => e.key === "Enter" && onUpdate()}
-        />
-
-        {type === "remote" && (
-          <TextField
-            {...textFieldProps}
-            label={t("Subscription URL")}
-            value={form.url}
-            onChange={(e) => setForm({ url: e.target.value })}
-            onKeyDown={(e) => e.key === "Enter" && onUpdate()}
-          />
-        )}
-
-        {(type === "remote" || type === "local") && (
-          <TextField
-            {...textFieldProps}
-            label={t("Update Interval(mins)")}
-            value={option.update_interval}
-            onChange={(e) => {
-              const str = e.target.value?.replace(/\D/, "");
-              setOption({ update_interval: !!str ? +str : undefined });
-            }}
-            onKeyDown={(e) => e.key === "Enter" && onUpdate()}
-          />
-        )}
-
-        <Collapse
-          in={type === "remote" && showOpt}
-          timeout="auto"
-          unmountOnExit
-        >
-          <TextField
-            {...textFieldProps}
-            label="User Agent"
-            value={option.user_agent}
-            placeholder={`clash-verge/v${version}`}
-            onChange={(e) => setOption({ user_agent: e.target.value })}
-            onKeyDown={(e) => e.key === "Enter" && onUpdate()}
-          />
-
-          <FormControlLabel
-            label={t("Use System Proxy")}
-            labelPlacement="start"
-            sx={{ ml: 0, my: 1 }}
-            control={
-              <Switch
-                color="primary"
-                checked={option.with_proxy ?? false}
-                onChange={(_e, c) =>
-                  setOption((o) => ({
-                    self_proxy: c ? false : o.self_proxy ?? false,
-                    with_proxy: c,
-                  }))
-                }
-              />
-            }
-          />
-
-          <FormControlLabel
-            label={t("Use Clash Proxy")}
-            labelPlacement="start"
-            sx={{ ml: 0, my: 1 }}
-            control={
-              <Switch
-                color="primary"
-                checked={option.self_proxy ?? false}
-                onChange={(_e, c) =>
-                  setOption((o) => ({
-                    with_proxy: c ? false : o.with_proxy ?? false,
-                    self_proxy: c,
-                  }))
-                }
-              />
-            }
-          />
-        </Collapse>
-      </DialogContent>
-
-      <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>
-        {form.type === "remote" && (
-          <IconButton
-            size="small"
-            color="inherit"
-            sx={{ position: "absolute", left: 18 }}
-            onClick={() => setShowOpt((o) => !o)}
-          >
-            <Settings />
-          </IconButton>
-        )}
-
-        <Button onClick={onClose} variant="outlined">
-          {t("Cancel")}
-        </Button>
-        <Button onClick={onUpdate} variant="contained">
-          {t("Save")}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};

src/components/profile/profile-box.tsx

@@ -27,6 +27,7 @@ export const ProfileBox = styled(Box)(
     }[key]!;
 
     return {
+      position: "relative",
       width: "100%",
       display: "block",
       cursor: "pointer",

src/components/profile/profile-item.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import {
   Box,
   Typography,
@@ -12,12 +14,12 @@ import {
   keyframes,
   MenuItem,
   Menu,
+  CircularProgress,
 } from "@mui/material";
-import { RefreshRounded } from "@mui/icons-material";
+import { RefreshRounded, DragIndicator } from "@mui/icons-material";
 import { atomLoadingCache } from "@/services/states";
 import { updateProfile, deleteProfile, viewProfile } from "@/services/cmds";
 import { Notice } from "@/components/base";
-import { InfoViewer } from "./info-viewer";
 import { EditorViewer } from "./editor-viewer";
 import { ProfileBox } from "./profile-box";
 import parseTraffic from "@/utils/parse-traffic";
@@ -28,13 +30,18 @@ const round = keyframes`
 `;
 
 interface Props {
+  id: string;
   selected: boolean;
+  activating: boolean;
   itemData: IProfileItem;
   onSelect: (force: boolean) => void;
+  onEdit: () => void;
 }
 
 export const ProfileItem = (props: Props) => {
-  const { selected, itemData, onSelect } = props;
+  const { selected, activating, itemData, onSelect, onEdit } = props;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: props.id });
 
   const { t } = useTranslation();
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -55,7 +62,7 @@ export const ProfileItem = (props: Props) => {
 
   const loading = loadingCache[itemData.uid] ?? false;
 
-  // interval update from now field
+  // interval update fromNow field
   const [, setRefresh] = useState({});
   useEffect(() => {
     if (!hasUrl) return;
@@ -83,12 +90,11 @@ export const ProfileItem = (props: Props) => {
     };
   }, [hasUrl, updated]);
 
-  const [editOpen, setEditOpen] = useState(false);
   const [fileOpen, setFileOpen] = useState(false);
 
   const onEditInfo = () => {
     setAnchorEl(null);
-    setEditOpen(true);
+    onEdit();
   };
 
   const onEditFile = () => {
@@ -111,8 +117,8 @@ export const ProfileItem = (props: Props) => {
   });
 
   /// 0 不使用任何代理
-  /// 1 使用配置好的代理
-  /// 2 至少使用一个代理，根据配置，如果没配置，默认使用系统代理
+  /// 1 使用订阅好的代理
+  /// 2 至少使用一个代理，根据订阅，如果没订阅，默认使用系统代理
   const onUpdate = useLockFn(async (type: 0 | 1 | 2) => {
     setAnchorEl(null);
     setLoadingCache((cache) => ({ ...cache, [itemData.uid]: true }));
@@ -182,7 +188,12 @@ export const ProfileItem = (props: Props) => {
   };
 
   return (
-    <>
+    <Box
+      sx={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+    >
       <ProfileBox
         aria-selected={selected}
         onClick={() => onSelect(false)}
@@ -193,16 +204,45 @@ export const ProfileItem = (props: Props) => {
           event.preventDefault();
         }}
       >
-        <Box position="relative">
-          <Typography
-            width="calc(100% - 36px)"
-            variant="h6"
-            component="h2"
-            noWrap
-            title={name}
+        {activating && (
+          <Box
+            sx={{
+              position: "absolute",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              top: 10,
+              left: 10,
+              right: 10,
+              bottom: 2,
+              zIndex: 10,
+              backdropFilter: "blur(2px)",
+            }}
           >
-            {name}
-          </Typography>
+            <CircularProgress size={20} />
+          </Box>
+        )}
+        <Box position="relative">
+          <Box sx={{ display: "flex", justifyContent: "start" }}>
+            <Box
+              ref={setNodeRef}
+              sx={{ display: "flex", margin: "auto 0" }}
+              {...attributes}
+              {...listeners}
+            >
+              <DragIndicator sx={{ cursor: "move", marginLeft: "-6px" }} />
+            </Box>
+
+            <Typography
+              width="calc(100% - 36px)"
+              variant="h6"
+              component="h2"
+              noWrap
+              title={name}
+            >
+              {name}
+            </Typography>
+          </Box>
 
           {/* only if has url can it be updated */}
           {hasUrl && (
@@ -226,7 +266,6 @@ export const ProfileItem = (props: Props) => {
             </IconButton>
           )}
         </Box>
-
         {/* the second line show url's info or description */}
         <Box sx={boxStyle}>
           {hasUrl ? (
@@ -251,7 +290,6 @@ export const ProfileItem = (props: Props) => {
             </Typography>
           )}
         </Box>
-
         {/* the third line show extra info or last updated time */}
         {hasExtra ? (
           <Box sx={{ ...boxStyle, fontSize: 14 }}>
@@ -265,7 +303,6 @@ export const ProfileItem = (props: Props) => {
             <span title="Updated Time">{parseExpire(updated)}</span>
           </Box>
         )}
-
         <LinearProgress
           variant="determinate"
           value={progress}
@@ -298,19 +335,13 @@ export const ProfileItem = (props: Props) => {
         ))}
       </Menu>
 
-      <InfoViewer
-        open={editOpen}
-        itemData={itemData}
-        onClose={() => setEditOpen(false)}
-      />
-
       <EditorViewer
         uid={uid}
         open={fileOpen}
         mode="yaml"
         onClose={() => setFileOpen(false)}
       />
-    </>
+    </Box>
   );
 };
 

src/components/profile/profile-more.tsx

@@ -14,7 +14,6 @@ import {
 import { FeaturedPlayListRounded } from "@mui/icons-material";
 import { viewProfile } from "@/services/cmds";
 import { Notice } from "@/components/base";
-import { InfoViewer } from "./info-viewer";
 import { EditorViewer } from "./editor-viewer";
 import { ProfileBox } from "./profile-box";
 import { LogViewer } from "./log-viewer";
@@ -29,6 +28,7 @@ interface Props {
   onMoveTop: () => void;
   onMoveEnd: () => void;
   onDelete: () => void;
+  onEdit: () => void;
 }
 
 // profile enhanced item
@@ -43,19 +43,19 @@ export const ProfileMore = (props: Props) => {
     onMoveTop,
     onMoveEnd,
     onDelete,
+    onEdit,
   } = props;
 
   const { uid, type } = itemData;
   const { t, i18n } = 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 [logOpen, setLogOpen] = useState(false);
 
   const onEditInfo = () => {
     setAnchorEl(null);
-    setEditOpen(true);
+    onEdit();
   };
 
   const onEditFile = () => {
@@ -219,12 +219,6 @@ export const ProfileMore = (props: Props) => {
           ))}
       </Menu>
 
-      <InfoViewer
-        open={editOpen}
-        itemData={itemData}
-        onClose={() => setEditOpen(false)}
-      />
-
       <EditorViewer
         uid={uid}
         open={fileOpen}

src/components/profile/profile-new.tsx

@@ -1,212 +0,0 @@
-import { useRef, useState } from "react";
-import { mutate } from "swr";
-import { useTranslation } from "react-i18next";
-import { useLockFn, useSetState } from "ahooks";
-import {
-  Button,
-  Collapse,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControl,
-  FormControlLabel,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  Switch,
-  TextField,
-} from "@mui/material";
-import { Settings } from "@mui/icons-material";
-import { createProfile } from "@/services/cmds";
-import { Notice } from "@/components/base";
-import { FileInput } from "./file-input";
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
-// create a new profile
-// remote / local file / merge / script
-export const ProfileNew = (props: Props) => {
-  const { open, onClose } = props;
-
-  const { t } = useTranslation();
-  const [form, setForm] = useSetState({
-    type: "remote",
-    name: "",
-    desc: "",
-    url: "",
-  });
-
-  const [showOpt, setShowOpt] = useState(false);
-  // can add more option
-  const [option, setOption] = useSetState({
-    user_agent: "",
-    with_proxy: false,
-    self_proxy: false,
-  });
-  // file input
-  const fileDataRef = useRef<string | null>(null);
-
-  const onCreate = useLockFn(async () => {
-    if (!form.type) {
-      Notice.error("`Type` should not be null");
-      return;
-    }
-
-    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());
-    }
-  });
-
-  const textFieldProps = {
-    fullWidth: true,
-    size: "small",
-    margin: "normal",
-    variant: "outlined",
-  } as const;
-
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle>
-
-      <DialogContent sx={{ width: 336, pb: 1 }}>
-        <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
-          <InputLabel>Type</InputLabel>
-          <Select
-            autoFocus
-            label={t("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
-          {...textFieldProps}
-          label={t("Name")}
-          autoComplete="off"
-          value={form.name}
-          onChange={(e) => setForm({ name: e.target.value })}
-        />
-
-        <TextField
-          {...textFieldProps}
-          label={t("Descriptions")}
-          autoComplete="off"
-          value={form.desc}
-          onChange={(e) => setForm({ desc: e.target.value })}
-        />
-
-        {form.type === "remote" && (
-          <TextField
-            {...textFieldProps}
-            label={t("Subscription URL")}
-            autoComplete="off"
-            value={form.url}
-            onChange={(e) => setForm({ url: e.target.value })}
-          />
-        )}
-
-        {form.type === "local" && (
-          <FileInput onChange={(val) => (fileDataRef.current = val)} />
-        )}
-
-        <Collapse
-          in={form.type === "remote" && showOpt}
-          timeout="auto"
-          unmountOnExit
-        >
-          <TextField
-            {...textFieldProps}
-            label="User Agent"
-            autoComplete="off"
-            value={option.user_agent}
-            onChange={(e) => setOption({ user_agent: e.target.value })}
-          />
-          <FormControlLabel
-            label={t("Use System Proxy")}
-            labelPlacement="start"
-            sx={{ ml: 0, my: 1 }}
-            control={
-              <Switch
-                color="primary"
-                checked={option.with_proxy}
-                onChange={(_e, c) =>
-                  setOption((o) => ({
-                    self_proxy: c ? false : o.self_proxy,
-                    with_proxy: c,
-                  }))
-                }
-              />
-            }
-          />
-          <FormControlLabel
-            label={t("Use Clash Proxy")}
-            labelPlacement="start"
-            sx={{ ml: 0, my: 1 }}
-            control={
-              <Switch
-                color="primary"
-                checked={option.self_proxy}
-                onChange={(_e, c) =>
-                  setOption((o) => ({
-                    with_proxy: c ? false : o.with_proxy,
-                    self_proxy: c,
-                  }))
-                }
-              />
-            }
-          />
-        </Collapse>
-      </DialogContent>
-
-      <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>
-        {form.type === "remote" && (
-          <IconButton
-            size="small"
-            color="inherit"
-            sx={{ position: "absolute", left: 18 }}
-            onClick={() => setShowOpt((o) => !o)}
-          >
-            <Settings />
-          </IconButton>
-        )}
-
-        <Button onClick={onClose} variant="outlined">
-          {t("Cancel")}
-        </Button>
-        <Button onClick={onCreate} variant="contained">
-          {t("Save")}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};

src/components/profile/profile-viewer.tsx

@@ -0,0 +1,284 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import { useForm, Controller } from "react-hook-form";
+import {
+  Box,
+  FormControl,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+  styled,
+  TextField,
+} from "@mui/material";
+import { createProfile, patchProfile } from "@/services/cmds";
+import { BaseDialog, Notice } from "@/components/base";
+import { version } from "@root/package.json";
+import { FileInput } from "./file-input";
+
+interface Props {
+  onChange: () => void;
+}
+
+export interface ProfileViewerRef {
+  create: () => void;
+  edit: (item: IProfileItem) => void;
+}
+
+// create or edit the profile
+// remote / local / merge / script
+export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
+  (props, ref) => {
+    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);
+
+    const { control, watch, register, ...formIns } = useForm<IProfileItem>({
+      defaultValues: {
+        type: "remote",
+        name: "Remote File",
+        desc: "",
+        url: "",
+        option: {
+          // user_agent: "",
+          with_proxy: false,
+          self_proxy: false,
+        },
+      },
+    });
+
+    useImperativeHandle(ref, () => ({
+      create: () => {
+        setOpenType("new");
+        setOpen(true);
+      },
+      edit: (item) => {
+        if (item) {
+          Object.entries(item).forEach(([key, value]) => {
+            formIns.setValue(key as any, value);
+          });
+        }
+        setOpenType("edit");
+        setOpen(true);
+      },
+    }));
+
+    const selfProxy = watch("option.self_proxy");
+    const withProxy = watch("option.with_proxy");
+
+    useEffect(() => {
+      if (selfProxy) formIns.setValue("option.with_proxy", false);
+    }, [selfProxy]);
+
+    useEffect(() => {
+      if (withProxy) formIns.setValue("option.self_proxy", false);
+    }, [withProxy]);
+
+    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) {
+            throw new Error("The URL should not be null");
+          }
+          if (form.type !== "remote" && form.type !== "local") {
+            delete form.option;
+          }
+          if (form.option?.update_interval) {
+            form.option.update_interval = +form.option.update_interval;
+          }
+          const name = form.name || `${form.type} file`;
+          const item = { ...form, name };
+
+          // 创建
+          if (openType === "new") {
+            await createProfile(item, fileDataRef.current);
+          }
+          // 编辑
+          else {
+            if (!form.uid) throw new Error("UID not found");
+            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);
+        }
+      })
+    );
+
+    const handleClose = () => {
+      setOpen(false);
+      fileDataRef.current = null;
+      setTimeout(() => formIns.reset(), 500);
+    };
+
+    const text = {
+      fullWidth: true,
+      size: "small",
+      margin: "normal",
+      variant: "outlined",
+      autoComplete: "off",
+      autoCorrect: "off",
+    } as const;
+
+    const formType = watch("type");
+    const isRemote = formType === "remote";
+    const isLocal = formType === "local";
+
+    return (
+      <BaseDialog
+        open={open}
+        title={openType === "new" ? t("Create Profile") : t("Edit Profile")}
+        contentSx={{ width: 375, pb: 0, maxHeight: "80%" }}
+        okBtn={t("Save")}
+        cancelBtn={t("Cancel")}
+        onClose={handleClose}
+        onCancel={handleClose}
+        onOk={handleOk}
+        loading={loading}
+      >
+        <Controller
+          name="type"
+          control={control}
+          render={({ field }) => (
+            <FormControl size="small" fullWidth sx={{ mt: 1, mb: 1 }}>
+              <InputLabel>{t("Type")}</InputLabel>
+              <Select {...field} autoFocus label={t("Type")}>
+                <MenuItem value="remote">Remote</MenuItem>
+                <MenuItem value="local">Local</MenuItem>
+                <MenuItem value="script">Script</MenuItem>
+                <MenuItem value="merge">Merge</MenuItem>
+              </Select>
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          name="name"
+          control={control}
+          render={({ field }) => (
+            <TextField {...text} {...field} label={t("Name")} />
+          )}
+        />
+
+        <Controller
+          name="desc"
+          control={control}
+          render={({ field }) => (
+            <TextField {...text} {...field} label={t("Descriptions")} />
+          )}
+        />
+
+        {isRemote && (
+          <>
+            <Controller
+              name="url"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  {...text}
+                  {...field}
+                  multiline
+                  label={t("Subscription URL")}
+                />
+              )}
+            />
+
+            <Controller
+              name="option.user_agent"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  {...text}
+                  {...field}
+                  placeholder={`clash-verge/v${version}`}
+                  label="User Agent"
+                />
+              )}
+            />
+          </>
+        )}
+
+        {(isRemote || isLocal) && (
+          <Controller
+            name="option.update_interval"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                {...text}
+                {...field}
+                onChange={(e) => {
+                  e.target.value = e.target.value
+                    ?.replace(/\D/, "")
+                    .slice(0, 10);
+                  field.onChange(e);
+                }}
+                label={t("Update Interval")}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">mins</InputAdornment>
+                  ),
+                }}
+              />
+            )}
+          />
+        )}
+
+        {isLocal && openType === "new" && (
+          <FileInput onChange={(val) => (fileDataRef.current = val)} />
+        )}
+
+        {isRemote && (
+          <>
+            <Controller
+              name="option.with_proxy"
+              control={control}
+              render={({ field }) => (
+                <StyledBox>
+                  <InputLabel>{t("Use System Proxy")}</InputLabel>
+                  <Switch checked={field.value} {...field} color="primary" />
+                </StyledBox>
+              )}
+            />
+
+            <Controller
+              name="option.self_proxy"
+              control={control}
+              render={({ field }) => (
+                <StyledBox>
+                  <InputLabel>{t("Use Clash Proxy")}</InputLabel>
+                  <Switch checked={field.value} {...field} color="primary" />
+                </StyledBox>
+              )}
+            />
+          </>
+        )}
+      </BaseDialog>
+    );
+  }
+);
+
+const StyledBox = styled(Box)(() => ({
+  margin: "8px 0 8px 8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+}));

src/components/proxy/provider-button.tsx

@@ -0,0 +1,86 @@
+import dayjs from "dayjs";
+import useSWR, { mutate } from "swr";
+import { useState } from "react";
+import {
+  Button,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+} from "@mui/material";
+import { RefreshRounded } from "@mui/icons-material";
+import { useTranslation } from "react-i18next";
+import { useLockFn } from "ahooks";
+import { getProviders, providerUpdate } from "@/services/api";
+import { BaseDialog } from "../base";
+
+export const ProviderButton = () => {
+  const { t } = useTranslation();
+  const { data } = useSWR("getProviders", getProviders);
+
+  const [open, setOpen] = useState(false);
+
+  const hasProvider = Object.keys(data || {}).length > 0;
+
+  const handleUpdate = useLockFn(async (key: string) => {
+    await providerUpdate(key);
+    await mutate("getProxies");
+    await mutate("getProviders");
+  });
+
+  if (!hasProvider) return null;
+
+  return (
+    <>
+      <Button
+        size="small"
+        variant="outlined"
+        sx={{ textTransform: "capitalize" }}
+        onClick={() => setOpen(true)}
+      >
+        {t("Provider")}
+      </Button>
+
+      <BaseDialog
+        open={open}
+        title={t("Proxy Provider")}
+        contentSx={{ width: 400 }}
+        disableOk
+        cancelBtn={t("Cancel")}
+        onClose={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      >
+        <List sx={{ py: 0, minHeight: 250 }}>
+          {Object.entries(data || {}).map(([key, item]) => {
+            const time = dayjs(item.updatedAt);
+            return (
+              <ListItem sx={{ p: 0 }} key={key}>
+                <ListItemText
+                  primary={key}
+                  secondary={
+                    <>
+                      <span style={{ marginRight: "4em" }}>
+                        Type: {item.vehicleType}
+                      </span>
+                      <span title={time.format("YYYY-MM-DD HH:mm:ss")}>
+                        Updated: {time.fromNow()}
+                      </span>
+                    </>
+                  }
+                />
+                <IconButton
+                  size="small"
+                  color="inherit"
+                  title="Update Provider"
+                  onClick={() => handleUpdate(key)}
+                >
+                  <RefreshRounded />
+                </IconButton>
+              </ListItem>
+            );
+          })}
+        </List>
+      </BaseDialog>
+    </>
+  );
+};

src/components/proxy/proxy-groups.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/services/api";
 import { useProfiles } from "@/hooks/use-profiles";
 import { useVerge } from "@/hooks/use-verge";
+import { BaseEmpty } from "../base";
 import { useRenderList } from "./use-render-list";
 import { ProxyRender } from "./proxy-render";
 import delayManager from "@/services/delay";
@@ -67,8 +68,10 @@ export const ProxyGroups = (props: Props) => {
   // 测全部延迟
   const handleCheckAll = useLockFn(async (groupName: string) => {
     const proxies = renderList
-      .filter((e) => e.type === 2 && e.group?.name === groupName)
-      .map((e) => e.proxy!)
+      .filter(
+        (e) => e.group?.name === groupName && (e.type === 2 || e.type === 4)
+      )
+      .flatMap((e) => e.proxyCol || e.proxy!)
       .filter(Boolean);
 
     const providers = new Set(proxies.map((p) => p!.provider!).filter(Boolean));
@@ -80,7 +83,7 @@ export const ProxyGroups = (props: Props) => {
     }
 
     const names = proxies.filter((p) => !p!.provider).map((p) => p!.name);
-    await delayManager.checkListDelay(names, groupName, 24);
+    await delayManager.checkListDelay(names, groupName);
 
     onProxies();
   });
@@ -91,7 +94,10 @@ export const ProxyGroups = (props: Props) => {
     const { name, now } = group;
 
     const index = renderList.findIndex(
-      (e) => e.type === 2 && e.group?.name === name && e.proxy?.name === now
+      (e) =>
+        e.group?.name === name &&
+        ((e.type === 2 && e.proxy?.name === now) ||
+          (e.type === 4 && e.proxyCol?.some((p) => p.name === now)))
     );
 
     if (index >= 0) {
@@ -103,11 +109,16 @@ export const ProxyGroups = (props: Props) => {
     }
   };
 
+  if (mode === "direct") {
+    return <BaseEmpty text="Direct Mode" />;
+  }
+
   return (
     <Virtuoso
       ref={virtuosoRef}
       style={{ height: "100%" }}
       totalCount={renderList.length}
+      increaseViewportBy={256}
       itemContent={(index) => (
         <ProxyRender
           key={renderList[index].key}

src/components/proxy/proxy-item-mini.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useState } from "react";
+import { useLockFn } from "ahooks";
+import { CheckCircleOutlineRounded } from "@mui/icons-material";
+import { alpha, Box, ListItemButton, styled, Typography } from "@mui/material";
+import { BaseLoading } from "@/components/base";
+import delayManager from "@/services/delay";
+
+interface Props {
+  groupName: string;
+  proxy: IProxyItem;
+  selected: boolean;
+  showType?: boolean;
+  onClick?: (name: string) => void;
+}
+
+// 多列布局
+export const ProxyItemMini = (props: Props) => {
+  const { groupName, proxy, selected, showType = true, onClick } = props;
+
+  // -1/<=0 为 不显示
+  // -2 为 loading
+  const [delay, setDelay] = useState(-1);
+
+  useEffect(() => {
+    delayManager.setListener(proxy.name, groupName, setDelay);
+
+    return () => {
+      delayManager.removeListener(proxy.name, groupName);
+    };
+  }, [proxy.name, groupName]);
+
+  useEffect(() => {
+    if (!proxy) return;
+    setDelay(delayManager.getDelayFix(proxy, groupName));
+  }, [proxy]);
+
+  const onDelay = useLockFn(async () => {
+    setDelay(-2);
+    setDelay(await delayManager.checkDelay(proxy.name, groupName));
+  });
+
+  return (
+    <ListItemButton
+      dense
+      selected={selected}
+      onClick={() => onClick?.(proxy.name)}
+      sx={[
+        {
+          height: 56,
+          borderRadius: 1,
+          pl: 1.5,
+          pr: 1,
+          justifyContent: "space-between",
+          alignItems: "center",
+        },
+        ({ palette: { mode, primary } }) => {
+          const bgcolor =
+            mode === "light"
+              ? alpha(primary.main, 0.15)
+              : alpha(primary.main, 0.35);
+          const color = mode === "light" ? primary.main : primary.light;
+          const showDelay = delay > 0;
+
+          const shadowColor =
+            mode === "light" ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.08)";
+
+          return {
+            "&:hover .the-check": { display: !showDelay ? "block" : "none" },
+            "&:hover .the-delay": { display: showDelay ? "block" : "none" },
+            "&:hover .the-icon": { display: "none" },
+            "&.Mui-selected": { bgcolor, boxShadow: `0 0 0 1px ${bgcolor}` },
+            "&.Mui-selected .MuiListItemText-secondary": { color },
+            boxShadow: `0 0 0 1px ${shadowColor}`,
+          };
+        },
+      ]}
+    >
+      <Box title={proxy.name} sx={{ overflow: "hidden" }}>
+        <Typography
+          variant="body2"
+          component="div"
+          color="text.secondary"
+          sx={{
+            display: "block",
+            textOverflow: "ellipsis",
+            wordBreak: "break-all",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {proxy.name}
+        </Typography>
+
+        {showType && (
+          <Box sx={{ display: "flex", flexWrap: "nowrap", flex: "none" }}>
+            {!!proxy.provider && (
+              <TypeBox component="span">{proxy.provider}</TypeBox>
+            )}
+            <TypeBox component="span">{proxy.type}</TypeBox>
+            {proxy.udp && <TypeBox component="span">UDP</TypeBox>}
+          </Box>
+        )}
+      </Box>
+
+      <Box sx={{ ml: 0.5, color: "primary.main" }}>
+        {delay === -2 && (
+          <Widget>
+            <BaseLoading />
+          </Widget>
+        )}
+
+        {!proxy.provider && delay !== -2 && (
+          // provider的节点不支持检测
+          <Widget
+            className="the-check"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onDelay();
+            }}
+            sx={({ palette }) => ({
+              display: "none", // hover才显示
+              ":hover": { bgcolor: alpha(palette.primary.main, 0.15) },
+            })}
+          >
+            Check
+          </Widget>
+        )}
+
+        {delay > 0 && (
+          // 显示延迟
+          <Widget
+            className="the-delay"
+            onClick={(e) => {
+              if (proxy.provider) return;
+              e.preventDefault();
+              e.stopPropagation();
+              onDelay();
+            }}
+            color={delayManager.formatDelayColor(delay)}
+            sx={({ palette }) =>
+              !proxy.provider
+                ? { ":hover": { bgcolor: alpha(palette.primary.main, 0.15) } }
+                : {}
+            }
+          >
+            {delayManager.formatDelay(delay)}
+          </Widget>
+        )}
+
+        {delay !== -2 && delay <= 0 && selected && (
+          // 展示已选择的icon
+          <CheckCircleOutlineRounded
+            className="the-icon"
+            sx={{ fontSize: 16, mr: 0.5, display: "block" }}
+          />
+        )}
+      </Box>
+    </ListItemButton>
+  );
+};
+
+const Widget = styled(Box)(({ theme: { typography } }) => ({
+  padding: "3px 6px",
+  fontSize: 14,
+  fontFamily: typography.fontFamily,
+  borderRadius: "4px",
+}));
+
+const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(palette.text.secondary, 0.36),
+  color: alpha(palette.text.secondary, 0.42),
+  borderRadius: 4,
+  fontSize: 10,
+  fontFamily: typography.fontFamily,
+  marginRight: "4px",
+  padding: "0 2px",
+  lineHeight: 1.25,
+}));

src/components/proxy/proxy-item.tsx

@@ -145,20 +145,14 @@ export const ProxyItem = (props: Props) => {
                 e.stopPropagation();
                 onDelay();
               }}
-              color={
-                delay > 500
-                  ? "error.main"
-                  : delay < 100
-                  ? "success.main"
-                  : "text.secondary"
-              }
+              color={delayManager.formatDelayColor(delay)}
               sx={({ palette }) =>
                 !proxy.provider
                   ? { ":hover": { bgcolor: alpha(palette.primary.main, 0.15) } }
                   : {}
               }
             >
-              {delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}ms`}
+              {delayManager.formatDelay(delay)}
             </Widget>
           )}
 

src/components/proxy/proxy-render.tsx

@@ -1,8 +1,8 @@
 import {
   alpha,
   Box,
-  ListItem,
   ListItemText,
+  ListItemButton,
   Typography,
   styled,
 } from "@mui/material";
@@ -14,6 +14,7 @@ import {
 import { HeadState } from "./use-head-state";
 import { ProxyHead } from "./proxy-head";
 import { ProxyItem } from "./proxy-item";
+import { ProxyItemMini } from "./proxy-item-mini";
 import type { IRenderItem } from "./use-render-list";
 
 interface RenderProps {
@@ -28,19 +29,18 @@ interface RenderProps {
 export const ProxyRender = (props: RenderProps) => {
   const { indent, item, onLocation, onCheckAll, onHeadState, onChangeProxy } =
     props;
-  const { type, group, headState, proxy } = item;
+  const { type, group, headState, proxy, proxyCol } = item;
 
   if (type === 0) {
     return (
-      <ListItem
-        button
+      <ListItemButton
         dense
         onClick={() => onHeadState(group.name, { open: !headState?.open })}
       >
         <ListItemText
           primary={group.name}
           secondary={
-            <Box
+            <ListItemTextChild
               sx={{
                 overflow: "hidden",
                 display: "flex",
@@ -50,14 +50,14 @@ export const ProxyRender = (props: RenderProps) => {
             >
               <StyledTypeBox>{group.type}</StyledTypeBox>
               <StyledSubtitle>{group.now}</StyledSubtitle>
-            </Box>
+            </ListItemTextChild>
           }
           secondaryTypographyProps={{
             sx: { display: "flex", alignItems: "center" },
           }}
         />
         {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
-      </ListItem>
+      </ListItemButton>
     );
   }
 
@@ -105,6 +105,33 @@ export const ProxyRender = (props: RenderProps) => {
     );
   }
 
+  if (type === 4) {
+    return (
+      <Box
+        sx={{
+          height: 56,
+          display: "grid",
+          gap: 1,
+          pl: indent ? 4 : 2,
+          pr: 2,
+          pb: 1,
+          gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
+        }}
+      >
+        {proxyCol?.map((proxy) => (
+          <ProxyItemMini
+            key={item.key + proxy.name}
+            groupName={group.name}
+            proxy={proxy!}
+            selected={group.now === proxy.name}
+            showType={headState?.showType}
+            onClick={() => onChangeProxy(group, proxy!)}
+          />
+        ))}
+      </Box>
+    );
+  }
+
   return null;
 };
 
@@ -115,7 +142,11 @@ const StyledSubtitle = styled("span")`
   white-space: nowrap;
 `;
 
-const StyledTypeBox = styled(Box)(({ theme }) => ({
+const ListItemTextChild = styled("span")`
+  display: block;
+`;
+
+const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.primary.main, 0.5),

src/components/proxy/use-head-state.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
-import { useRecoilValue } from "recoil";
-import { atomCurrentProfile } from "@/services/states";
 import { ProxySortType } from "./use-filter-sort";
+import { useProfiles } from "@/hooks/use-profiles";
 
 export interface HeadState {
   open?: boolean;
@@ -25,7 +24,8 @@ export const DEFAULT_STATE: HeadState = {
 };
 
 export function useHeadStateNew() {
-  const current = useRecoilValue(atomCurrentProfile);
+  const { profiles } = useProfiles();
+  const current = profiles?.current || "";
 
   const [state, setState] = useState<Record<string, HeadState>>({});
 

src/components/proxy/use-render-list.ts

@@ -1,7 +1,9 @@
 import useSWR from "swr";
-import { getProxies } from "@/services/api";
 import { useEffect, useMemo } from "react";
+import { getProxies } from "@/services/api";
+import { useVerge } from "@/hooks/use-verge";
 import { filterSort } from "./use-filter-sort";
+import { useWindowWidth } from "./use-window-width";
 import {
   useHeadStateNew,
   DEFAULT_STATE,
@@ -9,10 +11,13 @@ import {
 } from "./use-head-state";
 
 export interface IRenderItem {
-  type: 0 | 1 | 2 | 3; // 组 ｜ head ｜ item ｜ empty
+  // 组 ｜ head ｜ item ｜ empty | item col
+  type: 0 | 1 | 2 | 3 | 4;
   key: string;
   group: IProxyGroupItem;
   proxy?: IProxyItem;
+  col?: number;
+  proxyCol?: IProxyItem[];
   headState?: HeadState;
 }
 
@@ -23,6 +28,20 @@ export const useRenderList = (mode: string) => {
     { refreshInterval: 45000 }
   );
 
+  const { verge } = useVerge();
+  const { width } = useWindowWidth();
+
+  let col = Math.floor(verge?.proxy_layout_column || 6);
+
+  // 自适应
+  if (col >= 6 || col <= 0) {
+    if (width > 1450) col = 4;
+    else if (width > 1024) col = 3;
+    else if (width > 900) col = 2;
+    else if (width >= 600) col = 2;
+    else col = 1;
+  }
+
   const [headStates, setHeadState] = useHeadStateNew();
 
   // make sure that fetch the proxies successfully
@@ -62,10 +81,24 @@ export const useRenderList = (mode: string) => {
           headState.sortType
         );
 
-        ret.push({ type: 1, key: `head${group.name}`, group, headState });
+        ret.push({ type: 1, key: `head-${group.name}`, group, headState });
 
         if (!proxies.length) {
-          ret.push({ type: 3, key: `empty${group.name}`, group, headState });
+          ret.push({ type: 3, key: `empty-${group.name}`, group, headState });
+        }
+
+        // 支持多列布局
+        if (col > 1) {
+          return ret.concat(
+            groupList(proxies, col).map((proxyCol) => ({
+              type: 4,
+              key: `col-${group.name}-${proxyCol[0].name}`,
+              group,
+              headState,
+              col,
+              proxyCol,
+            }))
+          );
         }
 
         return ret.concat(
@@ -83,7 +116,7 @@ export const useRenderList = (mode: string) => {
 
     if (!useRule) return retList.slice(1);
     return retList;
-  }, [headStates, proxiesData, mode]);
+  }, [headStates, proxiesData, mode, col]);
 
   return {
     renderList,
@@ -91,3 +124,18 @@ export const useRenderList = (mode: string) => {
     onHeadState: setHeadState,
   };
 };
+
+function groupList<T = any>(list: T[], size: number): T[][] {
+  return list.reduce((p, n) => {
+    if (!p.length) return [[n]];
+
+    const i = p.length - 1;
+    if (p[i].length < size) {
+      p[i].push(n);
+      return p;
+    }
+
+    p.push([n]);
+    return p;
+  }, [] as T[][]);
+}

src/components/proxy/use-window-width.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export const useWindowWidth = () => {
+  const [width, setWidth] = useState(() => document.body.clientWidth);
+
+  useEffect(() => {
+    const handleResize = () => setWidth(document.body.clientWidth);
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return { width };
+};