完善分层 AGENTS.md，便于快速定位代码

优化拖拽排序顺滑度

.github/workflows/docker-build.yml

@@ -150,7 +150,11 @@ jobs:
 
       - name: Prepare build args
         run: |
-          echo "VITE_GITHUB_REPO=https://github.com/${{ github.repository }}" > ./vite-frontend/.env.production
+          VERSION="${{ needs.check-version.outputs.version }}"
+          {
+            echo "VITE_GITHUB_REPO=https://github.com/${{ github.repository }}"
+            echo "VITE_APP_VERSION=$VERSION"
+          } > ./vite-frontend/.env.production
 
       - name: Build and push Vite Docker images
         run: |

.sisyphus/ralph-loop.local.md

@@ -0,0 +1,9 @@
+---
+active: true
+iteration: 1
+max_iterations: 100
+completion_promise: "DONE"
+started_at: "2026-01-24T05:20:50.887Z"
+session_id: "ses_41192b7d7ffewFHxf1dDS7ESHO"
+---
+Complete the task as instructed

AGENTS.md

@@ -1,43 +1,66 @@
 # PROJECT KNOWLEDGE BASE
 
-**Generated:** Sat Jan 24 2026
-**Context:** Monorepo for Flux Panel (Traffic Forwarding)
+**Generated:** Mon Feb 02 2026
+**Commit:** 7ca01ab
+**Branch:** beta
 
 ## OVERVIEW
-Flux Panel is a traffic forwarding management system based on [go-gost](https://github.com/go-gost/gost). It manages tunnels, port forwarding, and user quotas.
-**Stack:** Monorepo (Java/Spring Boot Backend + React/Vite Frontend + Go/GOST Service).
+Flux Panel is a traffic forwarding management system built on a forked GOST v3 stack. It ships as Dockerized Spring Boot (admin API) + Vite/React UI + Go forwarding agent, with optional mobile WebView wrappers.
 
 ## STRUCTURE
 ```
-/root/flux-panel/
-├── springboot-backend/  # Java 21 + Spring Boot 2.7 Admin API
-├── vite-frontend/       # React 18 + Vite + HeroUI/NextUI
-├── go-gost/             # Go 1.23 + GOST Extensions (Core logic)
-├── docker-compose*.yml  # Deployment configs (v4/v6)
-└── *.sh                 # Install scripts (panel_install.sh, install.sh)
+./
+├── go-gost/               # Go forwarding agent (forked gost + local x/)
+│   └── x/                 # Local fork of github.com/go-gost/x (replace => ./x)
+├── springboot-backend/    # Java/Spring Boot admin API (SQLite/MyBatis)
+├── vite-frontend/         # React/Vite dashboard (HeroUI + Tailwind)
+├── android-app/           # Android WebView wrapper (optional)
+├── ios-app/               # iOS WebView wrapper (optional)
+├── docker-compose-v4.yml  # Panel deploy (IPv4-only bridge)
+├── docker-compose-v6.yml  # Panel deploy (IPv6-enabled bridge)
+├── panel_install.sh       # Panel installer/upgrader (downloads compose)
+├── install.sh             # Node installer/upgrader (downloads gost binary)
+└── .github/workflows/     # CI: build/push images + release artifacts
 ```
 
 ## WHERE TO LOOK
 | Task | Location | Notes |
 |------|----------|-------|
-| **Admin API** | `springboot-backend/` | Users, quotas, billing logic |
-| **UI/Dashboard** | `vite-frontend/` | Management console |
-| **Core Forwarding** | `go-gost/` | GOST implementation & extensions |
-| **Deploy** | `docker-compose-v4.yml` | Container orchestration |
+| **Deploy (Docker)** | `docker-compose-v4.yml` | Env: `JWT_SECRET`, `BACKEND_PORT`, `FRONTEND_PORT` |
+| **Deploy (IPv6)** | `docker-compose-v6.yml` | Same as v4 + IPv6-enabled bridge |
+| **Panel install** | `panel_install.sh` | Picks v4/v6, generates `JWT_SECRET`, downloads compose |
+| **Node install** | `install.sh` | Installs `/etc/flux_agent/flux_agent` + writes `config.json`/`gost.json` + systemd `flux_agent.service` |
+| **Admin API entry** | `springboot-backend/src/main/java/com/admin/AdminApplication.java` | Spring Boot app |
+| **Admin API routes** | `springboot-backend/src/main/java/com/admin/controller/` | Mostly `/api/v1/*` controllers |
+| **Admin auth** | `springboot-backend/src/main/java/com/admin/common/interceptor/JwtInterceptor.java` | Checks `Authorization` header |
+| **Web UI routing** | `vite-frontend/src/App.tsx` | React Router v6 + ProtectedRoute/H5 layouts |
+| **Web UI API client** | `vite-frontend/src/api/network.ts` | Axios `baseURL` + `Authorization` header |
+| **Go agent entry** | `go-gost/main.go` | Reads panel `config.json` + starts gost services |
+| **Go x fork** | `go-gost/x/` | Handlers/listeners/dialers + management API |
 
 ## CONVENTIONS
-- **Monorepo**: 3 distinct languages/stacks. Treat each subdir as a separate project.
-- **Docker**: Primary deployment method.
-- **Scripts**: `panel_install.sh` for panel, `install.sh` for nodes.
+- `Authorization` header carries the raw JWT token (no `Bearer` prefix) between `vite-frontend/` and `springboot-backend/`.
+- `go-gost/` uses `replace github.com/go-gost/x => ./x` and `go-gost/x/` is also its own Go module.
+
+## ANTI-PATTERNS (THIS PROJECT)
+- Do not edit generated protobuf output: `go-gost/x/internal/util/grpc/proto/*.pb.go`, `go-gost/x/internal/util/grpc/proto/*_grpc.pb.go`.
 
 ## COMMANDS
 ```bash
-# Quick Deploy (Panel)
-./panel_install.sh
+# Panel (Docker)
+docker compose -f docker-compose-v4.yml up -d
+docker compose -f docker-compose-v6.yml up -d
 
-# Quick Deploy (Node)
+# Release-based install scripts
+./panel_install.sh
 ./install.sh
 
-# Docker
-docker-compose -f docker-compose-v4.yml up -d
+# Local dev (per subproject)
+(cd springboot-backend && mvn clean package)
+(cd vite-frontend && npm run dev)
+(cd go-gost && go run .)
 ```
+
+## NOTES
+- LSP servers are not installed in this environment (gopls/jdtls/typescript-language-server); rely on grep-based navigation.
+- `vite-frontend/vite.config.ts` sets `minify: false` and disables treeshake; expect larger bundles.

go-gost/AGENTS.md

@@ -1,31 +1,37 @@
 # GO-GOST SERVICE KNOWLEDGE BASE
 
+**Generated:** Mon Feb 02 2026
+
 ## OVERVIEW
-Core forwarding service based on GOST v3.
-**Stack:** Go 1.23, GOST Core v0.3.1, GOST x (Extensions).
+Forwarding agent built on GOST v3 with a local fork of `github.com/go-gost/x` under `x/`.
+**Stack:** Go 1.23, github.com/go-gost/core v0.3.1, local `go-gost/x` module.
 
 ## STRUCTURE
 ```
 go-gost/
-├── main.go           # Entry point
-├── x/                # Local extensions (REPLACES github.com/go-gost/x)
-│   ├── api/          # Management API
-│   ├── registry/     # Service registry
-│   ├── handler/      # Protocol handlers (socks, tunnel, relay)
-│   └── listener/     # Network listeners (tcp, udp, tun/tap)
-└── go.mod            # Defines local replacement
+├── main.go           # Entry; reads panel config.json; starts svc.Run(program)
+├── config.go         # Panel config.json loader (addr/secret + ports)
+├── program.go        # GOST runtime: parse config, run/reload services
+├── x/                # Local fork of github.com/go-gost/x (has its own go.mod)
+└── go.mod            # replace github.com/go-gost/x => ./x
 ```
 
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Panel integration config | `go-gost/config.go` | Expects `config.json` in cwd by default |
+| Service lifecycle/reload | `go-gost/program.go` | Parses config; handles SIGHUP reload |
+| WebSocket reporting | `go-gost/main.go` | Starts reporter + sets HTTP report URL |
+| Protocol behaviors | `go-gost/x/` | Handlers/listeners/dialers live here |
+
 ## CONVENTIONS
-- **Local Replace**: `go.mod` uses `replace github.com/go-gost/x => ./x`.
-- **Extensions**: Custom logic lives in `x/`. This is the primary place for modifications.
-- **Handlers**: Implements SOCKS5, Tunnel, Relay, etc.
+- Two configs exist: panel integration uses `config.json`; forwarding services use GOST config (defaults to `gost.{json,yaml}` via viper search paths).
+- `go-gost/x/` is the primary extension surface; avoid editing vendored deps.
 
 ## COMMANDS
 ```bash
-# Run
+cd go-gost
 go run .
-
-# Build
+go test ./...
 go build .
 ```

go-gost/x/AGENTS.md

@@ -0,0 +1,42 @@
+# GO-GOST/X KNOWLEDGE BASE
+
+## OVERVIEW
+Local fork of `github.com/go-gost/x` used by `go-gost/` via `replace github.com/go-gost/x => ./x`. Most protocol/runtime behavior changes happen here.
+
+## STRUCTURE
+```
+go-gost/x/
+├── api/        # Gin management API + embedded swagger docs
+├── config/     # Config model + parsing/load/reload
+├── connector/  # Outbound connect implementations
+├── dialer/     # Outbound dialers (tcp/tls/ws/quic/...) 
+├── handler/    # Protocol handlers (socks/http/tunnel/relay/...)
+├── listener/   # Inbound listeners (tcp/udp/tun/tap/redirect/...)
+├── limiter/    # Traffic/rate/conn limiters
+├── registry/   # Registries for services/handlers/listeners/etc
+├── service/    # Service wrappers + reporting hooks
+├── socket/     # WebSocket reporter / panel integration
+└── internal/   # Shared internals (grpc proto, net utils, sniffing, tls, ...)
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Management API routes/auth | `go-gost/x/api/api.go` | `/docs`, `/config/*`; BasicAuth + interceptor |
+| Service config parsing | `go-gost/x/config/parsing/` | Converts config to running services |
+| Add a handler | `go-gost/x/handler/` | Per-protocol subdirs |
+| Add a listener/dialer | `go-gost/x/listener/`, `go-gost/x/dialer/` | Transport variants |
+| Panel reporting | `go-gost/x/socket/` | WebSocket + HTTP report URL hooks |
+
+## CONVENTIONS
+- `go-gost/x/` is a standalone Go module (`go-gost/x/go.mod`); run go tooling from this dir when debugging module resolution.
+- Generated gRPC/proto code lives under `go-gost/x/internal/util/grpc/proto/`.
+
+## ANTI-PATTERNS
+- Do not edit generated files in `go-gost/x/internal/util/grpc/proto/` (`*.pb.go`, `*_grpc.pb.go`).
+
+## COMMANDS
+```bash
+cd go-gost/x
+go test ./...
+```

go-gost/x/api/AGENTS.md

@@ -0,0 +1,23 @@
+# GO-GOST/X API KNOWLEDGE BASE
+
+## OVERVIEW
+Gin-based management API for reading/writing config and controlling services at runtime.
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Route registration | `go-gost/x/api/api.go` | `Register(*gin.Engine, *Options)` |
+| Auth gating | `go-gost/x/api/middleware.go` | Drops non-BasicAuth requests; optional auther check |
+| Service CRUD + pause/resume | `go-gost/x/api/config_service.go` | Uses registry + `config.OnUpdate(...)` |
+| Swagger spec | `go-gost/x/api/swagger.yaml` | Served at `/docs` via embedded FS |
+
+## CONVENTIONS
+- CORS is `AllowAllOrigins: true` (see `go-gost/x/api/api.go`).
+- Requests without a valid Basic `Authorization` header are silently dropped (connection hijack + close) by `GlobalInterceptor()`.
+- Many operations mutate the in-memory config via `config.OnUpdate(...)` after starting/stopping services.
+
+## COMMANDS
+```bash
+cd go-gost/x
+go test ./...
+```

go-gost/x/config/AGENTS.md

@@ -0,0 +1,23 @@
+# GO-GOST/X CONFIG KNOWLEDGE BASE
+
+## OVERVIEW
+Config model + parsing/loading pipeline for the `go-gost/x` runtime. This is the bridge between `gost.json`/`gost.yaml` and in-memory registries/services.
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Config structs + global state | `go-gost/x/config/config.go` | `Global()`, `Set()`, `OnUpdate()` |
+| Default config file search | `go-gost/x/config/config.go` | Viper `SetConfigName("gost")` + paths `/etc/gost/`, `$HOME/.gost/`, `.` |
+| Registry wiring | `go-gost/x/config/loader/loader.go` | Parses config sections and registers into registries |
+| Metadata keys | `go-gost/x/config/parsing/parse.go` | `MDKey*` constants used by parsers |
+| Config parser behavior | `go-gost/x/config/parsing/parser/parser.go` | CLI/env overrides; loads `gost.*` when empty |
+
+## CONVENTIONS
+- Default config file is named `gost` (e.g. `gost.json`) and is discovered via viper search paths.
+- Runtime config mutations should go through `config.OnUpdate(...)` so changes are applied under the global mutex.
+
+## COMMANDS
+```bash
+cd go-gost/x
+go test ./...
+```

go-gost/x/dialer/AGENTS.md

@@ -0,0 +1,35 @@
+# GO-GOST/X DIALERS KNOWLEDGE BASE
+
+## OVERVIEW
+Outbound dialers (client-side connection establishment) used by connectors/handlers.
+
+## STRUCTURE
+```
+go-gost/x/dialer/
+├── direct/   # Baseline dialer
+├── tcp/
+├── udp/
+├── tls/
+├── ws/
+├── quic/
+├── http2/
+├── http3/
+├── ssh/
+├── wg/       # WireGuard dialer
+└── ...
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Pick a dialer | `go-gost/x/dialer/` | One subdir per transport |
+| TCP baseline | `go-gost/x/dialer/tcp/dialer.go` | Reference implementation |
+
+## CONVENTIONS
+- Dialer implementations typically live in `dialer.go` with a paired `metadata.go` (e.g. `go-gost/x/dialer/tcp/`).
+
+## COMMANDS
+```bash
+cd go-gost/x
+go test ./...
+```

go-gost/x/handler/AGENTS.md

@@ -0,0 +1,32 @@
+# GO-GOST/X HANDLERS KNOWLEDGE BASE
+
+## OVERVIEW
+Protocol handlers (server-side request handling) used by services defined in the GOST config.
+
+## STRUCTURE
+```
+go-gost/x/handler/
+├── http/     # handler.go + metadata.go (+ udp.go)
+├── socks/    # SOCKS variants
+├── tunnel/   # Tunnel forwarding
+├── relay/    # Relay forwarding
+├── redirect/ # TCP/UDP redirect handlers
+├── router/   # Routing/association entrypoints
+└── ...
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Find a protocol handler | `go-gost/x/handler/` | Subdir per protocol (`http`, `socks`, `tunnel`, ...) |
+| HTTP specifics | `go-gost/x/handler/http/handler.go` | Implements HTTP proxy behavior |
+| SOCKS specifics | `go-gost/x/handler/socks/` | v4/v5 implementations |
+
+## CONVENTIONS
+- Handler implementations typically live in `handler.go` with a paired `metadata.go` (e.g. `go-gost/x/handler/http/`).
+
+## COMMANDS
+```bash
+cd go-gost/x
+go test ./...
+```

go-gost/x/listener/AGENTS.md

@@ -0,0 +1,35 @@
+# GO-GOST/X LISTENERS KNOWLEDGE BASE
+
+## OVERVIEW
+Inbound listeners (transport-level accept loops) used by services defined in the GOST config.
+
+## STRUCTURE
+```
+go-gost/x/listener/
+├── tcp/      # listener.go + metadata.go
+├── udp/
+├── tls/
+├── ws/
+├── quic/
+├── redirect/ # tcp/ + udp/
+├── tun/      # TUN device listener
+├── tap/      # TAP device listener
+└── ...
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Listener registry | `go-gost/x/listener/` | One subdir per transport |
+| TCP baseline | `go-gost/x/listener/tcp/listener.go` | Reference for other transports |
+| Redirect listeners | `go-gost/x/listener/redirect/` | Per-protocol accept + redirect |
+| TUN/TAP | `go-gost/x/listener/tun/`, `go-gost/x/listener/tap/` | Virtual interface listeners |
+
+## CONVENTIONS
+- Listener implementations typically live in `listener.go` with a paired `metadata.go` (e.g. `go-gost/x/listener/tcp/`).
+
+## COMMANDS
+```bash
+cd go-gost/x
+go test ./...
+```

springboot-backend/.factorypath

@@ -0,0 +1,3 @@
+<factorypath>
+    <factorypathentry kind="VARJAR" id="M2_REPO/org/projectlombok/lombok/1.18.30/lombok-1.18.30.jar" enabled="true" runInBatchMode="false"/>
+</factorypath>

springboot-backend/AGENTS.md

@@ -1,37 +1,39 @@
 # SPRINGBOOT BACKEND KNOWLEDGE BASE
 
+**Generated:** Mon Feb 02 2026
+
 ## OVERVIEW
-Admin API for Flux Panel. Manages users, licenses, and traffic rules.
-**Stack:** Java 21, Spring Boot 2.7.18, SQLite, MyBatis Plus.
+Admin API for Flux Panel. Manages users, tunnels, nodes, forwards, quotas, and speed limits.
+**Stack:** Java 21, Spring Boot 2.7.18, SQLite, MyBatis Plus (+ join), FastJSON2.
 
 ## STRUCTURE
 ```
 springboot-backend/
 ├── src/main/java/com/admin/
-│   ├── controller/      # API Endpoints
-│   ├── entity/          # DB Models (MyBatis Plus)
-│   ├── mapper/          # Data Access
-│   ├── service/         # Business Logic
-│   └── common/          # Utils, DTOs
+│   ├── controller/      # /api/v1/* endpoints
+│   ├── entity/          # DB models
+│   ├── mapper/          # MyBatis Plus mappers
+│   ├── service/         # Business logic
+│   ├── config/          # WebMvc/JWT/CORS/WebSocket config
+│   └── common/          # DTOs, auth, exception handling, utilities
 └── src/main/resources/
-    ├── application.yml  # Config
-    ├── mapper/          # XML Mappers
-    ├── data.sql         # Init data
-    └── bgimages/        # Static resources
+    ├── application.yml  # Config (DB_PATH/JWT_SECRET/LOG_DIR)
+    ├── mapper/          # XML mappers
+    ├── schema.sql       # Schema
+    └── data.sql         # Seed data
 ```
 
 ## CONVENTIONS
-- **DB**: SQLite used via `sqlite-jdbc`.
-- **ORM**: MyBatis Plus + MyBatis Plus Join.
-- **JSON**: FastJSON2 used for serialization.
-- **Utils**: Hutool used extensively.
-- **Auth**: Likely custom or token-based (see `controller` logic).
+- **DB**: SQLite URL is `jdbc:sqlite:${DB_PATH:/app/data/gost.db}` (`springboot-backend/src/main/resources/application.yml`).
+- **Auth**: JWT in `Authorization` header; enforced by `com.admin.common.interceptor.JwtInterceptor` for `/api/**` (with explicit excludes in `com.admin.config.WebMvcConfig`).
+- **Roles**: `@RequireRole` means admin-only (`role_id == 0`) via `com.admin.common.aop.RoleAspect`.
+- **Responses**: Controllers return `com.admin.common.lang.R` (`code == 0` success).
+- **CORS**: Allow-all origins; `Authorization` is exposed (`com.admin.config.WebMvcConfig`).
 
 ## COMMANDS
 ```bash
-# Build
+cd springboot-backend
 mvn clean package
-
-# Run
+mvn test
 java -jar target/admin-0.0.1-SNAPSHOT.jar
 ```

springboot-backend/src/main/java/com/admin/AGENTS.md

@@ -0,0 +1,32 @@
+# SPRINGBOOT BACKEND (com.admin) KNOWLEDGE BASE
+
+## OVERVIEW
+Primary Java code for the admin API. Controllers expose `/api/v1/*` endpoints and return `R` response envelopes.
+
+## STRUCTURE
+```
+springboot-backend/src/main/java/com/admin/
+├── controller/  # REST controllers (e.g., /api/v1/user)
+├── service/     # Business logic interfaces + impl/
+├── mapper/      # MyBatis Plus mappers
+├── entity/      # DB entities
+├── config/      # WebMvc/JWT/CORS/WebSocket config
+└── common/      # DTOs, auth, exception handling, utilities
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| User/login endpoints | `springboot-backend/src/main/java/com/admin/controller/UserController.java` | `/api/v1/user/*` |
+| Auth enforcement | `springboot-backend/src/main/java/com/admin/config/WebMvcConfig.java` | Intercepts `/api/**`, excludes login/config/captcha |
+| JWT validation | `springboot-backend/src/main/java/com/admin/common/interceptor/JwtInterceptor.java` | Requires `Authorization` header |
+| Admin-only ops | `springboot-backend/src/main/java/com/admin/common/annotation/RequireRole.java` | Enforced by `RoleAspect` |
+| Response envelope | `springboot-backend/src/main/java/com/admin/common/lang/R.java` | `code == 0` success |
+| Global error handling | `springboot-backend/src/main/java/com/admin/common/exception/GlobalExceptionHandler.java` | Maps exceptions -> `R.err(...)` |
+
+## CONVENTIONS
+- Controllers are mostly `@PostMapping` (even for list/get/delete) and use `/api/v1/*` prefixes.
+- JWT is custom (no 3p lib) and includes `role_id` in payload (`springboot-backend/src/main/java/com/admin/common/utils/JwtUtil.java`).
+
+## ANTI-PATTERNS
+- Do not change auth header format lightly: frontend expects `Authorization: <token>` (no `Bearer`).

springboot-backend/src/main/java/com/admin/common/utils/GostUtil.java

@@ -333,10 +333,16 @@ public class GostUtil {
     }
 
     private static boolean supportsV4(Node node) {
+        // New dual-stack fields take precedence over legacy serverIp.
+        // If user explicitly provided only v6, treat as v6-only.
         if (StrUtil.isNotBlank(node.getServerIpV4())) {
             return true;
         }
 
+        if (StrUtil.isNotBlank(node.getServerIpV6())) {
+            return false;
+        }
+
         String legacy = node.getServerIp();
         if (StrUtil.isBlank(legacy)) {
             return false;
@@ -355,10 +361,16 @@ public class GostUtil {
     }
 
     private static boolean supportsV6(Node node) {
+        // New dual-stack fields take precedence over legacy serverIp.
+        // If user explicitly provided only v4, treat as v4-only.
         if (StrUtil.isNotBlank(node.getServerIpV6())) {
             return true;
         }
 
+        if (StrUtil.isNotBlank(node.getServerIpV4())) {
+            return false;
+        }
+
         String legacy = node.getServerIp();
         if (StrUtil.isBlank(legacy)) {
             return false;

springboot-backend/src/main/java/com/admin/service/impl/TunnelServiceImpl.java

@@ -117,6 +117,19 @@ public class TunnelServiceImpl extends ServiceImpl<TunnelMapper, Tunnel> impleme
         long currentTime = System.currentTimeMillis();
         tunnel.setCreatedTime(currentTime);
         tunnel.setUpdatedTime(currentTime);
+
+        // When tunnels are ordered via `inx`, new tunnels should be appended.
+        // Only apply this when an order already exists (max `inx` > 0) to avoid
+        // changing behavior for deployments still relying on local ordering.
+        Tunnel lastByInx = this.getOne(new QueryWrapper<Tunnel>()
+                .select("inx")
+                .orderByDesc("inx")
+                .orderByDesc("id")
+                .last("LIMIT 1"));
+        Integer maxInx = lastByInx == null ? null : lastByInx.getInx();
+        if (maxInx != null && maxInx > 0) {
+            tunnel.setInx(maxInx + 1);
+        }
         if (StringUtils.isEmpty(tunnel.getInIp())){
             java.util.LinkedHashSet<String> inIps = new java.util.LinkedHashSet<>();
             for (ChainTunnel chainTunnel : tunnelDto.getInNodeId()) {
@@ -584,7 +597,10 @@ public class TunnelServiceImpl extends ServiceImpl<TunnelMapper, Tunnel> impleme
         Integer roleId = JwtUtil.getRoleIdFromToken();
         Integer userId = JwtUtil.getUserIdFromToken();
         if (roleId == 0) {
-            tunnelEntities = this.list(new QueryWrapper<Tunnel>().eq("status", 1));
+            tunnelEntities = this.list(new QueryWrapper<Tunnel>()
+                    .eq("status", 1)
+                    .orderByAsc("inx")
+                    .orderByAsc("id"));
         } else {
             tunnelEntities = java.util.Collections.emptyList(); // 返回空列表
             List<UserTunnel> userTunnels = userTunnelMapper.selectList(
@@ -596,7 +612,9 @@ public class TunnelServiceImpl extends ServiceImpl<TunnelMapper, Tunnel> impleme
                         .collect(Collectors.toList());
                 tunnelEntities = this.list(new QueryWrapper<Tunnel>()
                         .in("id", tunnelIds)
-                        .eq("status", 1));
+                        .eq("status", 1)
+                        .orderByAsc("inx")
+                        .orderByAsc("id"));
             }
 
         }

vite-frontend/AGENTS.md

@@ -1,34 +1,36 @@
 # VITE FRONTEND KNOWLEDGE BASE
 
+**Generated:** Mon Feb 02 2026
+
 ## OVERVIEW
 Web management console for Flux Panel.
-**Stack:** React 18, Vite 5, TypeScript, TailwindCSS 4, HeroUI (NextUI).
+**Stack:** React 18, Vite 5, TypeScript, TailwindCSS 4, HeroUI.
 
 ## STRUCTURE
 ```
 vite-frontend/
 ├── src/
-│   ├── pages/        # Route views
+│   ├── pages/        # Route views (some very large single-file pages)
 │   ├── components/   # Reusable UI parts
-│   ├── layouts/      # Page wrappers
-│   ├── api/          # Axios wrappers
-│   ├── config/       # App settings
-│   └── utils/        # Helpers
-├── vite.config.ts    # Vite config (Base: '/')
+│   ├── layouts/      # Admin vs H5 layouts
+│   ├── api/          # API functions + axios wrapper
+│   ├── config/       # Site config (title, repo, version)
+│   └── utils/        # Auth/JWT + WebView helpers
+├── vite.config.ts    # base '/', host 0.0.0.0:3000; build minify/treeshake disabled
+├── eslint.config.mjs  # ESLint 9 flat config
 └── package.json
 ```
 
 ## CONVENTIONS
-- **UI Lib**: HeroUI (formerly NextUI) + Tailwind CSS 4.
-- **Routing**: React Router DOM 6.
-- **State**: Check `provider.tsx` or local state.
-- **Build**: Output to `dist/`.
+- **Routing**: React Router v6 routes in `vite-frontend/src/App.tsx`.
+- **Auth**: JWT stored as `localStorage.token`; sent as `Authorization` header (no prefix) in `vite-frontend/src/api/network.ts`.
+- **Base URL**: Defaults to `/api/v1/` (or `VITE_API_BASE`); WebView mode selects a panel address via `vite-frontend/src/utils/panel.ts`.
+- **UI**: HeroUI provider + theme + toast wired in `vite-frontend/src/provider.tsx`.
 
 ## COMMANDS
 ```bash
-# Dev
+cd vite-frontend
 npm run dev
-
-# Build
 npm run build
+npm run lint
 ```

vite-frontend/src/AGENTS.md

@@ -0,0 +1,38 @@
+# VITE FRONTEND (src) KNOWLEDGE BASE
+
+## OVERVIEW
+React app entry + routing + providers. This is where UI architecture decisions live.
+
+## STRUCTURE
+```
+vite-frontend/src/
+├── main.tsx        # ReactDOM + BrowserRouter + Provider
+├── provider.tsx    # HeroUI + theme + toaster + i18n wrapper
+├── App.tsx         # Routes + ProtectedRoute + H5 layout selection
+├── api/            # Axios wrapper + typed endpoint helpers
+├── pages/          # Route views (large)
+├── layouts/        # Admin/H5 page chrome
+├── components/     # Shared UI components
+├── utils/          # JWT parsing + auth helpers + WebView utilities
+└── styles/         # globals.css
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Route definitions | `vite-frontend/src/App.tsx` | React Router v6 |
+| API client baseURL | `vite-frontend/src/api/network.ts` | `/api/v1/` + token header |
+| Token decoding | `vite-frontend/src/utils/jwt.ts` | Checks `exp` vs now |
+| Role checks | `vite-frontend/src/utils/auth.ts` | `isAdmin()` is `role_id == 0` |
+| WebView integration | `vite-frontend/src/api/network.ts` | Panel address selection in WebView mode |
+
+## CONVENTIONS
+- Token is stored in `localStorage.token` and sent as `Authorization` header (raw token string).
+- H5 mode detection is in `vite-frontend/src/App.tsx` (screen/user-agent/query param `h5=true`).
+
+## COMMANDS
+```bash
+cd vite-frontend
+npm run dev
+npm run lint
+```

vite-frontend/src/api/AGENTS.md

@@ -0,0 +1,16 @@
+# VITE FRONTEND (src/api) KNOWLEDGE BASE
+
+## OVERVIEW
+API client layer. Wraps axios and normalizes backend responses (`{ code, msg, data }`).
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Axios wrapper | `vite-frontend/src/api/network.ts` | Sets `axios.defaults.baseURL`; adds `Authorization` header |
+| BaseURL init (WebView vs web) | `vite-frontend/src/api/network.ts` | WebView mode calls `getPanelAddresses()` |
+| Endpoint functions | `vite-frontend/src/api/index.ts` | Mostly `Network.post("/…")` |
+
+## CONVENTIONS
+- Default baseURL is `/api/v1/` (or `${VITE_API_BASE}/api/v1/`).
+- In WebView mode, baseURL is derived from the selected panel address; if unset, requests return `code: -1` with a “set panel address” message.
+- 401 responses clear localStorage and redirect to `/`.

vite-frontend/src/config/site.ts

@@ -4,7 +4,7 @@ export type SiteConfig = typeof siteConfig;
 
 // 缓存相关常量
 const CACHE_PREFIX = 'vite_config_';
-const VERSION = "2.0.9";
+const VERSION = import.meta.env.VITE_APP_VERSION || "dev";
 const APP_VERSION = "1.0.3";
 const GITHUB_REPO = import.meta.env.VITE_GITHUB_REPO || "https://github.com/Sagit-chu/flux-panel";
 

vite-frontend/src/pages/AGENTS.md

@@ -0,0 +1,30 @@
+# VITE FRONTEND (pages) KNOWLEDGE BASE
+
+## OVERVIEW
+Route views rendered by `vite-frontend/src/App.tsx`. Several pages are large, single-file screens.
+
+## STRUCTURE
+```
+vite-frontend/src/pages/
+├── index.tsx            # Login + captcha flow
+├── dashboard.tsx
+├── forward.tsx          # Large
+├── tunnel.tsx           # Large
+├── node.tsx             # Large
+├── user.tsx             # Large
+├── config.tsx
+├── limit.tsx
+├── profile.tsx
+├── settings.tsx
+└── change-password.tsx
+```
+
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Login flow | `vite-frontend/src/pages/index.tsx` | Calls `login()` and stores `localStorage.token` |
+| API calls | `vite-frontend/src/api/index.ts` | Thin wrappers around `Network.post` |
+| Token expiration behavior | `vite-frontend/src/api/network.ts` | Clears localStorage + redirects on 401 |
+
+## CONVENTIONS
+- Pages call API wrappers from `vite-frontend/src/api/index.ts` (most endpoints are POST).

vite-frontend/src/pages/dashboard.tsx

@@ -741,31 +741,45 @@ export default function DashboardPage() {
                            tickLine={false}
                            axisLine={{ stroke: '#e5e7eb', strokeWidth: 1 }}
                          />
-                         <YAxis 
-                           tick={{ fontSize: 12 }}
-                           tickLine={false}
-                           axisLine={{ stroke: '#e5e7eb', strokeWidth: 1 }}
-                           tickFormatter={(value) => {
-                             if (value === 0) return '0';
-                             if (value < 1024) return `${value}B`;
-                             if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)}K`;
-                             if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)}M`;
-                             return `${(value / (1024 * 1024 * 1024)).toFixed(1)}G`;
-                           }}
-                         />
-                         <Tooltip 
-                           content={({ active, payload, label }) => {
-                             if (active && payload && payload.length) {
-                               return (
-                                 <div className="bg-white dark:bg-default-100 border border-default-200 rounded-lg shadow-lg p-3">
-                                   <p className="font-medium text-foreground">{`时间: ${label}`}</p>
-                                   <p className="text-primary">
-                                     {`流量: ${formatFlow(payload[0]?.value as number || 0)}`}
-                                   </p>
-                                 </div>
-                               );
-                             }
-                             return null;
+                          <YAxis 
+                            tick={{ fontSize: 12 }}
+                            tickLine={false}
+                            axisLine={{ stroke: '#e5e7eb', strokeWidth: 1 }}
+                            tickFormatter={(value: number | string) => {
+                              const v = typeof value === 'number' ? value : Number(value);
+                              if (!Number.isFinite(v)) return String(value);
+                              if (v === 0) return '0';
+                              if (v < 1024) return `${v}B`;
+                              if (v < 1024 * 1024) return `${(v / 1024).toFixed(1)}K`;
+                              if (v < 1024 * 1024 * 1024) return `${(v / (1024 * 1024)).toFixed(1)}M`;
+                              return `${(v / (1024 * 1024 * 1024)).toFixed(1)}G`;
+                            }}
+                          />
+                          <Tooltip 
+                            content={({
+                              active,
+                              payload,
+                              label,
+                            }: {
+                              active?: boolean;
+                              payload?: Array<{ value?: number | string }>;
+                              label?: string | number;
+                            }) => {
+                              if (active && payload && payload.length) {
+                                const firstValue = payload[0]?.value;
+                                const numericValue = typeof firstValue === 'number' ? firstValue : Number(firstValue);
+                                const flowValue = Number.isFinite(numericValue) ? numericValue : 0;
+
+                                return (
+                                  <div className="bg-white dark:bg-default-100 border border-default-200 rounded-lg shadow-lg p-3">
+                                    <p className="font-medium text-foreground">{`时间: ${label ?? ''}`}</p>
+                                    <p className="text-primary">
+                                      {`流量: ${formatFlow(flowValue)}`}
+                                    </p>
+                                  </div>
+                                );
+                              }
+                              return null;
                            }}
                          />
                          <Line
@@ -983,4 +997,4 @@ export default function DashboardPage() {
       </div>
           
   );
-} 
+} 

vite-frontend/src/pages/forward.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Card, CardBody, CardHeader } from "@heroui/card";
 import { Button } from "@heroui/button";
 import { Input } from "@heroui/input";
@@ -15,7 +15,8 @@ import {
   DndContext,
   closestCenter,
   KeyboardSensor,
-  PointerSensor,
+  MouseSensor,
+  TouchSensor,
   useSensor,
   useSensors,
   DragEndEvent,
@@ -353,8 +354,6 @@ export default function ForwardPage() {
     const userMap = new Map<string, UserGroup>();
     
     // 获取排序后的转发列表
-    const sortedForwards = getSortedForwards();
-    
     sortedForwards.forEach(forward => {
       const userKey = forward.userId ? forward.userId.toString() : 'unknown';
       const userName = forward.userName || '未知用户';
@@ -855,7 +854,7 @@ export default function ForwardPage() {
         );
       } else {
         // 直接显示模式下，过滤指定隧道的转发
-        forwardsToExport = getSortedForwards().filter(forward => forward.tunnelId === selectedTunnelForExport);
+        forwardsToExport = sortedForwards.filter(forward => forward.tunnelId === selectedTunnelForExport);
       }
       
       if (forwardsToExport.length === 0) {
@@ -1102,64 +1101,80 @@ export default function ForwardPage() {
 
   // 传感器配置 - 使用默认配置避免错误
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 8,
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
 
+  const tokenUserId = JwtUtil.getUserIdFromToken();
+
   // 根据排序顺序获取转发列表
-  const getSortedForwards = (): Forward[] => {
+  const sortedForwards = useMemo((): Forward[] => {
     // 确保 forwards 数组存在且有效
     if (!forwards || forwards.length === 0) {
       return [];
     }
-    
+
     // 在平铺模式下，只显示当前用户的转发
     let filteredForwards = forwards;
     if (viewMode === 'direct') {
-      const currentUserId = JwtUtil.getUserIdFromToken();
-      if (currentUserId !== null) {
-        filteredForwards = forwards.filter(forward => forward.userId === currentUserId);
+      if (tokenUserId !== null) {
+        filteredForwards = forwards.filter(forward => forward.userId === tokenUserId);
       }
     }
-    
+
     // 确保过滤后的转发列表有效
     if (!filteredForwards || filteredForwards.length === 0) {
       return [];
     }
-    
+
     // 优先使用数据库中的 inx 字段进行排序
-    const sortedForwards = [...filteredForwards].sort((a, b) => {
+    const sortedByDb = [...filteredForwards].sort((a, b) => {
       const aInx = a.inx ?? 0;
       const bInx = b.inx ?? 0;
       return aInx - bInx;
     });
-    
+
     // 如果数据库中没有排序信息，则使用本地存储的顺序
-    if (forwardOrder && forwardOrder.length > 0 && sortedForwards.every(f => f.inx === undefined || f.inx === 0)) {
+    if (forwardOrder && forwardOrder.length > 0 && sortedByDb.every(f => f.inx === undefined || f.inx === 0)) {
       const forwardMap = new Map(filteredForwards.map(f => [f.id, f]));
       const localSortedForwards: Forward[] = [];
-      
+
       forwardOrder.forEach(id => {
         const forward = forwardMap.get(id);
         if (forward) {
           localSortedForwards.push(forward);
         }
       });
-      
+
       // 添加不在排序列表中的转发（新添加的）
       filteredForwards.forEach(forward => {
         if (!forwardOrder.includes(forward.id)) {
           localSortedForwards.push(forward);
         }
       });
-      
+
       return localSortedForwards;
     }
-    
-    return sortedForwards;
-  };
+
+    return sortedByDb;
+  }, [forwards, forwardOrder, viewMode, tokenUserId]);
+
+  const sortableForwardIds = useMemo(
+    () => sortedForwards.map(f => f.id).filter(id => id > 0),
+    [sortedForwards]
+  );
 
   // 可拖拽的转发卡片组件
   const SortableForwardCard = ({ forward }: { forward: Forward }) => {
@@ -1179,8 +1194,9 @@ export default function ForwardPage() {
 
     const style = {
       transform: transform ? CSS.Transform.toString(transform) : undefined,
-      transition: transition || undefined,
+      transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
+      willChange: 'transform',
     };
 
     return (
@@ -1529,11 +1545,11 @@ export default function ForwardPage() {
               onDragStart={() => {}} // 添加空的 onDragStart 处理器
             >
               <SortableContext
-                items={getSortedForwards().map(f => f.id || 0).filter(id => id > 0)}
+                items={sortableForwardIds}
                 strategy={rectSortingStrategy}
               >
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                  {getSortedForwards().map((forward) => (
+                  {sortedForwards.map((forward) => (
                     forward && forward.id ? (
                       <SortableForwardCard key={forward.id} forward={forward} />
                     ) : null
@@ -2394,4 +2410,4 @@ export default function ForwardPage() {
       </div>
     
   );
-} 
+} 

vite-frontend/src/pages/node.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { Card, CardBody, CardHeader } from "@heroui/card";
 import { Button } from "@heroui/button";
 import { Input } from "@heroui/input";
@@ -16,7 +16,8 @@ import axios from 'axios';
 import {
   DndContext,
   KeyboardSensor,
-  PointerSensor,
+  MouseSensor,
+  TouchSensor,
   type DragEndEvent,
   useSensor,
   useSensors,
@@ -72,6 +73,7 @@ interface Node {
 interface NodeForm {
   id: number | null;
   name: string;
+  serverHost: string;
   serverIpV4: string;
   serverIpV6: string;
   port: string;
@@ -83,10 +85,42 @@ interface NodeForm {
   socks: number; // 0 关 1 开
 }
 
+const SortableItem = ({
+  id,
+  children,
+}: {
+  id: number;
+  children: (listeners: any) => any;
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: transform ? CSS.Transform.toString(transform) : undefined,
+    transition: isDragging ? undefined : transition || undefined,
+    opacity: isDragging ? 0.5 : 1,
+    willChange: 'transform',
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      {children(listeners)}
+    </div>
+  );
+};
+
 export default function NodePage() {
   const [nodeList, setNodeList] = useState<Node[]>([]);
   const [nodeOrder, setNodeOrder] = useState<number[]>([]);
   const [loading, setLoading] = useState(false);
+  const [wsConnected, setWsConnected] = useState(false);
+  const [wsConnecting, setWsConnecting] = useState(false);
   const [dialogVisible, setDialogVisible] = useState(false);
   const [dialogTitle, setDialogTitle] = useState('');
   const [isEdit, setIsEdit] = useState(false);
@@ -99,6 +133,7 @@ export default function NodePage() {
   const [form, setForm] = useState<NodeForm>({
     id: null,
     name: '',
+    serverHost: '',
     serverIpV4: '',
     serverIpV6: '',
     port: '1000-65535',
@@ -120,6 +155,31 @@ export default function NodePage() {
   const reconnectTimerRef = useRef<NodeJS.Timeout | null>(null);
   const reconnectAttemptsRef = useRef(0);
   const maxReconnectAttempts = 5;
+  const offlineTimersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
+  const offlineDelayMs = 3000;
+
+  const clearOfflineTimer = (nodeId: number) => {
+    const timer = offlineTimersRef.current.get(nodeId);
+    if (timer) {
+      clearTimeout(timer);
+      offlineTimersRef.current.delete(nodeId);
+    }
+  };
+
+  const scheduleNodeOffline = (nodeId: number) => {
+    if (offlineTimersRef.current.has(nodeId)) return;
+    const timer = setTimeout(() => {
+      offlineTimersRef.current.delete(nodeId);
+      setNodeList((prev) =>
+        prev.map((node) => {
+          if (node.id !== nodeId) return node;
+          if (node.connectionStatus === 'offline' && node.systemInfo === null) return node;
+          return { ...node, connectionStatus: 'offline', systemInfo: null };
+        })
+      );
+    }, offlineDelayMs);
+    offlineTimersRef.current.set(nodeId, timer);
+  };
 
   useEffect(() => {
     loadNodes();
@@ -204,12 +264,15 @@ export default function NodePage() {
     // 构建WebSocket URL，使用axios的baseURL
     const baseUrl = axios.defaults.baseURL || (import.meta.env.VITE_API_BASE ? `${import.meta.env.VITE_API_BASE}/api/v1/` : '/api/v1/');
     const wsUrl = baseUrl.replace(/^http/, 'ws').replace(/\/api\/v1\/$/, '') + `/system-info?type=0&secret=${localStorage.getItem('token')}`;
-    
+
     try {
+      setWsConnecting(true);
       websocketRef.current = new WebSocket(wsUrl);
       
       websocketRef.current.onopen = () => {
         reconnectAttemptsRef.current = 0;
+        setWsConnected(true);
+        setWsConnecting(false);
       };
       
       websocketRef.current.onmessage = (event) => {
@@ -227,9 +290,13 @@ export default function NodePage() {
       
       websocketRef.current.onclose = () => {
         websocketRef.current = null;
+        setWsConnected(false);
+        setWsConnecting(false);
         attemptReconnect();
       };
     } catch (error) {
+      setWsConnected(false);
+      setWsConnecting(false);
       attemptReconnect();
     }
   };
@@ -237,21 +304,27 @@ export default function NodePage() {
   // 处理WebSocket消息
   const handleWebSocketMessage = (data: any) => {
     const { id, type, data: messageData } = data;
+    const nodeId = Number(id);
+    if (Number.isNaN(nodeId)) return;
     
     if (type === 'status') {
-      setNodeList(prev => prev.map(node => {
-        if (node.id == id) {
-          return {
-            ...node,
-            connectionStatus: messageData === 1 ? 'online' : 'offline',
-            systemInfo: messageData === 0 ? null : node.systemInfo
-          };
-        }
-        return node;
-      }));
+      if (messageData === 1) {
+        clearOfflineTimer(nodeId);
+        setNodeList((prev) =>
+          prev.map((node) => {
+            if (node.id !== nodeId) return node;
+            if (node.connectionStatus === 'online') return node;
+            return { ...node, connectionStatus: 'online' };
+          })
+        );
+      } else {
+        // 离线事件做延迟处理，避免短抖动导致频繁闪烁
+        scheduleNodeOffline(nodeId);
+      }
     } else if (type === 'info') {
+      clearOfflineTimer(nodeId);
       setNodeList(prev => prev.map(node => {
-        if (node.id == id) {
+        if (node.id === nodeId) {
           try {
             let systemInfo;
             if (typeof messageData === 'string') {
@@ -314,10 +387,12 @@ export default function NodePage() {
 
   // 尝试重新连接
   const attemptReconnect = () => {
+    if (reconnectTimerRef.current) return;
     if (reconnectAttemptsRef.current < maxReconnectAttempts) {
       reconnectAttemptsRef.current++;
       
       reconnectTimerRef.current = setTimeout(() => {
+        reconnectTimerRef.current = null;
         initWebSocket();
       }, 3000 * reconnectAttemptsRef.current);
     }
@@ -329,8 +404,13 @@ export default function NodePage() {
       clearTimeout(reconnectTimerRef.current);
       reconnectTimerRef.current = null;
     }
+
+    offlineTimersRef.current.forEach((timer) => clearTimeout(timer));
+    offlineTimersRef.current.clear();
     
     reconnectAttemptsRef.current = 0;
+    setWsConnected(false);
+    setWsConnecting(false);
     
     if (websocketRef.current) {
       websocketRef.current.onopen = null;
@@ -345,12 +425,6 @@ export default function NodePage() {
       
       websocketRef.current = null;
     }
-    
-    setNodeList(prev => prev.map(node => ({
-      ...node,
-      connectionStatus: 'offline',
-      systemInfo: null
-    })));
   };
 
 
@@ -409,6 +483,15 @@ export default function NodePage() {
   const validateIpv4Literal = (ip: string): boolean => ipv4Regex.test(ip.trim());
   const validateIpv6Literal = (ip: string): boolean => ipv6Regex.test(ip.trim());
 
+  // Hostname/domain validation (no scheme/port)
+  const hostnameRegex = /^(?=.{1,253}$)(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)(?:\.(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?))*$/;
+  const validateHostname = (host: string): boolean => {
+    const v = host.trim();
+    if (!v) return false;
+    if (v === 'localhost') return true;
+    return hostnameRegex.test(v);
+  };
+
   // 验证端口格式：支持 80,443,100-600
   const validatePort = (portStr: string): { valid: boolean; error?: string } => {
     if (!portStr || !portStr.trim()) {
@@ -474,10 +557,13 @@ export default function NodePage() {
     
     const v4 = form.serverIpV4.trim();
     const v6 = form.serverIpV6.trim();
+    const host = form.serverHost.trim();
 
-    if (!v4 && !v6) {
-      newErrors.serverIpV4 = '请至少填写一个IPv4或IPv6地址';
-      newErrors.serverIpV6 = '请至少填写一个IPv4或IPv6地址';
+    if (!v4 && !v6 && !host) {
+      const msg = '请至少填写一个 IPv4/IPv6 地址或域名';
+      newErrors.serverIpV4 = msg;
+      newErrors.serverIpV6 = msg;
+      newErrors.serverHost = msg;
     } else {
       if (v4 && !validateIpv4Literal(v4)) {
         newErrors.serverIpV4 = '请输入有效的IPv4地址';
@@ -485,6 +571,9 @@ export default function NodePage() {
       if (v6 && !validateIpv6Literal(v6)) {
         newErrors.serverIpV6 = '请输入有效的IPv6地址';
       }
+      if (host && !validateHostname(host)) {
+        newErrors.serverHost = '请输入有效的域名/主机名';
+      }
     }
     
     const portValidation = validatePort(form.port);
@@ -510,11 +599,18 @@ export default function NodePage() {
   const handleEdit = (node: Node) => {
     setDialogTitle('编辑节点');
     setIsEdit(true);
+
+    const legacy = (node.serverIp || '').trim();
+    const normalizedV4 = node.serverIpV4?.trim() || (validateIpv4Literal(legacy) ? legacy : '');
+    const normalizedV6 = node.serverIpV6?.trim() || (validateIpv6Literal(legacy) ? legacy : '');
+    const normalizedHost = (!normalizedV4 && !normalizedV6 && legacy) ? legacy : '';
+
     setForm({
       id: node.id,
       name: node.name,
-      serverIpV4: node.serverIpV4?.trim() || (validateIpv4Literal((node.serverIp || '').trim()) ? (node.serverIp || '').trim() : ''),
-      serverIpV6: node.serverIpV6?.trim() || (validateIpv6Literal((node.serverIp || '').trim()) ? (node.serverIp || '').trim() : ''),
+      serverHost: normalizedHost,
+      serverIpV4: normalizedV4,
+      serverIpV6: normalizedV6,
       port: node.port || '1000-65535',
       tcpListenAddr: node.tcpListenAddr || '[::]',
       udpListenAddr: node.udpListenAddr || '[::]',
@@ -605,9 +701,10 @@ export default function NodePage() {
     
     try {
       const apiCall = isEdit ? updateNode : createNode;
-      const data = { 
-        ...form,
-        serverIp: form.serverIpV4?.trim() || form.serverIpV6?.trim() || ''
+      const { serverHost: _serverHost, ...rest } = form;
+      const data = {
+        ...rest,
+        serverIp: form.serverIpV4?.trim() || form.serverIpV6?.trim() || form.serverHost?.trim() || ''
       };
       
       const res = await apiCall(data);
@@ -616,22 +713,22 @@ export default function NodePage() {
         setDialogVisible(false);
         
         if (isEdit) {
-          setNodeList(prev => prev.map(n => 
-            n.id === form.id ? {
-              ...n,
-              name: form.name,
-              serverIp: form.serverIpV4?.trim() || form.serverIpV6?.trim() || '',
-              serverIpV4: form.serverIpV4,
-              serverIpV6: form.serverIpV6,
-              port: form.port,
-              tcpListenAddr: form.tcpListenAddr,
-              udpListenAddr: form.udpListenAddr,
-              interfaceName: form.interfaceName,
-              http: form.http,
-              tls: form.tls,
-              socks: form.socks
-            } : n
-          ));
+            setNodeList(prev => prev.map(n => 
+              n.id === form.id ? {
+                ...n,
+                name: form.name,
+                serverIp: form.serverIpV4?.trim() || form.serverIpV6?.trim() || form.serverHost?.trim() || '',
+                serverIpV4: form.serverIpV4,
+                serverIpV6: form.serverIpV6,
+                port: form.port,
+                tcpListenAddr: form.tcpListenAddr,
+                udpListenAddr: form.udpListenAddr,
+                interfaceName: form.interfaceName,
+                http: form.http,
+                tls: form.tls,
+                socks: form.socks
+              } : n
+            ));
         } else {
           loadNodes();
         }
@@ -650,6 +747,7 @@ export default function NodePage() {
     setForm({
       id: null,
       name: '',
+      serverHost: '',
       serverIpV4: '',
       serverIpV6: '',
       port: '1000-65535',
@@ -710,24 +808,34 @@ export default function NodePage() {
 
   // 传感器配置
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 8,
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
 
   // 根据排序顺序获取节点列表
-  const getSortedNodes = (): Node[] => {
+  const sortedNodes = useMemo((): Node[] => {
     if (!nodeList || nodeList.length === 0) return [];
 
-    const sortedNodes = [...nodeList].sort((a, b) => {
+    const sortedByDb = [...nodeList].sort((a, b) => {
       const aInx = a.inx ?? 0;
       const bInx = b.inx ?? 0;
       return aInx - bInx;
     });
 
     // 如果数据库中没有排序信息，则使用本地存储的顺序
-    if (nodeOrder && nodeOrder.length > 0 && sortedNodes.every((n) => n.inx === undefined || n.inx === 0)) {
+    if (nodeOrder && nodeOrder.length > 0 && sortedByDb.every((n) => n.inx === undefined || n.inx === 0)) {
       const nodeMap = new Map(nodeList.map((n) => [n.id, n] as const));
       const localSorted: Node[] = [];
 
@@ -745,37 +853,10 @@ export default function NodePage() {
       return localSorted;
     }
 
-    return sortedNodes;
-  };
+    return sortedByDb;
+  }, [nodeList, nodeOrder]);
 
-  const SortableItem = ({
-    id,
-    children,
-  }: {
-    id: number;
-    children: (listeners: any) => any;
-  }) => {
-    const {
-      attributes,
-      listeners,
-      setNodeRef,
-      transform,
-      transition,
-      isDragging,
-    } = useSortable({ id });
-
-    const style = {
-      transform: transform ? CSS.Transform.toString(transform) : undefined,
-      transition: transition || undefined,
-      opacity: isDragging ? 0.5 : 1,
-    };
-
-    return (
-      <div ref={setNodeRef} style={style} {...attributes}>
-        {children(listeners)}
-      </div>
-    );
-  };
+  const sortableNodeIds = useMemo(() => sortedNodes.map((n) => n.id), [sortedNodes]);
 
   return (
     
@@ -797,6 +878,15 @@ export default function NodePage() {
      
         </div>
 
+        {!wsConnected && (
+          <Alert
+            color="warning"
+            variant="flat"
+            description={wsConnecting ? '监控连接中...' : '监控连接已断开，正在重连...'}
+            className="mb-4"
+          />
+        )}
+
         {/* 节点列表 */}
         {loading ? (
           <div className="flex items-center justify-center h-64">
@@ -824,11 +914,11 @@ export default function NodePage() {
         ) : (
           <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
             <SortableContext
-              items={getSortedNodes().map((n) => n.id)}
+              items={sortableNodeIds}
               strategy={rectSortingStrategy}
             >
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                {getSortedNodes().map((node) => (
+                {sortedNodes.map((node) => (
                   <SortableItem key={node.id} id={node.id}>
                     {(listeners) => (
                       <Card 
@@ -1059,6 +1149,17 @@ export default function NodePage() {
                   variant="bordered"
                 />
 
+                <Input
+                  label="服务器域名/主机名"
+                  placeholder="例如: node.example.com"
+                  value={form.serverHost}
+                  onChange={(e) => setForm(prev => ({ ...prev, serverHost: e.target.value }))}
+                  isInvalid={!!errors.serverHost}
+                  errorMessage={errors.serverHost}
+                  variant="bordered"
+                  description="可选：不带协议、不带端口。至少填写一个 IPv4/IPv6/域名"
+                />
+
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <Input
                     label="服务器IPv4"
@@ -1079,7 +1180,7 @@ export default function NodePage() {
                     isInvalid={!!errors.serverIpV6}
                     errorMessage={errors.serverIpV6}
                     variant="bordered"
-                    description="至少填写一个 IPv4/IPv6 地址"
+                    description="至少填写一个 IPv4/IPv6/域名"
                   />
                 </div>
 

vite-frontend/src/pages/tunnel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Card, CardBody, CardHeader } from "@heroui/card";
 import { Button } from "@heroui/button";
 import { Input, Textarea } from "@heroui/input";
@@ -13,7 +13,8 @@ import toast from 'react-hot-toast';
 import {
   DndContext,
   KeyboardSensor,
-  PointerSensor,
+  MouseSensor,
+  TouchSensor,
   type DragEndEvent,
   useSensor,
   useSensors,
@@ -586,24 +587,34 @@ export default function TunnelPage() {
 
   // 传感器配置
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 8,
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
 
   // 根据排序顺序获取隧道列表
-  const getSortedTunnels = (): Tunnel[] => {
+  const sortedTunnels = useMemo((): Tunnel[] => {
     if (!tunnels || tunnels.length === 0) return [];
 
-    const sortedTunnels = [...tunnels].sort((a, b) => {
+    const sortedByDb = [...tunnels].sort((a, b) => {
       const aInx = a.inx ?? 0;
       const bInx = b.inx ?? 0;
       return aInx - bInx;
     });
 
     // 如果数据库中没有排序信息，则使用本地存储的顺序
-    if (tunnelOrder && tunnelOrder.length > 0 && sortedTunnels.every((t) => t.inx === undefined || t.inx === 0)) {
+    if (tunnelOrder && tunnelOrder.length > 0 && sortedByDb.every((t) => t.inx === undefined || t.inx === 0)) {
       const tunnelMap = new Map(tunnels.map((t) => [t.id, t] as const));
       const localSorted: Tunnel[] = [];
 
@@ -621,8 +632,10 @@ export default function TunnelPage() {
       return localSorted;
     }
 
-    return sortedTunnels;
-  };
+    return sortedByDb;
+  }, [tunnels, tunnelOrder]);
+
+  const sortableTunnelIds = useMemo(() => sortedTunnels.map((t) => t.id), [sortedTunnels]);
 
   const SortableItem = ({
     id,
@@ -642,8 +655,9 @@ export default function TunnelPage() {
 
     const style = {
       transform: transform ? CSS.Transform.toString(transform) : undefined,
-      transition: transition || undefined,
+      transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
+      willChange: 'transform',
     };
 
     return (
@@ -690,11 +704,11 @@ export default function TunnelPage() {
         {tunnels.length > 0 ? (
           <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
             <SortableContext
-              items={getSortedTunnels().map((t) => t.id)}
+              items={sortableTunnelIds}
               strategy={rectSortingStrategy}
             >
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                {getSortedTunnels().map((tunnel) => {
+                {sortedTunnels.map((tunnel) => {
               const typeDisplay = getTypeDisplay(tunnel.type);
               
               return (

vite-frontend/src/types/recharts.d.ts

@@ -0,0 +1,11 @@
+declare module 'recharts' {
+  import * as React from 'react';
+
+  export const LineChart: React.ComponentType<Record<string, unknown>>;
+  export const Line: React.ComponentType<Record<string, unknown>>;
+  export const XAxis: React.ComponentType<Record<string, unknown>>;
+  export const YAxis: React.ComponentType<Record<string, unknown>>;
+  export const CartesianGrid: React.ComponentType<Record<string, unknown>>;
+  export const Tooltip: React.ComponentType<Record<string, unknown>>;
+  export const ResponsiveContainer: React.ComponentType<Record<string, unknown>>;
+}

vite-frontend/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_VERSION?: string;
+  readonly VITE_GITHUB_REPO?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}