docs: remove README GUI previews

Keep the repository landing pages focused on quick navigation and setup
instead of large screenshots.

.github/actions/prepare-build/action.yml

@@ -0,0 +1,43 @@
+name: prepare-build
+author: Luna
+description: Prepare build environment
+inputs:
+  web:
+    description: 'Whether to prepare the web build environment'
+    required: true
+    default: 'true'
+  gui:
+    description: 'Whether to prepare the GUI build environment'
+    required: true
+    default: 'true'
+  token:
+    description: 'GitHub token, used by setup-protoc action'
+    required: false
+runs:
+  using: 'composite'
+  steps:
+    - run: mkdir -p easytier-gui/dist
+      shell: bash
+
+    - name: Setup Frontend Environment
+      if: ${{ inputs.web == 'true' }}
+      uses: ./.github/actions/prepare-pnpm
+      with:
+        build_filter: './easytier-web/*'
+
+    - name: Install GUI dependencies (Used by clippy)
+      if: ${{ inputs.gui == 'true' }}
+      run: |
+        bash ./.github/workflows/install_gui_dep.sh
+      shell: bash
+
+    - name: Install Rust
+      run: |
+        bash ./.github/workflows/install_rust.sh
+      shell: bash
+
+    - name: Setup protoc
+      uses: arduino/setup-protoc@v3
+      with:
+        # GitHub repo token to use to avoid rate limiter
+        repo-token: ${{ inputs.token }}

.github/actions/prepare-pnpm/action.yml

@@ -0,0 +1,42 @@
+name: 'Setup pnpm'
+author: Luna
+description: 'Setup Node.js, pnpm, and install dependencies'
+
+inputs:
+  build_filter:
+    description: 'The filter argument for pnpm build (e.g. ./easytier-web/*)'
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 22
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install and build
+      shell: bash
+      run: |
+        pnpm -r install
+        echo "Building with filter: ${{ inputs.build_filter }}"
+        pnpm -r --filter "${{ inputs.build_filter }}" build

.github/workflows/core.yml

@@ -30,7 +30,7 @@ jobs:
           concurrent_skipping: 'same_content_newer'
           skip_after_successful_duplicate: 'true'
           cancel_others: 'true'
-          paths: '["Cargo.toml", "Cargo.lock", "easytier/**", ".github/workflows/core.yml", ".github/workflows/install_rust.sh"]'
+          paths: '["Cargo.toml", "Cargo.lock", "easytier/**", ".github/workflows/core.yml", ".github/workflows/install_rust.sh", "easytier-web/**"]'
   build_web:
     runs-on: ubuntu-latest
     needs: pre_job
@@ -160,7 +160,8 @@ jobs:
           # The prefix cache key, this can be changed to start a new cache manually.
           # default: "v0-rust"
           prefix-key: ""
-
+          shared-key: "core-registry"
+          cache-targets: "false"
 
       - name: Setup protoc
         uses: arduino/setup-protoc@v3
@@ -186,12 +187,12 @@ jobs:
           fi
 
           if [[ $OS =~ ^ubuntu.*$ && $TARGET =~ ^mips.*$ ]]; then
-            cargo +nightly-2025-09-01 build -r --target $TARGET -Z build-std=std,panic_abort --package=easytier --features=jemalloc
+            cargo +nightly-2026-02-02 build -r --target $TARGET -Z build-std=std,panic_abort --package=easytier --features=jemalloc
           else
             if [[ $OS =~ ^windows.*$ ]]; then
               SUFFIX=.exe
               CORE_FEATURES="--features=mimalloc"
-            elif [[ $TARGET =~ ^riscv64.*$ || $TARGET =~ ^loongarch64.*$ ]]; then
+            elif [[ $TARGET =~ ^riscv64.*$ || $TARGET =~ ^loongarch64.*$ || $TARGET =~ ^aarch64.*$ ]]; then
               CORE_FEATURES="--features=mimalloc"
             else
               CORE_FEATURES="--features=jemalloc"
@@ -203,7 +204,7 @@ jobs:
 
       # Copied and slightly modified from @lmq8267 (https://github.com/lmq8267)
       - name: Build Core & Cli (X86_64 FreeBSD)
-        uses: vmactions/freebsd-vm@v1
+        uses: vmactions/freebsd-vm@670398e4236735b8b65805c3da44b7a511fb8b27
         if: ${{ endsWith(matrix.TARGET, 'freebsd') }}
         env:
           TARGET: ${{ matrix.TARGET }}
@@ -228,8 +229,8 @@ jobs:
 
             rustup set auto-self-update disable
 
-            rustup install 1.89
-            rustup default 1.89
+            rustup install 1.93
+            rustup default 1.93
 
             export CC=clang
             export CXX=clang++
@@ -239,19 +240,30 @@ jobs:
             mv ./target/$TARGET/release/easytier-web ./target/$TARGET/release/easytier-web-embed
             cargo build --release --verbose --target $TARGET --features=mimalloc
 
+            mkdir -p built-bins/$TARGET/release/
+            mv ./target/$TARGET/release/easytier-web-embed ./built-bins/$TARGET/release/easytier-web-embed
+            mv ./target/$TARGET/release/easytier-web ./built-bins/$TARGET/release/easytier-web
+            mv ./target/$TARGET/release/easytier-core ./built-bins/$TARGET/release/easytier-core
+            mv ./target/$TARGET/release/easytier-cli ./built-bins/$TARGET/release/easytier-cli
+
+            # remove dirs to avoid copy many files back
+            rm -rf ./target ~/.cargo
+            mv ./built-bins ./target
+
       - name: Compress
         run: |
           mkdir -p ./artifacts/objects/
           # windows is the only OS using a different convention for executable file name
-          if [[ $OS =~ ^windows.*$ && $TARGET =~ ^x86_64.*$ ]]; then
+          if [[ $OS =~ ^windows.*$ ]]; then
               SUFFIX=.exe
-              cp easytier/third_party/*.dll ./artifacts/objects/
-          elif [[ $OS =~ ^windows.*$ && $TARGET =~ ^i686.*$ ]]; then
-              SUFFIX=.exe
-              cp easytier/third_party/i686/*.dll ./artifacts/objects/
-          elif [[ $OS =~ ^windows.*$ && $TARGET =~ ^aarch64.*$ ]]; then
-              SUFFIX=.exe
-              cp easytier/third_party/arm64/*.dll ./artifacts/objects/
+              case $TARGET in
+                  x86_64*)  ARCH_DIR=x86_64 ;;
+                  i686*)    ARCH_DIR=i686 ;;
+                  aarch64*) ARCH_DIR=arm64 ;;
+              esac
+              if [[ -n "$ARCH_DIR" ]]; then
+                  find "easytier/third_party/${ARCH_DIR}" -maxdepth 1 -type f \( -name "*.dll" -o -name "*.sys" \) -exec cp {} ./artifacts/objects/ \;
+              fi
           fi
           if [[ $GITHUB_REF_TYPE =~ ^tag$ ]]; then
             TAG=$GITHUB_REF_NAME

.github/workflows/docker.yml

@@ -11,7 +11,7 @@ on:
       image_tag:
         description: 'Tag for this image build'
         type: string
-        default: 'v2.4.4'
+        default: 'v2.5.0'
         required: true
       mark_latest:
         description: 'Mark this image as latest'

.github/workflows/gui.yml

@@ -29,7 +29,7 @@ jobs:
           concurrent_skipping: 'same_content_newer'
           skip_after_successful_duplicate: 'true'
           cancel_others: 'true'
-          paths: '["Cargo.toml", "Cargo.lock", "easytier/**", "easytier-gui/**", ".github/workflows/gui.yml", ".github/workflows/install_rust.sh", ".github/workflows/install_gui_dep.sh"]'
+          paths: '["Cargo.toml", "Cargo.lock", "easytier/**", "easytier-gui/**", ".github/workflows/gui.yml", ".github/workflows/install_rust.sh", ".github/workflows/install_gui_dep.sh", "easytier-web/frontend-lib/**"]'
   build-gui:
     strategy:
       fail-fast: false
@@ -115,7 +115,7 @@ jobs:
           sudo apt install aptitude
           sudo aptitude install -y libgstreamer1.0-0:arm64 gstreamer1.0-plugins-base:arm64 gstreamer1.0-plugins-good:arm64 \
             libgstreamer-gl1.0-0:arm64 libgstreamer-plugins-base1.0-0:arm64 libgstreamer-plugins-good1.0-0:arm64 libwebkit2gtk-4.1-0:arm64 \
-            libwebkit2gtk-4.1-dev:arm64 libssl-dev:arm64 gcc-aarch64-linux-gnu
+            libwebkit2gtk-4.1-dev:arm64 libssl-dev:arm64 gcc-aarch64-linux-gnu libsoup-3.0-dev:arm64 libjavascriptcoregtk-4.1-dev:arm64
           echo "PKG_CONFIG_SYSROOT_DIR=/usr/aarch64-linux-gnu/" >> "$GITHUB_ENV"
           echo "PKG_CONFIG_PATH=/usr/lib/aarch64-linux-gnu/pkgconfig/" >> "$GITHUB_ENV"
 
@@ -169,12 +169,13 @@ jobs:
       - name: copy correct DLLs
         if: ${{ matrix.OS == 'windows-latest' }}
         run: |
-          if [[ $GUI_TARGET =~ ^aarch64.*$ ]]; then
-            cp ./easytier/third_party/arm64/*.dll ./easytier-gui/src-tauri/
-          elif [[ $GUI_TARGET =~ ^i686.*$ ]]; then
-            cp ./easytier/third_party/i686/*.dll ./easytier-gui/src-tauri/
-          else
-            cp ./easytier/third_party/*.dll ./easytier-gui/src-tauri/
+          case $TARGET in
+              x86_64*)  ARCH_DIR=x86_64 ;;
+              i686*)    ARCH_DIR=i686 ;;
+              aarch64*) ARCH_DIR=arm64 ;;
+          esac
+          if [[ -n "$ARCH_DIR" ]]; then
+              find "./easytier/third_party/${ARCH_DIR}" -maxdepth 1 -type f \( -name "*.dll" -o -name "*.sys" \) -exec cp {} ./easytier-gui/src-tauri/ \;
           fi
 
       - name: Build GUI

.github/workflows/install_rust.sh

@@ -31,8 +31,8 @@ fi
 
 # see https://github.com/rust-lang/rustup/issues/3709
 rustup set auto-self-update disable
-rustup install 1.89
-rustup default 1.89
+rustup install 1.93
+rustup default 1.93
 
 # mips/mipsel cannot add target from rustup, need compile by ourselves
 if [[ $OS =~ ^ubuntu.*$ && $TARGET =~ ^mips.*$ ]]; then
@@ -44,8 +44,8 @@ if [[ $OS =~ ^ubuntu.*$ && $TARGET =~ ^mips.*$ ]]; then
     ar x libgcc.a _ctzsi2.o _clz.o _bswapsi2.o
     ar rcs libctz.a _ctzsi2.o _clz.o _bswapsi2.o
 
-    rustup toolchain install nightly-2025-09-01-x86_64-unknown-linux-gnu
-    rustup component add rust-src --toolchain nightly-2025-09-01-x86_64-unknown-linux-gnu
+    rustup toolchain install nightly-2026-02-02-x86_64-unknown-linux-gnu
+    rustup component add rust-src --toolchain nightly-2026-02-02-x86_64-unknown-linux-gnu
 
     # https://github.com/rust-lang/rust/issues/128808
     # remove it after Cargo or rustc fix this.

.github/workflows/nix.yml

@@ -0,0 +1,30 @@
+name: Nix Check
+
+on:
+  push:
+    branches: ["main", "develop"]
+    paths:
+      - "**/*.nix"
+      - "flake.lock"
+  pull_request:
+    branches: ["main", "develop"]
+    paths:
+      - "**/*.nix"
+      - "flake.lock"
+
+jobs:
+  check-full-shell:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Nix
+        uses: cachix/install-nix-action@v27
+        with:
+          nix_path: nixpkgs=channel:nixos-unstable
+
+      - name: Magic Nix Cache
+        uses: DeterminateSystems/magic-nix-cache-action@v6
+
+      - name: Check full devShell
+        run: nix develop .#full --command true

.github/workflows/ohos.yml

@@ -3,8 +3,12 @@ name: EasyTier OHOS
 on:
   push:
     branches: ["develop", "main", "releases/**"]
+    tags:
+      - 'v*'
+      - '!*-pre'
   pull_request:
     branches: ["develop", "main"]
+  workflow_dispatch:
 
 env:
   CARGO_TERM_COLOR: always
@@ -15,6 +19,16 @@ defaults:
     shell: bash
 
 jobs:
+  cargo_fmt_check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: fmt check
+        working-directory: ./easytier-contrib/easytier-ohrs
+        run: |
+          bash ../../.github/workflows/install_rust.sh
+          rustup component add rustfmt
+          cargo fmt --all -- --check
   pre_job:
     # continue-on-error: true # Uncomment once integration is finished
     runs-on: ubuntu-latest
@@ -27,13 +41,15 @@ jobs:
         uses: fkirc/skip-duplicate-actions@v5
         with:
           # All of these options are optional, so you can remove them if you are happy with the defaults
-          concurrent_skipping: 'same_content_newer'
-          skip_after_successful_duplicate: 'true'
-          cancel_others: 'true'
+          concurrent_skipping: "same_content_newer"
+          skip_after_successful_duplicate: "true"
+          cancel_others: "true"
           paths: '["Cargo.toml", "Cargo.lock", "easytier/**", "easytier-contrib/easytier-ohrs/**", ".github/workflows/ohos.yml", ".github/workflows/install_rust.sh"]'
   build-ohos:
     runs-on: ubuntu-latest
     needs: pre_job
+    env:
+      OHPM_PUBLISH_CODE: ${{ secrets.OHPM_PUBLISH_CODE }}
     if: needs.pre_job.outputs.should_skip != 'true'
     steps:
       - uses: actions/checkout@v4
@@ -45,38 +61,77 @@ jobs:
             wget \
             unzip \
             git \
-            pkg-config
+            pkg-config curl libgl1-mesa-dev expect
           sudo apt-get clean
 
-      - name: Download and extract native SDK
-        working-directory: ../../../
+      - name: Resolve easytier version
         run: |
-          echo $PWD
-          wget -q \
-            https://github.com/openharmony-rs/ohos-sdk/releases/download/v5.1.0/ohos-sdk-windows_linux-public.tar.gz.aa
-          wget -q \
-            https://github.com/openharmony-rs/ohos-sdk/releases/download/v5.1.0/ohos-sdk-windows_linux-public.tar.gz.ab
-          cat ohos-sdk-windows_linux-public.tar.gz.aa ohos-sdk-windows_linux-public.tar.gz.ab > sdk.tar.gz
-          echo "Extracting native..."
-          mkdir sdk
-          tar -xzf sdk.tar.gz ohos-sdk/linux/native-linux-x64-5.1.0.107-Release.zip
-          tar -xzf sdk.tar.gz ohos-sdk/linux/toolchains-linux-x64-5.1.0.107-Release.zip
-          unzip -qq ohos-sdk/linux/native-linux-x64-5.1.0.107-Release.zip -d sdk
-          unzip -qq ohos-sdk/linux/toolchains-linux-x64-5.1.0.107-Release.zip -d sdk
-          ls -la sdk/native/llvm/bin/
-          rm -rf ohos-sdk-windows_linux-public.tar.gz.aa ohos-sdk-windows_linux-public.tar.gz.ab ohos-sdk/
+          set -e
+      
+          UPSTREAM_REPO="https://github.com/EasyTier/EasyTier.git"
+      
+          git remote add upstream "$UPSTREAM_REPO" 2>/dev/null || true
+          git fetch --unshallow upstream main || git fetch upstream main
+          git fetch --tags upstream --force
+      
+          # 读取 cargo 版本
+          CARGO_VERSION=$(cargo metadata --format-version 1 --no-deps --manifest-path easytier/Cargo.toml \
+            | jq -r '.packages[0].version')
+      
+          # 获取 upstream/main 最新 tag
+          LAST_TAG=$(git describe --tags --abbrev=0 upstream/main 2>/dev/null || echo "")
+          LAST_TAG_VERSION="${LAST_TAG#v}"
+      
+          # 语义版本比较
+          version_gt() {
+            [ "$(printf '%s\n' "$1" "$2" | sort -V | tail -n1)" = "$1" ] && [ "$1" != "$2" ]
+          }
+      
+          if [ -z "$LAST_TAG_VERSION" ]; then
+            BASE_VERSION="$CARGO_VERSION"
+            DIFF_COUNT=$(git rev-list --count upstream/main)
+          elif version_gt "$CARGO_VERSION" "$LAST_TAG_VERSION"; then
+            BASE_VERSION="$CARGO_VERSION"
+            DIFF_COUNT=0
+          else
+            BASE_VERSION="$LAST_TAG_VERSION"
+            DIFF_COUNT=$(git rev-list --count "${LAST_TAG}..upstream/main")
+          fi
+      
+          COMMIT_HASH=$(git rev-parse --short upstream/main)
+          EASYTIER_VERSION="${BASE_VERSION}-${DIFF_COUNT}-${COMMIT_HASH}"
+      
+          echo "EASYTIER_VERSION=$EASYTIER_VERSION"
+          echo "EASYTIER_VERSION=$EASYTIER_VERSION" >> $GITHUB_ENV
+      
+          cd ./easytier-contrib/easytier-ohrs/package
+          jq --arg v "$EASYTIER_VERSION" '.version = $v' oh-package.json5 > oh-package.tmp.json5
+          mv oh-package.tmp.json5 oh-package.json5
+
+
+      - name: Generate CHANGELOG.md for current commit
+        working-directory: ./easytier-contrib/easytier-ohrs/package
+        run: |
+          {
+            echo "## easytier-ohrs ${EASYTIER_VERSION}"
+            echo
+            git log -1 --pretty=format:"- %s"
+            echo
+          } > CHANGELOG.md
+
+      - name: Setup HarmonyOS CLI tools
+        uses: ErBWs/setup-ohos@v1
 
       - name: Download and Extract Custom SDK
         run: |
           wget https://github.com/FrankHan052176/Easytier-OHOS-sdk/releases/download/v1/ohos-sdk.zip -O /tmp/ohos-sdk.zip
           sudo unzip -o /tmp/ohos-sdk.zip -d /tmp/custom-sdk
-          sudo cp -rf /tmp/custom-sdk/linux/native/* $HOME/sdk/native
-          echo "Custom SDK files deployed to $HOME/sdk/native"
-          ls -a $HOME/sdk/native
+          sudo cp -rf /tmp/custom-sdk/linux/native/* $OHOS_NDK_HOME/native
+          echo "Custom SDK files deployed to $OHOS_NDK_HOME/native"
+          ls -a $OHOS_NDK_HOME/native
 
       - name: Setup build environment
         run: |
-          echo "OHOS_NDK_HOME=$HOME/sdk" >> $GITHUB_ENV
           echo "TARGET_ARCH=aarch64-linux-ohos" >> $GITHUB_ENV
 
       - name: Create clang wrapper script
@@ -92,7 +147,7 @@ jobs:
           EOF
           sudo chmod +x $OHOS_NDK_HOME/native/llvm/aarch64-unknown-linux-ohos-clang.sh
 
-      - name: Build
+      - name: Build latest Har
         working-directory: ./easytier-contrib/easytier-ohrs
         run: |
           sudo apt-get install -y llvm clang lldb lld
@@ -104,11 +159,64 @@ jobs:
           cargo update easytier
           ohrs doctor
           ohrs build --release --arch aarch
+          ohrs artifact
+          mv package.har easytier-ohrs.har
+
+      - name: Build Release Package
+        if: startsWith(github.ref, 'refs/tags/')
+        working-directory: ./easytier-contrib/easytier-ohrs
+        run: |
+          echo "🎉 Official Release detected. Building easytier-release..."
+          TAG_NAME="${{ github.ref_name }}"
+          TAG_VERSION="${TAG_NAME#v}"
+          echo "Release Version: $TAG_VERSION"
+          cd package
+          jq --arg v "$TAG_VERSION" '.name = "easytier-release" | .version = $v' oh-package.json5 > oh-package.tmp.json5 && mv oh-package.tmp.json5 oh-package.json5
+          cd ..
+          ohrs build --release --arch aarch
+          ohrs artifact
+          mv package.har easytier-release.har
 
       - name: Upload artifact
         uses: actions/upload-artifact@v4
         with:
           name: easytier-ohos
-          path: ./easytier-contrib/easytier-ohrs/dist/arm64-v8a/libeasytier_ohrs.so
+          path: |
+            ./easytier-contrib/easytier-ohrs/easytier-ohrs.har
           retention-days: 5
           if-no-files-found: error
+
+      - name: Publish To Center Ohpm
+        working-directory: ./easytier-contrib/easytier-ohrs
+        env:
+          OHPM_PRIVATE_KEY: ${{ secrets.OHPM_PRIVATE_KEY }}
+          OHPM_KEY_PASSPHRASE: ${{ secrets.OHPM_KEY_PASSPHRASE }}
+        if: ${{ env.OHPM_PUBLISH_CODE != '' && github.event_name == 'push' }}
+        run: |
+          ohpm config set publish_id "$OHPM_PUBLISH_CODE"
+          ohpm config set publish_registry https://ohpm.openharmony.cn/ohpm
+          TMP_DIR=$(mktemp -d)
+          PRIVATE_KEY_FILE="$TMP_DIR/private_key"
+          printf '%s' "$OHPM_PRIVATE_KEY" > "$PRIVATE_KEY_FILE"
+          chmod 600 "$PRIVATE_KEY_FILE"
+          ohpm config set key_path $PRIVATE_KEY_FILE
+          unzip ohpm_crypto.zip -d /home/runner/work/
+          ohpm config set crypto_path /home/runner/work/ohpm_crypto
+          chmod 755 /home/runner/work/ohpm_crypto/*
+          PASSPHRASE="$(printf '%s' "$OHPM_KEY_PASSPHRASE" | tr -d '\r\n')"
+          ohpm config set key_passphrase "$PASSPHRASE"
+          ohpm publish easytier-ohrs.har
+          
+      - name: Publish To Private Ohpm
+        working-directory: ./easytier-contrib/easytier-ohrs
+        if: ${{ env.OHPM_PUBLISH_CODE != '' && github.event_name == 'push' }}
+        run: |
+          printf '%s' "${{ secrets.CODEARTS_PRIVATE_OHPM }}" > ~/.ohpm/.ohpmrc
+          ohpm config set strict_ssl false
+          ohpm publish easytier-ohrs.har
+          if [ -f "easytier-release.har" ]; then
+             echo "🚀 Publishing Release package..."
+             ohpm publish easytier-release.har
+          fi
+          curl --header "Content-Type: application/json" --request POST --data "{}" ${{ secrets.CODEARTS_WEBHOOKS }}
+

.github/workflows/release.yml

@@ -6,22 +6,19 @@ on:
       core_run_id:
         description: 'The run id of EasyTier-Core Action in EasyTier repo'
         type: number
-        default: 10322498549
         required: true
       gui_run_id:
         description: 'The run id of EasyTier-GUI Action in EasyTier repo'
         type: number
-        default: 10322498557
         required: true
       mobile_run_id:
         description: 'The run id of EasyTier-Mobile Action in EasyTier repo'
         type: number
-        default: 10322498555
         required: true
       version:
         description: 'Version for this release'
         type: string
-        default: 'v2.4.4'
+        default: 'v2.5.0'
         required: true
       make_latest:
         description: 'Mark this release as latest'
@@ -34,7 +31,6 @@ permissions:
 
 jobs:
   release:
-    if: contains('["KKRainbow"]', github.actor)
     runs-on: ubuntu-latest
     steps:
       -
@@ -46,7 +42,7 @@ jobs:
         with:
           github_token: ${{secrets.GITHUB_TOKEN}}
           run_id: ${{ inputs.core_run_id }}
-          repo: EasyTier/EasyTier
+          repo: ${{ github.repository }}
           path: release_assets
 
       - name: Download GUI Artifact
@@ -54,7 +50,7 @@ jobs:
         with:
           github_token: ${{secrets.GITHUB_TOKEN}}
           run_id: ${{ inputs.gui_run_id }}
-          repo: EasyTier/EasyTier
+          repo: ${{ github.repository }}
           path: release_assets_nozip
 
       - name: Download Mobile Artifact
@@ -62,7 +58,7 @@ jobs:
         with:
           github_token: ${{secrets.GITHUB_TOKEN}}
           run_id: ${{ inputs.mobile_run_id }}
-          repo: EasyTier/EasyTier
+          repo: ${{ github.repository }}
           path: release_assets_nozip
 
       - name: Zip release assets

.github/workflows/test.yml

@@ -8,6 +8,8 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
+#  RUSTC_WRAPPER: "sccache"
+#  SCCACHE_GHA_ENABLED: "true"
 
 defaults:
   run:
@@ -29,18 +31,88 @@ jobs:
           concurrent_skipping: 'never'
           skip_after_successful_duplicate: 'true'
           paths: '["Cargo.toml", "Cargo.lock", "easytier/**", ".github/workflows/test.yml", ".github/workflows/install_gui_dep.sh", ".github/workflows/install_rust.sh"]'
-  test:
-    runs-on: ubuntu-22.04
+
+  check:
+    name: Run linters & check
+    runs-on: ubuntu-latest
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
     steps:
       - uses: actions/checkout@v3
 
-      - name: Setup protoc
-        uses: arduino/setup-protoc@v3
+      - name: Prepare build environment
+        uses: ./.github/actions/prepare-build
         with:
-          # GitHub repo token to use to avoid rate limiter
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          gui: true
+          web: true
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Install rustfmt and clippy
+        run: |
+          rustup component add rustfmt
+          rustup component add clippy
+
+      - uses: taiki-e/install-action@cargo-hack
+
+      - name: Check formatting
+        run: cargo fmt --all -- --check
+
+      - name: Check Clippy
+        run: cargo clippy --all-targets --features full --all -- -D warnings
+
+      - name: Check features
+        if: ${{ !cancelled() }}
+        run: cargo hack check --package easytier --each-feature --exclude-features macos-ne --verbose
+
+  pre-test:
+    name: Build test
+    runs-on: ubuntu-latest
+    needs: pre_job
+    if: needs.pre_job.outputs.should_skip != 'true'
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare build environment
+        uses: ./.github/actions/prepare-build
+        with:
+          gui: true
+          web: true
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: Swatinem/rust-cache@v2
+
+      - uses: taiki-e/install-action@nextest
+
+      - name: Archive test
+        run: cargo nextest archive --archive-file tests.tar.zst --package easytier --features full
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: tests
+          path: tests.tar.zst
+          retention-days: 1
+
+  test_matrix:
+    name: Test (${{ matrix.name }})
+    runs-on: ubuntu-latest
+    needs: [ pre_job, pre-test ]
+    if: needs.pre_job.outputs.should_skip != 'true'
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: "easytier"
+            opts: "-E 'not test(tests::three_node)' --test-threads 1 --no-fail-fast"
+
+          - name: "three_node"
+            opts: "-E 'test(tests::three_node) and not test(subnet_proxy_three_node_test)' --test-threads 1 --no-fail-fast"
+
+          - name: "three_node::subnet_proxy_three_node_test"
+            opts: "-E 'test(subnet_proxy_three_node_test)' --test-threads 1 --no-fail-fast"
+    steps:
+      - uses: actions/checkout@v3
 
       - name: Setup tools for test
         run: sudo apt install bridge-utils
@@ -53,63 +125,23 @@ jobs:
           sudo sysctl net.ipv6.conf.lo.disable_ipv6=0
           sudo ip addr add 2001:db8::2/64 dev lo
 
-      - uses: actions/setup-node@v4
+      - uses: taiki-e/install-action@nextest
+
+      - name: Download tests
+        uses: actions/download-artifact@v4
         with:
-          node-version: 22
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install frontend dependencies
-        run: |
-          pnpm -r install
-          pnpm -r --filter "./easytier-web/*"  build
-
-      - name: Cargo cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            ~/.cargo
-            ./target
-          key: ${{ runner.os }}-cargo-test-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Install GUI dependencies (Used by clippy)
-        run: |
-          bash ./.github/workflows/install_gui_dep.sh
-          bash ./.github/workflows/install_rust.sh
-          rustup component add rustfmt
-          rustup component add clippy
-
-      - name: Check formatting
-        if: ${{ !cancelled() }}
-        run: cargo fmt --all -- --check
-
-      - name: Check Clippy
-        if: ${{ !cancelled() }}
-        # NOTE: tauri need `dist` dir in build.rs
-        run: |
-          mkdir -p easytier-gui/dist
-          cargo clippy --all-targets --all-features --all -- -D warnings
+          name: tests
 
       - name: Run tests
         run: |
           sudo prlimit --pid $$ --nofile=1048576:1048576
-          sudo -E env "PATH=$PATH" cargo test --no-default-features --features=full --verbose -- --test-threads=1
-          sudo chown -R $USER:$USER ./target
-          sudo chown -R $USER:$USER ~/.cargo
+          sudo -E env "PATH=$PATH" cargo nextest run --archive-file tests.tar.zst ${{ matrix.opts }}
+
+  test:
+    runs-on: ubuntu-latest
+    needs: [ pre_job, test_matrix ]
+    if: needs.pre_job.outputs.should_skip != 'true' && always()
+    steps:
+      - name: Mark result as failed
+        if: needs.test_matrix.result != 'success'
+        run: exit 1

.gitignore

@@ -38,6 +38,7 @@ node_modules
 .vite
 
 easytier-gui/src-tauri/*.dll
+easytier-gui/src-tauri/*.sys
 /easytier-contrib/easytier-ohrs/dist/
 
 .direnv

CONTRIBUTING.md

@@ -26,7 +26,7 @@ Thank you for your interest in contributing to EasyTier! This document provides
 #### Required Tools
 - Node.js v21 or higher
 - pnpm v9 or higher
-- Rust toolchain (version 1.89)
+- Rust toolchain (version 1.93)
 - LLVM and Clang
 - Protoc (Protocol Buffers compiler)
 
@@ -79,8 +79,8 @@ sudo apt install -y bridge-utils
 2. Install dependencies:
    ```bash
    # Install Rust toolchain
-   rustup install 1.89
-   rustup default 1.89
+   rustup install 1.93
+   rustup default 1.93
 
    # Install project dependencies
    pnpm -r install

CONTRIBUTING_zh.md

@@ -34,7 +34,7 @@
 #### 必需工具
 - Node.js v21 或更高版本
 - pnpm v9 或更高版本
-- Rust 工具链（版本 1.89）
+- Rust 工具链（版本 1.93）
 - LLVM 和 Clang
 - Protoc（Protocol Buffers 编译器）
 
@@ -87,8 +87,8 @@ sudo apt install -y bridge-utils
 2. 安装依赖：
    ```bash
    # 安装 Rust 工具链
-   rustup install 1.89
-   rustup default 1.89
+   rustup install 1.93
+   rustup default 1.93
 
    # 安装项目依赖
    pnpm -r install

README.md

@@ -11,285 +11,88 @@
 
 [简体中文](/README_CN.md) | [English](/README.md)
 
-> ✨ A simple, secure, decentralized virtual private network solution powered by Rust and Tokio
+> ✨ A simple, secure, decentralized SD-WAN solution powered by Rust and Tokio
 
-<p align="center">
-<img src="assets/config-page.png" width="300" alt="config page">
-<img src="assets/running-page.png" width="300" alt="running page">
-</p>
+🌐 **[Official Website](https://easytier.rs)** | 📚 **[Documentation](https://easytier.rs/en/)** | 🚀 **[Get Started](https://easytier.rs/en/guide/introduction.html)** | 📝 **[Download Releases](https://github.com/EasyTier/EasyTier/releases)** | 🇨🇳 **[China Site](https://easytier.cn)** | ❤️ **[Sponsor](#sponsor)**
 
-📚 **[Full Documentation](https://easytier.cn/en/)** | 🖥️ **[Web Console](https://easytier.cn/web)** | 📝 **[Download Releases](https://github.com/EasyTier/EasyTier/releases)** | 🧩 **[Third Party Tools](https://easytier.cn/en/guide/installation_gui.html#third-party-graphical-interfaces)** | ❤️ **[Sponsor](#sponsor)**
+## Get Started
 
-## Features
+### Install
 
-### Core Features
-
-- 🔒 **Decentralized**: Nodes are equal and independent, no centralized services required  
-- 🚀 **Easy to Use**: Multiple operation methods via web, client, and command line  
-- 🌍 **Cross-Platform**: Supports Win/MacOS/Linux/FreeBSD/Android and X86/ARM/MIPS architectures  
-- 🔐 **Secure**: AES-GCM or WireGuard encryption, prevents man-in-the-middle attacks  
-
-### Advanced Capabilities
-
-- 🔌 **Efficient NAT Traversal**: Supports UDP and IPv6 traversal, works with NAT4-NAT4 networks  
-- 🌐 **Subnet Proxy**: Nodes can share subnets for other nodes to access  
-- 🔄 **Intelligent Routing**: Latency priority and automatic route selection for best network experience  
-- ⚡ **High Performance**: Zero-copy throughout the entire link, supports TCP/UDP/WSS/WG protocols  
-
-### Network Optimization
-
-- 📊 **UDP Loss Resistance**: KCP/QUIC proxy optimizes latency and bandwidth in high packet loss environments  
-- 🔧 **Web Management**: Easy configuration and monitoring through web interface  
-- 🛠️ **Zero Config**: Simple deployment with statically linked executables  
-
-## Quick Start
-
-### 📥 Installation
-
-Choose the installation method that best suits your needs:
+Linux:
 
 ```bash
-# 1. Download pre-built binary (Recommended, All platforms supported)
-# Visit https://github.com/EasyTier/EasyTier/releases
+curl -fsSL "https://github.com/EasyTier/EasyTier/blob/main/script/install.sh?raw=true" | sudo bash -s install
+```
 
-# 2. Install via cargo (Latest development version)
-cargo install --git https://github.com/EasyTier/EasyTier.git easytier
+Windows (run with administrator privileges):
 
-# 3. Install via Docker
-# See https://easytier.cn/en/guide/installation.html#installation-methods
+```powershell
+irm "https://github.com/EasyTier/EasyTier/blob/main/script/install.ps1?raw=true" | iex
+```
 
-# 4. Linux Quick Install
-wget -O- https://raw.githubusercontent.com/EasyTier/EasyTier/main/script/install.sh | sudo bash -s install
+Homebrew (macOS/Linux):
 
-# 5. MacOS via Homebrew
+```bash
 brew tap brewforge/chinese
 brew install --cask easytier-gui
-
-# 6. OpenWrt Luci Web UI
-# Visit https://github.com/EasyTier/luci-app-easytier
-
-# 7. (Optional) Install shell completions:
-easytier-core --gen-autocomplete fish > ~/.config/fish/completions/easytier-core.fish
-easytier-cli gen-autocomplete fish > ~/.config/fish/completions/easytier-cli.fish
-
 ```
 
-### 🚀 Basic Usage
-
-#### Quick Networking with Shared Nodes
-
-EasyTier supports quick networking using shared public nodes. When you don't have a public IP, you can use the free shared nodes provided by the EasyTier community. Nodes will automatically attempt NAT traversal and establish P2P connections. When P2P fails, data will be relayed through shared nodes.
-
-The currently deployed shared public node is `tcp://public.easytier.cn:11010`.
-
-When using shared nodes, each node entering the network needs to provide the same `--network-name` and `--network-secret` parameters as the unique identifier of the network.
-
-Taking two nodes as an example (Please use more complex network name to avoid conflicts):
-
-1. Run on Node A:
+Install from source (latest development version):
 
 ```bash
-# Run with administrator privileges
-sudo easytier-core -d --network-name abc --network-secret abc -p tcp://public.easytier.cn:11010
+cargo install --git https://github.com/EasyTier/EasyTier.git easytier
 ```
 
-2. Run on Node B:
+More installation options:
+
+- [CLI installation guide](https://easytier.rs/en/guide/installation.html)
+- [GUI installation guide](https://easytier.rs/en/guide/installation_gui.html)
+- [Pre-built binaries](https://github.com/EasyTier/EasyTier/releases)
+- [OpenWrt package](https://github.com/EasyTier/luci-app-easytier)
+- [One-click register service](https://easytier.rs/en/guide/network/oneclick-install-as-service.html)
+
+### Quick Example
+
+Join the same network from multiple nodes with a shared public node:
 
 ```bash
-# Run with administrator privileges
-sudo easytier-core -d --network-name abc --network-secret abc -p tcp://public.easytier.cn:11010
+# Node A
+sudo easytier-core -d --network-name demo --network-secret demo -p tcp://<SharedNodeIP>:11010
+
+# Node B
+sudo easytier-core -d --network-name demo --network-secret demo -p tcp://<SharedNodeIP>:11010
 ```
 
-After successful execution, you can check the network status using `easytier-cli`:
+Use the same `--network-name` and `--network-secret` on every node to join the same network. After startup, check peers with `easytier-cli peer`, `easytier-cli route`, or `easytier-cli node`.
 
-```text
-| ipv4         | hostname       | cost  | lat_ms | loss_rate | rx_bytes | tx_bytes | tunnel_proto | nat_type | id         | version         |
-| ------------ | -------------- | ----- | ------ | --------- | -------- | -------- | ------------ | -------- | ---------- | --------------- |
-| 10.126.126.1 | abc-1          | Local | *      | *         | *        | *        | udp          | FullCone | 439804259  | 2.4.4-70e69a38~ |
-| 10.126.126.2 | abc-2          | p2p   | 3.452  | 0         | 17.33 kB | 20.42 kB | udp          | FullCone | 390879727  | 2.4.4-70e69a38~ |
-|              | PublicServer_a | p2p   | 27.796 | 0.000     | 50.01 kB | 67.46 kB | tcp          | Unknown  | 3771642457 | 2.4.4-70e69a38~ |
-```
+## Why EasyTier
 
-You can test connectivity between nodes:
+- 🔒 **Decentralized**: Nodes are equal and independent, with no centralized controller required.
+- 🚀 **Easy to Use**: Use EasyTier from the web console, GUI clients, or the command line.
+- 🌍 **Cross-Platform**: Supports Windows, macOS, Linux, FreeBSD, Android, and multiple CPU architectures.
+- 🔐 **Secure**: Protects traffic with AES-GCM or WireGuard encryption.
+- 🔌 **Efficient NAT Traversal**: Supports UDP and IPv6 traversal, including NAT4-to-NAT4 scenarios.
+- 🌐 **Subnet Proxy**: Share private subnets with other nodes in the virtual network.
+- 🔄 **Intelligent Routing**: Chooses lower-latency paths automatically for a better network experience.
+- ⚡ **High Performance**: Uses zero-copy data paths and supports TCP, UDP, WS, WSS, WG, QUIC, and more.
 
-```bash
-# Test connectivity
-ping 10.126.126.1
-ping 10.126.126.2
-```
+## Learn More
 
-Note: If you cannot ping through, it may be that the firewall is blocking incoming traffic. Please turn off the firewall or add allow rules.
+- [Introduction](https://easytier.rs/en/guide/introduction.html)
+- [Command line networking](https://easytier.rs/en/guide/networking.html)
+- [Decentralized networking](https://easytier.rs/en/guide/network/decentralized-networking.html)
+- [Networking with web console](https://easytier.rs/en/guide/network/web-console.html)
+- [WireGuard client access](https://easytier.rs/en/guide/network/use-easytier-with-wireguard-client.html)
+- [Subnet proxy (point-to-network)](https://easytier.rs/en/guide/network/point-to-networking.html)
+- [Bandwidth and latency optimization](https://easytier.rs/en/guide/network/kcp-proxy.html)
+- [Hosting public shared nodes](https://easytier.rs/en/guide/network/host-public-server.html)
+- [Third-party graphical interfaces](https://easytier.rs/en/guide/installation_gui.html#third-party-graphical-interfaces)
 
-To improve availability, you can connect to multiple shared nodes simultaneously:
-
-```bash
-# Connect to multiple shared nodes
-sudo easytier-core -d --network-name abc --network-secret abc -p tcp://public.easytier.cn:11010 -p udp://public.easytier.cn:11010
-```
-
-Once your network is set up successfully, you can easily configure it to start automatically on system boot. Refer to the [One-Click Register Service guide](https://easytier.cn/en/guide/network/oneclick-install-as-service.html) for step-by-step instructions on registering EasyTier as a system service.
-
-#### Decentralized Networking
-
-EasyTier is fundamentally decentralized, with no distinction between server and client. As long as one device can communicate with any node in the virtual network, it can join the virtual network. Here's how to set up a decentralized network:
-
-1. Start First Node (Node A):
-
-```bash
-# Start the first node
-sudo easytier-core -i 10.144.144.1
-```
-
-After startup, this node will listen on the following ports by default:
-- TCP: 11010
-- UDP: 11010
-- WebSocket: 11011
-- WebSocket SSL: 11012
-- WireGuard: 11013
-
-2. Connect Second Node (Node B):
-
-```bash
-# Connect to the first node using its public IP
-sudo easytier-core -i 10.144.144.2 -p udp://FIRST_NODE_PUBLIC_IP:11010
-```
-
-3. Verify Connection:
-
-```bash
-# Test connectivity
-ping 10.144.144.2
-
-# View connected peers
-easytier-cli peer
-
-# View routing information
-easytier-cli route
-
-# View local node information
-easytier-cli node
-```
-
-For more nodes to join the network, they can connect to any existing node in the network using the `-p` parameter:
-
-```bash
-# Connect to any existing node using its public IP
-sudo easytier-core -i 10.144.144.3 -p udp://ANY_EXISTING_NODE_PUBLIC_IP:11010
-```
-
-### 🔍 Advanced Features
-
-#### Subnet Proxy
-
-Assuming the network topology is as follows, Node B wants to share its accessible subnet 10.1.1.0/24 with other nodes:
-
-```mermaid
-flowchart LR
-
-subgraph Node A Public IP 22.1.1.1
-nodea[EasyTier<br/>10.144.144.1]
-end
-
-subgraph Node B
-nodeb[EasyTier<br/>10.144.144.2]
-end
-
-id1[[10.1.1.0/24]]
-
-nodea <--> nodeb <-.-> id1
-```
-
-To share a subnet, add the `-n` parameter when starting EasyTier:
-
-```bash
-# Share subnet 10.1.1.0/24 with other nodes
-sudo easytier-core -i 10.144.144.2 -n 10.1.1.0/24
-```
-
-Subnet proxy information will automatically sync to each node in the virtual network, and each node will automatically configure the corresponding route. You can verify the subnet proxy setup:
-
-1. Check if the routing information has been synchronized (the proxy_cidrs column shows the proxied subnets):
-
-```bash
-# View routing information
-easytier-cli route
-```
-
-![Routing Information](/assets/image-3.png)
-
-2. Test if you can access nodes in the proxied subnet:
-
-```bash
-# Test connectivity to proxied subnet
-ping 10.1.1.2
-```
-
-#### WireGuard Integration
-
-EasyTier can act as a WireGuard server, allowing any device with a WireGuard client (including iOS and Android) to access the EasyTier network. Here's an example setup:
-
-```mermaid
-flowchart LR
-
-ios[[iPhone<br/>WireGuard Installed]]
-
-subgraph Node A Public IP 22.1.1.1
-nodea[EasyTier<br/>10.144.144.1]
-end
-
-subgraph Node B
-nodeb[EasyTier<br/>10.144.144.2]
-end
-
-id1[[10.1.1.0/24]]
-
-ios <-.-> nodea <--> nodeb <-.-> id1
-```
-
-1. Start EasyTier with WireGuard portal enabled:
-
-```bash
-# Listen on 0.0.0.0:11013 and use 10.14.14.0/24 subnet for WireGuard clients
-sudo easytier-core -i 10.144.144.1 --vpn-portal wg://0.0.0.0:11013/10.14.14.0/24
-```
-
-2. Get WireGuard client configuration:
-
-```bash
-# Get WireGuard client configuration
-easytier-cli vpn-portal
-```
-
-3. In the output configuration:
-   - Set `Interface.Address` to an available IP from the WireGuard subnet
-   - Set `Peer.Endpoint` to the public IP/domain of your EasyTier node
-   - Import the modified configuration into your WireGuard client
-
-#### Self-Hosted Public Shared Node
-
-You can run your own public shared node to help other nodes discover each other. A public shared node is just a regular EasyTier network (with same network name and secret) that other networks can connect to.
-
-To run a public shared node:
-
-```bash
-# No need to specify IPv4 address for public shared nodes
-sudo easytier-core --network-name mysharednode --network-secret mysharednode
-```
-
-## Related Projects
-
-- [ZeroTier](https://www.zerotier.com/): A global virtual network for connecting devices.
-- [TailScale](https://tailscale.com/): A VPN solution aimed at simplifying network configuration.
-- [vpncloud](https://github.com/dswd/vpncloud): A P2P Mesh VPN
-- [Candy](https://github.com/lanthora/candy): A reliable, low-latency, and anti-censorship virtual private network
-
-### Contact Us
+## Community
 
 - 💬 **[Telegram Group](https://t.me/easytier)**
-- 👥 **[QQ Group]**
-  - No.1 [949700262](https://qm.qq.com/q/wFoTUChqZW)
-  - No.2 [837676408](https://qm.qq.com/q/4V33DrfgHe)
-  - No.3 [957189589](https://qm.qq.com/q/YNyTQjwlai)
+- 👥 **QQ Groups**: [No.1 949700262](https://qm.qq.com/q/wFoTUChqZW), [No.2 837676408](https://qm.qq.com/q/4V33DrfgHe), [No.3 957189589](https://qm.qq.com/q/YNyTQjwlai)
 
 ## License
 
@@ -309,17 +112,16 @@ Special thanks to [Langlang Cloud](https://langlangy.cn/?i26c5a5)  and [RainClou
 
 <p align="center">
   <a href="https://langlangy.cn/?i26c5a5" target="_blank">
-<img src="assets/langlang.png" width="200">
+    <img src="assets/langlang.png" width="200" alt="Langlang Cloud Logo">
   </a>
-<a href="https://langlangy.cn/?i26c5a5" target="_blank">
-<img src="assets/raincloud.png" width="200">
+  <a href="https://www.rainyun.com/NjM0NzQ1_" target="_blank">
+    <img src="assets/raincloud.png" width="200" alt="RainCloud Logo">
   </a>
 </p>
 
-
-If you find EasyTier helpful, please consider sponsoring us. Software development and maintenance require a lot of time and effort, and your sponsorship will help us better maintain and improve EasyTier.
+If you find EasyTier helpful, please consider sponsoring us. Software development and maintenance require time and effort, and your sponsorship helps us keep improving EasyTier.
 
 <p align="center">
-<img src="assets/wechat.png" width="200">
-<img src="assets/alipay.png" width="200">
+  <img src="assets/wechat.png" width="200" alt="WeChat sponsor QR code">
+  <img src="assets/alipay.png" width="200" alt="Alipay sponsor QR code">
 </p>

README_CN.md

@@ -11,286 +11,88 @@
 
 [简体中文](/README_CN.md) | [English](/README.md)
 
-> ✨ 一个由 Rust 和 Tokio 驱动的简单、安全、去中心化的异地组网方案
+> ✨ 一个由 Rust 和 Tokio 驱动的简单、安全、去中心化 SD-WAN 组网方案
 
-<p align="center">
-<img src="assets/config-page.png" width="300" alt="配置页面">
-<img src="assets/running-page.png" width="300" alt="运行页面">
-</p>
-
-📚 **[完整文档](https://easytier.cn)** | 🖥️ **[Web 控制台](https://easytier.cn/web)** | 📝 **[下载发布版本](https://github.com/EasyTier/EasyTier/releases)** | 🧩 **[第三方工具](https://easytier.cn/guide/installation_gui.html#%E7%AC%AC%E4%B8%89%E6%96%B9%E5%9B%BE%E5%BD%A2%E7%95%8C%E9%9D%A2)** | ❤️ **[赞助](#赞助)**
-
-## 特性
-
-### 核心特性
-
-- 🔒 **去中心化**：节点平等且独立，无需中心化服务
-- 🚀 **易于使用**：支持通过网页、客户端和命令行多种操作方式
-- 🌍 **跨平台**：支持 Win/MacOS/Linux/FreeBSD/Android 和 X86/ARM/MIPS 架构
-- 🔐 **安全**：AES-GCM 或 WireGuard 加密，防止中间人攻击
-
-### 高级功能
-
-- 🔌 **高效 NAT 穿透**：支持 UDP 和 IPv6 穿透，可在 NAT4-NAT4 网络中工作
-- 🌐 **子网代理**：节点可以共享子网供其他节点访问
-- 🔄 **智能路由**：延迟优先和自动路由选择，提供最佳网络体验
-- ⚡ **高性能**：整个链路零拷贝，支持 TCP/UDP/WSS/WG 协议
-
-### 网络优化
-
-- 📊 **UDP 丢包抗性**：KCP/QUIC 代理在高丢包环境下优化延迟和带宽
-- 🔧 **Web 管理**：通过 Web 界面轻松配置和监控
-- 🛠️ **零配置**：静态链接的可执行文件，简单部署
+🌐 **[官网文档](https://easytier.cn)** | 🚀 **[快速开始](https://easytier.cn/guide/introduction.html)** | 📝 **[下载发布版本](https://github.com/EasyTier/EasyTier/releases)** | 🌍 **[国际站](https://easytier.rs)** | ❤️ **[赞助](#赞助)**
 
 ## 快速开始
 
-### 📥 安装
+### 安装
 
-选择最适合您需求的安装方式：
+Linux：
 
 ```bash
-# 1. 下载预编译二进制文件（推荐，支持所有平台）
-# 访问 https://github.com/EasyTier/EasyTier/releases
+curl -fsSL "https://github.com/EasyTier/EasyTier/blob/main/script/install.sh?raw=true" | sudo bash -s install
+```
 
-# 2. 通过 cargo 安装（最新开发版本）
-cargo install --git https://github.com/EasyTier/EasyTier.git easytier
+Windows（请使用管理员权限运行）：
 
-# 3. 通过 Docker 安装
-# 参见 https://easytier.cn/guide/installation.html#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F
+```powershell
+irm "https://github.com/EasyTier/EasyTier/blob/main/script/install.ps1?raw=true" | iex
+```
 
-# 4. Linux 快速安装
-wget -O- https://raw.githubusercontent.com/EasyTier/EasyTier/main/script/install.sh | sudo bash -s install
+Homebrew（macOS/Linux）：
 
-# 5. MacOS 通过 Homebrew 安装
+```bash
 brew tap brewforge/chinese
 brew install --cask easytier-gui
-
-# 6. OpenWrt Luci Web 界面
-# 访问 https://github.com/EasyTier/luci-app-easytier
-
-# 7.（可选）安装 Shell 补全功能：
-# Fish 补全
-easytier-core --gen-autocomplete fish > ~/.config/fish/completions/easytier-core.fish
-easytier-cli gen-autocomplete fish > ~/.config/fish/completions/easytier-cli.fish
-
 ```
 
-### 🚀 基本用法
-
-#### 使用共享节点快速组网
-
-EasyTier 支持使用共享公共节点快速组网。当您没有公网 IP 时，可以使用 EasyTier 社区提供的免费共享节点。节点会自动尝试 NAT 穿透并建立 P2P 连接。当 P2P 失败时，数据将通过共享节点中继。
-
-当前部署的共享公共节点是 `tcp://public.easytier.cn:11010`。
-
-使用共享节点时，每个进入网络的节点需要提供相同的 `--network-name` 和 `--network-secret` 参数作为网络的唯一标识符。
-
-以两个节点为例（请使用更复杂的网络名称以避免冲突）：
-
-1. 在节点 A 上运行：
+通过 cargo 安装（最新开发版本）：
 
 ```bash
-# 以管理员权限运行
-sudo easytier-core -d --network-name abc --network-secret abc -p tcp://public.easytier.cn:11010
+cargo install --git https://github.com/EasyTier/EasyTier.git easytier
 ```
 
-2. 在节点 B 上运行：
+更多安装方式：
+
+- [CLI 安装文档](https://easytier.cn/guide/installation.html)
+- [GUI 安装文档](https://easytier.cn/guide/installation_gui.html)
+- [下载预编译文件](https://github.com/EasyTier/EasyTier/releases)
+- [OpenWrt 插件](https://github.com/EasyTier/luci-app-easytier)
+- [一键注册系统服务](https://easytier.cn/guide/network/oneclick-install-as-service.html)
+
+### 最小示例
+
+使用共享公共节点，让多台设备加入同一个网络：
 
 ```bash
-# 以管理员权限运行
-sudo easytier-core -d --network-name abc --network-secret abc -p tcp://public.easytier.cn:11010
+# 节点 A
+sudo easytier-core -d --network-name demo --network-secret demo -p tcp://<共享节点IP>:11010
+
+# 节点 B
+sudo easytier-core -d --network-name demo --network-secret demo -p tcp://<共享节点IP>:11010
 ```
 
-执行成功后，可以使用 `easytier-cli` 检查网络状态：
+所有节点使用相同的 `--network-name` 和 `--network-secret` 即可加入同一个网络。启动后可通过 `easytier-cli peer`、`easytier-cli route` 或 `easytier-cli node` 查看状态。
 
-```text
-| ipv4         | hostname       | cost  | lat_ms | loss_rate | rx_bytes | tx_bytes | tunnel_proto | nat_type | id         | version         |
-| ------------ | -------------- | ----- | ------ | --------- | -------- | -------- | ------------ | -------- | ---------- | --------------- |
-| 10.126.126.1 | abc-1          | Local | *      | *         | *        | *        | udp          | FullCone | 439804259  | 2.4.4-70e69a38~ |
-| 10.126.126.2 | abc-2          | p2p   | 3.452  | 0         | 17.33 kB | 20.42 kB | udp          | FullCone | 390879727  | 2.4.4-70e69a38~ |
-|              | PublicServer_a | p2p   | 27.796 | 0.000     | 50.01 kB | 67.46 kB | tcp          | Unknown  | 3771642457 | 2.4.4-70e69a38~ |
-```
+## 为什么选择 EasyTier
 
-您可以测试节点之间的连通性：
+- 🔒 **去中心化**：节点平等独立，无需中心化控制器。
+- 🚀 **易于使用**：支持 Web 控制台、图形界面和命令行多种使用方式。
+- 🌍 **跨平台**：支持 Windows、macOS、Linux、FreeBSD、Android 和多种 CPU 架构。
+- 🔐 **安全**：支持 AES-GCM 或 WireGuard 加密，保护网络通信。
+- 🔌 **高效 NAT 穿透**：支持 UDP、IPv6 穿透，可打通 NAT4-NAT4 场景。
+- 🌐 **子网代理**：可将私有子网共享给虚拟网络中的其他节点访问。
+- 🔄 **智能路由**：自动选择更优链路，降低延迟并提升体验。
+- ⚡ **高性能**：全链路零拷贝，支持 TCP、UDP、WS、WSS、WG、QUIC 等协议。
 
-```bash
-# 测试连通性
-ping 10.126.126.1
-ping 10.126.126.2
-```
+## 深入了解
 
-注意：如果无法 ping 通，可能是防火墙阻止了入站流量。请关闭防火墙或添加允许规则。
+- [简介](https://easytier.cn/guide/introduction.html)
+- [命令行组网](https://easytier.cn/guide/networking.html)
+- [去中心化组网](https://easytier.cn/guide/network/decentralized-networking.html)
+- [通过 Web 控制台组网](https://easytier.cn/guide/network/web-console.html)
+- [使用 WireGuard 客户端接入](https://easytier.cn/guide/network/use-easytier-with-wireguard-client.html)
+- [子网代理](https://easytier.cn/guide/network/point-to-networking.html)
+- [带宽与延迟优化](https://easytier.cn/guide/network/kcp-proxy.html)
+- [自建公共共享节点](https://easytier.cn/guide/network/host-public-server.html)
+- [第三方图形界面](https://easytier.cn/guide/installation_gui.html#%E7%AC%AC%E4%B8%89%E6%96%B9%E5%9B%BE%E5%BD%A2%E7%95%8C%E9%9D%A2)
 
-为了提高可用性，您可以同时连接多个共享节点：
-
-```bash
-# 连接多个共享节点
-sudo easytier-core -d --network-name abc --network-secret abc -p tcp://public.easytier.cn:11010 -p udp://public.easytier.cn:11010
-```
-
-#### 去中心化组网
-
-EasyTier 本质上是去中心化的，没有服务器和客户端的区分。只要一个设备能与虚拟网络中的任何节点通信，它就可以加入虚拟网络。以下是如何设置去中心化网络：
-
-1. 启动第一个节点（节点 A）：
-
-```bash
-# 启动第一个节点
-sudo easytier-core -i 10.144.144.1
-```
-
-启动后，该节点将默认监听以下端口：
-- TCP：11010
-- UDP：11010
-- WebSocket：11011
-- WebSocket SSL：11012
-- WireGuard：11013
-
-2. 连接第二个节点（节点 B）：
-
-```bash
-# 使用第一个节点的公网 IP 连接
-sudo easytier-core -i 10.144.144.2 -p udp://第一个节点的公网IP:11010
-```
-
-3. 验证连接：
-
-```bash
-# 测试连通性
-ping 10.144.144.2
-
-# 查看已连接的对等节点
-easytier-cli peer
-
-# 查看路由信息
-easytier-cli route
-
-# 查看本地节点信息
-easytier-cli node
-```
-
-更多节点要加入网络，可以使用 `-p` 参数连接到网络中的任何现有节点：
-
-```bash
-# 使用任何现有节点的公网 IP 连接
-sudo easytier-core -i 10.144.144.3 -p udp://任何现有节点的公网IP:11010
-```
-
-### 🔍 高级功能
-
-#### 子网代理
-
-假设网络拓扑如下，节点 B 想要与其他节点共享其可访问的子网 10.1.1.0/24：
-
-```mermaid
-flowchart LR
-
-subgraph 节点 A 公网 IP 22.1.1.1
-nodea[EasyTier<br/>10.144.144.1]
-end
-
-subgraph 节点 B
-nodeb[EasyTier<br/>10.144.144.2]
-end
-
-id1[[10.1.1.0/24]]
-
-nodea <--> nodeb <-.-> id1
-```
-
-要共享子网，在启动 EasyTier 时添加 `-n` 参数：
-
-```bash
-# 与其他节点共享子网 10.1.1.0/24
-sudo easytier-core -i 10.144.144.2 -n 10.1.1.0/24
-```
-
-子网代理信息将自动同步到虚拟网络中的每个节点，每个节点将自动配置相应的路由。您可以验证子网代理设置：
-
-1. 检查路由信息是否已同步（proxy_cidrs 列显示代理的子网）：
-
-```bash
-# 查看路由信息
-easytier-cli route
-```
-
-![路由信息](/assets/image-3.png)
-
-2. 测试是否可以访问代理子网中的节点：
-
-```bash
-# 测试到代理子网的连通性
-ping 10.1.1.2
-```
-
-#### WireGuard 集成
-
-EasyTier 可以作为 WireGuard 服务器，允许任何安装了 WireGuard 客户端的设备（包括 iOS 和 Android）访问 EasyTier 网络。以下是设置示例：
-
-```mermaid
-flowchart LR
-
-ios[[iPhone<br/>已安装 WireGuard]]
-
-subgraph 节点 A 公网 IP 22.1.1.1
-nodea[EasyTier<br/>10.144.144.1]
-end
-
-subgraph 节点 B
-nodeb[EasyTier<br/>10.144.144.2]
-end
-
-id1[[10.1.1.0/24]]
-
-ios <-.-> nodea <--> nodeb <-.-> id1
-```
-
-1. 启动启用 WireGuard 门户的 EasyTier：
-
-```bash
-# 在 0.0.0.0:11013 上监听，并使用 10.14.14.0/24 子网作为 WireGuard 客户端
-sudo easytier-core -i 10.144.144.1 --vpn-portal wg://0.0.0.0:11013/10.14.14.0/24
-```
-
-2. 获取 WireGuard 客户端配置：
-
-```bash
-# 获取 WireGuard 客户端配置
-easytier-cli vpn-portal
-```
-
-3. 在输出配置中：
-   - 将 `Interface.Address` 设置为 WireGuard 子网中的可用 IP
-   - 将 `Peer.Endpoint` 设置为您的 EasyTier 节点的公网 IP/域名
-   - 将修改后的配置导入到您的 WireGuard 客户端
-
-#### 自建公共共享节点
-
-您可以运行自己的公共共享节点来帮助其他节点相互发现。公共共享节点只是一个普通的 EasyTier 网络（具有相同的网络名称和密钥），其他网络可以连接到它。
-
-要运行公共共享节点：
-
-```bash
-# 公共共享节点无需指定 IPv4 地址
-sudo easytier-core --network-name mysharednode --network-secret mysharednode
-```
-
-网络设置成功后，您可以轻松配置它以在系统启动时自动启动。请参阅 [一键注册服务指南](https://easytier.cn/en/guide/network/oneclick-install-as-service.html) 了解如何将 EasyTier 注册为系统服务。
-
-## 相关项目
-
-- [ZeroTier](https://www.zerotier.com/)：用于连接设备的全球虚拟网络。
-- [TailScale](https://tailscale.com/)：旨在简化网络配置的 VPN 解决方案。
-- [vpncloud](https://github.com/dswd/vpncloud)：一个 P2P 网状 VPN
-- [Candy](https://github.com/lanthora/candy)：一个可靠、低延迟、反审查的虚拟专用网络
-
-### 联系我们
+## 社区
 
 - 💬 **[Telegram 群组](https://t.me/easytier)**
-- 👥 **QQ 群**
-  - 一群 [949700262](https://qm.qq.com/q/wFoTUChqZW)
-  - 二群 [837676408](https://qm.qq.com/q/4V33DrfgHe)
-  - 三群 [957189589](https://qm.qq.com/q/YNyTQjwlai)
+- 👥 **QQ 群**：[一群 949700262](https://qm.qq.com/q/wFoTUChqZW)、[二群 837676408](https://qm.qq.com/q/4V33DrfgHe)、[三群 957189589](https://qm.qq.com/q/YNyTQjwlai)
 
 ## 许可证
 
@@ -302,7 +104,7 @@ EasyTier 在 [LGPL-3.0](https://github.com/EasyTier/EasyTier/blob/main/LICENSE)
 
 <p align="center">
   <a href="https://edgeone.ai/?from=github" target="_blank">
-<img src="assets/edgeone.png" width="200">
+    <img src="assets/edgeone.png" width="200" alt="EdgeOne Logo">
   </a>
 </p>
 
@@ -310,16 +112,16 @@ EasyTier 在 [LGPL-3.0](https://github.com/EasyTier/EasyTier/blob/main/LICENSE)
 
 <p align="center">
   <a href="https://langlangy.cn/?i26c5a5" target="_blank">
-<img src="assets/langlang.png" width="200">
+    <img src="assets/langlang.png" width="200" alt="浪浪云 Logo">
   </a>
-<a href="https://langlangy.cn/?i26c5a5" target="_blank">
-<img src="assets/raincloud.png" width="200">
+  <a href="https://www.rainyun.com/NjM0NzQ1_" target="_blank">
+    <img src="assets/raincloud.png" width="200" alt="雨云 Logo">
   </a>
 </p>
 
-如果您觉得 EasyTier 有帮助，请考虑赞助我们。软件开发和维护需要大量的时间和精力，您的赞助将帮助我们更好地维护和改进 EasyTier。
+如果您觉得 EasyTier 有帮助，欢迎赞助我们。软件开发和维护需要持续投入，您的支持将帮助我们更好地维护和改进 EasyTier。
 
 <p align="center">
-<img src="assets/wechat.png" width="200">
-<img src="assets/alipay.png" width="200">
+  <img src="assets/wechat.png" width="200" alt="微信赞助二维码">
+  <img src="assets/alipay.png" width="200" alt="支付宝赞助二维码">
 </p>

easytier-contrib/easytier-android-jni/Cargo.toml

@@ -11,6 +11,6 @@ jni = "0.21"
 once_cell = "1.18.0"
 log = "0.4"
 android_logger = "0.13"
-serde = { version = "1.0", features = ["derive"] }
+serde = { version = "1.0.220", features = ["derive"] }
 serde_json = "1.0"
 easytier = { path = "../../easytier" }

easytier-contrib/easytier-android-jni/build.sh

@@ -2,6 +2,7 @@
 
 # EasyTier Android JNI 构建脚本
 # 用于编译适用于 Android 平台的 JNI 库
+# 使用 cargo-ndk 工具简化 Android 编译过程
 
 set -e
 
@@ -13,8 +14,8 @@ NC='\033[0m' # No Color
 
 REPO_ROOT=$(git rev-parse --show-toplevel)
 
-echo -e "${GREEN}EasyTier Android JNI 构建脚本${NC}"
-echo "=============================="
+echo -e "${GREEN}EasyTier Android JNI 构建脚本 (使用 cargo-ndk)${NC}"
+echo "=============================================="
 
 # 检查 Rust 是否安装
 if ! command -v rustc &> /dev/null; then
@@ -28,18 +29,38 @@ if ! command -v cargo &> /dev/null; then
     exit 1
 fi
 
-# Android 目标架构
-# TARGETS=("aarch64-linux-android" "armv7-linux-androideabi" "i686-linux-android" "x86_64-linux-android")
-TARGETS=("aarch64-linux-android")
+# 检查 cargo-ndk 是否安装
+if ! cargo ndk --version &> /dev/null; then
+    echo -e "${YELLOW}cargo-ndk 未安装，正在安装...${NC}"
+    cargo install cargo-ndk
+    if ! cargo ndk --version &> /dev/null; then
+        echo -e "${RED}错误: cargo-ndk 安装失败${NC}"
+        exit 1
+    fi
+fi
 
-# 检查是否安装了 Android 目标
-echo -e "${YELLOW}检查 Android 目标架构...${NC}"
-for target in "${TARGETS[@]}"; do
-    if ! rustup target list --installed | grep -q "$target"; then
-        echo -e "${YELLOW}安装目标架构: $target${NC}"
-        rustup target add "$target"
+echo -e "${GREEN}cargo-ndk 版本: $(cargo ndk --version)${NC}"
+
+# Android 目标架构映射 (cargo-ndk 使用的架构名称)
+# ANDROID_TARGETS=("arm64-v8a" "armeabi-v7a" "x86" "x86_64")
+ANDROID_TARGETS=("arm64-v8a")
+
+# Android 架构到 Rust target 的映射
+declare -A TARGET_MAP
+TARGET_MAP["arm64-v8a"]="aarch64-linux-android"
+TARGET_MAP["armeabi-v7a"]="armv7-linux-androideabi"
+TARGET_MAP["x86"]="i686-linux-android"
+TARGET_MAP["x86_64"]="x86_64-linux-android"
+
+# 检查并安装所需的 Rust target
+echo -e "${YELLOW}检查并安装 Android 目标架构...${NC}"
+for android_target in "${ANDROID_TARGETS[@]}"; do
+    rust_target="${TARGET_MAP[$android_target]}"
+    if ! rustup target list --installed | grep -q "$rust_target"; then
+        echo -e "${YELLOW}安装目标架构: $rust_target (for $android_target)${NC}"
+        rustup target add "$rust_target"
     else
-        echo -e "${GREEN}目标架构已安装: $target${NC}"
+        echo -e "${GREEN}目标架构已安装: $rust_target (for $android_target)${NC}"
     fi
 done
 
@@ -49,66 +70,46 @@ mkdir -p "$OUTPUT_DIR"
 
 # 构建函数
 build_for_target() {
-    local target=$1
-    echo -e "${YELLOW}构建目标: $target${NC}"
-    
-    # 设置环境变量
-    export CC_aarch64_linux_android="$ANDROID_NDK_ROOT/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android21-clang"
-    export CC_armv7_linux_androideabi="$ANDROID_NDK_ROOT/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi21-clang"
-    export CC_i686_linux_android="$ANDROID_NDK_ROOT/toolchains/llvm/prebuilt/linux-x86_64/bin/i686-linux-android21-clang"
-    export CC_x86_64_linux_android="$ANDROID_NDK_ROOT/toolchains/llvm/prebuilt/linux-x86_64/bin/x86_64-linux-android21-clang"
+    local android_target=$1
+    echo -e "${YELLOW}构建目标: $android_target${NC}"
     
     # 首先构建 easytier-ffi
-    echo -e "${YELLOW}构建 easytier-ffi for $target${NC}"
-    (cd $REPO_ROOT/easytier-contrib/easytier-ffi && cargo build --target="$target" --release)
-    
-    # 设置链接器环境变量
-    export RUSTFLAGS="-L $(readlink -f $REPO_ROOT/target/$target/release) -l easytier_ffi"
-    echo $RUSTFLAGS
+    echo -e "${YELLOW}构建 easytier-ffi for $android_target${NC}"
+    (cd $REPO_ROOT/easytier-contrib/easytier-ffi && cargo ndk -t $android_target build --release)
     
     # 构建 JNI 库
-    cargo build --target="$target" --release
+    cargo ndk -t $android_target build --release
     
     # 复制库文件到输出目录
-    local arch_dir
-    case $target in
-        "aarch64-linux-android")
-            arch_dir="arm64-v8a"
-            ;;
-        "armv7-linux-androideabi")
-            arch_dir="armeabi-v7a"
-            ;;
-        "i686-linux-android")
-            arch_dir="x86"
-            ;;
-        "x86_64-linux-android")
-            arch_dir="x86_64"
-            ;;
-    esac
-    
-    mkdir -p "$OUTPUT_DIR/$arch_dir"
-    cp "$REPO_ROOT/target/$target/release/libeasytier_android_jni.so" "$OUTPUT_DIR/$arch_dir/"
-    echo -e "${GREEN}库文件已复制到: $OUTPUT_DIR/$arch_dir/${NC}"
+    # cargo-ndk 使用 Rust target 名称作为目录名，而不是 Android 架构名称
+    rust_target="${TARGET_MAP[$android_target]}"
+    mkdir -p "$OUTPUT_DIR/$android_target"
+    cp "$REPO_ROOT/target/$rust_target/release/libeasytier_android_jni.so" "$OUTPUT_DIR/$android_target/"
+    cp "$REPO_ROOT/target/$rust_target/release/libeasytier_ffi.so" "$OUTPUT_DIR/$android_target/"
+    echo -e "${GREEN}库文件已复制到: $OUTPUT_DIR/$android_target/${NC}"
 }
 
-# 检查 Android NDK
-if [ -z "$ANDROID_NDK_ROOT" ]; then
-    echo -e "${RED}错误: 未设置 ANDROID_NDK_ROOT 环境变量${NC}"
-    echo "请设置 ANDROID_NDK_ROOT 指向您的 Android NDK 安装目录"
-    echo "例如: export ANDROID_NDK_ROOT=/path/to/android-ndk"
-    exit 1
-fi
-
-if [ ! -d "$ANDROID_NDK_ROOT" ]; then
-    echo -e "${RED}错误: Android NDK 目录不存在: $ANDROID_NDK_ROOT${NC}"
-    exit 1
-fi
-
+# 检查 Android NDK (cargo-ndk 会自动处理 NDK 路径)
+if [ -z "$ANDROID_NDK_ROOT" ] && [ -z "$ANDROID_NDK_HOME" ] && [ -z "$NDK_HOME" ]; then
+    echo -e "${YELLOW}警告: 未设置 Android NDK 环境变量${NC}"
+    echo "cargo-ndk 将尝试自动检测 NDK 路径"
+    echo "如果构建失败，请设置以下环境变量之一:"
+    echo "  - ANDROID_NDK_ROOT"
+    echo "  - ANDROID_NDK_HOME" 
+    echo "  - NDK_HOME"
+else
+    if [ -n "$ANDROID_NDK_ROOT" ]; then
         echo -e "${GREEN}使用 Android NDK: $ANDROID_NDK_ROOT${NC}"
+    elif [ -n "$ANDROID_NDK_HOME" ]; then
+        echo -e "${GREEN}使用 Android NDK: $ANDROID_NDK_HOME${NC}"
+    elif [ -n "$NDK_HOME" ]; then
+        echo -e "${GREEN}使用 Android NDK: $NDK_HOME${NC}"
+    fi
+fi
 
 # 构建所有目标
 echo -e "${YELLOW}开始构建所有目标架构...${NC}"
-for target in "${TARGETS[@]}"; do
+for target in "${ANDROID_TARGETS[@]}"; do
     build_for_target "$target"
 done
 
@@ -123,3 +124,6 @@ echo -e "${YELLOW}使用说明:${NC}"
 echo "1. 将生成的 .so 文件复制到您的 Android 项目的 src/main/jniLibs/ 目录下"
 echo "2. 将 java/com/easytier/jni/EasyTierJNI.java 复制到您的 Android 项目中"
 echo "3. 在您的 Android 代码中调用 EasyTierJNI 类的方法"
+echo ""
+echo -e "${GREEN}注意: 此脚本使用 cargo-ndk 工具，无需手动设置复杂的环境变量${NC}"
+echo -e "${GREEN}cargo-ndk 会自动处理交叉编译所需的工具链配置${NC}"

easytier-contrib/easytier-android-jni/src/lib.rs

@@ -1,4 +1,4 @@
-use easytier::proto::web::{NetworkInstanceRunningInfo, NetworkInstanceRunningInfoMap};
+use easytier::proto::api::manage::{NetworkInstanceRunningInfo, NetworkInstanceRunningInfoMap};
 use jni::objects::{JClass, JObjectArray, JString};
 use jni::sys::{jint, jstring};
 use jni::JNIEnv;

easytier-contrib/easytier-ffi/src/lib.rs

@@ -2,9 +2,8 @@ use std::sync::Mutex;
 
 use dashmap::DashMap;
 use easytier::{
-    common::config::{ConfigLoader as _, TomlConfigLoader},
+    common::config::{ConfigFileControl, ConfigLoader as _, TomlConfigLoader},
     instance_manager::NetworkInstanceManager,
-    launcher::ConfigSource,
 };
 
 static INSTANCE_NAME_ID_MAP: once_cell::sync::Lazy<DashMap<String, uuid::Uuid>> =
@@ -129,7 +128,8 @@ pub unsafe extern "C" fn run_network_instance(cfg_str: *const std::ffi::c_char)
         return -1;
     }
 
-    let instance_id = match INSTANCE_MANAGER.run_network_instance(cfg, ConfigSource::FFI) {
+    let instance_id =
+        match INSTANCE_MANAGER.run_network_instance(cfg, false, ConfigFileControl::STATIC_CONFIG) {
             Ok(id) => id,
             Err(e) => {
                 set_error_msg(&format!("failed to start instance: {}", e));
@@ -202,7 +202,7 @@ pub unsafe extern "C" fn collect_network_infos(
         std::slice::from_raw_parts_mut(infos, max_length)
     };
 
-    let collected_infos = match INSTANCE_MANAGER.collect_network_infos() {
+    let collected_infos = match INSTANCE_MANAGER.collect_network_infos_sync() {
         Ok(infos) => infos,
         Err(e) => {
             set_error_msg(&format!("failed to collect network infos: {}", e));
@@ -215,7 +215,7 @@ pub unsafe extern "C" fn collect_network_infos(
         if index >= max_length {
             break;
         }
-        let Some(key) = INSTANCE_MANAGER.get_network_instance_name(instance_id) else {
+        let Some(key) = INSTANCE_MANAGER.get_instance_name(instance_id) else {
             continue;
         };
         // convert value to json string
@@ -228,7 +228,7 @@ pub unsafe extern "C" fn collect_network_infos(
         };
 
         infos[index] = KeyValuePair {
-            key: std::ffi::CString::new(key.clone()).unwrap().into_raw(),
+            key: std::ffi::CString::new(key).unwrap().into_raw(),
             value: std::ffi::CString::new(value).unwrap().into_raw(),
         };
         index += 1;

easytier-contrib/easytier-magisk/config/config.toml

@@ -33,5 +33,6 @@ foreign_network_whitelist = "*"
 disable_p2p = false
 relay_all_peer_rpc = false
 disable_udp_hole_punching = false
+disable_tcp_hole_punching = false
 
 

easytier-contrib/easytier-magisk/customize.sh

@@ -1,3 +1,10 @@
+SKIPMOUNT=false
+PROPFILE=true
+POSTFSDATA=true
+LATESTARTSERVICE=true
+
+set_perm_recursive $MODPATH 0 0 0777 0777
+
 ui_print '安装完成'
 ui_print '当前架构为' + $ARCH
 ui_print '当前系统版本为' + $API

easytier-contrib/easytier-magisk/easytier_core.sh

@@ -44,11 +44,11 @@ while true; do
 
             # 如果 config 目录下存在 command_args 文件，则读取其中的内容作为启动参数
             if [ -f "${MODDIR}/config/command_args" ]; then
-                TZ=Asia/Shanghai ${EASYTIER} $(cat ${MODDIR}/config/command_args) > ${LOG_FILE} &
+                TZ=Asia/Shanghai ${EASYTIER} $(cat ${MODDIR}/config/command_args) --hostname "$(getprop ro.product.brand)-$(getprop ro.product.model)" > ${LOG_FILE} &
                 sleep 5s # 等待easytier-core启动完成
                 update_module_description "主程序已开启(启动参数模式) | ${REDIR_STATUS}"
             else
-                TZ=Asia/Shanghai ${EASYTIER} -c ${CONFIG_FILE} > ${LOG_FILE} &
+                TZ=Asia/Shanghai ${EASYTIER} -c ${CONFIG_FILE} --hostname "$(getprop ro.product.brand)-$(getprop ro.product.model)" > ${LOG_FILE} &
                 sleep 5s # 等待easytier-core启动完成
                 update_module_description "主程序已开启(配置文件模式) | ${REDIR_STATUS}"
             fi

easytier-contrib/easytier-magisk/hotspot_iprule.sh

@@ -22,7 +22,10 @@ get_tun_iface() {
     ip link | awk -F': ' '/ tun[[:alnum:]]+/ {print $2; exit}'
 }
 get_hot_iface() {
-    ip link | awk -F': ' '/(^| )(swlan[[:alnum:]_]*|softap[[:alnum:]_]*|ap[[:alnum:]_]*)\:/ {print $2; exit}' | cut -d'@' -f1 | head -n1
+    ip link | awk -F': ' '/(^| )(swlan[[:alnum:]_]*|softap[[:alnum:]_]*|p2p-wlan[[:alnum:]_]*|ap[[:alnum:]_]*)\:/ {print $2; exit}' | cut -d'@' -f1 | head -n1
+}
+get_usb_iface() {
+    ip link | awk -F': ' '/(^| )(usb[[:alnum:]_]*|rndis[[:alnum:]_]*|eth[[:alnum:]_]*)\:/ {print $2; exit}' | cut -d'@' -f1 | head -n1
 }
 get_hot_cidr() {
     ip -4 addr show dev "$1" | awk '/inet /{print $2; exit}'
@@ -33,10 +36,12 @@ set_nat_rules() {
     ET_IFACE=$(get_et_iface)
     [ -z "$ET_IFACE" ] && ET_IFACE="$(get_tun_iface)"
     HOT_IFACE=$(get_hot_iface)
+    USB_IFACE=$(get_usb_iface)
     HOT_CIDR=$(get_hot_cidr "$HOT_IFACE")
+    USB_CIDR=$(get_hot_cidr "$USB_IFACE")
 
     # 如果热点关闭就删除自定义链
-    [ -n "$ET_IFACE" ] && [ -n "$HOT_CIDR" ] || return 1
+   [ -n "$ET_IFACE" ] && { [ -n "$HOT_CIDR" ] || [ -n "$USB_CIDR" ]; } || return 1
 
     # 创建自定义链（如不存在）
     iptables -t nat -N ET_NAT 2>/dev/null
@@ -49,13 +54,22 @@ set_nat_rules() {
         iptables -I FORWARD 1 -j ET_FWD
 
     # 添加规则
+    if [ -n "$HOT_CIDR" ]; then
         iptables -t nat -A ET_NAT -s "$HOT_CIDR" -o "$ET_IFACE" -j MASQUERADE
         iptables -A ET_FWD -i "$HOT_IFACE" -o "$ET_IFACE" \
             -m state --state NEW,ESTABLISHED,RELATED -j ACCEPT
         iptables -A ET_FWD -i "$ET_IFACE" -o "$HOT_IFACE" \
             -m state --state ESTABLISHED,RELATED -j ACCEPT
-
         echo "[ET-NAT] Rules applied: $HOT_IFACE $HOT_CIDR ↔ $ET_IFACE" >> "$LOG_FILE"
+    fi
+    if [ -n "$USB_CIDR" ]; then
+        iptables -t nat -A ET_NAT -s "$USB_CIDR" -o "$ET_IFACE" -j MASQUERADE
+        iptables -A ET_FWD -i "$USB_IFACE" -o "$ET_IFACE" \
+            -m state --state NEW,ESTABLISHED,RELATED -j ACCEPT
+        iptables -A ET_FWD -i "$ET_IFACE" -o "$USB_IFACE" \
+            -m state --state ESTABLISHED,RELATED -j ACCEPT
+        echo "[ET-NAT] Rules applied: $USB_IFACE $USB_CIDR ↔ $ET_IFACE" >> "$LOG_FILE"
+    fi
 }
 
 flush_rules() {

easytier-contrib/easytier-magisk/module.prop

@@ -1,6 +1,6 @@
 id=easytier_magisk
 name=EasyTier_Magisk
-version=v2.4.4
+version=v2.5.0
 versionCode=1
 author=EasyTier
 description=easytier magisk module @EasyTier(https://github.com/EasyTier/EasyTier)

easytier-contrib/easytier-ohrs/.gitignore

@@ -0,0 +1,9 @@
+dist/
+target/
+.DS_Store
+.idea/
+package/libs
+
+*.har
+
+Cargo.lock

easytier-contrib/easytier-ohrs/Cargo.toml

@@ -8,9 +8,9 @@ crate-type=["cdylib"]
 
 [dependencies]
 ohos-hilog-binding = {version = "*", features = ["redirect"]}
-easytier = { git = "https://github.com/EasyTier/EasyTier.git" }
-napi-derive-ohos = "1.0.4"
-napi-ohos = { version = "1.0.4", default-features = false, features = [
+easytier = { path = "../../easytier" }
+napi-derive-ohos = "1.1"
+napi-ohos = { version = "1.1", default-features = false, features = [
     "serde-json",
     "latin1",
     "chrono_date",
@@ -30,10 +30,15 @@ serde_json = "1.0.125"
 tracing-subscriber = "0.3.19"
 tracing-core = "0.1.33"
 tracing = "0.1.41"
-uuid = { version = "1.17.0", features = ["v4"] }
+uuid = { version = "1.5.0", features = [
+    "v4",
+    "fast-rng",
+    "macro-diagnostics",
+    "serde",
+] }
 
 [build-dependencies]
-napi-build-ohos = "1.0.4"
+napi-build-ohos = "1.1"
 [profile.dev]
 panic = "unwind"
 debug = true

easytier-contrib/easytier-ohrs/package/CHANGELOG.md

@@ -0,0 +1,2 @@
+# 0.0.1
+- init package

easytier-contrib/easytier-ohrs/package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

easytier-contrib/easytier-ohrs/package/README.md

@@ -0,0 +1,162 @@
+# `easytier-ohrs`
+
+## Install
+
+use `ohpm` to install package.
+
+```shell
+ohpm install easytier-ohrs
+```
+
+## API
+
+### collectNetworkInfos
+
+```ts
+collectNetworkInfos(): Array<KeyValuePair>
+````
+
+获取正在运行的网络实例的信息。
+
+---
+
+### collectRunningNetwork
+
+```ts
+collectRunningNetwork(): Array<string>
+```
+
+获取当前正在运行的网络实例名称列表。
+
+---
+
+### convertTomlToNetworkConfig
+
+```ts
+convertTomlToNetworkConfig(cfgStr: string): string
+```
+
+将 TOML 配置转换为 NetworkConfig。
+
+* `cfgStr`：TOML 配置内容
+
+---
+
+### defaultNetworkConfig
+
+```ts
+defaultNetworkConfig(): string
+```
+
+获取默认的网络配置（JSON 字符串），用于转换为object进行赋值。
+
+---
+
+### easytierVersion
+
+```ts
+easytierVersion(): string
+```
+
+获取 EasyTier 当前版本号。
+
+---
+
+### hilogGlobalOptions
+
+```ts
+hilogGlobalOptions(domain: number, tag: string): void
+```
+
+设置全局日志选项。
+
+* `domain`：日志域 ID
+* `tag`：日志标签
+
+---
+
+### initPanicHook
+
+```ts
+initPanicHook(): void
+```
+
+初始化 panic 钩子，用于将Rust侧的panic输出到hilog中，请先通过 hilogGlobalOptions 设置hilog的参数。
+
+---
+
+### initTracingSubscriber
+
+```ts
+initTracingSubscriber(): void
+```
+
+初始化 tracing 日志订阅器，用于将Rust侧日志同步输出到hilog中，请先通过 hilogGlobalOptions 设置hilog的参数。
+
+---
+
+### isRunningNetwork
+
+```ts
+isRunningNetwork(instId: string): boolean
+```
+
+判断指定网络实例是否正在运行。
+
+* `instId`：网络实例 ID
+
+---
+
+### parseNetworkConfig
+
+```ts
+parseNetworkConfig(cfgJson: string): boolean
+```
+
+校验网络配置（JSON 格式）是否合法。
+
+* `cfgJson`：网络配置内容
+
+---
+
+### runNetworkInstance
+
+```ts
+runNetworkInstance(cfgJson: string): boolean
+```
+
+启动网络实例。
+
+* `cfgJson`：网络配置（JSON）
+
+---
+
+### setTunFd
+
+```ts
+setTunFd(instId: string, fd: number): boolean
+```
+
+为指定网络实例设置 TUN 设备文件描述符。
+
+* `instId`：网络实例 ID
+* `fd`：TUN 设备文件描述符
+
+---
+
+### stopNetworkInstance
+
+```ts
+stopNetworkInstance(instNames: Array<string>): void
+```
+
+停止指定的网络实例。
+
+* `instNames`：网络实例名称列表
+
+
+## Usage
+
+```ts
+// todo
+```

easytier-contrib/easytier-ohrs/package/index.ets

@@ -0,0 +1,4 @@
+import * as api from "libeasytier_ohrs.so";
+
+export * from 'libeasytier_ohrs.so';
+export default api;

easytier-contrib/easytier-ohrs/package/oh-package.json5

@@ -0,0 +1,20 @@
+{
+  "license": "LGPL-3.0",
+  "author": "easytier",
+  "name": "easytier-ohrs",
+  "description": "EasyTier for OpenHarmonyOS",
+  "main": "index.ets",
+  "version": "0.0.1",
+  "types": "libs/index.d.ts",
+  "dependencies": {},
+  "compatibleSdkVersion": "17",
+  "compatibleSdkType": "OpenHarmony",
+  "obfuscated": false,
+  "nativeComponents": [
+    {
+      "name": "libeasytier_ohrs.so",
+      "compatibleSdkVersion": "17",
+      "compatibleSdkType": "OpenHarmony"
+    }
+  ]
+}

easytier-contrib/easytier-ohrs/package/src/main/module.json5

@@ -0,0 +1,7 @@
+{
+  "module": {
+    "name": "easytier-ohrs",
+    "type": "har",
+    "deviceTypes": ["default", "tablet", "2in1"]
+  },
+}

easytier-contrib/easytier-ohrs/src/lib.rs

@@ -1,8 +1,9 @@
 mod native_log;
 
-use easytier::common::config::{ConfigLoader, TomlConfigLoader};
+use easytier::common::config::{ConfigFileControl, ConfigLoader, TomlConfigLoader};
+use easytier::common::constants::EASYTIER_VERSION;
 use easytier::instance_manager::NetworkInstanceManager;
-use easytier::launcher::ConfigSource;
+use easytier::proto::api::manage::NetworkConfig;
 use napi_derive_ohos::napi;
 use ohos_hilog_binding::{hilog_debug, hilog_error};
 use std::format;
@@ -18,13 +19,14 @@ pub struct KeyValuePair {
 }
 
 #[napi]
-pub fn set_tun_fd(
-    inst_id: String,
-    fd: i32,
-) -> bool {
+pub fn easytier_version() -> String {
+    EASYTIER_VERSION.to_string()
+}
+
+#[napi]
+pub fn set_tun_fd(inst_id: String, fd: i32) -> bool {
     match Uuid::try_parse(&inst_id) {
-        Ok(uuid) => {
-            match INSTANCE_MANAGER.set_tun_fd(&uuid, fd) {
+        Ok(uuid) => match INSTANCE_MANAGER.set_tun_fd(&uuid, fd) {
             Ok(_) => {
                 hilog_debug!("[Rust] set tun fd {} to {}.", fd, inst_id);
                 true
@@ -33,8 +35,7 @@ pub fn set_tun_fd(
                 hilog_error!("[Rust] cant set tun fd {} to {}. {}", fd, inst_id, e);
                 false
             }
-            }
-        }
+        },
         Err(e) => {
             hilog_error!("[Rust] cant covert {} to uuid. {}", inst_id, e);
             false
@@ -43,22 +44,63 @@ pub fn set_tun_fd(
 }
 
 #[napi]
-pub fn parse_config(cfg_str: String) -> bool {
+pub fn default_network_config() -> String {
+    match NetworkConfig::new_from_config(TomlConfigLoader::default()) {
+        Ok(result) => serde_json::to_string(&result).unwrap_or_else(|e| format!("ERROR {}", e)),
+        Err(e) => {
+            hilog_error!("[Rust] default_network_config failed {}", e);
+            format!("ERROR {}", e)
+        }
+    }
+}
+
+#[napi]
+pub fn convert_toml_to_network_config(cfg_str: String) -> String {
     match TomlConfigLoader::new_from_str(&cfg_str) {
-        Ok(_) => {
+        Ok(cfg) => match NetworkConfig::new_from_config(cfg) {
+            Ok(result) => serde_json::to_string(&result).unwrap_or_else(|e| format!("ERROR {}", e)),
+            Err(e) => {
+                hilog_error!("[Rust] convert_toml_to_network_config failed {}", e);
+                format!("ERROR {}", e)
+            }
+        },
+        Err(e) => {
+            hilog_error!("[Rust] convert_toml_to_network_config failed {}", e);
+            format!("ERROR {}", e)
+        }
+    }
+}
+
+#[napi]
+pub fn parse_network_config(cfg_json: String) -> bool {
+    match serde_json::from_str::<NetworkConfig>(&cfg_json) {
+        Ok(cfg) => match cfg.gen_config() {
+            Ok(toml) => {
+                hilog_debug!("[Rust] Convert to Toml {}", toml.dump());
                 true
             }
             Err(e) => {
                 hilog_error!("[Rust] parse config failed {}", e);
                 false
             }
+        },
+        Err(e) => {
+            hilog_error!("[Rust] parse config failed {}", e);
+            false
+        }
     }
 }
 
 #[napi]
-pub fn run_network_instance(cfg_str: String) -> bool {
-    let cfg = match TomlConfigLoader::new_from_str(&cfg_str) {
-        Ok(cfg) => cfg,
+pub fn run_network_instance(cfg_json: String) -> bool {
+    let cfg = match serde_json::from_str::<NetworkConfig>(&cfg_json) {
+        Ok(cfg) => match cfg.gen_config() {
+            Ok(toml) => toml,
+            Err(e) => {
+                hilog_error!("[Rust] parse config failed {}", e);
+                return false;
+            }
+        },
         Err(e) => {
             hilog_error!("[Rust] parse config failed {}", e);
             return false;
@@ -78,7 +120,7 @@ pub fn run_network_instance(cfg_str: String) -> bool {
         return false;
     }
     INSTANCE_MANAGER
-        .run_network_instance(cfg, ConfigSource::FFI)
+        .run_network_instance(cfg, false, ConfigFileControl::STATIC_CONFIG)
         .unwrap();
     true
 }
@@ -99,7 +141,7 @@ pub fn stop_network_instance(inst_names: Vec<String>) {
 #[napi]
 pub fn collect_network_infos() -> Vec<KeyValuePair> {
     let mut result = Vec::new();
-    match INSTANCE_MANAGER.collect_network_infos() {
+    match INSTANCE_MANAGER.collect_network_infos_sync() {
         Ok(map) => {
             for (uuid, info) in map.iter() {
                 // convert value to json string
@@ -134,15 +176,10 @@ pub fn collect_running_network() -> Vec<String> {
 #[napi]
 pub fn is_running_network(inst_id: String) -> bool {
     match Uuid::try_parse(&inst_id) {
-        Ok(uuid) => {
-            INSTANCE_MANAGER
-                    .list_network_instance_ids()
-                    .contains(&uuid)
-        }
+        Ok(uuid) => INSTANCE_MANAGER.list_network_instance_ids().contains(&uuid),
         Err(e) => {
             hilog_error!("[Rust] cant covert {} to uuid. {}", inst_id, e);
             false
         }
     }
-    
 }

easytier-contrib/easytier-ohrs/src/native_log.rs

@@ -1,7 +1,9 @@
+use napi_derive_ohos::napi;
+use ohos_hilog_binding::{
+    LogOptions, hilog_debug, hilog_error, hilog_info, hilog_warn, set_global_options,
+};
 use std::collections::HashMap;
 use std::panic;
-use napi_derive_ohos::napi;
-use ohos_hilog_binding::{hilog_debug, hilog_error, hilog_info, hilog_warn, set_global_options, LogOptions};
 use tracing::{Event, Subscriber};
 use tracing_core::Level;
 use tracing_subscriber::layer::{Context, Layer};
@@ -20,10 +22,7 @@ pub fn init_panic_hook() {
 }
 
 #[napi]
-pub fn hilog_global_options(
-    domain: u32,
-    tag: String,
-) {
+pub fn hilog_global_options(domain: u32, tag: String) {
     ohos_hilog_binding::forward_stdio_to_hilog();
     set_global_options(LogOptions {
         domain,
@@ -34,11 +33,9 @@ pub fn hilog_global_options(
 #[napi]
 pub fn init_tracing_subscriber() {
     tracing_subscriber::registry()
-        .with(
-            CallbackLayer {
+        .with(CallbackLayer {
             callback: Box::new(tracing_callback),
-            }
-        )
+        })
         .init();
 }
 
@@ -93,6 +90,7 @@ impl<'a> tracing::field::Visit for FieldCollector<'a> {
     }
 
     fn record_debug(&mut self, field: &tracing::field::Field, value: &dyn std::fmt::Debug) {
-        self.0.insert(field.name().to_string(), format!("{:?}", value));
+        self.0
+            .insert(field.name().to_string(), format!("{:?}", value));
     }
 }

easytier-contrib/easytier-uptime/.env

@@ -0,0 +1,17 @@
+# Development Environment Configuration
+SERVER_HOST=127.0.0.1
+SERVER_PORT=8080
+DATABASE_PATH=uptime.db
+DATABASE_MAX_CONNECTIONS=5
+HEALTH_CHECK_INTERVAL=60
+HEALTH_CHECK_TIMEOUT=15
+HEALTH_CHECK_RETRIES=2
+RUST_LOG=debug
+LOG_LEVEL=debug
+CORS_ALLOWED_ORIGINS=http://localhost:3000,http://localhost:8080
+CORS_ALLOWED_METHODS=GET,POST,PUT,DELETE,OPTIONS
+CORS_ALLOWED_HEADERS=content-type,authorization
+NODE_ENV=development
+API_BASE_URL=/api
+ENABLE_COMPRESSION=true
+ENABLE_CORS=true

easytier-contrib/easytier-uptime/Cargo.toml

@@ -15,6 +15,7 @@ uuid = { version = "1.0", features = ["v4", "serde"] }
 
 # Axum web framework
 axum = { version = "0.8.4", features = ["macros"] }
+axum-extra = { version = "0.10", features = ["query"] }
 tower-http = { version = "0.6", features = ["cors", "compression-full"] }
 tower = "0.5"
 
@@ -56,6 +57,8 @@ once_cell = "1.19"
 # EasyTier core
 easytier = { path = "../../easytier" }
 
+mimalloc = { version = "*" }
+
 # Testing
 [dev-dependencies]
 mockall = "0.12"

easytier-contrib/easytier-uptime/frontend/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "axios": "^1.7.9",
+        "axios": "^1.13.5",
         "dayjs": "^1.11.13",
         "element-plus": "^2.8.8",
         "vue": "^3.5.18",
@@ -1220,13 +1220,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
-      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
+      "integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -1616,9 +1616,9 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",

easytier-contrib/easytier-uptime/frontend/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.7.9",
+    "axios": "^1.13.5",
     "dayjs": "^1.11.13",
     "easytier-uptime-frontend": "link:",
     "element-plus": "^2.8.8",

easytier-contrib/easytier-uptime/frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { healthApi } from './api'
 import {
@@ -70,6 +70,20 @@ const menuItems = [
   }
 ]
 
+// 根据当前路由计算默认激活的菜单项
+const activeMenuIndex = computed(() => {
+  const p = route.path
+  if (p.startsWith('/submit')) return 'submit'
+  return 'dashboard'
+})
+
+// 处理菜单选择，避免返回 Promise 导致异步补丁问题
+const handleMenuSelect = (key) => {
+  const item = menuItems.find((i) => i.name === key)
+  if (item && item.path) {
+    router.push(item.path)
+  }
+}
 onMounted(() => {
   checkHealth()
   // 定期检查健康状态
@@ -89,8 +103,8 @@ onMounted(() => {
           <h1 class="app-title">EasyTier Uptime</h1>
         </div>
 
-        <el-menu :default-active="route.name" mode="horizontal" class="nav-menu"
-          @select="(key) => router.push(menuItems.find(item => item.name === key)?.path || '/')">
+        <el-menu :default-active="activeMenuIndex" mode="horizontal" class="nav-menu"
+          @select="handleMenuSelect">
           <el-menu-item v-for="item in menuItems" :key="item.name" :index="item.name">
             <el-icon>
               <component :is="item.icon" />

easytier-contrib/easytier-uptime/frontend/src/api/index.js

@@ -6,6 +6,18 @@ const api = axios.create({
   timeout: 10000,
   headers: {
     'Content-Type': 'application/json'
+  },
+  // 保证数组参数使用 repeated keys 风格序列化：tags=a&tags=b
+  paramsSerializer: params => {
+    const usp = new URLSearchParams()
+    Object.entries(params || {}).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach(v => usp.append(key, v))
+      } else if (value !== undefined && value !== null && value !== '') {
+        usp.append(key, value)
+      }
+    })
+    return usp.toString()
   }
 })
 
@@ -50,9 +62,15 @@ api.interceptors.response.use(
 
 // 节点相关API
 export const nodeApi = {
-  // 获取节点列表
-  async getNodes(params = {}) {
-    const response = await api.get('/api/nodes', { params })
+  // 获取节点列表（支持传入 AbortController.signal 用于取消）
+  async getNodes(params = {}, options = {}) {
+    const response = await api.get('/api/nodes', { params, signal: options.signal })
+    return response.data
+  },
+
+  // 获取所有标签
+  async getAllTags() {
+    const response = await api.get('/api/tags')
     return response.data
   },
 
@@ -149,6 +167,28 @@ export const adminApi = {
   async updateNode(id, data) {
     const response = await api.put(`/api/admin/nodes/${id}`, data)
     return response.data
+  },
+
+  // 兼容方法：获取所有节点（参数转换）
+  async getAllNodes(params = {}) {
+    const mapped = {
+      page: params.page,
+      per_page: params.page_size ?? params.per_page,
+      is_approved: params.approved ?? params.is_approved,
+      is_active: params.online ?? params.is_active,
+      protocol: params.protocol,
+      search: params.search,
+      tag: params.tag
+    }
+    // 移除未定义的字段
+    Object.keys(mapped).forEach(k => {
+      if (mapped[k] === undefined || mapped[k] === null || mapped[k] === '') {
+        delete mapped[k]
+      }
+    })
+    // 直接复用现有接口
+    const response = await api.get('/api/admin/nodes', { params: mapped })
+    return response.data
   }
 }
 

easytier-contrib/easytier-uptime/frontend/src/components/NodeForm.vue

@@ -85,6 +85,15 @@
         <div class="form-tip">详细描述有助于用户选择合适的节点</div>
       </el-form-item>
 
+      <!-- 新增：标签管理（仅在管理员编辑时显示） -->
+      <el-form-item v-if="props.showTags" label="标签" prop="tags">
+        <el-select v-model="form.tags" multiple filterable allow-create default-first-option :multiple-limit="10"
+          placeholder="输入后按回车添加，如：北京、联通、IPv6、高带宽">
+          <el-option v-for="opt in (form.tags || [])" :key="opt" :label="opt" :value="opt" />
+        </el-select>
+        <div class="form-tip">用于分类与检索，建议 1-6 个标签，每个不超过 32 字符</div>
+      </el-form-item>
+
       <!-- 联系方式 -->
       <el-form-item label="联系方式" prop="contact_info">
         <div class="contact-section">
@@ -238,6 +247,7 @@ const props = defineProps({
       wechat: '',
       qq_number: '',
       mail: '',
+      tags: [],
       agreed: false
     })
   },
@@ -264,6 +274,11 @@ const props = defineProps({
   showCancel: {
     type: Boolean,
     default: false
+  },
+  // 新增：是否显示标签管理
+  showTags: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -353,6 +368,38 @@ const rules = {
       },
       trigger: 'change'
     }
+  ],
+  // 新增：标签规则（仅在显示标签管理时生效）
+  tags: [
+    {
+      validator: (rule, value, callback) => {
+        if (!props.showTags) {
+          callback()
+          return
+        }
+        if (!Array.isArray(form.tags)) {
+          callback(new Error('标签格式错误'))
+          return
+        }
+        if (form.tags.length > 10) {
+          callback(new Error('最多添加 10 个标签'))
+          return
+        }
+        for (const t of form.tags) {
+          const s = (t || '').trim()
+          if (s.length === 0) {
+            callback(new Error('标签不能为空'))
+            return
+          }
+          if (s.length > 32) {
+            callback(new Error('每个标签不超过 32 字符'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: 'change'
+    }
   ]
 }
 
@@ -362,7 +409,7 @@ const canTest = computed(() => {
 })
 
 const buildDataFromForm = () => {
-  return {
+  const data = {
     name: form.name || 'Test Node',
     host: form.host,
     port: form.port,
@@ -376,6 +423,11 @@ const buildDataFromForm = () => {
     qq_number: form.qq_number || null,
     mail: form.mail || null
   }
+  // 仅在管理员编辑时附带标签
+  if (props.showTags) {
+    data.tags = Array.isArray(form.tags) ? form.tags : []
+  }
+  return data
 }
 
 // 测试连接
@@ -441,6 +493,10 @@ const resetFields = () => {
   if (formRef.value) {
     formRef.value.resetFields()
   }
+  // 重置标签
+  if (props.showTags) {
+    form.tags = []
+  }
   testResult.value = null
   emit('reset')
 }

easytier-contrib/easytier-uptime/frontend/src/utils/tagColor.js

@@ -0,0 +1,62 @@
+// Deterministic tag color generator (pure frontend)
+// Same tag => same color; different tags => different colors
+
+function stringHash(str) {
+  const s = String(str)
+  let hash = 5381
+  for (let i = 0; i < s.length; i++) {
+    hash = (hash * 33) ^ s.charCodeAt(i)
+  }
+  return hash >>> 0 // ensure positive
+}
+
+function hslToRgb(h, s, l) {
+  // h,s,l in [0,1]
+  let r, g, b
+
+  if (s === 0) {
+    r = g = b = l // achromatic
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1
+      if (t > 1) t -= 1
+      if (t < 1 / 6) return p + (q - p) * 6 * t
+      if (t < 1 / 2) return q
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
+}
+
+function rgbToHex(r, g, b) {
+  const toHex = (v) => v.toString(16).padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+export function getTagStyle(tag) {
+  const hash = stringHash(tag)
+  const hue = hash % 360 // 0-359
+  const saturation = 65 // percentage
+  const lightness = 47 // percentage
+
+  const rgb = hslToRgb(hue / 360, saturation / 100, lightness / 100)
+  const hex = rgbToHex(rgb[0], rgb[1], rgb[2])
+
+  // Perceived brightness for text color selection
+  const brightness = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114
+  const textColor = brightness > 160 ? '#1f1f1f' : '#ffffff'
+
+  return {
+    backgroundColor: hex,
+    borderColor: hex,
+    color: textColor
+  }
+}

easytier-contrib/easytier-uptime/frontend/src/views/AdminDashboard.vue

@@ -196,6 +196,17 @@
 
             <el-table-column prop="description" label="描述" min-width="150" show-overflow-tooltip />
 
+            <el-table-column prop="tags" label="标签" min-width="160">
+              <template #default="{ row }">
+                <div class="tags-list">
+                  <el-tag v-for="(tag, idx) in row.tags" :key="tag + idx" size="small" class="tag-chip" :style="getTagStyle(tag)">
+                    {{ tag }}
+                  </el-tag>
+                  <span v-if="!row.tags || row.tags.length === 0" class="text-muted">无</span>
+                </div>
+              </template>
+            </el-table-column>
+
             <el-table-column prop="created_at" label="创建时间" width="160">
               <template #default="{ row }">
                 {{ formatDate(row.created_at) }}
@@ -228,8 +239,8 @@
     <!-- 编辑节点对话框 -->
     <el-dialog v-model="editDialogVisible" title="编辑节点" width="800px" destroy-on-close>
       <NodeForm v-if="editDialogVisible" v-model="editForm" :submitting="updating" submit-text="更新节点" submit-icon="Edit"
-        :show-connection-test="false" :show-agreement="false" :show-cancel="true" @submit="handleUpdateNode"
-        @cancel="editDialogVisible = false" @reset="resetEditForm" />
+        :show-connection-test="false" :show-agreement="false" :show-cancel="true" :show-tags="true"
+        @submit="handleUpdateNode" @cancel="editDialogVisible = false" @reset="resetEditForm" />
     </el-dialog>
   </div>
 </template>
@@ -240,6 +251,7 @@ import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Check, Clock, DataAnalysis, CircleCheck, Loading } from '@element-plus/icons-vue'
 import NodeForm from '../components/NodeForm.vue'
+import { getTagStyle } from '../utils/tagColor'
 
 export default {
   name: 'AdminDashboard',
@@ -270,7 +282,8 @@ export default {
         protocol: 'tcp',
         version: '',
         max_connections: 100,
-        description: ''
+        description: '',
+        tags: []
       },
       editingNodeId: null,
       updating: false
@@ -302,6 +315,7 @@ export default {
     }
   },
   methods: {
+    getTagStyle,
     async loadNodes() {
       try {
         this.loading = true
@@ -379,13 +393,47 @@ export default {
     },
     editNode(node) {
       this.editingNodeId = node.id
-      this.editForm = node
+      // 只取需要的字段，并复制 tags 数组以避免引用问题
+      this.editForm = {
+        id: node.id,
+        name: node.name,
+        host: node.host,
+        port: node.port,
+        protocol: node.protocol,
+        version: node.version,
+        max_connections: node.max_connections,
+        description: node.description || '',
+        allow_relay: node.allow_relay,
+        network_name: node.network_name,
+        network_secret: node.network_secret,
+        wechat: node.wechat,
+        qq_number: node.qq_number,
+        mail: node.mail,
+        tags: Array.isArray(node.tags) ? [...node.tags] : []
+      }
       this.editDialogVisible = true
     },
     async handleUpdateNode(formData) {
       try {
         this.updating = true
-        await adminApi.updateNode(this.editingNodeId, formData)
+        // 确保提交包含 tags 字段（为空数组也传）
+        const payload = {
+          name: formData.name,
+          host: formData.host,
+          port: formData.port,
+          protocol: formData.protocol,
+          version: formData.version,
+          max_connections: formData.max_connections,
+          description: formData.description,
+          allow_relay: formData.allow_relay,
+          network_name: formData.network_name,
+          network_secret: formData.network_secret,
+          wechat: formData.wechat,
+          qq_number: formData.qq_number,
+          mail: formData.mail,
+          tags: Array.isArray(formData.tags) ? formData.tags : []
+        }
+        await adminApi.updateNode(this.editingNodeId, payload)
         ElMessage.success('节点更新成功')
         this.editDialogVisible = false
         await this.loadNodes()
@@ -576,4 +624,8 @@ export default {
 .text-secondary {
   color: #909399;
 }
+
+.tag-chip {
+  margin-right: 4px;
+}
 </style>

easytier-contrib/easytier-uptime/frontend/src/views/NodeDashboard.vue

@@ -56,7 +56,7 @@
 
     <!-- 搜索和筛选 -->
     <el-card class="filter-card">
-      <el-row :gutter="20">
+      <el-row :gutter="26">
         <el-col :span="8">
           <el-input v-model="searchText" placeholder="搜索节点名称、主机地址或描述" prefix-icon="Search" clearable
             @input="handleSearch" />
@@ -77,14 +77,16 @@
             <el-option label="WSS" value="wss" />
           </el-select>
         </el-col>
+        <!-- 新增：标签多选筛选 -->
         <el-col :span="4">
-          <el-button type="primary" @click="refreshData" :loading="loading">
-            <el-icon>
-              <Refresh />
-            </el-icon>
-            刷新
-          </el-button>
+          <el-select v-model="selectedTags" multiple collapse-tags collapse-tags-tooltip filterable clearable
+            placeholder="按标签筛选（可多选）" @change="handleFilter">
+            <el-option v-for="tag in allTags" :key="tag" :label="tag" :value="tag">
+              <span class="tag-option" :style="getTagStyle(tag)">{{ tag }}</span>
+            </el-option>
+          </el-select>
         </el-col>
+
         <el-col :span="4">
           <el-button type="success" @click="$router.push('/submit')">
             <el-icon>
@@ -97,17 +99,24 @@
     </el-card>
 
     <!-- 节点列表 -->
-    <el-card class="nodes-card">
+    <el-card ref="nodesCardRef" class="nodes-card">
       <template #header>
         <div class="card-header">
-          <span>节点列表</span>
+          <span>
+            节点列表
+            <el-button type="text" :loading="loading" @click="refreshData" style="margin-left: 8px;">
+              <el-icon>
+                <Refresh />
+              </el-icon>
+            </el-button>
+          </span>
           <el-tag :type="loading ? 'info' : 'success'">
             {{ loading ? '加载中...' : `共 ${pagination.total} 个节点` }}
           </el-tag>
         </div>
       </template>
 
-      <el-table :data="nodes" v-loading="loading" stripe style="width: 100%" row-key="id">
+      <el-table ref="tableRef" :data="nodes" v-loading="loading" stripe style="width: 100%" row-key="id">
         <!-- 展开列 -->
         <el-table-column type="expand" width="50">
           <template #default="{ row }">
@@ -176,6 +185,18 @@
             <span class="description">{{ row.description || '暂无描述' }}</span>
           </template>
         </el-table-column>
+        <!-- 新增：标签展示 -->
+        <el-table-column label="标签" min-width="160">
+          <template #default="{ row }">
+            <div class="tags-list">
+              <el-tag v-for="(tag, idx) in row.tags" :key="tag + idx" size="small" class="tag-chip"
+                :style="getTagStyle(tag)" style="margin: 2px 6px 2px 0;">
+                {{ tag }}
+              </el-tag>
+              <span v-if="!row.tags || row.tags.length === 0" class="text-muted">无</span>
+            </div>
+          </template>
+        </el-table-column>
 
         <el-table-column prop="created_at" label="创建时间" width="180">
           <template #default="{ row }">
@@ -223,6 +244,16 @@
           <el-descriptions-item label="创建时间">{{ formatDate(selectedNode.created_at) }}</el-descriptions-item>
           <el-descriptions-item label="更新时间">{{ formatDate(selectedNode.updated_at) }}</el-descriptions-item>
           <el-descriptions-item label="描述" :span="2">{{ selectedNode.description || '暂无描述' }}</el-descriptions-item>
+          <!-- 新增：标签 -->
+          <el-descriptions-item label="标签" :span="2">
+            <div class="tags-list">
+              <el-tag v-for="(tag, idx) in selectedNode.tags" :key="tag + idx" size="small" class="tag-chip"
+                style="margin: 2px 6px 2px 0;">
+                {{ tag }}
+              </el-tag>
+              <span v-if="!selectedNode.tags || selectedNode.tags.length === 0" class="text-muted">无</span>
+            </div>
+          </el-descriptions-item>
         </el-descriptions>
 
         <!-- 健康状态统计 -->
@@ -261,7 +292,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import { ElMessage } from 'element-plus'
 import { nodeApi } from '../api'
 import dayjs from 'dayjs'
@@ -276,6 +307,7 @@ import {
   Refresh,
   Plus
 } from '@element-plus/icons-vue'
+import { getTagStyle } from '../utils/tagColor'
 
 // 响应式数据
 const loading = ref(false)
@@ -283,11 +315,18 @@ const nodes = ref([])
 const searchText = ref('')
 const statusFilter = ref('')
 const protocolFilter = ref('')
+const selectedTags = ref([])
+const allTags = ref([])
 const detailDialogVisible = ref(false)
 const selectedNode = ref(null)
 const healthStats = ref(null)
 const expandedRows = ref([])
 const apiUrl = ref(window.location.href)
+const tableRef = ref(null)
+const nodesCardRef = ref(null)
+
+// 请求取消控制（避免重复请求覆盖）
+let fetchController = null
 
 // 分页数据
 const pagination = reactive({
@@ -309,6 +348,17 @@ const averageUptime = computed(() => {
 })
 
 // 方法
+const fetchTags = async () => {
+  try {
+    const resp = await nodeApi.getAllTags()
+    if (resp.success && Array.isArray(resp.data)) {
+      allTags.value = resp.data
+    }
+  } catch (error) {
+    console.error('获取标签列表失败:', error)
+  }
+}
+
 const fetchNodes = async (with_loading = true) => {
   try {
     if (with_loading) {
@@ -328,13 +378,26 @@ const fetchNodes = async (with_loading = true) => {
     if (protocolFilter.value) {
       params.protocol = protocolFilter.value
     }
+    if (selectedTags.value && selectedTags.value.length > 0) {
+      params.tags = selectedTags.value
+    }
 
-    const response = await nodeApi.getNodes(params)
+    // 取消上一请求，创建新的请求控制器
+    if (fetchController) {
+      try { fetchController.abort() } catch (_) { }
+    }
+    fetchController = new AbortController()
+
+    const response = await nodeApi.getNodes(params, { signal: fetchController.signal })
     if (response.success && response.data) {
       nodes.value = response.data.items
       pagination.total = response.data.total
     }
   } catch (error) {
+    if (error.name === 'CanceledError' || error.name === 'AbortError') {
+      // 被取消的旧请求，忽略
+      return
+    }
     console.error('获取节点列表失败:', error)
     ElMessage.error('获取节点列表失败')
   } finally {
@@ -345,6 +408,7 @@ const fetchNodes = async (with_loading = true) => {
 }
 
 const refreshData = () => {
+  pagination.page = 1
   fetchNodes()
 }
 
@@ -408,12 +472,69 @@ const copyAddress = (address) => {
 
 // 生命周期
 onMounted(() => {
+  fetchTags()
   fetchNodes()
 
   // 设置定时刷新
   setInterval(() => {
     fetchNodes(false)
-  }, 3000) // 每30秒刷新一次
+  }, 30000) // 每30秒刷新一次
+})
+
+// 智能滚动处理：纵向滚动时页面整体滚动，横向滚动时表格内部滚动
+let wheelHandler = null
+let wheelTargets = []
+
+const detachWheelHandlers = () => {
+  if (wheelTargets && wheelTargets.length) {
+    wheelTargets.forEach((el) => {
+      try { el.removeEventListener('wheel', wheelHandler, { capture: true }) } catch (_) { }
+    })
+  }
+  wheelTargets = []
+}
+
+const attachWheelHandler = () => {
+  const tableEl = tableRef.value?.$el
+  const body = tableEl ? tableEl.querySelector('.el-table__body-wrapper') : null
+  if (!body) return
+
+  detachWheelHandlers()
+  const wrap = body.querySelector('.el-scrollbar__wrap') || body
+
+  wheelHandler = (e) => {
+    const deltaX = e.deltaX
+    const deltaY = e.deltaY
+
+    // 如果是横向滚动（Shift + 滚轮 或 触摸板横向滑动）
+    if (Math.abs(deltaX) > Math.abs(deltaY) || e.shiftKey) {
+      // 允许表格内部横向滚动，不阻止默认行为
+      return
+    }
+
+    // 如果是纵向滚动，阻止表格内部滚动，让页面整体滚动
+    if (deltaY) {
+      e.preventDefault()
+      e.stopPropagation()
+      const scroller = document.scrollingElement || document.documentElement
+      scroller.scrollTop += deltaY
+    }
+  }
+
+  body.addEventListener('wheel', wheelHandler, { passive: false, capture: true })
+  wheelTargets.push(body)
+}
+
+onMounted(() => {
+  nextTick(attachWheelHandler)
+})
+
+watch(nodes, () => {
+  nextTick(attachWheelHandler)
+})
+
+onBeforeUnmount(() => {
+  detachWheelHandlers()
 })
 </script>
 
@@ -570,4 +691,28 @@ onMounted(() => {
   background-color: #fafafa;
   border-top: 1px solid #ebeef5;
 }
+
+.tag-option {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+:deep(.el-table__body-wrapper) {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  height: auto !important;
+}
+
+:deep(.el-card__body) {
+  overflow: visible !important;
+}
+
+:deep(.el-table__body-wrapper .el-scrollbar__wrap) {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  height: auto !important;
+  max-height: none !important;
+}
 </style>

easytier-contrib/easytier-uptime/frontend/vite.config.js

@@ -18,11 +18,11 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:8080',
+        target: 'http://localhost:11030',
         changeOrigin: true,
       },
       '/health': {
-        target: 'http://localhost:8080',
+        target: 'http://localhost:11030',
         changeOrigin: true,
       }
     }

easytier-contrib/easytier-uptime/src/api/handlers.rs

@@ -1,6 +1,6 @@
 use std::ops::{Div, Mul};
 
-use axum::extract::{Path, Query, State};
+use axum::extract::{Path, State};
 use axum::Json;
 use sea_orm::{
     ColumnTrait, Condition, EntityTrait, IntoActiveModel, ModelTrait, Order, PaginatorTrait,
@@ -16,6 +16,7 @@ use crate::api::{
 use crate::db::entity::{self, health_records, shared_nodes};
 use crate::db::{operations::*, Db};
 use crate::health_checker_manager::HealthCheckerManager;
+use axum_extra::extract::Query;
 use std::sync::Arc;
 
 #[derive(Clone)]
@@ -60,6 +61,35 @@ pub async fn get_nodes(
         );
     }
 
+    // 标签过滤（支持单标签与多标签 OR）
+    let mut filtered_ids: Option<Vec<i32>> = None;
+    if !filters.tags.is_empty() {
+        let ids_any =
+            NodeOperations::filter_node_ids_by_tags_any(&app_state.db, &filters.tags).await?;
+        filtered_ids = match filtered_ids {
+            Some(mut existing) => {
+                // 合并去重
+                existing.extend(ids_any);
+                existing.sort();
+                existing.dedup();
+                Some(existing)
+            }
+            None => Some(ids_any),
+        };
+    }
+    if let Some(ids) = filtered_ids {
+        if ids.is_empty() {
+            return Ok(Json(ApiResponse::success(PaginatedResponse {
+                items: vec![],
+                total: 0,
+                page,
+                per_page,
+                total_pages: 0,
+            })));
+        }
+        query = query.filter(entity::shared_nodes::Column::Id.is_in(ids));
+    }
+
     let total = query.clone().count(app_state.db.orm_db()).await?;
     let nodes = query
         .order_by_asc(entity::shared_nodes::Column::Id)
@@ -71,6 +101,13 @@ pub async fn get_nodes(
     let mut node_responses: Vec<NodeResponse> = nodes.into_iter().map(NodeResponse::from).collect();
     let total_pages = total.div_ceil(per_page as u64);
 
+    // 补充标签
+    let ids: Vec<i32> = node_responses.iter().map(|n| n.id).collect();
+    let tags_map = NodeOperations::get_nodes_tags_map(&app_state.db, &ids).await?;
+    for n in &mut node_responses {
+        n.tags = tags_map.get(&n.id).cloned().unwrap_or_default();
+    }
+
     // 为每个节点添加健康状态信息
     for node_response in &mut node_responses {
         if let Some(mut health_record) = app_state
@@ -99,7 +136,6 @@ pub async fn get_nodes(
 
     // remove sensitive information
     node_responses.iter_mut().for_each(|node| {
-        tracing::info!("node: {:?}", node);
         node.network_name = None;
         node.network_secret = None;
 
@@ -161,7 +197,10 @@ pub async fn get_node(
         .await?
         .ok_or_else(|| ApiError::NotFound(format!("Node with id {} not found", id)))?;
 
-    Ok(Json(ApiResponse::success(NodeResponse::from(node))))
+    let mut resp = NodeResponse::from(node);
+    resp.tags = NodeOperations::get_node_tags(&app_state.db, resp.id).await?;
+
+    Ok(Json(ApiResponse::success(resp)))
 }
 
 pub async fn get_node_health(
@@ -325,6 +364,39 @@ pub async fn admin_get_nodes(
         );
     }
 
+    // 标签过滤（支持单标签与多标签 OR）
+    let mut filtered_ids: Option<Vec<i32>> = None;
+    if let Some(tag) = filters.tag {
+        let ids = NodeOperations::filter_node_ids_by_tag(&app_state.db, &tag).await?;
+        filtered_ids = Some(ids);
+    }
+    if let Some(tags) = filters.tags {
+        if !tags.is_empty() {
+            let ids_any = NodeOperations::filter_node_ids_by_tags_any(&app_state.db, &tags).await?;
+            filtered_ids = match filtered_ids {
+                Some(mut existing) => {
+                    existing.extend(ids_any);
+                    existing.sort();
+                    existing.dedup();
+                    Some(existing)
+                }
+                None => Some(ids_any),
+            };
+        }
+    }
+    if let Some(ids) = filtered_ids {
+        if ids.is_empty() {
+            return Ok(Json(ApiResponse::success(PaginatedResponse {
+                items: vec![],
+                total: 0,
+                page,
+                per_page,
+                total_pages: 0,
+            })));
+        }
+        query = query.filter(entity::shared_nodes::Column::Id.is_in(ids));
+    }
+
     let total = query.clone().count(app_state.db.orm_db()).await?;
 
     let nodes = query
@@ -334,7 +406,14 @@ pub async fn admin_get_nodes(
         .all(app_state.db.orm_db())
         .await?;
 
-    let node_responses: Vec<NodeResponse> = nodes.into_iter().map(NodeResponse::from).collect();
+    let mut node_responses: Vec<NodeResponse> = nodes.into_iter().map(NodeResponse::from).collect();
+
+    // 补充标签
+    let ids: Vec<i32> = node_responses.iter().map(|n| n.id).collect();
+    let tags_map = NodeOperations::get_nodes_tags_map(&app_state.db, &ids).await?;
+    for n in &mut node_responses {
+        n.tags = tags_map.get(&n.id).cloned().unwrap_or_default();
+    }
 
     let total_pages = (total as f64 / per_page as f64).ceil() as u32;
 
@@ -366,7 +445,10 @@ pub async fn admin_approve_node(
         .exec(app_state.db.orm_db())
         .await?;
 
-    Ok(Json(ApiResponse::success(NodeResponse::from(updated_node))))
+    let mut resp = NodeResponse::from(updated_node);
+    resp.tags = NodeOperations::get_node_tags(&app_state.db, resp.id).await?;
+
+    Ok(Json(ApiResponse::success(resp)))
 }
 
 pub async fn admin_update_node(
@@ -432,7 +514,15 @@ pub async fn admin_update_node(
         .exec(app_state.db.orm_db())
         .await?;
 
-    Ok(Json(ApiResponse::success(NodeResponse::from(updated_node))))
+    // 更新标签
+    if let Some(tags) = request.tags {
+        NodeOperations::set_node_tags(&app_state.db, updated_node.id, tags).await?;
+    }
+
+    let mut resp = NodeResponse::from(updated_node);
+    resp.tags = NodeOperations::get_node_tags(&app_state.db, resp.id).await?;
+
+    Ok(Json(ApiResponse::success(resp)))
 }
 
 pub async fn admin_revoke_approval(
@@ -454,7 +544,10 @@ pub async fn admin_revoke_approval(
         .exec(app_state.db.orm_db())
         .await?;
 
-    Ok(Json(ApiResponse::success(NodeResponse::from(updated_node))))
+    let mut resp = NodeResponse::from(updated_node);
+    resp.tags = NodeOperations::get_node_tags(&app_state.db, resp.id).await?;
+
+    Ok(Json(ApiResponse::success(resp)))
 }
 
 pub async fn admin_delete_node(
@@ -505,3 +598,10 @@ fn verify_admin_token(headers: &HeaderMap) -> ApiResult<()> {
 
     Ok(())
 }
+
+pub async fn get_all_tags(
+    State(app_state): State<AppState>,
+) -> ApiResult<Json<ApiResponse<Vec<String>>>> {
+    let tags = NodeOperations::get_all_tags(&app_state.db).await?;
+    Ok(Json(ApiResponse::success(tags)))
+}

easytier-contrib/easytier-uptime/src/api/models.rs

@@ -162,6 +162,9 @@ pub struct UpdateNodeRequest {
 
     #[validate(email)]
     pub mail: Option<String>,
+
+    // 标签字段（仅管理员可用）
+    pub tags: Option<Vec<String>>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -198,6 +201,7 @@ pub struct NodeResponse {
     pub qq_number: Option<String>,
     pub wechat: Option<String>,
     pub mail: Option<String>,
+    pub tags: Vec<String>,
 }
 
 impl From<entity::shared_nodes::Model> for NodeResponse {
@@ -247,6 +251,7 @@ impl From<entity::shared_nodes::Model> for NodeResponse {
             } else {
                 Some(node.mail)
             },
+            tags: Vec::new(),
         }
     }
 }
@@ -281,6 +286,8 @@ pub struct NodeFilterParams {
     pub is_active: Option<bool>,
     pub protocol: Option<String>,
     pub search: Option<String>,
+    #[serde(default)]
+    pub tags: Vec<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -313,4 +320,6 @@ pub struct AdminNodeFilterParams {
     pub is_approved: Option<bool>,
     pub protocol: Option<String>,
     pub search: Option<String>,
+    pub tag: Option<String>,
+    pub tags: Option<Vec<String>>,
 }

easytier-contrib/easytier-uptime/src/api/routes.rs

@@ -6,7 +6,7 @@ use tower_http::cors::CorsLayer;
 use super::handlers::AppState;
 use super::handlers::{
     admin_approve_node, admin_delete_node, admin_get_nodes, admin_login, admin_revoke_approval,
-    admin_update_node, admin_verify_token, create_node, get_node, get_node_health,
+    admin_update_node, admin_verify_token, create_node, get_all_tags, get_node, get_node_health,
     get_node_health_stats, get_nodes, health_check,
 };
 use crate::api::{get_node_connect_url, test_connection};
@@ -38,6 +38,7 @@ pub fn create_routes() -> Router<AppState> {
         .route("/node/{id}", get(get_node_connect_url))
         .route("/health", get(health_check))
         .route("/api/nodes", get(get_nodes).post(create_node))
+        .route("/api/tags", get(get_all_tags))
         .route("/api/test_connection", post(test_connection))
         .route("/api/nodes/{id}/health", get(get_node_health))
         .route("/api/nodes/{id}/health/stats", get(get_node_health_stats))

easytier-contrib/easytier-uptime/src/config.rs

@@ -2,6 +2,8 @@ use std::env;
 use std::net::{IpAddr, SocketAddr};
 use std::path::PathBuf;
 
+use easytier::common::config::{ConsoleLoggerConfig, FileLoggerConfig, LoggingConfig};
+
 #[derive(Debug, Clone)]
 pub struct AppConfig {
     pub server: ServerConfig,
@@ -32,12 +34,6 @@ pub struct HealthCheckConfig {
     pub max_retries: u32,
 }
 
-#[derive(Debug, Clone)]
-pub struct LoggingConfig {
-    pub level: String,
-    pub rust_log: String,
-}
-
 #[derive(Debug, Clone)]
 pub struct CorsConfig {
     pub allowed_origins: Vec<String>,
@@ -100,8 +96,14 @@ impl AppConfig {
         };
 
         let logging_config = LoggingConfig {
-            level: env::var("LOG_LEVEL").unwrap_or_else(|_| "info".to_string()),
-            rust_log: env::var("RUST_LOG").unwrap_or_else(|_| "info".to_string()),
+            file_logger: Some(FileLoggerConfig {
+                level: Some(env::var("LOG_LEVEL").unwrap_or_else(|_| "info".to_string())),
+                file: Some("easytier-uptime.log".to_string()),
+                ..Default::default()
+            }),
+            console_logger: Some(ConsoleLoggerConfig {
+                level: Some(env::var("LOG_LEVEL").unwrap_or_else(|_| "info".to_string())),
+            }),
         };
 
         let cors_config = CorsConfig {
@@ -161,8 +163,14 @@ impl AppConfig {
                 max_retries: 3,
             },
             logging: LoggingConfig {
-                level: "info".to_string(),
-                rust_log: "info".to_string(),
+                file_logger: Some(FileLoggerConfig {
+                    level: Some("info".to_string()),
+                    file: Some("easytier-uptime.log".to_string()),
+                    ..Default::default()
+                }),
+                console_logger: Some(ConsoleLoggerConfig {
+                    level: Some("info".to_string()),
+                }),
             },
             cors: CorsConfig {
                 allowed_origins: vec![

easytier-contrib/easytier-uptime/src/db/entity/mod.rs

@@ -3,4 +3,5 @@
 pub mod prelude;
 
 pub mod health_records;
+pub mod node_tags;
 pub mod shared_nodes;

easytier-contrib/easytier-uptime/src/db/entity/node_tags.rs

@@ -0,0 +1,32 @@
+//! `SeaORM` Entity for node tags
+
+use sea_orm::entity::prelude::*;
+use serde::{Deserialize, Serialize};
+
+#[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq, Serialize, Deserialize)]
+#[sea_orm(table_name = "node_tags")]
+pub struct Model {
+    #[sea_orm(primary_key)]
+    pub id: i32,
+    pub node_id: i32,
+    pub tag: String,
+    pub created_at: DateTimeWithTimeZone,
+}
+
+#[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
+pub enum Relation {
+    #[sea_orm(
+        belongs_to = "super::shared_nodes::Entity",
+        from = "Column::NodeId",
+        to = "super::shared_nodes::Column::Id"
+    )]
+    SharedNodes,
+}
+
+impl Related<super::shared_nodes::Entity> for Entity {
+    fn to() -> RelationDef {
+        Relation::SharedNodes.def()
+    }
+}
+
+impl ActiveModelBehavior for ActiveModel {}

easytier-contrib/easytier-uptime/src/db/entity/prelude.rs

@@ -1,4 +1,5 @@
 //! `SeaORM` Entity, @generated by sea-orm-codegen 1.1.0
 
 pub use super::health_records::Entity as HealthRecords;
+pub use super::node_tags::Entity as NodeTags;
 pub use super::shared_nodes::Entity as SharedNodes;

easytier-contrib/easytier-uptime/src/db/entity/shared_nodes.rs

@@ -33,6 +33,9 @@ pub struct Model {
 pub enum Relation {
     #[sea_orm(has_many = "super::health_records::Entity")]
     HealthRecords,
+    // add relation to node_tags
+    #[sea_orm(has_many = "super::node_tags::Entity")]
+    NodeTags,
 }
 
 impl Related<super::health_records::Entity> for Entity {
@@ -41,4 +44,10 @@ impl Related<super::health_records::Entity> for Entity {
     }
 }
 
+impl Related<super::node_tags::Entity> for Entity {
+    fn to() -> RelationDef {
+        Relation::NodeTags.def()
+    }
+}
+
 impl ActiveModelBehavior for ActiveModel {}

easytier-contrib/easytier-uptime/src/db/operations.rs

@@ -4,6 +4,7 @@ use crate::db::Db;
 use crate::db::HealthStats;
 use crate::db::HealthStatus;
 use sea_orm::*;
+use std::collections::{HashMap, HashSet};
 
 /// 节点管理操作
 pub struct NodeOperations;
@@ -229,6 +230,128 @@ impl HealthOperations {
         Ok(result.rows_affected)
     }
 }
+impl NodeOperations {
+    /// 获取节点的全部标签
+    pub async fn get_node_tags(db: &Db, node_id: i32) -> Result<Vec<String>, DbErr> {
+        let tags = node_tags::Entity::find()
+            .filter(node_tags::Column::NodeId.eq(node_id))
+            .all(db.orm_db())
+            .await?;
+        Ok(tags.into_iter().map(|m| m.tag).collect())
+    }
+
+    /// 批量获取节点的标签映射
+    pub async fn get_nodes_tags_map(
+        db: &Db,
+        node_ids: &[i32],
+    ) -> Result<HashMap<i32, Vec<String>>, DbErr> {
+        if node_ids.is_empty() {
+            return Ok(HashMap::new());
+        }
+        let tags = node_tags::Entity::find()
+            .filter(node_tags::Column::NodeId.is_in(node_ids.to_vec()))
+            .order_by_asc(node_tags::Column::NodeId)
+            .all(db.orm_db())
+            .await?;
+        let mut map: HashMap<i32, Vec<String>> = HashMap::new();
+        for t in tags {
+            map.entry(t.node_id).or_default().push(t.tag);
+        }
+        Ok(map)
+    }
+
+    /// 使用标签过滤节点（返回节点ID）
+    pub async fn filter_node_ids_by_tag(db: &Db, tag: &str) -> Result<Vec<i32>, DbErr> {
+        let tagged = node_tags::Entity::find()
+            .filter(node_tags::Column::Tag.eq(tag))
+            .all(db.orm_db())
+            .await?;
+        Ok(tagged.into_iter().map(|m| m.node_id).collect())
+    }
+
+    /// 设置节点标签（替换为给定集合）
+    pub async fn set_node_tags(db: &Db, node_id: i32, tags: Vec<String>) -> Result<(), DbErr> {
+        // 去重与清理空白
+        let mut set: HashSet<String> = HashSet::new();
+        for tag in tags.into_iter() {
+            let trimmed = tag.trim();
+            if !trimmed.is_empty() {
+                set.insert(trimmed.to_string());
+            }
+        }
+
+        // 取出当前标签
+        let existing = node_tags::Entity::find()
+            .filter(node_tags::Column::NodeId.eq(node_id))
+            .all(db.orm_db())
+            .await?;
+
+        let existing_set: HashSet<String> = existing.iter().map(|m| m.tag.clone()).collect();
+
+        // 需要删除的
+        let to_delete: Vec<i32> = existing
+            .iter()
+            .filter(|m| !set.contains(&m.tag))
+            .map(|m| m.id)
+            .collect();
+
+        // 需要新增的
+        let to_insert: Vec<String> = set
+            .into_iter()
+            .filter(|t| !existing_set.contains(t))
+            .collect();
+
+        // 执行删除
+        if !to_delete.is_empty() {
+            node_tags::Entity::delete_many()
+                .filter(node_tags::Column::Id.is_in(to_delete))
+                .exec(db.orm_db())
+                .await?;
+        }
+
+        // 执行新增
+        for t in to_insert {
+            let now = chrono::Utc::now().fixed_offset();
+            let am = node_tags::ActiveModel {
+                id: NotSet,
+                node_id: Set(node_id),
+                tag: Set(t),
+                created_at: Set(now),
+            };
+            node_tags::Entity::insert(am).exec(db.orm_db()).await?;
+        }
+
+        Ok(())
+    }
+
+    // 新增：获取所有唯一标签（按字母排序）
+    pub async fn get_all_tags(db: &Db) -> Result<Vec<String>, DbErr> {
+        let rows = node_tags::Entity::find().all(db.orm_db()).await?;
+        let mut set: HashSet<String> = HashSet::new();
+        for r in rows {
+            set.insert(r.tag);
+        }
+        let mut list: Vec<String> = set.into_iter().collect();
+        list.sort();
+        Ok(list)
+    }
+
+    // 新增：使用多标签（OR 语义）过滤节点，返回匹配的节点ID
+    pub async fn filter_node_ids_by_tags_any(db: &Db, tags: &[String]) -> Result<Vec<i32>, DbErr> {
+        if tags.is_empty() {
+            return Ok(vec![]);
+        }
+        let tagged = node_tags::Entity::find()
+            .filter(node_tags::Column::Tag.is_in(tags.to_vec()))
+            .all(db.orm_db())
+            .await?;
+        let mut set: HashSet<i32> = HashSet::new();
+        for m in tagged {
+            set.insert(m.node_id);
+        }
+        Ok(set.into_iter().collect())
+    }
+}
 
 #[cfg(test)]
 mod tests {

easytier-contrib/easytier-uptime/src/health_checker.rs

@@ -8,12 +8,11 @@ use anyhow::Context as _;
 use dashmap::DashMap;
 use easytier::{
     common::{
-        config::{ConfigLoader, NetworkIdentity, PeerConfig, TomlConfigLoader},
+        config::{ConfigFileControl, ConfigLoader, NetworkIdentity, PeerConfig, TomlConfigLoader},
         scoped_task::ScopedTask,
     },
     defer,
     instance_manager::NetworkInstanceManager,
-    launcher::ConfigSource,
 };
 use serde::{Deserialize, Serialize};
 use sqlx::any;
@@ -360,6 +359,7 @@ impl HealthChecker {
             )
             .parse()
             .with_context(|| "failed to parse peer uri")?,
+            peer_public_key: None,
         }]);
 
         let inst_id = inst_id.unwrap_or(uuid::Uuid::new_v4());
@@ -375,6 +375,7 @@ impl HealthChecker {
         flags.no_tun = true;
         flags.disable_p2p = true;
         flags.disable_udp_hole_punching = true;
+        flags.disable_tcp_hole_punching = true;
         cfg.set_flags(flags);
 
         Ok(cfg)
@@ -392,7 +393,7 @@ impl HealthChecker {
                 .delete_network_instance(vec![cfg.get_id()]);
         });
         self.instance_mgr
-            .run_network_instance(cfg.clone(), ConfigSource::FFI)
+            .run_network_instance(cfg.clone(), false, ConfigFileControl::STATIC_CONFIG)
             .with_context(|| "failed to run network instance")?;
 
         let now = Instant::now();
@@ -436,7 +437,7 @@ impl HealthChecker {
         );
 
         self.instance_mgr
-            .run_network_instance(cfg.clone(), ConfigSource::Web)
+            .run_network_instance(cfg.clone(), true, ConfigFileControl::STATIC_CONFIG)
             .with_context(|| "failed to run network instance")?;
         self.inst_id_map.insert(node_id, cfg.get_id());
 
@@ -497,7 +498,7 @@ impl HealthChecker {
         instance_mgr: Arc<NetworkInstanceManager>,
         // return version, response time on healthy, conn_count
     ) -> anyhow::Result<(String, u64, u32)> {
-        let Some(instance) = instance_mgr.get_network_info(&inst_id) else {
+        let Some(instance) = instance_mgr.get_network_info(&inst_id).await else {
             anyhow::bail!("healthy check node is not started");
         };
 

easytier-contrib/easytier-uptime/src/main.rs

@@ -11,6 +11,7 @@ use api::routes::create_routes;
 use clap::Parser;
 use config::AppConfig;
 use db::{operations::NodeOperations, Db};
+use easytier::common::log;
 use health_checker::HealthChecker;
 use health_checker_manager::HealthCheckerManager;
 use std::env;
@@ -22,6 +23,11 @@ use tracing_subscriber::EnvFilter;
 
 use crate::db::cleanup::{CleanupConfig, CleanupManager};
 
+use mimalloc::MiMalloc;
+
+#[global_allocator]
+static GLOBAL_MIMALLOC: MiMalloc = MiMalloc;
+
 #[derive(Parser, Debug)]
 #[command(author, version, about, long_about = None)]
 struct Args {
@@ -30,24 +36,13 @@ struct Args {
     admin_password: Option<String>,
 }
 
-#[tokio::main]
+#[tokio::main(flavor = "multi_thread", worker_threads = 4)]
 async fn main() -> anyhow::Result<()> {
     // 加载配置
     let config = AppConfig::default();
 
     // 初始化日志
-    tracing_subscriber::fmt()
-        .with_max_level(match config.logging.level.as_str() {
-            "debug" => tracing::Level::DEBUG,
-            "info" => tracing::Level::INFO,
-            "warn" => tracing::Level::WARN,
-            "error" => tracing::Level::ERROR,
-            _ => tracing::Level::INFO,
-        })
-        .with_target(false)
-        .with_thread_ids(true)
-        .with_env_filter(EnvFilter::new("easytier_uptime"))
-        .init();
+    let _ = log::init(&config.logging, false);
 
     // 解析命令行参数
     let args = Args::parse();

easytier-contrib/easytier-uptime/src/migrator/m20250101_000002_create_node_tags.rs

@@ -0,0 +1,119 @@
+use sea_orm_migration::{prelude::*, schema::*};
+
+#[derive(DeriveMigrationName)]
+pub struct Migration;
+
+#[derive(DeriveIden)]
+enum NodeTags {
+    Table,
+    Id,
+    NodeId,
+    Tag,
+    CreatedAt,
+}
+
+#[derive(DeriveIden)]
+enum SharedNodes {
+    Table,
+    Id,
+}
+
+#[async_trait::async_trait]
+impl MigrationTrait for Migration {
+    async fn up(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        // 创建 node_tags 表
+        manager
+            .create_table(
+                Table::create()
+                    .table(NodeTags::Table)
+                    .if_not_exists()
+                    .col(pk_auto(NodeTags::Id).not_null())
+                    .col(integer(NodeTags::NodeId).not_null())
+                    .col(string(NodeTags::Tag).not_null())
+                    .col(
+                        timestamp_with_time_zone(NodeTags::CreatedAt)
+                            .not_null()
+                            .default(Expr::current_timestamp()),
+                    )
+                    .foreign_key(
+                        ForeignKey::create()
+                            .name("fk_node_tags_node")
+                            .from(NodeTags::Table, NodeTags::NodeId)
+                            .to(SharedNodes::Table, SharedNodes::Id)
+                            .on_delete(ForeignKeyAction::Cascade)
+                            .on_update(ForeignKeyAction::Cascade),
+                    )
+                    .to_owned(),
+            )
+            .await?;
+
+        // 索引：NodeId
+        manager
+            .create_index(
+                Index::create()
+                    .name("idx_node_tags_node")
+                    .table(NodeTags::Table)
+                    .col(NodeTags::NodeId)
+                    .to_owned(),
+            )
+            .await?;
+
+        // 索引：Tag
+        manager
+            .create_index(
+                Index::create()
+                    .name("idx_node_tags_tag")
+                    .table(NodeTags::Table)
+                    .col(NodeTags::Tag)
+                    .to_owned(),
+            )
+            .await?;
+
+        // 唯一索引：每个节点的标签唯一
+        manager
+            .create_index(
+                Index::create()
+                    .name("uniq_node_tag_per_node")
+                    .table(NodeTags::Table)
+                    .col(NodeTags::NodeId)
+                    .col(NodeTags::Tag)
+                    .unique()
+                    .to_owned(),
+            )
+            .await?;
+
+        Ok(())
+    }
+
+    async fn down(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        // 先删除索引
+        manager
+            .drop_index(
+                Index::drop()
+                    .name("idx_node_tags_node")
+                    .table(NodeTags::Table)
+                    .to_owned(),
+            )
+            .await?;
+        manager
+            .drop_index(
+                Index::drop()
+                    .name("idx_node_tags_tag")
+                    .table(NodeTags::Table)
+                    .to_owned(),
+            )
+            .await?;
+        manager
+            .drop_index(
+                Index::drop()
+                    .name("uniq_node_tag_per_node")
+                    .table(NodeTags::Table)
+                    .to_owned(),
+            )
+            .await?;
+
+        manager
+            .drop_table(Table::drop().table(NodeTags::Table).to_owned())
+            .await
+    }
+}

easytier-contrib/easytier-uptime/src/migrator/mod.rs

@@ -1,12 +1,16 @@
 use sea_orm_migration::prelude::*;
 
 mod m20250101_000001_create_tables;
+mod m20250101_000002_create_node_tags;
 
 pub struct Migrator;
 
 #[async_trait::async_trait]
 impl MigratorTrait for Migrator {
     fn migrations() -> Vec<Box<dyn MigrationTrait>> {
-        vec![Box::new(m20250101_000001_create_tables::Migration)]
+        vec![
+            Box::new(m20250101_000001_create_tables::Migration),
+            Box::new(m20250101_000002_create_node_tags::Migration),
+        ]
     }
 }

easytier-gui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "easytier-gui",
   "type": "module",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "private": true,
   "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4",
   "scripts": {
@@ -13,18 +13,17 @@
     "lint:fix": "eslint . --ignore-pattern src-tauri --fix"
   },
   "dependencies": {
-    "@primevue/themes": "4.3.3",
+    "@primeuix/themes": "^1.2.3",
     "@tauri-apps/plugin-autostart": "2.0.0",
     "@tauri-apps/plugin-clipboard-manager": "2.3.0",
     "@tauri-apps/plugin-os": "2.3.0",
     "@tauri-apps/plugin-process": "2.3.0",
     "@tauri-apps/plugin-shell": "2.3.0",
     "@vueuse/core": "^11.2.0",
-    "aura": "link:@primevue\\themes\\aura",
     "easytier-frontend-lib": "workspace:*",
     "ip-num": "1.5.1",
     "pinia": "^2.2.4",
-    "primevue": "4.3.3",
+    "primevue": "^4.3.9",
     "tauri-plugin-vpnservice-api": "workspace:*",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
@@ -32,7 +31,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
-    "@primevue/auto-import-resolver": "4.3.3",
+    "@primevue/auto-import-resolver": "4.3.9",
     "@tauri-apps/api": "2.7.0",
     "@tauri-apps/cli": "2.7.1",
     "@types/default-gateway": "^7.2.2",
@@ -54,7 +53,7 @@
     "unplugin-vue-markdown": "^0.26.2",
     "unplugin-vue-router": "^0.10.8",
     "uuid": "^10.0.0",
-    "vite": "^5.4.8",
+    "vite": "^5.4.21",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vue-i18n": "^10.0.0",

easytier-gui/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "easytier-gui"
-version = "2.4.4"
+version = "2.5.0"
 description = "EasyTier GUI"
 authors = ["you"]
 edition = "2021"
@@ -50,8 +50,11 @@ tauri-plugin-clipboard-manager = "2.3.0"
 tauri-plugin-positioner = { version = "2.3.0", features = ["tray-icon"] }
 tauri-plugin-vpnservice = { path = "../../tauri-plugin-vpnservice" }
 tauri-plugin-os = "2.3.0"
-tauri-plugin-autostart = "2.5.0"
+
 uuid = "1.17.0"
+async-trait = "0.1.89"
+
+url = { version = "2.5", features = ["serde"] }
 
 [target.'cfg(target_os = "windows")'.dependencies]
 windows = { version = "0.52", features = ["Win32_Foundation", "Win32_UI_Shell", "Win32_UI_WindowsAndMessaging"] }

easytier-gui/src-tauri/capabilities/migrated.json

@@ -45,10 +45,6 @@
     "os:allow-arch",
     "os:allow-hostname",
     "os:allow-platform",
-    "os:allow-locale",
-    "autostart:default",
-    "autostart:allow-disable",
-    "autostart:allow-enable",
-    "autostart:allow-is-enabled"
+    "os:allow-locale"
   ]
 }

easytier-gui/src-tauri/src/elevate/linux.rs

@@ -7,9 +7,7 @@ use super::Command;
 use anyhow::{anyhow, Result};
 use std::env;
 use std::ffi::OsStr;
-use std::path::PathBuf;
 use std::process::{Command as StdCommand, Output};
-use std::str::FromStr;
 
 /// The implementation of state check and elevated executing varies on each platform
 impl Command {
@@ -24,8 +22,7 @@ impl Command {
     /// Prompting the user with a graphical OS dialog for the root password,
     /// excuting the command with escalated privileges, and return the output
     pub fn output(&self) -> Result<Output> {
-        let pkexec = PathBuf::from_str("/bin/pkexec")?;
-        let mut command = StdCommand::new(pkexec);
+        let mut command = StdCommand::new("pkexec");
         let display = env::var("DISPLAY");
         let xauthority = env::var("XAUTHORITY");
         let home = env::var("HOME");

easytier-gui/src-tauri/src/elevate/macos.rs

@@ -16,6 +16,8 @@
 use super::Command;
 use anyhow::Result;
 use std::env;
+use std::fs::File;
+use std::io::Read as _;
 use std::path::PathBuf;
 use std::process::{ExitStatus, Output};
 
@@ -23,10 +25,12 @@ use std::ffi::{CString, OsString};
 use std::io;
 use std::mem;
 use std::os::unix::ffi::OsStrExt;
+use std::os::unix::io::FromRawFd;
+use std::os::unix::process::ExitStatusExt;
 use std::path::Path;
 use std::ptr;
 
-use libc::{fcntl, fileno, waitpid, EINTR, F_GETOWN};
+use libc::{fileno, wait, EINTR, SHUT_WR};
 use security_framework_sys::authorization::{
     errAuthorizationSuccess, kAuthorizationFlagDefaults, kAuthorizationFlagDestroyRights,
     AuthorizationCreate, AuthorizationExecuteWithPrivileges, AuthorizationFree, AuthorizationRef,
@@ -71,7 +75,7 @@ macro_rules! make_cstring {
     };
 }
 
-unsafe fn gui_runas(prog: *const i8, argv: *const *const i8) -> i32 {
+unsafe fn gui_runas(prog: *const i8, argv: *const *const i8) -> io::Result<ExitStatus> {
     let mut authref: AuthorizationRef = ptr::null_mut();
     let mut pipe: *mut libc::FILE = ptr::null_mut();
 
@@ -82,7 +86,7 @@ unsafe fn gui_runas(prog: *const i8, argv: *const *const i8) -> i32 {
         &mut authref,
     ) != errAuthorizationSuccess
     {
-        return -1;
+        return Err(io::Error::last_os_error());
     }
     if AuthorizationExecuteWithPrivileges(
         authref,
@@ -93,22 +97,66 @@ unsafe fn gui_runas(prog: *const i8, argv: *const *const i8) -> i32 {
     ) != errAuthorizationSuccess
     {
         AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
-        return -1;
+        return Err(io::Error::last_os_error());
+    }
+
+    let fd = fileno(pipe);
+    if fd == -1 {
+        AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
+        return Err(io::Error::last_os_error());
+    }
+
+    // We never send input to the elevated GUI. Close the parent write half so
+    // the child sees EOF on stdin instead of waiting forever.
+    if libc::shutdown(fd, SHUT_WR) == -1 {
+        let err = io::Error::last_os_error();
+        libc::fclose(pipe);
+        AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
+        return Err(err);
+    }
+
+    // AuthorizationExecuteWithPrivileges wires the tool's stdin/stdout to a
+    // bidirectional pipe. Drain stdout so the child can't block on a full pipe.
+    let read_fd = libc::dup(fd);
+    if read_fd == -1 {
+        let err = io::Error::last_os_error();
+        libc::fclose(pipe);
+        AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
+        return Err(err);
+    }
+    let mut pipe_file = unsafe { File::from_raw_fd(read_fd) };
+    let mut sink = [0_u8; 8192];
+    loop {
+        match pipe_file.read(&mut sink) {
+            Ok(0) => break,
+            Ok(_) => {}
+            Err(err) if err.kind() == io::ErrorKind::Interrupted => continue,
+            Err(err) => {
+                libc::fclose(pipe);
+                AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
+                return Err(err);
+            }
+        }
     }
 
-    let pid = fcntl(fileno(pipe), F_GETOWN, 0);
     let mut status = 0;
     loop {
-        let r = waitpid(pid, &mut status, 0);
+        let r = wait(&mut status);
         if r == -1 && io::Error::last_os_error().raw_os_error() == Some(EINTR) {
             continue;
+        } else if r == -1 {
+            let err = io::Error::last_os_error();
+            libc::fclose(pipe);
+            AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
+            return Err(err);
         } else {
             break;
         }
     }
 
+    libc::fclose(pipe);
     AuthorizationFree(authref, kAuthorizationFlagDestroyRights);
-    status
+    Ok(ExitStatus::from_raw(status))
 }
 
 fn runas_root_gui(cmd: &Command) -> io::Result<ExitStatus> {
@@ -126,7 +174,7 @@ fn runas_root_gui(cmd: &Command) -> io::Result<ExitStatus> {
     let mut argv: Vec<_> = args.iter().map(|x| x.as_ptr()).collect();
     argv.push(ptr::null());
 
-    unsafe { Ok(mem::transmute(gui_runas(prog.as_ptr(), argv.as_ptr()))) }
+    unsafe { gui_runas(prog.as_ptr(), argv.as_ptr()) }
 }
 
 /// The implementation of state check and elevated executing varies on each platform

easytier-gui/src-tauri/src/main.rs

@@ -1,5 +1,9 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-fn main() {
-    app_lib::run();
+fn main() -> std::process::ExitCode {
+    if std::env::args().count() > 1 {
+        app_lib::run_cli()
+    } else {
+        app_lib::run_gui()
+    }
 }

easytier-gui/src-tauri/tauri.conf.json

@@ -17,9 +17,13 @@
     "createUpdaterArtifacts": false
   },
   "productName": "easytier-gui",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "identifier": "com.kkrainbow.easytier",
-  "plugins": {},
+  "plugins": {
+    "shell": {
+      "open": "^.+"
+    }
+  },
   "app": {
     "windows": [
       {

easytier-gui/src-tauri/tauri.windows.conf.json

@@ -3,7 +3,8 @@
         "externalBin": [],
         "resources": [
             "./wintun.dll",
-            "./Packet.dll"
+            "./Packet.dll",
+            "./*.sys"
         ],
         "windows": {
             "webviewInstallMode": {

easytier-gui/src/auto-imports.d.ts

@@ -9,36 +9,42 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const MenuItemExit: typeof import('./composables/tray')['MenuItemExit']
   const MenuItemShow: typeof import('./composables/tray')['MenuItemShow']
-  const ReinitTray: typeof import('./composables/tray')['ReinitTray']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
-  const collectNetworkInfos: typeof import('./composables/network')['collectNetworkInfos']
+  const collectNetworkInfo: typeof import('./composables/backend')['collectNetworkInfo']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const createPinia: typeof import('pinia')['createPinia']
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const defineStore: typeof import('pinia')['defineStore']
+  const deleteNetworkInstance: typeof import('./composables/backend')['deleteNetworkInstance']
   const effectScope: typeof import('vue')['effectScope']
-  const event2human: typeof import('./composables/utils')['event2human']
   const generateMenuItem: typeof import('./composables/tray')['generateMenuItem']
-  const generateNetworkConfig: typeof import('./composables/network')['generateNetworkConfig']
+  const generateNetworkConfig: typeof import('./composables/backend')['generateNetworkConfig']
   const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getConfig: typeof import('./composables/backend')['getConfig']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const getEasytierVersion: typeof import('./composables/network')['getEasytierVersion']
-  const getOsHostname: typeof import('./composables/network')['getOsHostname']
+  const getEasytierVersion: typeof import('./composables/backend')['getEasytierVersion']
+  const getNetworkMetas: typeof import('./composables/backend')['getNetworkMetas']
+  const getServiceStatus: typeof import('./composables/backend')['getServiceStatus']
   const h: typeof import('vue')['h']
-  const initMobileService: typeof import('./composables/mobile_vpn')['initMobileService']
   const initMobileVpnService: typeof import('./composables/mobile_vpn')['initMobileVpnService']
+  const initRpcConnection: typeof import('./composables/backend')['initRpcConnection']
+  const initService: typeof import('./composables/backend')['initService']
+  const initWebClient: typeof import('./composables/backend')['initWebClient']
   const inject: typeof import('vue')['inject']
-  const isAutostart: typeof import('./composables/network')['isAutostart']
+  const isClientRunning: typeof import('./composables/backend')['isClientRunning']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
-  const loadRunningInstanceIdsFromLocalStorage: typeof import('./stores/network')['loadRunningInstanceIdsFromLocalStorage']
+  const isWebClientConnected: typeof import('./composables/backend')['isWebClientConnected']
+  const listNetworkInstanceIds: typeof import('./composables/backend')['listNetworkInstanceIds']
+  const listenGlobalEvents: typeof import('./composables/event')['listenGlobalEvents']
+  const loadLastNetworkInstanceId: typeof import('./composables/config')['loadLastNetworkInstanceId']
+  const loadMode: typeof import('./composables/mode')['loadMode']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
   const mapState: typeof import('pinia')['mapState']
@@ -46,8 +52,6 @@ declare global {
   const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
-  const num2ipv4: typeof import('./composables/utils')['num2ipv4']
-  const num2ipv6: typeof import('./composables/utils')['num2ipv6']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
@@ -57,6 +61,7 @@ declare global {
   const onDeactivated: typeof import('vue')['onDeactivated']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onMounted: typeof import('vue')['onMounted']
+  const onNetworkInstanceChange: typeof import('./composables/mobile_vpn')['onNetworkInstanceChange']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
   const onScopeDispose: typeof import('vue')['onScopeDispose']
@@ -64,34 +69,37 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
-  const parseNetworkConfig: typeof import('./composables/network')['parseNetworkConfig']
+  const parseNetworkConfig: typeof import('./composables/backend')['parseNetworkConfig']
   const prepareVpnService: typeof import('./composables/mobile_vpn')['prepareVpnService']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const retainNetworkInstance: typeof import('./composables/network')['retainNetworkInstance']
-  const runNetworkInstance: typeof import('./composables/network')['runNetworkInstance']
+  const runNetworkInstance: typeof import('./composables/backend')['runNetworkInstance']
+  const saveLastNetworkInstanceId: typeof import('./composables/config')['saveLastNetworkInstanceId']
+  const saveMode: typeof import('./composables/mode')['saveMode']
+  const saveNetworkConfig: typeof import('./composables/backend')['saveNetworkConfig']
+  const sendConfigs: typeof import('./composables/backend')['sendConfigs']
   const setActivePinia: typeof import('pinia')['setActivePinia']
-  const setAutoLaunchStatus: typeof import('./composables/network')['setAutoLaunchStatus']
-  const setLoggingLevel: typeof import('./composables/network')['setLoggingLevel']
+  const setLoggingLevel: typeof import('./composables/backend')['setLoggingLevel']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const setServiceStatus: typeof import('./composables/backend')['setServiceStatus']
   const setTrayMenu: typeof import('./composables/tray')['setTrayMenu']
   const setTrayRunState: typeof import('./composables/tray')['setTrayRunState']
   const setTrayTooltip: typeof import('./composables/tray')['setTrayTooltip']
-  const setTunFd: typeof import('./composables/network')['setTunFd']
+  const setTunFd: typeof import('./composables/backend')['setTunFd']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const storeToRefs: typeof import('pinia')['storeToRefs']
-  const timeAgoCn: typeof import('./composables/utils')['timeAgoCn']
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
+  const updateNetworkConfigState: typeof import('./composables/backend')['updateNetworkConfigState']
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
@@ -99,12 +107,12 @@ declare global {
   const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router/auto')['useLink']
   const useModel: typeof import('vue')['useModel']
-  const useNetworkStore: typeof import('./stores/network')['useNetworkStore']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTray: typeof import('./composables/tray')['useTray']
+  const validateConfig: typeof import('./composables/backend')['validateConfig']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -116,6 +124,7 @@ declare global {
   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
+
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
@@ -125,7 +134,7 @@ declare module 'vue' {
     readonly MenuItemExit: UnwrapRef<typeof import('./composables/tray')['MenuItemExit']>
     readonly MenuItemShow: UnwrapRef<typeof import('./composables/tray')['MenuItemShow']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
-    readonly collectNetworkInfos: UnwrapRef<typeof import('./composables/network')['collectNetworkInfos']>
+    readonly collectNetworkInfo: UnwrapRef<typeof import('./composables/backend')['collectNetworkInfo']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
@@ -133,22 +142,33 @@ declare module 'vue' {
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly deleteNetworkInstance: UnwrapRef<typeof import('./composables/backend')['deleteNetworkInstance']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly generateMenuItem: UnwrapRef<typeof import('./composables/tray')['generateMenuItem']>
-    readonly generateNetworkConfig: UnwrapRef<typeof import('./composables/network')['generateNetworkConfig']>
+    readonly generateNetworkConfig: UnwrapRef<typeof import('./composables/backend')['generateNetworkConfig']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
+    readonly getConfig: UnwrapRef<typeof import('./composables/backend')['getConfig']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
-    readonly getEasytierVersion: UnwrapRef<typeof import('./composables/network')['getEasytierVersion']>
-    readonly getOsHostname: UnwrapRef<typeof import('./composables/network')['getOsHostname']>
+    readonly getEasytierVersion: UnwrapRef<typeof import('./composables/backend')['getEasytierVersion']>
+    readonly getNetworkMetas: UnwrapRef<typeof import('./composables/backend')['getNetworkMetas']>
+    readonly getServiceStatus: UnwrapRef<typeof import('./composables/backend')['getServiceStatus']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly initMobileVpnService: UnwrapRef<typeof import('./composables/mobile_vpn')['initMobileVpnService']>
+    readonly initRpcConnection: UnwrapRef<typeof import('./composables/backend')['initRpcConnection']>
+    readonly initService: UnwrapRef<typeof import('./composables/backend')['initService']>
+    readonly initWebClient: UnwrapRef<typeof import('./composables/backend')['initWebClient']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly isAutostart: UnwrapRef<typeof import('./composables/network')['isAutostart']>
+    readonly isClientRunning: UnwrapRef<typeof import('./composables/backend')['isClientRunning']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly isWebClientConnected: UnwrapRef<typeof import('./composables/backend')['isWebClientConnected']>
+    readonly listNetworkInstanceIds: UnwrapRef<typeof import('./composables/backend')['listNetworkInstanceIds']>
+    readonly listenGlobalEvents: UnwrapRef<typeof import('./composables/event')['listenGlobalEvents']>
+    readonly loadLastNetworkInstanceId: UnwrapRef<typeof import('./composables/config')['loadLastNetworkInstanceId']>
+    readonly loadMode: UnwrapRef<typeof import('./composables/mode')['loadMode']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
@@ -165,6 +185,7 @@ declare module 'vue' {
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onNetworkInstanceChange: UnwrapRef<typeof import('./composables/mobile_vpn')['onNetworkInstanceChange']>
     readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
     readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
     readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
@@ -172,22 +193,26 @@ declare module 'vue' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
-    readonly parseNetworkConfig: UnwrapRef<typeof import('./composables/network')['parseNetworkConfig']>
+    readonly parseNetworkConfig: UnwrapRef<typeof import('./composables/backend')['parseNetworkConfig']>
     readonly prepareVpnService: UnwrapRef<typeof import('./composables/mobile_vpn')['prepareVpnService']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
     readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
     readonly ref: UnwrapRef<typeof import('vue')['ref']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly retainNetworkInstance: UnwrapRef<typeof import('./composables/network')['retainNetworkInstance']>
-    readonly runNetworkInstance: UnwrapRef<typeof import('./composables/network')['runNetworkInstance']>
+    readonly runNetworkInstance: UnwrapRef<typeof import('./composables/backend')['runNetworkInstance']>
+    readonly saveLastNetworkInstanceId: UnwrapRef<typeof import('./composables/config')['saveLastNetworkInstanceId']>
+    readonly saveMode: UnwrapRef<typeof import('./composables/mode')['saveMode']>
+    readonly saveNetworkConfig: UnwrapRef<typeof import('./composables/backend')['saveNetworkConfig']>
+    readonly sendConfigs: UnwrapRef<typeof import('./composables/backend')['sendConfigs']>
     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
-    readonly setLoggingLevel: UnwrapRef<typeof import('./composables/network')['setLoggingLevel']>
+    readonly setLoggingLevel: UnwrapRef<typeof import('./composables/backend')['setLoggingLevel']>
     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
+    readonly setServiceStatus: UnwrapRef<typeof import('./composables/backend')['setServiceStatus']>
     readonly setTrayMenu: UnwrapRef<typeof import('./composables/tray')['setTrayMenu']>
     readonly setTrayRunState: UnwrapRef<typeof import('./composables/tray')['setTrayRunState']>
     readonly setTrayTooltip: UnwrapRef<typeof import('./composables/tray')['setTrayTooltip']>
-    readonly setTunFd: UnwrapRef<typeof import('./composables/network')['setTunFd']>
+    readonly setTunFd: UnwrapRef<typeof import('./composables/backend')['setTunFd']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
@@ -198,6 +223,7 @@ declare module 'vue' {
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly updateNetworkConfigState: UnwrapRef<typeof import('./composables/backend')['updateNetworkConfigState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
@@ -205,12 +231,12 @@ declare module 'vue' {
     readonly useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useLink: UnwrapRef<typeof import('vue-router/auto')['useLink']>
     readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
-    readonly useNetworkStore: UnwrapRef<typeof import('./stores/network')['useNetworkStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTray: UnwrapRef<typeof import('./composables/tray')['useTray']>
+    readonly validateConfig: UnwrapRef<typeof import('./composables/backend')['validateConfig']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>

easytier-gui/src/components/About.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getEasytierVersion } from '~/composables/network'
+import { getEasytierVersion } from '~/composables/backend'
 
 const { t } = useI18n()
 

easytier-gui/src/components/ModeSwitcher.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed, watch, onMounted, ref } from 'vue';
+import type { Mode, ServiceMode, RemoteMode, NormalMode } from '~/composables/mode';
+import { appConfigDir, appLogDir } from '@tauri-apps/api/path';
+import { join } from '@tauri-apps/api/path';
+import { getServiceStatus, type ServiceStatus } from '~/composables/backend';
+
+const { t } = useI18n()
+
+const model = defineModel<Mode>({ required: true })
+const emit = defineEmits(['uninstall-service', 'stop-service'])
+
+const defaultConfigDir = ref('')
+const defaultLogDir = ref('')
+const serviceStatus = ref<ServiceStatus>('NotInstalled')
+const isServiceStatusLoaded = ref(false)
+
+function normalizeRpcListenPort(port: unknown): number {
+  const defaultPort = 15999
+  const numericPort = typeof port === 'number' ? port : Number.parseInt(String(port ?? ''), 10)
+  if (Number.isNaN(numericPort))
+    return defaultPort
+  return Math.min(65535, Math.max(1, Math.floor(numericPort)))
+}
+
+onMounted(async () => {
+  defaultConfigDir.value = await join(await appConfigDir(), 'config.d')
+  defaultLogDir.value = await appLogDir()
+})
+
+const modeOptions = computed(() => [
+  { label: t('mode.normal'), value: 'normal' },
+  { label: t('mode.service'), value: 'service' },
+  { label: t('mode.remote'), value: 'remote' },
+]);
+
+const normalMode = computed({
+  get: () => model.value.mode === 'normal' ? model.value as NormalMode : undefined,
+  set: (value) => {
+    if (value) {
+      model.value = value
+    }
+  }
+})
+
+const rpcListenOptions = computed(() => [
+  { label: t('web.common.disable'), value: false },
+  { label: t('web.common.enable'), value: true },
+])
+
+const rpcListenEnabled = computed<boolean>({
+  get: () => !!normalMode.value?.enable_rpc_port_listen,
+  set: (value) => {
+    if (!normalMode.value)
+      return
+    normalMode.value.enable_rpc_port_listen = value
+  },
+})
+
+const rpcListenPort = computed<string>({
+  get: () => String(normalMode.value?.rpc_listen_port ?? 15999),
+  set: (value) => {
+    if (!normalMode.value)
+      return
+    const trimmed = value.trim()
+    if (trimmed === '')
+      return
+    if (!/^\d+$/.test(trimmed))
+      return
+    normalMode.value.rpc_listen_port = Number.parseInt(trimmed, 10)
+  },
+})
+
+const serviceMode = computed({
+  get: () => model.value.mode === 'service' ? model.value as ServiceMode : undefined,
+  set: (value) => {
+    if (value) {
+      model.value = value
+    }
+  }
+})
+
+const remoteMode = computed({
+  get: () => model.value.mode === 'remote' ? model.value as RemoteMode : undefined,
+  set: (value) => {
+    if (value) {
+      model.value = value
+    }
+  }
+})
+
+const statusColorClass = computed(() => {
+  switch (serviceStatus.value) {
+    case 'Running':
+      return 'text-green-600'
+    case 'Stopped':
+      return 'text-orange-600'
+    case 'NotInstalled':
+      return 'text-gray-600'
+    default:
+      return 'text-gray-600'
+  }
+})
+
+watch(() => [normalMode.value?.enable_rpc_port_listen, normalMode.value?.rpc_listen_port], ([enabled, port]) => {
+  if (!normalMode.value)
+    return
+
+  if (!enabled) {
+    normalMode.value.rpc_portal = undefined
+    return
+  }
+
+  const normalizedPort = normalizeRpcListenPort(port)
+  if (normalMode.value.rpc_listen_port !== normalizedPort)
+    normalMode.value.rpc_listen_port = normalizedPort
+
+  const desiredPortal = `tcp://0.0.0.0:${normalizedPort}`
+  if (normalMode.value.rpc_portal !== desiredPortal)
+    normalMode.value.rpc_portal = desiredPortal
+}, { immediate: true })
+
+watch(() => model.value.mode, async (newMode, oldMode) => {
+  if (newMode === oldMode)
+    return
+
+  if (newMode === 'service' && !isServiceStatusLoaded.value) {
+    serviceStatus.value = await getServiceStatus()
+    isServiceStatusLoaded.value = true
+  }
+
+  const oldModelValue = { ...model.value }
+
+  if (newMode === 'normal') {
+    const portal = normalMode.value?.rpc_portal?.trim()
+    model.value = {
+      ...oldModelValue,
+      rpc_portal: portal || undefined,
+      enable_rpc_port_listen: normalMode.value?.enable_rpc_port_listen,
+      rpc_listen_port: normalMode.value?.rpc_listen_port,
+      mode: 'normal',
+    }
+  }
+  else if (newMode === 'service') {
+    model.value = {
+      ...oldModelValue,
+      mode: 'service',
+      config_dir: serviceMode.value?.config_dir || defaultConfigDir.value,
+      rpc_portal: serviceMode.value?.rpc_portal || '127.0.0.1:15999',
+      file_log_level: serviceMode.value?.file_log_level || 'off',
+      file_log_dir: serviceMode.value?.file_log_dir || defaultLogDir.value,
+    }
+  }
+  else if (newMode === 'remote') {
+    model.value = {
+      ...oldModelValue,
+      mode: 'remote',
+      remote_rpc_address: remoteMode.value?.remote_rpc_address || 'tcp://127.0.0.1:15999',
+    }
+  }
+}, { immediate: true })
+
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div>
+      <SelectButton id="mode-select" v-model="model.mode" :options="modeOptions" option-label="label"
+        option-value="value" fluid />
+    </div>
+
+    <!-- Mode descriptions -->
+    <div v-if="model.mode === 'normal'" class="text-sm text-gray-500">
+      {{ t('mode.normal_description') }}
+    </div>
+    <div v-else-if="model.mode === 'service'" class="text-sm text-gray-500">
+      {{ t('mode.service_description') }}
+    </div>
+    <div v-else-if="model.mode === 'remote'" class="text-sm text-gray-500">
+      {{ t('mode.remote_description') }}
+    </div>
+
+    <div v-if="normalMode" class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label for="rpc-listen-toggle">{{ t('mode.enable_rpc_tcp_listen') }}</label>
+        <SelectButton id="rpc-listen-toggle" v-model="rpcListenEnabled" :options="rpcListenOptions" option-label="label"
+          option-value="value" />
+      </div>
+      <div v-if="rpcListenEnabled" class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <label for="rpc-listen-port">{{ t('mode.rpc_listen_port') }}</label>
+          <InputText id="rpc-listen-port" v-model="rpcListenPort" class="flex-1" inputmode="numeric" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="serviceMode" class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label for="config-dir">{{ t('mode.config_dir') }}</label>
+        <InputText id="config-dir" v-model="serviceMode.config_dir" class="flex-1" />
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="rpc-portal">{{ t('mode.rpc_portal') }}</label>
+        <InputText id="rpc-portal" v-model="serviceMode.rpc_portal" class="flex-1" />
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="log-level">{{ t('mode.log_level') }}</label>
+        <Select id="log-level" v-model="serviceMode.file_log_level"
+          :options="['off', 'warn', 'info', 'debug', 'trace']" />
+      </div>
+      <div class="flex items-center gap-2">
+        <label for="log-dir">{{ t('mode.log_dir') }}</label>
+        <InputText id="log-dir" v-model="serviceMode.file_log_dir" class="flex-1" />
+      </div>
+      <div class="flex items-center gap-2 justify-between">
+        <div class="flex items-center gap-2">
+          <label>{{ t('mode.service_status') }}</label>
+          <span :class="statusColorClass">{{ t(`mode.service_status_${serviceStatus.toLowerCase()}`) }}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button :label="t('mode.stop_service')" icon="pi pi-stop-circle" v-if="serviceStatus === 'Running'"
+            @click="emit('stop-service')" severity="warn" text />
+          <Button :label="t('mode.uninstall_service')" icon="pi pi-trash" v-if="serviceStatus !== 'NotInstalled'"
+            @click="emit('uninstall-service')" severity="danger" text />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="remoteMode" class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label for="remote-addr">{{ t('mode.remote_rpc_address') }}</label>
+        <InputText id="remote-addr" v-model="remoteMode.remote_rpc_address" class="flex-1" />
+      </div>
+    </div>
+  </div>
+</template>

easytier-gui/src/composables/backend.ts

@@ -0,0 +1,111 @@
+import { invoke } from '@tauri-apps/api/core'
+import { Api, NetworkTypes } from 'easytier-frontend-lib'
+import { GetNetworkMetasResponse } from 'node_modules/easytier-frontend-lib/dist/modules/api'
+
+
+type NetworkConfig = NetworkTypes.NetworkConfig
+type ValidateConfigResponse = Api.ValidateConfigResponse
+type ListNetworkInstanceIdResponse = Api.ListNetworkInstanceIdResponse
+interface ServiceOptions {
+  config_dir: string
+  rpc_portal: string
+  file_log_level: string
+  file_log_dir: string
+  config_server?: string
+}
+
+export type ServiceStatus = "Running" | "Stopped" | "NotInstalled"
+
+export async function parseNetworkConfig(cfg: NetworkConfig) {
+  return invoke<string>('parse_network_config', { cfg: NetworkTypes.toBackendNetworkConfig(cfg) })
+}
+
+export async function generateNetworkConfig(tomlConfig: string) {
+  const config = await invoke<NetworkConfig>('generate_network_config', { tomlConfig })
+  return NetworkTypes.normalizeNetworkConfig(config)
+}
+
+export async function runNetworkInstance(cfg: NetworkConfig, save: boolean) {
+  return invoke('run_network_instance', { cfg: NetworkTypes.toBackendNetworkConfig(cfg), save })
+}
+
+export async function collectNetworkInfo(instanceId: string) {
+  return await invoke<Api.CollectNetworkInfoResponse>('collect_network_info', { instanceId })
+}
+
+export async function setLoggingLevel(level: string) {
+  return await invoke('set_logging_level', { level })
+}
+
+export async function setTunFd(fd: number) {
+  return await invoke('set_tun_fd', { fd })
+}
+
+export async function getEasytierVersion() {
+  return await invoke<string>('easytier_version')
+}
+
+export async function listNetworkInstanceIds() {
+  return await invoke<ListNetworkInstanceIdResponse>('list_network_instance_ids')
+}
+
+export async function deleteNetworkInstance(instanceId: string) {
+  return await invoke('remove_network_instance', { instanceId })
+}
+
+export async function updateNetworkConfigState(instanceId: string, disabled: boolean) {
+  return await invoke('update_network_config_state', { instanceId, disabled })
+}
+
+export async function saveNetworkConfig(cfg: NetworkConfig) {
+  return await invoke('save_network_config', { cfg: NetworkTypes.toBackendNetworkConfig(cfg) })
+}
+
+export async function validateConfig(cfg: NetworkConfig) {
+  return await invoke<ValidateConfigResponse>('validate_config', { cfg: NetworkTypes.toBackendNetworkConfig(cfg) })
+}
+
+export async function getConfig(instanceId: string) {
+  const config = await invoke<NetworkConfig>('get_config', { instanceId })
+  return NetworkTypes.normalizeNetworkConfig(config)
+}
+
+export async function sendConfigs(enabledNetworks: string[]) {
+  const networkList: NetworkConfig[] = JSON.parse(localStorage.getItem('networkList') || '[]');
+  return await invoke('load_configs', {
+    configs: networkList.map((config) => NetworkTypes.toBackendNetworkConfig(NetworkTypes.normalizeNetworkConfig(config))),
+    enabledNetworks
+  })
+}
+
+export async function getNetworkMetas(instanceIds: string[]) {
+  return await invoke<GetNetworkMetasResponse>('get_network_metas', { instanceIds })
+}
+
+export async function initService(opts?: ServiceOptions) {
+  return await invoke('init_service', { opts })
+}
+
+export async function setServiceStatus(enable: boolean) {
+  return await invoke('set_service_status', { enable })
+}
+
+export async function getServiceStatus() {
+  return await invoke<ServiceStatus>('get_service_status')
+}
+
+export async function initRpcConnection(isNormalMode: boolean, url?: string) {
+  return await invoke('init_rpc_connection', { isNormalMode, url })
+}
+
+export async function isClientRunning() {
+  return await invoke<boolean>('is_client_running')
+}
+
+export async function initWebClient(url?: string) {
+  return await invoke('init_web_client', { url })
+}
+
+export async function isWebClientConnected() {
+  return await invoke<boolean>('is_web_client_connected')
+}

easytier-gui/src/composables/config.ts

@@ -0,0 +1,20 @@
+/**
+ * 配置持久化相关的函数
+ * 用于保存和加载应用程序的各种配置状态
+ */
+
+/**
+ * 保存上次使用的网络实例 ID
+ * @param instanceId 网络实例 ID
+ */
+export function saveLastNetworkInstanceId(instanceId: string) {
+    localStorage.setItem('last_network_instance_id', instanceId)
+}
+
+/**
+ * 加载上次使用的网络实例 ID
+ * @returns 上次使用的网络实例 ID，如果没有则返回 null
+ */
+export function loadLastNetworkInstanceId(): string | null {
+    return localStorage.getItem('last_network_instance_id')
+}

easytier-gui/src/composables/event.ts

@@ -0,0 +1,70 @@
+import { Event, listen } from "@tauri-apps/api/event";
+import { type } from "@tauri-apps/plugin-os";
+import { NetworkTypes } from "easytier-frontend-lib"
+
+const EVENTS = Object.freeze({
+    SAVE_CONFIGS: 'save_configs',
+    PRE_RUN_NETWORK_INSTANCE: 'pre_run_network_instance',
+    POST_RUN_NETWORK_INSTANCE: 'post_run_network_instance',
+    VPN_SERVICE_STOP: 'vpn_service_stop',
+    DHCP_IP_CHANGED: 'dhcp_ip_changed',
+    PROXY_CIDRS_UPDATED: 'proxy_cidrs_updated',
+    EVENT_LAGGED: 'event_lagged',
+});
+
+function onSaveConfigs(event: Event<NetworkTypes.NetworkConfig[]>) {
+    console.log(`Received event '${EVENTS.SAVE_CONFIGS}': ${event.payload}`);
+    localStorage.setItem('networkList', JSON.stringify(event.payload.map((config) => NetworkTypes.normalizeNetworkConfig(config))));
+}
+
+async function onPreRunNetworkInstance(event: Event<string>) {
+    if (type() === 'android') {
+        await prepareVpnService(event.payload);
+    }
+}
+
+async function onPostRunNetworkInstance(event: Event<string>) {
+    if (type() === 'android') {
+        await onNetworkInstanceChange(event.payload);
+    }
+}
+
+async function onVpnServiceStop(event: Event<string>) {
+    await onNetworkInstanceChange(event.payload);
+}
+
+async function onDhcpIpChanged(event: Event<string>) {
+    console.log(`Received event '${EVENTS.DHCP_IP_CHANGED}' for instance: ${event.payload}`);
+    if (type() === 'android') {
+        await onNetworkInstanceChange(event.payload);
+    }
+}
+
+async function onProxyCidrsUpdated(event: Event<string>) {
+    console.log(`Received event '${EVENTS.PROXY_CIDRS_UPDATED}' for instance: ${event.payload}`);
+    if (type() === 'android') {
+        await onNetworkInstanceChange(event.payload);
+    }
+}
+
+async function onEventLagged(event: Event<string>) {
+    if (type() === 'android') {
+        await onNetworkInstanceChange(event.payload);
+    }
+}
+
+export async function listenGlobalEvents() {
+    const unlisteners = [
+        await listen(EVENTS.SAVE_CONFIGS, onSaveConfigs),
+        await listen(EVENTS.PRE_RUN_NETWORK_INSTANCE, onPreRunNetworkInstance),
+        await listen(EVENTS.POST_RUN_NETWORK_INSTANCE, onPostRunNetworkInstance),
+        await listen(EVENTS.VPN_SERVICE_STOP, onVpnServiceStop),
+        await listen(EVENTS.DHCP_IP_CHANGED, onDhcpIpChanged),
+        await listen(EVENTS.PROXY_CIDRS_UPDATED, onProxyCidrsUpdated),
+        await listen(EVENTS.EVENT_LAGGED, onEventLagged),
+    ];
+
+    return () => {
+        unlisteners.forEach(unlisten => unlisten());
+    };
+}

easytier-gui/src/composables/mobile_vpn.ts

@@ -5,20 +5,23 @@ import { prepare_vpn, start_vpn, stop_vpn } from 'tauri-plugin-vpnservice-api'
 
 type Route = NetworkTypes.Route
 
-const networkStore = useNetworkStore()
-
 interface vpnStatus {
   running: boolean
   ipv4Addr: string | null | undefined
   ipv4Cidr: number | null | undefined
   routes: string[]
+  dns: string | null | undefined
 }
 
+let dhcpPollingTimer: NodeJS.Timeout | null = null
+const DHCP_POLLING_INTERVAL = 2000 // 2秒后重试
+
 const curVpnStatus: vpnStatus = {
   running: false,
   ipv4Addr: undefined,
   ipv4Cidr: undefined,
   routes: [],
+  dns: undefined,
 }
 
 async function waitVpnStatus(target_status: boolean, timeout_sec: number) {
@@ -42,17 +45,19 @@ async function doStopVpn() {
 
   curVpnStatus.ipv4Addr = undefined
   curVpnStatus.routes = []
+  curVpnStatus.dns = undefined
 }
 
-async function doStartVpn(ipv4Addr: string, cidr: number, routes: string[]) {
+async function doStartVpn(ipv4Addr: string, cidr: number, routes: string[], dns?: string) {
   if (curVpnStatus.running) {
     return
   }
 
-  console.log('start vpn service', ipv4Addr, cidr, routes)
+  console.log('start vpn service', ipv4Addr, cidr, routes, dns)
   const start_ret = await start_vpn({
     ipv4Addr: `${ipv4Addr}/${cidr}`,
     routes,
+    dns,
     disallowedApplications: ['com.kkrainbow.easytier'],
     mtu: 1300,
   })
@@ -63,13 +68,14 @@ async function doStartVpn(ipv4Addr: string, cidr: number, routes: string[]) {
 
   curVpnStatus.ipv4Addr = ipv4Addr
   curVpnStatus.routes = routes
+  curVpnStatus.dns = dns
 }
 
 async function onVpnServiceStart(payload: any) {
   console.log('vpn service start', JSON.stringify(payload))
   curVpnStatus.running = true
   if (payload.fd) {
-    setTunFd(networkStore.networkInstanceIds[0], payload.fd)
+    setTunFd(payload.fd)
   }
 }
 
@@ -93,7 +99,7 @@ async function registerVpnServiceListener() {
   )
 }
 
-function getRoutesForVpn(routes: Route[]): string[] {
+function getRoutesForVpn(routes: Route[], node_config: NetworkTypes.NetworkConfig): string[] {
   if (!routes) {
     return []
   }
@@ -108,30 +114,50 @@ function getRoutesForVpn(routes: Route[]): string[] {
     }
   }
 
+  node_config.routes.forEach(r => {
+    ret.push(r)
+  })
+
+  if (node_config.enable_magic_dns) {
+    ret.push('100.100.100.101/32')
+  }
+
   // sort and dedup
   return Array.from(new Set(ret)).sort()
 }
 
-async function onNetworkInstanceChange() {
-  console.error('vpn service watch network instance change ids', JSON.stringify(networkStore.networkInstanceIds))
-  const insts = networkStore.networkInstanceIds
-  const no_tun = networkStore.isNoTunEnabled(insts[0])
-  if (no_tun) {
-    await doStopVpn()
-    return
-  }
-  if (!insts) {
-    await doStopVpn()
-    return
+export async function onNetworkInstanceChange(instanceId: string) {
+  console.error('vpn service network instance change id', instanceId)
+
+  if (dhcpPollingTimer) {
+    clearTimeout(dhcpPollingTimer)
+    dhcpPollingTimer = null
   }
 
-  const curNetworkInfo = networkStore.networkInfos[insts[0]]
+  if (!instanceId) {
+    await doStopVpn()
+    return
+  }
+  const config = await getConfig(instanceId)
+  if (config.no_tun) {
+    return
+  }
+  const curNetworkInfo = (await collectNetworkInfo(instanceId)).info.map[instanceId]
   if (!curNetworkInfo || curNetworkInfo?.error_msg?.length) {
     await doStopVpn()
     return
   }
 
   const virtual_ip = Utils.ipv4ToString(curNetworkInfo?.my_node_info?.virtual_ipv4.address)
+
+  if (config.dhcp && (!virtual_ip || !virtual_ip.length)) {
+    console.log('DHCP enabled but no IP yet, will retry in', DHCP_POLLING_INTERVAL, 'ms')
+    dhcpPollingTimer = setTimeout(() => {
+      onNetworkInstanceChange(instanceId)
+    }, DHCP_POLLING_INTERVAL)
+    return
+  }
+
   if (!virtual_ip || !virtual_ip.length) {
     await doStopVpn()
     return
@@ -142,12 +168,15 @@ async function onNetworkInstanceChange() {
     network_length = 24
   }
 
-  const routes = getRoutesForVpn(curNetworkInfo?.routes)
+  const routes = getRoutesForVpn(curNetworkInfo?.routes, config)
+
+  const dns = config.enable_magic_dns ? '100.100.100.101' : undefined;
 
   const ipChanged = virtual_ip !== curVpnStatus.ipv4Addr
   const routesChanged = JSON.stringify(routes) !== JSON.stringify(curVpnStatus.routes)
+  const dnsChanged = dns != curVpnStatus.dns
 
-  if (ipChanged || routesChanged) {
+  if (ipChanged || routesChanged || dnsChanged) {
     console.info('vpn service virtual ip changed', JSON.stringify(curVpnStatus), virtual_ip)
     try {
       await doStopVpn()
@@ -157,51 +186,28 @@ async function onNetworkInstanceChange() {
     }
 
     try {
-      await doStartVpn(virtual_ip, 24, routes)
+      await doStartVpn(virtual_ip, network_length, routes, dns)
     }
     catch (e) {
-      console.error('start vpn service failed, clear all network insts.', e)
-      networkStore.clearNetworkInstances()
-      await retainNetworkInstance(networkStore.networkInstanceIds)
+      console.error('start vpn service failed, stop all other network insts.', e)
+      await runNetworkInstance(config, true); //on android config should always be saved
     }
   }
 }
 
-async function watchNetworkInstance() {
-  let subscribe_running = false
-  networkStore.$subscribe(async () => {
-    if (subscribe_running) {
-      return
-    }
-    subscribe_running = true
-    try {
-      await onNetworkInstanceChange()
-    }
-    catch (_) {
-    }
-    subscribe_running = false
-  })
-  console.error('vpn service watch network instance')
-}
-
-function isNoTunEnabled(instanceId: string | undefined) {
+async function isNoTunEnabled(instanceId: string | undefined) {
   if (!instanceId) {
     return false
   }
-  const no_tun = networkStore.isNoTunEnabled(instanceId)
-  if (no_tun) {
-    return true
-  }
-  return false
+  return (await getConfig(instanceId)).no_tun ?? false
 }
 
 export async function initMobileVpnService() {
   await registerVpnServiceListener()
-  await watchNetworkInstance()
 }
 
 export async function prepareVpnService(instanceId: string) {
-  if (isNoTunEnabled(instanceId)) {
+  if (await isNoTunEnabled(instanceId)) {
     return
   }
   console.log('prepare vpn')

easytier-gui/src/composables/mode.ts

@@ -0,0 +1,46 @@
+import { type } from '@tauri-apps/plugin-os';
+
+export interface WebClientConfig {
+    config_server_url?: string
+}
+
+export interface NormalMode extends WebClientConfig {
+    mode: 'normal'
+    // if not provided will use ring tunnel rpc server
+    rpc_portal?: string
+    enable_rpc_port_listen?: boolean
+    rpc_listen_port?: number
+}
+
+export interface ServiceMode extends WebClientConfig {
+    mode: 'service'
+    config_dir: string
+    rpc_portal: string
+    file_log_level: 'off' | 'warn' | 'info' | 'debug' | 'trace'
+    file_log_dir: string
+}
+
+export interface RemoteMode {
+    mode: 'remote'
+    remote_rpc_address: string
+}
+
+export function saveMode(mode: Mode) {
+    localStorage.setItem('app_mode', JSON.stringify(mode))
+}
+
+
+export function loadMode(): Mode {
+    const modeStr = localStorage.getItem('app_mode')
+    if (modeStr) {
+        let mode = JSON.parse(modeStr) as Mode
+        if (type() === 'android') {
+            return { ...mode, mode: 'normal' }
+        }
+        return mode
+    } else {
+        return { mode: 'normal' }
+    }
+}
+
+export type Mode = NormalMode | ServiceMode | RemoteMode

easytier-gui/src/composables/network.ts

@@ -1,45 +0,0 @@
-import type { NetworkTypes } from 'easytier-frontend-lib'
-import { invoke } from '@tauri-apps/api/core'
-
-type NetworkConfig = NetworkTypes.NetworkConfig
-type NetworkInstanceRunningInfo = NetworkTypes.NetworkInstanceRunningInfo
-
-export async function parseNetworkConfig(cfg: NetworkConfig) {
-  return invoke<string>('parse_network_config', { cfg })
-}
-
-export async function generateNetworkConfig(tomlConfig: string) {
-  return invoke<NetworkConfig>('generate_network_config', { tomlConfig })
-}
-
-export async function runNetworkInstance(cfg: NetworkConfig) {
-  return invoke('run_network_instance', { cfg })
-}
-
-export async function retainNetworkInstance(instanceIds: string[]) {
-  return invoke('retain_network_instance', { instanceIds })
-}
-
-export async function collectNetworkInfos() {
-  return await invoke<Record<string, NetworkInstanceRunningInfo>>('collect_network_infos')
-}
-
-export async function getOsHostname() {
-  return await invoke<string>('get_os_hostname')
-}
-
-export async function isAutostart() {
-  return await invoke<boolean>('is_autostart')
-}
-
-export async function setLoggingLevel(level: string) {
-  return await invoke('set_logging_level', { level })
-}
-
-export async function setTunFd(instanceId: string, fd: number) {
-  return await invoke('set_tun_fd', { instanceId, fd })
-}
-
-export async function getEasytierVersion() {
-  return await invoke<string>('easytier_version')
-}

easytier-gui/src/main.ts

@@ -1,15 +1,15 @@
-import Aura from '@primevue/themes/aura'
-import PrimeVue from 'primevue/config'
-import ToastService from 'primevue/toastservice'
+import Aura from '@primeuix/themes/aura';
+import PrimeVue from 'primevue/config';
 
-import { createRouter, createWebHistory } from 'vue-router/auto'
-import { routes } from 'vue-router/auto-routes'
-import App from '~/App.vue'
-import EasyTierFrontendLib, { I18nUtils } from 'easytier-frontend-lib'
+import EasyTierFrontendLib, { I18nUtils } from 'easytier-frontend-lib';
+import { createRouter, createWebHistory } from 'vue-router/auto';
+import { routes } from 'vue-router/auto-routes';
+import App from '~/App.vue';
+
+import 'easytier-frontend-lib/style.css';
+import { ConfirmationService, DialogService, ToastService } from 'primevue';
+import '~/styles.css';
 
-import { getAutoLaunchStatusAsync, loadAutoLaunchStatusAsync } from './modules/auto_launch'
-import '~/styles.css'
-import 'easytier-frontend-lib/style.css'
 
 if (import.meta.env.PROD) {
   document.addEventListener('keydown', (event) => {
@@ -29,7 +29,6 @@ if (import.meta.env.PROD) {
 
 async function main() {
   await I18nUtils.loadLanguageAsync(localStorage.getItem('lang') || 'en')
-  await loadAutoLaunchStatusAsync(getAutoLaunchStatusAsync())
 
   const app = createApp(App)
 
@@ -55,7 +54,9 @@ async function main() {
       },
     },
   })
-  app.use(ToastService as any)
+  app.use(ToastService)
+  app.use(DialogService)
+  app.use(ConfirmationService)
   app.mount('#app')
 }
 

easytier-gui/src/modules/api.ts

@@ -0,0 +1,47 @@
+import { type Api, type NetworkTypes } from "easytier-frontend-lib";
+import * as backend from "~/composables/backend";
+
+export class GUIRemoteClient implements Api.RemoteClient {
+    async validate_config(config: NetworkTypes.NetworkConfig): Promise<Api.ValidateConfigResponse> {
+        return backend.validateConfig(config);
+    }
+    async run_network(config: NetworkTypes.NetworkConfig, save: boolean): Promise<undefined> {
+        await backend.runNetworkInstance(config, save);
+    }
+    async get_network_info(inst_id: string): Promise<NetworkTypes.NetworkInstanceRunningInfo | undefined> {
+        return backend.collectNetworkInfo(inst_id).then(infos => infos.info.map[inst_id]);
+    }
+    async list_network_instance_ids(): Promise<Api.ListNetworkInstanceIdResponse> {
+        return backend.listNetworkInstanceIds();
+    }
+    async delete_network(inst_id: string): Promise<undefined> {
+        await backend.deleteNetworkInstance(inst_id);
+    }
+    async update_network_instance_state(inst_id: string, disabled: boolean): Promise<undefined> {
+        await backend.updateNetworkConfigState(inst_id, disabled);
+    }
+    async save_config(config: NetworkTypes.NetworkConfig): Promise<undefined> {
+        await backend.saveNetworkConfig(config);
+    }
+    async get_network_config(inst_id: string): Promise<NetworkTypes.NetworkConfig> {
+        return backend.getConfig(inst_id);
+    }
+    async generate_config(config: NetworkTypes.NetworkConfig): Promise<Api.GenerateConfigResponse> {
+        try {
+            return { toml_config: await backend.parseNetworkConfig(config) };
+        } catch (e) {
+            return { error: e + "" };
+        }
+    }
+    async parse_config(toml_config: string): Promise<Api.ParseConfigResponse> {
+        try {
+            return { config: await backend.generateNetworkConfig(toml_config) }
+        } catch (e) {
+            return { error: e + "" };
+        }
+    }
+    async get_network_metas(instance_ids: string[]): Promise<Api.GetNetworkMetasResponse> {
+        return await backend.getNetworkMetas(instance_ids);
+    }
+
+}

easytier-gui/src/modules/auto_launch.ts

@@ -1,26 +0,0 @@
-import { disable, enable, isEnabled } from '@tauri-apps/plugin-autostart'
-
-export async function loadAutoLaunchStatusAsync(target_enable: boolean): Promise<boolean> {
-  try {
-    if (target_enable) {
-      await enable()
-    }
-    else {
-      // 消除没有配置自启动时进行关闭操作报错
-      try {
-        await disable()
-      }
-      catch { }
-    }
-    localStorage.setItem('auto_launch', JSON.stringify(await isEnabled()))
-    return isEnabled()
-  }
-  catch (e) {
-    console.error(e)
-    return false
-  }
-}
-
-export function getAutoLaunchStatusAsync(): boolean {
-  return localStorage.getItem('auto_launch') === 'true'
-}

easytier-gui/src/modules/dock_visibility.ts

@@ -1,18 +0,0 @@
-import { invoke } from '@tauri-apps/api/core'
-
-export async function loadDockVisibilityAsync(visible: boolean): Promise<boolean> {
-  try {
-    await invoke('set_dock_visibility', { visible })
-    localStorage.setItem('dock_visibility', JSON.stringify(visible))
-    return visible
-  }
-  catch (e) {
-    console.error('Failed to set dock visibility:', e)
-    return getDockVisibilityStatus()
-  }
-}
-
-export function getDockVisibilityStatus(): boolean {
-  const stored = localStorage.getItem('dock_visibility')
-  return stored !== null ? JSON.parse(stored) : true
-}

easytier-gui/src/pages/index.vue

@@ -1,148 +1,248 @@
 <script setup lang="ts">
-import { appLogDir } from '@tauri-apps/api/path'
 
-import { getCurrentWindow } from '@tauri-apps/api/window'
-import { writeText } from '@tauri-apps/plugin-clipboard-manager'
 import { type } from '@tauri-apps/plugin-os'
-import { exit } from '@tauri-apps/plugin-process'
-import { open } from '@tauri-apps/plugin-shell'
-import TieredMenu from 'primevue/tieredmenu'
-import { useToast } from 'primevue/usetoast'
-import { NetworkTypes, Config, Status, Utils, I18nUtils, ConfigEditDialog } from 'easytier-frontend-lib'
 
-import { isAutostart, setLoggingLevel } from '~/composables/network'
+import { invoke } from '@tauri-apps/api/core'
+import { writeText } from '@tauri-apps/plugin-clipboard-manager'
+import { open } from '@tauri-apps/plugin-shell'
+import { exit } from '@tauri-apps/plugin-process'
+import { I18nUtils, RemoteManagement, Utils } from "easytier-frontend-lib"
+import type { MenuItem } from 'primevue/menuitem'
 import { useTray } from '~/composables/tray'
-import { getAutoLaunchStatusAsync as getAutoLaunchStatus, loadAutoLaunchStatusAsync } from '~/modules/auto_launch'
-import { getDockVisibilityStatus, loadDockVisibilityAsync } from '~/modules/dock_visibility'
+import { GUIRemoteClient } from '~/modules/api'
+
+import { useToast, useConfirm } from 'primevue'
+import { loadMode, saveMode, WebClientConfig, type Mode } from '~/composables/mode'
+import { saveLastNetworkInstanceId, loadLastNetworkInstanceId } from '~/composables/config'
+import ModeSwitcher from '~/components/ModeSwitcher.vue'
+import { getServiceStatus } from '~/composables/backend'
 
 const { t, locale } = useI18n()
-const visible = ref(false)
+const confirm = useConfirm()
 const aboutVisible = ref(false)
-const tomlConfig = ref('')
+const modeDialogVisible = ref(false)
+const currentMode = ref<Mode>({ mode: 'normal' })
+const editingMode = ref<Mode>({ mode: 'normal' })
+const isModeSaving = ref(false)
+const manualDisconnect = ref(false)
+
+const configServerDialogVisible = ref(false)
+const configServerConnected = ref(false)
+
+async function openModeDialog() {
+  editingMode.value = JSON.parse(JSON.stringify(loadMode()))
+  modeDialogVisible.value = true
+}
+
+async function onModeSave() {
+  if (isModeSaving.value) {
+    return;
+  }
+  isModeSaving.value = true
+  try {
+    await initWithMode(editingMode.value);
+    modeDialogVisible.value = false
+  }
+  catch (e: any) {
+    toast.add({ severity: 'error', summary: t('error'), detail: e, life: 10000 })
+    console.error("Error switching mode", e, currentMode.value, editingMode.value)
+    await initWithMode(currentMode.value);
+  }
+  finally {
+    isModeSaving.value = false
+  }
+}
+
+async function onUninstallService() {
+  confirm.require({
+    message: t('mode.uninstall_service_confirm'),
+    header: t('mode.uninstall_service'),
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: t('web.common.cancel'),
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: t('mode.uninstall_service'),
+      severity: 'danger'
+    },
+    accept: async () => {
+      isModeSaving.value = true
+      try {
+        await initWithMode({ ...currentMode.value, mode: 'normal' });
+        await initService(undefined)
+        toast.add({ severity: 'success', summary: t('web.common.success'), detail: t('mode.uninstall_service_success'), life: 3000 })
+        modeDialogVisible.value = false
+      } catch (e: any) {
+        toast.add({ severity: 'error', summary: t('error'), detail: e, life: 10000 })
+        console.error("Error uninstalling service", e)
+      } finally {
+        isModeSaving.value = false
+      }
+    },
+  });
+}
+
+async function onStopService() {
+  isModeSaving.value = true
+  manualDisconnect.value = true
+  try {
+    await setServiceStatus(false)
+    toast.add({ severity: 'success', summary: t('web.common.success'), detail: t('mode.stop_service_success'), life: 3000 })
+    modeDialogVisible.value = false
+  }
+  catch (e: any) {
+    toast.add({ severity: 'error', summary: t('error'), detail: e, life: 10000 })
+    console.error("Error stopping service", e)
+  }
+  finally {
+    isModeSaving.value = false
+  }
+}
+
+async function initWithMode(mode: Mode) {
+  const running_inst_ids = (await remoteClient.value.list_network_instance_ids().catch(() => undefined))?.running_inst_ids ?? []
+
+  if (currentMode.value.mode === 'service' && mode.mode !== 'service') {
+    let serviceStatus = await getServiceStatus()
+    if (serviceStatus === "Running") {
+      manualDisconnect.value = true
+      await setServiceStatus(false)
+      serviceStatus = await getServiceStatus()
+      for (let i = 0; i < 10; i++) { // macOS takes a while to stop the service
+        if (serviceStatus === "Stopped") {
+          break;
+        }
+        await new Promise(resolve => setTimeout(resolve, 100))
+        serviceStatus = await getServiceStatus()
+      }
+    }
+    if (serviceStatus === "Stopped") {
+      await initService(undefined)
+    }
+  }
+
+  let url: string | undefined = undefined
+  let retrys = 1
+  switch (mode.mode) {
+    case 'remote':
+      if (!mode.remote_rpc_address) {
+        toast.add({ severity: 'error', summary: t('error'), detail: t('mode.remote_rpc_address_empty'), life: 10000 })
+        return initWithMode({ ...mode, mode: 'normal' });
+      }
+      url = mode.remote_rpc_address
+      break;
+    case 'service':
+      if (!mode.config_dir || !mode.file_log_dir || !mode.file_log_level || !mode.rpc_portal) {
+        toast.add({ severity: 'error', summary: t('error'), detail: t('mode.service_config_empty'), life: 10000 })
+        return initWithMode({ ...mode, mode: 'normal' });
+      }
+      let serviceStatus = await getServiceStatus()
+      if (serviceStatus === "NotInstalled" || JSON.stringify(mode) !== JSON.stringify(currentMode.value)) {
+        mode.config_server_url = mode.config_server_url || undefined
+        await initService({
+          config_dir: mode.config_dir,
+          file_log_dir: mode.file_log_dir,
+          file_log_level: mode.file_log_level,
+          rpc_portal: mode.rpc_portal,
+          config_server: mode.config_server_url,
+        })
+        serviceStatus = await getServiceStatus()
+      }
+      if (serviceStatus === "Stopped") {
+        await setServiceStatus(true)
+      }
+      url = "tcp://" + mode.rpc_portal.replace("0.0.0.0", "127.0.0.1")
+      retrys = 5
+      break;
+    case 'normal':
+      url = mode.rpc_portal;
+      break;
+  }
+  for (let i = 0; i < retrys; i++) {
+    try {
+      await connectRpcClient(mode.mode === 'normal', url)
+      break;
+    } catch (e) {
+      if (i === retrys - 1) {
+        const errMsg = e instanceof Error ? e.message : String(e)
+        toast.add({
+          severity: 'error',
+          summary: t('error'),
+          detail: t('mode.rpc_connection_failed', { error: errMsg }),
+          life: 1000,
+        })
+        throw e;
+      }
+      console.error("Error connecting rpc client, retrying...", e)
+      await new Promise(resolve => setTimeout(resolve, 1000))
+    }
+  }
+  await sendConfigs(running_inst_ids.map(Utils.UuidToStr))
+  if (mode.mode === 'normal') {
+    mode.config_server_url = mode.config_server_url || undefined
+    initWebClient(mode.config_server_url)
+  }
+  currentMode.value = mode
+  saveMode(mode)
+  clientRunning.value = await isClientRunning()
+}
+
+onMounted(() => {
+  currentMode.value = loadMode()
+  initWithMode(currentMode.value);
+});
 
 useTray(true)
+let toast = useToast();
 
-const items = ref([
-  {
-    label: () => activeStep.value == "2" ? t('show_config') : t('edit_config'),
-    icon: 'pi pi-file-edit',
-    command: async () => {
-      try {
-        const ret = await parseNetworkConfig(networkStore.curNetwork)
-        tomlConfig.value = ret
+const remoteClient = computed(() => new GUIRemoteClient());
+const instanceId = ref<string | undefined>(undefined);
+const clientRunning = ref(false);
+
+watch(instanceId, (newVal) => {
+  if (newVal) {
+    saveLastNetworkInstanceId(newVal);
   }
-      catch (e: any) {
-        tomlConfig.value = e
+});
+
+watch(clientRunning, async (newVal, oldVal) => {
+  if (!newVal && oldVal) {
+    if (manualDisconnect.value) {
+      manualDisconnect.value = false
+      return
     }
-      visible.value = true
-    },
-  },
-  {
-    label: () => t('del_cur_network'),
-    icon: 'pi pi-times',
-    command: async () => {
-      networkStore.removeNetworkInstance(networkStore.curNetwork.instance_id)
-      await retainNetworkInstance(networkStore.networkInstanceIds)
-      networkStore.delCurNetwork()
-    },
-    disabled: () => networkStore.networkList.length <= 1,
-  },
-])
-
-enum Severity {
-  None = 'none',
-  Success = 'success',
-  Info = 'info',
-  Warn = 'warn',
-  Error = 'error',
+    await reconnectClient()
+  } else if (newVal && !oldVal) {
+    const lastInstanceId = loadLastNetworkInstanceId();
+    if (lastInstanceId) {
+      instanceId.value = lastInstanceId;
     }
-
-const messageBarSeverity = ref(Severity.None)
-const messageBarContent = ref('')
-const toast = useToast()
-
-const networkStore = useNetworkStore()
-
-const curNetworkConfig = computed(() => {
-  if (networkStore.curNetworkId) {
-    // console.log('instanceId', props.instanceId)
-    const c = networkStore.networkList.find(n => n.instance_id === networkStore.curNetworkId)
-    if (c !== undefined)
-      return c
-  }
-
-  return networkStore.curNetwork
-})
-
-const curNetworkInst = computed<NetworkTypes.NetworkInstance | null>(() => {
-  let ret = networkStore.networkInstances.find(n => n.instance_id === curNetworkConfig.value.instance_id)
-  console.log('curNetworkInst', ret)
-  if (ret === undefined) {
-    return null;
-  } else {
-    return ret;
   }
 })
 
-function addNewNetwork() {
-  networkStore.addNewNetwork()
-  networkStore.curNetwork = networkStore.lastNetwork
-}
-
-networkStore.$subscribe(async () => {
-  networkStore.saveToLocalStorage()
-  try {
-    await parseNetworkConfig(networkStore.curNetwork)
-    messageBarSeverity.value = Severity.None
-  }
-  catch (e: any) {
-    messageBarContent.value = e
-    messageBarSeverity.value = Severity.Error
-  }
-})
-
-async function runNetworkCb(cfg: NetworkTypes.NetworkConfig, cb: () => void) {
-  if (type() === 'android') {
-    await prepareVpnService(cfg.instance_id)
-    networkStore.clearNetworkInstances()
-  }
-  else {
-    networkStore.removeNetworkInstance(cfg.instance_id)
-  }
-
-  await retainNetworkInstance(networkStore.networkInstanceIds)
-  networkStore.addNetworkInstance(cfg.instance_id)
-
-  try {
-    await runNetworkInstance(cfg)
-    networkStore.addAutoStartInstId(cfg.instance_id)
-  }
-  catch (e: any) {
-    // console.error(e)
-    toast.add({ severity: 'info', detail: e })
-  }
-
-  cb()
-}
-
-async function stopNetworkCb(cfg: NetworkTypes.NetworkConfig, cb: () => void) {
-  // console.log('stopNetworkCb', cfg, cb)
-  cb()
-  networkStore.removeNetworkInstance(cfg.instance_id)
-  await retainNetworkInstance(networkStore.networkInstanceIds)
-  networkStore.removeAutoStartInstId(cfg.instance_id)
-}
-
-async function updateNetworkInfos() {
-  networkStore.updateWithNetworkInfos(await collectNetworkInfos())
-}
-
-let intervalId = 0
 onMounted(async () => {
-  intervalId = window.setInterval(async () => {
-    await updateNetworkInfos()
-  }, 500)
+  clientRunning.value = await isClientRunning().catch(() => false)
+  const timer = setInterval(async () => {
+    try {
+      clientRunning.value = await isClientRunning()
+    } catch (e) {
+      clientRunning.value = false
+      console.error("Error checking client running status", e)
+    }
+  }, 1000)
 
+  onUnmounted(() => {
+    clearInterval(timer)
+  })
+})
+async function reconnectClient() {
+  editingMode.value = JSON.parse(JSON.stringify(loadMode()));
+  await onModeSave()
+}
+
+onMounted(async () => {
   window.setTimeout(async () => {
     await setTrayMenu([
       await MenuItemShow(t('tray.show')),
@@ -150,16 +250,53 @@ onMounted(async () => {
     ])
   }, 1000)
 })
-onUnmounted(() => clearInterval(intervalId))
-
-const activeStep = computed(() => {
-  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId) ? '2' : '1'
-})
 
 let current_log_level = 'off'
 
-const setting_menu = ref()
-const setting_menu_items = ref([
+const log_menu = ref()
+// 从后端获取正确的日志路径
+async function getLogDirPath(): Promise<string> {
+  return await invoke<string>('get_log_dir_path')
+}
+
+const log_menu_items_popup: Ref<MenuItem[]> = ref([
+  ...['off', 'warn', 'info', 'debug', 'trace'].map(level => ({
+    label: () => t(`logging_level_${level}`) + (current_log_level === level ? ' ✓' : ''),
+    command: async () => {
+      current_log_level = level
+      await setLoggingLevel(level)
+    },
+  })),
+  {
+    separator: true,
+  },
+  {
+    label: () => t('logging_open_dir'),
+    icon: 'pi pi-folder-open',
+    command: async () => {
+      // console.log('open log dir', await getLogDirPath())
+      await open(await getLogDirPath())
+    },
+    visible: () => type() !== 'android',
+  },
+  {
+    label: () => t('logging_copy_dir'),
+    icon: 'pi pi-tablet',
+    command: async () => {
+      await writeText(await getLogDirPath())
+    },
+  },
+])
+
+function toggle_log_menu(event: any) {
+  log_menu.value.toggle(event)
+}
+
+function getLabel(item: MenuItem) {
+  return typeof item.label === 'function' ? item.label() : item.label
+}
+
+const setting_menu_items: Ref<MenuItem[]> = ref([
   {
     label: () => t('exchange_language'),
     icon: 'pi pi-language',
@@ -172,55 +309,22 @@ const setting_menu_items = ref([
     },
   },
   {
-    label: () => getAutoLaunchStatus() ? t('disable_auto_launch') : t('enable_auto_launch'),
-    icon: 'pi pi-desktop',
-    command: async () => {
-      await loadAutoLaunchStatusAsync(!getAutoLaunchStatus())
-    },
+    label: () => `${t('mode.switch_mode')}: ${t('mode.' + currentMode.value.mode)}`,
+    icon: 'pi pi-sync',
+    command: openModeDialog,
+    visible: () => type() !== 'android',
   },
   {
-    label: () => getDockVisibilityStatus() ? t('hide_dock_icon') : t('show_dock_icon'),
-    icon: 'pi pi-eye-slash',
-    command: async () => {
-      await loadDockVisibilityAsync(!getDockVisibilityStatus())
-    },
-    visible: () => type() === 'macos',
+    label: () => `${t('config-server.title')}${t('config-server.' + configServerConnectionStatus.value)}`,
+    icon: 'pi pi-globe',
+    command: openConfigServerDialog,
+    visible: () => ["normal", "service"].includes(currentMode.value.mode),
   },
   {
+    key: 'logging_menu',
     label: () => t('logging'),
     icon: 'pi pi-file',
-    items: (function () {
-      const levels = ['off', 'warn', 'info', 'debug', 'trace']
-      const items = []
-      for (const level of levels) {
-        items.push({
-          label: () => t(`logging_level_${level}`) + (current_log_level === level ? ' ✓' : ''),
-          command: async () => {
-            current_log_level = level
-            await setLoggingLevel(level)
-          },
-        })
-      }
-      items.push({
-        separator: true,
-      })
-      items.push({
-        label: () => t('logging_open_dir'),
-        icon: 'pi pi-folder-open',
-        command: async () => {
-          // console.log('open log dir', await appLogDir())
-          await open(await appLogDir())
-        },
-      })
-      items.push({
-        label: () => t('logging_copy_dir'),
-        icon: 'pi pi-tablet',
-        command: async () => {
-          await writeText(await appLogDir())
-        },
-      })
-      return items
-    })(),
+    items: [], // Keep this to show it's a parent menu
   },
   {
     label: () => t('about.title'),
@@ -238,25 +342,11 @@ const setting_menu_items = ref([
   },
 ])
 
-function toggle_setting_menu(event: any) {
-  setting_menu.value.toggle(event)
+async function connectRpcClient(isNormalMode: boolean, url?: string) {
+  await initRpcConnection(isNormalMode, url)
+  console.log("easytier rpc connection established, isNormalMode: ", isNormalMode)
 }
 
-onBeforeMount(async () => {
-  networkStore.loadFromLocalStorage()
-  if (type() !== 'android' && getAutoLaunchStatus() && await isAutostart()) {
-    getCurrentWindow().hide()
-    const autoStartIds = networkStore.autoStartInstIds
-    for (const id of autoStartIds) {
-      const cfg = networkStore.networkList.find((item: NetworkTypes.NetworkConfig) => item.instance_id === id)
-      if (cfg) {
-        networkStore.addNetworkInstance(cfg.instance_id)
-        await runNetworkInstance(cfg)
-      }
-    }
-  }
-})
-
 onMounted(async () => {
   if (type() === 'android') {
     try {
@@ -266,123 +356,124 @@ onMounted(async () => {
       console.error("easytier init vpn service failed", e)
     }
   }
+  const unlisten = await listenGlobalEvents()
+
+  onUnmounted(() => {
+    unlisten()
+  })
 })
 
-function isRunning(id: string) {
-  return networkStore.networkInstanceIds.includes(id)
+async function openConfigServerDialog() {
+  editingMode.value = JSON.parse(JSON.stringify(loadMode()))
+  configServerDialogVisible.value = true
 }
-
-async function saveTomlConfig(tomlConfig: string) {
-  const config = await generateNetworkConfig(tomlConfig)
-  networkStore.replaceCurNetwork(config);
-  toast.add({ severity: 'success', detail: t('config_saved'), life: 3000 })
-  visible.value = false
+async function onConfigServerSave() {
+  if (JSON.stringify(currentMode.value) === JSON.stringify(editingMode.value)) {
+    configServerDialogVisible.value = false
+    return;
   }
-</script>
+  if (editingMode.value.mode === 'service') {
+    await new Promise<void>((resolve, reject) => {
+      confirm.require({
+        message: t('config-server.update_service_confirm'),
+        icon: 'pi pi-exclamation-triangle',
+        rejectProps: {
+          label: t('web.common.cancel'),
+          severity: 'secondary',
+          outlined: true
+        },
+        acceptProps: {
+          label: t('web.common.confirm'),
+        },
+        accept: async () => {
+          resolve()
+        },
+        reject: () => {
+          reject()
+        }
+      });
+    })
+  }
+  console.log("Saving config server url", (editingMode.value as WebClientConfig).config_server_url)
+  await onModeSave();
+  configServerDialogVisible.value = false
+}
+onMounted(() => {
+  const timer = setInterval(async () => {
+    if (currentMode.value.mode !== 'normal') return;
+    if (!currentMode.value.config_server_url) return;
+    configServerConnected.value = await isWebClientConnected();
+  }, 1000)
+
+  onUnmounted(() => {
+    clearInterval(timer)
+  })
+})
+const configServerConnectionStatus = computed(() => {
+  if (currentMode.value.mode !== 'normal') {
+    return 'unknown'
+  }
+  if (!currentMode.value.config_server_url) {
+    return 'disconnected'
+  }
+  return configServerConnected.value ? 'connected' : 'connecting'
+})
 
-<script lang="ts">
 </script>
 
 <template>
   <div id="root" class="flex flex-col">
-    <ConfigEditDialog v-model:visible="visible" :cur-network="curNetworkConfig" :readonly="activeStep !== '1'"
-      :save-config="saveTomlConfig" :generate-config="parseNetworkConfig" />
-
     <Dialog v-model:visible="aboutVisible" modal :header="t('about.title')" :style="{ width: '70%' }">
       <About />
     </Dialog>
+    <Dialog v-model:visible="modeDialogVisible" modal :header="t('mode.switch_mode')" :style="{ width: '50vw' }">
+      <ModeSwitcher v-model="editingMode" @uninstall-service="onUninstallService" @stop-service="onStopService" />
+      <template #footer>
+        <Button :label="t('web.common.cancel')" icon="pi pi-times" @click="modeDialogVisible = false" text />
+        <Button :label="t('web.common.save')" icon="pi pi-save" @click="onModeSave" autofocus :loading="isModeSaving" />
+      </template>
+    </Dialog>
 
-    <div>
-      <Toolbar>
-        <template #start>
-          <div class="flex items-center">
-            <Button icon="pi pi-plus" severity="primary" :label="t('add_new_network')" @click="addNewNetwork" />
+    <Dialog v-model:visible="configServerDialogVisible" modal :header="t('config-server.title')"
+      :style="{ width: '50vw' }">
+      <div class="flex flex-col gap-3">
+        <label for="config-server-address">{{ t('config-server.address') }}</label>
+        <InputText id="config-server-address" v-model="(editingMode as WebClientConfig).config_server_url"
+          :placeholder="t('config-server.address_placeholder')" />
+        <small class="p-text-secondary whitespace-pre-wrap">{{ t('config-server.description') }}</small>
       </div>
+      <template #footer>
+        <Button :label="t('web.common.cancel')" icon="pi pi-times" @click="configServerDialogVisible = false" text />
+        <Button :label="t('web.common.save')" icon="pi pi-save" @click="onConfigServerSave" autofocus
+          :loading="isModeSaving" />
       </template>
+    </Dialog>
 
-        <template #center>
-          <div class="min-w-40">
-            <Select v-model="networkStore.curNetwork" :options="networkStore.networkList" :highlight-on-select="false"
-              :placeholder="t('select_network')" class="w-full">
-              <template #value="slotProps">
-                <div class="flex items-start content-center">
-                  <div class="mr-4 flex-col">
-                    <span>{{ slotProps.value.network_name }}</span>
-                  </div>
-                  <Tag class="my-auto leading-3" :severity="isRunning(slotProps.value.instance_id) ? 'success' : 'info'"
-                    :value="t(isRunning(slotProps.value.instance_id) ? 'network_running' : 'network_stopped')" />
-                </div>
-              </template>
-              <template #option="slotProps">
-                <div class="flex flex-col items-start content-center max-w-full">
-                  <div class="flex">
-                    <div class="mr-4">
-                      {{ t('network_name') }}: {{ slotProps.option.network_name }}
-                    </div>
-                    <Tag class="my-auto leading-3"
-                      :severity="isRunning(slotProps.option.instance_id) ? 'success' : 'info'"
-                      :value="t(isRunning(slotProps.option.instance_id) ? 'network_running' : 'network_stopped')" />
-                  </div>
-                  <div v-if="slotProps.option.networking_method !== NetworkTypes.NetworkingMethod.Standalone"
-                    class="max-w-full overflow-hidden text-ellipsis">
-                    {{ slotProps.option.networking_method === NetworkTypes.NetworkingMethod.Manual
-                      ? slotProps.option.peer_urls.join(', ')
-                      : slotProps.option.public_server_url }}
-                  </div>
-                  <div
-                    v-if="isRunning(slotProps.option.instance_id) && networkStore.instances[slotProps.option.instance_id].detail && (!!networkStore.instances[slotProps.option.instance_id].detail?.my_node_info.virtual_ipv4)">
-                    {{
-                      Utils.ipv4InetToString(networkStore.instances[slotProps.option.instance_id].detail?.my_node_info.virtual_ipv4)
-                    }}
-                  </div>
-                </div>
-              </template>
-            </Select>
-          </div>
-        </template>
+    <Menu ref="log_menu" :model="log_menu_items_popup" :popup="true" />
 
-        <template #end>
-          <Button icon="pi pi-cog" severity="secondary" aria-haspopup="true" :label="t('settings')"
-            aria-controls="overlay_setting_menu" @click="toggle_setting_menu" />
-          <TieredMenu id="overlay_setting_menu" ref="setting_menu" :model="setting_menu_items" :popup="true" />
-        </template>
-      </Toolbar>
+    <RemoteManagement v-if="clientRunning" class="flex-1 overflow-y-auto" :api="remoteClient"
+      :pause-auto-refresh="isModeSaving" v-model:instance-id="instanceId" />
+    <div v-else class="empty-state flex-1 flex flex-col items-center py-12">
+      <i class="pi pi-server text-5xl text-secondary mb-4 opacity-50"></i>
+      <div class="text-xl text-center font-medium mb-3">{{ t('client.not_running') }}
+      </div>
+      <Button @click="reconnectClient" :loading="isModeSaving" :label="t('client.retry')" icon="pi pi-replay"
+        iconPos="left" />
     </div>
 
-    <Panel class="h-full overflow-y-auto">
-      <Stepper :value="activeStep">
-        <StepList value="1">
-          <Step value="1">
-            {{ t('config_network') }}
-          </Step>
-          <Step value="2">
-            {{ t('running') }}
-          </Step>
-        </StepList>
-        <StepPanels value="1">
-          <StepPanel v-slot="{ activateCallback = (s: string) => { } } = {}" value="1">
-            <Config :instance-id="networkStore.curNetworkId" :config-invalid="messageBarSeverity !== Severity.None"
-              :cur-network="curNetworkConfig" @run-network="runNetworkCb($event, () => activateCallback('2'))" />
-          </StepPanel>
-          <StepPanel v-slot="{ activateCallback = (s: string) => { } } = {}" value="2">
-            <div class="flex flex-col">
-              <Status :cur-network-inst="curNetworkInst" />
-            </div>
-            <div class="flex pt-6 justify-center">
-              <Button :label="t('stop_network')" severity="danger" icon="pi pi-arrow-left"
-                @click="stopNetworkCb(networkStore.curNetwork, () => activateCallback('1'))" />
-            </div>
-          </StepPanel>
-        </StepPanels>
-      </Stepper>
-    </Panel>
-
-    <div>
-      <Menubar :model="items" breakpoint="300px" />
-      <InlineMessage v-if="messageBarSeverity !== Severity.None" class="absolute bottom-0 right-0" severity="error">
-        {{ messageBarContent }}
-      </InlineMessage>
-    </div>
+    <Menubar :model="setting_menu_items" breakpoint="795px">
+      <template #item="{ item, props }">
+        <a v-if="item.key === 'logging_menu'" v-bind="props.action" @click="toggle_log_menu">
+          <span :class="item.icon" />
+          <span class="p-menubar-item-label">{{ getLabel(item) }}</span>
+          <span class="pi pi-angle-down p-menubar-item-icon text-[9px]"></span>
+        </a>
+        <a v-else v-bind="props.action">
+          <span :class="item.icon" />
+          <span class="p-menubar-item-label">{{ getLabel(item) }}</span>
+        </a>
+      </template>
+    </Menubar>
   </div>
 </template>
 

easytier-gui/src/stores/network.ts

@@ -1,148 +0,0 @@
-import { NetworkTypes } from 'easytier-frontend-lib'
-
-export const useNetworkStore = defineStore('networkStore', {
-  state: () => {
-    const networkList = [NetworkTypes.DEFAULT_NETWORK_CONFIG()]
-    return {
-      // for initially empty lists
-      networkList: networkList as NetworkTypes.NetworkConfig[],
-      // for data that is not yet loaded
-      curNetwork: networkList[0],
-
-      // uuid -> instance
-      instances: {} as Record<string, NetworkTypes.NetworkInstance>,
-
-      networkInfos: {} as Record<string, NetworkTypes.NetworkInstanceRunningInfo>,
-
-      autoStartInstIds: [] as string[],
-    }
-  },
-
-  getters: {
-    lastNetwork(): NetworkTypes.NetworkConfig {
-      return this.networkList[this.networkList.length - 1]
-    },
-
-    curNetworkId(): string {
-      return this.curNetwork.instance_id
-    },
-
-    networkInstances(): Array<NetworkTypes.NetworkInstance> {
-      return Object.values(this.instances)
-    },
-
-    networkInstanceIds(): Array<string> {
-      return Object.keys(this.instances)
-    },
-  },
-
-  actions: {
-    addNewNetwork() {
-      this.networkList.push(NetworkTypes.DEFAULT_NETWORK_CONFIG())
-    },
-
-    delCurNetwork() {
-      const curNetworkIdx = this.networkList.indexOf(this.curNetwork)
-      this.networkList.splice(curNetworkIdx, 1)
-      const nextCurNetworkIdx = Math.min(curNetworkIdx, this.networkList.length - 1)
-      this.curNetwork = this.networkList[nextCurNetworkIdx]
-    },
-
-    replaceCurNetwork(cfg: NetworkTypes.NetworkConfig) {
-      const curNetworkIdx = this.networkList.indexOf(this.curNetwork)
-      this.networkList[curNetworkIdx] = cfg
-      this.curNetwork = cfg
-    },
-
-    removeNetworkInstance(instanceId: string) {
-      delete this.instances[instanceId]
-    },
-
-    addNetworkInstance(instanceId: string) {
-      this.instances[instanceId] = {
-        instance_id: instanceId,
-        running: false,
-        error_msg: '',
-        detail: undefined,
-      }
-    },
-
-    clearNetworkInstances() {
-      this.instances = {}
-    },
-
-    updateWithNetworkInfos(networkInfos: Record<string, NetworkTypes.NetworkInstanceRunningInfo>) {
-      this.networkInfos = networkInfos
-      for (const [instanceId, info] of Object.entries(networkInfos)) {
-        if (this.instances[instanceId] === undefined)
-          this.addNetworkInstance(instanceId)
-
-        this.instances[instanceId].running = info.running
-        this.instances[instanceId].error_msg = info.error_msg || ''
-        this.instances[instanceId].detail = info
-      }
-    },
-
-    loadFromLocalStorage() {
-      let networkList: NetworkTypes.NetworkConfig[]
-
-      // if localStorage default is [{}], instanceId will be undefined
-      networkList = JSON.parse(localStorage.getItem('networkList') || '[]')
-      networkList = networkList.map((cfg) => {
-        return { ...NetworkTypes.DEFAULT_NETWORK_CONFIG(), ...cfg } as NetworkTypes.NetworkConfig
-      })
-
-      // prevent a empty list from localStorage, should not happen
-      if (networkList.length === 0)
-        networkList = [NetworkTypes.DEFAULT_NETWORK_CONFIG()]
-
-      this.networkList = networkList
-      this.curNetwork = this.networkList[0]
-
-      this.loadAutoStartInstIdsFromLocalStorage()
-    },
-
-    saveToLocalStorage() {
-      localStorage.setItem('networkList', JSON.stringify(this.networkList))
-    },
-
-    saveAutoStartInstIdsToLocalStorage() {
-      localStorage.setItem('autoStartInstIds', JSON.stringify(this.autoStartInstIds))
-    },
-
-    loadAutoStartInstIdsFromLocalStorage() {
-      try {
-        this.autoStartInstIds = JSON.parse(localStorage.getItem('autoStartInstIds') || '[]')
-      }
-      catch (e) {
-        console.error(e)
-        this.autoStartInstIds = []
-      }
-    },
-
-    addAutoStartInstId(instanceId: string) {
-      if (!this.autoStartInstIds.includes(instanceId)) {
-        this.autoStartInstIds.push(instanceId)
-      }
-      this.saveAutoStartInstIdsToLocalStorage()
-    },
-
-    removeAutoStartInstId(instanceId: string) {
-      const idx = this.autoStartInstIds.indexOf(instanceId)
-      if (idx !== -1) {
-        this.autoStartInstIds.splice(idx, 1)
-      }
-      this.saveAutoStartInstIdsToLocalStorage()
-    },
-
-    isNoTunEnabled(instanceId: string): boolean {
-      const cfg = this.networkList.find((cfg) => cfg.instance_id === instanceId)
-      if (!cfg)
-        return false
-      return cfg.no_tun ?? false
-    },
-  },
-})
-
-if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(useNetworkStore as any, import.meta.hot))

easytier-rpc-build/Cargo.toml

@@ -8,7 +8,7 @@ repository = "https://github.com/EasyTier/EasyTier"
 authors = ["kkrainbow"]
 keywords = ["vpn", "p2p", "network", "easytier"]
 categories = ["network-programming", "command-line-utilities"]
-rust-version = "1.89.0"
+rust-version = "1.93.0"
 license-file = "LICENSE"
 readme = "README.md"
 

easytier-rpc-build/src/lib.rs

@@ -29,6 +29,7 @@ impl prost_build::ServiceGenerator for ServiceGenerator {
         let method_descriptor_name = format!("{}MethodDescriptor", service.name);
 
         let mut trait_methods = String::new();
+        let mut weak_impl_methods = String::new();
         let mut enum_methods = String::new();
         let mut list_enum_methods = String::new();
         let mut client_methods = String::new();
@@ -40,6 +41,8 @@ impl prost_build::ServiceGenerator for ServiceGenerator {
         let mut match_output_type_methods = String::new();
         let mut match_output_proto_type_methods = String::new();
         let mut match_handle_methods = String::new();
+        // generate trait default method Xxx::json_call_method match branch
+        let mut match_trait_json_methods = String::new();
 
         let mut match_method_try_from = String::new();
 
@@ -66,6 +69,21 @@ impl prost_build::ServiceGenerator for ServiceGenerator {
             )
             .unwrap();
 
+            writeln!(
+                weak_impl_methods,
+                r#"    async fn {method_name}(&self, ctrl: Self::Controller, input: {input_type}) -> {namespace}::error::Result<{output_type}> {{
+        let Some(service) = self.upgrade() else {{
+            return Err({namespace}::error::Error::Shutdown);
+        }};
+        service.{method_name}(ctrl, input).await
+    }}"#,
+                method_name = method.name,
+                input_type = method.input_type,
+                output_type = method.output_type,
+                namespace = NAMESPACE,
+            )
+            .unwrap();
+
             ServiceGenerator::write_comments(&mut enum_methods, 4, &method.comments).unwrap();
             writeln!(
                 enum_methods,
@@ -164,6 +182,22 @@ impl prost_build::ServiceGenerator for ServiceGenerator {
                 namespace = NAMESPACE,
             )
             .unwrap();
+
+            write!(
+                match_trait_json_methods,
+                r#"            "{name}" | "{proto_name}" => {{
+                let req: {input_type} = ::serde_json::from_value(json).map_err(|e| {namespace}::error::Error::MalformatRpcPacket(format!("json error: {{}}", e)))?;
+                let resp = self.{typed_method}(ctrl, req).await?;
+                Ok(::serde_json::to_value(resp).map_err(|e| {namespace}::error::Error::MalformatRpcPacket(format!("json error: {{}}", e)))?)
+            }}
+"#,
+                name = method.name,
+                proto_name = method.proto_name,
+                input_type = method.input_type,
+                typed_method = method.name,
+                namespace = NAMESPACE,
+            )
+            .unwrap();
         }
 
         ServiceGenerator::write_comments(&mut buf, 0, &service.comments).unwrap();
@@ -176,6 +210,29 @@ pub trait {name} {{
     type Controller: {namespace}::controller::Controller;
 
     {trait_methods}
+
+    async fn json_call_method(
+        &self,
+        ctrl: Self::Controller,
+        method_name: &str,
+        json: ::serde_json::Value,
+    ) -> {namespace}::error::Result<::serde_json::Value> {{
+        match method_name {{
+{match_trait_json_methods}
+            _ => Err({namespace}::error::Error::InvalidMethodIndex(0, method_name.to_string())),
+        }}
+    }}
+}}
+
+#[async_trait::async_trait]
+impl<T> {name} for ::std::sync::Weak<T>
+where
+    T: Send + Sync + 'static,
+    ::std::sync::Arc<T>: {name},
+{{
+    type Controller = <::std::sync::Arc<T> as {name}>::Controller;
+
+    {weak_impl_methods}
 }}
 
 /// A service descriptor for a `{name}`.
@@ -235,7 +292,7 @@ impl<C: {namespace}::controller::Controller> Clone for {client_name}Factory<C> {
 
 impl<C> {namespace}::__rt::RpcClientFactory for {client_name}Factory<C> where C: {namespace}::controller::Controller {{
     type Descriptor = {descriptor_name};
-    type ClientImpl = Box<dyn {name}<Controller = C> + Send + 'static>;
+    type ClientImpl = Box<dyn {name}<Controller = C> + Send + Sync + 'static>;
     type Controller = C;
 
     fn new(handler: impl {namespace}::handler::Handler<Descriptor = Self::Descriptor, Controller = Self::Controller>) -> Self::ClientImpl {{
@@ -250,6 +307,16 @@ impl<C> {namespace}::__rt::RpcClientFactory for {client_name}Factory<C> where C:
 #[derive(Clone, Debug)]
 pub struct {server_name}<A>(A) where A: {name} + Clone + Send + 'static;
 
+impl<T> {server_name}<::std::sync::Weak<T>>
+where
+    T: Send + Sync + 'static,
+    ::std::sync::Arc<T>: {name},
+{{
+    pub fn new_arc(service: ::std::sync::Arc<T>) -> {server_name}<::std::sync::Weak<T>> {{
+        {server_name}(::std::sync::Arc::downgrade(&service))
+    }}
+}}
+
 impl<A> {server_name}<A> where A: {name} + Clone + Send + 'static {{
     /// Creates a new server instance that dispatches all calls to the supplied service.
     pub fn new(service: A) -> {server_name}<A> {{
@@ -345,6 +412,7 @@ impl {namespace}::descriptor::MethodDescriptor for {method_descriptor_name} {{
             proto_name = service.proto_name,
             package = service.package,
             trait_methods = trait_methods,
+            weak_impl_methods = weak_impl_methods,
             enum_methods = enum_methods,
             list_enum_methods = list_enum_methods,
             client_own_methods = client_own_methods,
@@ -356,6 +424,7 @@ impl {namespace}::descriptor::MethodDescriptor for {method_descriptor_name} {{
             match_output_type_methods = match_output_type_methods,
             match_output_proto_type_methods = match_output_proto_type_methods,
             match_handle_methods = match_handle_methods,
+            match_trait_json_methods = match_trait_json_methods,
             namespace = NAMESPACE,
         ).unwrap();
     }

easytier-web/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "easytier-web"
-version = "2.4.4"
+version = "2.5.0"
 edition = "2021"
 description = "Config server for easytier. easytier-core gets config from this and web frontend use it as restful api server."
 
@@ -63,6 +63,11 @@ uuid = { version = "1.5.0", features = [
 ] }
 
 chrono = { version = "0.4.37", features = ["serde"] }
+openidconnect = { version = "4.0", default-features = false, features = ["accept-rfc3339-timestamps", "reqwest"] }
+reqwest = { version = "0.12", default-features = false, features = ["json", "rustls-tls"] }
+subtle = "2.6"
+
+mimalloc = { version = "*" }
 
 [features]
 default = []

easytier-web/frontend-lib/package.json

@@ -18,18 +18,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@primevue/themes": "4.3.3",
+    "@primeuix/themes": "^1.2.3",
     "@vueuse/core": "^11.1.0",
-    "aura": "link:@primevue\\themes\\aura",
-    "axios": "^1.7.7",
+    "axios": "^1.13.5",
+    "chart.js": "^4.5.0",
     "floating-vue": "^5.2",
     "ip-num": "1.5.1",
     "primeicons": "^7.0.0",
-    "primevue": "4.3.3",
     "tailwindcss-primeui": "^0.3.4",
     "ts-md5": "^1.3.1",
     "uuid": "^11.0.2",
-    "vue": "^3.5.12",
+    "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.4"
   },
   "devDependencies": {
@@ -42,8 +41,12 @@
     "postcss-nested": "^7.0.2",
     "tailwindcss": "=3.4.17",
     "typescript": "~5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.21",
     "vite-plugin-dts": "^4.3.0",
     "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.12",
+    "primevue": "^4.3.9"
   }
 }

easytier-web/frontend-lib/src/components/Config.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
-import { SelectButton, Checkbox, InputText, InputNumber, AutoComplete, Panel, Divider, ToggleButton, Button, Password } from 'primevue'
+import { Checkbox, InputText, InputNumber, AutoComplete, Panel, Divider, ToggleButton, Button, Password, Dialog } from 'primevue'
 import {
   addRow,
   DEFAULT_NETWORK_CONFIG,
   NetworkConfig,
-  NetworkingMethod,
+  normalizeNetworkConfig,
   removeRow
 } from '../types/network'
-import { defineProps, defineEmits, ref, } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import UrlListInput from './UrlListInput.vue'
 
 const props = defineProps<{
   configInvalid?: boolean
@@ -26,63 +27,18 @@ const curNetwork = defineModel('curNetwork', {
 
 const { t } = useI18n()
 
-const networking_methods = ref([
-  { value: NetworkingMethod.PublicServer, label: () => t('public_server') },
-  { value: NetworkingMethod.Manual, label: () => t('manual') },
-  { value: NetworkingMethod.Standalone, label: () => t('standalone') },
-])
-
-const protos: { [proto: string]: number } = { tcp: 11010, udp: 11010, wg: 11011, ws: 11011, wss: 11012 }
-
-function searchUrlSuggestions(e: { query: string }): string[] {
-  const query = e.query
-  const ret = []
-  // if query match "^\w+:.*", then no proto prefix
-  if (query.match(/^\w+:.*/)) {
-    // if query is a valid url, then add to suggestions
-    try {
-      // eslint-disable-next-line no-new
-      new URL(query)
-      ret.push(query)
-    }
-    catch { }
-  }
-  else {
-    for (const proto in protos) {
-      let item = `${proto}://${query}`
-      // if query match ":\d+$", then no port suffix
-      if (!query.match(/:\d+$/)) {
-        item += `:${protos[proto]}`
-      }
-      ret.push(item)
-    }
-  }
-
-  return ret
-}
-
-const publicServerSuggestions = ref([''])
-
-function searchPresetPublicServers(e: { query: string }) {
-  const presetPublicServers = [
-    'tcp://public.easytier.top:11010',
-  ]
-
-  const query = e.query
-  // if query is sub string of presetPublicServers, add to suggestions
-  let ret = presetPublicServers.filter(item => item.includes(query))
-  // add additional suggestions
-  if (query.length > 0) {
-    ret = ret.concat(searchUrlSuggestions(e))
-  }
-
-  publicServerSuggestions.value = ret
-}
-
-const peerSuggestions = ref([''])
-
-function searchPeerSuggestions(e: { query: string }) {
-  peerSuggestions.value = searchUrlSuggestions(e)
+const protos: { [proto: string]: number } = {
+  tcp: 11010,
+  udp: 11010,
+  wg: 11011,
+  ws: 11011,
+  wss: 11012,
+  quic: 11012,
+  faketcp: 11013,
+  http: 80,
+  https: 443,
+  txt: 0,
+  srv: 0,
 }
 
 const inetSuggestions = ref([''])
@@ -99,34 +55,6 @@ function searchInetSuggestions(e: { query: string }) {
   }
 }
 
-const listenerSuggestions = ref([''])
-
-function searchListenerSuggestions(e: { query: string }) {
-  const ret = []
-
-  for (const proto in protos) {
-    let item = `${proto}://0.0.0.0:`
-    // if query is a number, use it as port
-    if (e.query.match(/^\d+$/)) {
-      item += e.query
-    }
-    else {
-      item += protos[proto]
-    }
-
-    if (item.includes(e.query)) {
-      ret.push(item)
-    }
-  }
-
-  if (ret.length === 0) {
-    ret.push(e.query)
-  }
-
-  listenerSuggestions.value = ret
-}
-
-
 const exitNodesSuggestions = ref([''])
 
 function searchExitNodesSuggestions(e: { query: string }) {
@@ -157,13 +85,17 @@ const bool_flags: BoolFlag[] = [
   { field: 'enable_quic_proxy', help: 'enable_quic_proxy_help' },
   { field: 'disable_quic_input', help: 'disable_quic_input_help' },
   { field: 'disable_p2p', help: 'disable_p2p_help' },
+  { field: 'p2p_only', help: 'p2p_only_help' },
+  { field: 'lazy_p2p', help: 'lazy_p2p_help' },
   { field: 'bind_device', help: 'bind_device_help' },
   { field: 'no_tun', help: 'no_tun_help' },
   { field: 'enable_exit_node', help: 'enable_exit_node_help' },
   { field: 'relay_all_peer_rpc', help: 'relay_all_peer_rpc_help' },
+  { field: 'need_p2p', help: 'need_p2p_help' },
   { field: 'multi_thread', help: 'multi_thread_help' },
   { field: 'proxy_forward_by_system', help: 'proxy_forward_by_system_help' },
   { field: 'disable_encryption', help: 'disable_encryption_help' },
+  { field: 'disable_tcp_hole_punching', help: 'disable_tcp_hole_punching_help' },
   { field: 'disable_udp_hole_punching', help: 'disable_udp_hole_punching_help' },
   { field: 'disable_sym_hole_punching', help: 'disable_sym_hole_punching_help' },
   { field: 'enable_magic_dns', help: 'enable_magic_dns_help' },
@@ -172,13 +104,66 @@ const bool_flags: BoolFlag[] = [
 
 const portForwardProtocolOptions = ref(["tcp", "udp"]);
 
+const editingPortForward = ref(false);
+const editingPortForwardIndex = ref(-1);
+const editingPortForwardData = ref();
+
+function openPortForwardEditor(index: number) {
+  editingPortForwardIndex.value = index;
+  // deep copy
+  editingPortForwardData.value = JSON.parse(JSON.stringify(curNetwork.value.port_forwards[index]));
+  editingPortForward.value = true;
+}
+
+function addPortForward() {
+  addRow(curNetwork.value.port_forwards)
+  if (isCompact.value) {
+    openPortForwardEditor(curNetwork.value.port_forwards.length - 1)
+  }
+}
+
+function savePortForward() {
+  curNetwork.value.port_forwards[editingPortForwardIndex.value] = editingPortForwardData.value;
+  editingPortForward.value = false;
+}
+
+const portForwardContainer = ref<HTMLElement | null>(null);
+const isCompact = ref(false);
+
+
+onMounted(() => {
+  if (portForwardContainer.value) {
+    let resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        isCompact.value = entry.contentRect.width < 540;
+      }
+    });
+    resizeObserver.observe(portForwardContainer.value);
+
+    onUnmounted(() => {
+      if (resizeObserver && portForwardContainer.value) {
+        resizeObserver.unobserve(portForwardContainer.value);
+      }
+    });
+  }
+});
+
+function syncNormalizedNetwork(network: NetworkConfig | undefined): void {
+  if (!network) {
+    return
+  }
+
+  Object.assign(network, normalizeNetworkConfig(network))
+}
+
+watch(() => curNetwork.value, syncNormalizedNetwork, { immediate: true, deep: false })
 </script>
 
 <template>
   <div class="frontend-lib">
     <div class="flex flex-col h-full">
       <div class="flex flex-col">
-        <div class="w-11/12 self-center ">
+        <div class="w-full self-center ">
           <Panel :header="t('basic_settings')">
             <div class="flex flex-col gap-y-2">
               <div class="flex flex-row gap-x-9 flex-wrap">
@@ -218,18 +203,13 @@ const portForwardProtocolOptions = ref(["tcp","udp"]);
 
               <div class="flex flex-row gap-x-9 flex-wrap">
                 <div class="flex flex-col gap-2 basis-5/12 grow">
-                  <label for="nm">{{ t('networking_method') }}</label>
-                  <SelectButton v-model="curNetwork.networking_method" :options="networking_methods"
-                    :option-label="(v) => v.label()" option-value="value" />
-                  <div class="items-center flex flex-row p-fluid gap-x-1">
-                    <AutoComplete v-if="curNetwork.networking_method === NetworkingMethod.Manual" id="chips"
-                      v-model="curNetwork.peer_urls" :placeholder="t('chips_placeholder', ['tcp://8.8.8.8:11010'])"
-                      class="grow" multiple fluid :suggestions="peerSuggestions" @complete="searchPeerSuggestions" />
-
-                    <AutoComplete v-if="curNetwork.networking_method === NetworkingMethod.PublicServer"
-                      v-model="curNetwork.public_server_url" :suggestions="publicServerSuggestions"
-                      class="grow" dropdown :complete-on-focus="false"
-                      @complete="searchPresetPublicServers" />
+                  <div class="flex items-center">
+                    <label for="initial_nodes">{{ t('initial_nodes') }}</label>
+                    <span class="pi pi-question-circle ml-2 self-center" v-tooltip="t('initial_nodes_help')"></span>
+                  </div>
+                  <div class="items-center flex flex-col p-fluid gap-y-2">
+                    <UrlListInput id="initial_nodes" v-model="curNetwork.peer_urls" :protos="protos"
+                      :add-label="t('add_initial_node')" :placeholder="t('initial_node_placeholder')" />
                   </div>
                 </div>
               </div>
@@ -301,27 +281,8 @@ const portForwardProtocolOptions = ref(["tcp","udp"]);
               <div class="flex flex-row gap-x-9 flex-wrap">
                 <div class="flex flex-col gap-2 grow p-fluid">
                   <label for="listener_urls">{{ t('listener_urls') }}</label>
-                  <AutoComplete id="listener_urls" v-model="curNetwork.listener_urls" :suggestions="listenerSuggestions"
-                    class="w-full" dropdown :complete-on-focus="true"
-                    :placeholder="t('chips_placeholder', ['tcp://1.1.1.1:11010'])" multiple
-                    @complete="searchListenerSuggestions" />
-                </div>
-              </div>
-
-              <div class="flex flex-row gap-x-9 flex-wrap">
-                <div class="flex flex-col gap-2 basis-5/12 grow">
-                  <label for="rpc_port">{{ t('rpc_port') }}</label>
-                  <InputNumber id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="rpc_port-help"
-                    :format="false" :min="0" :max="65535" />
-                </div>
-              </div>
-
-              <div class="flex flex-row gap-x-9 flex-wrap w-full">
-                <div class="flex flex-col gap-2 grow p-fluid">
-                  <label for="">{{ t('rpc_portal_whitelists') }}</label>
-                  <AutoComplete id="rpc_portal_whitelists" v-model="curNetwork.rpc_portal_whitelists"
-                    :placeholder="t('chips_placeholder', ['127.0.0.0/8'])" class="w-full" multiple fluid
-                    :suggestions="inetSuggestions" @complete="searchInetSuggestions" />
+                  <UrlListInput v-model="curNetwork.listener_urls" :protos="protos" :add-label="t('add_listener_url')"
+                    placeholder="0.0.0.0" />
                 </div>
               </div>
 
@@ -416,9 +377,8 @@ const portForwardProtocolOptions = ref(["tcp","udp"]);
                     <label for="mapped_listeners">{{ t('mapped_listeners') }}</label>
                     <span class="pi pi-question-circle ml-2 self-center" v-tooltip="t('mapped_listeners_help')"></span>
                   </div>
-                  <AutoComplete id="mapped_listeners" v-model="curNetwork.mapped_listeners"
-                    :placeholder="t('chips_placeholder', ['tcp://123.123.123.123:11223'])" class="w-full" multiple fluid
-                    :suggestions="peerSuggestions" @complete="searchPeerSuggestions" />
+                  <UrlListInput v-model="curNetwork.mapped_listeners" :protos="protos"
+                    :add-label="t('add_mapped_listener')" />
                 </div>
               </div>
 
@@ -428,65 +388,87 @@ const portForwardProtocolOptions = ref(["tcp","udp"]);
           <Divider />
 
           <Panel :header="t('port_forwards')" toggleable collapsed>
-            <div class="flex flex-col gap-y-2">
+            <div ref="portForwardContainer" class="flex flex-col gap-y-2">
               <div class="flex flex-row gap-x-9 flex-wrap w-full">
                 <div class="flex flex-col gap-2 grow p-fluid">
                   <div class="flex">
                     <label for="port_forwards">{{ t('port_forwards_help') }}</label>
                   </div>
-                  <div v-for="(row, index) in curNetwork.port_forwards" class="form-row">
-                    <div style="display: flex; gap: 0.5rem; align-items: flex-end;">
+                  <div v-for="(row, index) in curNetwork.port_forwards" :key="index" class="form-row">
+                    <!-- Wide screen view -->
+                    <div v-if="!isCompact" class="flex gap-2 items-end">
                       <SelectButton v-model="row.proto" :options="portForwardProtocolOptions" :allow-empty="false" />
                       <div style="flex-grow: 4;">
                         <InputGroup>
-                          <InputText
-                              v-model="row.bind_ip"
-                              :placeholder="t('port_forwards_bind_addr')"
-                          />
+                          <InputText v-model="row.bind_ip" :placeholder="t('port_forwards_bind_addr')" />
                           <InputGroupAddon>
                             <span style="font-weight: bold">:</span>
                           </InputGroupAddon>
-                          <InputNumber v-model="row.bind_port" :format="false"
-                                       inputId="horizontal-buttons" :step="1" mode="decimal" :min="1"
-                                       :max="65535" fluid
-                                       class="max-w-20"/>
+                          <InputNumber v-model="row.bind_port" :format="false" inputId="horizontal-buttons" :step="1"
+                            mode="decimal" :min="1" :max="65535" fluid class="max-w-20" />
                         </InputGroup>
                       </div>
                       <div style="flex-grow: 4;">
                         <InputGroup>
-                          <InputText
-                              v-model="row.dst_ip"
-                              :placeholder="t('port_forwards_dst_addr')"
-                          />
+                          <InputText v-model="row.dst_ip" :placeholder="t('port_forwards_dst_addr')" />
                           <InputGroupAddon>
                             <span style="font-weight: bold">:</span>
                           </InputGroupAddon>
-                          <InputNumber v-model="row.dst_port" :format="false"
-                                       inputId="horizontal-buttons" :step="1" mode="decimal" :min="1"
-                                       :max="65535" fluid
-                                       class="max-w-20"/>
+                          <InputNumber v-model="row.dst_port" :format="false" inputId="horizontal-buttons" :step="1"
+                            mode="decimal" :min="1" :max="65535" fluid class="max-w-20" />
                         </InputGroup>
                       </div>
                       <div style="flex-grow: 1;">
-                        <Button
-                            v-if="curNetwork.port_forwards.length > 0"
-                            icon="pi pi-trash"
-                            severity="danger"
-                            text
-                            rounded
-                            @click="removeRow(index,curNetwork.port_forwards)"
-                        />
+                        <Button v-if="curNetwork.port_forwards.length > 0" icon="pi pi-trash" severity="danger" text
+                          rounded @click="removeRow(index, curNetwork.port_forwards)" />
+                      </div>
+                    </div>
+                    <!-- Small screen view -->
+                    <div v-else class="flex justify-between items-center p-2 border-b">
+                      <span>{{ row.proto }}://{{ row.bind_ip }}:{{ row.bind_port }}/{{ row.dst_ip }}:{{
+                        row.dst_port }}</span>
+                      <div class="flex gap-2">
+                        <Button icon="pi pi-pencil" class="p-button-sm" @click="openPortForwardEditor(index)" />
+                        <Button icon="pi pi-trash" class="p-button-sm p-button-danger"
+                          @click="removeRow(index, curNetwork.port_forwards)" />
                       </div>
                     </div>
                   </div>
+
                   <div class="flex justify-content-end mt-4">
-                    <Button
-                        icon="pi pi-plus"
-                        :label="t('port_forwards_add_btn')"
-                        severity="success"
-                        @click="addRow(curNetwork.port_forwards)"
-                    />
+                    <Button icon="pi pi-plus" :label="t('port_forwards_add_btn')" severity="success"
+                      @click="addPortForward" />
                   </div>
+
+                  <Dialog v-model:visible="editingPortForward" modal :header="t('edit_port_forward')"
+                    :style="{ width: '90vw', maxWidth: '600px' }">
+                    <div v-if="editingPortForwardData" class="flex flex-col gap-4">
+                      <SelectButton v-model="editingPortForwardData.proto" :options="portForwardProtocolOptions"
+                        :allow-empty="false" />
+                      <InputGroup>
+                        <InputText v-model="editingPortForwardData.bind_ip"
+                          :placeholder="t('port_forwards_bind_addr')" />
+                        <InputGroupAddon>
+                          <span style="font-weight: bold">:</span>
+                        </InputGroupAddon>
+                        <InputNumber v-model="editingPortForwardData.bind_port" :format="false" :step="1" mode="decimal"
+                          :min="1" :max="65535" class="max-w-20" />
+                      </InputGroup>
+                      <InputGroup>
+                        <InputText v-model="editingPortForwardData.dst_ip" :placeholder="t('port_forwards_dst_addr')" />
+                        <InputGroupAddon>
+                          <span style="font-weight: bold">:</span>
+                        </InputGroupAddon>
+                        <InputNumber v-model="editingPortForwardData.dst_port" :format="false" :step="1" mode="decimal"
+                          :min="1" :max="65535" class="max-w-20" />
+                      </InputGroup>
+                    </div>
+                    <template #footer>
+                      <Button :label="t('web.common.cancel')" icon="pi pi-times" @click="editingPortForward = false"
+                        text />
+                      <Button :label="t('web.common.save')" icon="pi pi-save" @click="savePortForward" />
+                    </template>
+                  </Dialog>
                 </div>
               </div>
             </div>

easytier-web/frontend-lib/src/components/NetworkChart.vue

@@ -0,0 +1,279 @@
+<template>
+  <div
+    class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-800/20 rounded-xl p-4 border border-blue-200 dark:border-blue-700 shadow-md hover:shadow-lg transition-all duration-300">
+    <div class="flex items-center justify-center mb-3">
+      <div class="flex gap-2 text-sm">
+        <span class="flex items-center gap-1 w-32">
+          <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+          <span class="text-green-600 dark:text-green-400 truncate">{{ t('upload') }}: {{ currentUpload }}/s</span>
+        </span>
+        <span class="flex items-center gap-1 w-32">
+          <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+          <span class="text-blue-600 dark:text-blue-400 truncate">{{ t('download') }}: {{ currentDownload }}/s</span>
+        </span>
+      </div>
+    </div>
+    <div class="h-32">
+      <canvas ref="chartCanvas"></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+} from 'chart.js'
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n()
+
+// 注册Chart.js组件
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+)
+
+interface Props {
+  uploadRate: string
+  downloadRate: string
+}
+
+const props = defineProps<Props>()
+
+const chartCanvas = ref<HTMLCanvasElement>()
+let chart: ChartJS | null = null
+let updateTimer: number | null = null
+
+// 存储历史数据，最多保存30个数据点（1分钟历史）
+const maxDataPoints = 120
+const uploadHistory: number[] = []
+const downloadHistory: number[] = []
+const timeLabels: string[] = []
+
+const currentUpload = ref('0')
+const currentDownload = ref('0')
+
+// 将带单位的速率字符串转换为字节数
+function parseRateToBytes(rateStr: string): number {
+  if (!rateStr || rateStr === '0') return 0
+
+  const match = rateStr.match(/([0-9.]+)\s*([KMGT]?i?B)/i)
+  if (!match) return 0
+
+  const value = parseFloat(match[1])
+  const unit = match[2].toUpperCase()
+
+  const multipliers: { [key: string]: number } = {
+    'B': 1,
+    'KB': 1000,
+    'KIB': 1024,
+    'MB': 1000000,
+    'MIB': 1024 * 1024,
+    'GB': 1000000000,
+    'GIB': 1024 * 1024 * 1024,
+    'TB': 1000000000000,
+    'TIB': 1024 * 1024 * 1024 * 1024
+  }
+
+  return value * (multipliers[unit] || 1)
+}
+
+// 格式化字节为可读格式
+function formatBytes(bytes: number): string {
+  if (bytes < 1) return bytes.toFixed(1) + ' B'
+
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
+// 更新数据
+function updateData() {
+  const uploadBytes = parseRateToBytes(props.uploadRate)
+  const downloadBytes = parseRateToBytes(props.downloadRate)
+
+  currentUpload.value = formatBytes(uploadBytes)
+  currentDownload.value = formatBytes(downloadBytes)
+
+  // 添加新数据点
+  uploadHistory.push(uploadBytes)
+  downloadHistory.push(downloadBytes)
+
+  // 生成时间标签
+  const now = new Date()
+  const timeStr = now.toLocaleTimeString('zh-CN', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+  timeLabels.push(timeStr)
+
+  // 保持数据点数量不超过最大值
+  if (uploadHistory.length > maxDataPoints) {
+    uploadHistory.shift()
+    downloadHistory.shift()
+    timeLabels.shift()
+  }
+
+  // 更新图表
+  if (chart) {
+    chart.data.labels = timeLabels
+    chart.data.datasets[0].data = uploadHistory
+    chart.data.datasets[1].data = downloadHistory
+    chart.update('none')
+  }
+}
+
+// 初始化图表
+function initChart() {
+  if (!chartCanvas.value) return
+
+  const ctx = chartCanvas.value.getContext('2d')
+  if (!ctx) return
+
+  chart = new ChartJS(ctx, {
+    type: 'line',
+    data: {
+      labels: timeLabels,
+      datasets: [
+        {
+          label: t('upload'),
+          data: uploadHistory,
+          borderColor: 'rgb(34, 197, 94)',
+          backgroundColor: 'rgba(34, 197, 94, 0.1)',
+          borderWidth: 2,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 4
+        },
+        {
+          label: t('download'),
+          data: downloadHistory,
+          borderColor: 'rgb(59, 130, 246)',
+          backgroundColor: 'rgba(59, 130, 246, 0.1)',
+          borderWidth: 2,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 4
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        intersect: false,
+        mode: 'index'
+      },
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          callbacks: {
+            label: function (context: any) {
+              const value = context.parsed.y
+              return `${context.dataset.label}: ${formatBytes(value)}/s`
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          display: true,
+          grid: {
+            display: false
+          },
+          ticks: {
+            maxTicksLimit: 3,
+            font: {
+              size: 8
+            }
+          }
+        },
+        y: {
+          display: true,
+          beginAtZero: true,
+          min: 0,
+          grid: {
+            color: 'rgba(0, 0, 0, 0.1)'
+          },
+          ticks: {
+            callback: function (value: any) {
+              return formatBytes(value as number)
+            },
+            font: {
+              size: 8
+            },
+          },
+        }
+      },
+      animation: {
+        duration: 10
+      }
+    }
+  })
+}
+
+// 监听props变化
+watch([() => props.uploadRate, () => props.downloadRate], () => {
+  updateData()
+}, { immediate: true })
+
+onMounted(async () => {
+  // add initial point
+  const now = new Date();
+  for (let i = 0; i < maxDataPoints; i++) {
+    let date = new Date(now.getTime() - (maxDataPoints - i) * 2000)
+    const timeStr = date.toLocaleTimeString(navigator.language, {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    })
+    uploadHistory.push(0)
+    downloadHistory.push(0)
+    timeLabels.push(timeStr)
+  }
+
+  await nextTick()
+  initChart()
+  updateData()
+
+  // 启动定时器，每2秒更新一次图表
+  updateTimer = window.setInterval(() => {
+    updateData()
+  }, 2000)
+})
+
+onUnmounted(() => {
+  if (chart) {
+    chart.destroy()
+  }
+  if (updateTimer) {
+    clearInterval(updateTimer)
+  }
+})
+</script>

easytier-web/frontend-lib/src/components/RemoteManagement.vue

@@ -0,0 +1,718 @@
+<script setup lang="ts">
+import { Button, ConfirmPopup, Divider, IftaLabel, Menu, Message, Select, Tag, useConfirm, useToast, type VirtualScrollerLazyEvent } from 'primevue';
+import { computed, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import * as Api from '../modules/api';
+import * as Utils from '../modules/utils';
+import * as NetworkTypes from '../types/network';
+import { type MenuItem } from 'primevue/menuitem';
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    api: Api.RemoteClient;
+    newConfigGenerator?: () => NetworkTypes.NetworkConfig;
+    pauseAutoRefresh?: boolean;
+}>();
+
+const instanceId = defineModel('instanceId', {
+    type: String as () => string | undefined,
+    required: false,
+})
+
+const emits = defineEmits(['update']);
+
+const toast = useToast();
+
+const configFile = ref();
+
+const curNetworkInfo = ref<NetworkTypes.NetworkInstance | null>(null);
+
+const showConfigEditDialog = ref(false);
+const isEditingNetwork = ref(false); // Flag to indicate if we're in network editing mode
+const currentNetworkConfig = ref<NetworkTypes.NetworkConfig | undefined>(undefined);
+
+const listInstanceIdResponse = ref<Api.ListNetworkInstanceIdResponse | undefined>(undefined);
+
+const isRunning = (instanceId: string) => {
+    return listInstanceIdResponse.value?.running_inst_ids.map(Utils.UuidToStr).includes(instanceId);
+}
+
+const networkMetaCache = ref<Record<string, Api.NetworkMeta>>({});
+const loadNetworkMetas = async (instanceIds: string[]) => {
+    const missingIds = instanceIds.filter(id => !networkMetaCache.value[id]);
+
+    if (missingIds.length === 0) return;
+
+    try {
+        const response = await props.api.get_network_metas(missingIds);
+        Object.assign(networkMetaCache.value, response.metas);
+    } catch (e) {
+        console.error("Failed to load network metas", e);
+    }
+};
+const onLazyLoadNetworkMetas = async (event: VirtualScrollerLazyEvent) => {
+    const instanceIds = instanceList.value
+        .slice(event.first, event.last + 1)
+        .map(item => item.uuid);
+    await loadNetworkMetas(instanceIds);
+};
+const currentNetworkMeta = computed(() => {
+    if (!instanceId.value) {
+        return undefined;
+    }
+    return networkMetaCache.value[instanceId.value];
+});
+const currentNetworkControl = {
+    remoteSave: computed(() => {
+        return Api.ConfigFilePermission.isRemoveSaveable(currentNetworkMeta.value?.config_permission ?? 0);
+    }),
+    editable: computed(() => {
+        return Api.ConfigFilePermission.isEditable(currentNetworkMeta.value?.config_permission ?? 0);
+    }),
+    deletable: computed(() => {
+        return Api.ConfigFilePermission.isDeletable(currentNetworkMeta.value?.config_permission ?? 0);
+    })
+}
+
+const instanceList = ref<Array<{ uuid: string; meta?: Api.NetworkMeta }>>([]);
+const updateInstanceList = () => {
+    let insts = new Set<string>();
+    let t = listInstanceIdResponse.value;
+    if (t) {
+        t.running_inst_ids.forEach((u) => insts.add(Utils.UuidToStr(u)));
+        t.disabled_inst_ids.forEach((u) => insts.add(Utils.UuidToStr(u)));
+    }
+
+    const newList = Array.from(insts).map((instance: string) => {
+        return {
+            uuid: instance,
+            meta: networkMetaCache.value[instance]
+        };
+    });
+
+    if (JSON.stringify(newList) !== JSON.stringify(instanceList.value)) {
+        instanceList.value = newList;
+    }
+}
+watch(listInstanceIdResponse, updateInstanceList, { deep: false });
+watch(networkMetaCache, updateInstanceList, { deep: true });
+watch(instanceList, async (newVal) => {
+    if (newVal) {
+        const instanceIds = new Set(newVal.map(item => item.uuid));
+        Object.keys(networkMetaCache.value).forEach(id => {
+            if (!instanceIds.has(id)) {
+                delete networkMetaCache.value[id];
+            }
+        });
+    }
+});
+
+const selectedInstanceId = computed({
+    get() {
+        return instanceList.value.find((instance) => instance.uuid === instanceId.value);
+    },
+    set(value: any) {
+        console.log("set instanceId", value);
+        instanceId.value = value ? value.uuid : undefined;
+    }
+});
+watch(selectedInstanceId, async (newVal, oldVal) => {
+    if (newVal?.uuid !== oldVal?.uuid && (networkIsDisabled.value || isEditingNetwork.value)) {
+        await loadCurrentNetworkConfig();
+    } else {
+        await loadCurrentNetworkInfo();
+    }
+
+    if (newVal?.uuid && !networkMetaCache.value[newVal.uuid]) {
+        await loadNetworkMetas([newVal.uuid]);
+    }
+});
+
+const needShowNetworkStatus = computed(() => {
+    if (!selectedInstanceId.value) {
+        // nothing selected
+        return false;
+    }
+    if (networkIsDisabled.value) {
+        // network is disabled
+        return false;
+    }
+    if (isEditingNetwork.value) {
+        // editing network
+        return false;
+    }
+    return true;
+})
+
+const networkIsDisabled = computed(() => {
+    if (!selectedInstanceId.value) {
+        return false;
+    }
+    return listInstanceIdResponse.value?.disabled_inst_ids.map(Utils.UuidToStr).includes(selectedInstanceId.value?.uuid);
+});
+watch(networkIsDisabled, async (newVal, oldVal) => {
+    if (newVal !== oldVal && newVal === true) {
+        await loadCurrentNetworkConfig();
+    }
+});
+
+const loadCurrentNetworkConfig = async () => {
+    currentNetworkConfig.value = undefined;
+
+    if (!selectedInstanceId.value) {
+        return;
+    }
+
+    let ret = await props.api.get_network_config(selectedInstanceId.value!.uuid);
+    currentNetworkConfig.value = ret;
+}
+
+const stopNetwork = async () => {
+    if (!selectedInstanceId.value) {
+        return;
+    }
+
+    await props.api.update_network_instance_state(selectedInstanceId.value.uuid, true);
+    await loadNetworkInstanceIds();
+}
+
+const confirm = useConfirm();
+const confirmDeleteNetwork = (event: any) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Do you want to delete this network?',
+        icon: 'pi pi-info-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Delete',
+            severity: 'danger'
+        },
+        accept: async () => {
+            try {
+                await props.api.delete_network(instanceId.value!);
+            } catch (e) {
+                console.error(e);
+            }
+            emits('update');
+        },
+        reject: () => {
+            return;
+        }
+    });
+};
+
+const saveAndRunNewNetwork = async (config?: NetworkTypes.NetworkConfig) => {
+    const cfg = config ?? currentNetworkConfig.value;
+    if (!cfg) {
+        return;
+    }
+
+    const targetInstanceId = instanceId.value ?? cfg.instance_id;
+    if (targetInstanceId && cfg.instance_id !== targetInstanceId) {
+        cfg.instance_id = targetInstanceId;
+    }
+
+    try {
+        if (networkIsDisabled.value) {
+            await props.api.save_config(cfg);
+            await props.api.update_network_instance_state(cfg.instance_id, false);
+        } else {
+            await props.api.run_network(cfg, currentNetworkControl.remoteSave.value);
+        }
+
+        delete networkMetaCache.value[cfg.instance_id];
+        await loadNetworkMetas([cfg.instance_id]);
+
+        selectedInstanceId.value = { uuid: cfg.instance_id };
+        await loadNetworkInstanceIds();
+        await loadCurrentNetworkInfo();
+    } catch (e: any) {
+        console.error(e);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to run network, error: ' + JSON.stringify(e.response?.data ?? e), life: 2000 });
+        return;
+    }
+
+    emits('update');
+    isEditingNetwork.value = false;
+}
+
+const saveNetworkConfig = async () => {
+    if (!currentNetworkConfig.value) {
+        return;
+    }
+    await props.api.save_config(currentNetworkConfig.value);
+
+    delete networkMetaCache.value[currentNetworkConfig.value.instance_id];
+    await loadNetworkMetas([currentNetworkConfig.value.instance_id]);
+
+    toast.add({ severity: 'success', summary: t("web.common.success"), detail: t("web.device_management.config_saved"), life: 2000 });
+}
+const newNetwork = async () => {
+    const newNetworkConfig = props.newConfigGenerator?.() ?? NetworkTypes.DEFAULT_NETWORK_CONFIG();
+    await props.api.save_config(newNetworkConfig);
+    selectedInstanceId.value = { uuid: newNetworkConfig.instance_id };
+    currentNetworkConfig.value = newNetworkConfig;
+    await loadNetworkInstanceIds();
+}
+
+const cancelEditNetwork = () => {
+    isEditingNetwork.value = false;
+}
+
+const editNetwork = async () => {
+    if (!instanceId.value) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No network instance selected', life: 2000 });
+        return;
+    }
+
+    try {
+        let ret = await props.api.get_network_config(instanceId.value!);
+        console.debug("editNetwork", ret);
+        currentNetworkConfig.value = ret;
+        isEditingNetwork.value = true; // Switch to editing mode instead
+    } catch (e: any) {
+        console.error(e);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to edit network, error: ' + JSON.stringify(e.response.data), life: 2000 });
+        return;
+    }
+}
+
+const loadNetworkInstanceIds = async () => {
+    listInstanceIdResponse.value = await props.api.list_network_instance_ids();
+}
+
+const loadCurrentNetworkInfo = async () => {
+    if (!selectedInstanceId.value) {
+        return;
+    }
+    if (!needShowNetworkStatus.value) {
+        return;
+    }
+
+    let network_info = await props.api.get_network_info(selectedInstanceId.value.uuid);
+
+    curNetworkInfo.value = {
+        instance_id: selectedInstanceId.value.uuid,
+        running: network_info?.running ?? false,
+        error_msg: network_info?.error_msg ?? '',
+        detail: network_info,
+    } as NetworkTypes.NetworkInstance;
+}
+
+const exportConfig = async () => {
+    if (!instanceId.value) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No network instance selected', life: 2000 });
+        return;
+    }
+
+    try {
+        const { instance_id, ...networkConfig } = await props.api.get_network_config(instanceId.value!);
+        let { toml_config: tomlConfig, error } = await props.api.generate_config(networkConfig as NetworkTypes.NetworkConfig);
+        if (error) {
+            throw { response: { data: error } };
+        }
+        exportTomlFile(tomlConfig ?? '', instanceId.value + '.toml');
+    } catch (e: any) {
+        console.error(e);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to export network config, error: ' + JSON.stringify(e.response.data), life: 2000 });
+        return;
+    }
+}
+
+const importConfig = () => {
+    configFile.value.click();
+}
+
+const handleFileUpload = (event: Event) => {
+    const files = (event.target as HTMLInputElement).files;
+    const file = files ? files[0] : null;
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+        try {
+            let tomlConfig = e.target?.result?.toString();
+            if (!tomlConfig) return;
+            const resp = await props.api.parse_config(tomlConfig);
+            if (resp.error) {
+                throw resp.error;
+            }
+
+            const config = resp.config;
+            if (!config) return;
+
+            config.instance_id = currentNetworkConfig.value?.instance_id ?? config?.instance_id;
+            currentNetworkConfig.value = config;
+            toast.add({ severity: 'success', summary: 'Import Success', detail: "Config file import success", life: 2000 });
+        } catch (error) {
+            toast.add({ severity: 'error', summary: 'Error', detail: 'Config file parse error: ' + error, life: 2000 });
+        }
+        configFile.value.value = null;
+    }
+    reader.readAsText(file);
+}
+
+const exportTomlFile = (context: string, name: string) => {
+    let url = window.URL.createObjectURL(new Blob([context], { type: 'application/toml' }));
+    let link = document.createElement('a');
+    link.style.display = 'none';
+    link.href = url;
+    link.setAttribute('download', name);
+    document.body.appendChild(link);
+    link.click();
+
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+}
+
+const generateConfig = async (config: NetworkTypes.NetworkConfig): Promise<string> => {
+    let { toml_config: tomlConfig, error } = await props.api.generate_config(config);
+    if (error) {
+        throw error;
+    }
+    return tomlConfig ?? '';
+}
+
+const syncTomlConfig = async (tomlConfig: string): Promise<void> => {
+    let resp = await props.api.parse_config(tomlConfig);
+    if (resp.error) {
+        throw resp.error;
+    };
+    const config = resp.config;
+    if (!config) {
+        throw new Error("Parsed config is empty");
+    }
+    config.instance_id = currentNetworkConfig.value?.instance_id ?? config?.instance_id;
+    currentNetworkConfig.value = config;
+}
+
+// 响应式屏幕宽度
+const screenWidth = ref(window.innerWidth);
+const updateScreenWidth = () => {
+    screenWidth.value = window.innerWidth;
+};
+
+// 菜单引用和菜单项
+const menuRef = ref();
+const actionMenu: Ref<MenuItem[]> = ref([
+    {
+        label: () => t('web.device_management.edit_network'),
+        icon: 'pi pi-pencil',
+        visible: () => !(networkIsDisabled.value ?? true) && currentNetworkControl.editable.value,
+        command: () => editNetwork()
+    },
+    {
+        label: () => t('web.device_management.export_config'),
+        icon: 'pi pi-download',
+        command: () => exportConfig()
+    },
+    {
+        label: () => t('web.device_management.delete_network'),
+        icon: 'pi pi-trash',
+        class: 'p-error',
+        visible: () => currentNetworkControl.deletable.value,
+        command: () => confirmDeleteNetwork(new Event('click'))
+    }
+]);
+
+let periodFunc = new Utils.PeriodicTask(async () => {
+    if (props.pauseAutoRefresh) {
+        return;
+    }
+    try {
+        await Promise.all([loadNetworkInstanceIds(), loadCurrentNetworkInfo()]);
+    } catch (e) {
+        console.debug(e);
+    }
+}, 1000);
+
+onMounted(async () => {
+    periodFunc.start();
+
+    // 添加屏幕尺寸监听
+    window.addEventListener('resize', updateScreenWidth);
+});
+
+onUnmounted(() => {
+    periodFunc.stop();
+
+    // 移除屏幕尺寸监听
+    window.removeEventListener('resize', updateScreenWidth);
+});
+
+</script>
+
+
+<template>
+    <div class="device-management">
+        <input type="file" @change="handleFileUpload" class="hidden" accept="application/toml" ref="configFile" />
+        <ConfirmPopup></ConfirmPopup>
+
+        <!-- 网络选择和操作按钮始终在同一行 -->
+        <div class="network-header bg-surface-50 p-3 rounded-lg shadow-sm mb-1">
+            <div class="flex flex-row justify-between items-center gap-2" style="align-items: center;">
+                <!-- 网络选择 -->
+                <div class="flex-1 min-w-0">
+                    <IftaLabel class="w-full">
+                        <Select v-model="selectedInstanceId" :options="instanceList" optionLabel="uuid" class="w-full"
+                            inputId="dd-inst-id" :placeholder="t('web.device_management.select_network')"
+                            :pt="{ root: { class: 'network-select-container' } }" :virtualScrollerOptions="{
+                                lazy: true,
+                                onLazyLoad: onLazyLoadNetworkMetas,
+                                itemSize: 60,
+                                delay: 50
+                            }">
+                            <template #value="slotProps">
+                                <div v-if="slotProps.value" class="flex items-center content-center min-w-0">
+                                    <div class="mr-4 flex-col min-w-0 flex-1">
+                                        <span class="truncate block">
+                                            &nbsp;
+                                            <span v-if="slotProps.value.meta">
+                                                {{ slotProps.value.meta.network_name }} ({{ slotProps.value.uuid }})
+                                            </span>
+                                            <span v-else>
+                                                {{ slotProps.value.uuid }}
+                                            </span>
+                                        </span>
+                                    </div>
+                                    <Tag class="my-auto leading-3 shrink-0"
+                                        :severity="isRunning(slotProps.value.uuid) ? 'success' : 'info'"
+                                        :value="t(isRunning(slotProps.value.uuid) ? 'network_running' : 'network_stopped')" />
+                                </div>
+                                <span v-else>
+                                    {{ slotProps.placeholder }}
+                                </span>
+                            </template>
+                            <template #option="slotProps">
+                                <div class="flex flex-col items-start content-center max-w-full">
+                                    <div class="flex items-center min-w-0">
+                                        <div class="mr-4 min-w-0 flex-1">
+                                            <span class="truncate block">{{ t('network_name') }}: {{
+                                                slotProps.option.meta.network_name }}</span>
+                                        </div>
+                                        <Tag class="my-auto leading-3 shrink-0"
+                                            :severity="isRunning(slotProps.option.uuid) ? 'success' : 'info'"
+                                            :value="t(isRunning(slotProps.option.uuid) ? 'network_running' : 'network_stopped')" />
+                                    </div>
+                                    <div class="max-w-full overflow-hidden text-ellipsis text-gray-500">
+                                        {{ slotProps.option.uuid }}
+                                    </div>
+                                </div>
+                            </template>
+                        </Select>
+                        <label class="network-label mr-2 font-medium" for="dd-inst-id">{{
+                            t('web.device_management.network') }}</label>
+                    </IftaLabel>
+                </div>
+
+                <!-- 简化的按钮区域 - 无论屏幕大小都显示 -->
+                <div class="flex gap-2 shrink-0 button-container items-center">
+                    <!-- Create/Cancel button based on state -->
+                    <Button v-if="!isEditingNetwork" @click="newNetwork" icon="pi pi-plus"
+                        :label="screenWidth > 640 ? t('web.device_management.create_new') : undefined"
+                        :class="['create-button', screenWidth <= 640 ? 'p-button-icon-only' : '']"
+                        :style="screenWidth <= 640 ? 'width: 3rem !important; height: 3rem !important; font-size: 1.2rem' : ''"
+                        :tooltip="screenWidth <= 640 ? t('web.device_management.create_network') : undefined"
+                        tooltipOptions="{ position: 'bottom' }" severity="primary" />
+
+                    <Button v-else @click="cancelEditNetwork" icon="pi pi-times"
+                        :label="screenWidth > 640 ? t('web.device_management.cancel_edit') : undefined"
+                        :class="['cancel-button', screenWidth <= 640 ? 'p-button-icon-only' : '']"
+                        :style="screenWidth <= 640 ? 'width: 3rem !important; height: 3rem !important; font-size: 1.2rem' : ''"
+                        :tooltip="screenWidth <= 640 ? t('web.device_management.cancel_edit') : undefined"
+                        tooltipOptions="{ position: 'bottom' }" severity="secondary" />
+
+                    <!-- More actions menu -->
+                    <Menu ref="menuRef" :model="actionMenu" :popup="true" />
+                    <Button v-if="!isEditingNetwork && selectedInstanceId" icon="pi pi-ellipsis-v"
+                        class="p-button-rounded flex items-center justify-center" severity="help"
+                        style="width: 3rem !important; height: 3rem !important; font-size: 1.2rem"
+                        @click="menuRef.toggle($event)" :aria-label="t('web.device_management.more_actions')"
+                        :tooltip="t('web.device_management.more_actions')" tooltipOptions="{ position: 'bottom' }" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content Area -->
+        <div class="network-content bg-surface-0 p-4 rounded-lg shadow-sm">
+            <!-- Network Creation Form -->
+            <div v-if="isEditingNetwork || networkIsDisabled" class="network-creation-container">
+                <div class="network-creation-header flex items-center gap-2 mb-3">
+                    <i class="pi pi-plus-circle text-primary text-xl"></i>
+                    <h2 class="text-xl font-medium">{{ t('web.device_management.edit_network') }}</h2>
+                </div>
+
+                <div class="w-full flex gap-2 flex-wrap justify-start mb-3">
+                    <Button @click="showConfigEditDialog = true" icon="pi pi-file-edit"
+                        :label="t('web.device_management.edit_as_file')" iconPos="left" severity="secondary" />
+                    <Button @click="importConfig" icon="pi pi-upload" :label="t('web.device_management.import_config')"
+                        iconPos="left" severity="help" />
+                    <Button v-if="networkIsDisabled" @click="saveNetworkConfig" :disabled="!currentNetworkConfig"
+                        icon="pi pi-save" :label="t('web.device_management.save_config')" iconPos="left"
+                        severity="success" />
+                </div>
+
+                <Divider />
+
+                <Config :cur-network="currentNetworkConfig" :config-invalid="!currentNetworkConfig"
+                    @run-network="saveAndRunNewNetwork"></Config>
+            </div>
+
+            <!-- Network Status (for running networks) -->
+            <div v-else-if="needShowNetworkStatus" class="network-status-container">
+                <div class="network-status-header flex items-center gap-2 mb-3">
+                    <i class="pi pi-chart-line text-primary text-xl"></i>
+                    <h2 class="text-xl font-medium">{{ t('web.device_management.network_status') }}</h2>
+                </div>
+
+                <Status v-if="(curNetworkInfo?.error_msg ?? '') === ''" v-bind:cur-network-inst="curNetworkInfo"
+                    class="mb-4">
+                </Status>
+                <Message v-else severity="error" class="mb-4">{{ curNetworkInfo?.error_msg }}</Message>
+
+                <div class="text-center mt-4">
+                    <Button @click="stopNetwork" :disabled="!currentNetworkControl.deletable.value"
+                        :label="t('web.device_management.disable_network')" severity="danger" icon="pi pi-power-off"
+                        iconPos="left" />
+                </div>
+            </div>
+
+            <!-- Empty State -->
+            <div v-else class="empty-state flex flex-col items-center py-12">
+                <i class="pi pi-sitemap text-5xl text-secondary mb-4 opacity-50"></i>
+                <div class="text-xl text-center font-medium mb-3">{{ t('web.device_management.no_network_selected') }}
+                </div>
+                <p class="text-secondary text-center mb-6 max-w-md">
+                    {{ t('web.device_management.select_existing_network_or_create_new') }}
+                </p>
+                <Button @click="newNetwork" :label="t('web.device_management.create_network')" icon="pi pi-plus"
+                    iconPos="left" />
+            </div>
+        </div>
+
+        <!-- Keep only the config edit dialogs -->
+        <!-- <ConfigEditDialog v-if="networkIsDisabled" v-model:visible="showCreateNetworkDialog"
+            :cur-network="currentNetworkConfig" :generate-config="generateConfig" :save-config="saveConfig" /> -->
+
+        <ConfigEditDialog v-model:visible="showConfigEditDialog" :cur-network="currentNetworkConfig"
+            :generate-config="generateConfig" :save-config="syncTomlConfig" />
+    </div>
+</template>
+
+<style scoped>
+.device-management {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.network-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* 按钮样式 */
+.button-container {
+    gap: 0.5rem;
+}
+
+.create-button {
+    font-weight: 600;
+    min-width: 3rem;
+}
+
+/* 菜单样式定制 */
+:deep(.p-menu) {
+    min-width: 12rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    padding: 0.25rem;
+}
+
+:deep(.p-menu .p-menuitem) {
+    border-radius: 0.25rem;
+}
+
+:deep(.p-menu .p-menuitem-link) {
+    padding: 0.65rem 1rem;
+    font-size: 0.9rem;
+}
+
+:deep(.p-menu .p-menuitem-icon) {
+    margin-right: 0.75rem;
+}
+
+:deep(.p-menu .p-menuitem.p-error .p-menuitem-text,
+    .p-menu .p-menuitem.p-error .p-menuitem-icon) {
+    color: var(--red-500);
+}
+
+:deep(.p-menu .p-menuitem:hover.p-error .p-menuitem-link) {
+    background-color: var(--red-50);
+}
+
+/* 按钮图标样式 */
+:deep(.p-button-icon-only) {
+    width: 2.5rem !important;
+    padding: 0.5rem !important;
+}
+
+:deep(.p-button-icon-only .p-button-icon) {
+    font-size: 1rem;
+}
+
+/* 网络选择相关样式 */
+.network-label {
+    white-space: nowrap;
+}
+
+:deep(.network-select-container) {
+    max-width: 100%;
+}
+
+/* Dark mode adaptations */
+:deep(.bg-surface-50) {
+    background-color: var(--surface-50, #f8fafc);
+}
+
+:deep(.bg-surface-0) {
+    background-color: var(--surface-card, #ffffff);
+}
+
+:deep(.text-primary) {
+    color: var(--primary-color, #3b82f6);
+}
+
+:deep(.text-secondary) {
+    color: var(--text-color-secondary, #64748b);
+}
+
+@media (prefers-color-scheme: dark) {
+    :deep(.bg-surface-50) {
+        background-color: var(--surface-ground, #0f172a);
+    }
+
+    :deep(.bg-surface-0) {
+        background-color: var(--surface-card, #1e293b);
+    }
+}
+
+/* Responsive design for mobile devices */
+@media (max-width: 768px) {
+    .network-header {
+        padding: 0.75rem;
+    }
+
+    .network-content {
+        padding: 0.75rem;
+    }
+
+    /* 在小屏幕上缩短网络标签文本 */
+    .network-label {
+        font-size: 0.9rem;
+    }
+}
+</style>

easytier-web/frontend-lib/src/components/Status.vue

@@ -5,7 +5,8 @@ import { NetworkInstance, type TunnelInfo, type NodeInfo, type PeerRoutePair } f
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { ipv4InetToString, ipv4ToString, ipv6ToString } from '../modules/utils';
-import { DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
+import { Badge, DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
+import NetworkChart from './NetworkChart.vue';
 
 const props = defineProps<{
   curNetworkInst: NetworkInstance | null,
@@ -21,6 +22,7 @@ const peerRouteInfos = computed(() => {
         ipv4_addr: my_node_info?.virtual_ipv4,
         hostname: my_node_info?.hostname,
         version: my_node_info?.version,
+        stun_info: my_node_info?.stun_info
       },
     }, ...(props.curNetworkInst.detail?.peer_route_pairs || [])]
   }
@@ -144,6 +146,34 @@ interface Chip {
   icon: string
 }
 
+// udp nat type
+enum NatType {
+  // has NAT; but own a single public IP, port is not changed
+  Unknown = 0,
+  OpenInternet = 1,
+  NoPAT = 2,
+  FullCone = 3,
+  Restricted = 4,
+  PortRestricted = 5,
+  Symmetric = 6,
+  SymUdpFirewall = 7,
+  SymmetricEasyInc = 8,
+  SymmetricEasyDec = 9,
+};
+
+const udpNatTypeStrMap = {
+  [NatType.Unknown]: 'Unknown',
+  [NatType.OpenInternet]: 'Open Internet',
+  [NatType.NoPAT]: 'No PAT',
+  [NatType.FullCone]: 'Full Cone',
+  [NatType.Restricted]: 'Restricted',
+  [NatType.PortRestricted]: 'Port Restricted',
+  [NatType.Symmetric]: 'Symmetric',
+  [NatType.SymUdpFirewall]: 'Symmetric UDP Firewall',
+  [NatType.SymmetricEasyInc]: 'Symmetric Easy Inc',
+  [NatType.SymmetricEasyDec]: 'Symmetric Easy Dec',
+}
+
 const myNodeInfoChips = computed(() => {
   if (!props.curNetworkInst)
     return []
@@ -153,6 +183,12 @@ const myNodeInfoChips = computed(() => {
   if (!my_node_info)
     return chips
 
+  // peer id
+  chips.push({
+    label: `Peer ID: ${my_node_info.peer_id}`,
+    icon: '',
+  } as Chip)
+
   // TUN Device Name
   const dev_name = props.curNetworkInst.detail?.dev_name
   if (dev_name) {
@@ -212,35 +248,8 @@ const myNodeInfoChips = computed(() => {
     } as Chip)
   }
 
-  // udp nat type
-  enum NatType {
-    // has NAT; but own a single public IP, port is not changed
-    Unknown = 0,
-    OpenInternet = 1,
-    NoPAT = 2,
-    FullCone = 3,
-    Restricted = 4,
-    PortRestricted = 5,
-    Symmetric = 6,
-    SymUdpFirewall = 7,
-    SymmetricEasyInc = 8,
-    SymmetricEasyDec = 9,
-  };
   const udpNatType: NatType = my_node_info.stun_info?.udp_nat_type
   if (udpNatType !== undefined) {
-    const udpNatTypeStrMap = {
-      [NatType.Unknown]: 'Unknown',
-      [NatType.OpenInternet]: 'Open Internet',
-      [NatType.NoPAT]: 'No PAT',
-      [NatType.FullCone]: 'Full Cone',
-      [NatType.Restricted]: 'Restricted',
-      [NatType.PortRestricted]: 'Port Restricted',
-      [NatType.Symmetric]: 'Symmetric',
-      [NatType.SymUdpFirewall]: 'Symmetric UDP Firewall',
-      [NatType.SymmetricEasyInc]: 'Symmetric Easy Inc',
-      [NatType.SymmetricEasyDec]: 'Symmetric Easy Dec',
-    }
-
     chips.push({
       label: `UDP NAT Type: ${udpNatTypeStrMap[udpNatType]}`,
       icon: '',
@@ -271,6 +280,14 @@ function rxGlobalSum() {
   return globalSumCommon('stats.rx_bytes')
 }
 
+function natType(info: PeerRoutePair): string {
+  const udpNatType = info.route?.stun_info?.udp_nat_type;
+  if (udpNatType !== undefined)
+    return udpNatTypeStrMap[udpNatType as NatType]
+
+  return ''
+}
+
 const peerCount = computed(() => {
   if (!peerRouteInfos.value)
     return 0
@@ -285,6 +302,10 @@ let prevTxSum = 0
 let prevRxSum = 0
 const txRate = ref('0')
 const rxRate = ref('0')
+
+// 控制节点详细信息chips的显示/隐藏
+const showNodeDetails = ref(false)
+
 onMounted(() => {
   rateIntervalId = window.setInterval(() => {
     const curTxSum = txGlobalSum()
@@ -365,36 +386,23 @@ function showEventLogs() {
         </template>
         <template #content>
           <div class="flex w-full flex-col gap-y-5">
-            <div class="m-0 flex flex-row justify-center gap-x-5">
-              <div class="rounded-full w-32 h-32 flex flex-col items-center pt-6" style="border: 1px solid green">
-                <div class="font-bold">
-                  {{ t('peer_count') }}
-                </div>
-                <div class="text-5xl mt-1">
-                  {{ peerCount }}
+            <div class="gap-4">
+              <!-- 网络流量图表 -->
+              <div class="w-full">
+                <NetworkChart :upload-rate="txRate" :download-rate="rxRate" />
               </div>
             </div>
 
-              <div class="rounded-full w-32 h-32 flex flex-col items-center pt-6" style="border: 1px solid purple">
-                <div class="font-bold">
-                  {{ t('upload') }}
-                </div>
-                <div class="text-xl mt-2">
-                  {{ txRate }}/s
-                </div>
+            <!-- 展开/收起节点详细信息的divider按钮 -->
+            <div class="w-full">
+              <Button @click="showNodeDetails = !showNodeDetails"
+                :icon="showNodeDetails ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+                :label="showNodeDetails ? t('hide_node_details') : t('show_node_details')" severity="secondary" outlined
+                class="w-full justify-center" size="small" />
             </div>
 
-              <div class="rounded-full w-32 h-32 flex flex-col items-center pt-6" style="border: 1px solid fuchsia">
-                <div class="font-bold">
-                  {{ t('download') }}
-                </div>
-                <div class="text-xl mt-2">
-                  {{ rxRate }}/s
-                </div>
-              </div>
-            </div>
-
-            <div class="flex flex-row items-center flex-wrap w-full max-h-40 overflow-scroll">
+            <!-- 节点详细信息chips，根据showNodeDetails状态显示/隐藏 -->
+            <div v-show="showNodeDetails" class="flex flex-row items-center flex-wrap w-full max-h-40 overflow-scroll">
               <Chip v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
                 class="mr-2 mt-2 text-sm" />
             </div>
@@ -411,7 +419,15 @@ function showEventLogs() {
 
       <Card>
         <template #title>
-          {{ t('peer_info') }}
+          <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2">
+              <span>{{ t('peer_info') }}</span>
+            </div>
+            <div class="flex items-center gap-1">
+              <Badge :value="peerCount" severity="info"
+                class="text-lg font-semibold px-2 py-1 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200" />
+            </div>
+          </div>
         </template>
         <template #content>
           <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-class="w-full">
@@ -439,6 +455,7 @@ function showEventLogs() {
             <Column :field="txBytes" :header="t('upload_bytes')" />
             <Column :field="rxBytes" :header="t('download_bytes')" />
             <Column :field="lossRate" :header="t('loss_rate')" />
+            <Column :field="natType" :header="t('nat_type')" />
             <Column :header="t('status.version')">
               <template #body="slotProps">
                 <span>{{ version(slotProps.data) }}</span>
@@ -455,4 +472,8 @@ function showEventLogs() {
 .p-timeline :deep(.p-timeline-event-opposite) {
   @apply flex-none;
 }
+
+:deep(.p-datatable .p-datatable-column-title) {
+  white-space: nowrap;
+}
 </style>

easytier-web/frontend-lib/src/components/UrlInput.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { AutoComplete, Button, Dialog, InputNumber, InputText } from 'primevue'
+import InputGroup from 'primevue/inputgroup'
+import InputGroupAddon from 'primevue/inputgroupaddon'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+    placeholder?: string
+    protos: { [proto: string]: number }
+}>()
+
+const { t } = useI18n()
+const url = defineModel<string>({ required: true })
+const editing = ref(false)
+const container = ref<HTMLElement | null>(null)
+const internalCompact = ref(false)
+
+onMounted(() => {
+    if (container.value) {
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                internalCompact.value = entry.contentRect.width < 400
+            }
+        })
+        observer.observe(container.value)
+
+        onUnmounted(() => {
+            observer.disconnect()
+        })
+    }
+})
+
+const parseUrl = (val: string | null | undefined) => {
+    const getValidPort = (portStr: string, proto: string) => {
+        const p = parseInt(portStr)
+        return isNaN(p) ? (props.protos[proto] ?? 11010) : p
+    }
+
+    if (!val) {
+        return { proto: 'tcp', host: '', port: props.protos['tcp'] ?? 11010 }
+    }
+    try {
+        const urlObj = new URL(val)
+        const proto = urlObj.protocol.replace(':', '')
+        return {
+            proto: proto,
+            host: urlObj.hostname,
+            port: getValidPort(urlObj.port, proto)
+        }
+    } catch (e) {
+        // Fallback for incomplete or invalid URLs
+        const match = val.match(/^(\w+):\/\/(.*)$/)
+        if (match) {
+            const proto = match[1]
+            const rest = match[2]
+            const portMatch = rest.match(/:(\d+)$/)
+            return {
+                proto,
+                host: portMatch ? rest.slice(0, portMatch.index) : rest,
+                port: portMatch ? parseInt(portMatch[1]) : (props.protos[proto] ?? 11010)
+            }
+        }
+        return { proto: 'tcp', host: '', port: 11010 }
+    }
+}
+
+const internalValue = ref(parseUrl(url.value))
+
+const isNoPortProto = computed(() => {
+    return props.protos[internalValue.value.proto] === 0
+})
+
+// Sync from external
+watch(() => url.value, (newVal) => {
+    const parsed = parseUrl(newVal)
+    if (parsed.proto !== internalValue.value.proto ||
+        parsed.host !== internalValue.value.host ||
+        parsed.port !== internalValue.value.port) {
+        internalValue.value = parsed
+    }
+})
+
+// Sync to external
+watch(internalValue, (newVal) => {
+    const proto = newVal.proto || 'tcp'
+    const host = newVal.host || '0.0.0.0'
+    let port = newVal.port
+    if (isNaN(parseInt(port as any))) {
+        port = props.protos[proto] ?? 11010
+    }
+
+    if (props.protos[proto] === 0) {
+        url.value = `${proto}://${host}`
+    } else {
+        url.value = `${proto}://${host}:${port}`
+    }
+}, { deep: true })
+
+const protoOptions = computed(() => Object.keys(props.protos))
+const filteredProtos = ref<string[]>([])
+
+const searchProtos = (event: { query: string }) => {
+    if (!event.query.trim().length) {
+        filteredProtos.value = [...protoOptions.value]
+    } else {
+        filteredProtos.value = protoOptions.value.filter((proto) => {
+            return proto.toLowerCase().startsWith(event.query.toLowerCase())
+        })
+    }
+}
+
+const onProtoChange = (newProto: string) => {
+    const oldProto = internalValue.value.proto
+    const oldDefault = props.protos[oldProto]
+    const newDefault = props.protos[newProto]
+
+    if (oldDefault !== undefined && internalValue.value.port === oldDefault && newDefault !== undefined) {
+        internalValue.value.port = newDefault
+    }
+    internalValue.value.proto = newProto
+}
+</script>
+
+<template>
+    <div ref="container" class="w-full">
+        <InputGroup v-if="!internalCompact" class="w-full">
+            <AutoComplete :model-value="internalValue.proto" :suggestions="filteredProtos" dropdown
+                class="max-w-32 proto-autocomplete-in-group" @complete="searchProtos"
+                @update:model-value="onProtoChange" />
+            <InputText v-model="internalValue.host" :placeholder="placeholder || '0.0.0.0'" class="grow" />
+            <template v-if="!isNoPortProto">
+                <InputGroupAddon>
+                    <span style="font-weight: bold">:</span>
+                </InputGroupAddon>
+                <InputNumber v-model="internalValue.port" :format="false" :min="1" :max="65535" class="max-w-24"
+                    fluid />
+            </template>
+            <slot name="actions"></slot>
+        </InputGroup>
+
+        <div v-else class="flex justify-between items-center p-2 border rounded w-full">
+            <span class="truncate mr-2">{{ url }}</span>
+            <div class="flex items-center">
+                <Button icon="pi pi-pencil" class="p-button-sm p-button-text" @click="editing = true" />
+                <slot name="actions"></slot>
+            </div>
+        </div>
+
+        <Dialog v-model:visible="editing" modal :header="placeholder" :style="{ width: '90vw', maxWidth: '500px' }">
+            <div class="flex flex-col gap-4 py-4">
+                <div class="flex flex-col gap-2">
+                    <label>{{ t('tunnel_proto') }}</label>
+                    <AutoComplete :model-value="internalValue.proto" :suggestions="filteredProtos" dropdown fluid
+                        @complete="searchProtos" @update:model-value="onProtoChange" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label>{{ t('web.common.address') || 'Address' }}</label>
+                    <InputText v-model="internalValue.host" :placeholder="placeholder || '0.0.0.0'" class="w-full" />
+                </div>
+                <div v-if="!isNoPortProto" class="flex flex-col gap-2">
+                    <label>{{ t('port') }}</label>
+                    <InputNumber v-model="internalValue.port" :format="false" :min="1" :max="65535" class="w-full" />
+                </div>
+            </div>
+            <template #footer>
+                <Button :label="t('web.common.confirm') || 'Done'" icon="pi pi-check" @click="editing = false"
+                    autofocus />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<style scoped>
+.proto-autocomplete-in-group,
+.proto-autocomplete-in-group :deep(.p-autocomplete-input),
+.proto-autocomplete-in-group :deep(.p-autocomplete-dropdown) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.proto-autocomplete-in-group :deep(.p-autocomplete-dropdown) {
+    border-right: 0 !important;
+}
+</style>

easytier-web/frontend-lib/src/components/UrlListInput.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Button } from 'primevue'
+import UrlInput from './UrlInput.vue'
+
+const props = defineProps<{
+    protos: { [proto: string]: number }
+    addLabel: string
+    placeholder?: string
+    defaultUrl?: string
+}>()
+
+const list = defineModel<string[]>({ required: true })
+
+const addUrl = () => {
+    list.value.push(props.defaultUrl || 'tcp://0.0.0.0:11010')
+}
+
+const removeUrl = (index: number) => {
+    list.value.splice(index, 1)
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-y-2 w-full">
+        <div v-for="(_, index) in list" :key="index" class="flex gap-2 items-center w-full">
+            <UrlInput v-model="list[index]" :protos="protos" :placeholder="placeholder">
+                <template #actions>
+                    <Button icon="pi pi-trash" severity="danger" text rounded @click="removeUrl(index)" />
+                </template>
+            </UrlInput>
+        </div>
+        <div class="flex justify-center items-center w-full h-10 border-2 border-dashed border-surface-300 dark:border-surface-600 rounded-lg cursor-pointer hover:border-primary hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors duration-200 gap-2 text-surface-500 dark:text-surface-400"
+            @click="addUrl">
+            <i class="pi pi-plus text-sm"></i>
+            <span class="text-sm font-medium">{{ addLabel }}</span>
+        </div>
+    </div>
+</template>

easytier-web/frontend-lib/src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Config } from './Config.vue';
 export { default as Status } from './Status.vue';
 export { default as ConfigEditDialog } from './ConfigEditDialog.vue';
+export { default as RemoteManagement } from './RemoteManagement.vue';

easytier-web/frontend-lib/src/easytier-frontend-lib.ts

@@ -1,8 +1,8 @@
 import './style.css'
 
 import type { App } from 'vue';
-import { Config, Status, ConfigEditDialog } from "./components";
-import Aura from '@primevue/themes/aura'
+import { Config, Status, ConfigEditDialog, RemoteManagement } from "./components";
+import Aura from '@primeuix/themes/aura';
 import PrimeVue from 'primevue/config'
 
 import I18nUtils from './modules/i18n'
@@ -44,8 +44,9 @@ export default {
         app.component('ConfigEditDialog', ConfigEditDialog);
         app.component('Status', Status);
         app.component('HumanEvent', HumanEvent);
+        app.component('RemoteManagement', RemoteManagement);
         app.directive('tooltip', vTooltip as any);
     }
 };
 
-export { Config, ConfigEditDialog, Status, I18nUtils, NetworkTypes, Api, Utils };
+export { Config, ConfigEditDialog, RemoteManagement, Status, I18nUtils, NetworkTypes, Api, Utils };

easytier-web/frontend-lib/src/locales/cn.yaml

@@ -3,6 +3,14 @@ networking_method: 网络方式
 public_server: 公共服务器
 manual: 手动
 standalone: 独立
+initial_nodes: 初始节点
+initial_nodes_help: |
+  EasyTier 不分服务端/客户端。
+  • 填“初始节点” = 插上网线，直接加入已有网络。
+  • 留空 = 节点独立启动，等别人来连，或你后续手动连。
+  • 无论直接还是间接连通（通过其他节点搭桥），都能组网互通。
+  初始节点可以用自己的，也可以用别人分享的。
+initial_node_placeholder: 例如：tcp://node.example.com:11010
 virtual_ipv4: 虚拟IPv4地址
 virtual_ipv4_dhcp: DHCP
 network_name: 网络名称
@@ -18,12 +26,17 @@ advanced_settings: 高级设置
 basic_settings: 基础设置
 listener_urls: 监听地址
 rpc_port: RPC端口
+port: 端口
 rpc_portal_whitelists: RPC白名单
 config_network: 配置网络
 running: 运行中
 error_msg: 错误信息
 detail: 详情
 add_new_network: 添加新网络
+add_peer_url: 添加节点
+add_initial_node: 添加初始节点
+add_listener_url: 添加监听地址
+add_mapped_listener: 添加监听映射
 del_cur_network: 删除当前网络
 select_network: 选择网络
 network_instances: 网络实例
@@ -48,6 +61,8 @@ hide_dock_icon: 隐藏 Dock 图标
 show_dock_icon: 显示 Dock 图标
 exit: 退出
 chips_placeholder: 例如： {0}, 输入后在下拉框中选择生效
+show_node_details: 显示节点详细信息
+hide_node_details: 隐藏节点详细信息
 hostname_placeholder: '留空默认为主机名: {0}'
 dev_name_placeholder: 注意：当多个网络同时使用相同的TUN接口名称时，将会在设置TUN的IP时产生冲突，留空以自动生成随机名称
 off_text: 点击关闭
@@ -76,6 +91,7 @@ latency: 延迟
 upload_bytes: 上传
 download_bytes: 下载
 loss_rate: 丢包率
+nat_type: NAT 类型
 
 flags_switch: 功能开关
 
@@ -103,6 +119,12 @@ disable_quic_input_help: 禁用 QUIC 入站流量，其他开启 QUIC 代理的
 disable_p2p: 禁用 P2P
 disable_p2p_help: 禁用 P2P 模式，所有流量通过手动指定的服务器中转。
 
+p2p_only: 仅 P2P
+p2p_only_help: 仅与已经建立P2P连接的对等节点通信，不通过其他节点中转。
+
+lazy_p2p: 延迟 P2P
+lazy_p2p_help: 仅在实际流量需要某个对等节点时才尝试建立 P2P。开启 need-p2p 的节点仍会被主动连接。
+
 bind_device: 仅使用物理网卡
 bind_device_help: 仅使用物理网卡，避免 EasyTier 通过其他虚拟网建立连接。
 
@@ -117,6 +139,9 @@ relay_all_peer_rpc_help: |
   允许转发所有对等节点的RPC数据包，即使对等节点不在转发网络白名单中。
   这可以帮助白名单外网络中的对等节点建立P2P连接。
 
+need_p2p: 需要 P2P
+need_p2p_help: 即使其他节点启用了 lazy p2p，也要求它们主动与当前节点建立 P2P 连接。
+
 multi_thread: 启用多线程
 multi_thread_help: 使用多线程运行时
 
@@ -124,7 +149,10 @@ proxy_forward_by_system: 系统转发
 proxy_forward_by_system_help: 通过系统内核转发子网代理数据包，禁用内置NAT
 
 disable_encryption: 禁用加密
-disable_encryption_help: 禁用对等节点通信的加密，默认为false，必须与对等节点相同
+disable_encryption_help: 禁用对等节点通信的加密。注意：默认启用加密，若勾选此项则关闭，必须与对等节点设置一致。
+
+disable_tcp_hole_punching: 禁用TCP打洞
+disable_tcp_hole_punching_help: 禁用TCP打洞功能
 
 disable_udp_hole_punching: 禁用UDP打洞
 disable_udp_hole_punching_help: 禁用UDP打洞功能
@@ -161,6 +189,7 @@ port_forwards_help: "将本地端口转发到虚拟网络中的远程端口。
 port_forwards_bind_addr: "绑定地址，如：0.0.0.0"
 port_forwards_dst_addr: "目标地址，如：10.126.126.1"
 port_forwards_add_btn: "添加"
+edit_port_forward: "编辑端口转发"
 
 mtu: MTU
 mtu_help: |
@@ -218,6 +247,7 @@ event:
   DhcpIpv4Changed: DHCP IPv4地址更改
   DhcpIpv4Conflicted: DHCP IPv4地址冲突
   PortForwardAdded: 端口转发添加
+  ProxyCidrsUpdated: 子网代理CIDR更新
 
 web:
   login:
@@ -231,6 +261,7 @@ web:
     captcha: 验证码
     back_to_login: 返回登录
     login: 登录
+    sso_login: "SSO 登录"
 
   register:
     title: 注册
@@ -286,9 +317,11 @@ web:
     network: 网络
     select_network: 选择网络
     create_network: 创建网络
-    cancel_creation: 取消创建
+    cancel_edit: 取消编辑
     more_actions: 更多操作
     edit_as_file: 编辑为文件
+    save_config: 保存配置
+    config_saved: 配置已保存
     import_config: 导入配置
     create_new: 创建新网络
     network_status: 网络状态
@@ -321,6 +354,9 @@ web:
     success: 成功
     warning: 警告
     info: 提示
+    enable: 开启
+    disable: 关闭
+    address: 地址
 
   settings:
     title: 设置
@@ -331,3 +367,52 @@ web:
     language: 语言
     theme: 主题
     logout: 退出登录
+
+mode:
+  title: 模式
+  switch_mode: 切换模式
+  config_dir: 配置目录
+  rpc_portal: RPC端口
+  enable_rpc_tcp_listen: 开启 RPC 端口监听（TCP）
+  rpc_listen_port: RPC 监听端口
+  log_level: 日志级别
+  log_dir: 日志目录
+  remote_rpc_address: 远程RPC地址
+  normal: 普通模式
+  service: 服务模式
+  remote: 远程模式
+  normal_description: 直接运行EasyTier，适合本地使用
+  service_description: 作为系统服务运行，支持开机自启和后台运行。退出GUI后服务仍在后台运行。
+  remote_description: 连接到远程RPC服务，管理和控制远程节点
+  service_status: 服务状态
+  service_status_running: 运行中
+  service_status_stopped: 已停止
+  service_status_notinstalled: 未安装
+  uninstall_service: 卸载服务
+  stop_service: 停止服务
+  uninstall_service_confirm: 确定要卸载服务吗？
+  uninstall_service_success: 服务卸载成功，已切换回普通模式
+  stop_service_success: 服务停止成功
+  remote_rpc_address_empty: 远程RPC地址不能为空
+  service_config_empty: 服务配置不能为空
+  rpc_connection_failed: "RPC 连接失败：{error}"
+
+config-server:
+  title: 配置服务器
+  address: 配置服务器地址
+  address_placeholder: 例如：udp://127.0.0.1:22020/admin 或 admin
+  description: |
+    配置服务器地址，支持以下格式：
+    完整URL：udp://127.0.0.1:22020/admin
+    仅用户名：admin（使用官方服务器）
+    留空：不连接配置服务器
+  connection_status: 连接状态
+  connected: ": 已连接"
+  disconnected: ": 未连接"
+  connecting: ": 连接中..."
+  unknown: ""
+  update_service_confirm: 将重启服务以应用更改，是否继续？
+
+client:
+  not_running: 无法连接至远程客户端
+  retry: 重试