Feat/web （Patchset 4） (#460)

support basic functions in frontend 1. create/del network 2. inspect network running status
2024-11-16 03:32:43 +08:00 · 2024-11-08 23:33:17 +08:00 · 2024-11-08 23:33:17 +08:00 · e948dbfcc1
commit e948dbfcc1
parent 8aca5851f2
64 changed files with 11671 additions and 344 deletions
--- a/.github/workflows/gui.yml
+++ b/.github/workflows/gui.yml
@ -99,8 +99,8 @@ jobs:

      - name: Install frontend dependencies
        run: |
-          (cd easytier-gui; pnpm install)
-          (cd tauri-plugin-vpnservice; pnpm install; pnpm build)
+          pnpm -r install
+          pnpm -r build

      - name: Cargo cache
        uses: actions/cache@v4
--- a/.github/workflows/mobile.yml
+++ b/.github/workflows/mobile.yml
@ -95,8 +95,8 @@ jobs:

      - name: Install frontend dependencies
        run: |
-          (cd easytier-gui; pnpm install)
-          (cd tauri-plugin-vpnservice; pnpm install; pnpm build)
+          pnpm -r install
+          pnpm -r build

      - name: Cargo cache
        uses: actions/cache@v4
--- a/.gitignore
+++ b/.gitignore
@ -30,3 +30,6 @@ musl_gcc

 # log
 easytier-panic.log
+
+# web
+node_modules
--- a/easytier-gui/src-tauri/src/lib.rs
+++ b/easytier-gui/src-tauri/src/lib.rs
@ -10,7 +10,7 @@ use easytier::{
        ConfigLoader, FileLoggerConfig, Flags, NetworkIdentity, PeerConfig, TomlConfigLoader,
        VpnPortalConfig,
    },
-    launcher::{NetworkInstance, NetworkInstanceRunningInfo},
+    launcher::{NetworkConfig, NetworkInstance, NetworkInstanceRunningInfo},
    utils::{self, NewFilterSender},
 };
 use serde::{Deserialize, Serialize};
@ -19,165 +19,9 @@ use tauri::Manager as _;

 pub const AUTOSTART_ARG: &str = "--autostart";

-#[derive(Deserialize, Serialize, PartialEq, Debug)]
-enum NetworkingMethod {
-    PublicServer,
-    Manual,
-    Standalone,
-}
-
-impl Default for NetworkingMethod {
-    fn default() -> Self {
-        NetworkingMethod::PublicServer
-    }
-}
-
 #[cfg(not(target_os = "android"))]
 use tauri::tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent};

-#[derive(Deserialize, Serialize, Debug, Default)]
-struct NetworkConfig {
-    instance_id: String,
-
-    dhcp: bool,
-    virtual_ipv4: String,
-    network_length: i32,
-    hostname: Option<String>,
-    network_name: String,
-    network_secret: String,
-    networking_method: NetworkingMethod,
-
-    public_server_url: String,
-    peer_urls: Vec<String>,
-
-    proxy_cidrs: Vec<String>,
-
-    enable_vpn_portal: bool,
-    vpn_portal_listen_port: i32,
-    vpn_portal_client_network_addr: String,
-    vpn_portal_client_network_len: i32,
-
-    advanced_settings: bool,
-
-    listener_urls: Vec<String>,
-    rpc_port: i32,
-    latency_first: bool,
-
-    dev_name: String,
-}
-
-impl NetworkConfig {
-    fn gen_config(&self) -> Result<TomlConfigLoader, anyhow::Error> {
-        let cfg = TomlConfigLoader::default();
-        cfg.set_id(
-            self.instance_id
-                .parse()
-                .with_context(|| format!("failed to parse instance id: {}", self.instance_id))?,
-        );
-        cfg.set_hostname(self.hostname.clone());
-        cfg.set_dhcp(self.dhcp);
-        cfg.set_inst_name(self.network_name.clone());
-        cfg.set_network_identity(NetworkIdentity::new(
-            self.network_name.clone(),
-            self.network_secret.clone(),
-        ));
-
-        if !self.dhcp {
-            if self.virtual_ipv4.len() > 0 {
-                let ip = format!("{}/{}", self.virtual_ipv4, self.network_length)
-                    .parse()
-                    .with_context(|| {
-                        format!(
-                            "failed to parse ipv4 inet address: {}, {}",
-                            self.virtual_ipv4, self.network_length
-                        )
-                    })?;
-                cfg.set_ipv4(Some(ip));
-            }
-        }
-
-        match self.networking_method {
-            NetworkingMethod::PublicServer => {
-                cfg.set_peers(vec![PeerConfig {
-                    uri: self.public_server_url.parse().with_context(|| {
-                        format!(
-                            "failed to parse public server uri: {}",
-                            self.public_server_url
-                        )
-                    })?,
-                }]);
-            }
-            NetworkingMethod::Manual => {
-                let mut peers = vec![];
-                for peer_url in self.peer_urls.iter() {
-                    if peer_url.is_empty() {
-                        continue;
-                    }
-                    peers.push(PeerConfig {
-                        uri: peer_url
-                            .parse()
-                            .with_context(|| format!("failed to parse peer uri: {}", peer_url))?,
-                    });
-                }
-
-                cfg.set_peers(peers);
-            }
-            NetworkingMethod::Standalone => {}
-        }
-
-        let mut listener_urls = vec![];
-        for listener_url in self.listener_urls.iter() {
-            if listener_url.is_empty() {
-                continue;
-            }
-            listener_urls.push(
-                listener_url
-                    .parse()
-                    .with_context(|| format!("failed to parse listener uri: {}", listener_url))?,
-            );
-        }
-        cfg.set_listeners(listener_urls);
-
-        for n in self.proxy_cidrs.iter() {
-            cfg.add_proxy_cidr(
-                n.parse()
-                    .with_context(|| format!("failed to parse proxy network: {}", n))?,
-            );
-        }
-
-        cfg.set_rpc_portal(
-            format!("0.0.0.0:{}", self.rpc_port)
-                .parse()
-                .with_context(|| format!("failed to parse rpc portal port: {}", self.rpc_port))?,
-        );
-
-        if self.enable_vpn_portal {
-            let cidr = format!(
-                "{}/{}",
-                self.vpn_portal_client_network_addr, self.vpn_portal_client_network_len
-            );
-            cfg.set_vpn_portal_config(VpnPortalConfig {
-                client_cidr: cidr
-                    .parse()
-                    .with_context(|| format!("failed to parse vpn portal client cidr: {}", cidr))?,
-                wireguard_listen: format!("0.0.0.0:{}", self.vpn_portal_listen_port)
-                    .parse()
-                    .with_context(|| {
-                        format!(
-                            "failed to parse vpn portal wireguard listen port. {}",
-                            self.vpn_portal_listen_port
-                        )
-                    })?,
-            });
-        }
-        let mut flags = Flags::default();
-        flags.latency_first = self.latency_first;
-        flags.dev_name = self.dev_name.clone();
-        cfg.set_flags(flags);
-        Ok(cfg)
-    }
-}
-
 static INSTANCE_MAP: once_cell::sync::Lazy<DashMap<String, NetworkInstance>> =
    once_cell::sync::Lazy::new(DashMap::new);

@ -205,10 +49,10 @@ fn parse_network_config(cfg: NetworkConfig) -> Result<String, String> {

 #[tauri::command]
 fn run_network_instance(cfg: NetworkConfig) -> Result<(), String> {
-    if INSTANCE_MAP.contains_key(&cfg.instance_id) {
+    if INSTANCE_MAP.contains_key(cfg.instance_id()) {
        return Err("instance already exists".to_string());
    }
-    let instance_id = cfg.instance_id.clone();
+    let instance_id = cfg.instance_id().to_string();

    let cfg = cfg.gen_config().map_err(|e| e.to_string())?;
    let mut instance = NetworkInstance::new(cfg);
--- a/easytier-gui/src/components/Config.vue
+++ b/easytier-gui/src/components/Config.vue
@ -45,7 +45,7 @@ function searchUrlSuggestions(e: { query: string }): string[] {
      new URL(query)
      ret.push(query)
    }
-    catch {}
+    catch { }
  }
  else {
    for (const proto in protos) {
@ -162,14 +162,14 @@ onMounted(async () => {
                  </label>
                </div>
                <InputGroup>
-                  <InputText
-                    id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
-                    aria-describedby="virtual_ipv4-help"
-                  />
+                  <InputText id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
+                    aria-describedby="virtual_ipv4-help" />
                  <InputGroupAddon>
                    <span>/</span>
                  </InputGroupAddon>
-                  <InputNumber v-model="curNetwork.network_length" :disabled="curNetwork.dhcp" inputId="horizontal-buttons" showButtons :step="1" mode="decimal" :min="1" :max="32" fluid class="max-w-20"/>
+                  <InputNumber v-model="curNetwork.network_length" :disabled="curNetwork.dhcp"
+                    inputId="horizontal-buttons" showButtons :step="1" mode="decimal" :min="1" :max="32" fluid
+                    class="max-w-20" />
                </InputGroup>
              </div>
            </div>
@ -181,29 +181,25 @@ onMounted(async () => {
              </div>
              <div class="flex flex-column gap-2 basis-5/12 grow">
                <label for="network_secret">{{ t('network_secret') }}</label>
-                <InputText
-                  id="network_secret" v-model="curNetwork.network_secret"
-                  aria-describedby="network_secret-help"
-                />
+                <InputText id="network_secret" v-model="curNetwork.network_secret"
+                  aria-describedby="network_secret-help" />
              </div>
            </div>

            <div class="flex flex-row gap-x-9 flex-wrap">
              <div class="flex flex-column 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" />
+                <SelectButton v-model="curNetwork.networking_method" :options="networking_methods"
+                  :option-label="(v: any) => 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"
+                  <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"
-                  />
+                    class="grow" multiple fluid :suggestions="peerSuggestions" @complete="searchPeerSuggestions" />

-                  <AutoComplete
-                    v-if="curNetwork.networking_method === NetworkingMethod.PublicServer" v-model="curNetwork.public_server_url"
-                    :suggestions="publicServerSuggestions" :virtual-scroller-options="{ itemSize: 38 }" class="grow" dropdown :complete-on-focus="true"
-                    @complete="searchPresetPublicServers"
-                  />
+                  <AutoComplete v-if="curNetwork.networking_method === NetworkingMethod.PublicServer"
+                    v-model="curNetwork.public_server_url" :suggestions="publicServerSuggestions"
+                    :virtual-scroller-options="{ itemSize: 38 }" class="grow" dropdown :complete-on-focus="true"
+                    @complete="searchPresetPublicServers" />
                </div>
              </div>
            </div>
@ -226,47 +222,37 @@ onMounted(async () => {
            <div class="flex flex-row gap-x-9 flex-wrap">
              <div class="flex flex-column gap-2 basis-5/12 grow">
                <label for="hostname">{{ t('hostname') }}</label>
-                <InputText
-                  id="hostname" v-model="curNetwork.hostname" aria-describedby="hostname-help" :format="true"
-                  :placeholder="t('hostname_placeholder', [osHostname])" @blur="validateHostname"
-                />
+                <InputText id="hostname" v-model="curNetwork.hostname" aria-describedby="hostname-help" :format="true"
+                  :placeholder="t('hostname_placeholder', [osHostname])" @blur="validateHostname" />
              </div>
            </div>

            <div class="flex flex-row gap-x-9 flex-wrap w-full">
              <div class="flex flex-column gap-2 grow p-fluid">
                <label for="username">{{ t('proxy_cidrs') }}</label>
-                <AutoComplete
-                  id="subnet-proxy"
-                  v-model="curNetwork.proxy_cidrs" :placeholder="t('chips_placeholder', ['10.0.0.0/24'])"
-                  class="w-full" multiple fluid :suggestions="inetSuggestions" @complete="searchInetSuggestions"
-                />
+                <AutoComplete id="subnet-proxy" v-model="curNetwork.proxy_cidrs"
+                  :placeholder="t('chips_placeholder', ['10.0.0.0/24'])" class="w-full" multiple fluid
+                  :suggestions="inetSuggestions" @complete="searchInetSuggestions" />
              </div>
            </div>

            <div class="flex flex-row gap-x-9 flex-wrap ">
              <div class="flex flex-column gap-2 grow">
                <label for="username">VPN Portal</label>
-                <ToggleButton
-                  v-model="curNetwork.enable_vpn_portal" on-icon="pi pi-check" off-icon="pi pi-times"
-                  :on-label="t('off_text')" :off-label="t('on_text')" class="w-48"
-                />
+                <ToggleButton v-model="curNetwork.enable_vpn_portal" on-icon="pi pi-check" off-icon="pi pi-times"
+                  :on-label="t('off_text')" :off-label="t('on_text')" class="w-48" />
                <div v-if="curNetwork.enable_vpn_portal" class="items-center flex flex-row gap-x-4">
                  <div class="min-w-64">
                    <InputGroup>
-                      <InputText
-                        v-model="curNetwork.vpn_portal_client_network_addr"
-                        :placeholder="t('vpn_portal_client_network')"
-                      />
+                      <InputText v-model="curNetwork.vpn_portal_client_network_addr"
+                        :placeholder="t('vpn_portal_client_network')" />
                      <InputGroupAddon>
                        <span>/{{ curNetwork.vpn_portal_client_network_len }}</span>
                      </InputGroupAddon>
                    </InputGroup>

-                    <InputNumber
-                      v-model="curNetwork.vpn_portal_listen_port" :allow-empty="false"
-                      :format="false" :min="0" :max="65535" class="w-8" fluid
-                    />
+                    <InputNumber v-model="curNetwork.vpn_portal_listen_port" :allow-empty="false" :format="false"
+                      :min="0" :max="65535" class="w-8" fluid />
                  </div>
                </div>
              </div>
@ -275,42 +261,34 @@ onMounted(async () => {
            <div class="flex flex-row gap-x-9 flex-wrap">
              <div class="flex flex-column 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="searchListenerSuggestiong"
-                />
+                <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="searchListenerSuggestiong" />
              </div>
            </div>

            <div class="flex flex-row gap-x-9 flex-wrap">
              <div class="flex flex-column 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"
-                />
+                <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">
              <div class="flex flex-column gap-2 basis-5/12 grow">
                <label for="dev_name">{{ t('dev_name') }}</label>
-                <InputText
-                  id="dev_name" v-model="curNetwork.dev_name" aria-describedby="dev_name-help" :format="true"
-                  :placeholder="t('dev_name_placeholder')"
-                />
+                <InputText id="dev_name" v-model="curNetwork.dev_name" aria-describedby="dev_name-help" :format="true"
+                  :placeholder="t('dev_name_placeholder')" />
              </div>
            </div>
          </div>
        </Panel>

        <div class="flex pt-4 justify-content-center">
-          <Button
-            :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
-            @click="$emit('runNetwork', curNetwork)"
-          />
+          <Button :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
+            @click="$emit('runNetwork', curNetwork)" />
        </div>
      </div>
    </div>
--- a/easytier-gui/src/main.ts
+++ b/easytier-gui/src/main.ts
@ -52,7 +52,7 @@ async function main() {
      },
    },
  })
-  app.use(ToastService)
+  app.use(ToastService as any)
  app.mount('#app')
 }

--- a/easytier-web/frontend-lib/.gitignore
+++ b/easytier-web/frontend-lib/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/easytier-web/frontend-lib/README.md
+++ b/easytier-web/frontend-lib/README.md
@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/easytier-web/frontend-lib/index.html
+++ b/easytier-web/frontend-lib/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/easytier-web/frontend-lib/package.json
+++ b/easytier-web/frontend-lib/package.json
@ -0,0 +1,46 @@
+{
+  "name": "easytier-frontend-lib",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/easytier-frontend-lib.umd.cjs",
+  "module": "./dist/easytier-frontend-lib.js",
+  "exports": {
+    ".": {
+      "import": "./dist/easytier-frontend-lib.js",
+      "require": "./dist/easytier-frontend-lib.umd.cjs"
+    },
+    "./*.css": "./dist/*.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@primevue/themes": "^4.2.1",
+    "@vueuse/core": "^11.1.0",
+    "aura": "link:@primevue\\themes\\aura",
+    "ip-num": "1.5.1",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.2.1",
+    "tailwindcss-primeui": "^0.3.4",
+    "uuid": "^11.0.2",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4"
+  },
+  "devDependencies": {
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@types/node": "^22.8.6",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^7.0.2",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^2.1.8"
+  }
+}
--- a/easytier-web/frontend-lib/pnpm-lock.yaml
+++ b/easytier-web/frontend-lib/pnpm-lock.yaml
@ -0,0 +1,820 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      vue:
+        specifier: ^3.5.12
+        version: 3.5.12(typescript@5.6.3)
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.4
+        version: 5.1.4(vite@5.4.10)(vue@3.5.12(typescript@5.6.3))
+      typescript:
+        specifier: ~5.6.2
+        version: 5.6.3
+      vite:
+        specifier: ^5.4.10
+        version: 5.4.10
+      vue-tsc:
+        specifier: ^2.1.8
+        version: 2.1.10(typescript@5.6.3)
+
+packages:
+
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+    engines: {node: '>=6.9.0'}
+
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@rollup/rollup-android-arm-eabi@4.24.3':
+    resolution: {integrity: sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.24.3':
+    resolution: {integrity: sha512-iAHpft/eQk9vkWIV5t22V77d90CRofgR2006UiCjHcHJFVI1E0oBkQIAbz+pLtthFw3hWEmVB4ilxGyBf48i2Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.24.3':
+    resolution: {integrity: sha512-QPW2YmkWLlvqmOa2OwrfqLJqkHm7kJCIMq9kOz40Zo9Ipi40kf9ONG5Sz76zszrmIZZ4hgRIkez69YnTHgEz1w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.24.3':
+    resolution: {integrity: sha512-KO0pN5x3+uZm1ZXeIfDqwcvnQ9UEGN8JX5ufhmgH5Lz4ujjZMAnxQygZAVGemFWn+ZZC0FQopruV4lqmGMshow==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.24.3':
+    resolution: {integrity: sha512-CsC+ZdIiZCZbBI+aRlWpYJMSWvVssPuWqrDy/zi9YfnatKKSLFCe6fjna1grHuo/nVaHG+kiglpRhyBQYRTK4A==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.24.3':
+    resolution: {integrity: sha512-F0nqiLThcfKvRQhZEzMIXOQG4EeX61im61VYL1jo4eBxv4aZRmpin6crnBJQ/nWnCsjH5F6J3W6Stdm0mBNqBg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.3':
+    resolution: {integrity: sha512-KRSFHyE/RdxQ1CSeOIBVIAxStFC/hnBgVcaiCkQaVC+EYDtTe4X7z5tBkFyRoBgUGtB6Xg6t9t2kulnX6wJc6A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.24.3':
+    resolution: {integrity: sha512-h6Q8MT+e05zP5BxEKz0vi0DhthLdrNEnspdLzkoFqGwnmOzakEHSlXfVyA4HJ322QtFy7biUAVFPvIDEDQa6rw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.24.3':
+    resolution: {integrity: sha512-fKElSyXhXIJ9pqiYRqisfirIo2Z5pTTve5K438URf08fsypXrEkVmShkSfM8GJ1aUyvjakT+fn2W7Czlpd/0FQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.24.3':
+    resolution: {integrity: sha512-YlddZSUk8G0px9/+V9PVilVDC6ydMz7WquxozToozSnfFK6wa6ne1ATUjUvjin09jp34p84milxlY5ikueoenw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.3':
+    resolution: {integrity: sha512-yNaWw+GAO8JjVx3s3cMeG5Esz1cKVzz8PkTJSfYzE5u7A+NvGmbVFEHP+BikTIyYWuz0+DX9kaA3pH9Sqxp69g==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.24.3':
+    resolution: {integrity: sha512-lWKNQfsbpv14ZCtM/HkjCTm4oWTKTfxPmr7iPfp3AHSqyoTz5AgLemYkWLwOBWc+XxBbrU9SCokZP0WlBZM9lA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.24.3':
+    resolution: {integrity: sha512-HoojGXTC2CgCcq0Woc/dn12wQUlkNyfH0I1ABK4Ni9YXyFQa86Fkt2Q0nqgLfbhkyfQ6003i3qQk9pLh/SpAYw==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.24.3':
+    resolution: {integrity: sha512-mnEOh4iE4USSccBOtcrjF5nj+5/zm6NcNhbSEfR3Ot0pxBwvEn5QVUXcuOwwPkapDtGZ6pT02xLoPaNv06w7KQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.24.3':
+    resolution: {integrity: sha512-rMTzawBPimBQkG9NKpNHvquIUTQPzrnPxPbCY1Xt+mFkW7pshvyIS5kYgcf74goxXOQk0CP3EoOC1zcEezKXhw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-win32-arm64-msvc@4.24.3':
+    resolution: {integrity: sha512-2lg1CE305xNvnH3SyiKwPVsTVLCg4TmNCF1z7PSHX2uZY2VbUpdkgAllVoISD7JO7zu+YynpWNSKAtOrX3AiuA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.24.3':
+    resolution: {integrity: sha512-9SjYp1sPyxJsPWuhOCX6F4jUMXGbVVd5obVpoVEi8ClZqo52ViZewA6eFz85y8ezuOA+uJMP5A5zo6Oz4S5rVQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.24.3':
+    resolution: {integrity: sha512-HGZgRFFYrMrP3TJlq58nR1xy8zHKId25vhmm5S9jETEfDf6xybPxsavFTJaufe2zgOGYJBskGlj49CwtEuFhWQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+
+  '@vitejs/plugin-vue@5.1.4':
+    resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.2.25
+
+  '@volar/language-core@2.4.8':
+    resolution: {integrity: sha512-K/GxMOXGq997bO00cdFhTNuR85xPxj0BEEAy+BaqqayTmy9Tmhfgmq2wpJcVspRhcwfgPoE2/mEJa26emUhG/g==}
+
+  '@volar/source-map@2.4.8':
+    resolution: {integrity: sha512-jeWJBkC/WivdelMwxKkpFL811uH/jJ1kVxa+c7OvG48DXc3VrP7pplSWPP2W1dLMqBxD+awRlg55FQQfiup4cA==}
+
+  '@volar/typescript@2.4.8':
+    resolution: {integrity: sha512-6xkIYJ5xxghVBhVywMoPMidDDAFT1OoQeXwa27HSgJ6AiIKRe61RXLoik+14Z7r0JvnblXVsjsRLmCr42SGzqg==}
+
+  '@vue/compiler-core@3.5.12':
+    resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
+
+  '@vue/compiler-dom@3.5.12':
+    resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
+
+  '@vue/compiler-sfc@3.5.12':
+    resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
+
+  '@vue/compiler-ssr@3.5.12':
+    resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/language-core@2.1.10':
+    resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/reactivity@3.5.12':
+    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
+
+  '@vue/runtime-core@3.5.12':
+    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
+
+  '@vue/runtime-dom@3.5.12':
+    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
+
+  '@vue/server-renderer@3.5.12':
+    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
+    peerDependencies:
+      vue: 3.5.12
+
+  '@vue/shared@3.5.12':
+    resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
+
+  alien-signals@0.2.0:
+    resolution: {integrity: sha512-StlonZhBBrsPPwrDjiPAiVTf/rolxffLxVPT60Qv/t88BZ81BvUVzHgGqEFvJ1ii8HXtm1+zU2Icr59tfWEcag==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  magic-string@0.30.12:
+    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  postcss@8.4.47:
+    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  rollup@4.24.3:
+    resolution: {integrity: sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  typescript@5.6.3:
+    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  vite@5.4.10:
+    resolution: {integrity: sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+
+  vue-tsc@2.1.10:
+    resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.12:
+    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+snapshots:
+
+  '@babel/helper-string-parser@7.25.9': {}
+
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@rollup/rollup-android-arm-eabi@4.24.3':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.24.3':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.24.3':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.24.3':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.24.3':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.24.3':
+    optional: true
+
+  '@types/estree@1.0.6': {}
+
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.10)(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      vite: 5.4.10
+      vue: 3.5.12(typescript@5.6.3)
+
+  '@volar/language-core@2.4.8':
+    dependencies:
+      '@volar/source-map': 2.4.8
+
+  '@volar/source-map@2.4.8': {}
+
+  '@volar/typescript@2.4.8':
+    dependencies:
+      '@volar/language-core': 2.4.8
+      path-browserify: 1.0.1
+      vscode-uri: 3.0.8
+
+  '@vue/compiler-core@3.5.12':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.12
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.12':
+    dependencies:
+      '@vue/compiler-core': 3.5.12
+      '@vue/shared': 3.5.12
+
+  '@vue/compiler-sfc@3.5.12':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.12
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      estree-walker: 2.0.2
+      magic-string: 0.30.12
+      postcss: 8.4.47
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.12':
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/shared': 3.5.12
+
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  '@vue/language-core@2.1.10(typescript@5.6.3)':
+    dependencies:
+      '@volar/language-core': 2.4.8
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.12
+      alien-signals: 0.2.0
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.6.3
+
+  '@vue/reactivity@3.5.12':
+    dependencies:
+      '@vue/shared': 3.5.12
+
+  '@vue/runtime-core@3.5.12':
+    dependencies:
+      '@vue/reactivity': 3.5.12
+      '@vue/shared': 3.5.12
+
+  '@vue/runtime-dom@3.5.12':
+    dependencies:
+      '@vue/reactivity': 3.5.12
+      '@vue/runtime-core': 3.5.12
+      '@vue/shared': 3.5.12
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      vue: 3.5.12(typescript@5.6.3)
+
+  '@vue/shared@3.5.12': {}
+
+  alien-signals@0.2.0: {}
+
+  balanced-match@1.0.2: {}
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  csstype@3.1.3: {}
+
+  de-indent@1.0.2: {}
+
+  entities@4.5.0: {}
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  estree-walker@2.0.2: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  he@1.2.0: {}
+
+  magic-string@0.30.12:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  muggle-string@0.4.1: {}
+
+  nanoid@3.3.7: {}
+
+  path-browserify@1.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  postcss@8.4.47:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  rollup@4.24.3:
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.24.3
+      '@rollup/rollup-android-arm64': 4.24.3
+      '@rollup/rollup-darwin-arm64': 4.24.3
+      '@rollup/rollup-darwin-x64': 4.24.3
+      '@rollup/rollup-freebsd-arm64': 4.24.3
+      '@rollup/rollup-freebsd-x64': 4.24.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.24.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.24.3
+      '@rollup/rollup-linux-arm64-gnu': 4.24.3
+      '@rollup/rollup-linux-arm64-musl': 4.24.3
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.24.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.24.3
+      '@rollup/rollup-linux-s390x-gnu': 4.24.3
+      '@rollup/rollup-linux-x64-gnu': 4.24.3
+      '@rollup/rollup-linux-x64-musl': 4.24.3
+      '@rollup/rollup-win32-arm64-msvc': 4.24.3
+      '@rollup/rollup-win32-ia32-msvc': 4.24.3
+      '@rollup/rollup-win32-x64-msvc': 4.24.3
+      fsevents: 2.3.3
+
+  semver@7.6.3: {}
+
+  source-map-js@1.2.1: {}
+
+  typescript@5.6.3: {}
+
+  vite@5.4.10:
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.47
+      rollup: 4.24.3
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  vscode-uri@3.0.8: {}
+
+  vue-tsc@2.1.10(typescript@5.6.3):
+    dependencies:
+      '@volar/typescript': 2.4.8
+      '@vue/language-core': 2.1.10(typescript@5.6.3)
+      semver: 7.6.3
+      typescript: 5.6.3
+
+  vue@3.5.12(typescript@5.6.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-sfc': 3.5.12
+      '@vue/runtime-dom': 3.5.12
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3))
+      '@vue/shared': 3.5.12
+    optionalDependencies:
+      typescript: 5.6.3
--- a/easytier-web/frontend-lib/postcss.config.js
+++ b/easytier-web/frontend-lib/postcss.config.js
@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    "postcss-nested": {},
+  },
+}
--- a/easytier-web/frontend-lib/public/vite.svg
+++ b/easytier-web/frontend-lib/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/easytier-web/frontend-lib/src/assets/vue.svg
+++ b/easytier-web/frontend-lib/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/easytier-web/frontend-lib/src/components/Config.vue
+++ b/easytier-web/frontend-lib/src/components/Config.vue
@ -0,0 +1,276 @@
+<script setup lang="ts">
+import InputGroup from 'primevue/inputgroup'
+import InputGroupAddon from 'primevue/inputgroupaddon'
+import { SelectButton, Checkbox, InputText, InputNumber, AutoComplete, Panel, Divider, ToggleButton, Button } from 'primevue'
+import { DEFAULT_NETWORK_CONFIG, NetworkConfig, NetworkingMethod } from '../types/network'
+import { defineProps, defineEmits, ref, } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  configInvalid?: boolean
+  instanceId?: string
+  hostname?: string
+}>()
+
+defineEmits(['runNetwork'])
+
+const curNetwork = defineModel('curNetwork', {
+  type: Object as () => NetworkConfig,
+  default: DEFAULT_NETWORK_CONFIG,
+})
+
+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 inetSuggestions = ref([''])
+
+function searchInetSuggestions(e: { query: string }) {
+  if (e.query.search('/') >= 0) {
+    inetSuggestions.value = [e.query]
+  } else {
+    const ret = []
+    for (let i = 0; i < 32; i++) {
+      ret.push(`${e.query}/${i}`)
+    }
+    inetSuggestions.value = ret
+  }
+}
+
+const listenerSuggestions = ref([''])
+
+function searchListenerSuggestiong(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
+}
+
+</script>
+
+<template>
+  <div class="frontend-lib">
+    <div class="flex flex-col h-full">
+      <div class="flex flex-col">
+        <div class="w-10/12 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">
+                <div class="flex flex-col gap-2 basis-5/12 grow">
+                  <div class="flex items-center" for="virtual_ip">
+                    <label class="mr-2"> {{ t('virtual_ipv4') }} </label>
+                    <Checkbox v-model="curNetwork.dhcp" input-id="virtual_ip_auto" :binary="true" />
+
+                    <label for="virtual_ip_auto" class="ml-2">
+                      {{ t('virtual_ipv4_dhcp') }}
+                    </label>
+                  </div>
+                  <InputGroup>
+                    <InputText id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
+                      aria-describedby="virtual_ipv4-help" />
+                    <InputGroupAddon>
+                      <span>/</span>
+                    </InputGroupAddon>
+                    <InputNumber v-model="curNetwork.network_length" :disabled="curNetwork.dhcp"
+                      inputId="horizontal-buttons" showButtons :step="1" mode="decimal" :min="1" :max="32" fluid
+                      class="max-w-20" />
+                  </InputGroup>
+                </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="network_name">{{ t('network_name') }}</label>
+                  <InputText id="network_name" v-model="curNetwork.network_name" aria-describedby="network_name-help" />
+                </div>
+                <div class="flex flex-col gap-2 basis-5/12 grow">
+                  <label for="network_secret">{{ t('network_secret') }}</label>
+                  <InputText id="network_secret" v-model="curNetwork.network_secret"
+                    aria-describedby="network_secret-help" />
+                </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="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"
+                      :virtual-scroller-options="{ itemSize: 38 }" class="grow" dropdown :complete-on-focus="true"
+                      @complete="searchPresetPublicServers" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Panel>
+
+          <Divider />
+
+          <Panel :header="t('advanced_settings')" toggleable collapsed>
+            <div class="flex flex-col gap-y-2">
+              <div class="flex flex-row gap-x-9 flex-wrap">
+                <div class="flex flex-col gap-2 basis-5/12 grow">
+                  <div class="flex items-center">
+                    <Checkbox v-model="curNetwork.latency_first" input-id="use_latency_first" :binary="true" />
+                    <label for="use_latency_first" class="ml-2"> {{ t('use_latency_first') }} </label>
+                  </div>
+                </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="hostname">{{ t('hostname') }}</label>
+                  <InputText id="hostname" v-model="curNetwork.hostname" aria-describedby="hostname-help" :format="true"
+                    :placeholder="t('hostname_placeholder', [props.hostname])" />
+                </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="username">{{ t('proxy_cidrs') }}</label>
+                  <AutoComplete id="subnet-proxy" v-model="curNetwork.proxy_cidrs"
+                    :placeholder="t('chips_placeholder', ['10.0.0.0/24'])" class="w-full" multiple fluid
+                    :suggestions="inetSuggestions" @complete="searchInetSuggestions" />
+                </div>
+              </div>
+
+              <div class="flex flex-row gap-x-9 flex-wrap ">
+                <div class="flex flex-col gap-2 grow">
+                  <label for="username">VPN Portal</label>
+                  <ToggleButton v-model="curNetwork.enable_vpn_portal" on-icon="pi pi-check" off-icon="pi pi-times"
+                    :on-label="t('off_text')" :off-label="t('on_text')" class="w-48" />
+                  <div v-if="curNetwork.enable_vpn_portal" class="items-center flex flex-row gap-x-4">
+                    <div class="min-w-64">
+                      <InputGroup>
+                        <InputText v-model="curNetwork.vpn_portal_client_network_addr"
+                          :placeholder="t('vpn_portal_client_network')" />
+                        <InputGroupAddon>
+                          <span>/{{ curNetwork.vpn_portal_client_network_len }}</span>
+                        </InputGroupAddon>
+                      </InputGroup>
+
+                      <InputNumber v-model="curNetwork.vpn_portal_listen_port" :allow-empty="false" :format="false"
+                        :min="0" :max="65535" class="w-8/12" fluid />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <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="searchListenerSuggestiong" />
+                </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">
+                <div class="flex flex-col gap-2 basis-5/12 grow">
+                  <label for="dev_name">{{ t('dev_name') }}</label>
+                  <InputText id="dev_name" v-model="curNetwork.dev_name" aria-describedby="dev_name-help" :format="true"
+                    :placeholder="t('dev_name_placeholder')" />
+                </div>
+              </div>
+            </div>
+          </Panel>
+
+          <div class="flex pt-6 justify-center">
+            <Button :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
+              @click="$emit('runNetwork', curNetwork)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/easytier-web/frontend-lib/src/components/Status.vue
+++ b/easytier-web/frontend-lib/src/components/Status.vue
@ -0,0 +1,429 @@
+<script setup lang="ts">
+import { useTimeAgo } from '@vueuse/core'
+import { IPv4 } from 'ip-num/IPNumber'
+import { NetworkInstance, type NodeInfo, type PeerRoutePair } from '../types/network'
+import { useI18n } from 'vue-i18n';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { num2ipv4, num2ipv6 } from '../modules/utils';
+import { DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
+
+const props = defineProps<{
+  curNetworkInst: NetworkInstance | null,
+}>()
+
+const { t } = useI18n()
+
+const peerRouteInfos = computed(() => {
+  if (props.curNetworkInst) {
+    const my_node_info = props.curNetworkInst.detail?.my_node_info
+    return [{
+      route: {
+        ipv4_addr: my_node_info?.virtual_ipv4,
+        hostname: my_node_info?.hostname,
+        version: my_node_info?.version,
+      },
+    }, ...(props.curNetworkInst.detail?.peer_route_pairs || [])]
+  }
+
+  return []
+})
+
+function routeCost(info: any) {
+  if (info.route) {
+    const cost = info.route.cost
+    return cost ? cost === 1 ? 'p2p' : `relay(${cost})` : t('status.local')
+  }
+
+  return '?'
+}
+
+function resolveObjPath(path: string, obj = globalThis, separator = '.') {
+  const properties = Array.isArray(path) ? path : path.split(separator)
+  return properties.reduce((prev, curr) => prev?.[curr], obj)
+}
+
+function statsCommon(info: any, field: string): number | undefined {
+  if (!info.peer)
+    return undefined
+
+  const conns = info.peer.conns
+  return conns.reduce((acc: number, conn: any) => {
+    return acc + resolveObjPath(field, conn)
+  }, 0)
+}
+
+function humanFileSize(bytes: number, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024
+
+  if (Math.abs(bytes) < thresh)
+    return `${bytes} B`
+
+  const units = si
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+  let u = -1
+  const r = 10 ** dp
+
+  do {
+    bytes /= thresh
+    ++u
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1)
+
+  return `${bytes.toFixed(dp)} ${units[u]}`
+}
+
+function latencyMs(info: PeerRoutePair) {
+  let lat_us_sum = statsCommon(info, 'stats.latency_us')
+  if (lat_us_sum === undefined)
+    return ''
+  lat_us_sum = lat_us_sum / 1000 / info.peer!.conns.length
+  return `${lat_us_sum % 1 > 0 ? Math.round(lat_us_sum) + 1 : Math.round(lat_us_sum)}ms`
+}
+
+function txBytes(info: PeerRoutePair) {
+  const tx = statsCommon(info, 'stats.tx_bytes')
+  return tx ? humanFileSize(tx) : ''
+}
+
+function rxBytes(info: PeerRoutePair) {
+  const rx = statsCommon(info, 'stats.rx_bytes')
+  return rx ? humanFileSize(rx) : ''
+}
+
+function lossRate(info: PeerRoutePair) {
+  const lossRate = statsCommon(info, 'loss_rate')
+  return lossRate !== undefined ? `${Math.round(lossRate * 100)}%` : ''
+}
+
+function version(info: PeerRoutePair) {
+  return info.route.version === '' ? 'unknown' : info.route.version
+}
+
+function ipFormat(info: PeerRoutePair) {
+  const ip = info.route.ipv4_addr
+  if (typeof ip === 'string')
+    return ip
+  return ip ? `${IPv4.fromNumber(ip.address.addr)}/${ip.network_length}` : ''
+}
+
+const myNodeInfo = computed(() => {
+  if (!props.curNetworkInst)
+    return {} as NodeInfo
+
+  return props.curNetworkInst.detail?.my_node_info
+})
+
+interface Chip {
+  label: string
+  icon: string
+}
+
+const myNodeInfoChips = computed(() => {
+  if (!props.curNetworkInst)
+    return []
+
+  const chips: Array<Chip> = []
+  const my_node_info = props.curNetworkInst.detail?.my_node_info
+  if (!my_node_info)
+    return chips
+
+  // TUN Device Name
+  const dev_name = props.curNetworkInst.detail?.dev_name
+  if (dev_name) {
+    chips.push({
+      label: `TUN Device Name: ${dev_name}`,
+      icon: '',
+    } as Chip)
+  }
+
+  // virtual ipv4
+  chips.push({
+    label: `Virtual IPv4: ${my_node_info.virtual_ipv4}`,
+    icon: '',
+  } as Chip)
+
+  // local ipv4s
+  const local_ipv4s = my_node_info.ips?.interface_ipv4s
+  for (const [idx, ip] of local_ipv4s?.entries()) {
+    chips.push({
+      label: `Local IPv4 ${idx}: ${num2ipv4(ip)}`,
+      icon: '',
+    } as Chip)
+  }
+
+  // local ipv6s
+  const local_ipv6s = my_node_info.ips?.interface_ipv6s
+  for (const [idx, ip] of local_ipv6s?.entries()) {
+    chips.push({
+      label: `Local IPv6 ${idx}: ${num2ipv6(ip)}`,
+      icon: '',
+    } as Chip)
+  }
+
+  // public ip
+  const public_ip = my_node_info.ips?.public_ipv4
+  if (public_ip) {
+    chips.push({
+      label: `Public IP: ${IPv4.fromNumber(public_ip.addr)}`,
+      icon: '',
+    } as Chip)
+  }
+
+  const public_ipv6 = my_node_info.ips?.public_ipv6
+  if (public_ipv6) {
+    chips.push({
+      label: `Public IPv6: ${num2ipv6(public_ipv6)}`,
+      icon: '',
+    } as Chip)
+  }
+
+  // listeners:
+  const listeners = my_node_info.listeners
+  for (const [idx, listener] of listeners?.entries()) {
+    chips.push({
+      label: `Listener ${idx}: ${listener}`,
+      icon: '',
+    } 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: '',
+    } as Chip)
+  }
+
+  return chips
+})
+
+function globalSumCommon(field: string) {
+  let sum = 0
+  if (!peerRouteInfos.value)
+    return sum
+
+  for (const info of peerRouteInfos.value) {
+    const tx = statsCommon(info, field)
+    if (tx)
+      sum += tx
+  }
+  return sum
+}
+
+function txGlobalSum() {
+  return globalSumCommon('stats.tx_bytes')
+}
+
+function rxGlobalSum() {
+  return globalSumCommon('stats.rx_bytes')
+}
+
+const peerCount = computed(() => {
+  if (!peerRouteInfos.value)
+    return 0
+
+  return peerRouteInfos.value.length
+})
+
+// calculate tx/rx rate every 2 seconds
+let rateIntervalId = 0
+const rateInterval = 2000
+let prevTxSum = 0
+let prevRxSum = 0
+const txRate = ref('0')
+const rxRate = ref('0')
+onMounted(() => {
+  rateIntervalId = window.setInterval(() => {
+    const curTxSum = txGlobalSum()
+    txRate.value = humanFileSize((curTxSum - prevTxSum) / (rateInterval / 1000))
+    prevTxSum = curTxSum
+
+    const curRxSum = rxGlobalSum()
+    rxRate.value = humanFileSize((curRxSum - prevRxSum) / (rateInterval / 1000))
+    prevRxSum = curRxSum
+  }, rateInterval)
+})
+
+onUnmounted(() => {
+  clearInterval(rateIntervalId)
+})
+
+const dialogVisible = ref(false)
+const dialogContent = ref<any>('')
+const dialogHeader = ref('event_log')
+
+function showVpnPortalConfig() {
+  const my_node_info = myNodeInfo.value
+  if (!my_node_info)
+    return
+
+  const url = 'https://www.wireguardconfig.com/qrcode'
+  dialogContent.value = `${my_node_info.vpn_portal_cfg}\n\n # can generate QR code: ${url}`
+  dialogHeader.value = 'vpn_portal_config'
+  dialogVisible.value = true
+}
+
+function showEventLogs() {
+  const detail = props.curNetworkInst?.detail
+  if (!detail)
+    return
+
+  dialogContent.value = detail.events
+  dialogHeader.value = 'event_log'
+  dialogVisible.value = true
+}
+</script>
+
+<template>
+  <div class="frontend-lib">
+    <Dialog v-model:visible="dialogVisible" modal :header="t(dialogHeader)" class="w-2/3 h-auto">
+      <ScrollPanel v-if="dialogHeader === 'vpn_portal_config'">
+        <pre>{{ dialogContent }}</pre>
+      </ScrollPanel>
+      <Timeline v-else :value="dialogContent">
+        <template #opposite="slotProps">
+          <small class="text-surface-500 dark:text-surface-400">{{ useTimeAgo(Date.parse(slotProps.item[0])) }}</small>
+        </template>
+        <template #content="slotProps">
+          <HumanEvent :event="slotProps.item[1]" />
+        </template>
+      </Timeline>
+    </Dialog>
+
+    <Card v-if="curNetworkInst?.error_msg">
+      <template #title>
+        Run Network Error
+      </template>
+      <template #content>
+        <div class="flex flex-col gap-y-5">
+          <div class="text-red-500">
+            {{ curNetworkInst.error_msg }}
+          </div>
+        </div>
+      </template>
+    </Card>
+
+    <template v-else>
+      <Card>
+        <template #title>
+          {{ t('my_node_info') }}
+        </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>
+              </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>
+              </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">
+              <Chip v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
+                class="mr-2 mt-2 text-sm" />
+            </div>
+
+            <div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
+              <Button severity="info" :label="t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
+              <Button severity="info" :label="t('show_event_log')" @click="showEventLogs" />
+            </div>
+          </div>
+        </template>
+      </Card>
+
+      <Divider />
+
+      <Card>
+        <template #title>
+          {{ t('peer_info') }}
+        </template>
+        <template #content>
+          <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-class="w-full">
+            <Column :field="ipFormat" :header="t('virtual_ipv4')" />
+            <Column :header="t('hostname')">
+              <template #body="slotProps">
+                <div v-if="!slotProps.data.route.cost || !slotProps.data.route.feature_flag.is_public_server"
+                  v-tooltip="slotProps.data.route.hostname">
+                  {{
+                    slotProps.data.route.hostname }}
+                </div>
+                <div v-else v-tooltip="slotProps.data.route.hostname" class="space-x-1">
+                  <Tag v-if="slotProps.data.route.feature_flag.is_public_server" severity="info" value="Info">
+                    {{ t('status.server') }}
+                  </Tag>
+                  <Tag v-if="slotProps.data.route.no_relay_data" severity="warn" value="Warn">
+                    {{ t('status.relay') }}
+                  </Tag>
+                </div>
+              </template>
+            </Column>
+            <Column :field="routeCost" :header="t('route_cost')" />
+            <Column :field="latencyMs" :header="t('latency')" />
+            <Column :field="txBytes" :header="t('upload_bytes')" />
+            <Column :field="rxBytes" :header="t('download_bytes')" />
+            <Column :field="lossRate" :header="t('loss_rate')" />
+            <Column :header="t('status.version')">
+              <template #body="slotProps">
+                <span>{{ version(slotProps.data) }}</span>
+              </template>
+            </Column>
+          </DataTable>
+        </template>
+      </Card>
+    </template>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.p-timeline :deep(.p-timeline-event-opposite) {
+  @apply flex-none;
+}
+</style>
--- a/easytier-web/frontend-lib/src/components/index.ts
+++ b/easytier-web/frontend-lib/src/components/index.ts
@ -0,0 +1,2 @@
+export { default as Config } from './Config.vue';
+export { default as Status } from './Status.vue';
--- a/easytier-web/frontend-lib/src/easytier-frontend-lib.ts
+++ b/easytier-web/frontend-lib/src/easytier-frontend-lib.ts
@ -0,0 +1,33 @@
+import './style.css'
+
+import type { App } from 'vue';
+import { Config, Status } from "./components";
+import Aura from '@primevue/themes/aura'
+import PrimeVue from 'primevue/config'
+
+import I18nUtils from './modules/i18n'
+import * as NetworkTypes from './types/network'
+
+export default {
+    install: (app: App) => {
+        app.use(I18nUtils.i18n, { useScope: 'global' })
+        app.use(PrimeVue, {
+            theme: {
+                preset: Aura,
+                options: {
+                    prefix: 'p',
+                    darkModeSelector: 'system',
+                    cssLayer: {
+                        name: 'primevue',
+                        order: 'tailwind-base, primevue, tailwind-utilities'
+                    }
+                },
+            },
+        });
+
+        app.component('Config', Config);
+        app.component('Status', Status);
+    }
+};
+
+export { Config, Status, I18nUtils, NetworkTypes };
--- a/easytier-web/frontend-lib/src/locales/cn.yaml
+++ b/easytier-web/frontend-lib/src/locales/cn.yaml
@ -0,0 +1,115 @@
+network: 网络
+networking_method: 网络方式
+public_server: 公共服务器
+manual: 手动
+standalone: 独立
+virtual_ipv4: 虚拟IPv4地址
+virtual_ipv4_dhcp: DHCP
+network_name: 网络名称
+network_secret: 网络密码
+public_server_url: 公共服务器地址
+peer_urls: 对等节点地址
+proxy_cidrs: 子网代理CIDR
+enable_vpn_portal: 启用VPN门户
+vpn_portal_listen_port: 监听端口
+vpn_portal_client_network: 客户端子网
+dev_name: TUN接口名称
+advanced_settings: 高级设置
+basic_settings: 基础设置
+listener_urls: 监听地址
+rpc_port: RPC端口
+config_network: 配置网络
+running: 运行中
+error_msg: 错误信息
+detail: 详情
+add_new_network: 添加新网络
+del_cur_network: 删除当前网络
+select_network: 选择网络
+network_instances: 网络实例
+instance_id: 实例ID
+network_infos: 网络信息
+parse_network_config: 解析网络配置
+retain_network_instance: 保留网络实例
+collect_network_infos: 收集网络信息
+settings: 设置
+exchange_language: Switch to English
+logging: 日志
+logging_level_info: 信息
+logging_level_debug: 调试
+logging_level_warn: 警告
+logging_level_trace: 跟踪
+logging_level_off: 关闭
+logging_open_dir: 打开日志目录
+logging_copy_dir: 复制日志路径
+disable_auto_launch: 关闭开机自启
+enable_auto_launch: 开启开机自启
+exit: 退出
+chips_placeholder: 例如： {0}, 按回车添加
+hostname_placeholder: '留空默认为主机名: {0}'
+dev_name_placeholder: 注意：当多个网络同时使用相同的TUN接口名称时，将会在设置TUN的IP时产生冲突，留空以自动生成随机名称
+off_text: 点击关闭
+on_text: 点击开启
+show_config: 显示配置
+close: 关闭
+
+use_latency_first: 延迟优先模式
+my_node_info: 当前节点信息
+peer_count: 已连接
+upload: 上传
+download: 下载
+show_vpn_portal_config: 显示VPN门户配置
+vpn_portal_config: VPN门户配置
+show_event_log: 显示事件日志
+event_log: 事件日志
+peer_info: 节点信息
+hostname: 主机名
+route_cost: 路由
+latency: 延迟
+upload_bytes: 上传
+download_bytes: 下载
+loss_rate: 丢包率
+
+status:
+  version: 内核版本
+  local: 本机
+  server: 服务器
+  relay: 中继
+
+run_network: 运行网络
+stop_network: 停止网络
+network_running: 运行中
+network_stopped: 已停止
+dhcp_experimental_warning: 实验性警告！使用DHCP时如果组网环境中发生IP冲突，将自动更改IP。
+
+tray:
+  show: 显示 / 隐藏
+  exit: 退出
+
+about:
+  title: 关于
+  version: 版本
+  author: 作者
+  homepage: 主页
+  license: 许可证
+  description: 一个简单、安全、去中心化的内网穿透 VPN 组网方案，使用 Rust 语言和 Tokio 框架实现。
+  check_update: 检查更新
+
+event:
+  Unknown: 未知
+  TunDeviceReady: Tun设备就绪
+  TunDeviceError: Tun设备错误
+  PeerAdded: 对端添加
+  PeerRemoved: 对端移除
+  PeerConnAdded: 对端连接添加
+  PeerConnRemoved: 对端连接移除
+  ListenerAdded: 监听器添加
+  ListenerAddFailed: 监听器添加失败
+  ListenerAcceptFailed: 监听器接受连接失败
+  ConnectionAccepted: 连接已接受
+  ConnectionError: 连接错误
+  Connecting: 正在连接
+  ConnectError: 连接错误
+  VpnPortalClientConnected: VPN门户客户端已连接
+  VpnPortalClientDisconnected: VPN门户客户端已断开连接
+  DhcpIpv4Changed: DHCP IPv4地址更改
+  DhcpIpv4Conflicted: DHCP IPv4地址冲突
--- a/easytier-web/frontend-lib/src/locales/en.yaml
+++ b/easytier-web/frontend-lib/src/locales/en.yaml
@ -0,0 +1,114 @@
+network: Network
+networking_method: Networking Method
+public_server: Public Server
+manual: Manual
+standalone: Standalone
+virtual_ipv4: Virtual IPv4
+virtual_ipv4_dhcp: DHCP
+network_name: Network Name
+network_secret: Network Secret
+public_server_url: Public Server URL
+peer_urls: Peer URLs
+proxy_cidrs: Subnet Proxy CIDRs
+enable_vpn_portal: Enable VPN Portal
+vpn_portal_listen_port: VPN Portal Listen Port
+vpn_portal_client_network: Client Sub Network
+dev_name: TUN interface name
+advanced_settings: Advanced Settings
+basic_settings: Basic Settings
+listener_urls: Listener URLs
+rpc_port: RPC Port
+config_network: Config Network
+running: Running
+error_msg: Error Message
+detail: Detail
+add_new_network: New Network
+del_cur_network: Delete Current Network
+select_network: Select Network
+network_instances: Network Instances
+instance_id: Instance ID
+network_infos: Network Infos
+parse_network_config: Parse Network Config
+retain_network_instance: Retain Network Instance
+collect_network_infos: Collect Network Infos
+settings: Settings
+exchange_language: 切换中文
+logging: Logging
+logging_level_info: Info
+logging_level_debug: Debug
+logging_level_warn: Warn
+logging_level_trace: Trace
+logging_level_off: Off
+logging_open_dir: Open Log Directory
+logging_copy_dir: Copy Log Path
+disable_auto_launch: Disable Launch on Reboot
+enable_auto_launch: Enable Launch on Reboot
+exit: Exit
+use_latency_first: Latency First Mode
+chips_placeholder: 'e.g: {0}, press Enter to add'
+hostname_placeholder: 'Leave blank and default to host name: {0}'
+dev_name_placeholder: 'Note: When multiple networks use the same TUN interface name at the same time, there will be a conflict when setting the TUN''s IP. Leave blank to automatically generate a random name.'
+off_text: Press to disable
+on_text: Press to enable
+show_config: Show Config
+close: Close
+my_node_info: My Node Info
+peer_count: Connected
+upload: Upload
+download: Download
+show_vpn_portal_config: Show VPN Portal Config
+vpn_portal_config: VPN Portal Config
+show_event_log: Show Event Log
+event_log: Event Log
+peer_info: Peer Info
+route_cost: Route Cost
+hostname: Hostname
+latency: Latency
+upload_bytes: Upload
+download_bytes: Download
+loss_rate: Loss Rate
+
+status:
+  version: Version
+  local: Local
+  server: Server
+  relay: Relay
+
+run_network: Run Network
+stop_network: Stop Network
+network_running: running
+network_stopped: stopped
+dhcp_experimental_warning: Experimental warning! if there is an IP conflict in the network when using DHCP, the IP will be automatically changed.
+
+tray:
+  show: Show / Hide
+  exit: Exit
+
+about:
+  title: About
+  version: Version
+  author: Author
+  homepage: Homepage
+  license: License
+  description: 'EasyTier is a simple, safe and decentralized VPN networking solution implemented with the Rust language and Tokio framework.'
+  check_update: Check Update
+
+event:
+  Unknown: Unknown
+  TunDeviceReady: TunDeviceReady
+  TunDeviceError: TunDeviceError
+  PeerAdded: PeerAdded
+  PeerRemoved: PeerRemoved
+  PeerConnAdded: PeerConnAdded
+  PeerConnRemoved: PeerConnRemoved
+  ListenerAdded: ListenerAdded
+  ListenerAddFailed: ListenerAddFailed
+  ListenerAcceptFailed: ListenerAcceptFailed
+  ConnectionAccepted: ConnectionAccepted
+  ConnectionError: ConnectionError
+  Connecting: Connecting
+  ConnectError: ConnectError
+  VpnPortalClientConnected: VpnPortalClientConnected
+  VpnPortalClientDisconnected: VpnPortalClientDisconnected
+  DhcpIpv4Changed: DhcpIpv4Changed
+  DhcpIpv4Conflicted: DhcpIpv4Conflicted
--- a/easytier-web/frontend-lib/src/modules/i18n.ts
+++ b/easytier-web/frontend-lib/src/modules/i18n.ts
@ -0,0 +1,59 @@
+import { createI18n } from 'vue-i18n'
+import type { Locale } from 'vue-i18n'
+
+import EnLocale from '../locales/en.yaml'
+import CnLocale from '../locales/cn.yaml'
+
+// Import i18n resources
+// https://vitejs.dev/guide/features.html#glob-import
+export const i18n = createI18n({
+  legacy: false,
+  locale: '',
+  fallbackLocale: '',
+  messages: {},
+})
+
+const localesMap = {
+  "en": EnLocale,
+  "cn": CnLocale,
+} as Record<string, any>
+
+export const availableLocales = Object.keys(localesMap)
+
+const loadedLanguages: string[] = []
+
+function setI18nLanguage(lang: Locale) {
+  i18n.global.locale.value = lang as any
+  localStorage.setItem('lang', lang)
+  return lang
+}
+
+export async function loadLanguageAsync(lang: string): Promise<Locale> {
+  // If the same language
+  if (i18n.global.locale.value === lang)
+    return setI18nLanguage(lang)
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang))
+    return setI18nLanguage(lang)
+
+  // If the language hasn't been loaded yet
+  let messages
+
+  try {
+    messages = localesMap[lang]
+  }
+  catch {
+    messages = localesMap.en
+  }
+
+  i18n.global.setLocaleMessage(lang, messages)
+  loadedLanguages.push(lang)
+  return setI18nLanguage(lang)
+}
+
+export default {
+  i18n,
+  localesMap,
+  loadLanguageAsync,
+}
--- a/easytier-web/frontend-lib/src/modules/utils.ts
+++ b/easytier-web/frontend-lib/src/modules/utils.ts
@ -0,0 +1,15 @@
+import { IPv4, IPv6 } from 'ip-num/IPNumber'
+import { Ipv4Addr, Ipv6Addr } from '../types/network'
+
+export function num2ipv4(ip: Ipv4Addr) {
+    return IPv4.fromNumber(ip.addr)
+}
+
+export function num2ipv6(ip: Ipv6Addr) {
+    return IPv6.fromBigInt(
+        (BigInt(ip.part1) << BigInt(96))
+        + (BigInt(ip.part2) << BigInt(64))
+        + (BigInt(ip.part3) << BigInt(32))
+        + BigInt(ip.part4),
+    )
+}
--- a/easytier-web/frontend-lib/src/style.css
+++ b/easytier-web/frontend-lib/src/style.css
@ -0,0 +1,53 @@
+@import 'primeicons/primeicons.css';
+
+.frontend-lib {
+
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+.card {
+  background: var(--surface-card);
+  padding: 2rem;
+  border-radius: 10px;
+  margin-bottom: 1rem;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #0000005d;
+}
+
+}
--- a/easytier-web/frontend-lib/src/types/network.ts
+++ b/easytier-web/frontend-lib/src/types/network.ts
@ -0,0 +1,213 @@
+import { v4 as uuidv4 } from 'uuid'
+
+export enum NetworkingMethod {
+  PublicServer = 0,
+  Manual = 1,
+  Standalone = 2,
+}
+
+export interface NetworkConfig {
+  instance_id: string
+
+  dhcp: boolean
+  virtual_ipv4: string
+  network_length: number
+  hostname?: string
+  network_name: string
+  network_secret: string
+
+  networking_method: NetworkingMethod
+
+  public_server_url: string
+  peer_urls: string[]
+
+  proxy_cidrs: string[]
+
+  enable_vpn_portal: boolean
+  vpn_portal_listen_port: number
+  vpn_portal_client_network_addr: string
+  vpn_portal_client_network_len: number
+
+  advanced_settings: boolean
+
+  listener_urls: string[]
+  rpc_port: number
+  latency_first: boolean
+
+  dev_name: string
+}
+
+export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
+  return {
+    instance_id: uuidv4(),
+
+    dhcp: true,
+    virtual_ipv4: '',
+    network_length: 24,
+    network_name: 'easytier',
+    network_secret: '',
+
+    networking_method: NetworkingMethod.PublicServer,
+
+    public_server_url: 'tcp://public.easytier.top:11010',
+    peer_urls: [],
+
+    proxy_cidrs: [],
+
+    enable_vpn_portal: false,
+    vpn_portal_listen_port: 22022,
+    vpn_portal_client_network_addr: '',
+    vpn_portal_client_network_len: 24,
+
+    advanced_settings: false,
+
+    listener_urls: [
+      'tcp://0.0.0.0:11010',
+      'udp://0.0.0.0:11010',
+      'wg://0.0.0.0:11011',
+    ],
+    rpc_port: 0,
+    latency_first: true,
+    dev_name: '',
+  }
+}
+
+export interface NetworkInstance {
+  instance_id: string
+
+  running: boolean
+  error_msg: string
+
+  detail?: NetworkInstanceRunningInfo
+}
+
+export interface NetworkInstanceRunningInfo {
+  dev_name: string
+  my_node_info: NodeInfo
+  events: Record<string, any>
+  node_info: NodeInfo
+  routes: Route[]
+  peers: PeerInfo[]
+  peer_route_pairs: PeerRoutePair[]
+  running: boolean
+  error_msg?: string
+}
+
+export interface Ipv4Addr {
+  addr: number
+}
+
+export interface Ipv6Addr {
+  part1: number
+  part2: number
+  part3: number
+  part4: number
+}
+
+export interface NodeInfo {
+  virtual_ipv4: string
+  hostname: string
+  version: string
+  ips: {
+    public_ipv4: Ipv4Addr
+    interface_ipv4s: Ipv4Addr[]
+    public_ipv6: Ipv6Addr
+    interface_ipv6s: Ipv6Addr[]
+    listeners: {
+      serialization: string
+      scheme_end: number
+      username_end: number
+      host_start: number
+      host_end: number
+      host: any
+      port?: number
+      path_start: number
+      query_start?: number
+      fragment_start?: number
+    }[]
+  }
+  stun_info: StunInfo
+  listeners: string[]
+  vpn_portal_cfg?: string
+}
+
+export interface StunInfo {
+  udp_nat_type: number
+  tcp_nat_type: number
+  last_update_time: number
+}
+
+export interface Route {
+  peer_id: number
+  ipv4_addr: {
+    address: Ipv4Addr
+    network_length: number
+  } | string | null
+  next_hop_peer_id: number
+  cost: number
+  proxy_cidrs: string[]
+  hostname: string
+  stun_info?: StunInfo
+  inst_id: string
+  version: string
+}
+
+export interface PeerInfo {
+  peer_id: number
+  conns: PeerConnInfo[]
+}
+
+export interface PeerConnInfo {
+  conn_id: string
+  my_peer_id: number
+  is_client: boolean
+  peer_id: number
+  features: string[]
+  tunnel?: TunnelInfo
+  stats?: PeerConnStats
+  loss_rate: number
+}
+
+export interface PeerRoutePair {
+  route: Route
+  peer?: PeerInfo
+}
+
+export interface TunnelInfo {
+  tunnel_type: string
+  local_addr: string
+  remote_addr: string
+}
+
+export interface PeerConnStats {
+  rx_bytes: number
+  tx_bytes: number
+  rx_packets: number
+  tx_packets: number
+  latency_us: number
+}
+
+export enum EventType {
+  TunDeviceReady = 'TunDeviceReady', // string
+  TunDeviceError = 'TunDeviceError', // string
+
+  PeerAdded = 'PeerAdded', // number
+  PeerRemoved = 'PeerRemoved', // number
+  PeerConnAdded = 'PeerConnAdded', // PeerConnInfo
+  PeerConnRemoved = 'PeerConnRemoved', // PeerConnInfo
+
+  ListenerAdded = 'ListenerAdded', // any
+  ListenerAddFailed = 'ListenerAddFailed', // any, string
+  ListenerAcceptFailed = 'ListenerAcceptFailed', // any, string
+  ConnectionAccepted = 'ConnectionAccepted', // string, string
+  ConnectionError = 'ConnectionError', // string, string, string
+
+  Connecting = 'Connecting', // any
+  ConnectError = 'ConnectError', // string, string, string
+
+  VpnPortalClientConnected = 'VpnPortalClientConnected', // string, string
+  VpnPortalClientDisconnected = 'VpnPortalClientDisconnected', // string, string, string
+
+  DhcpIpv4Changed = 'DhcpIpv4Changed', // ipv4 | null, ipv4 | null
+  DhcpIpv4Conflicted = 'DhcpIpv4Conflicted', // ipv4 | null
+}
--- a/easytier-web/frontend-lib/src/vite-env.d.ts
+++ b/easytier-web/frontend-lib/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/easytier-web/frontend-lib/tailwind.config.js
+++ b/easytier-web/frontend-lib/tailwind.config.js
@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('tailwindcss-primeui')],
+}
--- a/easytier-web/frontend-lib/tsconfig.app.json
+++ b/easytier-web/frontend-lib/tsconfig.app.json
@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    "allowSyntheticDefaultImports": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "types": [
+      "@modyfi/vite-plugin-yaml/modules"
+    ],
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/easytier-web/frontend-lib/tsconfig.json
+++ b/easytier-web/frontend-lib/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/easytier-web/frontend-lib/tsconfig.node.json
+++ b/easytier-web/frontend-lib/tsconfig.node.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/easytier-web/frontend-lib/vite.config.ts
+++ b/easytier-web/frontend-lib/vite.config.ts
@ -0,0 +1,38 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from "vite-plugin-dts"
+import ViteYaml from '@modyfi/vite-plugin-yaml';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), dts({
+    tsconfigPath: './tsconfig.app.json',
+  }), ViteYaml()],
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'easytier-frontend-lib',
+      // the proper extensions will be added
+      fileName: 'easytier-frontend-lib',
+      formats: ["es", "umd", "cjs"],
+    },
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "src/easytier-frontend-lib.ts")
+      },
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+        exports: "named"
+      },
+    },
+  },
+})
--- a/easytier-web/frontend/.gitignore
+++ b/easytier-web/frontend/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/easytier-web/frontend/README.md
+++ b/easytier-web/frontend/README.md
@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/easytier-web/frontend/index.html
+++ b/easytier-web/frontend/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/easytier-web/frontend/package.json
+++ b/easytier-web/frontend/package.json
@ -0,0 +1,31 @@
+{
+  "name": "easytier-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@primevue/themes": "^4.2.1",
+    "aura": "link:@primevue/themes/aura",
+    "axios": "^1.7.7",
+    "easytier-frontend-lib": "workspace:*",
+    "primevue": "^4.2.1",
+    "tailwindcss-primeui": "^0.3.4",
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@types/node": "^22.8.6",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
+    "vite-plugin-singlefile": "^2.0.3",
+    "vue-tsc": "^2.1.8"
+  }
+}
--- a/easytier-web/frontend/postcss.config.js
+++ b/easytier-web/frontend/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}
--- a/easytier-web/frontend/public/vite.svg
+++ b/easytier-web/frontend/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/easytier-web/frontend/src/App.vue
+++ b/easytier-web/frontend/src/App.vue
@ -0,0 +1,131 @@
+<script setup lang="ts">
+
+import { I18nUtils } from 'easytier-frontend-lib'
+import { onMounted } from 'vue';
+import Login from './components/Login.vue'
+import { Button } from 'primevue';
+import ApiClient from './modules/api';
+import DeviceList from './components/DeviceList.vue';
+
+const api = new ApiClient('http://10.147.223.128:11211/api/v1/'); // Replace with actual API URL
+
+onMounted(async () => {
+  await I18nUtils.loadLanguageAsync('cn')
+});
+
+</script>
+
+<!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar -->
+
+<template>
+  <div id="root" class="">
+    <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+      <div class="px-3 py-3 lg:px-5 lg:pl-3">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center justify-start rtl:justify-end">
+            <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar"
+              type="button"
+              class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+              <span class="sr-only">Open sidebar</span>
+              <i class="pi pi-list" style="font-size: 1.3rem"></i>
+            </button>
+            <a href="https://flowbite.com" class="flex ms-2 md:me-24">
+              <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
+              <span
+                class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">EasyTier</span>
+            </a>
+          </div>
+          <div class="flex items-center">
+            <div class="flex items-center ms-3">
+              <div>
+                <button type="button"
+                  class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+                  aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                  <span class="sr-only">Open user menu</span>
+                  <img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+                    alt="user photo">
+                </button>
+              </div>
+              <div
+                class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
+                id="dropdown-user">
+                <div class="px-4 py-3" role="none">
+                  <p class="text-sm text-gray-900 dark:text-white" role="none">
+                    Neil Sims
+                  </p>
+                  <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
+                    neil.sims@flowbite.com
+                  </p>
+                </div>
+                <ul class="py-1" role="none">
+                  <li>
+                    <a href="#"
+                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                      role="menuitem">Dashboard</a>
+                  </li>
+                  <li>
+                    <a href="#"
+                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                      role="menuitem">Settings</a>
+                  </li>
+                  <li>
+                    <a href="#"
+                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                      role="menuitem">Earnings</a>
+                  </li>
+                  <li>
+                    <a href="#"
+                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                      role="menuitem">Sign out</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <aside id="logo-sidebar"
+      class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+      aria-label="Sidebar">
+      <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+        <ul class="space-y-2 font-medium">
+          <li>
+            <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5" severity="contrast">
+              <i class="pi pi-chart-pie" style="font-size: 1.2rem"></i>
+              <span class="mb-0.5">DashBoard</span>
+            </Button>
+          </li>
+          <li>
+            <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5" severity="contrast">
+              <i class="pi pi-server" style="font-size: 1.2rem"></i>
+              <span class="mb-0.5">Devices</span>
+            </Button>
+          </li>
+        </ul>
+      </div>
+    </aside>
+
+    <div class="p-4 sm:ml-64">
+      <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
+        <div class="grid grid-cols-1 gap-4 mb-4">
+          <DeviceList :api="api"></DeviceList>
+        </div>
+        <div class="grid grid-cols-1 gap-4 mb-4">
+          <Login :api="api"></Login>
+        </div>
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+
+<style scoped>
+button {
+  text-align: left;
+  justify-content: left;
+}
+</style>
--- a/easytier-web/frontend/src/assets/vue.svg
+++ b/easytier-web/frontend/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/easytier-web/frontend/src/components/DeviceList.vue
+++ b/easytier-web/frontend/src/components/DeviceList.vue
@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import ApiClient, { ValidateConfigResponse } from '../modules/api';
+import { Config, Status, NetworkTypes } from 'easytier-frontend-lib'
+import { Button, Column, DataTable, Drawer, Toolbar, IftaLabel, Select, Dialog, ConfirmPopup, useConfirm } from 'primevue';
+
+function toHexString(uint64: bigint, padding = 9): string {
+    let hexString = uint64.toString(16);
+    while (hexString.length < padding) {
+        hexString = '0' + hexString;
+    }
+    return hexString;
+}
+
+function uint32ToUuid(part1: number, part2: number, part3: number, part4: number): string {
+    // 将两个 uint64 转换为 16 进制字符串
+    const part1Hex = toHexString(BigInt(part1), 8);
+    const part2Hex = toHexString(BigInt(part2), 8);
+    const part3Hex = toHexString(BigInt(part3), 8);
+    const part4Hex = toHexString(BigInt(part4), 8);
+
+    // 构造 UUID 格式字符串
+    const uuid = `${part1Hex.substring(0, 8)}-${part2Hex.substring(0, 4)}-${part2Hex.substring(4, 8)}-${part3Hex.substring(0, 4)}-${part3Hex.substring(4, 8)}${part4Hex.substring(0, 12)}`;
+
+    return uuid;
+}
+
+interface UUID {
+    part1: number;
+    part2: number;
+    part3: number;
+    part4: number;
+}
+
+function UuidToStr(uuid: UUID): string {
+    return uint32ToUuid(uuid.part1, uuid.part2, uuid.part3, uuid.part4);
+}
+
+const props = defineProps({
+    api: ApiClient,
+});
+
+const api = props.api;
+
+interface DeviceList {
+    hostname: string;
+    public_ip: string;
+    running_network_count: number;
+    report_time: string;
+    easytier_version: string;
+    running_network_instances?: Array<string>;
+    machine_id: string;
+}
+
+const selectedDevice = ref<DeviceList | null>(null);
+const deviceList = ref<Array<DeviceList>>([]);
+const instanceIdList = computed(() => {
+    let insts = selectedDevice.value?.running_network_instances || [];
+    let options = insts.map((instance: string) => {
+        return { uuid: instance };
+    });
+    console.log("options", options);
+    return options;
+});
+const selectedInstanceId = ref<any | null>(null);
+const curNetworkInfo = ref<NetworkTypes.NetworkInstance | null>(null);
+
+const loadDevices = async () => {
+    const resp = await api?.list_machines();
+    console.log(resp);
+    let devices: Array<DeviceList> = [];
+    for (const device of (resp || [])) {
+        devices.push({
+            hostname: device.info?.hostname,
+            public_ip: device.client_url,
+            running_network_instances: device.info?.running_network_instances.map((instance: any) => UuidToStr(instance)),
+            running_network_count: device.info?.running_network_instances.length,
+            report_time: device.info?.report_time,
+            easytier_version: device.info?.easytier_version,
+            machine_id: UuidToStr(device.info?.machine_id),
+        });
+    }
+    deviceList.value = devices;
+    console.log(deviceList.value);
+};
+
+interface SelectedDevice {
+    machine_id: string;
+    instance_id: string;
+}
+
+const checkDeviceSelected = (): SelectedDevice => {
+    let machine_id = selectedDevice.value?.machine_id;
+    let inst_id = selectedInstanceId.value?.uuid;
+    if (machine_id && inst_id) {
+        return { machine_id, instance_id: inst_id };
+    } else {
+        throw new Error("No device selected");
+    }
+}
+
+const loadDeviceInfo = async () => {
+    let selectedDevice = checkDeviceSelected();
+    if (!selectedDevice) {
+        return;
+    }
+
+    let ret = await api?.get_network_info(selectedDevice.machine_id, selectedDevice.instance_id);
+    let device_info = ret[selectedDevice.instance_id]
+
+    curNetworkInfo.value = {
+        instance_id: selectedDevice.instance_id,
+        running: device_info.running,
+        error_msg: device_info.error_msg,
+        detail: device_info,
+    } as NetworkTypes.NetworkInstance;
+}
+
+onMounted(async () => {
+    setInterval(loadDevices, 1000);
+    setInterval(loadDeviceInfo, 1000);
+});
+
+const visibleRight = ref(false);
+
+const showCreateNetworkDialog = ref(false);
+const newNetworkConfig = ref<NetworkTypes.NetworkConfig>(NetworkTypes.DEFAULT_NETWORK_CONFIG());
+
+const verifyNetworkConfig = async (): Promise<ValidateConfigResponse | undefined> => {
+    let machine_id = selectedDevice.value?.machine_id;
+    if (!machine_id) {
+        throw new Error("No machine selected");
+    }
+
+    if (!newNetworkConfig.value) {
+        throw new Error("No network config");
+    }
+
+    let ret = await api?.validate_config(machine_id, newNetworkConfig.value);
+    console.log("verifyNetworkConfig", ret);
+    return ret;
+}
+
+const createNewNetwork = async () => {
+    let config = await verifyNetworkConfig();
+    if (!config) {
+        return;
+    }
+
+    let machine_id = selectedDevice.value?.machine_id;
+    if (!machine_id) {
+        throw new Error("No machine selected");
+    }
+
+    let ret = await api?.run_network(machine_id, config?.toml_config);
+    console.log("createNewNetwork", ret);
+    showCreateNetworkDialog.value = false;
+    await loadDevices();
+}
+
+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 () => {
+            const ret = checkDeviceSelected();
+            await api?.delete_network(ret?.machine_id, ret?.instance_id);
+            await loadDevices();
+        },
+        reject: () => {
+            return;
+        }
+    });
+};
+
+</script>
+
+<style scoped></style>
+
+<template>
+    <ConfirmPopup></ConfirmPopup>
+    <Dialog v-model:visible="showCreateNetworkDialog" modal header="Create New Network" :style="{ width: '55rem' }">
+        <Config :cur-network="newNetworkConfig" @run-network="createNewNetwork"></Config>
+    </Dialog>
+
+    <DataTable :value="deviceList" tableStyle="min-width: 50rem" :metaKeySelection="true" sortField="hostname"
+        :sortOrder="-1">
+        <template #header>
+            <div class="text-xl font-bold">Device List</div>
+        </template>
+        <Column field="hostname" header="Hostname" sortable style="width: 180px"></Column>
+        <Column field="public_ip" header="Public IP" style="width: 150px"></Column>
+        <Column field="running_network_count" header="Running Network Count" sortable style="width: 150px"></Column>
+        <Column field="report_time" header="Report Time" sortable style="width: 150px"></Column>
+        <Column field="easytier_version" header="EasyTier Version" sortable style="width: 150px"></Column>
+        <Column class="w-24 !text-end">
+            <template #body="{ data }">
+                <Button icon="pi pi-search" @click="selectedDevice = data; visibleRight = true" severity="secondary"
+                    rounded></Button>
+            </template>
+        </Column>
+        <template #footer>
+            <div class="flex justify-start">
+                <Button icon="pi pi-refresh" label="Reload" severity="info" @click="loadDevices" />
+            </div>
+        </template>
+    </DataTable>
+
+    <Drawer v-model:visible="visibleRight" header="Device Management" position="right" class="w-1/2 min-w-96">
+        <Toolbar>
+            <template #start>
+                <IftaLabel>
+                    <Select v-model="selectedInstanceId" :options="instanceIdList" optionLabel="uuid"
+                        inputId="dd-inst-id" placeholder="Select Instance" />
+                    <label class="mr-3" for="dd-inst-id">Network</label>
+                </IftaLabel>
+            </template>
+
+            <template #end>
+                <div class="gap-x-3 flex">
+                    <Button @click="confirmDeleteNetwork($event)" icon="pi pi-minus" severity="danger" label="Delete"
+                        iconPos="right" />
+                    <Button @click="showCreateNetworkDialog = true" icon="pi pi-plus" label="Create" iconPos="right" />
+                </div>
+            </template>
+        </Toolbar>
+
+        <Status v-bind:cur-network-inst="curNetworkInfo">
+
+        </Status>
+    </Drawer>
+</template>
--- a/easytier-web/frontend/src/components/Login.vue
+++ b/easytier-web/frontend/src/components/Login.vue
@ -0,0 +1,93 @@
+<template>
+    <div class="flex items-center justify-center min-h-screen">
+        <Card class="w-full max-w-md p-6">
+            <template #header>
+                <h2 class="text-2xl font-semibold text-center">{{ isRegistering ? 'Register' : 'Login' }}
+                </h2>
+            </template>
+            <template #content>
+                <form v-if="!isRegistering" @submit.prevent="onSubmit" class="space-y-4">
+                    <div class="p-field">
+                        <label for="username" class="block text-sm font-medium">Username</label>
+                        <InputText id="username" v-model="username" required class="w-full" />
+                    </div>
+                    <div class="p-field">
+                        <label for="password" class="block text-sm font-medium">Password</label>
+                        <Password id="password" v-model="password" required toggleMask />
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <Button label="Login" type="submit" class="w-full" />
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <Button label="Register" type="button" class="w-full" @click="isRegistering = true"
+                            severity="secondary" />
+                    </div>
+                </form>
+
+                <form v-else @submit.prevent="onRegister" class="space-y-4">
+                    <div class="p-field">
+                        <label for="register-username" class="block text-sm font-medium">Username</label>
+                        <InputText id="register-username" v-model="registerUsername" required class="w-full" />
+                    </div>
+                    <div class="p-field">
+                        <label for="register-password" class="block text-sm font-medium">Password</label>
+                        <Password id="register-password" v-model="registerPassword" required toggleMask
+                            class="w-full" />
+                    </div>
+                    <div class="p-field">
+                        <label for="captcha" class="block text-sm font-medium">Captcha</label>
+                        <InputText id="captcha" v-model="captcha" required class="w-full" />
+                        <img :src="captchaSrc" alt="Captcha" class="mt-2 mb-2" />
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <Button label="Register" type="submit" class="w-full" />
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <Button label="Back to Login" type="button" class="w-full" @click="isRegistering = false"
+                            severity="secondary" />
+                    </div>
+                </form>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Card, InputText, Password, Button } from 'primevue';
+import ApiClient from '../modules/api';
+import { Credential } from '../modules/api';
+
+const props = defineProps({
+    api: ApiClient,
+});
+
+const api = props.api;
+
+const username = ref('');
+const password = ref('');
+const registerUsername = ref('');
+const registerPassword = ref('');
+const captcha = ref('');
+const captchaSrc = computed(() => api?.captcha_url());
+const isRegistering = ref(false);
+
+
+const onSubmit = async () => {
+    console.log('Username:', username.value);
+    console.log('Password:', password.value);
+    // Add your login logic here
+    const credential: Credential = { username: username.value, password: password.value, };
+    const ret = await api?.login(credential);
+    alert(ret?.message);
+};
+
+const onRegister = () => {
+    console.log('Register Username:', registerUsername.value);
+    console.log('Register Password:', registerPassword.value);
+    console.log('Captcha:', captcha.value);
+    // Add your register logic here
+};
+</script>
+
+<style scoped></style>
--- a/easytier-web/frontend/src/main.ts
+++ b/easytier-web/frontend/src/main.ts
@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import './style.css'
+import 'easytier-frontend-lib/style.css'
+import App from './App.vue'
+import EasytierFrontendLib from 'easytier-frontend-lib'
+import PrimeVue from 'primevue/config'
+import Aura from '@primevue/themes/aura'
+import ConfirmationService from 'primevue/confirmationservice';
+
+createApp(App).use(PrimeVue,
+    {
+        theme: {
+            preset: Aura,
+            options: {
+                prefix: 'p',
+                darkModeSelector: 'system',
+                cssLayer: {
+                    name: 'primevue',
+                    order: 'tailwind-base, primevue, tailwind-utilities'
+                }
+            }
+        }
+    }
+).use(ConfirmationService as any).use(EasytierFrontendLib).mount('#app')
--- a/easytier-web/frontend/src/modules/api.ts
+++ b/easytier-web/frontend/src/modules/api.ts
@ -0,0 +1,128 @@
+import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+export interface ValidateConfigResponse {
+    toml_config: string;
+}
+
+// 定义接口返回的数据结构
+export interface LoginResponse {
+    success: boolean;
+    message: string;
+}
+
+export interface RegisterResponse {
+    message: string;
+    user: any; // 同上
+}
+
+// 定义请求体数据结构
+export interface Credential {
+    username: string;
+    password: string;
+}
+
+export interface RegisterData {
+    credential: Credential;
+    captcha: string;
+}
+
+class ApiClient {
+    private client: AxiosInstance;
+
+    constructor(baseUrl: string) {
+        this.client = axios.create({
+            baseURL: baseUrl,
+            withCredentials: true, // 如果需要支持跨域携带cookie
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        // 添加请求拦截器
+        this.client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+            return config;
+        }, (error: any) => {
+            return Promise.reject(error);
+        });
+
+        // 添加响应拦截器
+        this.client.interceptors.response.use((response: AxiosResponse) => {
+            console.log('Axios Response:', response);
+            return response.data; // 假设服务器返回的数据都在data属性中
+        }, (error: any) => {
+            if (error.response) {
+                // 请求已发出，但是服务器响应的状态码不在2xx范围
+                console.error('Response Error:', error.response.data);
+            } else if (error.request) {
+                // 请求已发出，但是没有收到响应
+                console.error('Request Error:', error.request);
+            } else {
+                // 发生了一些问题导致请求未发出
+                console.error('Error:', error.message);
+            }
+            return Promise.reject(error);
+        });
+    }
+
+    // 登录
+    public async login(data: Credential): Promise<LoginResponse> {
+        try {
+            const response = await this.client.post<any>('/auth/login', data);
+            console.log("login response:", response);
+            return { success: true, message: 'Login success', };
+        } catch (error) {
+            if (error instanceof AxiosError) {
+                if (error.response?.status === 401) {
+                    return { success: false, message: 'Invalid username or password', };
+                } else {
+                    return { success: false, message: 'Unknown error, status code: ' + error.response?.status, };
+                }
+            }
+            return { success: false, message: 'Unknown error, error: ' + error, };
+        }
+    }
+
+    // 注册
+    public async register(data: RegisterData): Promise<RegisterResponse> {
+        const response = await this.client.post<RegisterResponse>('/auth/register', data);
+        return response.data;
+    }
+
+    public async list_session() {
+        const response = await this.client.get('/sessions');
+        return response;
+    }
+
+    public async list_machines(): Promise<Array<any>> {
+        const response = await this.client.get<any, Record<string, Array<any>>>('/machines');
+        return response.machines;
+    }
+
+    public async get_network_info(machine_id: string, inst_id: string): Promise<any> {
+        const response = await this.client.get<any, Record<string, any>>('/machines/' + machine_id + '/networks/info/' + inst_id);
+        return response.info.map;
+    }
+
+    public async validate_config(machine_id: string, config: any): Promise<ValidateConfigResponse> {
+        const response = await this.client.post<any, ValidateConfigResponse>(`/machines/${machine_id}/validate-config`, {
+            config: config,
+        });
+        return response;
+    }
+
+    public async run_network(machine_id: string, config: string): Promise<undefined> {
+        await this.client.post<string>(`/machines/${machine_id}/networks`, {
+            config: config,
+        });
+    }
+
+    public async delete_network(machine_id: string, inst_id: string): Promise<undefined> {
+        await this.client.delete<string>(`/machines/${machine_id}/networks/${inst_id}`);
+    }
+
+    public captcha_url() {
+        return this.client.defaults.baseURL + 'auth/captcha';
+    }
+}
+
+export default ApiClient;
--- a/easytier-web/frontend/src/style.css
+++ b/easytier-web/frontend/src/style.css
@ -0,0 +1,33 @@
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
+
+.p-password {
+    width: 100%;
+}
+
+.p-password>input {
+    width: 100%;
+}
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 0.9rem;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
--- a/easytier-web/frontend/src/vite-env.d.ts
+++ b/easytier-web/frontend/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/easytier-web/frontend/tailwind.config.js
+++ b/easytier-web/frontend/tailwind.config.js
@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('tailwindcss-primeui')],
+}
--- a/easytier-web/frontend/tsconfig.app.json
+++ b/easytier-web/frontend/tsconfig.app.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/easytier-web/frontend/tsconfig.json
+++ b/easytier-web/frontend/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/easytier-web/frontend/tsconfig.node.json
+++ b/easytier-web/frontend/tsconfig.node.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/easytier-web/frontend/vite.config.ts
+++ b/easytier-web/frontend/vite.config.ts
@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteSingleFile } from "vite-plugin-singlefile"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), viteSingleFile()],
+})
--- a/easytier-web/src/restful/mod.rs
+++ b/easytier-web/src/restful/mod.rs
@ -11,7 +11,7 @@ use axum_login::tower_sessions::{ExpiredDeletion, SessionManagerLayer};
 use axum_login::{login_required, AuthManagerLayerBuilder, AuthzBackend};
 use axum_messages::MessagesManagerLayer;
 use easytier::common::scoped_task::ScopedTask;
-use easytier::proto::{self, rpc_types};
+use easytier::proto::{rpc_types};
 use network::NetworkApi;
 use sea_orm::DbErr;
 use tokio::net::TcpListener;
@ -43,16 +43,16 @@ type AppState = State<AppStateInner>;
 #[derive(Debug, serde::Deserialize, serde::Serialize)]
 struct ListSessionJsonResp(Vec<StorageToken>);

-pub type Error = proto::error::Error;
-pub type ErrorKind = proto::error::error::ErrorKind;
+#[derive(Debug, serde::Deserialize, serde::Serialize)]
+pub struct Error {
+    message: String,
+}
 type RpcError = rpc_types::error::Error;
 type HttpHandleError = (StatusCode, Json<Error>);

 pub fn other_error<T: ToString>(error_message: T) -> Error {
    Error {
-        error_kind: Some(ErrorKind::OtherError(proto::error::OtherError {
-            error_message: error_message.to_string(),
-        })),
+        message: error_message.to_string(),
    }
 }

--- a/easytier-web/src/restful/network.rs
+++ b/easytier-web/src/restful/network.rs
@ -6,16 +6,17 @@ use axum::routing::{delete, post};
 use axum::{extract::State, routing::get, Json, Router};
 use axum_login::AuthUser;
 use dashmap::DashSet;
+use easytier::launcher::NetworkConfig;
 use easytier::proto::common::Void;
 use easytier::proto::rpc_types::controller::BaseController;
-use easytier::proto::{self, web::*};
+use easytier::proto::{web::*};

 use crate::client_manager::session::Session;
 use crate::client_manager::ClientManager;

 use super::users::AuthSession;
 use super::{
-    convert_db_error, AppState, AppStateInner, Error, ErrorKind, HttpHandleError, RpcError,
+    convert_db_error, other_error, AppState, AppStateInner, Error, HttpHandleError, RpcError,
 };

 fn convert_rpc_error(e: RpcError) -> (StatusCode, Json<Error>) {
@ -24,13 +25,15 @@ fn convert_rpc_error(e: RpcError) -> (StatusCode, Json<Error>) {
        RpcError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
        _ => StatusCode::BAD_GATEWAY,
    };
-    let error = Error::from(&e);
+    let error = Error {
+        message: format!("{:?}", e),
+    };
    (status_code, Json(error))
 }

 #[derive(Debug, serde::Deserialize, serde::Serialize)]
 struct ValidateConfigJsonReq {
-    config: String,
+    config: NetworkConfig,
 }

 #[derive(Debug, serde::Deserialize, serde::Serialize)]
@ -77,24 +80,14 @@ impl NetworkApi {
        let Some(result) = client_mgr.get_session_by_machine_id(machine_id) else {
            return Err((
                StatusCode::NOT_FOUND,
-                Error {
-                    error_kind: Some(ErrorKind::OtherError(proto::error::OtherError {
-                        error_message: format!("No such session: {}", machine_id),
-                    })),
-                }
-                .into(),
+                other_error(format!("No such session: {}", machine_id)).into(),
            ));
        };

        let Some(token) = result.get_token().await else {
            return Err((
                StatusCode::UNAUTHORIZED,
-                Error {
-                    error_kind: Some(ErrorKind::OtherError(proto::error::OtherError {
-                        error_message: "No token reported".to_string(),
-                    })),
-                }
-                .into(),
+                other_error(format!("No token reported")).into(),
            ));
        };

@ -106,12 +99,7 @@ impl NetworkApi {
        {
            return Err((
                StatusCode::FORBIDDEN,
-                Error {
-                    error_kind: Some(ErrorKind::OtherError(proto::error::OtherError {
-                        error_message: "Token mismatch".to_string(),
-                    })),
-                }
-                .into(),
+                other_error(format!("Token mismatch")).into(),
            ));
        }

@ -123,16 +111,22 @@ impl NetworkApi {
        State(client_mgr): AppState,
        Path(machine_id): Path<uuid::Uuid>,
        Json(payload): Json<ValidateConfigJsonReq>,
-    ) -> Result<Json<Void>, HttpHandleError> {
+    ) -> Result<Json<ValidateConfigResponse>, HttpHandleError> {
        let config = payload.config;
        let result =
            Self::get_session_by_machine_id(&auth_session, &client_mgr, &machine_id).await?;

        let c = result.scoped_rpc_client();
-        c.validate_config(BaseController::default(), ValidateConfigRequest { config })
+        let ret = c
+            .validate_config(
+                BaseController::default(),
+                ValidateConfigRequest {
+                    config: Some(config),
+                },
+            )
            .await
            .map_err(convert_rpc_error)?;
-        Ok(Void::default().into())
+        Ok(ret.into())
    }

    async fn handle_run_network_instance(
--- a/easytier/src/common/config.rs
+++ b/easytier/src/common/config.rs
@ -9,6 +9,28 @@ use serde::{Deserialize, Serialize};

 use crate::tunnel::generate_digest_from_str;

+pub type Flags = crate::proto::common::FlagsInConfig;
+
+pub fn gen_default_flags() -> Flags {
+    Flags {
+        default_protocol: "tcp".to_string(),
+        dev_name: "".to_string(),
+        enable_encryption: true,
+        enable_ipv6: true,
+        mtu: 1380,
+        latency_first: false,
+        enable_exit_node: false,
+        no_tun: false,
+        use_smoltcp: false,
+        foreign_network_whitelist: "*".to_string(),
+        disable_p2p: false,
+        relay_all_peer_rpc: false,
+        disable_udp_hole_punching: false,
+        ipv6_listener: "udp://[::]:0".to_string(),
+        multi_thread: false,
+    }
+}
+
 #[auto_impl::auto_impl(Box, &)]
 pub trait ConfigLoader: Send + Sync {
    fn get_id(&self) -> uuid::Uuid;
@ -127,7 +149,7 @@ pub struct PeerConfig {
 }

 #[derive(Debug, Clone, Deserialize, Serialize, PartialEq)]
-pub struct NetworkConfig {
+pub struct ProxyNetworkConfig {
    pub cidr: String,
    pub allow: Option<Vec<String>>,
 }
@ -150,42 +172,6 @@ pub struct VpnPortalConfig {
    pub wireguard_listen: SocketAddr,
 }

-// Flags is used to control the behavior of the program
-#[derive(derivative::Derivative, Deserialize, Serialize)]
-#[derivative(Debug, Clone, PartialEq, Default)]
-pub struct Flags {
-    #[derivative(Default(value = "\"tcp\".to_string()"))]
-    pub default_protocol: String,
-    #[derivative(Default(value = "\"\".to_string()"))]
-    pub dev_name: String,
-    #[derivative(Default(value = "true"))]
-    pub enable_encryption: bool,
-    #[derivative(Default(value = "true"))]
-    pub enable_ipv6: bool,
-    #[derivative(Default(value = "1380"))]
-    pub mtu: u16,
-    #[derivative(Default(value = "false"))]
-    pub latency_first: bool,
-    #[derivative(Default(value = "false"))]
-    pub enable_exit_node: bool,
-    #[derivative(Default(value = "false"))]
-    pub no_tun: bool,
-    #[derivative(Default(value = "false"))]
-    pub use_smoltcp: bool,
-    #[derivative(Default(value = "\"*\".to_string()"))]
-    pub foreign_network_whitelist: String,
-    #[derivative(Default(value = "false"))]
-    pub disable_p2p: bool,
-    #[derivative(Default(value = "false"))]
-    pub relay_all_peer_rpc: bool,
-    #[derivative(Default(value = "false"))]
-    pub disable_udp_hole_punching: bool,
-    #[derivative(Default(value = "\"udp://[::]:0\".to_string()"))]
-    pub ipv6_listener: String,
-    #[derivative(Default(value = "false"))]
-    pub multi_thread: bool,
-}
-
 #[derive(Debug, Clone, Deserialize, Serialize, PartialEq)]
 struct Config {
    netns: Option<String>,
@ -199,7 +185,7 @@ struct Config {
    exit_nodes: Option<Vec<Ipv4Addr>>,

    peer: Option<Vec<PeerConfig>>,
-    proxy_network: Option<Vec<NetworkConfig>>,
+    proxy_network: Option<Vec<ProxyNetworkConfig>>,

    file_logger: Option<FileLoggerConfig>,
    console_logger: Option<ConsoleLoggerConfig>,
@ -255,7 +241,7 @@ impl TomlConfigLoader {
    }

    fn gen_flags(mut flags_hashmap: serde_json::Map<String, serde_json::Value>) -> Flags {
-        let default_flags_json = serde_json::to_string(&Flags::default()).unwrap();
+        let default_flags_json = serde_json::to_string(&gen_default_flags()).unwrap();
        let default_flags_hashmap =
            serde_json::from_str::<serde_json::Map<String, serde_json::Value>>(&default_flags_json)
                .unwrap();
@ -372,7 +358,7 @@ impl ConfigLoader for TomlConfigLoader {
                .proxy_network
                .as_mut()
                .unwrap()
-                .push(NetworkConfig {
+                .push(ProxyNetworkConfig {
                    cidr: cidr_str,
                    allow: None,
                });
@ -527,7 +513,7 @@ impl ConfigLoader for TomlConfigLoader {
    }

    fn dump(&self) -> String {
-        let default_flags_json = serde_json::to_string(&Flags::default()).unwrap();
+        let default_flags_json = serde_json::to_string(&gen_default_flags()).unwrap();
        let default_flags_hashmap =
            serde_json::from_str::<serde_json::Map<String, serde_json::Value>>(&default_flags_json)
                .unwrap();
--- a/easytier/src/easytier-core.rs
+++ b/easytier/src/easytier-core.rs
@ -4,7 +4,7 @@
 extern crate rust_i18n;

 use std::{
-    net::{Ipv4Addr, SocketAddr}, 
+    net::{Ipv4Addr, SocketAddr},
    path::PathBuf,
 };

@ -505,7 +505,7 @@ impl From<Cli> for TomlConfigLoader {
        f.latency_first = cli.latency_first;
        f.dev_name = cli.dev_name.unwrap_or_default();
        if let Some(mtu) = cli.mtu {
-            f.mtu = mtu;
+            f.mtu = mtu as u32;
        }
        f.enable_exit_node = cli.enable_exit_node;
        f.no_tun = cli.no_tun || cfg!(not(feature = "tun"));
@ -653,13 +653,13 @@ pub fn handle_event(mut events: EventBusSubscriber) -> tokio::task::JoinHandle<(
 }

 #[cfg(target_os = "windows")]
-fn win_service_event_loop(  
+fn win_service_event_loop(
    stop_notify: std::sync::Arc<tokio::sync::Notify>,
-    inst: launcher::NetworkInstance,  
-    status_handle: windows_service::service_control_handler::ServiceStatusHandle,  
-) {  
-    use tokio::runtime::Runtime;
+    inst: launcher::NetworkInstance,
+    status_handle: windows_service::service_control_handler::ServiceStatusHandle,
+) {
    use std::time::Duration;
+    use tokio::runtime::Runtime;
    use windows_service::service::*;

    std::thread::spawn(move || {
@ -699,26 +699,23 @@ fn win_service_event_loop(

 #[cfg(target_os = "windows")]
 fn win_service_main(_: Vec<std::ffi::OsString>) {
-    use std::time::Duration;
-    use windows_service::service_control_handler::*;
-    use windows_service::service::*;
    use std::sync::Arc;
+    use std::time::Duration;
    use tokio::sync::Notify;
-    
+    use windows_service::service::*;
+    use windows_service::service_control_handler::*;
+
    let cli = Cli::parse();
    let cfg = TomlConfigLoader::from(cli);

-    init_logger(&cfg, false).unwrap(); 
+    init_logger(&cfg, false).unwrap();

    let stop_notify_send = Arc::new(Notify::new());
    let stop_notify_recv = Arc::clone(&stop_notify_send);
    let event_handler = move |control_event| -> ServiceControlHandlerResult {
        match control_event {
-            ServiceControl::Interrogate => {
-                ServiceControlHandlerResult::NoError
-            }
-            ServiceControl::Stop =>
-            {
+            ServiceControl::Interrogate => ServiceControlHandlerResult::NoError,
+            ServiceControl::Stop => {
                stop_notify_send.notify_one();
                ServiceControlHandlerResult::NoError
            }
@ -736,10 +733,12 @@ fn win_service_main(_: Vec<std::ffi::OsString>) {
        process_id: None,
    };
    let mut inst = launcher::NetworkInstance::new(cfg).set_fetch_node_info(false);
-      
-    inst.start().unwrap();    
-    status_handle.set_service_status(next_status).expect("set service status fail");
-    win_service_event_loop(stop_notify_recv, inst, status_handle);    
+
+    inst.start().unwrap();
+    status_handle
+        .set_service_status(next_status)
+        .expect("set service status fail");
+    win_service_event_loop(stop_notify_recv, inst, status_handle);
 }

 #[tokio::main]
@ -750,18 +749,19 @@ async fn main() {
    #[cfg(target_os = "windows")]
    match windows_service::service_dispatcher::start(String::new(), ffi_service_main) {
        Ok(_) => std::thread::park(),
-        Err(e) =>
-        {    
-             let should_panic = if let windows_service::Error::Winapi(ref io_error) = e { 
-                 io_error.raw_os_error() != Some(0x427) // ERROR_FAILED_SERVICE_CONTROLLER_CONNECT
-             } else { true };
-             
-             if should_panic {
-                 panic!("SCM start an error: {}", e);
-             }
-         }
-     };
-     
+        Err(e) => {
+            let should_panic = if let windows_service::Error::Winapi(ref io_error) = e {
+                io_error.raw_os_error() != Some(0x427) // ERROR_FAILED_SERVICE_CONTROLLER_CONNECT
+            } else {
+                true
+            };
+
+            if should_panic {
+                panic!("SCM start an error: {}", e);
+            }
+        }
+    };
+
    let cli = Cli::parse();

    setup_panic_handler();
--- a/easytier/src/launcher.rs
+++ b/easytier/src/launcher.rs
@ -5,7 +5,10 @@ use std::{

 use crate::{
    common::{
-        config::{ConfigLoader, TomlConfigLoader},
+        config::{
+            gen_default_flags, ConfigLoader, NetworkIdentity, PeerConfig, TomlConfigLoader,
+            VpnPortalConfig,
+        },
        constants::EASYTIER_VERSION,
        global_ctx::{EventBusSubscriber, GlobalCtxEvent},
        stun::StunInfoCollectorTrait,
@ -14,6 +17,7 @@ use crate::{
    peers::rpc_service::PeerManagerRpcService,
    proto::cli::{list_peer_route_pair, PeerInfo, Route},
 };
+use anyhow::Context;
 use chrono::{DateTime, Local};
 use tokio::{sync::broadcast, task::JoinSet};

@ -388,3 +392,132 @@ impl NetworkInstance {
        }
    }
 }
+
+pub type NetworkingMethod = crate::proto::web::NetworkingMethod;
+pub type NetworkConfig = crate::proto::web::NetworkConfig;
+
+impl NetworkConfig {
+    pub fn gen_config(&self) -> Result<TomlConfigLoader, anyhow::Error> {
+        let cfg = TomlConfigLoader::default();
+        cfg.set_id(
+            self.instance_id
+                .clone()
+                .unwrap_or(uuid::Uuid::new_v4().to_string())
+                .parse()
+                .with_context(|| format!("failed to parse instance id: {:?}", self.instance_id))?,
+        );
+        cfg.set_hostname(self.hostname.clone());
+        cfg.set_dhcp(self.dhcp.unwrap_or_default());
+        cfg.set_inst_name(self.network_name.clone().unwrap_or_default());
+        cfg.set_network_identity(NetworkIdentity::new(
+            self.network_name.clone().unwrap_or_default(),
+            self.network_secret.clone().unwrap_or_default(),
+        ));
+
+        if !cfg.get_dhcp() {
+            let virtual_ipv4 = self.virtual_ipv4.clone().unwrap_or_default();
+            if virtual_ipv4.len() > 0 {
+                let ip = format!("{}/{}", virtual_ipv4, self.network_length.unwrap_or(24))
+                    .parse()
+                    .with_context(|| {
+                        format!(
+                            "failed to parse ipv4 inet address: {}, {:?}",
+                            virtual_ipv4, self.network_length
+                        )
+                    })?;
+                cfg.set_ipv4(Some(ip));
+            }
+        }
+
+        match NetworkingMethod::try_from(self.networking_method.unwrap_or_default())
+            .unwrap_or_default()
+        {
+            NetworkingMethod::PublicServer => {
+                let public_server_url = self.public_server_url.clone().unwrap_or_default();
+                cfg.set_peers(vec![PeerConfig {
+                    uri: public_server_url.parse().with_context(|| {
+                        format!("failed to parse public server uri: {}", public_server_url)
+                    })?,
+                }]);
+            }
+            NetworkingMethod::Manual => {
+                let mut peers = vec![];
+                for peer_url in self.peer_urls.iter() {
+                    if peer_url.is_empty() {
+                        continue;
+                    }
+                    peers.push(PeerConfig {
+                        uri: peer_url
+                            .parse()
+                            .with_context(|| format!("failed to parse peer uri: {}", peer_url))?,
+                    });
+                }
+
+                cfg.set_peers(peers);
+            }
+            NetworkingMethod::Standalone => {}
+        }
+
+        let mut listener_urls = vec![];
+        for listener_url in self.listener_urls.iter() {
+            if listener_url.is_empty() {
+                continue;
+            }
+            listener_urls.push(
+                listener_url
+                    .parse()
+                    .with_context(|| format!("failed to parse listener uri: {}", listener_url))?,
+            );
+        }
+        cfg.set_listeners(listener_urls);
+
+        for n in self.proxy_cidrs.iter() {
+            cfg.add_proxy_cidr(
+                n.parse()
+                    .with_context(|| format!("failed to parse proxy network: {}", n))?,
+            );
+        }
+
+        cfg.set_rpc_portal(
+            format!("0.0.0.0:{}", self.rpc_port.unwrap_or_default())
+                .parse()
+                .with_context(|| format!("failed to parse rpc portal port: {:?}", self.rpc_port))?,
+        );
+
+        if self.enable_vpn_portal.unwrap_or_default() {
+            let cidr = format!(
+                "{}/{}",
+                self.vpn_portal_client_network_addr
+                    .clone()
+                    .unwrap_or_default(),
+                self.vpn_portal_client_network_len.unwrap_or(24)
+            );
+            cfg.set_vpn_portal_config(VpnPortalConfig {
+                client_cidr: cidr
+                    .parse()
+                    .with_context(|| format!("failed to parse vpn portal client cidr: {}", cidr))?,
+                wireguard_listen: format!(
+                    "0.0.0.0:{}",
+                    self.vpn_portal_listen_port.unwrap_or_default()
+                )
+                .parse()
+                .with_context(|| {
+                    format!(
+                        "failed to parse vpn portal wireguard listen port. {:?}",
+                        self.vpn_portal_listen_port
+                    )
+                })?,
+            });
+        }
+        let mut flags = gen_default_flags();
+        if let Some(latency_first) = self.latency_first {
+            flags.latency_first = latency_first;
+        }
+
+        if let Some(dev_name) = self.dev_name.clone() {
+            flags.dev_name = dev_name;
+        }
+        cfg.set_flags(flags);
+        Ok(cfg)
+    }
+}
--- a/easytier/src/proto/common.proto
+++ b/easytier/src/proto/common.proto
@ -4,6 +4,24 @@ import "error.proto";

 package common;

+message FlagsInConfig {
+  string default_protocol = 1;
+  string dev_name = 2;
+  bool enable_encryption = 3;
+  bool enable_ipv6 = 4;
+  uint32 mtu = 5;
+  bool latency_first = 6;
+  bool enable_exit_node = 7;
+  bool no_tun = 8;
+  bool use_smoltcp = 9;
+  string foreign_network_whitelist = 10;
+  bool disable_p2p = 11;
+  bool relay_all_peer_rpc = 12;
+  bool disable_udp_hole_punching = 13;
+  string ipv6_listener = 14;
+  bool multi_thread = 15;
+}
+
 message RpcDescriptor {
  // allow same service registered multiple times in different domain
  string domain_name = 1;
@ -45,8 +63,10 @@ message RpcPacket {
 message Void {}

 message UUID {
-  uint64 high = 1;
-  uint64 low = 2;
+  uint32 part1 = 1;
+  uint32 part2 = 2;
+  uint32 part3 = 3;
+  uint32 part4 = 4;
 }

 enum NatType {
--- a/easytier/src/proto/common.rs
+++ b/easytier/src/proto/common.rs
@ -7,13 +7,21 @@ include!(concat!(env!("OUT_DIR"), "/common.rs"));
 impl From<uuid::Uuid> for Uuid {
    fn from(uuid: uuid::Uuid) -> Self {
        let (high, low) = uuid.as_u64_pair();
-        Uuid { low, high }
+        Uuid {
+            part1: (high >> 32) as u32,
+            part2: (high & 0xFFFFFFFF) as u32,
+            part3: (low >> 32) as u32,
+            part4: (low & 0xFFFFFFFF) as u32,
+        }
    }
 }

 impl From<Uuid> for uuid::Uuid {
    fn from(uuid: Uuid) -> Self {
-        uuid::Uuid::from_u64_pair(uuid.high, uuid.low)
+        uuid::Uuid::from_u64_pair(
+            (u64::from(uuid.part1) << 32) | u64::from(uuid.part2),
+            (u64::from(uuid.part3) << 32) | u64::from(uuid.part4),
+        )
    }
 }

--- a/easytier/src/proto/web.proto
+++ b/easytier/src/proto/web.proto
@ -6,6 +6,42 @@ import "cli.proto";

 package web;

+enum NetworkingMethod {
+    PublicServer = 0;
+    Manual = 1;
+    Standalone = 2;
+}
+
+message NetworkConfig {
+    optional string instance_id = 1;
+
+    optional bool dhcp = 2;
+    optional string virtual_ipv4 = 3;
+    optional int32 network_length = 4;
+    optional string hostname = 5;
+    optional string network_name = 6;
+    optional string network_secret = 7;
+    optional NetworkingMethod networking_method = 8;
+
+    optional string public_server_url = 9;
+    repeated string peer_urls = 10;
+
+    repeated string proxy_cidrs = 11;
+
+    optional bool enable_vpn_portal = 12;
+    optional int32 vpn_portal_listen_port = 13;
+    optional string vpn_portal_client_network_addr = 14;
+    optional int32 vpn_portal_client_network_len = 15;
+
+    optional bool advanced_settings = 16;
+
+    repeated string listener_urls = 17;
+    optional int32 rpc_port = 18;
+    optional bool latency_first = 19;
+
+    optional string dev_name = 20;
+}
+
 message MyNodeInfo {
  common.Ipv4Addr virtual_ipv4 = 1;
  string hostname = 2;
@ -52,10 +88,11 @@ service WebServerService {
 }

 message ValidateConfigRequest {
-  string config = 1;
+  NetworkConfig config = 1;
 }

 message ValidateConfigResponse {
+  string toml_config = 1;
 }

 message RunNetworkInstanceRequest {
--- a/easytier/src/tunnel/quic.rs
+++ b/easytier/src/tunnel/quic.rs
@ -234,13 +234,13 @@ mod tests {
    async fn ipv6_domain_pingpong() {
        let listener = QUICTunnelListener::new("quic://[::1]:31016".parse().unwrap());
        let mut connector =
-            QUICTunnelConnector::new("quic://test.kkrainbow.top:31016".parse().unwrap());
+            QUICTunnelConnector::new("quic://test.easytier.top:31016".parse().unwrap());
        connector.set_ip_version(IpVersion::V6);
        _tunnel_pingpong(listener, connector).await;

        let listener = QUICTunnelListener::new("quic://127.0.0.1:31016".parse().unwrap());
        let mut connector =
-            QUICTunnelConnector::new("quic://test.kkrainbow.top:31016".parse().unwrap());
+            QUICTunnelConnector::new("quic://test.easytier.top:31016".parse().unwrap());
        connector.set_ip_version(IpVersion::V4);
        _tunnel_pingpong(listener, connector).await;
    }
--- a/easytier/src/tunnel/tcp.rs
+++ b/easytier/src/tunnel/tcp.rs
@ -248,13 +248,13 @@ mod tests {
    async fn ipv6_domain_pingpong() {
        let listener = TcpTunnelListener::new("tcp://[::1]:31015".parse().unwrap());
        let mut connector =
-            TcpTunnelConnector::new("tcp://test.kkrainbow.top:31015".parse().unwrap());
+            TcpTunnelConnector::new("tcp://test.easytier.top:31015".parse().unwrap());
        connector.set_ip_version(IpVersion::V6);
        _tunnel_pingpong(listener, connector).await;

        let listener = TcpTunnelListener::new("tcp://127.0.0.1:31015".parse().unwrap());
        let mut connector =
-            TcpTunnelConnector::new("tcp://test.kkrainbow.top:31015".parse().unwrap());
+            TcpTunnelConnector::new("tcp://test.easytier.top:31015".parse().unwrap());
        connector.set_ip_version(IpVersion::V4);
        _tunnel_pingpong(listener, connector).await;
    }
--- a/easytier/src/tunnel/udp.rs
+++ b/easytier/src/tunnel/udp.rs
@ -905,13 +905,13 @@ mod tests {
    async fn ipv6_domain_pingpong() {
        let listener = UdpTunnelListener::new("udp://[::1]:31016".parse().unwrap());
        let mut connector =
-            UdpTunnelConnector::new("udp://test.kkrainbow.top:31016".parse().unwrap());
+            UdpTunnelConnector::new("udp://test.easytier.top:31016".parse().unwrap());
        connector.set_ip_version(IpVersion::V6);
        _tunnel_pingpong(listener, connector).await;

        let listener = UdpTunnelListener::new("udp://127.0.0.1:31016".parse().unwrap());
        let mut connector =
-            UdpTunnelConnector::new("udp://test.kkrainbow.top:31016".parse().unwrap());
+            UdpTunnelConnector::new("udp://test.easytier.top:31016".parse().unwrap());
        connector.set_ip_version(IpVersion::V4);
        _tunnel_pingpong(listener, connector).await;
    }
--- a/easytier/src/tunnel/wireguard.rs
+++ b/easytier/src/tunnel/wireguard.rs
@ -895,14 +895,14 @@ pub mod tests {
        let (server_cfg, client_cfg) = create_wg_config();
        let listener = WgTunnelListener::new("wg://[::1]:31016".parse().unwrap(), server_cfg);
        let mut connector =
-            WgTunnelConnector::new("wg://test.kkrainbow.top:31016".parse().unwrap(), client_cfg);
+            WgTunnelConnector::new("wg://test.easytier.top:31016".parse().unwrap(), client_cfg);
        connector.set_ip_version(IpVersion::V6);
        _tunnel_pingpong(listener, connector).await;

        let (server_cfg, client_cfg) = create_wg_config();
        let listener = WgTunnelListener::new("wg://127.0.0.1:31016".parse().unwrap(), server_cfg);
        let mut connector =
-            WgTunnelConnector::new("wg://test.kkrainbow.top:31016".parse().unwrap(), client_cfg);
+            WgTunnelConnector::new("wg://test.easytier.top:31016".parse().unwrap(), client_cfg);
        connector.set_ip_version(IpVersion::V4);
        _tunnel_pingpong(listener, connector).await;
    }
--- a/easytier/src/web_client/controller.rs
+++ b/easytier/src/web_client/controller.rs
@ -91,8 +91,8 @@ impl WebClientService for Controller {
        _: BaseController,
        req: ValidateConfigRequest,
    ) -> Result<ValidateConfigResponse, rpc_types::error::Error> {
-        let _ = TomlConfigLoader::new_from_str(&req.config)?;
-        Ok(ValidateConfigResponse {})
+        let toml_config = req.config.unwrap_or_default().gen_config()?.dump();
+        Ok(ValidateConfigResponse { toml_config })
    }

    async fn run_network_instance(
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -0,0 +1,5 @@
+packages:
+  - 'easytier-web/frontend'
+  - 'easytier-web/frontend-lib'
+  - 'easytier-gui'
+  - 'tauri-plugin-vpnservice'
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`