web: bump dev dependencies in frpc and frps package-lock.json

2026-07-29 12:29:17 +08:00 · 2026-03-16 23:17:57 +08:00
66 changed files with 8893 additions and 1899 deletions
--- a/.github/workflows/build-and-push-image.yml
+++ b/.github/workflows/build-and-push-image.yml
@@ -19,15 +19,15 @@ jobs:
    steps:
      # environment
      - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
        with:
          fetch-depth: '0'

      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v4
+        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

      # get image tag name
      - name: Get Image Tag Name
@@ -38,13 +38,13 @@ jobs:
            echo "TAG_NAME=${{ github.event.inputs.tag }}" >> $GITHUB_ENV
          fi
      - name: Login to DockerHub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_PASSWORD }}

      - name: Login to the GPR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
@@ -61,7 +61,7 @@ jobs:
          echo "TAG_FRPS_GPR=ghcr.io/fatedier/frps:${{ env.TAG_NAME }}" >> $GITHUB_ENV

      - name: Build and push frpc
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./dockerfiles/Dockerfile-for-frpc
@@ -72,7 +72,7 @@ jobs:
            ${{ env.TAG_FRPC_GPR }}

      - name: Build and push frps
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./dockerfiles/Dockerfile-for-frps
--- a/.github/workflows/golangci-lint.yml
+++ b/.github/workflows/golangci-lint.yml
@@ -14,12 +14,12 @@ jobs:
    name: lint
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v6
-    - uses: actions/setup-go@v6
+    - uses: actions/checkout@v4
+    - uses: actions/setup-go@v5
      with:
        go-version: '1.25'
        cache: false
-    - uses: actions/setup-node@v6
+    - uses: actions/setup-node@v4
      with:
        node-version: '22'
    - name: Build web assets (frps)
--- a/.github/workflows/goreleaser.yml
+++ b/.github/workflows/goreleaser.yml
@@ -8,15 +8,15 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Set up Go
-        uses: actions/setup-go@v6
+        uses: actions/setup-go@v5
        with:
          go-version: '1.25'
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - name: Build web assets (frps)
@@ -30,7 +30,7 @@ jobs:
          ./package.sh

      - name: Run GoReleaser
-        uses: goreleaser/goreleaser-action@v7
+        uses: goreleaser/goreleaser-action@v6
        with:
          version: latest
          args: release --clean --release-notes=./Release.md
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -19,7 +19,7 @@ jobs:
      actions: write
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/stale@v10
+    - uses: actions/stale@v9
      with:
        stale-issue-message: 'Issues go stale after 14d of inactivity. Stale issues rot after an additional 3d of inactivity and eventually close.'
        stale-pr-message: "PRs go stale after 14d of inactivity. Stale PRs rot after an additional 3d of inactivity and eventually close."
--- a/.gitignore
+++ b/.gitignore
@@ -25,8 +25,6 @@ dist/
 client.crt
 client.key

-node_modules/
-
 # Cache
 *.swp

--- a/AGENTS.md
+++ b/AGENTS.md
@@ -32,8 +32,3 @@
 - E2E tests using Ginkgo/Gomega framework
 - Mock servers in `/test/e2e/mock/`
 - Run: `make e2e` or `make alltest`
-
-## Agent Runbooks
-
-Operational procedures for agents are in `doc/agents/`:
- `doc/agents/release.md` - Release process
--- a/README.md
+++ b/README.md
@@ -13,16 +13,6 @@ frp is an open source project with its ongoing development made possible entirel

 <h3 align="center">Gold Sponsors</h3>
 <!--gold sponsors start-->
-<p align="center">
-  <a href="https://github.com/beclab/Olares" target="_blank">
-    <img width="420px" src="https://raw.githubusercontent.com/fatedier/frp/dev/doc/pic/sponsor_olares.jpeg">
-	<br>
-	<b>The sovereign cloud that puts you in control</b>
-	<br>
-	<sub>An open source, self-hosted alternative to public clouds, built for data ownership and privacy</sub>
-  </a>
-</p>
-
 <div align="center">

 ## Recall.ai - API for meeting recordings
@@ -50,6 +40,16 @@ an API that records Zoom, Google Meet, Microsoft Teams, in-person meetings, and
 	<b>The complete IDE crafted for professional Go developers</b>
  </a>
 </p>
+
+<p align="center">
+  <a href="https://github.com/beclab/Olares" target="_blank">
+    <img width="420px" src="https://raw.githubusercontent.com/fatedier/frp/dev/doc/pic/sponsor_olares.jpeg">
+	<br>
+	<b>The sovereign cloud that puts you in control</b>
+	<br>
+	<sub>An open source, self-hosted alternative to public clouds, built for data ownership and privacy</sub>
+  </a>
+</p>
 <!--gold sponsors end-->

 ## What is frp?
@@ -81,7 +81,6 @@ frp also offers a P2P connect mode.
    * [Split Configures Into Different Files](#split-configures-into-different-files)
    * [Server Dashboard](#server-dashboard)
    * [Client Admin UI](#client-admin-ui)
-        * [Dynamic Proxy Management (Store)](#dynamic-proxy-management-store)
    * [Monitor](#monitor)
        * [Prometheus](#prometheus)
    * [Authenticating the Client](#authenticating-the-client)
@@ -150,9 +149,7 @@ We sincerely appreciate your support for frp.

 ## Architecture

-<p align="center">
-  <img src="/doc/pic/architecture.jpg" alt="architecture" width="760">
-</p>
+![architecture](/doc/pic/architecture.png)

 ## Example Usage

@@ -596,7 +593,7 @@ Then visit `https://[serverAddr]:7500` to see the dashboard in secure HTTPS conn

 ### Client Admin UI

-The Client Admin UI helps you check and manage frpc's configuration and proxies.
+The Client Admin UI helps you check and manage frpc's configuration.

 Configure an address for admin UI to enable this feature:

@@ -609,19 +606,6 @@ webServer.password = "admin"

 Then visit `http://127.0.0.1:7400` to see admin UI, with username and password both being `admin`.

-#### Dynamic Proxy Management (Store)
-
-You can dynamically create, update, and delete proxies and visitors at runtime through the Web UI or API, without restarting frpc.
-
-To enable this feature, configure `store.path` to specify a file for persisting the configurations:
-
-```toml
-[store]
-path = "./db.json"
-```
-
-Proxies and visitors managed through the Store are saved to disk and automatically restored on frpc restart. They work alongside proxies defined in the configuration file — Store entries take precedence when names conflict.
-
 ### Monitor

 When web server is enabled, frps will save monitor data in cache for 7 days. It will be cleared after process restart.
--- a/README_zh.md
+++ b/README_zh.md
@@ -15,16 +15,6 @@ frp 是一个完全开源的项目，我们的开发工作完全依靠赞助者

 <h3 align="center">Gold Sponsors</h3>
 <!--gold sponsors start-->
-<p align="center">
-  <a href="https://github.com/beclab/Olares" target="_blank">
-    <img width="420px" src="https://raw.githubusercontent.com/fatedier/frp/dev/doc/pic/sponsor_olares.jpeg">
-	<br>
-	<b>The sovereign cloud that puts you in control</b>
-	<br>
-	<sub>An open source, self-hosted alternative to public clouds, built for data ownership and privacy</sub>
-  </a>
-</p>
-
 <div align="center">

 ## Recall.ai - API for meeting recordings
@@ -52,6 +42,16 @@ an API that records Zoom, Google Meet, Microsoft Teams, in-person meetings, and
 	<b>The complete IDE crafted for professional Go developers</b>
  </a>
 </p>
+
+<p align="center">
+  <a href="https://github.com/beclab/Olares" target="_blank">
+    <img width="420px" src="https://raw.githubusercontent.com/fatedier/frp/dev/doc/pic/sponsor_olares.jpeg">
+	<br>
+	<b>The sovereign cloud that puts you in control</b>
+	<br>
+	<sub>An open source, self-hosted alternative to public clouds, built for data ownership and privacy</sub>
+  </a>
+</p>
 <!--gold sponsors end-->

 ## 为什么使用 frp ？
--- a/Release.md
+++ b/Release.md
@@ -1,3 +1,10 @@
-## Fixes
+## Features

-* Fixed a configuration-dependent authentication bypass in `type = "http"` proxies when `routeByHTTPUser` is used together with `httpUser` / `httpPassword`. This affected proxy-style requests. Proxy-style authentication failures now return `407 Proxy Authentication Required`.
+* Added a built-in `store` capability for frpc, including persisted store source (`[store] path = "..."`), Store CRUD admin APIs (`/api/store/proxies*`, `/api/store/visitors*`) with runtime reload, and Store management pages in the frpc web dashboard.
+
+## Improvements
+
+* Kept proxy/visitor names as raw config names during completion; moved user-prefix handling to explicit wire-level naming logic.
+* Added `noweb` build tag to allow compiling without frontend assets. `make build` now auto-detects missing `web/*/dist` directories and skips embedding, so a fresh clone can build without running `make web` first. The dashboard gracefully returns 404 when assets are not embedded.
+* Improved config parsing errors: for `.toml` files, syntax errors now return immediately with parser position details (line/column when available) instead of falling through to YAML/JSON parsing, and TOML type mismatches report field-level errors without misleading line numbers.
+* OIDC auth now caches the access token and refreshes it before expiry, avoiding a new token request on every heartbeat. Falls back to per-request fetch when the provider omits `expires_in`.
--- a/client/connector.go
+++ b/client/connector.go
@@ -119,7 +119,6 @@ func (c *defaultConnectorImpl) Open() error {
 	fmuxCfg.MaxStreamWindowSize = 6 * 1024 * 1024
 	session, err := fmux.Client(conn, fmuxCfg)
 	if err != nil {
-		conn.Close()
 		return err
 	}
 	c.muxSession = session
--- a/doc/agents/release.md
+++ b/doc/agents/release.md
@@ -1,80 +0,0 @@
-# Release Process
-
-## 1. Update Release Notes
-
-Edit `Release.md` in the project root with the changes for this version:
-
-```markdown
-## Features
-* ...
-
-## Improvements
-* ...
-
-## Fixes
-* ...
-```
-
-This file is used by GoReleaser as the GitHub Release body.
-
-## 2. Bump Version
-
-Update the version string in `pkg/util/version/version.go`:
-
-```go
-var version = "0.X.0"
-```
-
-Commit and push to `dev`:
-
-```bash
-git add pkg/util/version/version.go Release.md
-git commit -m "bump version to vX.Y.Z"
-git push origin dev
-```
-
-## 3. Merge dev → master
-
-Create a PR from `dev` to `master`:
-
-```bash
-gh pr create --base master --head dev --title "bump version"
-```
-
-Wait for CI to pass, then merge using **merge commit** (not squash).
-
-## 4. Tag the Release
-
-```bash
-git checkout master
-git pull origin master
-git tag -a vX.Y.Z -m "bump version"
-git push origin vX.Y.Z
-```
-
-## 5. Trigger GoReleaser
-
-Manually trigger the `goreleaser` workflow in GitHub Actions:
-
-```bash
-gh workflow run goreleaser --ref master
-```
-
-GoReleaser will:
-1. Run `package.sh` to cross-compile all platforms and create archives
-2. Create a GitHub Release with all packages, using `Release.md` as release notes
-
-## Key Files
-
-| File | Purpose |
-|------|---------|
-| `pkg/util/version/version.go` | Version string |
-| `Release.md` | Release notes (read by GoReleaser) |
-| `.goreleaser.yml` | GoReleaser config |
-| `package.sh` | Cross-compile and packaging script |
-| `.github/workflows/goreleaser.yml` | GitHub Actions workflow (manual trigger) |
-
-## Versioning
-
- Minor release: `v0.X.0`
- Patch release: `v0.X.Y` (e.g., `v0.62.1`)
--- a/doc/pic/architecture.jpg
+++ b/doc/pic/architecture.jpg
--- a/doc/pic/architecture.png
+++ b/doc/pic/architecture.png
--- a/dockerfiles/Dockerfile-for-frpc
+++ b/dockerfiles/Dockerfile-for-frpc
@@ -1,11 +1,8 @@
 FROM node:22 AS web-builder

-COPY web/package.json /web/package.json
-COPY web/shared/ /web/shared/
-COPY web/frpc/ /web/frpc/
-WORKDIR /web
-RUN npm install
 WORKDIR /web/frpc
+COPY web/frpc/ ./
+RUN npm install
 RUN npm run build

 FROM golang:1.25 AS building
--- a/dockerfiles/Dockerfile-for-frps
+++ b/dockerfiles/Dockerfile-for-frps
@@ -1,11 +1,8 @@
 FROM node:22 AS web-builder

-COPY web/package.json /web/package.json
-COPY web/shared/ /web/shared/
-COPY web/frps/ /web/frps/
-WORKDIR /web
-RUN npm install
 WORKDIR /web/frps
+COPY web/frps/ ./
+RUN npm install
 RUN npm run build

 FROM golang:1.25 AS building
--- a/go.mod
+++ b/go.mod
@@ -5,7 +5,7 @@ go 1.25.0
 require (
 	github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5
 	github.com/coreos/go-oidc/v3 v3.14.1
-	github.com/fatedier/golib v0.6.0
+	github.com/fatedier/golib v0.5.1
 	github.com/google/uuid v1.6.0
 	github.com/gorilla/mux v1.8.1
 	github.com/gorilla/websocket v1.5.0
@@ -13,7 +13,7 @@ require (
 	github.com/onsi/ginkgo/v2 v2.23.4
 	github.com/onsi/gomega v1.36.3
 	github.com/pelletier/go-toml/v2 v2.2.0
-	github.com/pion/stun/v3 v3.1.1
+	github.com/pion/stun/v2 v2.0.0
 	github.com/pires/go-proxyproto v0.7.0
 	github.com/prometheus/client_golang v1.19.1
 	github.com/quic-go/quic-go v0.55.0
@@ -22,15 +22,15 @@ require (
 	github.com/songgao/water v0.0.0-20200317203138-2b4b6d7c09d8
 	github.com/spf13/cobra v1.8.0
 	github.com/spf13/pflag v1.0.5
-	github.com/stretchr/testify v1.11.1
+	github.com/stretchr/testify v1.10.0
 	github.com/tidwall/gjson v1.17.1
 	github.com/vishvananda/netlink v1.3.0
 	github.com/xtaci/kcp-go/v5 v5.6.13
-	golang.org/x/crypto v0.49.0
-	golang.org/x/net v0.52.0
+	golang.org/x/crypto v0.41.0
+	golang.org/x/net v0.43.0
 	golang.org/x/oauth2 v0.28.0
-	golang.org/x/sync v0.20.0
-	golang.org/x/time v0.10.0
+	golang.org/x/sync v0.16.0
+	golang.org/x/time v0.5.0
 	golang.zx2c4.com/wireguard v0.0.0-20231211153847-12269c276173
 	gopkg.in/ini.v1 v1.67.0
 	k8s.io/apimachinery v0.28.8
@@ -38,7 +38,7 @@ require (
 )

 require (
-	github.com/Azure/go-ntlmssp v0.1.0 // indirect
+	github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358 // indirect
 	github.com/beorn7/perks v1.0.1 // indirect
 	github.com/cespare/xxhash/v2 v2.2.0 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
@@ -51,9 +51,10 @@ require (
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/klauspost/cpuid/v2 v2.2.6 // indirect
 	github.com/klauspost/reedsolomon v1.12.0 // indirect
-	github.com/pion/dtls/v3 v3.0.10 // indirect
-	github.com/pion/logging v0.2.4 // indirect
-	github.com/pion/transport/v4 v4.0.1 // indirect
+	github.com/pion/dtls/v2 v2.2.7 // indirect
+	github.com/pion/logging v0.2.2 // indirect
+	github.com/pion/transport/v2 v2.2.1 // indirect
+	github.com/pion/transport/v3 v3.0.1 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/prometheus/client_model v0.5.0 // indirect
@@ -65,12 +66,11 @@ require (
 	github.com/tidwall/pretty v1.2.0 // indirect
 	github.com/tjfoc/gmsm v1.4.1 // indirect
 	github.com/vishvananda/netns v0.0.4 // indirect
-	github.com/wlynxg/anet v0.0.5 // indirect
 	go.uber.org/automaxprocs v1.6.0 // indirect
-	golang.org/x/mod v0.33.0 // indirect
-	golang.org/x/sys v0.42.0 // indirect
-	golang.org/x/text v0.35.0 // indirect
-	golang.org/x/tools v0.42.0 // indirect
+	golang.org/x/mod v0.27.0 // indirect
+	golang.org/x/sys v0.35.0 // indirect
+	golang.org/x/text v0.28.0 // indirect
+	golang.org/x/tools v0.36.0 // indirect
 	golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2 // indirect
 	google.golang.org/protobuf v1.36.5 // indirect
 	gopkg.in/yaml.v2 v2.4.0 // indirect
--- a/go.sum
+++ b/go.sum
@@ -1,6 +1,6 @@
 cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
-github.com/Azure/go-ntlmssp v0.1.0 h1:DjFo6YtWzNqNvQdrwEyr/e4nhU3vRiwenz5QX7sFz+A=
-github.com/Azure/go-ntlmssp v0.1.0/go.mod h1:NYqdhxd/8aAct/s4qSYZEerdPuH1liG2/X9DiVTbhpk=
+github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358 h1:mFRzDkZVAjdal+s7s0MwaRv9igoPqLRdzOLzw/8Xvq8=
+github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358/go.mod h1:chxPXzSsl7ZWRAuOIE23GDNzjWuZquvFlgA8xmpunjU=
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5 h1:0CwZNZbxp69SHPdPJAN/hZIm0C4OItdklCFmMRWYpio=
 github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5/go.mod h1:wHh0iHkYZB8zMSxRWpUBQtwG5a7fFgvEO+odwuTv2gs=
@@ -20,8 +20,8 @@ github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
-github.com/fatedier/golib v0.6.0 h1:/mgBZZbkbMhIEZoXf7nV8knpUDzas/b+2ruYKxx1lww=
-github.com/fatedier/golib v0.6.0/go.mod h1:ArUGvPg2cOw/py2RAuBt46nNZH2VQ5Z70p109MAZpJw=
+github.com/fatedier/golib v0.5.1 h1:hcKAnaw5mdI/1KWRGejxR+i1Hn/NvbY5UsMKDr7o13M=
+github.com/fatedier/golib v0.5.1/go.mod h1:W6kIYkIFxHsTzbgqg5piCxIiDo4LzwgTY6R5W8l9NFQ=
 github.com/fatedier/yamux v0.0.0-20250825093530-d0154be01cd6 h1:u92UUy6FURPmNsMBUuongRWC0rBqN6gd01Dzu+D21NE=
 github.com/fatedier/yamux v0.0.0-20250825093530-d0154be01cd6/go.mod h1:c5/tk6G0dSpXGzJN7Wk1OEie8grdSJAmeawId9Zvd34=
 github.com/go-jose/go-jose/v4 v4.0.5 h1:M6T8+mKZl/+fNNuFHvGIzDz7BTLQPIounk/b9dw3AaE=
@@ -78,14 +78,16 @@ github.com/onsi/gomega v1.36.3 h1:hID7cr8t3Wp26+cYnfcjR6HpJ00fdogN6dqZ1t6IylU=
 github.com/onsi/gomega v1.36.3/go.mod h1:8D9+Txp43QWKhM24yyOBEdpkzN8FvJyAwecBgsU4KU0=
 github.com/pelletier/go-toml/v2 v2.2.0 h1:QLgLl2yMN7N+ruc31VynXs1vhMZa7CeHHejIeBAsoHo=
 github.com/pelletier/go-toml/v2 v2.2.0/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
-github.com/pion/dtls/v3 v3.0.10 h1:k9ekkq1kaZoxnNEbyLKI8DI37j/Nbk1HWmMuywpQJgg=
-github.com/pion/dtls/v3 v3.0.10/go.mod h1:YEmmBYIoBsY3jmG56dsziTv/Lca9y4Om83370CXfqJ8=
-github.com/pion/logging v0.2.4 h1:tTew+7cmQ+Mc1pTBLKH2puKsOvhm32dROumOZ655zB8=
-github.com/pion/logging v0.2.4/go.mod h1:DffhXTKYdNZU+KtJ5pyQDjvOAh/GsNSyv1lbkFbe3so=
-github.com/pion/stun/v3 v3.1.1 h1:CkQxveJ4xGQjulGSROXbXq94TAWu8gIX2dT+ePhUkqw=
-github.com/pion/stun/v3 v3.1.1/go.mod h1:qC1DfmcCTQjl9PBaMa5wSn3x9IPmKxSdcCsxBcDBndM=
-github.com/pion/transport/v4 v4.0.1 h1:sdROELU6BZ63Ab7FrOLn13M6YdJLY20wldXW2Cu2k8o=
-github.com/pion/transport/v4 v4.0.1/go.mod h1:nEuEA4AD5lPdcIegQDpVLgNoDGreqM/YqmEx3ovP4jM=
+github.com/pion/dtls/v2 v2.2.7 h1:cSUBsETxepsCSFSxC3mc/aDo14qQLMSL+O6IjG28yV8=
+github.com/pion/dtls/v2 v2.2.7/go.mod h1:8WiMkebSHFD0T+dIU+UeBaoV7kDhOW5oDCzZ7WZ/F9s=
+github.com/pion/logging v0.2.2 h1:M9+AIj/+pxNsDfAT64+MAVgJO0rsyLnoJKCqf//DoeY=
+github.com/pion/logging v0.2.2/go.mod h1:k0/tDVsRCX2Mb2ZEmTqNa7CWsQPc+YYCB7Q+5pahoms=
+github.com/pion/stun/v2 v2.0.0 h1:A5+wXKLAypxQri59+tmQKVs7+l6mMM+3d+eER9ifRU0=
+github.com/pion/stun/v2 v2.0.0/go.mod h1:22qRSh08fSEttYUmJZGlriq9+03jtVmXNODgLccj8GQ=
+github.com/pion/transport/v2 v2.2.1 h1:7qYnCBlpgSJNYMbLCKuSY9KbQdBFoETvPNETv0y4N7c=
+github.com/pion/transport/v2 v2.2.1/go.mod h1:cXXWavvCnFF6McHTft3DWS9iic2Mftcz1Aq29pGcU5g=
+github.com/pion/transport/v3 v3.0.1 h1:gDTlPJwROfSfz6QfSi0ZmeCSkFcnWWiiR9ES0ouANiM=
+github.com/pion/transport/v3 v3.0.1/go.mod h1:UY7kiITrlMv7/IKgd5eTUcaahZx5oUN3l9SzK5f5xE0=
 github.com/pires/go-proxyproto v0.7.0 h1:IukmRewDQFWC7kfnb66CSomk2q/seBuilHBYFwyq0Hs=
 github.com/pires/go-proxyproto v0.7.0/go.mod h1:Vz/1JPY/OACxWGQNIRY2BeyDmpoaWmEP40O9LbuiFR4=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
@@ -126,10 +128,11 @@ github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpE
 github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.3/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
-github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/templexxx/cpu v0.1.1 h1:isxHaxBXpYFWnk2DReuKkigaZyrjs2+9ypIdGP4h+HI=
 github.com/templexxx/cpu v0.1.1/go.mod h1:w7Tb+7qgcAlIyX4NhLuDKt78AHA5SzPmq0Wj6HiEnnk=
 github.com/templexxx/xorsimd v0.4.3 h1:9AQTFHd7Bhk3dIT7Al2XeBX5DWOvsUPZCuhyAtNbHjU=
@@ -146,12 +149,11 @@ github.com/vishvananda/netlink v1.3.0 h1:X7l42GfcV4S6E4vHTsw48qbrV+9PVojNfIhZcwQ
 github.com/vishvananda/netlink v1.3.0/go.mod h1:i6NetklAujEcC6fK0JPjT8qSwWyO0HLn4UKG+hGqeJs=
 github.com/vishvananda/netns v0.0.4 h1:Oeaw1EM2JMxD51g9uhtC0D7erkIjgmj8+JZc26m1YX8=
 github.com/vishvananda/netns v0.0.4/go.mod h1:SpkAiCQRtJ6TvvxPnOSyH3BMl6unz3xZlaprSwhNNJM=
-github.com/wlynxg/anet v0.0.5 h1:J3VJGi1gvo0JwZ/P1/Yc/8p63SoW98B5dHkYDmpgvvU=
-github.com/wlynxg/anet v0.0.5/go.mod h1:eay5PRQr7fIVAMbTbchTnO9gG65Hg/uYGdc7mguHxoA=
 github.com/xtaci/kcp-go/v5 v5.6.13 h1:FEjtz9+D4p8t2x4WjciGt/jsIuhlWjjgPCCWjrVR4Hk=
 github.com/xtaci/kcp-go/v5 v5.6.13/go.mod h1:75S1AKYYzNUSXIv30h+jPKJYZUwqpfvLshu63nCNSOM=
 github.com/xtaci/lossyconn v0.0.0-20200209145036-adba10fffc37 h1:EWU6Pktpas0n8lLQwDsRyZfmkPeRbdgPtW609es+/9E=
 github.com/xtaci/lossyconn v0.0.0-20200209145036-adba10fffc37/go.mod h1:HpMP7DB2CyokmAh4lp0EQnnWhmycP/TvwBGzvuie+H0=
+github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 go.uber.org/automaxprocs v1.6.0 h1:O3y2/QNTOdbF+e/dpXNNW7Rx2hZ4sTIPyybbxyNqTUs=
 go.uber.org/automaxprocs v1.6.0/go.mod h1:ifeIMSnPZuznNm6jmdzmU3/bfk01Fe2fotchwEFJ8r8=
 go.uber.org/mock v0.5.2 h1:LbtPTcP8A5k9WPXj54PPPbjcI4Y6lhyOZXn+VS7wNko=
@@ -159,54 +161,89 @@ go.uber.org/mock v0.5.2/go.mod h1:wLlUxC2vVTPTaE3UD51E0BGOAElKrILxhVSDYQLld5o=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20201012173705-84dcc777aaee/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
-golang.org/x/crypto v0.49.0 h1:+Ng2ULVvLHnJ/ZFEq4KdcDd/cfjrrjjNSXNzxg0Y4U4=
-golang.org/x/crypto v0.49.0/go.mod h1:ErX4dUh2UM+CFYiXZRTcMpEcN8b/1gxEuv3nODoYtCA=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/crypto v0.8.0/go.mod h1:mRqEX+O9/h5TFCrQhkgjo2yKi0yYA+9ecGkdQoHrywE=
+golang.org/x/crypto v0.12.0/go.mod h1:NF0Gs7EO5K4qLn+Ylc+fih8BSTeIjAP05siRnAh98yw=
+golang.org/x/crypto v0.41.0 h1:WKYxWedPGCTVVl5+WHSSrOBT0O8lx32+zxmHxijgXp4=
+golang.org/x/crypto v0.41.0/go.mod h1:pO5AFd7FA68rFak7rOAGVuygIISepHftHnr8dr6+sUc=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
 golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
-golang.org/x/mod v0.33.0 h1:tHFzIWbBifEmbwtGz65eaWyGiGZatSrT9prnU8DbVL8=
-golang.org/x/mod v0.33.0/go.mod h1:swjeQEj+6r7fODbD2cqrnje9PnziFuw4bmLbBZFrQ5w=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/mod v0.27.0 h1:kb+q2PyFnEADO2IEF935ehFUXlWiNjJWtRNgBLSfbxQ=
+golang.org/x/mod v0.27.0/go.mod h1:rWI627Fq0DEoudcK+MBkNkCe0EetEaDSwJJkCcjpazc=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190213061140-3a22650c66bd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20201010224723-4f7140c49acb/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
-golang.org/x/net v0.52.0 h1:He/TN1l0e4mmR3QqHMT2Xab3Aj3L9qjbhRm78/6jrW0=
-golang.org/x/net v0.52.0/go.mod h1:R1MAz7uMZxVMualyPXb+VaqGSa3LIaUqk0eEt3w36Sw=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
+golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/net v0.14.0/go.mod h1:PpSgVXXLK0OxS0F31C1/tv6XNguvCrnXIDrFMspZIUI=
+golang.org/x/net v0.43.0 h1:lat02VYK2j4aLzMzecihNvTlJNQUq316m2Mr9rnM6YE=
+golang.org/x/net v0.43.0/go.mod h1:vhO1fvI4dGsIjh73sWfUVjj3N7CA9WkKJNQm2svM6Jg=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.28.0 h1:CrgCKl8PPAVtLnU3c+EDw6x11699EWlsDeWNWKdIOkc=
 golang.org/x/oauth2 v0.28.0/go.mod h1:onh5ek6nERTohokkhCD/y2cV4Do3fxFHFuAejCkRWT8=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
-golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
+golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.2.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.10.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=
-golang.org/x/sys v0.42.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/term v0.41.0 h1:QCgPso/Q3RTJx2Th4bDLqML4W6iJiaXFq2/ftQF13YU=
-golang.org/x/term v0.41.0/go.mod h1:3pfBgksrReYfZ5lvYM0kSO0LIkAl4Yl2bXOkKP7Ec2A=
+golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.35.0 h1:vz1N37gP5bs89s7He8XuIYXpyY0+QlsKmzipCbUtyxI=
+golang.org/x/sys v0.35.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
+golang.org/x/term v0.7.0/go.mod h1:P32HKFT3hSsZrRxla30E9HqToFYAQPCMs/zFMBUFqPY=
+golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
+golang.org/x/term v0.11.0/go.mod h1:zC9APTIj3jG3FdV/Ons+XE1riIZXG4aZ4GTHiPZJPIU=
+golang.org/x/term v0.34.0 h1:O/2T7POpk0ZZ7MAzMeWFSg6S5IpWd/RXDlM9hgM3DR4=
+golang.org/x/term v0.34.0/go.mod h1:5jC53AEywhIVebHgPVeg0mj8OD3VO9OzclacVrqpaAw=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.35.0 h1:JOVx6vVDFokkpaq1AEptVzLTpDe9KGpj5tR4/X+ybL8=
-golang.org/x/text v0.35.0/go.mod h1:khi/HExzZJ2pGnjenulevKNX1W67CUy0AsXcNubPGCA=
-golang.org/x/time v0.10.0 h1:3usCWA8tQn0L8+hFJQNgzpWbd89begxN66o1Ojdn5L4=
-golang.org/x/time v0.10.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
+golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.12.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/text v0.28.0 h1:rhazDwis8INMIwQ4tpjLDzUhx6RlXqZNPEM0huQojng=
+golang.org/x/text v0.28.0/go.mod h1:U8nCwOR8jO/marOQ0QbDiOngZVEBB7MAiitBuMjXiNU=
+golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
+golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
 golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20190524140312-2c0ae7006135/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
-golang.org/x/tools v0.42.0 h1:uNgphsn75Tdz5Ji2q36v/nsFSfR/9BRFvqhGBaJGd5k=
-golang.org/x/tools v0.42.0/go.mod h1:Ma6lCIwGZvHK6XtgbswSoWroEkhugApmsXyrUmBhfr0=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
+golang.org/x/tools v0.36.0 h1:kWS0uv/zsvHEle1LbV5LE8QujrxB3wfQyxHfhOk0Qkg=
+golang.org/x/tools v0.36.0/go.mod h1:WBDiHKJK8YgLHlcQPYQzNCkUxUypCaa5ZegCVutKm+s=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2 h1:B82qJJgjvYKsXS9jeunTOisW56dUokqW/FOteYJJ/yg=
 golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2/go.mod h1:deeaetjYA+DHMHg+sMSMI58GrEteJUUzzw7en6TJQcI=
--- a/pkg/nathole/discovery.go
+++ b/pkg/nathole/discovery.go
@@ -19,7 +19,7 @@ import (
 	"net"
 	"time"

-	"github.com/pion/stun/v3"
+	"github.com/pion/stun/v2"
 )

 var responseTimeout = 3 * time.Second
--- a/pkg/nathole/utils.go
+++ b/pkg/nathole/utils.go
@@ -21,7 +21,7 @@ import (
 	"strconv"

 	"github.com/fatedier/golib/crypto"
-	"github.com/pion/stun/v3"
+	"github.com/pion/stun/v2"

 	"github.com/fatedier/frp/pkg/msg"
 )
--- a/pkg/util/version/version.go
+++ b/pkg/util/version/version.go
@@ -14,7 +14,7 @@

 package version

-var version = "0.68.1"
+var version = "0.68.0"

 func Full() string {
 	return version
--- a/pkg/util/vhost/http.go
+++ b/pkg/util/vhost/http.go
@@ -187,25 +187,16 @@ func (rp *HTTPReverseProxy) CreateConnection(reqRouteInfo *RequestRouteInfo, byE
 	return nil, fmt.Errorf("%v: %s %s %s", ErrNoRouteFound, host, reqRouteInfo.URL, reqRouteInfo.HTTPUser)
 }

-func checkRouteAuthByRequest(req *http.Request, rc *RouteConfig) bool {
-	if rc == nil {
-		return true
-	}
-	if rc.Username == "" && rc.Password == "" {
-		return true
-	}
-
-	if req.URL.Host != "" {
-		proxyAuth := req.Header.Get("Proxy-Authorization")
-		if proxyAuth == "" {
+func (rp *HTTPReverseProxy) CheckAuth(domain, location, routeByHTTPUser, user, passwd string) bool {
+	vr, ok := rp.getVhost(domain, location, routeByHTTPUser)
+	if ok {
+		checkUser := vr.payload.(*RouteConfig).Username
+		checkPasswd := vr.payload.(*RouteConfig).Password
+		if (checkUser != "" || checkPasswd != "") && (checkUser != user || checkPasswd != passwd) {
 			return false
 		}
-		user, passwd, ok := httppkg.ParseBasicAuth(proxyAuth)
-		return ok && user == rc.Username && passwd == rc.Password
 	}
-
-	user, passwd, ok := req.BasicAuth()
-	return ok && user == rc.Username && passwd == rc.Password
+	return true
 }

 // getVhost tries to get vhost router by route policy.
@@ -275,25 +266,18 @@ func (rp *HTTPReverseProxy) connectHandler(rw http.ResponseWriter, req *http.Req
 	go libio.Join(remote, client)
 }

-func getRequestRouteUser(req *http.Request) string {
+func (rp *HTTPReverseProxy) injectRequestInfoToCtx(req *http.Request) *http.Request {
+	user := ""
+	// If url host isn't empty, it's a proxy request. Get http user from Proxy-Authorization header.
 	if req.URL.Host != "" {
 		proxyAuth := req.Header.Get("Proxy-Authorization")
-		if proxyAuth == "" {
-			// Preserve legacy proxy-mode routing when clients send only Authorization,
-			// so requests still hit the matched route and return 407 instead of 404.
-			// Auth validation intentionally does not share this fallback.
-			user, _, _ := req.BasicAuth()
-			return user
+		if proxyAuth != "" {
+			user, _, _ = httppkg.ParseBasicAuth(proxyAuth)
 		}
-		user, _, _ := httppkg.ParseBasicAuth(proxyAuth)
-		return user
 	}
-	user, _, _ := req.BasicAuth()
-	return user
-}
-
-func (rp *HTTPReverseProxy) injectRequestInfoToCtx(req *http.Request) *http.Request {
-	user := getRequestRouteUser(req)
+	if user == "" {
+		user, _, _ = req.BasicAuth()
+	}

 	reqRouteInfo := &RequestRouteInfo{
 		URL:        req.URL.Path,
@@ -313,19 +297,16 @@ func (rp *HTTPReverseProxy) injectRequestInfoToCtx(req *http.Request) *http.Requ
 }

 func (rp *HTTPReverseProxy) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
-	newreq := rp.injectRequestInfoToCtx(req)
-	rc := newreq.Context().Value(RouteConfigKey).(*RouteConfig)
-	if !checkRouteAuthByRequest(req, rc) {
-		if req.URL.Host != "" {
-			rw.Header().Set("Proxy-Authenticate", `Basic realm="Restricted"`)
-			http.Error(rw, http.StatusText(http.StatusProxyAuthRequired), http.StatusProxyAuthRequired)
-		} else {
-			rw.Header().Set("WWW-Authenticate", `Basic realm="Restricted"`)
-			http.Error(rw, http.StatusText(http.StatusUnauthorized), http.StatusUnauthorized)
-		}
+	domain, _ := httppkg.CanonicalHost(req.Host)
+	location := req.URL.Path
+	user, passwd, _ := req.BasicAuth()
+	if !rp.CheckAuth(domain, location, user, user, passwd) {
+		rw.Header().Set("WWW-Authenticate", `Basic realm="Restricted"`)
+		http.Error(rw, http.StatusText(http.StatusUnauthorized), http.StatusUnauthorized)
 		return
 	}

+	newreq := rp.injectRequestInfoToCtx(req)
 	if req.Method == http.MethodConnect {
 		rp.connectHandler(rw, newreq)
 	} else {
--- a/pkg/util/vhost/http_test.go
+++ b/pkg/util/vhost/http_test.go
@@ -1,102 +0,0 @@
-package vhost
-
-import (
-	"net/http/httptest"
-	"testing"
-
-	"github.com/stretchr/testify/require"
-
-	httppkg "github.com/fatedier/frp/pkg/util/http"
-)
-
-func TestCheckRouteAuthByRequest(t *testing.T) {
-	rc := &RouteConfig{
-		Username: "alice",
-		Password: "secret",
-	}
-
-	t.Run("accepts nil route config", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "/", nil)
-		require.True(t, checkRouteAuthByRequest(req, nil))
-	})
-
-	t.Run("accepts route without credentials", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "/", nil)
-		require.True(t, checkRouteAuthByRequest(req, &RouteConfig{}))
-	})
-
-	t.Run("accepts authorization header", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "/", nil)
-		req.SetBasicAuth("alice", "secret")
-		require.True(t, checkRouteAuthByRequest(req, rc))
-	})
-
-	t.Run("accepts proxy authorization header", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "http://target.example.com/", nil)
-		req.Header.Set("Proxy-Authorization", httppkg.BasicAuth("alice", "secret"))
-		require.True(t, checkRouteAuthByRequest(req, rc))
-	})
-
-	t.Run("rejects authorization fallback for proxy request", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "http://target.example.com/", nil)
-		req.SetBasicAuth("alice", "secret")
-		require.False(t, checkRouteAuthByRequest(req, rc))
-	})
-
-	t.Run("rejects wrong proxy authorization even when authorization matches", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "http://target.example.com/", nil)
-		req.SetBasicAuth("alice", "secret")
-		req.Header.Set("Proxy-Authorization", httppkg.BasicAuth("alice", "wrong"))
-		require.False(t, checkRouteAuthByRequest(req, rc))
-	})
-
-	t.Run("rejects when neither header matches", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "http://target.example.com/", nil)
-		req.SetBasicAuth("alice", "wrong")
-		req.Header.Set("Proxy-Authorization", httppkg.BasicAuth("alice", "wrong"))
-		require.False(t, checkRouteAuthByRequest(req, rc))
-	})
-
-	t.Run("rejects proxy authorization on direct request", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "/", nil)
-		req.Header.Set("Proxy-Authorization", httppkg.BasicAuth("alice", "secret"))
-		require.False(t, checkRouteAuthByRequest(req, rc))
-	})
-}
-
-func TestGetRequestRouteUser(t *testing.T) {
-	t.Run("proxy request uses proxy authorization username", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "http://target.example.com/", nil)
-		req.Host = "target.example.com"
-		req.Header.Set("Proxy-Authorization", httppkg.BasicAuth("proxy-user", "proxy-pass"))
-		req.SetBasicAuth("direct-user", "direct-pass")
-
-		require.Equal(t, "proxy-user", getRequestRouteUser(req))
-	})
-
-	t.Run("connect request keeps proxy authorization routing", func(t *testing.T) {
-		req := httptest.NewRequest("CONNECT", "http://target.example.com:443", nil)
-		req.Host = "target.example.com:443"
-		req.Header.Set("Proxy-Authorization", httppkg.BasicAuth("proxy-user", "proxy-pass"))
-		req.SetBasicAuth("direct-user", "direct-pass")
-
-		require.Equal(t, "proxy-user", getRequestRouteUser(req))
-	})
-
-	t.Run("direct request uses authorization username", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "/", nil)
-		req.Host = "example.com"
-		req.SetBasicAuth("direct-user", "direct-pass")
-
-		require.Equal(t, "direct-user", getRequestRouteUser(req))
-	})
-
-	t.Run("proxy request does not fall back when proxy authorization is invalid", func(t *testing.T) {
-		req := httptest.NewRequest("GET", "http://target.example.com/", nil)
-		req.Host = "target.example.com"
-		req.Header.Set("Proxy-Authorization", "Basic !!!")
-		req.SetBasicAuth("direct-user", "direct-pass")
-
-		require.Empty(t, getRequestRouteUser(req))
-	})
-}
--- a/test/e2e/framework/framework.go
+++ b/test/e2e/framework/framework.go
@@ -241,31 +241,6 @@ func (f *Framework) AllocPort() int {
 	return port
 }

-func (f *Framework) AllocPortExcludingRanges(ranges ...[2]int) int {
-	for range 1000 {
-		port := f.portAllocator.Get()
-		ExpectTrue(port > 0, "alloc port failed")
-
-		inExcludedRange := false
-		for _, portRange := range ranges {
-			if port >= portRange[0] && port <= portRange[1] {
-				inExcludedRange = true
-				break
-			}
-		}
-		if inExcludedRange {
-			f.portAllocator.Release(port)
-			continue
-		}
-
-		f.allocatedPorts = append(f.allocatedPorts, port)
-		return port
-	}
-
-	Failf("alloc port outside excluded ranges failed")
-	return 0
-}
-
 func (f *Framework) ReleasePort(port int) {
 	f.portAllocator.Release(port)
 }
--- a/test/e2e/legacy/basic/server.go
+++ b/test/e2e/legacy/basic/server.go
@@ -20,8 +20,6 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 	ginkgo.It("Ports Whitelist", func() {
 		serverConf := consts.LegacyDefaultServerConfig
 		clientConf := consts.LegacyDefaultClientConfig
-		tcpPortNotAllowed := f.AllocPortExcludingRanges([2]int{10000, 11000}, [2]int{11002, 11002}, [2]int{12000, 13000})
-		udpPortNotAllowed := f.AllocPortExcludingRanges([2]int{10000, 11000}, [2]int{11002, 11002}, [2]int{12000, 13000})

 		serverConf += `
 			allow_ports = 10000-11000,11002,12000-13000
@@ -39,8 +37,8 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 			[tcp-port-not-allowed]
 			type = tcp
 			local_port = {{ .%s }}
-			remote_port = %d
-			`, framework.TCPEchoServerPort, tcpPortNotAllowed)
+			remote_port = 11001
+			`, framework.TCPEchoServerPort)
 		clientConf += fmt.Sprintf(`
 			[tcp-port-unavailable]
 			type = tcp
@@ -57,8 +55,8 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 			[udp-port-not-allowed]
 			type = udp
 			local_port = {{ .%s }}
-			remote_port = %d
-			`, framework.UDPEchoServerPort, udpPortNotAllowed)
+			remote_port = 11003
+			`, framework.UDPEchoServerPort)

 		f.RunProcesses(serverConf, []string{clientConf})

@@ -67,7 +65,7 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 		framework.NewRequestExpect(f).PortName(tcpPortName).Ensure()

 		// Not Allowed
-		framework.NewRequestExpect(f).Port(tcpPortNotAllowed).ExpectError(true).Ensure()
+		framework.NewRequestExpect(f).Port(11001).ExpectError(true).Ensure()

 		// Unavailable, already bind by frps
 		framework.NewRequestExpect(f).PortName(consts.PortServerName).ExpectError(true).Ensure()
@@ -78,7 +76,7 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {

 		// Not Allowed
 		framework.NewRequestExpect(f).RequestModify(func(r *request.Request) {
-			r.UDP().Port(udpPortNotAllowed)
+			r.UDP().Port(11003)
 		}).ExpectError(true).Ensure()
 	})

--- a/test/e2e/v1/basic/http.go
+++ b/test/e2e/v1/basic/http.go
@@ -144,79 +144,6 @@ var _ = ginkgo.Describe("[Feature: HTTP]", func() {
 			Ensure()
 	})

-	ginkgo.It("HTTP proxy mode uses proxy auth consistently", func() {
-		vhostHTTPPort := f.AllocPort()
-		serverConf := getDefaultServerConf(vhostHTTPPort)
-
-		backendPort := f.AllocPort()
-		f.RunServer("", newHTTPServer(backendPort, "PRIVATE"))
-
-		clientConf := consts.DefaultClientConfig
-		clientConf += fmt.Sprintf(`
-			[[proxies]]
-			name = "protected"
-			type = "http"
-			localPort = %d
-			customDomains = ["normal.example.com"]
-			routeByHTTPUser = "alice"
-			httpUser = "alice"
-			httpPassword = "secret"
-			`, backendPort)
-
-		f.RunProcesses(serverConf, []string{clientConf})
-
-		proxyURLWithAuth := func(username, password string) string {
-			if username == "" {
-				return fmt.Sprintf("http://127.0.0.1:%d", vhostHTTPPort)
-			}
-			return fmt.Sprintf("http://%s:%s@127.0.0.1:%d", username, password, vhostHTTPPort)
-		}
-
-		framework.NewRequestExpect(f).Explain("direct no auth").Port(vhostHTTPPort).
-			RequestModify(func(r *request.Request) {
-				r.HTTP().HTTPHost("normal.example.com")
-			}).
-			Ensure(framework.ExpectResponseCode(http.StatusNotFound))
-
-		framework.NewRequestExpect(f).Explain("direct correct auth").Port(vhostHTTPPort).
-			RequestModify(func(r *request.Request) {
-				r.HTTP().HTTPHost("normal.example.com").HTTPAuth("alice", "secret")
-			}).
-			ExpectResp([]byte("PRIVATE")).
-			Ensure()
-
-		framework.NewRequestExpect(f).Explain("direct wrong auth").Port(vhostHTTPPort).
-			RequestModify(func(r *request.Request) {
-				r.HTTP().HTTPHost("normal.example.com").HTTPAuth("alice", "wrong")
-			}).
-			Ensure(framework.ExpectResponseCode(http.StatusUnauthorized))
-
-		framework.NewRequestExpect(f).Explain("proxy correct proxy auth").
-			RequestModify(func(r *request.Request) {
-				r.HTTP().Addr("normal.example.com").Proxy(proxyURLWithAuth("alice", "secret"))
-			}).
-			ExpectResp([]byte("PRIVATE")).
-			Ensure()
-
-		framework.NewRequestExpect(f).Explain("proxy wrong proxy auth").
-			RequestModify(func(r *request.Request) {
-				r.HTTP().Addr("normal.example.com").Proxy(proxyURLWithAuth("alice", "wrong"))
-			}).
-			Ensure(framework.ExpectResponseCode(http.StatusProxyAuthRequired))
-
-		framework.NewRequestExpect(f).Explain("proxy request ignores authorization header").
-			RequestModify(func(r *request.Request) {
-				r.HTTP().Addr("normal.example.com").Proxy(proxyURLWithAuth("", "")).HTTPAuth("alice", "secret")
-			}).
-			Ensure(framework.ExpectResponseCode(http.StatusProxyAuthRequired))
-
-		framework.NewRequestExpect(f).Explain("proxy wrong proxy auth with correct authorization").
-			RequestModify(func(r *request.Request) {
-				r.HTTP().Addr("normal.example.com").Proxy(proxyURLWithAuth("alice", "wrong")).HTTPAuth("alice", "secret")
-			}).
-			Ensure(framework.ExpectResponseCode(http.StatusProxyAuthRequired))
-	})
-
 	ginkgo.It("HTTP Basic Auth", func() {
 		vhostHTTPPort := f.AllocPort()
 		serverConf := getDefaultServerConf(vhostHTTPPort)
--- a/test/e2e/v1/basic/server.go
+++ b/test/e2e/v1/basic/server.go
@@ -20,8 +20,6 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 	ginkgo.It("Ports Whitelist", func() {
 		serverConf := consts.DefaultServerConfig
 		clientConf := consts.DefaultClientConfig
-		tcpPortNotAllowed := f.AllocPortExcludingRanges([2]int{10000, 11000}, [2]int{11002, 11002}, [2]int{12000, 13000})
-		udpPortNotAllowed := f.AllocPortExcludingRanges([2]int{10000, 11000}, [2]int{11002, 11002}, [2]int{12000, 13000})

 		serverConf += `
 		allowPorts = [
@@ -45,8 +43,8 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 			name = "tcp-port-not-allowed"
 			type = "tcp"
 			localPort = {{ .%s }}
-			remotePort = %d
-			`, framework.TCPEchoServerPort, tcpPortNotAllowed)
+			remotePort = 11001
+			`, framework.TCPEchoServerPort)
 		clientConf += fmt.Sprintf(`
 			[[proxies]]
 			name = "tcp-port-unavailable"
@@ -66,8 +64,8 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 			name = "udp-port-not-allowed"
 			type = "udp"
 			localPort = {{ .%s }}
-			remotePort = %d
-			`, framework.UDPEchoServerPort, udpPortNotAllowed)
+			remotePort = 11003
+			`, framework.UDPEchoServerPort)

 		f.RunProcesses(serverConf, []string{clientConf})

@@ -76,7 +74,7 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {
 		framework.NewRequestExpect(f).PortName(tcpPortName).Ensure()

 		// Not Allowed
-		framework.NewRequestExpect(f).Port(tcpPortNotAllowed).ExpectError(true).Ensure()
+		framework.NewRequestExpect(f).Port(11001).ExpectError(true).Ensure()

 		// Unavailable, already bind by frps
 		framework.NewRequestExpect(f).PortName(consts.PortServerName).ExpectError(true).Ensure()
@@ -87,7 +85,7 @@ var _ = ginkgo.Describe("[Feature: Server Manager]", func() {

 		// Not Allowed
 		framework.NewRequestExpect(f).RequestModify(func(r *request.Request) {
-			r.UDP().Port(udpPortNotAllowed)
+			r.UDP().Port(11003)
 		}).ExpectError(true).Ensure()
 	})

--- a/web/frpc/Makefile
+++ b/web/frpc/Makefile
@@ -1,7 +1,7 @@
 .PHONY: dist install build preview lint

 install:
-	@cd .. && npm install
+	@npm install

 build: install
 	@npm run build
--- a/web/frpc/components.d.ts
+++ b/web/frpc/components.d.ts
@@ -7,8 +7,11 @@ export {}

 declare module 'vue' {
  export interface GlobalComponents {
+    ActionButton: typeof import('./src/components/ActionButton.vue')['default']
+    BaseDialog: typeof import('./src/components/BaseDialog.vue')['default']
    ConfigField: typeof import('./src/components/ConfigField.vue')['default']
    ConfigSection: typeof import('./src/components/ConfigSection.vue')['default']
+    ConfirmDialog: typeof import('./src/components/ConfirmDialog.vue')['default']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -18,7 +21,10 @@ declare module 'vue' {
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    FilterDropdown: typeof import('./src/components/FilterDropdown.vue')['default']
    KeyValueEditor: typeof import('./src/components/KeyValueEditor.vue')['default']
+    PopoverMenu: typeof import('./src/components/PopoverMenu.vue')['default']
+    PopoverMenuItem: typeof import('./src/components/PopoverMenuItem.vue')['default']
    ProxyAuthSection: typeof import('./src/components/proxy-form/ProxyAuthSection.vue')['default']
    ProxyBackendSection: typeof import('./src/components/proxy-form/ProxyBackendSection.vue')['default']
    ProxyBaseSection: typeof import('./src/components/proxy-form/ProxyBaseSection.vue')['default']
--- a/web/frpc/package-lock.json
+++ b/web/frpc/package-lock.json
--- a/web/frpc/src/assets/css/_form-layout.scss
+++ b/web/frpc/src/assets/css/_form-layout.scss
@@ -1,4 +1,4 @@
-@use '@shared/css/mixins' as *;
+@use './mixins' as *;

 /* Shared form layout styles for proxy/visitor form sections */
 .field-row {
--- a/web/frpc/src/assets/css/_index.scss
+++ b/web/frpc/src/assets/css/_index.scss
--- a/web/frpc/src/assets/css/_mixins.scss
+++ b/web/frpc/src/assets/css/_mixins.scss
--- a/web/frpc/src/assets/css/_variables.scss
+++ b/web/frpc/src/assets/css/_variables.scss
--- a/web/frpc/src/components/ActionButton.vue
+++ b/web/frpc/src/components/ActionButton.vue
--- a/web/frpc/src/components/BaseDialog.vue
+++ b/web/frpc/src/components/BaseDialog.vue
@@ -21,6 +21,7 @@

 <script setup lang="ts">
 import { computed } from 'vue'
+import { useResponsive } from '../composables/useResponsive'

 const props = withDefaults(
  defineProps<{
@@ -32,7 +33,6 @@ const props = withDefaults(
    closeOnPressEscape?: boolean
    appendToBody?: boolean
    top?: string
-    isMobile?: boolean
  }>(),
  {
    width: '480px',
@@ -41,7 +41,6 @@ const props = withDefaults(
    closeOnPressEscape: true,
    appendToBody: false,
    top: '15vh',
-    isMobile: false,
  },
 )

@@ -54,13 +53,15 @@ const visible = computed({
  set: (value) => emit('update:modelValue', value),
 })

+const { isMobile } = useResponsive()
+
 const dialogWidth = computed(() => {
-  if (props.isMobile) return '100%'
+  if (isMobile.value) return '100%'
  return props.width
 })

 const dialogTop = computed(() => {
-  if (props.isMobile) return '0'
+  if (isMobile.value) return '0'
  return props.top
 })
 </script>
--- a/web/frpc/src/components/ConfigField.vue
+++ b/web/frpc/src/components/ConfigField.vue
@@ -115,8 +115,8 @@
 import { computed } from 'vue'
 import KeyValueEditor from './KeyValueEditor.vue'
 import StringListEditor from './StringListEditor.vue'
-import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
+import PopoverMenu from './PopoverMenu.vue'
+import PopoverMenuItem from './PopoverMenuItem.vue'

 const props = withDefaults(
  defineProps<{
--- a/web/frpc/src/components/ConfirmDialog.vue
+++ b/web/frpc/src/components/ConfirmDialog.vue
@@ -5,7 +5,6 @@
    width="400px"
    :close-on-click-modal="false"
    :append-to-body="true"
-    :is-mobile="isMobile"
  >
    <p class="confirm-message">{{ message }}</p>
    <template #footer>
@@ -28,7 +27,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import BaseDialog from './BaseDialog.vue'
-import ActionButton from '@shared/components/ActionButton.vue'
+import ActionButton from './ActionButton.vue'

 const props = withDefaults(
  defineProps<{
@@ -39,14 +38,12 @@ const props = withDefaults(
    cancelText?: string
    danger?: boolean
    loading?: boolean
-    isMobile?: boolean
  }>(),
  {
    confirmText: 'Confirm',
    cancelText: 'Cancel',
    danger: false,
    loading: false,
-    isMobile: false,
  },
 )

--- a/web/frpc/src/components/FilterDropdown.vue
+++ b/web/frpc/src/components/FilterDropdown.vue
@@ -30,6 +30,9 @@ import { computed } from 'vue'
 import { ArrowDown } from '@element-plus/icons-vue'
 import PopoverMenu from './PopoverMenu.vue'
 import PopoverMenuItem from './PopoverMenuItem.vue'
+import { useResponsive } from '../composables/useResponsive'
+
+const { isMobile } = useResponsive()

 interface Props {
  modelValue: string
@@ -38,7 +41,6 @@ interface Props {
  allLabel?: string
  width?: number
  minWidth?: number
-  isMobile?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
--- a/web/frpc/src/components/PopoverMenu.vue
+++ b/web/frpc/src/components/PopoverMenu.vue
--- a/web/frpc/src/components/PopoverMenuItem.vue
+++ b/web/frpc/src/components/PopoverMenuItem.vue
--- a/web/frpc/src/components/ProxyCard.vue
+++ b/web/frpc/src/components/ProxyCard.vue
@@ -53,9 +53,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { MoreFilled, Edit, Delete, Open, TurnOff } from '@element-plus/icons-vue'
-import ActionButton from '@shared/components/ActionButton.vue'
-import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
+import ActionButton from './ActionButton.vue'
+import PopoverMenu from './PopoverMenu.vue'
+import PopoverMenuItem from './PopoverMenuItem.vue'
 import type { ProxyStatus } from '../types'

 interface Props {
--- a/web/frpc/src/router/index.ts
+++ b/web/frpc/src/router/index.ts
@@ -1,12 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import ClientConfigure from '../views/ClientConfigure.vue'
-import ProxyDetail from '../views/ProxyDetail.vue'
 import ProxyEdit from '../views/ProxyEdit.vue'
-import ProxyList from '../views/ProxyList.vue'
-import VisitorDetail from '../views/VisitorDetail.vue'
 import VisitorEdit from '../views/VisitorEdit.vue'
-import VisitorList from '../views/VisitorList.vue'
 import { useProxyStore } from '../stores/proxy'

 const router = createRouter({
@@ -19,12 +15,12 @@ const router = createRouter({
    {
      path: '/proxies',
      name: 'ProxyList',
-      component: ProxyList,
+      component: () => import('../views/ProxyList.vue'),
    },
    {
      path: '/proxies/detail/:name',
      name: 'ProxyDetail',
-      component: ProxyDetail,
+      component: () => import('../views/ProxyDetail.vue'),
    },
    {
      path: '/proxies/create',
@@ -41,12 +37,12 @@ const router = createRouter({
    {
      path: '/visitors',
      name: 'VisitorList',
-      component: VisitorList,
+      component: () => import('../views/VisitorList.vue'),
    },
    {
      path: '/visitors/detail/:name',
      name: 'VisitorDetail',
-      component: VisitorDetail,
+      component: () => import('../views/VisitorDetail.vue'),
    },
    {
      path: '/visitors/create',
--- a/web/frpc/src/views/ClientConfigure.vue
+++ b/web/frpc/src/views/ClientConfigure.vue
@@ -41,7 +41,6 @@ serverPort = 7000"
      message="This operation will update your frpc configuration and reload it. Do you want to continue?"
      confirm-text="Update"
      :loading="uploading"
-      :is-mobile="isMobile"
      @confirm="doUpload"
    />
  </div>
@@ -52,11 +51,9 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Link } from '@element-plus/icons-vue'
 import { useClientStore } from '../stores/client'
-import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
-import { useResponsive } from '../composables/useResponsive'
+import ActionButton from '../components/ActionButton.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'

-const { isMobile } = useResponsive()
 const clientStore = useClientStore()
 const configContent = ref('')

--- a/web/frpc/src/views/ProxyDetail.vue
+++ b/web/frpc/src/views/ProxyDetail.vue
@@ -69,7 +69,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Warning } from '@element-plus/icons-vue'
-import ActionButton from '@shared/components/ActionButton.vue'
+import ActionButton from '../components/ActionButton.vue'
 import ProxyFormLayout from '../components/proxy-form/ProxyFormLayout.vue'
 import { getProxyConfig, getStoreProxy } from '../api/frpc'
 import { useProxyStore } from '../stores/proxy'
--- a/web/frpc/src/views/ProxyEdit.vue
+++ b/web/frpc/src/views/ProxyEdit.vue
@@ -31,7 +31,6 @@
      v-model="leaveDialogVisible"
      title="Unsaved Changes"
      message="You have unsaved changes. Are you sure you want to leave?"
-      :is-mobile="isMobile"
      @confirm="handleLeaveConfirm"
      @cancel="handleLeaveCancel"
    />
@@ -51,12 +50,10 @@ import {
 } from '../types'
 import { getStoreProxy } from '../api/frpc'
 import { useProxyStore } from '../stores/proxy'
-import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import ActionButton from '../components/ActionButton.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 import ProxyFormLayout from '../components/proxy-form/ProxyFormLayout.vue'
-import { useResponsive } from '../composables/useResponsive'

-const { isMobile } = useResponsive()
 const route = useRoute()
 const router = useRouter()
 const proxyStore = useProxyStore()
--- a/web/frpc/src/views/ProxyList.vue
+++ b/web/frpc/src/views/ProxyList.vue
@@ -30,8 +30,8 @@
          <el-input v-model="searchText" placeholder="Search..." clearable class="search-input">
            <template #prefix><el-icon><Search /></el-icon></template>
          </el-input>
-          <FilterDropdown v-model="sourceFilter" label="Source" :options="sourceOptions" :min-width="140" :is-mobile="isMobile" />
-          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" :is-mobile="isMobile" />
+          <FilterDropdown v-model="sourceFilter" label="Source" :options="sourceOptions" :min-width="140" />
+          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" />
        </div>
      </template>

@@ -41,7 +41,7 @@
          <el-input v-model="storeSearch" placeholder="Search..." clearable class="search-input">
            <template #prefix><el-icon><Search /></el-icon></template>
          </el-input>
-          <FilterDropdown v-model="storeTypeFilter" label="Type" :options="storeTypeOptions" :min-width="140" :is-mobile="isMobile" />
+          <FilterDropdown v-model="storeTypeFilter" label="Type" :options="storeTypeOptions" :min-width="140" />
        </div>
      </template>
    </div>
@@ -100,7 +100,6 @@ path = "./frpc_store.json"</pre>
      confirm-text="Delete"
      danger
      :loading="deleteDialog.loading"
-      :is-mobile="isMobile"
      @confirm="doDelete"
    />
  </div>
@@ -111,11 +110,11 @@ import { ref, computed, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh } from '@element-plus/icons-vue'
-import ActionButton from '@shared/components/ActionButton.vue'
+import ActionButton from '../components/ActionButton.vue'
 import StatusPills from '../components/StatusPills.vue'
-import FilterDropdown from '@shared/components/FilterDropdown.vue'
+import FilterDropdown from '../components/FilterDropdown.vue'
 import ProxyCard from '../components/ProxyCard.vue'
-import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 import { useProxyStore } from '../stores/proxy'
 import { useResponsive } from '../composables/useResponsive'
 import type { ProxyStatus } from '../types'
--- a/web/frpc/src/views/VisitorDetail.vue
+++ b/web/frpc/src/views/VisitorDetail.vue
@@ -48,7 +48,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import ActionButton from '@shared/components/ActionButton.vue'
+import ActionButton from '../components/ActionButton.vue'
 import VisitorFormLayout from '../components/visitor-form/VisitorFormLayout.vue'
 import { getVisitorConfig, getStoreVisitor } from '../api/frpc'
 import type { VisitorDefinition, VisitorFormData } from '../types'
--- a/web/frpc/src/views/VisitorEdit.vue
+++ b/web/frpc/src/views/VisitorEdit.vue
@@ -30,7 +30,6 @@
      v-model="leaveDialogVisible"
      title="Unsaved Changes"
      message="You have unsaved changes. Are you sure you want to leave?"
-      :is-mobile="isMobile"
      @confirm="handleLeaveConfirm"
      @cancel="handleLeaveCancel"
    />
@@ -41,10 +40,9 @@
 import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import ActionButton from '../components/ActionButton.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 import VisitorFormLayout from '../components/visitor-form/VisitorFormLayout.vue'
-import { useResponsive } from '../composables/useResponsive'
 import type { FormInstance, FormRules } from 'element-plus'
 import {
  type VisitorFormData,
@@ -55,7 +53,6 @@ import {
 import { getStoreVisitor } from '../api/frpc'
 import { useVisitorStore } from '../stores/visitor'

-const { isMobile } = useResponsive()
 const route = useRoute()
 const router = useRouter()
 const visitorStore = useVisitorStore()
--- a/web/frpc/src/views/VisitorList.vue
+++ b/web/frpc/src/views/VisitorList.vue
@@ -32,7 +32,7 @@ path = "./frpc_store.json"</pre>
          <el-input v-model="searchText" placeholder="Search..." clearable class="search-input">
            <template #prefix><el-icon><Search /></el-icon></template>
          </el-input>
-          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" :is-mobile="isMobile" />
+          <FilterDropdown v-model="typeFilter" label="Type" :options="typeOptions" :min-width="140" />
        </div>

        <div v-if="filteredVisitors.length > 0" class="visitor-list">
@@ -74,7 +74,7 @@ path = "./frpc_store.json"</pre>

    <ConfirmDialog v-model="deleteDialog.visible" title="Delete Visitor"
      :message="deleteDialog.message" confirm-text="Delete" danger
-      :loading="deleteDialog.loading" :is-mobile="isMobile" @confirm="doDelete" />
+      :loading="deleteDialog.loading" @confirm="doDelete" />
  </div>
 </template>

@@ -83,16 +83,14 @@ import { ref, computed, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh, MoreFilled, Edit, Delete } from '@element-plus/icons-vue'
-import ActionButton from '@shared/components/ActionButton.vue'
-import FilterDropdown from '@shared/components/FilterDropdown.vue'
-import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
-import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import ActionButton from '../components/ActionButton.vue'
+import FilterDropdown from '../components/FilterDropdown.vue'
+import PopoverMenu from '../components/PopoverMenu.vue'
+import PopoverMenuItem from '../components/PopoverMenuItem.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 import { useVisitorStore } from '../stores/visitor'
-import { useResponsive } from '../composables/useResponsive'
 import type { VisitorDefinition } from '../types'

-const { isMobile } = useResponsive()
 const router = useRouter()
 const visitorStore = useVisitorStore()

--- a/web/frpc/tsconfig.json
+++ b/web/frpc/tsconfig.json
@@ -18,12 +18,8 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "@shared/*": ["../shared/*"]
-    }
+    "noFallthroughCasesInSwitch": true
  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../shared/**/*.ts", "../shared/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/web/frpc/vite.config.mts
+++ b/web/frpc/vite.config.mts
@@ -25,19 +25,13 @@ export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
    },
-    dedupe: ['vue', 'element-plus', '@element-plus/icons-vue'],
-    modules: [
-      fileURLToPath(new URL('../node_modules', import.meta.url)),
-      'node_modules',
-    ],
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
-        additionalData: `@use "@shared/css/_index.scss" as *;`,
+        additionalData: `@use "@/assets/css/_index.scss" as *;`,
      },
    },
  },
--- a/web/frps/Makefile
+++ b/web/frps/Makefile
@@ -1,7 +1,7 @@
 .PHONY: dist install build preview lint

 install:
-	@cd .. && npm install
+	@npm install

 build: install
 	@npm run build
--- a/web/frps/components.d.ts
+++ b/web/frps/components.d.ts
@@ -11,12 +11,13 @@ declare module 'vue' {
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCol: typeof import('element-plus/es')['ElCol']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElEmpty: typeof import('element-plus/es')['ElEmpty']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
--- a/web/frps/package-lock.json
+++ b/web/frps/package-lock.json
--- a/web/frps/src/App.vue
+++ b/web/frps/src/App.vue
@@ -2,195 +2,135 @@
  <div id="app">
    <header class="header">
      <div class="header-content">
-        <div class="brand-section">
-          <button
-            v-if="isMobile"
-            class="hamburger-btn"
-            @click="toggleSidebar"
-            aria-label="Toggle menu"
-          >
-            <span class="hamburger-icon">&#9776;</span>
-          </button>
-          <div class="logo-wrapper">
-            <LogoIcon class="logo-icon" />
+        <div class="header-top">
+          <div class="brand-section">
+            <div class="logo-wrapper">
+              <LogoIcon class="logo-icon" />
+            </div>
+            <span class="divider">/</span>
+            <span class="brand-name">frp</span>
+            <span class="badge server-badge">Server</span>
+            <span class="badge" v-if="currentRouteName">{{
+              currentRouteName
+            }}</span>
+          </div>
+
+          <div class="header-controls">
+            <a
+              class="github-link"
+              href="https://github.com/fatedier/frp"
+              target="_blank"
+              aria-label="GitHub"
+            >
+              <GitHubIcon class="github-icon" />
+            </a>
+            <el-switch
+              v-model="isDark"
+              inline-prompt
+              :active-icon="Moon"
+              :inactive-icon="Sunny"
+              class="theme-switch"
+            />
          </div>
-          <span class="divider">/</span>
-          <span class="brand-name">frp</span>
-          <span class="badge server-badge">Server</span>
        </div>

-        <div class="header-controls">
-          <a
-            class="github-link"
-            href="https://github.com/fatedier/frp"
-            target="_blank"
-            aria-label="GitHub"
+        <nav class="nav-bar">
+          <router-link to="/" class="nav-link" active-class="active"
+            >Overview</router-link
          >
-            <GitHubIcon class="github-icon" />
-          </a>
-          <el-switch
-            v-model="isDark"
-            inline-prompt
-            :active-icon="Moon"
-            :inactive-icon="Sunny"
-            class="theme-switch"
-          />
-        </div>
+          <router-link to="/clients" class="nav-link" active-class="active"
+            >Clients</router-link
+          >
+          <router-link
+            to="/proxies"
+            class="nav-link"
+            :class="{ active: route.path.startsWith('/proxies') }"
+            >Proxies</router-link
+          >
+        </nav>
      </div>
    </header>

-    <div class="layout">
-      <!-- Mobile overlay -->
-      <div
-        v-if="isMobile && sidebarOpen"
-        class="sidebar-overlay"
-        @click="closeSidebar"
-      />
-
-      <aside
-        class="sidebar"
-        :class="{ 'mobile-open': isMobile && sidebarOpen }"
-      >
-        <nav class="sidebar-nav">
-          <router-link
-            to="/"
-            class="sidebar-link"
-            :class="{ active: route.path === '/' }"
-            @click="closeSidebar"
-          >
-            Overview
-          </router-link>
-          <router-link
-            to="/clients"
-            class="sidebar-link"
-            :class="{ active: route.path.startsWith('/clients') }"
-            @click="closeSidebar"
-          >
-            Clients
-          </router-link>
-          <router-link
-            to="/proxies"
-            class="sidebar-link"
-            :class="{
-              active:
-                route.path.startsWith('/proxies') ||
-                route.path.startsWith('/proxy'),
-            }"
-            @click="closeSidebar"
-          >
-            Proxies
-          </router-link>
-        </nav>
-      </aside>
-
-      <main id="content">
-        <router-view></router-view>
-      </main>
-    </div>
+    <main id="content">
+      <router-view></router-view>
+    </main>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDark } from '@vueuse/core'
 import { Moon, Sunny } from '@element-plus/icons-vue'
 import GitHubIcon from './assets/icons/github.svg?component'
 import LogoIcon from './assets/icons/logo.svg?component'
-import { useResponsive } from './composables/useResponsive'

 const route = useRoute()
 const isDark = useDark()
-const { isMobile } = useResponsive()

-const sidebarOpen = ref(false)
-
-const toggleSidebar = () => {
-  sidebarOpen.value = !sidebarOpen.value
-}
-
-const closeSidebar = () => {
-  sidebarOpen.value = false
-}
-
-// Auto-close sidebar on route change
-watch(
-  () => route.path,
-  () => {
-    if (isMobile.value) {
-      closeSidebar()
-    }
-  },
-)
+const currentRouteName = computed(() => {
+  if (route.path === '/') return 'Overview'
+  if (route.path.startsWith('/clients')) return 'Clients'
+  if (route.path.startsWith('/proxies')) return 'Proxies'
+  return ''
+})
 </script>

 <style>
 :root {
-  --header-height: 50px;
-  --sidebar-width: 200px;
-  --header-bg: #ffffff;
-  --header-border: #e4e7ed;
-  --sidebar-bg: #ffffff;
-  --text-primary: #303133;
-  --text-secondary: #606266;
-  --text-muted: #909399;
-  --hover-bg: #efefef;
-  --content-bg: #f9f9f9;
+  --header-height: 112px;
+  --header-bg: rgba(255, 255, 255, 0.8);
+  --header-border: #eaeaea;
+  --text-primary: #000;
+  --text-secondary: #666;
+  --hover-bg: #f5f5f5;
+  --active-link: #000;
 }

 html.dark {
-  --header-bg: #1e1e2e;
-  --header-border: #3a3d5c;
-  --sidebar-bg: #1e1e2e;
-  --text-primary: #e5e7eb;
-  --text-secondary: #b0b0b0;
-  --text-muted: #888888;
-  --hover-bg: #2a2a3e;
-  --content-bg: #181825;
+  --header-bg: rgba(0, 0, 0, 0.8);
+  --header-border: #333;
+  --text-primary: #fff;
+  --text-secondary: #888;
+  --hover-bg: #1a1a1a;
+  --active-link: #fff;
 }

 body {
  margin: 0;
  font-family:
-    ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Arial,
-    sans-serif;
-}
-
-*,
-:after,
-:before {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
 }

 #app {
-  height: 100vh;
-  height: 100dvh;
+  min-height: 100vh;
  display: flex;
  flex-direction: column;
-  background-color: var(--content-bg);
+  background-color: var(--el-bg-color-page);
 }

-/* Header */
 .header {
-  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
  background: var(--header-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--header-border);
-  height: var(--header-height);
 }

 .header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+
+.header-top {
+  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  height: 100%;
-  padding: 0 20px;
 }

 .brand-section {
@@ -205,13 +145,13 @@ body {
 }

 .logo-icon {
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
 }

 .divider {
  color: var(--header-border);
-  font-size: 22px;
+  font-size: 24px;
  font-weight: 200;
 }

@@ -223,12 +163,12 @@ body {
 }

 .badge {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--text-muted);
+  font-size: 12px;
+  color: var(--text-secondary);
  background: var(--hover-bg);
  padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: 99px;
+  border: 1px solid var(--header-border);
 }

 .badge.server-badge {
@@ -249,20 +189,17 @@ html.dark .badge.server-badge {
 }

 .github-link {
+  width: 26px;
+  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  color: var(--text-secondary);
-  transition: all 0.15s ease;
-  text-decoration: none;
-}
-
-.github-link:hover {
-  background: var(--hover-bg);
+  border-radius: 50%;
  color: var(--text-primary);
+  transition: background 0.2s;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
 }

 .github-icon {
@@ -270,6 +207,11 @@ html.dark .badge.server-badge {
  height: 18px;
 }

+.github-link:hover {
+  background: var(--hover-bg);
+  border-color: var(--header-border);
+}
+
 .theme-switch {
  --el-switch-on-color: #2c2c3a;
  --el-switch-off-color: #f2f2f2;
@@ -284,235 +226,46 @@ html.dark .theme-switch {
  color: #909399 !important;
 }

-/* Layout */
-.layout {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-}
-
-/* Sidebar */
-.sidebar {
-  width: var(--sidebar-width);
-  flex-shrink: 0;
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--header-border);
-  padding: 16px 12px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.sidebar-link {
-  display: block;
-  text-decoration: none;
-  font-size: 15px;
-  color: var(--text-secondary);
-  padding: 10px 12px;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-}
-
-.sidebar-link:hover {
-  color: var(--text-primary);
-  background: var(--hover-bg);
-}
-
-.sidebar-link.active {
-  color: var(--text-primary);
-  background: var(--hover-bg);
-  font-weight: 500;
-}
-
-/* Hamburger button (mobile only) */
-.hamburger-btn {
+.nav-bar {
+  height: 48px;
  display: flex;
  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  transition: background 0.15s ease;
+  gap: 24px;
 }

-.hamburger-btn:hover {
-  background: var(--hover-bg);
+.nav-link {
+  text-decoration: none;
+  font-size: 14px;
+  color: var(--text-secondary);
+  padding: 8px 0;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
 }

-.hamburger-icon {
-  font-size: 20px;
-  line-height: 1;
+.nav-link:hover {
  color: var(--text-primary);
 }

-/* Mobile overlay */
-.sidebar-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 99;
+.nav-link.active {
+  color: var(--active-link);
+  border-bottom-color: var(--active-link);
 }

-/* Content */
 #content {
  flex: 1;
-  min-width: 0;
-  overflow-y: auto;
+  width: 100%;
  padding: 40px;
-}
-
-#content > * {
-  max-width: 1024px;
+  max-width: 1200px;
  margin: 0 auto;
+  box-sizing: border-box;
 }

-/* Common page styles */
-.page-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--color-text-primary, var(--text-primary));
-  margin: 0;
-}
-
-.page-subtitle {
-  font-size: 14px;
-  color: var(--color-text-muted, var(--text-muted));
-  margin: 8px 0 0;
-}
-
-/* Element Plus global overrides */
-.el-button {
-  font-weight: 500;
-}
-
-.el-tag {
-  font-weight: 500;
-}
-
-.el-switch {
-  --el-switch-on-color: #606266;
-  --el-switch-off-color: #dcdfe6;
-}
-
-html.dark .el-switch {
-  --el-switch-on-color: #b0b0b0;
-  --el-switch-off-color: #3a3d5c;
-}
-
-.el-form-item {
-  margin-bottom: 16px;
-}
-
-.el-loading-mask {
-  border-radius: 8px;
-}
-
-/* Select overrides */
-.el-select__wrapper {
-  border-radius: 8px !important;
-  box-shadow: 0 0 0 1px var(--color-border-light, #e4e7ed) inset !important;
-  transition: all 0.15s ease;
-}
-
-.el-select__wrapper:hover {
-  box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
-}
-
-.el-select__wrapper.is-focused {
-  box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
-}
-
-.el-select-dropdown {
-  border-radius: 12px !important;
-  border: 1px solid var(--color-border-light, #e4e7ed) !important;
-  box-shadow:
-    0 10px 25px -5px rgba(0, 0, 0, 0.1),
-    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
-  padding: 4px !important;
-}
-
-.el-select-dropdown__item {
-  border-radius: 6px;
-  margin: 2px 0;
-  transition: background 0.15s ease;
-}
-
-.el-select-dropdown__item.is-selected {
-  color: var(--color-text-primary, var(--text-primary));
-  font-weight: 500;
-}
-
-/* Input overrides */
-.el-input__wrapper {
-  border-radius: 8px !important;
-  box-shadow: 0 0 0 1px var(--color-border-light, #e4e7ed) inset !important;
-  transition: all 0.15s ease;
-}
-
-.el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
-}
-
-.el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 1px var(--color-border, #dcdfe6) inset !important;
-}
-
-/* Card overrides */
-.el-card {
-  border-radius: 12px;
-  border: 1px solid var(--color-border-light, #e4e7ed);
-  transition: all 0.2s ease;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #d1d1d1;
-  border-radius: 3px;
-}
-
-/* Mobile */
-@media (max-width: 767px) {
+@media (max-width: 768px) {
  .header-content {
-    padding: 0 16px;
-  }
-
-  .sidebar {
-    position: fixed;
-    top: var(--header-height);
-    left: 0;
-    bottom: 0;
-    z-index: 100;
-    background: var(--sidebar-bg);
-    transform: translateX(-100%);
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    border-right: 1px solid var(--header-border);
-  }
-
-  .sidebar.mobile-open {
-    transform: translateX(0);
+    padding: 0 20px;
  }

  #content {
-    width: 100%;
    padding: 20px;
  }
 }
--- a/web/frps/src/assets/css/custom.css
+++ b/web/frps/src/assets/css/custom.css
@@ -0,0 +1,89 @@
+.el-form-item span {
+  margin-left: 15px;
+}
+
+.proxy-table-expand {
+  font-size: 0;
+}
+
+.proxy-table-expand .el-form-item__label{
+  width: 90px;
+  color: #99a9bf;
+}
+
+.proxy-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+
+.el-table .el-table__expanded-cell {
+  padding: 20px 50px;
+}
+
+/* Modern styles */
+* {
+  box-sizing: border-box;
+}
+
+/* Smooth transitions */
+.el-button,
+.el-card,
+.el-input,
+.el-select,
+.el-tag {
+  transition: all 0.3s ease;
+}
+
+/* Card hover effects */
+.el-card:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* Better scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Page headers */
+.el-page-header {
+  padding: 16px 0;
+}
+
+.el-page-header__title {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+/* Better form layouts */
+.el-form-item {
+  margin-bottom: 18px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .el-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .el-col {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+}
--- a/web/frps/src/assets/css/dark.css
+++ b/web/frps/src/assets/css/dark.css
@@ -1,153 +1,46 @@
-/* Dark mode styles */
 html.dark {
  --el-bg-color: #1e1e2e;
-  --el-bg-color-page: #181825;
-  --el-bg-color-overlay: #27293d;
  --el-fill-color-blank: #1e1e2e;
-  --el-border-color: #3a3d5c;
-  --el-border-color-light: #313348;
-  --el-border-color-lighter: #2a2a3e;
-  --el-text-color-primary: #e5e7eb;
-  --el-text-color-secondary: #888888;
-  --el-text-color-placeholder: #afafaf;
  background-color: #1e1e2e;
-  color-scheme: dark;
 }

-/* Scrollbar */
-html.dark ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+html.dark body {
+  background-color: #1e1e2e;
+  color: #e5e7eb;
 }

+/* Dark mode scrollbar */
 html.dark ::-webkit-scrollbar-track {
  background: #27293d;
 }

 html.dark ::-webkit-scrollbar-thumb {
  background: #3a3d5c;
-  border-radius: 3px;
 }

 html.dark ::-webkit-scrollbar-thumb:hover {
  background: #4a4d6c;
 }

-/* Form */
-html.dark .el-form-item__label {
-  color: #e5e7eb;
+/* Dark mode cards */
+html.dark .el-card {
+  background-color: #27293d;
+  border-color: #3a3d5c;
 }

-/* Input */
+/* Dark mode inputs */
 html.dark .el-input__wrapper {
-  background: var(--color-bg-input);
-  box-shadow: 0 0 0 1px #3a3d5c inset;
-}
-
-html.dark .el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px #4a4d6c inset;
-}
-
-html.dark .el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+  background-color: #27293d;
+  border-color: #3a3d5c;
 }

 html.dark .el-input__inner {
  color: #e5e7eb;
 }

-html.dark .el-input__inner::placeholder {
-  color: #afafaf;
-}
-
-html.dark .el-textarea__inner {
-  background: var(--color-bg-input);
-  box-shadow: 0 0 0 1px #3a3d5c inset;
-  color: #e5e7eb;
-}
-
-html.dark .el-textarea__inner:hover {
-  box-shadow: 0 0 0 1px #4a4d6c inset;
-}
-
-html.dark .el-textarea__inner:focus {
-  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
-}
-
-/* Select */
-html.dark .el-select__wrapper {
-  background: var(--color-bg-input);
-  box-shadow: 0 0 0 1px #3a3d5c inset;
-}
-
-html.dark .el-select__wrapper:hover {
-  box-shadow: 0 0 0 1px #4a4d6c inset;
-}
-
-html.dark .el-select__selected-item {
-  color: #e5e7eb;
-}
-
-html.dark .el-select__placeholder {
-  color: #afafaf;
-}
-
-html.dark .el-select-dropdown {
-  background: #27293d;
-  border-color: #3a3d5c;
-}
-
-html.dark .el-select-dropdown__item {
-  color: #e5e7eb;
-}
-
-html.dark .el-select-dropdown__item:hover {
-  background: #2a2a3e;
-}
-
-html.dark .el-select-dropdown__item.is-selected {
-  color: var(--el-color-primary);
-}
-
-html.dark .el-select-dropdown__item.is-disabled {
-  color: #666666;
-}
-
-/* Tag */
-html.dark .el-tag--info {
-  background: #27293d;
-  border-color: #3a3d5c;
-  color: #b0b0b0;
-}
-
-/* Button */
-html.dark .el-button--default {
-  background: #27293d;
-  border-color: #3a3d5c;
-  color: #e5e7eb;
-}
-
-html.dark .el-button--default:hover {
-  background: #2a2a3e;
-  border-color: #4a4d6c;
-  color: #e5e7eb;
-}
-
-/* Card */
-html.dark .el-card {
-  background: #1e1e2e;
-  border-color: #3a3d5c;
-  color: #b0b0b0;
-}
-
-html.dark .el-card__header {
-  border-bottom-color: #3a3d5c;
-  color: #e5e7eb;
-}
-
-/* Table */
+/* Dark mode table */
 html.dark .el-table {
-  background-color: #1e1e2e;
+  background-color: #27293d;
  color: #e5e7eb;
 }

@@ -157,56 +50,9 @@ html.dark .el-table th {
 }

 html.dark .el-table tr {
-  background-color: #1e1e2e;
+  background-color: #27293d;
 }

 html.dark .el-table--striped .el-table__body tr.el-table__row--striped td {
-  background-color: #181825;
-}
-
-/* Dialog */
-html.dark .el-dialog {
-  background: #1e1e2e;
-}
-
-html.dark .el-dialog__title {
-  color: #e5e7eb;
-}
-
-/* Message */
-html.dark .el-message {
-  background: #27293d;
-  border-color: #3a3d5c;
-}
-
-html.dark .el-message--success {
-  background: #1e3d2e;
-  border-color: #3d6b4f;
-}
-
-html.dark .el-message--warning {
-  background: #3d3020;
-  border-color: #6b5020;
-}
-
-html.dark .el-message--error {
-  background: #3d2027;
-  border-color: #5c2d2d;
-}
-
-/* Loading */
-html.dark .el-loading-mask {
-  background-color: rgba(30, 30, 46, 0.9);
-}
-
-/* Overlay */
-html.dark .el-overlay {
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-/* Tooltip */
-html.dark .el-tooltip__popper {
-  background: #27293d !important;
-  border-color: #3a3d5c !important;
-  color: #e5e7eb !important;
+  background-color: #1e1e2e;
 }
--- a/web/frps/src/assets/css/var.css
+++ b/web/frps/src/assets/css/var.css
@@ -1,109 +0,0 @@
-:root {
-  /* Text colors */
-  --color-text-primary: #303133;
-  --color-text-secondary: #606266;
-  --color-text-muted: #909399;
-  --color-text-light: #c0c4cc;
-  --color-text-placeholder: #a8abb2;
-
-  /* Background colors */
-  --color-bg-primary: #ffffff;
-  --color-bg-secondary: #f9f9f9;
-  --color-bg-tertiary: #fafafa;
-  --color-bg-surface: #ffffff;
-  --color-bg-muted: #f4f4f5;
-  --color-bg-input: #ffffff;
-  --color-bg-hover: #efefef;
-  --color-bg-active: #eaeaea;
-
-  /* Border colors */
-  --color-border: #dcdfe6;
-  --color-border-light: #e4e7ed;
-  --color-border-lighter: #ebeef5;
-  --color-border-extra-light: #f2f6fc;
-
-  /* Status colors */
-  --color-primary: #409eff;
-  --color-primary-light: #ecf5ff;
-  --color-success: #67c23a;
-  --color-warning: #e6a23c;
-  --color-danger: #f56c6c;
-  --color-danger-dark: #c45656;
-  --color-danger-light: #fef0f0;
-  --color-info: #909399;
-
-  /* Element Plus mapping */
-  --el-color-primary: var(--color-primary);
-  --el-color-success: var(--color-success);
-  --el-color-warning: var(--color-warning);
-  --el-color-danger: var(--color-danger);
-  --el-color-info: var(--color-info);
-
-  --el-text-color-primary: var(--color-text-primary);
-  --el-text-color-regular: var(--color-text-secondary);
-  --el-text-color-secondary: var(--color-text-muted);
-  --el-text-color-placeholder: var(--color-text-placeholder);
-
-  --el-bg-color: var(--color-bg-primary);
-  --el-bg-color-page: var(--color-bg-secondary);
-  --el-bg-color-overlay: var(--color-bg-primary);
-
-  --el-border-color: var(--color-border);
-  --el-border-color-light: var(--color-border-light);
-  --el-border-color-lighter: var(--color-border-lighter);
-  --el-border-color-extra-light: var(--color-border-extra-light);
-
-  --el-fill-color-blank: var(--color-bg-primary);
-  --el-fill-color-light: var(--color-bg-tertiary);
-  --el-fill-color: var(--color-bg-tertiary);
-  --el-fill-color-dark: var(--color-bg-hover);
-  --el-fill-color-darker: var(--color-bg-active);
-
-  /* Input */
-  --el-input-bg-color: var(--color-bg-input);
-  --el-input-border-color: var(--color-border);
-  --el-input-hover-border-color: var(--color-border-light);
-
-  /* Dialog */
-  --el-dialog-bg-color: var(--color-bg-primary);
-  --el-overlay-color: rgba(0, 0, 0, 0.5);
-}
-
-html.dark {
-  /* Text colors */
-  --color-text-primary: #e5e7eb;
-  --color-text-secondary: #b0b0b0;
-  --color-text-muted: #888888;
-  --color-text-light: #666666;
-  --color-text-placeholder: #afafaf;
-
-  /* Background colors */
-  --color-bg-primary: #1e1e2e;
-  --color-bg-secondary: #181825;
-  --color-bg-tertiary: #27293d;
-  --color-bg-surface: #27293d;
-  --color-bg-muted: #27293d;
-  --color-bg-input: #27293d;
-  --color-bg-hover: #2a2a3e;
-  --color-bg-active: #353550;
-
-  /* Border colors */
-  --color-border: #3a3d5c;
-  --color-border-light: #313348;
-  --color-border-lighter: #2a2a3e;
-  --color-border-extra-light: #222233;
-
-  /* Status colors */
-  --color-primary: #409eff;
-  --color-danger: #f87171;
-  --color-danger-dark: #f87171;
-  --color-danger-light: #3d2027;
-  --color-info: #888888;
-
-  /* Dark overrides */
-  --el-text-color-regular: var(--color-text-primary);
-  --el-overlay-color: rgba(0, 0, 0, 0.7);
-
-  background-color: #181825;
-  color-scheme: dark;
-}
--- a/web/frps/src/composables/useResponsive.ts
+++ b/web/frps/src/composables/useResponsive.ts
@@ -1,8 +0,0 @@
-import { useBreakpoints } from '@vueuse/core'
-
-const breakpoints = useBreakpoints({ mobile: 0, desktop: 768 })
-
-export function useResponsive() {
-  const isMobile = breakpoints.smaller('desktop') // < 768px
-  return { isMobile }
-}
--- a/web/frps/src/main.ts
+++ b/web/frps/src/main.ts
@@ -3,7 +3,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 import App from './App.vue'
 import router from './router'

-import './assets/css/var.css'
+import './assets/css/custom.css'
 import './assets/css/dark.css'

 const app = createApp(App)
--- a/web/frps/src/views/Proxies.vue
+++ b/web/frps/src/views/Proxies.vue
@@ -8,13 +8,23 @@
        </div>

        <div class="actions-section">
-          <ActionButton variant="outline" size="small" @click="fetchData">
-            Refresh
-          </ActionButton>
+          <el-button :icon="Refresh" class="action-btn" @click="fetchData"
+            >Refresh</el-button
+          >

-          <ActionButton variant="outline" size="small" danger @click="showClearDialog = true">
-            Clear Offline
-          </ActionButton>
+          <el-popconfirm
+            title="Clear all offline proxies?"
+            width="220"
+            confirm-button-text="Clear"
+            cancel-button-text="Cancel"
+            @confirm="clearOfflineProxies"
+          >
+            <template #reference>
+              <el-button :icon="Delete" class="action-btn" type="danger" plain
+                >Clear Offline</el-button
+              >
+            </template>
+          </el-popconfirm>
        </div>
      </div>

@@ -28,35 +38,28 @@
            class="main-search"
          />

-          <PopoverMenu
+          <el-select
            :model-value="selectedClientKey"
-            :width="220"
-            placement="bottom-end"
-            selectable
-            filterable
-            filter-placeholder="Search clients..."
-            :display-value="selectedClientLabel"
+            placeholder="All Clients"
            clearable
-            class="client-filter"
-            @update:model-value="onClientFilterChange($event as string)"
+            filterable
+            class="client-select"
+            @change="onClientFilterChange"
          >
-            <template #default="{ filterText }">
-              <PopoverMenuItem value="">All Clients</PopoverMenuItem>
-              <PopoverMenuItem
-                v-if="clientIDFilter && !selectedClientInList"
-                :value="selectedClientKey"
-              >
-                {{ userFilter ? userFilter + '.' : '' }}{{ clientIDFilter }} (not found)
-              </PopoverMenuItem>
-              <PopoverMenuItem
-                v-for="client in filteredClientOptions(filterText)"
-                :key="client.key"
-                :value="client.key"
-              >
-                {{ client.label }}
-              </PopoverMenuItem>
-            </template>
-          </PopoverMenu>
+            <el-option label="All Clients" value="" />
+            <el-option
+              v-if="clientIDFilter && !selectedClientInList"
+              :label="`${userFilter ? userFilter + '.' : ''}${clientIDFilter} (not found)`"
+              :value="selectedClientKey"
+              style="color: var(--el-color-warning); font-style: italic"
+            />
+            <el-option
+              v-for="client in clientOptions"
+              :key="client.key"
+              :label="client.label"
+              :value="client.key"
+            />
+          </el-select>
        </div>

        <div class="type-tabs">
@@ -85,15 +88,6 @@
        <el-empty description="No proxies found" />
      </div>
    </div>
-
-    <ConfirmDialog
-      v-model="showClearDialog"
-      title="Clear Offline"
-      message="Are you sure you want to clear all offline proxies?"
-      confirm-text="Clear"
-      danger
-      @confirm="handleClearConfirm"
-    />
  </div>
 </template>

@@ -101,9 +95,7 @@
 import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
-import ActionButton from '@shared/components/ActionButton.vue'
-import ConfirmDialog from '@shared/components/ConfirmDialog.vue'
+import { Search, Refresh, Delete } from '@element-plus/icons-vue'
 import {
  BaseProxy,
  TCPProxy,
@@ -115,8 +107,6 @@ import {
  SUDPProxy,
 } from '../utils/proxy'
 import ProxyCard from '../components/ProxyCard.vue'
-import PopoverMenu from '@shared/components/PopoverMenu.vue'
-import PopoverMenuItem from '@shared/components/PopoverMenuItem.vue'
 import {
  getProxiesByType,
  clearOfflineProxies as apiClearOfflineProxies,
@@ -143,7 +133,6 @@ const proxies = ref<BaseProxy[]>([])
 const clients = ref<Client[]>([])
 const loading = ref(false)
 const searchText = ref('')
-const showClearDialog = ref(false)
 const clientIDFilter = ref((route.query.clientID as string) || '')
 const userFilter = ref((route.query.user as string) || '')

@@ -168,20 +157,6 @@ const selectedClientKey = computed(() => {
  return client?.key || `${userFilter.value}:${clientIDFilter.value}`
 })

-const selectedClientLabel = computed(() => {
-  if (!clientIDFilter.value) return 'All Clients'
-  const client = clientOptions.value.find(
-    (c) => c.clientID === clientIDFilter.value && c.user === userFilter.value,
-  )
-  return client?.label || `${userFilter.value ? userFilter.value + '.' : ''}${clientIDFilter.value}`
-})
-
-const filteredClientOptions = (filterText: string) => {
-  if (!filterText) return clientOptions.value
-  const search = filterText.toLowerCase()
-  return clientOptions.value.filter((c) => c.label.toLowerCase().includes(search))
-}
-
 // Check if the filtered client exists in the client list
 const selectedClientInList = computed(() => {
  if (!clientIDFilter.value) return true
@@ -300,11 +275,6 @@ const fetchData = async () => {
  }
 }

-const handleClearConfirm = async () => {
-  showClearDialog.value = false
-  await clearOfflineProxies()
-}
-
 const clearOfflineProxies = async () => {
  try {
    await apiClearOfflineProxies()
@@ -387,6 +357,12 @@ fetchClients()
  gap: 12px;
 }

+.action-btn {
+  border-radius: 8px;
+  padding: 8px 16px;
+  height: 36px;
+  font-weight: 500;
+}

 .filter-section {
  display: flex;
@@ -406,16 +382,37 @@ fetchClients()
  flex: 1;
 }

-.main-search :deep(.el-input__wrapper),
-.client-filter :deep(.el-input__wrapper) {
-  height: 32px;
-  border-radius: 8px;
+.main-search,
+.client-select {
+  height: 44px;
 }

-.client-filter {
+.main-search :deep(.el-input__wrapper),
+.client-select :deep(.el-input__wrapper) {
+  border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  padding: 0 16px;
+  height: 100%;
+  border: 1px solid var(--el-border-color);
+}
+
+.main-search :deep(.el-input__wrapper) {
+  font-size: 15px;
+}
+
+.client-select {
  width: 240px;
 }

+.client-select :deep(.el-select__wrapper) {
+  border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  padding: 0 12px;
+  height: 44px;
+  min-height: 44px;
+  border: 1px solid var(--el-border-color);
+}
+
 .type-tabs {
  display: flex;
  gap: 8px;
@@ -465,7 +462,7 @@ fetchClients()
    flex-direction: column;
  }

-  .client-filter {
+  .client-select {
    width: 100%;
  }
 }
--- a/web/frps/src/views/ProxyDetail.vue
+++ b/web/frps/src/views/ProxyDetail.vue
@@ -51,41 +51,98 @@
                <router-link
                  v-if="proxy.clientID"
                  :to="clientLink"
-                  class="meta-link"
+                  class="client-link"
                >
                  <el-icon><Monitor /></el-icon>
-                  <span>{{
-                    proxy.user
-                      ? `${proxy.user}.${proxy.clientID}`
-                      : proxy.clientID
-                  }}</span>
+                  <span
+                    >Client:
+                    {{
+                      proxy.user
+                        ? `${proxy.user}.${proxy.clientID}`
+                        : proxy.clientID
+                    }}</span
+                  >
                </router-link>
-                <span v-if="proxy.lastStartTime" class="meta-text">
-                  <span class="meta-sep">·</span>
-                  Last Started {{ proxy.lastStartTime }}
-                </span>
-                <span v-if="proxy.lastCloseTime" class="meta-text">
-                  <span class="meta-sep">·</span>
-                  Last Closed {{ proxy.lastCloseTime }}
-                </span>
              </div>
            </div>
          </div>
        </div>

-        <!-- Stats Bar -->
-        <div class="stats-bar">
-          <div v-if="proxy.port" class="stats-item">
-            <span class="stats-label">Port</span>
-            <span class="stats-value">{{ proxy.port }}</span>
+        <!-- Stats Cards -->
+        <div class="stats-grid">
+          <div v-if="proxy.port" class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Port</span>
+              <div class="stat-icon port">
+                <el-icon><Connection /></el-icon>
+              </div>
+            </div>
+            <div class="stat-value">{{ proxy.port }}</div>
          </div>
-          <div class="stats-item">
-            <span class="stats-label">Connections</span>
-            <span class="stats-value">{{ proxy.conns }}</span>
+          <div class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Connections</span>
+              <div class="stat-icon connections">
+                <el-icon><DataLine /></el-icon>
+              </div>
+            </div>
+            <div class="stat-value">{{ proxy.conns }}</div>
          </div>
-          <div class="stats-item">
-            <span class="stats-label">Traffic</span>
-            <span class="stats-value">↓ {{ formatTrafficValue(proxy.trafficIn) }} <small>{{ formatTrafficUnit(proxy.trafficIn) }}</small> / ↑ {{ formatTrafficValue(proxy.trafficOut) }} <small>{{ formatTrafficUnit(proxy.trafficOut) }}</small></span>
+          <div class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Traffic In</span>
+              <div class="stat-icon traffic-in">
+                <el-icon><Bottom /></el-icon>
+              </div>
+            </div>
+            <div class="stat-value">
+              <span class="value-number">{{
+                formatTrafficValue(proxy.trafficIn)
+              }}</span>
+              <span class="value-unit">{{
+                formatTrafficUnit(proxy.trafficIn)
+              }}</span>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Traffic Out</span>
+              <div class="stat-icon traffic-out">
+                <el-icon><Top /></el-icon>
+              </div>
+            </div>
+            <div class="stat-value">
+              <span class="value-number">{{
+                formatTrafficValue(proxy.trafficOut)
+              }}</span>
+              <span class="value-unit">{{
+                formatTrafficUnit(proxy.trafficOut)
+              }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Status Timeline -->
+        <div class="timeline-card">
+          <div class="timeline-header">
+            <el-icon><DataLine /></el-icon>
+            <h2>Status Timeline</h2>
+          </div>
+          <div class="timeline-body">
+            <div class="timeline-grid">
+              <div class="timeline-item">
+                <span class="timeline-label">Last Start Time</span>
+                <span class="timeline-value">{{
+                  proxy.lastStartTime || '-'
+                }}</span>
+              </div>
+              <div class="timeline-item">
+                <span class="timeline-label">Last Close Time</span>
+                <span class="timeline-value">{{
+                  proxy.lastCloseTime || '-'
+                }}</span>
+              </div>
+            </div>
          </div>
        </div>

@@ -231,6 +288,9 @@ import {
  ArrowLeft,
  Monitor,
  Connection,
+  DataLine,
+  Bottom,
+  Top,
  Link,
  Lock,
  Promotion,
@@ -533,71 +593,176 @@ html.dark .status-badge.online {
 .header-meta {
  display: flex;
  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px;
-  font-size: 13px;
-  color: var(--text-secondary);
+  gap: 16px;
 }

-.meta-link {
+.client-link {
  display: inline-flex;
  align-items: center;
-  gap: 4px;
+  gap: 6px;
+  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
 }

-.meta-link:hover {
+.client-link:hover {
  color: var(--el-color-primary);
 }

-.meta-text {
-  color: var(--text-muted);
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
 }

-.meta-sep {
-  margin: 0 4px;
-}
-
-/* Stats Bar */
-.stats-bar {
-  display: flex;
+.stat-card {
  background: var(--el-bg-color);
  border: 1px solid var(--header-border);
-  border-radius: 10px;
-  margin-bottom: 20px;
+  border-radius: 12px;
+  padding: 20px;
 }

-.stats-item {
-  flex: 1;
+.stat-header {
  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 16px 20px;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
 }

-.stats-item + .stats-item {
-  border-left: 1px solid var(--header-border);
-}
-
-.stats-label {
-  font-size: 12px;
+.stat-label {
+  font-size: 13px;
  color: var(--text-secondary);
+  font-weight: 500;
 }

-.stats-value {
+.stat-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  font-size: 18px;
-  font-weight: 600;
+}
+
+.stat-icon.port {
+  background: rgba(139, 92, 246, 0.1);
+  color: #8b5cf6;
+}
+
+.stat-icon.connections {
+  background: rgba(168, 85, 247, 0.1);
+  color: #a855f7;
+}
+
+.stat-icon.traffic-in {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.stat-icon.traffic-out {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+html.dark .stat-icon.port {
+  background: rgba(139, 92, 246, 0.15);
+}
+
+html.dark .stat-icon.connections {
+  background: rgba(168, 85, 247, 0.15);
+}
+
+html.dark .stat-icon.traffic-in {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+html.dark .stat-icon.traffic-out {
+  background: rgba(34, 197, 94, 0.15);
+}
+
+.stat-value {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.value-number {
+  font-size: 28px;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.stat-value:not(:has(.value-number)) {
+  font-size: 28px;
+  font-weight: 500;
  color: var(--text-primary);
 }

-.stats-value small {
-  font-size: 12px;
+.value-unit {
+  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
 }

+/* Timeline Card */
+.timeline-card {
+  background: var(--el-bg-color);
+  border: 1px solid var(--header-border);
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.timeline-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  color: var(--text-secondary);
+}
+
+.timeline-header h2 {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.timeline-body {
+  padding: 20px;
+  padding-top: 0;
+}
+
+.timeline-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  background: var(--el-fill-color-light);
+  border-radius: 10px;
+  padding: 20px 24px;
+}
+
+.timeline-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.timeline-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.timeline-value {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+}

 /* Card Base */
 .traffic-card {
@@ -791,22 +956,16 @@ html.dark .config-item-icon.route {
 }

 /* Responsive */
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
@media (max-width: 768px) {
  .config-grid {
    grid-template-columns: 1fr;
  }
-
-  .stats-bar {
-    flex-wrap: wrap;
-  }
-
-  .stats-item {
-    flex: 1 1 40%;
-  }
-
-  .stats-item:nth-child(n+3) {
-    border-top: 1px solid var(--header-border);
-  }
 }

@media (max-width: 640px) {
@@ -815,5 +974,12 @@ html.dark .config-item-icon.route {
    gap: 16px;
  }

+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .timeline-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
--- a/web/frps/tsconfig.json
+++ b/web/frps/tsconfig.json
@@ -18,12 +18,8 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "@shared/*": ["../shared/*"]
-    }
+    "noFallthroughCasesInSwitch": true
  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../shared/**/*.ts", "../shared/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/web/frps/vite.config.mts
+++ b/web/frps/vite.config.mts
@@ -25,20 +25,6 @@ export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
-    },
-    dedupe: ['vue', 'element-plus', '@element-plus/icons-vue'],
-    modules: [
-      fileURLToPath(new URL('../node_modules', import.meta.url)),
-      'node_modules',
-    ],
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern',
-        additionalData: `@use "@shared/css/_index.scss" as *;`,
-      },
    },
  },
  build: {
--- a/web/package.json
+++ b/web/package.json
@@ -1,5 +0,0 @@
-{
-  "name": "frp-web",
-  "private": true,
-  "workspaces": ["shared", "frpc", "frps"]
-}
--- a/web/shared/package.json
+++ b/web/shared/package.json
@@ -1,4 +0,0 @@
-{
-  "name": "frp-shared",
-  "private": true
-}