fix(frontend): resolve remaining font blur in node and forward cards (#188)

## Summary
- apply the same anti-blur drag transform strategy used in tunnel cards
to node cards
- update forward card and table-row sortable transforms to round x/y
pixels and reduce subpixel text blur
- limit `willChange` usage to active dragging so text does not remain on
a promoted layer while idle

## Verification
- npm run build (vite-frontend)

.gitignore

@@ -268,3 +268,6 @@ sql/
 !go-backend/internal/store/postgres/sql/
 !go-backend/internal/store/postgres/sql/schema.sql
 !go-backend/internal/store/postgres/sql/data.sql
+go-backend/gost.db-shm
+.gitignore
+go-backend/gost.db-wal

go-backend/internal/http/handler/control_plane.go

@@ -360,6 +360,8 @@ func (h *Handler) diagnoseForwardRuntime(forward *forwardRecord) (map[string]int
 		return nil, errors.New("隧道配置不完整")
 	}
 
+	ipPreference := h.repo.GetTunnelIPPreference(forward.TunnelID)
+
 	inNodes, chainHops, outNodes := splitChainNodeGroups(chainRows)
 	results := make([]map[string]interface{}, 0, len(chainRows)*2+len(targets))
 	nodeCache := map[int64]*nodeRecord{}
@@ -383,7 +385,7 @@ func (h *Handler) diagnoseForwardRuntime(forward *forwardRecord) (map[string]int
 						"fromChainType": 1,
 						"toChainType":   2,
 						"toInx":         firstNode.Inx,
-					}, "")
+					}, ipPreference)
 				}
 			} else {
 				for _, outNode := range outNodes {
@@ -391,7 +393,7 @@ func (h *Handler) diagnoseForwardRuntime(forward *forwardRecord) (map[string]int
 					h.appendChainHopDiagnosis(&results, nodeCache, inNode.NodeID, outNode, description, map[string]interface{}{
 						"fromChainType": 1,
 						"toChainType":   3,
-					}, "")
+					}, ipPreference)
 				}
 			}
 		}
@@ -406,7 +408,7 @@ func (h *Handler) diagnoseForwardRuntime(forward *forwardRecord) (map[string]int
 							"fromInx":       currentNode.Inx,
 							"toChainType":   2,
 							"toInx":         nextNode.Inx,
-						}, "")
+						}, ipPreference)
 					}
 				} else {
 					for _, outNode := range outNodes {
@@ -415,7 +417,7 @@ func (h *Handler) diagnoseForwardRuntime(forward *forwardRecord) (map[string]int
 							"fromChainType": 2,
 							"fromInx":       currentNode.Inx,
 							"toChainType":   3,
-						}, "")
+						}, ipPreference)
 					}
 				}
 			}
@@ -479,7 +481,7 @@ func (h *Handler) diagnoseTunnelRuntime(tunnelID int64) (map[string]interface{},
 	case 1:
 		for _, inNode := range inNodes {
 			description := fmt.Sprintf("入口(%s)->外网", inNode.NodeName)
-			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.google.com", 443, description, map[string]interface{}{
+			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.bing.com", 443, description, map[string]interface{}{
 				"fromChainType": 1,
 			})
 		}
@@ -532,14 +534,14 @@ func (h *Handler) diagnoseTunnelRuntime(tunnelID int64) (map[string]interface{},
 
 		for _, outNode := range outNodes {
 			description := fmt.Sprintf("出口(%s)->外网", outNode.NodeName)
-			h.appendPathDiagnosis(&results, nodeCache, outNode.NodeID, "www.google.com", 443, description, map[string]interface{}{
+			h.appendPathDiagnosis(&results, nodeCache, outNode.NodeID, "www.bing.com", 443, description, map[string]interface{}{
 				"fromChainType": 3,
 			})
 		}
 	default:
 		for _, inNode := range inNodes {
 			description := fmt.Sprintf("入口(%s)->外网", inNode.NodeName)
-			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.google.com", 443, description, map[string]interface{}{
+			h.appendPathDiagnosis(&results, nodeCache, inNode.NodeID, "www.bing.com", 443, description, map[string]interface{}{
 				"fromChainType": 1,
 			})
 		}

go-backend/internal/http/handler/handler.go

@@ -34,6 +34,9 @@ type Handler struct {
 	jobsCancel  context.CancelFunc
 	jobsStarted bool
 	jobsWG      sync.WaitGroup
+
+	upgradeMu              sync.Mutex
+	pendingUpgradeRedeploy map[int64]struct{}
 }
 
 type loginRequest struct {
@@ -70,12 +73,15 @@ type flowItem struct {
 }
 
 func New(repo *repo.Repository, jwtSecret string) *Handler {
-	return &Handler{
-		repo:          repo,
-		jwtSecret:     jwtSecret,
-		wsServer:      ws.NewServer(repo, jwtSecret),
-		captchaTokens: make(map[string]int64),
+	h := &Handler{
+		repo:                   repo,
+		jwtSecret:              jwtSecret,
+		wsServer:               ws.NewServer(repo, jwtSecret),
+		captchaTokens:          make(map[string]int64),
+		pendingUpgradeRedeploy: make(map[int64]struct{}),
 	}
+	h.wsServer.SetNodeOnlineHook(h.onNodeOnline)
+	return h
 }
 
 func (h *Handler) WebSocketHandler() http.Handler {

go-backend/internal/http/handler/mutations.go

@@ -355,11 +355,28 @@ func (h *Handler) nodeInstall(w http.ResponseWriter, r *http.Request) {
 		response.WriteJSON(w, response.ErrDefault("请求失败"))
 		return
 	}
-	id := idFromBody(r, w)
-	if id <= 0 {
+
+	var req struct {
+		ID      int64  `json:"id"`
+		Channel string `json:"channel"`
+	}
+	if err := decodeJSON(r.Body, &req); err != nil {
+		response.WriteJSON(w, response.ErrDefault("请求参数错误"))
 		return
 	}
-	secret, err := h.repo.GetNodeSecret(id)
+	if req.ID <= 0 {
+		response.WriteJSON(w, response.ErrDefault("参数错误"))
+		return
+	}
+
+	channel := normalizeReleaseChannel(req.Channel)
+	version, err := resolveLatestReleaseByChannel(channel)
+	if err != nil {
+		response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取最新%s失败: %v", releaseChannelLabel(channel), err)))
+		return
+	}
+
+	secret, err := h.repo.GetNodeSecret(req.ID)
 	if err != nil {
 		response.WriteJSON(w, response.ErrDefault("节点不存在"))
 		return
@@ -373,7 +390,7 @@ func (h *Handler) nodeInstall(w http.ResponseWriter, r *http.Request) {
 		response.WriteJSON(w, response.Err(-2, err.Error()))
 		return
 	}
-	cmd := fmt.Sprintf("curl -L https://gcode.hostcentral.cc/https://github.com/Sagit-chu/flvx/releases/latest/download/install.sh -o ./install.sh && chmod +x ./install.sh && ./install.sh -a %s -s %s", processServerAddress(panelAddr), secret)
+	cmd := fmt.Sprintf("curl -L https://gcode.hostcentral.cc/https://github.com/Sagit-chu/flvx/releases/download/%s/install.sh -o ./install.sh && chmod +x ./install.sh && VERSION=%s ./install.sh -a %s -s %s", version, version, processServerAddress(panelAddr), secret)
 	response.WriteJSON(w, response.OK(cmd))
 }
 
@@ -901,6 +918,58 @@ func (h *Handler) reconstructTunnelState(tunnelID int64) (*tunnelCreateState, er
 	return state, nil
 }
 
+func (h *Handler) redeployTunnelAndForwards(tunnelID int64) error {
+	tunnel, err := h.getTunnelRecord(tunnelID)
+	if err != nil {
+		return err
+	}
+
+	if tunnel.Type == 2 {
+		h.cleanupTunnelRuntime(tunnelID)
+		h.cleanupFederationRuntime(tunnelID)
+		state, err := h.reconstructTunnelState(tunnelID)
+		if err != nil {
+			return err
+		}
+		federationBindings, federationReleaseRefs, fedErr := h.applyFederationRuntime(state, h.federationLocalDomain())
+		if fedErr != nil {
+			return fedErr
+		}
+		tx := h.repo.BeginTx()
+		if tx.Error != nil {
+			h.releaseFederationRuntimeRefs(federationReleaseRefs)
+			return tx.Error
+		}
+		if replaceErr := h.repo.ReplaceFederationTunnelBindingsTx(tx, tunnelID, federationBindings); replaceErr != nil {
+			tx.Rollback()
+			h.releaseFederationRuntimeRefs(federationReleaseRefs)
+			return replaceErr
+		}
+		if commitErr := tx.Commit().Error; commitErr != nil {
+			h.releaseFederationRuntimeRefs(federationReleaseRefs)
+			return commitErr
+		}
+		_, _, applyErr := h.applyTunnelRuntime(state)
+		if applyErr != nil {
+			h.releaseFederationRuntimeRefs(federationReleaseRefs)
+			_ = h.repo.DeleteFederationTunnelBindingsByTunnel(tunnelID)
+			return applyErr
+		}
+	}
+
+	forwards, err := h.listForwardsByTunnel(tunnelID)
+	if err != nil {
+		return err
+	}
+	for i := range forwards {
+		if err := h.syncForwardServices(&forwards[i], "UpdateService", true); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
 func (h *Handler) tunnelBatchRedeploy(w http.ResponseWriter, r *http.Request) {
 	ids := idsFromBody(r, w)
 	if ids == nil {
@@ -909,72 +978,11 @@ func (h *Handler) tunnelBatchRedeploy(w http.ResponseWriter, r *http.Request) {
 	success := 0
 	fail := 0
 	for _, tunnelID := range ids {
-		tunnel, err := h.getTunnelRecord(tunnelID)
-		if err != nil {
+		if err := h.redeployTunnelAndForwards(tunnelID); err != nil {
 			fail++
 			continue
 		}
-
-		if tunnel.Type == 2 {
-			h.cleanupTunnelRuntime(tunnelID)
-			h.cleanupFederationRuntime(tunnelID)
-			state, err := h.reconstructTunnelState(tunnelID)
-			if err != nil {
-				fail++
-				continue
-			}
-			federationBindings, federationReleaseRefs, fedErr := h.applyFederationRuntime(state, h.federationLocalDomain())
-			if fedErr != nil {
-				fail++
-				continue
-			}
-			tx := h.repo.BeginTx()
-			if tx.Error != nil {
-				h.releaseFederationRuntimeRefs(federationReleaseRefs)
-				fail++
-				continue
-			}
-			if replaceErr := h.repo.ReplaceFederationTunnelBindingsTx(tx, tunnelID, federationBindings); replaceErr != nil {
-				tx.Rollback()
-				h.releaseFederationRuntimeRefs(federationReleaseRefs)
-				fail++
-				continue
-			}
-			if commitErr := tx.Commit().Error; commitErr != nil {
-				h.releaseFederationRuntimeRefs(federationReleaseRefs)
-				fail++
-				continue
-			}
-			_, _, applyErr := h.applyTunnelRuntime(state)
-			if applyErr != nil {
-				h.releaseFederationRuntimeRefs(federationReleaseRefs)
-				_ = h.repo.DeleteFederationTunnelBindingsByTunnel(tunnelID)
-				fail++
-				continue
-			}
-		}
-
-		forwards, err := h.listForwardsByTunnel(tunnelID)
-		if err != nil {
-			fail++
-			continue
-		}
-		if len(forwards) == 0 {
-			success++
-			continue
-		}
-		ok := true
-		for i := range forwards {
-			if err := h.syncForwardServices(&forwards[i], "UpdateService", true); err != nil {
-				ok = false
-				break
-			}
-		}
-		if ok {
-			success++
-		} else {
-			fail++
-		}
+		success++
 	}
 	response.WriteJSON(w, response.OK(map[string]interface{}{"successCount": success, "failCount": fail}))
 }

go-backend/internal/http/handler/upgrade.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io"
 	"net/http"
+	"regexp"
 	"strings"
 	"sync"
 	"time"
@@ -19,8 +20,104 @@ const (
 	githubHTMLBase = "https://github.com"
 	upgradeTimeout = 5 * time.Minute
 	batchWorkers   = 5
+
+	releaseChannelStable = "stable"
+	releaseChannelDev    = "dev"
 )
 
+var (
+	stableVersionPattern = regexp.MustCompile(`^\d+(?:\.\d+)+$`)
+	testKeywordPattern   = regexp.MustCompile(`(?i)(alpha|beta|rc)`)
+)
+
+type githubRelease struct {
+	TagName     string `json:"tag_name"`
+	Name        string `json:"name"`
+	PublishedAt string `json:"published_at"`
+	Prerelease  bool   `json:"prerelease"`
+	Draft       bool   `json:"draft"`
+}
+
+func normalizeReleaseChannel(channel string) string {
+	switch strings.ToLower(strings.TrimSpace(channel)) {
+	case releaseChannelDev:
+		return releaseChannelDev
+	default:
+		return releaseChannelStable
+	}
+}
+
+func releaseChannelFromTag(tag string) string {
+	normalized := strings.ToLower(strings.TrimSpace(tag))
+	if normalized == "" {
+		return releaseChannelDev
+	}
+	if testKeywordPattern.MatchString(normalized) {
+		return releaseChannelDev
+	}
+	if stableVersionPattern.MatchString(normalized) {
+		return releaseChannelStable
+	}
+
+	return releaseChannelDev
+}
+
+func releaseChannelLabel(channel string) string {
+	if normalizeReleaseChannel(channel) == releaseChannelDev {
+		return "测试版"
+	}
+
+	return "正式版"
+}
+
+func fetchGitHubReleases(perPage int) ([]githubRelease, error) {
+	if perPage <= 0 {
+		perPage = 20
+	}
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	resp, err := client.Get(fmt.Sprintf("%s/repos/%s/releases?per_page=%d", githubAPIBase, githubRepo, perPage))
+	if err != nil {
+		return nil, fmt.Errorf("请求GitHub API失败: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		body, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
+		return nil, fmt.Errorf("GitHub API返回 %d: %s", resp.StatusCode, string(body))
+	}
+
+	var releases []githubRelease
+	if err := json.NewDecoder(resp.Body).Decode(&releases); err != nil {
+		return nil, fmt.Errorf("解析GitHub API响应失败: %v", err)
+	}
+
+	return releases, nil
+}
+
+func resolveLatestReleaseByChannel(channel string) (string, error) {
+	normalizedChannel := normalizeReleaseChannel(channel)
+	releases, err := fetchGitHubReleases(50)
+	if err != nil {
+		return "", err
+	}
+
+	for _, r := range releases {
+		if r.Draft {
+			continue
+		}
+		tag := strings.TrimSpace(r.TagName)
+		if tag == "" {
+			continue
+		}
+		if releaseChannelFromTag(tag) == normalizedChannel {
+			return tag, nil
+		}
+	}
+
+	return "", fmt.Errorf("未找到%s版本号", releaseChannelLabel(normalizedChannel))
+}
+
 func (h *Handler) nodeUpgrade(w http.ResponseWriter, r *http.Request) {
 	if r.Method != http.MethodPost {
 		response.WriteJSON(w, response.ErrDefault("请求失败"))
@@ -30,6 +127,7 @@ func (h *Handler) nodeUpgrade(w http.ResponseWriter, r *http.Request) {
 	var req struct {
 		ID      int64  `json:"id"`
 		Version string `json:"version"`
+		Channel string `json:"channel"`
 	}
 	if err := decodeJSON(r.Body, &req); err != nil {
 		response.WriteJSON(w, response.ErrDefault("请求参数错误"))
@@ -40,12 +138,13 @@ func (h *Handler) nodeUpgrade(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	channel := normalizeReleaseChannel(req.Channel)
 	version := strings.TrimSpace(req.Version)
 	if version == "" {
 		var err error
-		version, err = resolveLatestRelease()
+		version, err = resolveLatestReleaseByChannel(channel)
 		if err != nil {
-			response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取最新版本失败: %v", err)))
+			response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取最新%s失败: %v", releaseChannelLabel(channel), err)))
 			return
 		}
 	}
@@ -67,6 +166,7 @@ func (h *Handler) nodeUpgrade(w http.ResponseWriter, r *http.Request) {
 		response.WriteJSON(w, response.Err(-2, fmt.Sprintf("升级失败: %v", err)))
 		return
 	}
+	h.markNodePendingUpgradeRedeploy(req.ID)
 
 	response.WriteJSON(w, response.OK(map[string]interface{}{
 		"version": version,
@@ -75,61 +175,11 @@ func (h *Handler) nodeUpgrade(w http.ResponseWriter, r *http.Request) {
 }
 
 func resolveLatestRelease() (string, error) {
-	client := &http.Client{
-		CheckRedirect: func(req *http.Request, via []*http.Request) error {
-			return http.ErrUseLastResponse
-		},
-		Timeout: 10 * time.Second,
-	}
-
-	resp, err := client.Get(githubProxy + "/" + githubHTMLBase + "/" + githubRepo + "/releases/latest")
-	if err != nil {
-		return "", fmt.Errorf("请求GitHub失败: %v", err)
-	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusFound && resp.StatusCode != http.StatusMovedPermanently {
-		return resolveLatestReleaseAPI()
-	}
-
-	location := resp.Header.Get("Location")
-	if location == "" {
-		return resolveLatestReleaseAPI()
-	}
-
-	parts := strings.Split(location, "/")
-	tag := parts[len(parts)-1]
-	if tag == "" || tag == "latest" {
-		return resolveLatestReleaseAPI()
-	}
-
-	return tag, nil
+	return resolveLatestReleaseByChannel(releaseChannelStable)
 }
 
 func resolveLatestReleaseAPI() (string, error) {
-	client := &http.Client{Timeout: 10 * time.Second}
-	resp, err := client.Get(githubAPIBase + "/repos/" + githubRepo + "/releases/latest")
-	if err != nil {
-		return "", fmt.Errorf("请求GitHub API失败: %v", err)
-	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusOK {
-		body, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
-		return "", fmt.Errorf("GitHub API返回 %d: %s", resp.StatusCode, string(body))
-	}
-
-	var release struct {
-		TagName string `json:"tag_name"`
-	}
-	if err := json.NewDecoder(resp.Body).Decode(&release); err != nil {
-		return "", fmt.Errorf("解析GitHub API响应失败: %v", err)
-	}
-	if strings.TrimSpace(release.TagName) == "" {
-		return "", fmt.Errorf("无法从GitHub获取最新版本号")
-	}
-
-	return release.TagName, nil
+	return resolveLatestReleaseByChannel(releaseChannelStable)
 }
 
 func (h *Handler) nodeBatchUpgrade(w http.ResponseWriter, r *http.Request) {
@@ -141,6 +191,7 @@ func (h *Handler) nodeBatchUpgrade(w http.ResponseWriter, r *http.Request) {
 	var req struct {
 		IDs     []int64 `json:"ids"`
 		Version string  `json:"version"`
+		Channel string  `json:"channel"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		response.WriteJSON(w, response.ErrDefault("请求参数错误"))
@@ -151,12 +202,13 @@ func (h *Handler) nodeBatchUpgrade(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	channel := normalizeReleaseChannel(req.Channel)
 	version := strings.TrimSpace(req.Version)
 	if version == "" {
 		var err error
-		version, err = resolveLatestRelease()
+		version, err = resolveLatestReleaseByChannel(channel)
 		if err != nil {
-			response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取最新版本失败: %v", err)))
+			response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取最新%s失败: %v", releaseChannelLabel(channel), err)))
 			return
 		}
 	}
@@ -195,6 +247,7 @@ func (h *Handler) nodeBatchUpgrade(w http.ResponseWriter, r *http.Request) {
 				results[index] = upgradeResult{ID: nodeID, Success: false, Message: err.Error()}
 				return
 			}
+			h.markNodePendingUpgradeRedeploy(nodeID)
 			results[index] = upgradeResult{ID: nodeID, Success: true, Message: result.Message}
 		}(i, id)
 	}
@@ -212,37 +265,28 @@ func (h *Handler) listReleases(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	client := &http.Client{Timeout: 15 * time.Second}
-	resp, err := client.Get(githubAPIBase + "/repos/" + githubRepo + "/releases?per_page=20")
+	var req struct {
+		Channel string `json:"channel"`
+	}
+	if err := decodeJSON(r.Body, &req); err != nil && err != io.EOF {
+		response.WriteJSON(w, response.ErrDefault("请求参数错误"))
+		return
+	}
+
+	channel := normalizeReleaseChannel(req.Channel)
+
+	releases, err := fetchGitHubReleases(50)
 	if err != nil {
 		response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取版本列表失败: %v", err)))
 		return
 	}
-	defer resp.Body.Close()
-
-	if resp.StatusCode != http.StatusOK {
-		body, _ := io.ReadAll(io.LimitReader(resp.Body, 512))
-		response.WriteJSON(w, response.Err(-2, fmt.Sprintf("获取版本列表失败: GitHub API返回 %d: %s", resp.StatusCode, string(body))))
-		return
-	}
-
-	var releases []struct {
-		TagName     string `json:"tag_name"`
-		Name        string `json:"name"`
-		PublishedAt string `json:"published_at"`
-		Prerelease  bool   `json:"prerelease"`
-		Draft       bool   `json:"draft"`
-	}
-	if err := json.NewDecoder(resp.Body).Decode(&releases); err != nil {
-		response.WriteJSON(w, response.Err(-2, fmt.Sprintf("解析版本列表失败: %v", err)))
-		return
-	}
 
 	type releaseItem struct {
 		Version     string `json:"version"`
 		Name        string `json:"name"`
 		PublishedAt string `json:"publishedAt"`
 		Prerelease  bool   `json:"prerelease"`
+		Channel     string `json:"channel"`
 	}
 
 	items := make([]releaseItem, 0, len(releases))
@@ -250,11 +294,20 @@ func (h *Handler) listReleases(w http.ResponseWriter, r *http.Request) {
 		if r.Draft {
 			continue
 		}
+		tag := strings.TrimSpace(r.TagName)
+		if tag == "" {
+			continue
+		}
+		itemChannel := releaseChannelFromTag(tag)
+		if itemChannel != channel {
+			continue
+		}
 		items = append(items, releaseItem{
-			Version:     r.TagName,
+			Version:     tag,
 			Name:        r.Name,
 			PublishedAt: r.PublishedAt,
-			Prerelease:  r.Prerelease,
+			Prerelease:  itemChannel == releaseChannelDev,
+			Channel:     itemChannel,
 		})
 	}
 
@@ -289,3 +342,66 @@ func (h *Handler) nodeRollback(w http.ResponseWriter, r *http.Request) {
 		"message": result.Message,
 	}))
 }
+
+func (h *Handler) markNodePendingUpgradeRedeploy(nodeID int64) {
+	if h == nil || nodeID <= 0 {
+		return
+	}
+	h.upgradeMu.Lock()
+	h.pendingUpgradeRedeploy[nodeID] = struct{}{}
+	h.upgradeMu.Unlock()
+}
+
+func (h *Handler) consumeNodePendingUpgradeRedeploy(nodeID int64) bool {
+	if h == nil || nodeID <= 0 {
+		return false
+	}
+	h.upgradeMu.Lock()
+	_, ok := h.pendingUpgradeRedeploy[nodeID]
+	if ok {
+		delete(h.pendingUpgradeRedeploy, nodeID)
+	}
+	h.upgradeMu.Unlock()
+	return ok
+}
+
+func (h *Handler) onNodeOnline(nodeID int64) {
+	if !h.consumeNodePendingUpgradeRedeploy(nodeID) {
+		return
+	}
+	h.redeployNodeRuntimeAfterUpgrade(nodeID)
+}
+
+func (h *Handler) redeployNodeRuntimeAfterUpgrade(nodeID int64) {
+	tunnelIDs, err := h.repo.ListActiveTunnelIDsByNode(nodeID)
+	if err != nil {
+		fmt.Printf("post-upgrade redeploy: list tunnels for node %d failed: %v\n", nodeID, err)
+		return
+	}
+	forwardIDs, err := h.repo.ListActiveForwardIDsByNode(nodeID)
+	if err != nil {
+		fmt.Printf("post-upgrade redeploy: list forwards for node %d failed: %v\n", nodeID, err)
+		return
+	}
+
+	tunnelFailed := make(map[int64]struct{})
+	for _, tunnelID := range tunnelIDs {
+		if err := h.redeployTunnelAndForwards(tunnelID); err != nil {
+			tunnelFailed[tunnelID] = struct{}{}
+			fmt.Printf("post-upgrade redeploy: tunnel %d failed on node %d: %v\n", tunnelID, nodeID, err)
+		}
+	}
+
+	for _, forwardID := range forwardIDs {
+		forward, getErr := h.getForwardRecord(forwardID)
+		if getErr != nil || forward == nil {
+			continue
+		}
+		if _, skipped := tunnelFailed[forward.TunnelID]; skipped {
+			continue
+		}
+		if err := h.syncForwardServices(forward, "UpdateService", true); err != nil {
+			fmt.Printf("post-upgrade redeploy: forward %d failed on node %d: %v\n", forwardID, nodeID, err)
+		}
+	}
+}

go-backend/internal/http/handler/upgrade_release_channel_test.go

@@ -0,0 +1,46 @@
+package handler
+
+import "testing"
+
+func TestReleaseChannelFromTag(t *testing.T) {
+	tests := []struct {
+		name    string
+		tag     string
+		expects string
+	}{
+		{name: "stable semantic version", tag: "2.1.4", expects: releaseChannelStable},
+		{name: "v prefix should be dev", tag: "v2.1.4", expects: releaseChannelDev},
+		{name: "rc release", tag: "2.1.4-rc2", expects: releaseChannelDev},
+		{name: "beta release", tag: "2.1.4-beta.1", expects: releaseChannelDev},
+		{name: "alpha release", tag: "2.1.4-alpha", expects: releaseChannelDev},
+		{name: "non numeric tag", tag: "nightly", expects: releaseChannelDev},
+		{name: "empty tag", tag: "", expects: releaseChannelDev},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			if got := releaseChannelFromTag(tc.tag); got != tc.expects {
+				t.Fatalf("releaseChannelFromTag(%q) = %q, want %q", tc.tag, got, tc.expects)
+			}
+		})
+	}
+}
+
+func TestNormalizeReleaseChannel(t *testing.T) {
+	tests := []struct {
+		input   string
+		expects string
+	}{
+		{input: "", expects: releaseChannelStable},
+		{input: "stable", expects: releaseChannelStable},
+		{input: "dev", expects: releaseChannelDev},
+		{input: "DEV", expects: releaseChannelDev},
+		{input: "preview", expects: releaseChannelStable},
+	}
+
+	for _, tc := range tests {
+		if got := normalizeReleaseChannel(tc.input); got != tc.expects {
+			t.Fatalf("normalizeReleaseChannel(%q) = %q, want %q", tc.input, got, tc.expects)
+		}
+	}
+}

go-backend/internal/store/repo/repository_control.go

@@ -56,6 +56,40 @@ func (r *Repository) ListForwardsByTunnel(tunnelID int64) ([]model.ForwardRecord
 	return rows, nil
 }
 
+func (r *Repository) ListActiveTunnelIDsByNode(nodeID int64) ([]int64, error) {
+	if r == nil || r.db == nil {
+		return nil, errors.New("repository not initialized")
+	}
+	var ids []int64
+	err := r.db.Model(&model.ChainTunnel{}).
+		Joins("JOIN tunnel ON tunnel.id = chain_tunnel.tunnel_id").
+		Where("chain_tunnel.node_id = ? AND tunnel.status = 1", nodeID).
+		Select("DISTINCT chain_tunnel.tunnel_id").
+		Order("chain_tunnel.tunnel_id ASC").
+		Pluck("chain_tunnel.tunnel_id", &ids).Error
+	if err != nil {
+		return nil, err
+	}
+	return ids, nil
+}
+
+func (r *Repository) ListActiveForwardIDsByNode(nodeID int64) ([]int64, error) {
+	if r == nil || r.db == nil {
+		return nil, errors.New("repository not initialized")
+	}
+	var ids []int64
+	err := r.db.Model(&model.ForwardPort{}).
+		Joins("JOIN forward ON forward.id = forward_port.forward_id").
+		Where("forward_port.node_id = ? AND forward.status = 1", nodeID).
+		Select("DISTINCT forward_port.forward_id").
+		Order("forward_port.forward_id ASC").
+		Pluck("forward_port.forward_id", &ids).Error
+	if err != nil {
+		return nil, err
+	}
+	return ids, nil
+}
+
 func (r *Repository) ListForwardPorts(forwardID int64) ([]model.ForwardPortRecord, error) {
 	if r == nil || r.db == nil {
 		return nil, errors.New("repository not initialized")

go-backend/internal/ws/server.go

@@ -68,9 +68,10 @@ type CommandResult struct {
 }
 
 type Server struct {
-	repo      *repo.Repository
-	jwtSecret string
-	upgrader  websocket.Upgrader
+	repo         *repo.Repository
+	jwtSecret    string
+	upgrader     websocket.Upgrader
+	onNodeOnline func(nodeID int64)
 
 	mu      sync.RWMutex
 	admins  map[*connWrap]struct{}
@@ -79,6 +80,15 @@ type Server struct {
 	pending map[string]pendingRequest
 }
 
+func (s *Server) SetNodeOnlineHook(fn func(nodeID int64)) {
+	if s == nil {
+		return
+	}
+	s.mu.Lock()
+	s.onNodeOnline = fn
+	s.mu.Unlock()
+}
+
 func NewServer(repo *repo.Repository, jwtSecret string) *Server {
 	return &Server{
 		repo:      repo,
@@ -183,6 +193,13 @@ func (s *Server) handleNode(w http.ResponseWriter, r *http.Request, nodeID int64
 	_ = s.repo.UpdateNodeOnline(nodeID, 1, version, httpVal, tlsVal, socksVal)
 	s.broadcastStatus(nodeID, 1)
 
+	s.mu.RLock()
+	onlineHook := s.onNodeOnline
+	s.mu.RUnlock()
+	if onlineHook != nil {
+		go onlineHook(nodeID)
+	}
+
 	defer func() {
 		close(done)
 		needOfflineBroadcast := false

go-backend/tests/contract/diagnosis_contract_test.go

@@ -193,6 +193,126 @@ func TestDiagnosisChainCoverageContracts(t *testing.T) {
 	})
 }
 
+func TestForwardDiagnosisRespectsTunnelIPPreferenceContract(t *testing.T) {
+	secret := "contract-jwt-secret"
+	router, r := setupDiagnosisContractRouter(t, secret)
+	now := time.Now().UnixMilli()
+
+	if err := r.DB().Exec(`
+		INSERT INTO user(id, user, pwd, role_id, exp_time, flow, in_flow, out_flow, flow_reset_time, num, created_time, updated_time, status)
+		VALUES(2, 'normal_user', '3c85cdebade1c51cf64ca9f3c09d182d', 1, 2727251700000, 99999, 0, 0, 1, 99999, ?, ?, 1)
+	`, now, now).Error; err != nil {
+		t.Fatalf("insert user: %v", err)
+	}
+
+	if err := r.DB().Exec(`
+		INSERT INTO tunnel(name, traffic_ratio, type, protocol, flow, created_time, updated_time, status, in_ip, inx, ip_preference)
+		VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+	`, "diagnose-ip-pref-forward", 1.0, 2, "tls", 99999, now, now, 1, nil, 0, "v6").Error; err != nil {
+		t.Fatalf("insert tunnel: %v", err)
+	}
+	tunnelID := mustLastInsertID(t, r, "diagnose-ip-pref-forward")
+
+	insertNode := func(name, v4, v6 string) int64 {
+		if err := r.DB().Exec(`
+			INSERT INTO node(name, secret, server_ip, server_ip_v4, server_ip_v6, port, interface_name, version, http, tls, socks, created_time, updated_time, status, tcp_listen_addr, udp_listen_addr, inx)
+			VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+		`, name, name+"-secret", v4, v4, v6, "30000-30010", "", "v1", 1, 1, 1, now, now, 1, "[::]", "[::]", 0).Error; err != nil {
+			t.Fatalf("insert node %s: %v", name, err)
+		}
+		return mustLastInsertID(t, r, name)
+	}
+
+	entryNodeID := insertNode("entry-node-v6", "10.10.1.10", "2001:db8:10::10")
+	chainNodeID := insertNode("chain-node-v6", "10.10.1.20", "2001:db8:10::20")
+	exitNodeID := insertNode("exit-node-v6", "10.10.1.30", "2001:db8:10::30")
+
+	if err := r.DB().Exec(`
+		INSERT INTO chain_tunnel(tunnel_id, chain_type, node_id, port, strategy, inx, protocol)
+		VALUES(?, 1, ?, 30001, 'round', 1, 'tls')
+	`, tunnelID, entryNodeID).Error; err != nil {
+		t.Fatalf("insert entry chain: %v", err)
+	}
+	if err := r.DB().Exec(`
+		INSERT INTO chain_tunnel(tunnel_id, chain_type, node_id, port, strategy, inx, protocol)
+		VALUES(?, 2, ?, 30002, 'round', 1, 'tls')
+	`, tunnelID, chainNodeID).Error; err != nil {
+		t.Fatalf("insert middle chain: %v", err)
+	}
+	if err := r.DB().Exec(`
+		INSERT INTO chain_tunnel(tunnel_id, chain_type, node_id, port, strategy, inx, protocol)
+		VALUES(?, 3, ?, 30003, 'round', 1, 'tls')
+	`, tunnelID, exitNodeID).Error; err != nil {
+		t.Fatalf("insert exit chain: %v", err)
+	}
+
+	if err := r.DB().Exec(`
+		INSERT INTO forward(user_id, user_name, name, tunnel_id, remote_addr, strategy, in_flow, out_flow, created_time, updated_time, status, inx)
+		VALUES(?, ?, ?, ?, ?, ?, 0, 0, ?, ?, 1, ?)
+	`, 2, "normal_user", "ip-pref-forward", tunnelID, "8.8.8.8:53", "fifo", now, now, 0).Error; err != nil {
+		t.Fatalf("insert forward: %v", err)
+	}
+	forwardID := mustLastInsertID(t, r, "ip-pref-forward")
+
+	userToken, err := auth.GenerateToken(2, "normal_user", 1, secret)
+	if err != nil {
+		t.Fatalf("generate user token: %v", err)
+	}
+
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/forward/diagnose", bytes.NewBufferString(`{"forwardId":`+strconv.FormatInt(forwardID, 10)+`}`))
+	req.Header.Set("Authorization", userToken)
+	res := httptest.NewRecorder()
+
+	router.ServeHTTP(res, req)
+
+	var out response.R
+	if err := json.NewDecoder(res.Body).Decode(&out); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if out.Code != 0 {
+		t.Fatalf("expected code 0, got %d (%s)", out.Code, out.Msg)
+	}
+
+	payload, ok := out.Data.(map[string]interface{})
+	if !ok {
+		t.Fatalf("expected object payload, got %T", out.Data)
+	}
+	results, ok := payload["results"].([]interface{})
+	if !ok || len(results) == 0 {
+		t.Fatalf("expected non-empty results, got %v", payload["results"])
+	}
+
+	hasEntryToChain := false
+	hasChainToExit := false
+	for _, raw := range results {
+		item, ok := raw.(map[string]interface{})
+		if !ok {
+			continue
+		}
+		from := valueAsInt(item["fromChainType"])
+		to := valueAsInt(item["toChainType"])
+		targetIP := strings.TrimSpace(valueAsString(item["targetIp"]))
+
+		if from == 1 && to == 2 {
+			hasEntryToChain = true
+			if targetIP != "2001:db8:10::20" {
+				t.Fatalf("expected entry->chain diagnosis target to use IPv6, got %q", targetIP)
+			}
+		}
+
+		if from == 2 && to == 3 {
+			hasChainToExit = true
+			if targetIP != "2001:db8:10::30" {
+				t.Fatalf("expected chain->exit diagnosis target to use IPv6, got %q", targetIP)
+			}
+		}
+	}
+
+	if !hasEntryToChain || !hasChainToExit {
+		t.Fatalf("expected entry->chain and chain->exit steps, got entry=%v chain=%v", hasEntryToChain, hasChainToExit)
+	}
+}
+
 func TestDiagnosisUsesFederationRuntimeForRemoteNodes(t *testing.T) {
 	secret := "contract-jwt-secret"
 	router, r := setupDiagnosisContractRouter(t, secret)

vite-frontend/package.json

@@ -13,6 +13,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@internationalized/date": "^3.10.0",
+    "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.0",
@@ -25,8 +27,6 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@marsidev/react-turnstile": "^1.1.0",
-    "@internationalized/date": "^3.10.0",
     "@react-aria/i18n": "^3.12.12",
     "@react-aria/visually-hidden": "3.8.25",
     "@react-types/shared": "3.30.0",
@@ -43,8 +43,11 @@
     "react-dom": "18.3.1",
     "react-hot-toast": "^2.5.2",
     "react-is": "^19.2.4",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "6.30.3",
     "recharts": "^3.1.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.6",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "1.0.0",

vite-frontend/src/api/index.ts

@@ -31,6 +31,8 @@ import axios from "axios";
 
 import Network from "./network";
 
+export type ReleaseChannel = "stable" | "dev";
+
 // 登陆相关接口
 export interface LoginData {
   username: string;
@@ -66,8 +68,10 @@ export const getNodeList = () => Network.post<NodeApiItem[]>("/node/list");
 export const updateNode = (data: NodeMutationPayload) =>
   Network.post("/node/update", data);
 export const deleteNode = (id: number) => Network.post("/node/delete", { id });
-export const getNodeInstallCommand = (id: number) =>
-  Network.post<string>("/node/install", { id });
+export const getNodeInstallCommand = (
+  id: number,
+  channel: ReleaseChannel = "stable",
+) => Network.post<string>("/node/install", { id, channel });
 export const updateNodeOrder = (data: {
   nodes: Array<{ id: number; inx: number }>;
 }) => Network.post("/node/update-order", data);
@@ -77,20 +81,28 @@ export const checkNodeStatus = (nodeId?: number) => {
   return Network.post("/node/check-status", params);
 };
 
-export const upgradeNode = (id: number, version?: string) =>
+export const upgradeNode = (
+  id: number,
+  version?: string,
+  channel: ReleaseChannel = "stable",
+) =>
   Network.post(
     "/node/upgrade",
-    { id, version: version || "" },
+    { id, version: version || "", channel },
     { timeout: 5 * 60 * 1000 },
   );
-export const batchUpgradeNodes = (ids: number[], version?: string) =>
+export const batchUpgradeNodes = (
+  ids: number[],
+  version?: string,
+  channel: ReleaseChannel = "stable",
+) =>
   Network.post(
     "/node/batch-upgrade",
-    { ids, version: version || "" },
+    { ids, version: version || "", channel },
     { timeout: 15 * 60 * 1000 },
   );
-export const getNodeReleases = () =>
-  Network.post<NodeReleaseApiItem[]>("/node/releases");
+export const getNodeReleases = (channel: ReleaseChannel = "stable") =>
+  Network.post<NodeReleaseApiItem[]>("/node/releases", { channel });
 export const rollbackNode = (id: number) =>
   Network.post("/node/rollback", { id });
 

vite-frontend/src/api/types.ts

@@ -172,6 +172,7 @@ export interface NodeReleaseApiItem {
   name: string;
   publishedAt: string;
   prerelease: boolean;
+  channel: "stable" | "dev";
 }
 
 export interface UserPackageInfoApiData {

vite-frontend/src/components/animated-page.tsx

@@ -0,0 +1,122 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+/**
+ * Wraps page content with a smooth fade-in + slide-up entrance animation.
+ * Use this as the outermost wrapper inside each page component.
+ */
+export const AnimatedPage = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <motion.div
+    animate={{ opacity: 1, y: 0 }}
+    className={className}
+    exit={{ opacity: 0, y: -8 }}
+    initial={{ opacity: 0, y: 16 }}
+    transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
+  >
+    {children}
+  </motion.div>
+);
+
+/**
+ * Stagger container — apply to the parent of a list/grid of animated items.
+ * Children should use `staggerItem` as their `variants` prop.
+ */
+export const staggerContainer = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+/**
+ * Individual stagger item variant — fade-in + slide-up.
+ */
+export const staggerItem = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
+};
+
+/**
+ * Convenience wrapper for a stagger list.
+ * Renders a `motion.div` (or `motion.ul/motion.tbody`) with stagger behaviour.
+ */
+export const StaggerList = ({
+  children,
+  className,
+  as = "div",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  as?: "div" | "ul" | "tbody";
+}) => {
+  const Component = motion[as] as React.ElementType;
+
+  return (
+    <Component
+      animate="show"
+      className={className}
+      initial="hidden"
+      variants={staggerContainer}
+    >
+      {children}
+    </Component>
+  );
+};
+
+/**
+ * Individual animated item for use inside StaggerList.
+ */
+export const StaggerItem = ({
+  children,
+  className,
+  as = "div",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  as?: "div" | "li" | "tr";
+}) => {
+  const Component = motion[as] as React.ElementType;
+
+  return (
+    <Component className={className} variants={staggerItem}>
+      {children}
+    </Component>
+  );
+};
+
+/**
+ * Simple fade-in animation for standalone elements (chips, badges, counters, etc.)
+ * Uses opacity + translateY to avoid font blurriness caused by scale transforms.
+ */
+export const FadeIn = ({
+  children,
+  delay = 0,
+  className,
+}: {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+}) => (
+  <motion.div
+    animate={{ opacity: 1, y: 0 }}
+    className={className}
+    initial={{ opacity: 0, y: 8 }}
+    transition={{ duration: 0.2, delay, ease: "easeOut" }}
+  >
+    {children}
+  </motion.div>
+);

vite-frontend/src/components/navbar.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
 import { Link } from "@/shadcn-bridge/heroui/link";
 import {
   Navbar as HeroUINavbar,
   NavbarBrand,
   NavbarContent,
 } from "@/shadcn-bridge/heroui/navbar";
-import { useNavigate } from "react-router-dom";
-
 import { Logo } from "@/components/icons";
 import { siteConfig, getCachedConfig } from "@/config/site";
 import { useWebViewMode } from "@/hooks/useWebViewMode";

vite-frontend/src/components/search-bar.tsx

@@ -0,0 +1,101 @@
+import { motion, AnimatePresence } from "framer-motion";
+
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { SearchIcon } from "@/components/icons";
+
+interface SearchBarProps {
+  isVisible: boolean;
+  value: string;
+  placeholder?: string;
+  onOpen: () => void;
+  onClose: () => void;
+  onChange: (value: string) => void;
+}
+
+export function SearchBar({
+  isVisible,
+  value,
+  placeholder = "搜索",
+  onOpen,
+  onClose,
+  onChange,
+}: SearchBarProps) {
+  return (
+    // Fixed h-8 so the container never changes height — eliminates the vertical jitter
+    <div className="flex items-center gap-2 h-8 overflow-hidden">
+      <AnimatePresence initial={false} mode="wait">
+        {!isVisible ? (
+          <motion.div
+            key="search-btn"
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            initial={{ opacity: 0 }}
+            transition={{ duration: 0.12 }}
+          >
+            <Button
+              isIconOnly
+              aria-label="搜索"
+              className="text-default-600"
+              color="default"
+              size="sm"
+              variant="flat"
+              onPress={onOpen}
+            >
+              <SearchIcon className="w-4 h-4" />
+            </Button>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="search-input"
+            animate={{ opacity: 1, x: 0 }}
+            className="flex w-full items-center gap-2"
+            exit={{ opacity: 0, x: -8 }}
+            initial={{ opacity: 0, x: -16 }}
+            transition={{ duration: 0.18, ease: [0.25, 0.46, 0.45, 0.94] }}
+          >
+            <Input
+              autoFocus
+              classNames={{
+                base: "bg-default-100",
+                input:
+                  "bg-transparent text-sm focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none",
+                inputWrapper: "bg-default-100 border-0 shadow-none h-8 min-h-8",
+              }}
+              placeholder={placeholder}
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+            />
+            <Button
+              isIconOnly
+              aria-label="关闭搜索"
+              className="text-default-600 shrink-0"
+              color="default"
+              size="sm"
+              variant="light"
+              onPress={() => {
+                onClose();
+                onChange("");
+              }}
+            >
+              <svg
+                aria-hidden="true"
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M6 18L18 6M6 6l12 12"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                />
+              </svg>
+            </Button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

vite-frontend/src/components/theme-provider.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+
 import { useTheme } from "@/shadcn-bridge/heroui/use-theme";
 
 interface ThemeProviderProps {

vite-frontend/src/components/ui/alert.tsx

@@ -9,9 +9,12 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: "border-default-200 bg-default-50/70 text-foreground",
-        destructive: "border-danger-200 bg-danger-50 text-danger-700 dark:text-danger-300",
-        success: "border-success-200 bg-success-50 text-success-700 dark:text-success-300",
-        warning: "border-warning-200 bg-warning-50 text-warning-700 dark:text-warning-300",
+        destructive:
+          "border-danger-200 bg-danger-50 text-danger-700 dark:text-danger-300",
+        success:
+          "border-success-200 bg-success-50 text-success-700 dark:text-success-300",
+        warning:
+          "border-warning-200 bg-warning-50 text-warning-700 dark:text-warning-300",
       },
     },
     defaultVariants: {
@@ -45,9 +48,16 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"h5">) {
   );
 }
 
-function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
-    <div className={cn("text-sm opacity-90", className)} data-slot="alert-description" {...props} />
+    <div
+      className={cn("text-sm opacity-90", className)}
+      data-slot="alert-description"
+      {...props}
+    />
   );
 }
 

vite-frontend/src/components/ui/button.tsx

@@ -5,17 +5,21 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors transition-transform duration-100 active:scale-95 disabled:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-danger text-white hover:bg-danger/90",
-        outline: "border border-input bg-background hover:bg-default-100 hover:text-foreground dark:hover:bg-default-200/40",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-default-100 hover:text-foreground dark:hover:bg-default-200/40",
+        outline:
+          "border border-input bg-background hover:bg-default-100 hover:text-foreground dark:hover:bg-default-200/40",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-default-100 hover:text-foreground dark:hover:bg-default-200/40",
         link: "text-primary underline-offset-4 hover:underline",
-        light: "bg-transparent hover:bg-default-100 dark:hover:bg-default-200/40",
+        light:
+          "bg-transparent hover:bg-default-100 dark:hover:bg-default-200/40",
         flat: "bg-default-100 text-foreground hover:bg-default-200 dark:bg-default-100/40",
       },
       size: {
@@ -43,9 +47,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <Comp
+        ref={ref}
         className={cn(buttonVariants({ className, size, variant }))}
         data-slot="button"
-        ref={ref}
         {...props}
       />
     );

vite-frontend/src/components/ui/card.tsx

@@ -28,7 +28,10 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
   return (
     <h3
-      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
       data-slot="card-title"
       {...props}
     />
@@ -47,7 +50,11 @@ function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div className={cn("p-6 pt-0", className)} data-slot="card-content" {...props} />
+    <div
+      className={cn("p-6 pt-0", className)}
+      data-slot="card-content"
+      {...props}
+    />
   );
 }
 
@@ -61,4 +68,11 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

vite-frontend/src/components/ui/checkbox.tsx

@@ -4,18 +4,21 @@ import { CheckIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-transform duration-100 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
         className,
       )}
       data-slot="checkbox"
       {...props}
     >
       <CheckboxPrimitive.Indicator
-        className="flex items-center justify-center text-current"
+        className="flex items-center justify-center text-current data-[state=checked]:animate-in data-[state=checked]:zoom-in-75 data-[state=checked]:duration-150"
         data-slot="checkbox-indicator"
       >
         <CheckIcon className="h-3.5 w-3.5" />

vite-frontend/src/components/ui/dialog.tsx

@@ -4,23 +4,34 @@ import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       className={cn(
@@ -46,7 +57,7 @@ function DialogContent({
       <DialogOverlay />
       <DialogPrimitive.Content
         className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-default-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg dark:bg-default-50",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-default-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-4 data-[state=closed]:slide-out-to-bottom-2 sm:rounded-lg dark:bg-default-50",
           className,
         )}
         data-slot="dialog-content"
@@ -54,9 +65,7 @@ function DialogContent({
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close
-            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none"
-          >
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none">
             <XIcon className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
@@ -69,7 +78,10 @@ function DialogContent({
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+      className={cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className,
+      )}
       data-slot="dialog-header"
       {...props}
     />
@@ -79,17 +91,26 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className,
+      )}
       data-slot="dialog-footer"
       {...props}
     />
   );
 }
 
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
-      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
       data-slot="dialog-title"
       {...props}
     />

vite-frontend/src/components/ui/dropdown-menu.tsx

@@ -4,32 +4,54 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
 }
 
-function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
 }
 
-function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
 }
 
-function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuRadioGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuSubTrigger({
@@ -63,7 +85,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       className={cn(
-        "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-default-50",
+        "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
         className,
       )}
       data-slot="dropdown-menu-sub-content"
@@ -81,7 +103,7 @@ function DropdownMenuContent({
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         className={cn(
-          "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-default-50",
+          "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
           className,
         )}
         data-slot="dropdown-menu-content"
@@ -171,7 +193,11 @@ function DropdownMenuLabel({
 }) {
   return (
     <DropdownMenuPrimitive.Label
-      className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className,
+      )}
       data-slot="dropdown-menu-label"
       {...props}
     />
@@ -191,10 +217,16 @@ function DropdownMenuSeparator({
   );
 }
 
-function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest text-default-500", className)}
+      className={cn(
+        "ml-auto text-xs tracking-widest text-default-500",
+        className,
+      )}
       data-slot="dropdown-menu-shortcut"
       {...props}
     />

vite-frontend/src/components/ui/label.tsx

@@ -3,7 +3,10 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 
 import { cn } from "@/lib/utils";
 
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       className={cn(

vite-frontend/src/components/ui/progress.tsx

@@ -13,13 +13,19 @@ function Progress({
 }) {
   return (
     <ProgressPrimitive.Root
-      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-default-200", className)}
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-default-200",
+        className,
+      )}
       data-slot="progress"
       value={value}
       {...props}
     >
       <ProgressPrimitive.Indicator
-        className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
+        className={cn(
+          "h-full w-full flex-1 bg-primary transition-all",
+          indicatorClassName,
+        )}
         data-slot="progress-indicator"
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
       />

vite-frontend/src/components/ui/radio-group.tsx

@@ -4,7 +4,10 @@ import { CircleIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
   return (
     <RadioGroupPrimitive.Root
       className={cn("grid gap-2", className)}
@@ -27,7 +30,10 @@ function RadioGroupItem({
       data-slot="radio-group-item"
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center" data-slot="radio-group-indicator">
+      <RadioGroupPrimitive.Indicator
+        className="flex items-center justify-center"
+        data-slot="radio-group-indicator"
+      >
         <CircleIcon className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>

vite-frontend/src/components/ui/select.tsx

@@ -4,15 +4,21 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
   return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
@@ -44,7 +50,10 @@ function SelectScrollUpButton({
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
   return (
     <SelectPrimitive.ScrollUpButton
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
       data-slot="select-scroll-up-button"
       {...props}
     >
@@ -59,7 +68,10 @@ function SelectScrollDownButton({
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
   return (
     <SelectPrimitive.ScrollDownButton
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
       data-slot="select-scroll-down-button"
       {...props}
     >
@@ -78,7 +90,7 @@ function SelectContent({
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default-200 bg-white text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-default-50",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default-200 bg-white text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
@@ -103,7 +115,10 @@ function SelectContent({
   );
 }
 
-function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
       className={cn("px-2 py-1.5 text-sm font-semibold", className)}

vite-frontend/src/components/ui/switch.tsx

@@ -3,7 +3,10 @@ import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 import { cn } from "@/lib/utils";
 
-function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
   return (
     <SwitchPrimitive.Root
       className={cn(

vite-frontend/src/components/ui/table.tsx

@@ -5,7 +5,11 @@ import { cn } from "@/lib/utils";
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
     <div className="relative w-full overflow-auto" data-slot="table-wrapper">
-      <table className={cn("w-full caption-bottom text-sm", className)} data-slot="table" {...props} />
+      <table
+        className={cn("w-full caption-bottom text-sm", className)}
+        data-slot="table"
+        {...props}
+      />
     </div>
   );
 }
@@ -33,7 +37,10 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
   return (
     <tfoot
-      className={cn("border-t bg-default-50/70 font-medium [&>tr]:last:border-b-0", className)}
+      className={cn(
+        "border-t bg-default-50/70 font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
       data-slot="table-footer"
       {...props}
     />
@@ -43,7 +50,10 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
   return (
     <tr
-      className={cn("border-b transition-colors hover:bg-default-50/50", className)}
+      className={cn(
+        "border-b transition-colors hover:bg-default-50/50",
+        className,
+      )}
       data-slot="table-row"
       {...props}
     />
@@ -66,16 +76,26 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
   return (
     <td
-      className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      className={cn(
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
       data-slot="table-cell"
       {...props}
     />
   );
 }
 
-function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
   return (
-    <caption className={cn("mt-4 text-sm text-default-500", className)} data-slot="table-caption" {...props} />
+    <caption
+      className={cn("mt-4 text-sm text-default-500", className)}
+      data-slot="table-caption"
+      {...props}
+    />
   );
 }
 

vite-frontend/src/components/ui/tabs.tsx

@@ -3,13 +3,23 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "@/lib/utils";
 
-function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
-    <TabsPrimitive.Root className={cn("flex flex-col gap-2", className)} data-slot="tabs" {...props} />
+    <TabsPrimitive.Root
+      className={cn("flex flex-col gap-2", className)}
+      data-slot="tabs"
+      {...props}
+    />
   );
 }
 
-function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
   return (
     <TabsPrimitive.List
       className={cn(
@@ -22,7 +32,10 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
   );
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
       className={cn(
@@ -35,7 +48,10 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
   );
 }
 
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
       className={cn("outline-none", className)}

vite-frontend/src/layouts/admin.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { toast } from "react-hot-toast";
+import { AnimatePresence, motion } from "framer-motion";
+
 import { Button } from "@/shadcn-bridge/heroui/button";
 import {
   Dropdown,
@@ -16,8 +19,6 @@ import {
   useDisclosure,
 } from "@/shadcn-bridge/heroui/modal";
 import { Input } from "@/shadcn-bridge/heroui/input";
-import { toast } from "react-hot-toast";
-
 import { Logo } from "@/components/icons";
 import { updatePassword } from "@/api";
 import { safeLogout } from "@/utils/logout";
@@ -335,21 +336,44 @@ export default function AdminLayout({
 
               return (
                 <li key={item.path}>
-                  <button
+                  <motion.button
                     className={`
                        w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left
-                       transition-colors duration-200 min-h-[44px]
+                       relative min-h-[44px]
                        ${
                          isActive
-                           ? "bg-primary-100 dark:bg-primary-600/20 text-primary-600 dark:text-primary-300"
-                           : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-900"
+                           ? "text-primary-600 dark:text-primary-300"
+                           : "text-gray-700 dark:text-gray-200"
                        }
                      `}
+                    transition={{ duration: 0.15 }}
                     onClick={() => handleMenuClick(item.path)}
                   >
-                    <div className="flex-shrink-0">{item.icon}</div>
-                    <span className="font-medium text-sm">{item.label}</span>
-                  </button>
+                    {isActive && (
+                      <motion.div
+                        className="absolute inset-0 rounded-lg bg-primary-100 dark:bg-primary-600/20"
+                        layoutId="sidebar-active"
+                        transition={{
+                          type: "spring",
+                          stiffness: 380,
+                          damping: 30,
+                        }}
+                      />
+                    )}
+                    {!isActive && (
+                      <motion.div
+                        className="absolute inset-0 rounded-lg bg-gray-100 dark:bg-gray-900 opacity-0"
+                        transition={{ duration: 0.15 }}
+                        whileHover={{ opacity: 1 }}
+                      />
+                    )}
+                    <div className="flex-shrink-0 relative z-10">
+                      {item.icon}
+                    </div>
+                    <span className="font-medium text-sm relative z-10">
+                      {item.label}
+                    </span>
+                  </motion.button>
                 </li>
               );
             })}
@@ -476,9 +500,20 @@ export default function AdminLayout({
 
         {/* 主内容 */}
         <main
-          className={`flex-1 bg-gray-100 dark:bg-black ${isMobile ? "" : "overflow-y-auto"}`}
+          className={`flex-1 bg-gray-100 dark:bg-black overflow-hidden ${isMobile ? "" : "overflow-y-scroll"}`}
         >
-          {children}
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={location.pathname}
+              animate={{ opacity: 1, y: 0 }}
+              className="h-full"
+              exit={{ opacity: 0, y: -6 }}
+              initial={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.22, ease: [0.25, 0.46, 0.45, 0.94] }}
+            >
+              {children}
+            </motion.div>
+          </AnimatePresence>
         </main>
       </div>
 

vite-frontend/src/layouts/h5-simple.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Button } from "@/shadcn-bridge/heroui/button";
 
+import { Button } from "@/shadcn-bridge/heroui/button";
 import { Logo } from "@/components/icons";
 import { siteConfig } from "@/config/site";
 import { useScrollTopOnPathChange } from "@/hooks/useScrollTopOnPathChange";

vite-frontend/src/pages/change-password.tsx

@@ -1,10 +1,10 @@
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Input } from "@/shadcn-bridge/heroui/input";
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { title } from "@/components/primitives";
 import { updatePassword } from "@/api";
 import DefaultLayout from "@/layouts/default";

vite-frontend/src/pages/config.tsx

@@ -1,5 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -16,8 +18,6 @@ import {
   ModalFooter,
   ModalHeader,
 } from "@/shadcn-bridge/heroui/modal";
-import toast from "react-hot-toast";
-
 import {
   updateConfigs,
   exportBackup,
@@ -585,7 +585,7 @@ export default function ConfigPage() {
       </div>
 
       <Card className="shadow-md">
-        <CardHeader className="pb-4">
+        <CardHeader className="pb-6">
           <div className="flex justify-between items-center w-full">
             <div>
               <h2 className="text-xl font-semibold">基本设置</h2>
@@ -609,7 +609,7 @@ export default function ConfigPage() {
 
         <Divider />
 
-        <CardBody className="space-y-6 pt-6">
+        <CardBody className="space-y-6 pt-8 md:pt-8">
           {CONFIG_ITEMS.map((item, index) => {
             // 检查配置项是否应该显示
             if (!shouldShowItem(item)) {
@@ -649,9 +649,9 @@ export default function ConfigPage() {
       {hasChanges && (
         <Card className="mt-4 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800">
           <CardBody className="py-3">
-            <div className="flex items-center gap-2 text-warning-700 dark:text-warning-300">
+            <div className="w-full flex items-center justify-center gap-2 text-warning-700 dark:text-warning-300">
               <div className="w-2 h-2 bg-warning-500 rounded-full animate-pulse" />
-              <span className="text-sm">
+              <span className="text-sm font-medium">
                 检测到配置变更，请记得保存您的修改
               </span>
             </div>
@@ -660,7 +660,7 @@ export default function ConfigPage() {
       )}
 
       <Card className="mt-6 shadow-md">
-        <CardHeader className="pb-4">
+        <CardHeader className="pb-6">
           <div className="flex justify-between items-center w-full">
             <div>
               <h2 className="text-xl font-semibold">公告管理</h2>
@@ -673,7 +673,7 @@ export default function ConfigPage() {
 
         <Divider />
 
-        <CardBody className="space-y-4 pt-6">
+        <CardBody className="space-y-4 pt-8 md:pt-8">
           {announcementLoading ? (
             <div className="flex justify-center py-8">
               <Spinner size="lg" />
@@ -702,13 +702,16 @@ export default function ConfigPage() {
               <Textarea
                 label="公告内容"
                 minRows={4}
-                placeholder="请输入公告内容"
+                placeholder="支持 Markdown，例如：**加粗**、[链接](https://example.com)、- 列表"
                 value={announcement.content}
                 variant="bordered"
                 onChange={(e) =>
                   setAnnouncement({ ...announcement, content: e.target.value })
                 }
               />
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                公告支持 Markdown 语法，链接会在新标签页打开
+              </p>
 
               <div className="flex justify-end">
                 <Button
@@ -727,7 +730,7 @@ export default function ConfigPage() {
 
       {/* 备份与恢复 */}
       <Card className="mt-6 shadow-md">
-        <CardHeader className="pb-4">
+        <CardHeader className="pb-6">
           <div className="flex justify-between items-center w-full">
             <div>
               <h2 className="text-xl font-semibold">数据备份与恢复</h2>
@@ -740,7 +743,7 @@ export default function ConfigPage() {
 
         <Divider />
 
-        <CardBody className="space-y-6 pt-6">
+        <CardBody className="space-y-6 pt-8 md:pt-8">
           {/* 导出部分 */}
           <div className="space-y-4">
             <h3 className="text-lg font-medium">导出数据</h3>

vite-frontend/src/pages/dashboard.tsx

@@ -1,9 +1,15 @@
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Modal, ModalContent, ModalHeader, ModalBody } from "@/shadcn-bridge/heroui/modal";
 import { useState } from "react";
 import toast from "react-hot-toast";
 
+import { AnimatedPage } from "@/components/animated-page";
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
+import { Button } from "@/shadcn-bridge/heroui/button";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+} from "@/shadcn-bridge/heroui/modal";
 import { PageEmptyState, PageLoadingState } from "@/components/page-state";
 import { AnnouncementBanner } from "@/pages/dashboard/components/announcement-banner";
 import { FlowChartCard } from "@/pages/dashboard/components/flow-chart-card";
@@ -519,7 +525,7 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="px-3 lg:px-6 py-2 lg:py-4">
+    <AnimatedPage className="px-3 lg:px-6 py-2 lg:py-4">
       {announcement && <AnnouncementBanner announcement={announcement} />}
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 mb-6 lg:mb-8">
         <MetricCard
@@ -973,6 +979,6 @@ export default function DashboardPage() {
           </ModalBody>
         </ModalContent>
       </Modal>
-    </div>
+    </AnimatedPage>
   );
 }

vite-frontend/src/pages/dashboard/components/announcement-banner.tsx

@@ -1,5 +1,9 @@
 import type { AnnouncementData } from "@/api";
 
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+
 import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
 
 interface AnnouncementBannerProps {
@@ -14,13 +18,13 @@ export const AnnouncementBanner = ({
   }
 
   return (
-    <Card className="mb-4 lg:mb-6 border border-blue-200 dark:border-blue-500/30 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-500/10 dark:to-purple-500/10">
-      <CardBody className="p-4">
-        <div className="flex items-start gap-3">
-          <div className="p-2 bg-blue-100 dark:bg-blue-500/20 rounded-lg flex-shrink-0">
+    <Card className="mb-4 lg:mb-6 border border-blue-100 dark:border-blue-500/20 bg-gradient-to-br from-blue-50/80 to-indigo-50/80 dark:from-blue-500/5 dark:to-indigo-500/5 shadow-sm">
+      <CardBody className="p-4 sm:p-5">
+        <div className="flex items-center gap-3.5 sm:gap-4">
+          <div className="w-10 h-10 sm:w-11 sm:h-11 bg-white dark:bg-blue-500/10 rounded-full flex-shrink-0 flex items-center justify-center shadow-sm border border-blue-100 dark:border-blue-500/20">
             <svg
               aria-hidden="true"
-              className="w-5 h-5 text-blue-600 dark:text-blue-400"
+              className="w-5 h-5 sm:w-5 sm:h-5 text-blue-500 dark:text-blue-400"
               fill="currentColor"
               viewBox="0 0 20 20"
             >
@@ -32,12 +36,57 @@ export const AnnouncementBanner = ({
             </svg>
           </div>
           <div className="flex-1 min-w-0">
-            <h3 className="text-sm lg:text-base font-semibold text-blue-900 dark:text-blue-100 mb-1">
+            <h3 className="text-[15px] font-semibold text-blue-900 dark:text-blue-100 tracking-wide mb-1 sm:mb-1.5 mt-1.5">
               公告
             </h3>
-            <p className="text-xs lg:text-sm text-blue-800 dark:text-blue-200 whitespace-pre-wrap break-words">
-              {announcement.content}
-            </p>
+            <div className="text-sm text-blue-800/90 dark:text-blue-100/90 break-words leading-relaxed">
+              <ReactMarkdown
+                components={{
+                  p: ({ children }) => (
+                    <p className="mb-2 last:mb-0">{children}</p>
+                  ),
+                  a: ({ children, href }) => (
+                    <a
+                      className="underline decoration-blue-500/70 underline-offset-2 hover:text-blue-700 dark:hover:text-blue-100"
+                      href={href}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {children}
+                    </a>
+                  ),
+                  ul: ({ children }) => (
+                    <ul className="list-disc pl-5 space-y-1 mb-2 last:mb-0">
+                      {children}
+                    </ul>
+                  ),
+                  ol: ({ children }) => (
+                    <ol className="list-decimal pl-5 space-y-1 mb-2 last:mb-0">
+                      {children}
+                    </ol>
+                  ),
+                  code: ({ children }) => (
+                    <code className="rounded bg-blue-100/80 dark:bg-blue-900/40 px-1 py-0.5 text-[0.92em]">
+                      {children}
+                    </code>
+                  ),
+                  pre: ({ children }) => (
+                    <pre className="mb-2 overflow-x-auto rounded-md bg-blue-100/70 dark:bg-blue-900/40 p-2.5 text-xs leading-relaxed">
+                      {children}
+                    </pre>
+                  ),
+                  blockquote: ({ children }) => (
+                    <blockquote className="mb-2 border-l-2 border-blue-300/80 dark:border-blue-500/60 pl-3 italic">
+                      {children}
+                    </blockquote>
+                  ),
+                }}
+                rehypePlugins={[rehypeSanitize]}
+                remarkPlugins={[remarkGfm]}
+              >
+                {announcement.content}
+              </ReactMarkdown>
+            </div>
           </div>
         </div>
       </CardBody>

vite-frontend/src/pages/dashboard/components/flow-chart-card.tsx

@@ -1,4 +1,3 @@
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import {
   CartesianGrid,
   Line,
@@ -9,6 +8,7 @@ import {
   YAxis,
 } from "recharts";
 
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { PageEmptyState } from "@/components/page-state";
 
 interface FlowChartPoint {

vite-frontend/src/pages/dashboard/use-dashboard-data.ts

@@ -1,3 +1,5 @@
+import type { ForwardApiItem } from "@/api/types";
+
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -6,7 +8,6 @@ import {
   getUserPackageInfo,
   type AnnouncementData,
 } from "@/api";
-import type { ForwardApiItem } from "@/api/types";
 import { getAdminFlag } from "@/utils/session";
 
 export interface DashboardUserInfo {
@@ -180,9 +181,13 @@ export const useDashboardData = (): DashboardDataState => {
   );
   const [userTunnels, setUserTunnels] = useState<DashboardUserTunnel[]>([]);
   const [forwardList, setForwardList] = useState<DashboardForward[]>([]);
-  const [statisticsFlows, setStatisticsFlows] = useState<DashboardStatisticsFlow[]>([]);
+  const [statisticsFlows, setStatisticsFlows] = useState<
+    DashboardStatisticsFlow[]
+  >([]);
   const [isAdmin, setIsAdmin] = useState(false);
-  const [announcement, setAnnouncement] = useState<AnnouncementData | null>(null);
+  const [announcement, setAnnouncement] = useState<AnnouncementData | null>(
+    null,
+  );
 
   useEffect(() => {
     const loadAnnouncement = async () => {
@@ -214,7 +219,10 @@ export const useDashboardData = (): DashboardDataState => {
           setForwardList(normalizedForwards);
           setStatisticsFlows(data.statisticsFlows || []);
 
-          checkExpirationNotifications(data.userInfo, normalizedTunnelPermissions);
+          checkExpirationNotifications(
+            data.userInfo,
+            normalizedTunnelPermissions,
+          );
         } else {
           toast.error(res.msg || "获取套餐信息失败");
         }

vite-frontend/src/pages/forward.tsx

@@ -1,22 +1,4 @@
 import { useState, useEffect, useMemo } from "react";
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Input } from "@/shadcn-bridge/heroui/input";
-import { Textarea } from "@/shadcn-bridge/heroui/input";
-import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
-import {
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from "@/shadcn-bridge/heroui/modal";
-import { Chip } from "@/shadcn-bridge/heroui/chip";
-import { Spinner } from "@/shadcn-bridge/heroui/spinner";
-import { Switch } from "@/shadcn-bridge/heroui/switch";
-import { Alert } from "@/shadcn-bridge/heroui/alert";
-import { Accordion, AccordionItem } from "@/shadcn-bridge/heroui/accordion";
-import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import toast from "react-hot-toast";
 import {
   DndContext,
@@ -33,10 +15,38 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
   rectSortingStrategy,
+  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
+import { SearchBar } from "@/components/search-bar";
+import { AnimatedPage } from "@/components/animated-page";
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { Textarea } from "@/shadcn-bridge/heroui/input";
+import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from "@/shadcn-bridge/heroui/table";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@/shadcn-bridge/heroui/modal";
+import { Chip } from "@/shadcn-bridge/heroui/chip";
+import { Spinner } from "@/shadcn-bridge/heroui/spinner";
+import { Switch } from "@/shadcn-bridge/heroui/switch";
+import { Alert } from "@/shadcn-bridge/heroui/alert";
+import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import {
   createForward,
   getForwardList,
@@ -111,24 +121,13 @@ interface ForwardForm {
   strategy: string;
 }
 
-// 添加分组接口
-interface UserGroup {
-  userId: number | null;
-  userName: string;
-  tunnelGroups: TunnelGroup[];
-}
-
-interface TunnelGroup {
-  tunnelId: number;
-  tunnelName: string;
-  forwards: Forward[];
-}
-
 export default function ForwardPage() {
   const [loading, setLoading] = useState(true);
   const [forwards, setForwards] = useState<Forward[]>([]);
   const [tunnels, setTunnels] = useState<Tunnel[]>([]);
   const isMobile = useMobileBreakpoint();
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
 
   // 显示模式状态 - 从localStorage读取，默认为平铺显示
   const [viewMode, setViewMode] = useState<"grouped" | "direct">(() => {
@@ -136,16 +135,21 @@ export default function ForwardPage() {
       const savedMode = localStorage.getItem("forward-view-mode");
 
       return (savedMode as "grouped" | "direct") || "direct";
-    } catch {
+    } catch (e) {
       return "direct";
     }
   });
 
+  // 筛选状态
+  const [filterUserId, setFilterUserId] = useState<string>("all");
+  const [filterTunnelId, setFilterTunnelId] = useState<string>("all");
+
   // 拖拽排序相关状态
   const [forwardOrder, setForwardOrder] = useState<number[]>([]);
 
   // 模态框状态
   const [modalOpen, setModalOpen] = useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [addressModalOpen, setAddressModalOpen] = useState(false);
   const [diagnosisModalOpen, setDiagnosisModalOpen] = useState(false);
@@ -220,21 +224,6 @@ export default function ForwardPage() {
     setViewMode(newMode);
     try {
       localStorage.setItem("forward-view-mode", newMode);
-
-      // 切换到直接显示模式时，初始化拖拽排序顺序
-      if (newMode === "direct") {
-        const currentUserId = JwtUtil.getUserIdFromToken();
-        const { order, fromDatabase } = buildForwardOrder(
-          forwards,
-          currentUserId,
-        );
-
-        setForwardOrder(order);
-
-        if (fromDatabase) {
-          saveOrder(FORWARD_ORDER_KEY, order);
-        }
-      }
     } catch {}
   };
 
@@ -257,18 +246,16 @@ export default function ForwardPage() {
         setForwards(forwardsData);
 
         // 初始化拖拽排序顺序
-        if (viewMode === "direct") {
-          const currentUserId = JwtUtil.getUserIdFromToken();
-          const { order, fromDatabase } = buildForwardOrder(
-            forwardsData,
-            currentUserId,
-          );
+        const currentUserId = JwtUtil.getUserIdFromToken();
+        const { order, fromDatabase } = buildForwardOrder(
+          forwardsData,
+          currentUserId,
+        );
 
-          setForwardOrder(order);
+        setForwardOrder(order);
 
-          if (fromDatabase) {
-            saveOrder(FORWARD_ORDER_KEY, order);
-          }
+        if (fromDatabase) {
+          saveOrder(FORWARD_ORDER_KEY, order);
         }
       } else {
         toast.error(forwardsRes.msg || "获取转发列表失败");
@@ -285,53 +272,6 @@ export default function ForwardPage() {
     }
   };
 
-  // 按用户和隧道分组转发数据
-  const groupForwardsByUserAndTunnel = (): UserGroup[] => {
-    const userMap = new Map<string, UserGroup>();
-
-    // 获取排序后的转发列表
-    sortedForwards.forEach((forward) => {
-      const userKey = forward.userId ? forward.userId.toString() : "unknown";
-      const userName = forward.userName || "未知用户";
-
-      if (!userMap.has(userKey)) {
-        userMap.set(userKey, {
-          userId: forward.userId || null,
-          userName,
-          tunnelGroups: [],
-        });
-      }
-
-      const userGroup = userMap.get(userKey)!;
-      let tunnelGroup = userGroup.tunnelGroups.find(
-        (tg) => tg.tunnelId === forward.tunnelId,
-      );
-
-      if (!tunnelGroup) {
-        tunnelGroup = {
-          tunnelId: forward.tunnelId,
-          tunnelName: forward.tunnelName,
-          forwards: [],
-        };
-        userGroup.tunnelGroups.push(tunnelGroup);
-      }
-
-      tunnelGroup.forwards.push(forward);
-    });
-
-    // 排序：先按用户名，再按隧道名
-    const result = Array.from(userMap.values());
-
-    result.sort((a, b) => a.userName.localeCompare(b.userName));
-    result.forEach((userGroup) => {
-      userGroup.tunnelGroups.sort((a, b) =>
-        a.tunnelName.localeCompare(b.tunnelName),
-      );
-    });
-
-    return result;
-  };
-
   // 表单验证
   const validateForm = (): boolean => {
     const newErrors: { [key: string]: string } = {};
@@ -707,26 +647,10 @@ export default function ForwardPage() {
     setExportLoading(true);
 
     try {
-      // 根据当前显示模式获取要导出的转发列表
-      let forwardsToExport: Forward[] = [];
-
-      if (viewMode === "grouped") {
-        // 分组模式下，获取指定隧道的转发
-        const userGroups = groupForwardsByUserAndTunnel();
-
-        forwardsToExport = userGroups.flatMap((userGroup) =>
-          userGroup.tunnelGroups
-            .filter(
-              (tunnelGroup) => tunnelGroup.tunnelId === selectedTunnelForExport,
-            )
-            .flatMap((tunnelGroup) => tunnelGroup.forwards),
-        );
-      } else {
-        // 直接显示模式下，过滤指定隧道的转发
-        forwardsToExport = sortedForwards.filter(
-          (forward) => forward.tunnelId === selectedTunnelForExport,
-        );
-      }
+      // 获取要导出的转发列表
+      const forwardsToExport = sortedForwards.filter(
+        (forward) => forward.tunnelId === selectedTunnelForExport,
+      );
 
       if (forwardsToExport.length === 0) {
         toast.error("所选隧道没有转发数据");
@@ -1168,15 +1092,32 @@ export default function ForwardPage() {
       return [];
     }
 
-    // 在平铺模式下，只显示当前用户的转发
     let filteredForwards = forwards;
 
-    if (viewMode === "direct") {
-      if (tokenUserId !== null) {
-        filteredForwards = forwards.filter(
-          (forward) => forward.userId === tokenUserId,
-        );
-      }
+    if (filterUserId !== "all") {
+      const targetUserId = parseInt(filterUserId);
+
+      filteredForwards = filteredForwards.filter(
+        (f) => f.userId === targetUserId || (targetUserId === 0 && !f.userId),
+      );
+    }
+    if (filterTunnelId !== "all") {
+      const targetTunnelId = parseInt(filterTunnelId);
+
+      filteredForwards = filteredForwards.filter(
+        (f) => f.tunnelId === targetTunnelId,
+      );
+    }
+
+    if (searchKeyword.trim()) {
+      const lowerKeyword = searchKeyword.toLowerCase();
+
+      filteredForwards = filteredForwards.filter(
+        (f) =>
+          (f.name && f.name.toLowerCase().includes(lowerKeyword)) ||
+          (f.remoteAddr && f.remoteAddr.toLowerCase().includes(lowerKeyword)) ||
+          (f.userName && f.userName.toLowerCase().includes(lowerKeyword)),
+      );
     }
 
     // 确保过滤后的转发列表有效
@@ -1220,7 +1161,15 @@ export default function ForwardPage() {
     }
 
     return sortedByDb;
-  }, [forwards, forwardOrder, viewMode, tokenUserId]);
+  }, [
+    forwards,
+    forwardOrder,
+    viewMode,
+    tokenUserId,
+    filterUserId,
+    filterTunnelId,
+    searchKeyword,
+  ]);
 
   const sortableForwardIds = useMemo(
     () => sortedForwards.map((f) => f.id).filter((id) => id > 0),
@@ -1238,11 +1187,17 @@ export default function ForwardPage() {
       isDragging,
     } = useSortable({ id: forward.id });
 
-    const style = {
-      transform: transform ? CSS.Transform.toString(transform) : undefined,
+    const style: React.CSSProperties = {
+      transform: transform
+        ? CSS.Transform.toString({
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
+        : undefined,
       transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
-      willChange: "transform",
+      willChange: isDragging ? "transform" : undefined,
     };
 
     return (
@@ -1252,6 +1207,237 @@ export default function ForwardPage() {
     );
   };
 
+  // 生成用作筛选项的用户和隧道列表
+  const uniqueUsers = useMemo(() => {
+    const userMap = new Map<number, { id: number; name: string }>();
+
+    forwards.forEach((f) => {
+      const uId = f.userId || 0;
+
+      if (!userMap.has(uId)) {
+        userMap.set(uId, { id: uId, name: f.userName || "未知用户" });
+      }
+    });
+
+    return Array.from(userMap.values());
+  }, [forwards]);
+
+  // 可拖拽的表格行组件
+  const SortableTableRow = ({
+    forward,
+    selectMode,
+    selectedIds,
+    toggleSelect,
+    getStrategyDisplay,
+    formatInAddress,
+    formatRemoteAddress,
+    handleServiceToggle,
+    handleEdit,
+    handleDelete,
+    handleDiagnose,
+    showAddressModal,
+    hasMultipleAddresses,
+    formatFlow,
+  }: any) => {
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+    } = useSortable({ id: forward.id });
+
+    const style = {
+      transform: transform
+        ? CSS.Transform.toString({
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
+        : undefined,
+      transition: isDragging ? undefined : transition || undefined,
+      opacity: isDragging ? 0.5 : 1,
+      backgroundColor: isDragging ? "var(--nextui-default-100)" : undefined,
+    };
+
+    const strategyDisplay = getStrategyDisplay(forward.strategy);
+
+    return (
+      <TableRow key={forward.id} ref={setNodeRef} style={style}>
+        {selectMode && (
+          <TableCell>
+            <Checkbox
+              isSelected={selectedIds.has(forward.id)}
+              onValueChange={() => toggleSelect(forward.id)}
+            />
+          </TableCell>
+        )}
+        <TableCell>
+          <div
+            className="cursor-grab active:cursor-grabbing p-1 text-default-400 hover:text-default-600 transition-colors"
+            {...attributes}
+            {...listeners}
+            title="拖拽排序"
+          >
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M7 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 2zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 7 14zm6-8a2 2 0 1 1-.001-4.001A2 2 0 0 1 13 6zm0 2a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 8zm0 6a2 2 0 1 1 .001 4.001A2 2 0 0 1 13 14z" />
+            </svg>
+          </div>
+        </TableCell>
+        <TableCell className="whitespace-nowrap">
+          <span className="text-sm font-medium text-default-700">
+            {forward.userName || "未知用户"}
+          </span>
+        </TableCell>
+        <TableCell className="whitespace-nowrap">
+          <Chip
+            className="border-none bg-secondary/10 px-2"
+            color="secondary"
+            size="sm"
+          >
+            <span className="font-medium text-secondary-700">
+              {forward.tunnelName}
+            </span>
+          </Chip>
+        </TableCell>
+        <TableCell className="whitespace-nowrap font-semibold text-foreground">
+          {forward.name}
+        </TableCell>
+        <TableCell className="max-w-[220px]">
+          <button
+            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
+              hasMultipleAddresses(forward.inIp)
+                ? "hover:bg-default-200 hover:shadow-sm"
+                : ""
+            }`}
+            title={formatInAddress(forward.inIp, forward.inPort)}
+            type="button"
+            onClick={() =>
+              showAddressModal(forward.inIp, forward.inPort, "入口端口")
+            }
+          >
+            {formatInAddress(forward.inIp, forward.inPort)}
+          </button>
+        </TableCell>
+        <TableCell className="max-w-[240px]">
+          <button
+            className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
+              hasMultipleAddresses(forward.remoteAddr)
+                ? "hover:bg-default-200 hover:shadow-sm"
+                : ""
+            }`}
+            title={formatRemoteAddress(forward.remoteAddr)}
+            type="button"
+            onClick={() =>
+              showAddressModal(forward.remoteAddr, null, "目标地址")
+            }
+          >
+            {formatRemoteAddress(forward.remoteAddr)}
+          </button>
+        </TableCell>
+        <TableCell>
+          <Chip
+            className="text-xs font-medium"
+            color={strategyDisplay.color as any}
+            size="sm"
+            variant="flat"
+          >
+            {strategyDisplay.text}
+          </Chip>
+        </TableCell>
+        <TableCell className="whitespace-nowrap">
+          <span className="text-sm font-medium text-default-600 font-mono">
+            {formatFlow((forward.inFlow || 0) + (forward.outFlow || 0))}
+          </span>
+        </TableCell>
+        <TableCell>
+          <div className="flex items-center gap-2.5 whitespace-nowrap">
+            <Switch
+              color="success"
+              isDisabled={forward.status !== 1 && forward.status !== 0}
+              isSelected={forward.serviceRunning}
+              size="sm"
+              onValueChange={() => handleServiceToggle(forward)}
+            />
+          </div>
+        </TableCell>
+        <TableCell>
+          <div className="flex justify-end gap-2">
+            <Button
+              isIconOnly
+              className="bg-primary/10 text-primary hover:bg-primary/20"
+              size="sm"
+              title="编辑"
+              onPress={() => handleEdit(forward)}
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                />
+              </svg>
+            </Button>
+            <Button
+              isIconOnly
+              className="bg-warning/10 text-warning hover:bg-warning/20"
+              size="sm"
+              title="诊断"
+              onPress={() => handleDiagnose(forward)}
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                />
+              </svg>
+            </Button>
+            <Button
+              isIconOnly
+              className="bg-danger/10 text-danger hover:bg-danger/20"
+              size="sm"
+              title="删除"
+              onPress={() => handleDelete(forward)}
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                />
+              </svg>
+            </Button>
+          </div>
+        </TableCell>
+      </TableRow>
+    );
+  };
+
   // 渲染转发卡片
   const renderForwardCard = (forward: Forward, listeners?: any) => {
     const statusDisplay = getStatusDisplay(forward.status);
@@ -1516,14 +1702,58 @@ export default function ForwardPage() {
     return <PageLoadingState message="正在加载..." />;
   }
 
-  const userGroups = groupForwardsByUserAndTunnel();
-
   return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
       {/* 页面头部 */}
-      <div className="flex items-center justify-between mb-6 gap-2">
-        <div className="flex-1" />
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
+        <div className="flex-1 max-w-sm flex items-center gap-2">
+          <SearchBar
+            isVisible={isSearchVisible}
+            placeholder="搜索转发名称、地址或用户名"
+            value={searchKeyword}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
+          />
+        </div>
         <div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
+          {/* 筛选按钮 */}
+          <Button
+            isIconOnly
+            aria-label="筛选条件"
+            className={
+              filterUserId !== "all" || filterTunnelId !== "all"
+                ? "bg-primary/20 text-primary relative"
+                : "text-default-600 relative"
+            }
+            color={
+              filterUserId !== "all" || filterTunnelId !== "all"
+                ? "primary"
+                : "default"
+            }
+            size="sm"
+            title="筛选条件"
+            variant="flat"
+            onPress={() => setIsFilterModalOpen(true)}
+          >
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+            {(filterUserId !== "all" || filterTunnelId !== "all") && (
+              <span className="absolute top-1.5 right-1.5 flex h-1.5 w-1.5 rounded-full bg-primary" />
+            )}
+          </Button>
           {/* 显示模式切换按钮 */}
           <Button
             isIconOnly
@@ -1584,7 +1814,7 @@ export default function ForwardPage() {
           </Button>
 
           <Button
-            color={selectMode ? "warning" : "primary"}
+            color={selectMode ? "secondary" : "default"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -1604,10 +1834,20 @@ export default function ForwardPage() {
             <span className="text-sm text-default-600 shrink-0">
               已选择 {selectedIds.size} 项
             </span>
-            <Button color="primary" size="sm" variant="flat" onPress={selectAll}>
+            <Button
+              color="primary"
+              size="sm"
+              variant="flat"
+              onPress={selectAll}
+            >
               全选
             </Button>
-            <Button color="secondary" size="sm" variant="flat" onPress={deselectAll}>
+            <Button
+              color="secondary"
+              size="sm"
+              variant="flat"
+              onPress={deselectAll}
+            >
               清空
             </Button>
             <Button
@@ -1659,147 +1899,75 @@ export default function ForwardPage() {
 
       {/* 根据显示模式渲染不同内容 */}
       {viewMode === "grouped" ? (
-        /* 按用户和隧道分组的转发列表 */
-        userGroups.length > 0 ? (
-          <div className="space-y-6">
-            {userGroups.map((userGroup) => (
-              <Card
-                key={userGroup.userId || "unknown"}
-                className="shadow-sm border border-divider w-full overflow-hidden"
+        sortedForwards.length > 0 ? (
+          <div className="overflow-hidden rounded-xl border border-divider bg-content1 shadow-md">
+            <DndContext
+              collisionDetection={closestCenter}
+              sensors={sensors}
+              onDragEnd={handleDragEnd}
+            >
+              <Table
+                aria-label="全部转发列表"
+                classNames={{
+                  th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider",
+                  td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
+                  tr: "hover:bg-default-50/50 transition-colors",
+                }}
               >
-                <CardHeader className="pb-2 md:pb-2">
-                  <div className="flex items-center justify-between w-full min-w-0">
-                    <div className="flex items-center gap-3 min-w-0 flex-1">
-                      <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0">
-                        <svg
-                          aria-hidden="true"
-                          className="w-5 h-5 text-primary"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path
-                            clipRule="evenodd"
-                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                            fillRule="evenodd"
-                          />
-                        </svg>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h2 className="text-base font-medium text-foreground truncate max-w-[150px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-[450px]">
-                          {userGroup.userName}
-                        </h2>
-                        <p className="text-xs text-default-500 truncate max-w-[150px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-[450px]">
-                          {userGroup.tunnelGroups.length} 个隧道，
-                          {userGroup.tunnelGroups.reduce(
-                            (total, tg) => total + tg.forwards.length,
-                            0,
-                          )}{" "}
-                          个转发
-                        </p>
-                      </div>
-                    </div>
-                    <Chip
-                      className="text-xs flex-shrink-0 ml-2"
-                      color="primary"
-                      size="sm"
-                      variant="flat"
+                <TableHeader>
+                  {selectMode && (
+                    <TableColumn className="w-14">选择</TableColumn>
+                  )}
+                  <TableColumn className="w-10 pl-4" />
+                  <TableColumn>用户</TableColumn>
+                  <TableColumn>隧道</TableColumn>
+                  <TableColumn>名称</TableColumn>
+                  <TableColumn>入口</TableColumn>
+                  <TableColumn>目标</TableColumn>
+                  <TableColumn>策略</TableColumn>
+                  <TableColumn>总流量</TableColumn>
+                  <TableColumn>状态</TableColumn>
+                  <TableColumn className="text-right">操作</TableColumn>
+                </TableHeader>
+                <TableBody emptyContent="暂无转发配置" items={sortedForwards}>
+                  {(forward) => (
+                    <SortableContext
+                      key={forward.id}
+                      items={sortableForwardIds}
+                      strategy={verticalListSortingStrategy}
                     >
-                      用户
-                    </Chip>
-                  </div>
-                </CardHeader>
-
-                <CardBody className="pt-0 md:pt-0">
-                  <Accordion className="px-0" variant="splitted">
-                    {userGroup.tunnelGroups.map((tunnelGroup) => (
-                      <AccordionItem
-                        key={tunnelGroup.tunnelId}
-                        aria-label={tunnelGroup.tunnelName}
-                        className="shadow-none border border-divider"
-                        title={
-                          <div className="flex items-center justify-between w-full min-w-0 pr-4">
-                            <div className="flex items-center gap-3 min-w-0 flex-1">
-                              <div className="w-8 h-8 bg-success-100 dark:bg-success-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
-                                <svg
-                                  aria-hidden="true"
-                                  className="w-4 h-4 text-success"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                  />
-                                </svg>
-                              </div>
-                              <div className="min-w-0 flex-1">
-                                <h3 className="text-sm font-medium text-foreground truncate max-w-[120px] sm:max-w-[200px] md:max-w-[300px] lg:max-w-[400px]">
-                                  {tunnelGroup.tunnelName}
-                                </h3>
-                              </div>
-                            </div>
-                            <div className="flex items-center gap-2 flex-shrink-0 ml-2">
-                              <Chip
-                                className="text-xs"
-                                size="sm"
-                                variant="flat"
-                              >
-                                {
-                                  tunnelGroup.forwards.filter(
-                                    (f) => f.serviceRunning,
-                                  ).length
-                                }
-                                /{tunnelGroup.forwards.length}
-                              </Chip>
-                            </div>
-                          </div>
-                        }
-                      >
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
-                          {tunnelGroup.forwards.map((forward) =>
-                            renderForwardCard(forward, undefined),
-                          )}
-                        </div>
-                      </AccordionItem>
-                    ))}
-                  </Accordion>
-                </CardBody>
-              </Card>
-            ))}
+                      <SortableTableRow
+                        formatFlow={formatFlow}
+                        formatInAddress={formatInAddress}
+                        formatRemoteAddress={formatRemoteAddress}
+                        forward={forward}
+                        getStrategyDisplay={getStrategyDisplay}
+                        handleDelete={handleDelete}
+                        handleDiagnose={handleDiagnose}
+                        handleEdit={handleEdit}
+                        handleServiceToggle={handleServiceToggle}
+                        hasMultipleAddresses={hasMultipleAddresses}
+                        selectMode={selectMode}
+                        selectedIds={selectedIds}
+                        showAddressModal={showAddressModal}
+                        toggleSelect={toggleSelect}
+                      />
+                    </SortableContext>
+                  )}
+                </TableBody>
+              </Table>
+            </DndContext>
           </div>
         ) : (
           /* 空状态 */
-          <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-            <CardBody className="text-center py-16">
-              <div className="flex flex-col items-center gap-4">
-                <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                  <svg
-                    aria-hidden="true"
-                    className="w-8 h-8 text-default-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold text-foreground">
-                    暂无转发配置
-                  </h3>
-                  <p className="text-default-500 text-sm mt-1">
-                    还没有创建任何转发配置，点击上方按钮开始创建
-                  </p>
-                </div>
-              </div>
+          <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+                暂无转发配置
+              </h3>
+              <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+                还没有创建任何转发配置，点击上方按钮开始创建
+              </p>
             </CardBody>
           </Card>
         )
@@ -1826,34 +1994,14 @@ export default function ForwardPage() {
         </DndContext>
       ) : (
         /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  className="w-8 h-8 text-default-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无转发配置
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何转发配置，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无转发配置
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何转发配置，点击上方按钮开始创建
+            </p>
           </CardBody>
         </Card>
       )}
@@ -3005,6 +3153,85 @@ export default function ForwardPage() {
           )}
         </ModalContent>
       </Modal>
-    </div>
+
+      {/* 筛选模态框 */}
+      <Modal
+        isOpen={isFilterModalOpen}
+        placement="center"
+        size="md"
+        onOpenChange={setIsFilterModalOpen}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                筛选条件
+              </ModalHeader>
+              <ModalBody>
+                <div className="flex flex-col gap-4 py-2">
+                  <div className="flex flex-col gap-2">
+                    <label className="text-sm font-medium">按用户筛选</label>
+                    <Select
+                      aria-label="筛选用户"
+                      className="w-full"
+                      selectedKeys={[filterUserId]}
+                      variant="bordered"
+                      onSelectionChange={(keys) => {
+                        const key = Array.from(keys)[0] as string;
+
+                        setFilterUserId(key || "all");
+                      }}
+                    >
+                      <SelectItem key="all">全部用户</SelectItem>
+                      {uniqueUsers.map((user) => (
+                        <SelectItem key={user.id.toString()}>
+                          {user.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <label className="text-sm font-medium">按隧道筛选</label>
+                    <Select
+                      aria-label="筛选隧道"
+                      className="w-full"
+                      selectedKeys={[filterTunnelId]}
+                      variant="bordered"
+                      onSelectionChange={(keys) => {
+                        const key = Array.from(keys)[0] as string;
+
+                        setFilterTunnelId(key || "all");
+                      }}
+                    >
+                      <SelectItem key="all">全部隧道</SelectItem>
+                      {tunnels.map((tunnel) => (
+                        <SelectItem key={tunnel.id.toString()}>
+                          {tunnel.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </div>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button
+                  color="default"
+                  variant="flat"
+                  onPress={() => {
+                    setFilterUserId("all");
+                    setFilterTunnelId("all");
+                  }}
+                >
+                  重置
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  完成
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </AnimatedPage>
   );
 }

vite-frontend/src/pages/group.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -21,8 +23,6 @@ import {
 } from "@/shadcn-bridge/heroui/table";
 import { Chip } from "@/shadcn-bridge/heroui/chip";
 import { Spinner } from "@/shadcn-bridge/heroui/spinner";
-import toast from "react-hot-toast";
-
 import {
   assignGroupPermission,
   assignTunnelsToGroup,
@@ -173,6 +173,22 @@ export default function GroupPage() {
     return map;
   }, [users]);
 
+  const selectedTunnelSummary = useMemo(() => {
+    const value = Array.from(selectedTunnelKeys)
+      .map((id) => tunnelNameMap.get(Number(id)) || id)
+      .join("、");
+
+    return value || "无";
+  }, [selectedTunnelKeys, tunnelNameMap]);
+
+  const selectedUserSummary = useMemo(() => {
+    const value = Array.from(selectedUserKeys)
+      .map((id) => userNameMap.get(Number(id)) || id)
+      .join("、");
+
+    return value || "无";
+  }, [selectedUserKeys, userNameMap]);
+
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
@@ -629,9 +645,10 @@ export default function GroupPage() {
               {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
             </Select>
             <Button
-              className="md:self-end"
+              className="md:self-end md:justify-self-start whitespace-nowrap px-4"
               color="primary"
               isLoading={savingPermission}
+              size="sm"
               onPress={handleAssignPermission}
             >
               分配权限
@@ -765,8 +782,10 @@ export default function GroupPage() {
       >
         <ModalContent>
           <ModalHeader>分配隧道 - {assignTunnelGroup?.name}</ModalHeader>
-          <ModalBody>
+          <ModalBody className="min-w-0">
             <Select
+              className="min-w-0"
+              classNames={{ trigger: "max-w-full" }}
               items={tunnels}
               label="选择隧道"
               selectedKeys={selectedTunnelKeys}
@@ -779,11 +798,11 @@ export default function GroupPage() {
             >
               {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
             </Select>
-            <p className="text-xs text-default-500 break-all whitespace-normal">
-              当前已选：
-              {Array.from(selectedTunnelKeys)
-                .map((id) => tunnelNameMap.get(Number(id)) || id)
-                .join("、") || "无"}
+            <p
+              className="w-full min-w-0 max-w-full text-xs text-default-500 truncate"
+              title={`当前已选：${selectedTunnelSummary}`}
+            >
+              当前已选：{selectedTunnelSummary}
             </p>
             <p className="text-xs text-default-500">
               不选择任何隧道并保存将清空该分组成员。
@@ -810,8 +829,10 @@ export default function GroupPage() {
       >
         <ModalContent>
           <ModalHeader>分配用户 - {assignUserGroup?.name}</ModalHeader>
-          <ModalBody>
+          <ModalBody className="min-w-0">
             <Select
+              className="min-w-0"
+              classNames={{ trigger: "max-w-full" }}
               items={users}
               label="选择用户"
               selectedKeys={selectedUserKeys}
@@ -824,11 +845,11 @@ export default function GroupPage() {
             >
               {(item) => <SelectItem key={item.id}>{item.user}</SelectItem>}
             </Select>
-            <p className="text-xs text-default-500 break-all whitespace-normal">
-              当前已选：
-              {Array.from(selectedUserKeys)
-                .map((id) => userNameMap.get(Number(id)) || id)
-                .join("、") || "无"}
+            <p
+              className="w-full min-w-0 max-w-full text-xs text-default-500 truncate"
+              title={`当前已选：${selectedUserSummary}`}
+            >
+              当前已选：{selectedUserSummary}
             </p>
             <p className="text-xs text-default-500">
               不选择任何用户并保存将清空该分组成员。

vite-frontend/src/pages/index.tsx

@@ -1,11 +1,12 @@
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Input } from "@/shadcn-bridge/heroui/input";
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import { Turnstile } from "@marsidev/react-turnstile";
+import { motion } from "framer-motion";
 
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { Button } from "@/shadcn-bridge/heroui/button";
 import { siteConfig } from "@/config/site";
 import { title } from "@/components/primitives";
 import DefaultLayout from "@/layouts/default";
@@ -152,7 +153,12 @@ export default function IndexPage() {
   return (
     <DefaultLayout>
       <section className="flex flex-col items-center justify-center gap-4 py-4 sm:py-8 md:py-10 pb-20 min-h-[calc(100dvh-120px)] sm:min-h-[calc(100dvh-200px)]">
-        <div className="w-full max-w-md px-4 sm:px-0">
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="w-full max-w-md px-4 sm:px-0"
+          initial={{ opacity: 0, y: 24 }}
+          transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
+        >
           <Card className="w-full">
             <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
               <h1 className={title({ size: "sm" })}>登陆</h1>
@@ -203,7 +209,7 @@ export default function IndexPage() {
               </div>
             </CardBody>
           </Card>
-        </div>
+        </motion.div>
 
         {/* 版权信息 - 固定在底部，不占据布局空间 */}
 

vite-frontend/src/pages/limit.tsx

@@ -1,4 +1,12 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
+import toast from "react-hot-toast";
+
+import {
+  AnimatedPage,
+  StaggerList,
+  StaggerItem,
+} from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -11,8 +19,6 @@ import {
   ModalFooter,
 } from "@/shadcn-bridge/heroui/modal";
 import { Chip } from "@/shadcn-bridge/heroui/chip";
-import toast from "react-hot-toast";
-
 import {
   createSpeedLimit,
   getSpeedLimitList,
@@ -51,6 +57,19 @@ export default function LimitPage() {
   const [loading, setLoading] = useState(true);
   const [rules, setRules] = useState<SpeedLimitRule[]>([]);
   const [tunnels, setTunnels] = useState<Tunnel[]>([]);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+
+  const filteredRules = useMemo(() => {
+    if (!searchKeyword.trim()) return rules;
+    const lowerKeyword = searchKeyword.toLowerCase();
+
+    return rules.filter(
+      (r) =>
+        (r.name && r.name.toLowerCase().includes(lowerKeyword)) ||
+        (r.tunnelName && r.tunnelName.toLowerCase().includes(lowerKeyword)),
+    );
+  }, [rules, searchKeyword]);
 
   // 模态框状态
   const [modalOpen, setModalOpen] = useState(false);
@@ -219,10 +238,18 @@ export default function LimitPage() {
   }
 
   return (
-    <div className="px-3 lg:px-6 py-8">
-      {/* 页面头部 */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex-1" />
+    <AnimatedPage className="px-3 lg:px-6 py-8">
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
+        <div className="flex-1 max-w-sm flex items-center gap-2">
+          <SearchBar
+            isVisible={isSearchVisible}
+            placeholder="搜索规则名称或绑定隧道"
+            value={searchKeyword}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
+          />
+        </div>
 
         <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
           新增
@@ -230,138 +257,117 @@ export default function LimitPage() {
       </div>
 
       {/* 统一卡片网格 */}
-      {rules.length > 0 ? (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-          {rules.map((rule) => (
-            <Card
-              key={rule.id}
-              className="shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
-            >
-              <CardHeader className="pb-2 md:pb-2">
-                <div className="flex justify-between items-start w-full">
-                  <div>
-                    <h3 className="font-semibold text-foreground">
-                      {rule.name}
-                    </h3>
-                  </div>
-                  <Chip
-                    color={rule.status === 1 ? "success" : "danger"}
-                    size="sm"
-                    variant="flat"
-                  >
-                    {rule.status === 1 ? "运行" : "异常"}
-                  </Chip>
-                </div>
-              </CardHeader>
-              <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className="text-small text-default-600">
-                      速度限制
-                    </span>
-                    <Chip color="secondary" size="sm" variant="flat">
-                      {rule.speed} Mbps
+      {filteredRules.length > 0 ? (
+        <StaggerList className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+          {filteredRules.map((rule) => (
+            <StaggerItem key={rule.id}>
+              <Card className="shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden h-full">
+                <CardHeader className="pb-2 md:pb-2">
+                  <div className="flex justify-between items-start w-full">
+                    <div>
+                      <h3 className="font-semibold text-foreground">
+                        {rule.name}
+                      </h3>
+                    </div>
+                    <Chip
+                      color={rule.status === 1 ? "success" : "danger"}
+                      size="sm"
+                      variant="flat"
+                    >
+                      {rule.status === 1 ? "运行" : "异常"}
                     </Chip>
                   </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-small text-default-600">
-                      绑定隧道
-                    </span>
-                    {rule.tunnelName ? (
-                      <Chip color="primary" size="sm" variant="flat">
-                        {rule.tunnelName}
-                      </Chip>
-                    ) : (
-                      <span className="text-default-400 text-small">
-                        未绑定
+                </CardHeader>
+                <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center">
+                      <span className="text-small text-default-600">
+                        速度限制
                       </span>
-                    )}
+                      <Chip color="secondary" size="sm" variant="flat">
+                        {rule.speed} Mbps
+                      </Chip>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-small text-default-600">
+                        绑定隧道
+                      </span>
+                      {rule.tunnelName ? (
+                        <Chip color="primary" size="sm" variant="flat">
+                          {rule.tunnelName}
+                        </Chip>
+                      ) : (
+                        <span className="text-default-400 text-small">
+                          未绑定
+                        </span>
+                      )}
+                    </div>
                   </div>
-                </div>
 
-                <div className="flex gap-2 mt-4">
-                  <Button
-                    className="flex-1"
-                    color="primary"
-                    size="sm"
-                    startContent={
-                      <svg
-                        aria-hidden="true"
-                        className="w-4 h-4"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                      >
-                        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                      </svg>
-                    }
-                    variant="flat"
-                    onPress={() => handleEdit(rule)}
-                  >
-                    编辑
-                  </Button>
-                  <Button
-                    className="flex-1"
-                    color="danger"
-                    size="sm"
-                    startContent={
-                      <svg
-                        aria-hidden="true"
-                        className="w-4 h-4"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                      >
-                        <path
-                          clipRule="evenodd"
-                          d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"
-                          fillRule="evenodd"
-                        />
-                        <path
-                          clipRule="evenodd"
-                          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 012 0v4a1 1 0 11-2 0V7zM12 7a1 1 0 012 0v4a1 1 0 11-2 0V7z"
-                          fillRule="evenodd"
-                        />
-                      </svg>
-                    }
-                    variant="flat"
-                    onPress={() => handleDelete(rule)}
-                  >
-                    删除
-                  </Button>
-                </div>
-              </CardBody>
-            </Card>
+                  <div className="flex gap-2 mt-4">
+                    <Button
+                      className="flex-1"
+                      color="primary"
+                      size="sm"
+                      startContent={
+                        <svg
+                          aria-hidden="true"
+                          className="w-4 h-4"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                        </svg>
+                      }
+                      variant="flat"
+                      onPress={() => handleEdit(rule)}
+                    >
+                      编辑
+                    </Button>
+                    <Button
+                      className="flex-1"
+                      color="danger"
+                      size="sm"
+                      startContent={
+                        <svg
+                          aria-hidden="true"
+                          className="w-4 h-4"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            clipRule="evenodd"
+                            d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"
+                            fillRule="evenodd"
+                          />
+                          <path
+                            clipRule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 012 0v4a1 1 0 11-2 0V7zM12 7a1 1 0 012 0v4a1 1 0 11-2 0V7z"
+                            fillRule="evenodd"
+                          />
+                        </svg>
+                      }
+                      variant="flat"
+                      onPress={() => handleDelete(rule)}
+                    >
+                      删除
+                    </Button>
+                  </div>
+                </CardBody>
+              </Card>
+            </StaggerItem>
           ))}
-        </div>
+        </StaggerList>
       ) : (
         /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  className="w-8 h-8 text-default-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M12 6v6l4 2m6-6a9 9 0 11-18 0 9 9 0 0118 0z"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无限速规则
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何限速规则，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无限速规则
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何限速规则，点击上方按钮开始创建
+            </p>
           </CardBody>
         </Card>
       )}
@@ -524,6 +530,6 @@ export default function LimitPage() {
           )}
         </ModalContent>
       </Modal>
-    </div>
+    </AnimatedPage>
   );
 }

vite-frontend/src/pages/node.tsx

@@ -1,23 +1,4 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Input } from "@/shadcn-bridge/heroui/input";
-import { Textarea } from "@/shadcn-bridge/heroui/input";
-import {
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from "@/shadcn-bridge/heroui/modal";
-import { Chip } from "@/shadcn-bridge/heroui/chip";
-import { Switch } from "@/shadcn-bridge/heroui/switch";
-import { Spinner } from "@/shadcn-bridge/heroui/spinner";
-import { Alert } from "@/shadcn-bridge/heroui/alert";
-import { Progress } from "@/shadcn-bridge/heroui/progress";
-import { Accordion, AccordionItem } from "@/shadcn-bridge/heroui/accordion";
-import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
-import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import toast from "react-hot-toast";
 import {
   DndContext,
@@ -37,6 +18,27 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
+import { SearchBar } from "@/components/search-bar";
+import { AnimatedPage } from "@/components/animated-page";
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { Textarea } from "@/shadcn-bridge/heroui/input";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@/shadcn-bridge/heroui/modal";
+import { Chip } from "@/shadcn-bridge/heroui/chip";
+import { Switch } from "@/shadcn-bridge/heroui/switch";
+import { Spinner } from "@/shadcn-bridge/heroui/spinner";
+import { Alert } from "@/shadcn-bridge/heroui/alert";
+import { Progress } from "@/shadcn-bridge/heroui/progress";
+import { Accordion, AccordionItem } from "@/shadcn-bridge/heroui/accordion";
+import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
+import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import {
   createNode,
   getNodeList,
@@ -49,6 +51,7 @@ import {
   batchUpgradeNodes,
   getNodeReleases,
   rollbackNode,
+  type ReleaseChannel,
 } from "@/api";
 import { PageEmptyState, PageLoadingState } from "@/components/page-state";
 import {
@@ -126,11 +129,17 @@ const SortableItem = ({
     isDragging,
   } = useSortable({ id });
 
-  const style = {
-    transform: transform ? CSS.Transform.toString(transform) : undefined,
+  const style: React.CSSProperties = {
+    transform: transform
+      ? CSS.Transform.toString({
+          ...transform,
+          x: Math.round(transform.x),
+          y: Math.round(transform.y),
+        })
+      : undefined,
     transition: isDragging ? undefined : transition || undefined,
     opacity: isDragging ? 0.5 : 1,
-    willChange: "transform",
+    willChange: isDragging ? "transform" : undefined,
   };
 
   return (
@@ -149,6 +158,8 @@ export default function NodePage() {
   const [nodeList, setNodeList] = useState<Node[]>([]);
   const [nodeOrder, setNodeOrder] = useState<number[]>([]);
   const [loading, setLoading] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [dialogVisible, setDialogVisible] = useState(false);
   const [dialogTitle, setDialogTitle] = useState("");
   const [isEdit, setIsEdit] = useState(false);
@@ -183,6 +194,10 @@ export default function NodePage() {
   const [installCommandModal, setInstallCommandModal] = useState(false);
   const [installCommand, setInstallCommand] = useState("");
   const [currentNodeName, setCurrentNodeName] = useState("");
+  const [installSelectorOpen, setInstallSelectorOpen] = useState(false);
+  const [installTargetNode, setInstallTargetNode] = useState<Node | null>(null);
+  const [installChannel, setInstallChannel] =
+    useState<ReleaseChannel>("stable");
 
   // 升级相关状态
   const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
@@ -198,9 +213,12 @@ export default function NodePage() {
       name: string;
       publishedAt: string;
       prerelease: boolean;
+      channel: ReleaseChannel;
     }>
   >([]);
   const [releasesLoading, setReleasesLoading] = useState(false);
+  const [releaseChannel, setReleaseChannel] =
+    useState<ReleaseChannel>("stable");
   const [selectedVersion, setSelectedVersion] = useState("");
   const [batchUpgradeLoading, setBatchUpgradeLoading] = useState(false);
   const [upgradeProgress, setUpgradeProgress] = useState<
@@ -609,20 +627,31 @@ export default function NodePage() {
     }
   };
 
+  const openInstallSelector = (node: Node) => {
+    setInstallTargetNode(node);
+    setInstallChannel("stable");
+    setInstallSelectorOpen(true);
+  };
+
   // 复制安装命令
-  const handleCopyInstallCommand = async (node: Node) => {
+  const handleCopyInstallCommand = async (
+    node: Node,
+    channel: ReleaseChannel,
+  ) => {
     setNodeList((prev) =>
       prev.map((n) => (n.id === node.id ? { ...n, copyLoading: true } : n)),
     );
 
     try {
-      const res = await getNodeInstallCommand(node.id);
+      const res = await getNodeInstallCommand(node.id, channel);
 
       if (res.code === 0 && res.data) {
         const copied = await tryCopyInstallCommand(res.data);
 
         if (copied) {
-          toast.success("安装命令已复制到剪贴板");
+          toast.success(
+            `${channel === "stable" ? "正式版" : "测试版"}安装命令已复制到剪贴板`,
+          );
         } else {
           setInstallCommand(res.data);
           setCurrentNodeName(node.name);
@@ -640,6 +669,13 @@ export default function NodePage() {
     }
   };
 
+  const handleConfirmInstallCommand = async () => {
+    if (!installTargetNode) return;
+
+    setInstallSelectorOpen(false);
+    await handleCopyInstallCommand(installTargetNode, installChannel);
+  };
+
   // 手动复制安装命令
   const handleManualCopy = async () => {
     try {
@@ -651,18 +687,10 @@ export default function NodePage() {
     }
   };
 
-  // 打开版本选择弹窗
-  const openUpgradeModal = async (
-    target: "single" | "batch",
-    nodeId?: number,
-  ) => {
-    setUpgradeTarget(target);
-    setUpgradeTargetNodeId(nodeId || null);
-    setSelectedVersion("");
-    setUpgradeModalOpen(true);
+  const loadReleasesByChannel = useCallback(async (channel: ReleaseChannel) => {
     setReleasesLoading(true);
     try {
-      const res = await getNodeReleases();
+      const res = await getNodeReleases(channel);
 
       if (res.code === 0 && Array.isArray(res.data)) {
         setReleases(res.data);
@@ -674,6 +702,21 @@ export default function NodePage() {
     } finally {
       setReleasesLoading(false);
     }
+  }, []);
+
+  // 打开版本选择弹窗
+  const openUpgradeModal = async (
+    target: "single" | "batch",
+    nodeId?: number,
+  ) => {
+    const defaultChannel: ReleaseChannel = "stable";
+
+    setUpgradeTarget(target);
+    setUpgradeTargetNodeId(nodeId || null);
+    setReleaseChannel(defaultChannel);
+    setSelectedVersion("");
+    setUpgradeModalOpen(true);
+    await loadReleasesByChannel(defaultChannel);
   };
 
   // 确认升级（从版本弹窗）
@@ -692,7 +735,11 @@ export default function NodePage() {
         ),
       );
       try {
-        const res = await upgradeNode(upgradeTargetNodeId, version);
+        const res = await upgradeNode(
+          upgradeTargetNodeId,
+          version,
+          releaseChannel,
+        );
 
         if (res.code === 0) {
           toast.success(`节点升级命令已发送，节点将自动重启`);
@@ -712,7 +759,11 @@ export default function NodePage() {
       setBatchUpgradeLoading(true);
       setUpgradeModalOpen(false);
       try {
-        const res = await batchUpgradeNodes(Array.from(selectedIds), version);
+        const res = await batchUpgradeNodes(
+          Array.from(selectedIds),
+          version,
+          releaseChannel,
+        );
 
         if (res.code === 0) {
           toast.success(`批量升级命令已发送到 ${selectedIds.size} 个节点`);
@@ -953,7 +1004,21 @@ export default function NodePage() {
   const sortedNodes = useMemo((): Node[] => {
     if (!nodeList || nodeList.length === 0) return [];
 
-    const sortedByDb = [...nodeList].sort((a, b) => {
+    let filteredNodes = nodeList;
+
+    if (searchKeyword.trim()) {
+      const lowerKeyword = searchKeyword.toLowerCase();
+
+      filteredNodes = filteredNodes.filter(
+        (n) =>
+          (n.name && n.name.toLowerCase().includes(lowerKeyword)) ||
+          (n.serverIp && n.serverIp.toLowerCase().includes(lowerKeyword)) ||
+          (n.serverIpV4 && n.serverIpV4.toLowerCase().includes(lowerKeyword)) ||
+          (n.serverIpV6 && n.serverIpV6.toLowerCase().includes(lowerKeyword)),
+      );
+    }
+
+    const sortedByDb = [...filteredNodes].sort((a, b) => {
       const aInx = a.inx ?? 0;
       const bInx = b.inx ?? 0;
 
@@ -966,7 +1031,7 @@ export default function NodePage() {
       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 nodeMap = new Map(filteredNodes.map((n) => [n.id, n] as const));
       const localSorted: Node[] = [];
 
       nodeOrder.forEach((id) => {
@@ -975,7 +1040,7 @@ export default function NodePage() {
         if (node) localSorted.push(node);
       });
 
-      nodeList.forEach((node) => {
+      filteredNodes.forEach((node) => {
         if (!nodeOrder.includes(node.id)) {
           localSorted.push(node);
         }
@@ -985,7 +1050,7 @@ export default function NodePage() {
     }
 
     return sortedByDb;
-  }, [nodeList, nodeOrder]);
+  }, [nodeList, nodeOrder, searchKeyword]);
 
   const sortableNodeIds = useMemo(
     () => sortedNodes.map((n) => n.id),
@@ -993,14 +1058,22 @@ export default function NodePage() {
   );
 
   return (
-    <div className="px-3 lg:px-6 py-8">
-      {/* 页面头部 */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex-1" />
+    <AnimatedPage className="px-3 lg:px-6 py-8">
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
+        <div className="flex-1 max-w-sm flex items-center gap-2">
+          <SearchBar
+            isVisible={isSearchVisible}
+            placeholder="搜索节点名称或IP"
+            value={searchKeyword}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
+          />
+        </div>
 
         <div className="flex gap-2 items-center">
           <Button
-            color={selectMode ? "warning" : "primary"}
+            color={selectMode ? "secondary" : "default"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -1020,10 +1093,20 @@ export default function NodePage() {
             <span className="text-sm font-medium shrink-0">
               已选 {selectedIds.size} 项
             </span>
-            <Button color="primary" size="sm" variant="flat" onPress={selectAll}>
+            <Button
+              color="primary"
+              size="sm"
+              variant="flat"
+              onPress={selectAll}
+            >
               全选
             </Button>
-            <Button color="secondary" size="sm" variant="flat" onPress={deselectAll}>
+            <Button
+              color="secondary"
+              size="sm"
+              variant="flat"
+              onPress={deselectAll}
+            >
               清空
             </Button>
             <Button
@@ -1357,7 +1440,7 @@ export default function NodePage() {
                                   isLoading={node.copyLoading}
                                   size="sm"
                                   variant="flat"
-                                  onPress={() => handleCopyInstallCommand(node)}
+                                  onPress={() => openInstallSelector(node)}
                                 >
                                   安装
                                 </Button>
@@ -1801,6 +1884,55 @@ export default function NodePage() {
         </ModalContent>
       </Modal>
 
+      <Modal
+        backdrop="blur"
+        isOpen={installSelectorOpen}
+        placement="center"
+        size="md"
+        onOpenChange={setInstallSelectorOpen}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                <h2 className="text-xl font-bold">
+                  选择安装通道
+                  {installTargetNode ? ` - ${installTargetNode.name}` : ""}
+                </h2>
+              </ModalHeader>
+              <ModalBody>
+                <div className="space-y-4">
+                  <Select
+                    label="版本通道"
+                    selectedKeys={[installChannel]}
+                    onSelectionChange={(keys) => {
+                      const selected = Array.from(keys)[0] as ReleaseChannel;
+
+                      setInstallChannel(selected || "stable");
+                    }}
+                  >
+                    <SelectItem key="stable" textValue="stable">
+                      正式版（纯数字版本，如 2.1.4）
+                    </SelectItem>
+                    <SelectItem key="dev" textValue="dev">
+                      测试版（含 alpha / beta / rc）
+                    </SelectItem>
+                  </Select>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button variant="light" onPress={onClose}>
+                  取消
+                </Button>
+                <Button color="primary" onPress={handleConfirmInstallCommand}>
+                  生成命令
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+
       {/* 安装命令模态框 */}
       <Modal
         backdrop="blur"
@@ -1881,9 +2013,28 @@ export default function NodePage() {
                   </div>
                 ) : (
                   <div className="space-y-4">
+                    <Select
+                      label="版本通道"
+                      selectedKeys={[releaseChannel]}
+                      onSelectionChange={(keys) => {
+                        const selected =
+                          (Array.from(keys)[0] as ReleaseChannel) || "stable";
+
+                        setReleaseChannel(selected);
+                        setSelectedVersion("");
+                        void loadReleasesByChannel(selected);
+                      }}
+                    >
+                      <SelectItem key="stable" textValue="stable">
+                        正式版（纯数字版本，如 2.1.4）
+                      </SelectItem>
+                      <SelectItem key="dev" textValue="dev">
+                        测试版（含 alpha / beta / rc）
+                      </SelectItem>
+                    </Select>
                     <Select
                       label="选择版本"
-                      placeholder="留空则使用最新版本"
+                      placeholder="留空则使用当前通道最新版本"
                       selectedKeys={selectedVersion ? [selectedVersion] : []}
                       onSelectionChange={(keys) => {
                         const selected = Array.from(keys)[0] as string;
@@ -1899,14 +2050,14 @@ export default function NodePage() {
                               {r.publishedAt
                                 ? new Date(r.publishedAt).toLocaleDateString()
                                 : ""}
-                              {r.prerelease && (
+                              {r.channel === "dev" && (
                                 <Chip
                                   className="ml-1"
                                   color="warning"
                                   size="sm"
                                   variant="flat"
                                 >
-                                  预览
+                                  测试
                                 </Chip>
                               )}
                             </span>
@@ -1917,7 +2068,7 @@ export default function NodePage() {
                     <p className="text-sm text-default-500">
                       {selectedVersion
                         ? `将升级到版本 ${selectedVersion}`
-                        : "未选择版本，将自动使用最新稳定版"}
+                        : `未选择版本，将自动使用最新${releaseChannel === "stable" ? "正式" : "测试"}版`}
                     </p>
                   </div>
                 )}
@@ -1979,6 +2130,6 @@ export default function NodePage() {
           )}
         </ModalContent>
       </Modal>
-    </div>
+    </AnimatedPage>
   );
 }

vite-frontend/src/pages/panel-sharing.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
+import { toast } from "react-hot-toast";
+
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Tabs, Tab } from "@/shadcn-bridge/heroui/tabs";
@@ -11,8 +13,6 @@ import {
   ModalFooter,
 } from "@/shadcn-bridge/heroui/modal";
 import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
-import { toast } from "react-hot-toast";
-
 import {
   getNodeList,
   createPeerShare,
@@ -397,11 +397,31 @@ export default function PanelSharingPage() {
         selectedKey={selectedTab}
         onSelectionChange={(k) => setSelectedTab(k as string)}
       >
-        <Tab key="my-shares" title="我分享的 (Provider)">
+        <Tab
+          key="my-shares"
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-foreground">
+                Provider
+              </span>
+              <span className="text-xs text-default-500">我分享的</span>
+            </div>
+          }
+        >
           <Card>
-            <CardBody>
-              <div className="mb-4">
+            <CardBody className="space-y-5">
+              <div className="mt-4 flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
+                <div className="space-y-1">
+                  <h2 className="text-lg font-semibold text-foreground">
+                    Provider 共享
+                  </h2>
+                  <p className="text-sm text-default-500">
+                    将本地节点分享给其他面板，统一管理
+                    Token、端口范围和到期策略。
+                  </p>
+                </div>
                 <Button
+                  className="self-start md:self-auto"
                   color="primary"
                   onPress={() => setCreateShareOpen(true)}
                 >
@@ -410,9 +430,27 @@ export default function PanelSharingPage() {
               </div>
 
               {loading ? (
-                <div className="text-center py-10 text-gray-500">加载中...</div>
+                <div className="text-center py-12 text-default-500">
+                  加载中...
+                </div>
               ) : shares.length === 0 ? (
-                <div className="text-center py-10 text-gray-500">暂无分享</div>
+                <div className="rounded-lg border border-dashed border-divider bg-default-50/60 dark:bg-default-100/20 px-6 py-10 text-center">
+                  <p className="text-base font-semibold text-foreground">
+                    暂无分享
+                  </p>
+                  <p className="mt-2 text-sm text-default-500">
+                    先创建一个分享，把本地节点开放给其他面板使用。
+                  </p>
+                  <div className="mt-5 flex justify-center">
+                    <Button
+                      color="primary"
+                      variant="flat"
+                      onPress={() => setCreateShareOpen(true)}
+                    >
+                      创建第一个分享
+                    </Button>
+                  </div>
+                </div>
               ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                   {shares.map((share) => (
@@ -507,11 +545,30 @@ export default function PanelSharingPage() {
             </CardBody>
           </Card>
         </Tab>
-        <Tab key="remote-nodes" title="远程节点 (Consumer)">
+        <Tab
+          key="remote-nodes"
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-foreground">
+                Consumer
+              </span>
+              <span className="text-xs text-default-500">远程节点</span>
+            </div>
+          }
+        >
           <Card>
-            <CardBody>
-              <div className="mb-4">
+            <CardBody className="space-y-5">
+              <div className="mt-4 flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
+                <div className="space-y-1">
+                  <h2 className="text-lg font-semibold text-foreground">
+                    Consumer 接入
+                  </h2>
+                  <p className="text-sm text-default-500">
+                    导入远程节点后，可在这里查看端口占用和同步状态。
+                  </p>
+                </div>
                 <Button
+                  className="self-start md:self-auto"
                   color="secondary"
                   onPress={() => setImportNodeOpen(true)}
                 >
@@ -520,13 +577,26 @@ export default function PanelSharingPage() {
               </div>
 
               {remoteUsageLoading ? (
-                <div className="text-center py-10 text-gray-500">加载中...</div>
+                <div className="text-center py-12 text-default-500">
+                  加载中...
+                </div>
               ) : remoteUsageNodes.length === 0 ? (
-                <div className="text-center py-10 text-gray-500">
-                  <p>暂无远程节点占用记录。</p>
-                  <p className="mt-2">
+                <div className="rounded-lg border border-dashed border-divider bg-default-50/60 dark:bg-default-100/20 px-6 py-10 text-center">
+                  <p className="text-base font-semibold text-foreground">
+                    暂无远程节点占用记录
+                  </p>
+                  <p className="mt-2 text-sm text-default-500">
                     导入远程节点并创建隧道后，这里会显示远端端口占用情况。
                   </p>
+                  <div className="mt-5 flex justify-center">
+                    <Button
+                      color="secondary"
+                      variant="flat"
+                      onPress={() => setImportNodeOpen(true)}
+                    >
+                      去导入远程节点
+                    </Button>
+                  </div>
                 </div>
               ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

vite-frontend/src/pages/profile.tsx

@@ -1,4 +1,7 @@
 import React, { useState, useEffect } from "react";
+import { toast } from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+
 import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import {
@@ -10,9 +13,6 @@ import {
   useDisclosure,
 } from "@/shadcn-bridge/heroui/modal";
 import { Input } from "@/shadcn-bridge/heroui/input";
-import { toast } from "react-hot-toast";
-import { useNavigate } from "react-router-dom";
-
 import { isWebViewFunc } from "@/utils/panel";
 import { siteConfig } from "@/config/site";
 import { updatePassword } from "@/api";

vite-frontend/src/pages/settings.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
-import { Input } from "@/shadcn-bridge/heroui/input";
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
 import { reinitializeBaseURL } from "@/api/network";
 import {
   getPanelAddresses,

vite-frontend/src/pages/tunnel.tsx

@@ -1,21 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
-import { Button } from "@/shadcn-bridge/heroui/button";
-import { Input, Textarea } from "@/shadcn-bridge/heroui/input";
-import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
-import {
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from "@/shadcn-bridge/heroui/modal";
-import { Chip } from "@/shadcn-bridge/heroui/chip";
-import { Spinner } from "@/shadcn-bridge/heroui/spinner";
-import { Divider } from "@/shadcn-bridge/heroui/divider";
-import { Alert } from "@/shadcn-bridge/heroui/alert";
-import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import toast from "react-hot-toast";
+import { AnimatedPage } from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";
 import {
   DndContext,
   KeyboardSensor,
@@ -33,7 +19,22 @@ import {
   useSortable,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Input, Textarea } from "@/shadcn-bridge/heroui/input";
+import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@/shadcn-bridge/heroui/modal";
+import { Chip } from "@/shadcn-bridge/heroui/chip";
+import { Spinner } from "@/shadcn-bridge/heroui/spinner";
+import { Divider } from "@/shadcn-bridge/heroui/divider";
+import { Alert } from "@/shadcn-bridge/heroui/alert";
+import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import {
   createTunnel,
   getTunnelList,
@@ -111,6 +112,8 @@ export default function TunnelPage() {
   const [tunnels, setTunnels] = useState<Tunnel[]>([]);
   const [tunnelOrder, setTunnelOrder] = useState<number[]>([]);
   const [nodes, setNodes] = useState<Node[]>([]);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
 
   // 模态框状态
   const [modalOpen, setModalOpen] = useState(false);
@@ -597,7 +600,17 @@ export default function TunnelPage() {
   const sortedTunnels = useMemo((): Tunnel[] => {
     if (!tunnels || tunnels.length === 0) return [];
 
-    const sortedByDb = [...tunnels].sort((a, b) => {
+    let filteredTunnels = tunnels;
+
+    if (searchKeyword.trim()) {
+      const lowerKeyword = searchKeyword.toLowerCase();
+      filteredTunnels = filteredTunnels.filter(t =>
+        (t.name && t.name.toLowerCase().includes(lowerKeyword)) ||
+        (t.inIp && t.inIp.toLowerCase().includes(lowerKeyword))
+      );
+    }
+
+    const sortedByDb = [...filteredTunnels].sort((a, b) => {
       const aInx = a.inx ?? 0;
       const bInx = b.inx ?? 0;
 
@@ -610,7 +623,7 @@ export default function TunnelPage() {
       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 tunnelMap = new Map(filteredTunnels.map((t) => [t.id, t] as const));
       const localSorted: Tunnel[] = [];
 
       tunnelOrder.forEach((id) => {
@@ -619,7 +632,7 @@ export default function TunnelPage() {
         if (tunnel) localSorted.push(tunnel);
       });
 
-      tunnels.forEach((tunnel) => {
+      filteredTunnels.forEach((tunnel) => {
         if (!tunnelOrder.includes(tunnel.id)) {
           localSorted.push(tunnel);
         }
@@ -629,7 +642,7 @@ export default function TunnelPage() {
     }
 
     return sortedByDb;
-  }, [tunnels, tunnelOrder]);
+  }, [tunnels, tunnelOrder, searchKeyword]);
 
   const sortableTunnelIds = useMemo(
     () => sortedTunnels.map((t) => t.id),
@@ -652,11 +665,17 @@ export default function TunnelPage() {
       isDragging,
     } = useSortable({ id });
 
-    const style = {
-      transform: transform ? CSS.Transform.toString(transform) : undefined,
+    const style: React.CSSProperties = {
+      transform: transform
+        ? CSS.Transform.toString({
+            ...transform,
+            x: Math.round(transform.x),
+            y: Math.round(transform.y),
+          })
+        : undefined,
       transition: isDragging ? undefined : transition || undefined,
       opacity: isDragging ? 0.5 : 1,
-      willChange: "transform",
+      willChange: isDragging ? "transform" : undefined,
     };
 
     return (
@@ -671,14 +690,22 @@ export default function TunnelPage() {
   }
 
   return (
-    <div className="px-3 lg:px-6 py-8">
-      {/* 页面头部 */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex-1" />
+    <AnimatedPage className="px-3 lg:px-6 py-8">
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
+        <div className="flex-1 max-w-sm flex items-center gap-2">
+          <SearchBar
+            isVisible={isSearchVisible}
+            placeholder="搜索隧道名称或IP"
+            value={searchKeyword}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
+          />
+        </div>
 
         <div className="flex items-center gap-2">
           <Button
-            color={selectMode ? "warning" : "primary"}
+            color={selectMode ? "secondary" : "default"}
             size="sm"
             variant={selectMode ? "solid" : "flat"}
             onPress={toggleSelectMode}
@@ -697,10 +724,20 @@ export default function TunnelPage() {
             <span className="text-sm text-default-600 shrink-0">
               已选择 {selectedIds.size} 项
             </span>
-            <Button color="primary" size="sm" variant="flat" onPress={selectAll}>
+            <Button
+              color="primary"
+              size="sm"
+              variant="flat"
+              onPress={selectAll}
+            >
               全选
             </Button>
-            <Button color="secondary" size="sm" variant="flat" onPress={deselectAll}>
+            <Button
+              color="secondary"
+              size="sm"
+              variant="flat"
+              onPress={deselectAll}
+            >
               清空
             </Button>
             <Button
@@ -1004,34 +1041,14 @@ export default function TunnelPage() {
         </DndContext>
       ) : (
         /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  className="w-8 h-8 text-default-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无隧道配置
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何隧道配置，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无隧道配置
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何隧道配置，点击上方按钮开始创建
+            </p>
           </CardBody>
         </Card>
       )}
@@ -1117,11 +1134,6 @@ export default function TunnelPage() {
                     </Select>
 
                     <Input
-                      endContent={
-                        <div className="pointer-events-none flex items-center">
-                          <span className="text-default-400 text-small">x</span>
-                        </div>
-                      }
                       errorMessage={errors.trafficRatio}
                       isInvalid={!!errors.trafficRatio}
                       label="流量倍率"
@@ -1374,6 +1386,7 @@ export default function TunnelPage() {
                                           .filter((id) => id !== -1)
                                           .map((id) => id.toString()),
                                       ]}
+                                      dropdownPlacement="top"
                                       label="节点"
                                       placeholder="选择节点（可多选）"
                                       selectedKeys={groupNodes
@@ -1589,6 +1602,7 @@ export default function TunnelPage() {
                                 id.toString(),
                               ),
                             ]}
+                            dropdownPlacement="top"
                             errorMessage={errors.outNodeId}
                             isInvalid={!!errors.outNodeId}
                             label="节点"
@@ -2434,6 +2448,6 @@ export default function TunnelPage() {
           )}
         </ModalContent>
       </Modal>
-    </div>
+    </AnimatedPage>
   );
 }

vite-frontend/src/pages/user.tsx

@@ -1,4 +1,12 @@
 import { useState, useEffect } from "react";
+import toast from "react-hot-toast";
+import { parseDate } from "@internationalized/date";
+
+import {
+  AnimatedPage,
+  StaggerList,
+  StaggerItem,
+} from "@/components/animated-page";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -25,9 +33,6 @@ import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import { DatePicker } from "@/shadcn-bridge/heroui/date-picker";
 import { Spinner } from "@/shadcn-bridge/heroui/spinner";
 import { Progress } from "@/shadcn-bridge/heroui/progress";
-import toast from "react-hot-toast";
-import { parseDate } from "@internationalized/date";
-
 import {
   User,
   UserForm,
@@ -57,7 +62,6 @@ import {
   SearchIcon,
   EditIcon,
   DeleteIcon,
-  UserIcon,
   SettingsIcon,
 } from "@/components/icons";
 import { PageLoadingState } from "@/components/page-state";
@@ -122,6 +126,7 @@ export default function UserPage() {
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchKeyword, setSearchKeyword] = useState("");
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [pagination, setPagination] = useState<PaginationType>({
     current: 1,
     size: 10,
@@ -610,67 +615,89 @@ export default function UserPage() {
   };
 
   return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
       {/* 页面头部 */}
-      <div className="flex flex-col gap-4 mb-6">
-        <div className="flex items-center gap-3" />
-
-        <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
-          <div className="flex items-center gap-3 flex-1 max-w-md">
-            <Input
-              className="flex-1"
-              classNames={{
-                base: "bg-default-100",
-                input: "bg-transparent",
-                inputWrapper:
-                  "bg-default-100 border-2 border-default-200 hover:border-default-300 data-[hover=true]:border-default-300",
-              }}
-              placeholder="搜索用户名"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
+        <div className="flex-1 max-w-sm flex items-center gap-2">
+          {!isSearchVisible ? (
             <Button
               isIconOnly
-              aria-label="搜索用户"
-              className="min-h-10 w-10"
-              color="primary"
-              variant="solid"
-              onPress={handleSearch}
+              aria-label="搜索"
+              className="text-default-600"
+              color="default"
+              size="sm"
+              variant="flat"
+              onPress={() => setIsSearchVisible(true)}
             >
               <SearchIcon className="w-4 h-4" />
             </Button>
-          </div>
-
-          <Button color="primary" variant="flat" onPress={handleAdd}>
-            新增
-          </Button>
+          ) : (
+            <div className="flex w-full items-center gap-2 animate-appearance-in">
+              <Input
+                autoFocus
+                classNames={{
+                  base: "bg-default-100",
+                  input: "bg-transparent",
+                  inputWrapper:
+                    "bg-default-100 border-2 border-default-200 hover:border-default-300 data-[hover=true]:border-default-300",
+                }}
+                placeholder="搜索用户名"
+                value={searchKeyword}
+                onChange={(e) => setSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+              />
+              <Button
+                isIconOnly
+                aria-label="关闭搜索"
+                className="text-default-600 shrink-0"
+                color="default"
+                size="sm"
+                variant="light"
+                onPress={() => {
+                  setIsSearchVisible(false);
+                  setSearchKeyword("");
+                }}
+              >
+                <svg
+                  aria-hidden="true"
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M6 18L18 6M6 6l12 12"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
+                </svg>
+              </Button>
+            </div>
+          )}
         </div>
+
+        <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
+          新增
+        </Button>
       </div>
 
       {/* 用户列表 */}
       {loading ? (
         <PageLoadingState message="正在加载..." />
       ) : users.length === 0 ? (
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <UserIcon className="w-8 h-8 text-default-400" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无用户数据
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何用户，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无用户数据
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何用户，点击上方按钮开始创建
+            </p>
           </CardBody>
         </Card>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+        <StaggerList className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
           {users.map((user) => {
             const userStatus = getUserStatus(user);
             const expStatus = user.expTime
@@ -686,169 +713,170 @@ export default function UserPage() {
                 : 0;
 
             return (
-              <Card
-                key={user.id}
-                className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
-              >
-                <CardHeader className="pb-2 md:pb-2">
-                  <div className="flex justify-between items-start w-full">
-                    <div className="flex-1 min-w-0">
-                      <h3 className="font-semibold text-foreground truncate text-sm">
-                        {user.name || user.user}
-                      </h3>
-                      <p className="text-xs text-default-500 truncate">
-                        @{user.user}
-                      </p>
+              <StaggerItem key={user.id}>
+                <Card className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden h-full">
+                  <CardHeader className="pb-2 md:pb-2">
+                    <div className="flex justify-between items-start w-full">
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-semibold text-foreground truncate text-sm">
+                          {user.name || user.user}
+                        </h3>
+                        <p className="text-xs text-default-500 truncate">
+                          @{user.user}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-1.5 ml-2">
+                        <Chip
+                          className="text-xs"
+                          color={userStatus.color}
+                          size="sm"
+                          variant="flat"
+                        >
+                          {userStatus.text}
+                        </Chip>
+                      </div>
                     </div>
-                    <div className="flex items-center gap-1.5 ml-2">
-                      <Chip
-                        className="text-xs"
-                        color={userStatus.color}
-                        size="sm"
-                        variant="flat"
-                      >
-                        {userStatus.text}
-                      </Chip>
-                    </div>
-                  </div>
-                </CardHeader>
+                  </CardHeader>
 
-                <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
-                  <div className="space-y-2">
-                    {/* 流量信息 */}
-                    <div className="space-y-1.5">
-                      <div className="flex justify-between text-sm">
-                        <span className="text-default-600">流量限制</span>
-                        <span className="font-medium text-xs">
-                          {formatFlow(user.flow, "gb")}
-                        </span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-default-600">已使用</span>
-                        <span className="font-medium text-xs text-danger">
-                          {formatFlow(usedFlow)}
-                        </span>
-                      </div>
-                      <Progress
-                        aria-label={`流量使用 ${flowPercent.toFixed(1)}%`}
-                        className="mt-1"
-                        color={
-                          flowPercent > 90
-                            ? "danger"
-                            : flowPercent > 70
-                              ? "warning"
-                              : "success"
-                        }
-                        size="sm"
-                        value={flowPercent}
-                      />
-                    </div>
-
-                    {/* 其他信息 */}
-                    <div className="space-y-1.5 pt-2 border-t border-divider">
-                      <div className="flex justify-between text-sm">
-                        <span className="text-default-600">转发数量</span>
-                        <span className="font-medium text-xs">{user.num}</span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-default-600">重置日期</span>
-                        <span className="text-xs">
-                          {user.flowResetTime === 0
-                            ? "不重置"
-                            : `每月${user.flowResetTime}号`}
-                        </span>
-                      </div>
-                      {user.expTime && (
+                  <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
+                    <div className="space-y-2">
+                      {/* 流量信息 */}
+                      <div className="space-y-1.5">
                         <div className="flex justify-between text-sm">
-                          <span className="text-default-600">过期时间</span>
-                          <div className="text-right">
-                            {expStatus && expStatus.color === "success" ? (
-                              <div className="text-xs">
-                                {formatDate(user.expTime)}
-                              </div>
-                            ) : (
-                              <Chip
-                                className="text-xs"
-                                color={expStatus?.color || "default"}
-                                size="sm"
-                                variant="flat"
-                              >
-                                {expStatus?.text || "未知状态"}
-                              </Chip>
-                            )}
-                          </div>
+                          <span className="text-default-600">流量限制</span>
+                          <span className="font-medium text-xs">
+                            {formatFlow(user.flow, "gb")}
+                          </span>
                         </div>
-                      )}
-                    </div>
-                  </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-default-600">已使用</span>
+                          <span className="font-medium text-xs text-danger">
+                            {formatFlow(usedFlow)}
+                          </span>
+                        </div>
+                        <Progress
+                          aria-label={`流量使用 ${flowPercent.toFixed(1)}%`}
+                          className="mt-1"
+                          color={
+                            flowPercent > 90
+                              ? "danger"
+                              : flowPercent > 70
+                                ? "warning"
+                                : "success"
+                          }
+                          size="sm"
+                          value={flowPercent}
+                        />
+                      </div>
 
-                  <div className="space-y-1.5 mt-3">
-                    {/* 第一行：编辑和重置 */}
-                    <div className="flex gap-1.5">
-                      <Button
-                        className="flex-1 min-h-8"
-                        color="primary"
-                        size="sm"
-                        startContent={<EditIcon className="w-3 h-3" />}
-                        variant="flat"
-                        onPress={() => handleEdit(user)}
-                      >
-                        编辑
-                      </Button>
-                      <Button
-                        className="flex-1 min-h-8"
-                        color="warning"
-                        size="sm"
-                        startContent={
-                          <svg
-                            aria-hidden="true"
-                            className="w-3 h-3"
-                            fill="currentColor"
-                            viewBox="0 0 20 20"
-                          >
-                            <path
-                              clipRule="evenodd"
-                              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        }
-                        variant="flat"
-                        onPress={() => handleResetFlow(user)}
-                      >
-                        重置
-                      </Button>
+                      {/* 其他信息 */}
+                      <div className="space-y-1.5 pt-2 border-t border-divider">
+                        <div className="flex justify-between text-sm">
+                          <span className="text-default-600">转发数量</span>
+                          <span className="font-medium text-xs">
+                            {user.num}
+                          </span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-default-600">重置日期</span>
+                          <span className="text-xs">
+                            {user.flowResetTime === 0
+                              ? "不重置"
+                              : `每月${user.flowResetTime}号`}
+                          </span>
+                        </div>
+                        {user.expTime && (
+                          <div className="flex justify-between text-sm">
+                            <span className="text-default-600">过期时间</span>
+                            <div className="text-right">
+                              {expStatus && expStatus.color === "success" ? (
+                                <div className="text-xs">
+                                  {formatDate(user.expTime)}
+                                </div>
+                              ) : (
+                                <Chip
+                                  className="text-xs"
+                                  color={expStatus?.color || "default"}
+                                  size="sm"
+                                  variant="flat"
+                                >
+                                  {expStatus?.text || "未知状态"}
+                                </Chip>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
                     </div>
 
-                    {/* 第二行：权限和删除 */}
-                    <div className="flex gap-1.5">
-                      <Button
-                        className="flex-1 min-h-8"
-                        color="success"
-                        size="sm"
-                        startContent={<SettingsIcon className="w-3 h-3" />}
-                        variant="flat"
-                        onPress={() => handleManageTunnels(user)}
-                      >
-                        权限
-                      </Button>
-                      <Button
-                        className="flex-1 min-h-8"
-                        color="danger"
-                        size="sm"
-                        startContent={<DeleteIcon className="w-3 h-3" />}
-                        variant="flat"
-                        onPress={() => handleDelete(user)}
-                      >
-                        删除
-                      </Button>
+                    <div className="space-y-1.5 mt-3">
+                      {/* 第一行：编辑和重置 */}
+                      <div className="flex gap-1.5">
+                        <Button
+                          className="flex-1 min-h-8"
+                          color="primary"
+                          size="sm"
+                          startContent={<EditIcon className="w-3 h-3" />}
+                          variant="flat"
+                          onPress={() => handleEdit(user)}
+                        >
+                          编辑
+                        </Button>
+                        <Button
+                          className="flex-1 min-h-8"
+                          color="warning"
+                          size="sm"
+                          startContent={
+                            <svg
+                              aria-hidden="true"
+                              className="w-3 h-3"
+                              fill="currentColor"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clipRule="evenodd"
+                                d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
+                          }
+                          variant="flat"
+                          onPress={() => handleResetFlow(user)}
+                        >
+                          重置
+                        </Button>
+                      </div>
+
+                      {/* 第二行：权限和删除 */}
+                      <div className="flex gap-1.5">
+                        <Button
+                          className="flex-1 min-h-8"
+                          color="success"
+                          size="sm"
+                          startContent={<SettingsIcon className="w-3 h-3" />}
+                          variant="flat"
+                          onPress={() => handleManageTunnels(user)}
+                        >
+                          权限
+                        </Button>
+                        <Button
+                          className="flex-1 min-h-8"
+                          color="danger"
+                          size="sm"
+                          startContent={<DeleteIcon className="w-3 h-3" />}
+                          variant="flat"
+                          onPress={() => handleDelete(user)}
+                        >
+                          删除
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                </CardBody>
-              </Card>
+                  </CardBody>
+                </Card>
+              </StaggerItem>
             );
           })}
-        </div>
+        </StaggerList>
       )}
 
       {/* 用户表单模态框 */}
@@ -943,7 +971,6 @@ export default function UserPage() {
               <DatePicker
                 isRequired
                 showMonthAndYearPickers
-                className="cursor-pointer"
                 label="过期时间"
                 value={
                   userForm.expTime
@@ -1167,17 +1194,22 @@ export default function UserPage() {
                     )}
                   </div>
 
-                  <Button
-                    className="w-full sm:w-auto"
-                    color="primary"
-                    isDisabled={batchTunnelSelections.size === 0}
-                    isLoading={assignLoading}
-                    onPress={handleBatchAssignTunnel}
-                  >
-                    分配权限{" "}
-                    {batchTunnelSelections.size > 0 &&
-                      `(${batchTunnelSelections.size}个隧道)`}
-                  </Button>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                      className="w-full sm:w-auto"
+                      color="primary"
+                      isDisabled={batchTunnelSelections.size === 0}
+                      isLoading={assignLoading}
+                      onPress={handleBatchAssignTunnel}
+                    >
+                      分配权限
+                    </Button>
+                    {batchTunnelSelections.size > 0 && (
+                      <Chip color="primary" size="sm" variant="flat">
+                        已选 {batchTunnelSelections.size} 个隧道
+                      </Chip>
+                    )}
+                  </div>
                 </div>
               </div>
 
@@ -1434,7 +1466,6 @@ export default function UserPage() {
                   <DatePicker
                     isRequired
                     showMonthAndYearPickers
-                    className="cursor-pointer"
                     label="到期时间"
                     value={
                       editTunnelForm.expTime
@@ -1764,6 +1795,6 @@ export default function UserPage() {
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </AnimatedPage>
   );
 }

vite-frontend/src/provider.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { HeroUIProvider } from "@/shadcn-bridge/heroui/system";
 import { useHref, useNavigate } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { I18nProvider } from "@react-aria/i18n";
 
+import { HeroUIProvider } from "@/shadcn-bridge/heroui/system";
 import { ThemeProvider } from "@/components/theme-provider";
 
 export interface ProvidersProps {

vite-frontend/src/shadcn-bridge/heroui/alert.tsx

@@ -9,7 +9,8 @@ import {
 type AlertColor = "default" | "success" | "warning" | "danger" | "primary";
 type AlertVariant = "solid" | "flat" | "faded" | "bordered";
 
-interface AlertProps extends Omit<React.ComponentProps<"div">, "color" | "title"> {
+interface AlertProps
+  extends Omit<React.ComponentProps<"div">, "color" | "title"> {
   color?: AlertColor;
   description?: React.ReactNode;
   title?: React.ReactNode;

vite-frontend/src/shadcn-bridge/heroui/button.tsx

@@ -4,8 +4,20 @@ import { Loader2Icon } from "lucide-react";
 import { Button as BaseButton } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-type HeroButtonColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
-type HeroButtonVariant = "solid" | "light" | "flat" | "ghost" | "bordered" | "shadow";
+type HeroButtonColor =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger";
+type HeroButtonVariant =
+  | "solid"
+  | "light"
+  | "flat"
+  | "ghost"
+  | "bordered"
+  | "shadow";
 type HeroButtonSize = "sm" | "md" | "lg";
 
 export interface ButtonProps
@@ -20,7 +32,17 @@ export interface ButtonProps
   variant?: HeroButtonVariant;
 }
 
-function mapVariant(color: HeroButtonColor, variant: HeroButtonVariant): "default" | "destructive" | "secondary" | "outline" | "ghost" | "light" | "flat" {
+function mapVariant(
+  color: HeroButtonColor,
+  variant: HeroButtonVariant,
+):
+  | "default"
+  | "destructive"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "light"
+  | "flat" {
   if (variant === "bordered") {
     return "outline";
   }
@@ -43,7 +65,10 @@ function mapVariant(color: HeroButtonColor, variant: HeroButtonVariant): "defaul
   return "default";
 }
 
-function mapSize(size: HeroButtonSize, isIconOnly: boolean): "default" | "sm" | "lg" | "icon" {
+function mapSize(
+  size: HeroButtonSize,
+  isIconOnly: boolean,
+): "default" | "sm" | "lg" | "icon" {
   if (isIconOnly) {
     return "icon";
   }
@@ -67,33 +92,46 @@ const solidColorClassMap: Partial<Record<HeroButtonColor, string>> = {
 const borderedColorClassMap: Record<HeroButtonColor, string> = {
   default:
     "border-default-300 text-default-700 hover:bg-default-100 dark:border-default-300 dark:text-default-600 dark:hover:bg-default-200/40",
-  primary: "border-primary text-primary hover:bg-primary-50 dark:border-primary-500/60 dark:text-primary-300 dark:hover:bg-primary-900/20",
+  primary:
+    "border-primary text-primary hover:bg-primary-50 dark:border-primary-500/60 dark:text-primary-300 dark:hover:bg-primary-900/20",
   secondary:
     "border-secondary text-secondary hover:bg-secondary-50 dark:border-secondary-500/60 dark:text-secondary-300 dark:hover:bg-secondary-900/20",
-  success: "border-success text-success hover:bg-success-50 dark:border-success-500/60 dark:text-success-300 dark:hover:bg-success-900/20",
+  success:
+    "border-success text-success hover:bg-success-50 dark:border-success-500/60 dark:text-success-300 dark:hover:bg-success-900/20",
   warning:
     "border-warning text-warning-700 hover:bg-warning-50 dark:border-warning-500/60 dark:text-warning-300 dark:hover:bg-warning-900/20",
-  danger: "border-danger text-danger hover:bg-danger-50 dark:border-danger-500/60 dark:text-danger-300 dark:hover:bg-danger-900/20",
+  danger:
+    "border-danger text-danger hover:bg-danger-50 dark:border-danger-500/60 dark:text-danger-300 dark:hover:bg-danger-900/20",
 };
 
 const lightColorClassMap: Record<HeroButtonColor, string> = {
-  default: "text-default-700 hover:bg-default-100 dark:text-default-600 dark:hover:bg-default-200/40",
-  primary: "text-primary hover:bg-primary-100/70 dark:text-primary-300 dark:hover:bg-primary-900/30",
-  secondary: "text-secondary hover:bg-secondary-100/70 dark:text-secondary-300 dark:hover:bg-secondary-900/30",
-  success: "text-success hover:bg-success-100/70 dark:text-success-300 dark:hover:bg-success-900/30",
-  warning: "text-warning-700 hover:bg-warning-100/70 dark:text-warning-300 dark:hover:bg-warning-900/30",
-  danger: "text-danger hover:bg-danger-100/70 dark:text-danger-300 dark:hover:bg-danger-900/30",
+  default:
+    "text-default-700 hover:bg-default-100 dark:text-default-600 dark:hover:bg-default-200/40",
+  primary:
+    "text-primary hover:bg-primary-100/70 dark:text-primary-300 dark:hover:bg-primary-900/30",
+  secondary:
+    "text-secondary hover:bg-secondary-100/70 dark:text-secondary-300 dark:hover:bg-secondary-900/30",
+  success:
+    "text-success hover:bg-success-100/70 dark:text-success-300 dark:hover:bg-success-900/30",
+  warning:
+    "text-warning-700 hover:bg-warning-100/70 dark:text-warning-300 dark:hover:bg-warning-900/30",
+  danger:
+    "text-danger hover:bg-danger-100/70 dark:text-danger-300 dark:hover:bg-danger-900/30",
 };
 
 const flatColorClassMap: Record<HeroButtonColor, string> = {
   default:
     "bg-default-100 text-default-700 hover:bg-default-200 dark:bg-default-100/45 dark:text-default-700 dark:hover:bg-default-200/60",
-  primary: "bg-primary-100 text-primary-700 hover:bg-primary-200 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/45",
+  primary:
+    "bg-primary-100 text-primary-700 hover:bg-primary-200 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/45",
   secondary:
     "bg-secondary-100 text-secondary-700 hover:bg-secondary-200 dark:bg-secondary-900/30 dark:text-secondary-300 dark:hover:bg-secondary-900/45",
-  success: "bg-success-100 text-success-700 hover:bg-success-200 dark:bg-success-900/30 dark:text-success-300 dark:hover:bg-success-900/45",
-  warning: "bg-warning-100 text-warning-700 hover:bg-warning-200 dark:bg-warning-900/30 dark:text-warning-300 dark:hover:bg-warning-900/45",
-  danger: "bg-danger-100 text-danger-700 hover:bg-danger-200 dark:bg-danger-900/30 dark:text-danger-300 dark:hover:bg-danger-900/45",
+  success:
+    "bg-success-100 text-success-700 hover:bg-success-200 dark:bg-success-900/30 dark:text-success-300 dark:hover:bg-success-900/45",
+  warning:
+    "bg-warning-100 text-warning-700 hover:bg-warning-200 dark:bg-warning-900/30 dark:text-warning-300 dark:hover:bg-warning-900/45",
+  danger:
+    "bg-danger-100 text-danger-700 hover:bg-danger-200 dark:bg-danger-900/30 dark:text-danger-300 dark:hover:bg-danger-900/45",
 };
 
 const shadowColorClassMap: Record<HeroButtonColor, string> = {
@@ -105,7 +143,10 @@ const shadowColorClassMap: Record<HeroButtonColor, string> = {
   danger: "shadow-md shadow-danger-500/35",
 };
 
-function mapColorClass(color: HeroButtonColor, variant: HeroButtonVariant): string {
+function mapColorClass(
+  color: HeroButtonColor,
+  variant: HeroButtonVariant,
+): string {
   if (variant === "bordered") {
     return borderedColorClassMap[color];
   }
@@ -122,7 +163,10 @@ function mapColorClass(color: HeroButtonColor, variant: HeroButtonVariant): stri
   return "";
 }
 
-function mapShadowClass(color: HeroButtonColor, variant: HeroButtonVariant): string {
+function mapShadowClass(
+  color: HeroButtonColor,
+  variant: HeroButtonVariant,
+): string {
   if (variant !== "shadow") {
     return "";
   }
@@ -169,16 +213,23 @@ export const Button = React.forwardRef<
 
     return (
       <BaseButton
-        className={cn(isIconOnly ? "p-0" : "", resolvedColorClass, resolvedShadowClass, className)}
-        disabled={resolvedDisabled}
         ref={ref}
+        className={cn(
+          isIconOnly ? "p-0" : "",
+          resolvedColorClass,
+          resolvedShadowClass,
+          className,
+        )}
+        disabled={resolvedDisabled}
         size={resolvedSize}
         type={type}
         variant={resolvedVariant}
         onClick={handleClick}
         {...props}
       >
-        {isLoading ? <Loader2Icon className="mr-2 h-4 w-4 animate-spin" /> : null}
+        {isLoading ? (
+          <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
+        ) : null}
         {startContent}
         {isIconOnly ? null : children}
         {isIconOnly ? children : null}

vite-frontend/src/shadcn-bridge/heroui/card.tsx

@@ -11,10 +11,18 @@ export function Card({ className, ...props }: React.ComponentProps<"div">) {
   return <BaseCard className={className} {...props} />;
 }
 
-export function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+export function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return <BaseCardHeader className={cn("p-4 md:p-6", className)} {...props} />;
 }
 
 export function CardBody({ className, ...props }: React.ComponentProps<"div">) {
-  return <CardContent className={cn("p-4 pt-0 md:p-6 md:pt-0", className)} {...props} />;
+  return (
+    <CardContent
+      className={cn("p-4 pt-0 md:p-6 md:pt-0", className)}
+      {...props}
+    />
+  );
 }

vite-frontend/src/shadcn-bridge/heroui/checkbox.tsx

@@ -4,7 +4,10 @@ import { Checkbox as BaseCheckbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 
 export interface CheckboxProps
-  extends Omit<React.ComponentProps<typeof BaseCheckbox>, "checked" | "onCheckedChange"> {
+  extends Omit<
+    React.ComponentProps<typeof BaseCheckbox>,
+    "checked" | "onCheckedChange"
+  > {
   classNames?: Record<string, string>;
   color?: string;
   isDisabled?: boolean;
@@ -30,7 +33,13 @@ export function Checkbox({
   };
 
   return (
-    <div className={cn("inline-flex items-center gap-2", isDisabled ? "opacity-50" : "", className)}>
+    <div
+      className={cn(
+        "inline-flex items-center gap-2",
+        isDisabled ? "opacity-50" : "",
+        className,
+      )}
+    >
       <BaseCheckbox
         checked={Boolean(isSelected)}
         disabled={isDisabled}

vite-frontend/src/shadcn-bridge/heroui/chip.tsx

@@ -3,7 +3,13 @@ import * as React from "react";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
-type ChipColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+type ChipColor =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger";
 type ChipVariant = "solid" | "flat" | "light" | "bordered";
 type ChipSize = "sm" | "md" | "lg";
 

vite-frontend/src/shadcn-bridge/heroui/date-picker.tsx

@@ -1,16 +1,60 @@
 import * as React from "react";
 
+import { FieldContainer, type FieldMetaProps } from "./shared";
+
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
-import { FieldContainer, type FieldMetaProps } from "./shared";
-
 interface CalendarDateLike {
   day: number;
   month: number;
   year: number;
 }
 
+function isValidCalendarDate(year: number, month: number, day: number) {
+  if (
+    !Number.isInteger(year) ||
+    !Number.isInteger(month) ||
+    !Number.isInteger(day)
+  ) {
+    return false;
+  }
+  if (month < 1 || month > 12 || day < 1 || day > 31) {
+    return false;
+  }
+  const candidate = new Date(year, month - 1, day);
+
+  return (
+    candidate.getFullYear() === year &&
+    candidate.getMonth() === month - 1 &&
+    candidate.getDate() === day
+  );
+}
+
+function parseDateText(value: string) {
+  const trimmed = value.trim();
+
+  if (!trimmed) {
+    return null;
+  }
+
+  const matched = trimmed.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/);
+
+  if (!matched) {
+    return null;
+  }
+
+  const year = Number(matched[1]);
+  const month = Number(matched[2]);
+  const day = Number(matched[3]);
+
+  if (!isValidCalendarDate(year, month, day)) {
+    return null;
+  }
+
+  return { day, month, year };
+}
+
 export interface DatePickerProps extends FieldMetaProps {
   className?: string;
   isDisabled?: boolean;
@@ -39,9 +83,80 @@ export function DatePicker({
   isRequired,
   label,
   onChange,
+  showMonthAndYearPickers,
   value,
 }: DatePickerProps) {
   const id = React.useId();
+  const formattedValue = React.useMemo(() => formatDateValue(value), [value]);
+  const [textValue, setTextValue] = React.useState(formattedValue);
+
+  React.useEffect(() => {
+    setTextValue(formattedValue);
+  }, [formattedValue]);
+
+  const shouldUseTextInput = Boolean(showMonthAndYearPickers);
+
+  const notifyNativeDateChange = (rawValue: string) => {
+    if (!onChange) {
+      return;
+    }
+
+    if (!rawValue) {
+      onChange(null);
+
+      return;
+    }
+
+    const [yearText, monthText, dayText] = rawValue.split("-");
+    const year = Number(yearText);
+    const month = Number(monthText);
+    const day = Number(dayText);
+
+    if (!isValidCalendarDate(year, month, day)) {
+      onChange(null);
+
+      return;
+    }
+
+    onChange({ day, month, year });
+  };
+
+  const notifyTextDateChange = (rawValue: string) => {
+    if (!onChange) {
+      return;
+    }
+
+    if (!rawValue.trim()) {
+      onChange(null);
+
+      return;
+    }
+
+    const parsed = parseDateText(rawValue);
+
+    if (parsed) {
+      onChange(parsed);
+    }
+  };
+
+  const commitTextInput = () => {
+    const parsed = parseDateText(textValue);
+
+    if (parsed) {
+      setTextValue(formatDateValue(parsed));
+      onChange?.(parsed);
+
+      return;
+    }
+
+    if (!textValue.trim()) {
+      onChange?.(null);
+
+      return;
+    }
+
+    setTextValue(formattedValue);
+  };
 
   return (
     <FieldContainer
@@ -57,33 +172,34 @@ export function DatePicker({
         className={cn(className)}
         disabled={isDisabled}
         id={id}
+        inputMode={shouldUseTextInput ? "numeric" : undefined}
+        placeholder={shouldUseTextInput ? "YYYY-MM-DD" : undefined}
         required={isRequired}
-        type="date"
-        value={formatDateValue(value)}
+        type={shouldUseTextInput ? "text" : "date"}
+        value={shouldUseTextInput ? textValue : formattedValue}
+        onBlur={shouldUseTextInput ? commitTextInput : undefined}
         onChange={(event) => {
-          if (!onChange) {
-            return;
-          }
+          const nextValue = event.target.value;
 
-          if (!event.target.value) {
-            onChange(null);
+          if (shouldUseTextInput) {
+            setTextValue(nextValue);
+            notifyTextDateChange(nextValue);
 
             return;
           }
 
-          const [yearText, monthText, dayText] = event.target.value.split("-");
-          const year = Number(yearText);
-          const month = Number(monthText);
-          const day = Number(dayText);
-
-          if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) {
-            onChange(null);
-
-            return;
-          }
-
-          onChange({ day, month, year });
+          notifyNativeDateChange(nextValue);
         }}
+        onKeyDown={
+          shouldUseTextInput
+            ? (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitTextInput();
+                }
+              }
+            : undefined
+        }
       />
     </FieldContainer>
   );

vite-frontend/src/shadcn-bridge/heroui/dropdown.tsx

@@ -8,7 +8,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger as BaseDropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-
 import { cn } from "@/lib/utils";
 
 type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
@@ -17,14 +16,19 @@ interface DropdownContextValue {
   align: "start" | "end";
 }
 
-const DropdownContext = React.createContext<DropdownContextValue>({ align: "start" });
+const DropdownContext = React.createContext<DropdownContextValue>({
+  align: "start",
+});
 
 export interface DropdownProps {
   children: React.ReactNode;
   placement?: Placement;
 }
 
-export function Dropdown({ children, placement = "bottom-start" }: DropdownProps) {
+export function Dropdown({
+  children,
+  placement = "bottom-start",
+}: DropdownProps) {
   const align = placement.endsWith("end") ? "end" : "start";
 
   return (
@@ -66,7 +70,10 @@ export function DropdownItem({
 }: DropdownItemProps) {
   return (
     <BaseDropdownMenuItem
-      className={cn(color === "danger" ? "text-danger focus:text-danger" : "", className)}
+      className={cn(
+        color === "danger" ? "text-danger focus:text-danger" : "",
+        className,
+      )}
       onSelect={(event) => {
         event.preventDefault();
         onPress?.();

vite-frontend/src/shadcn-bridge/heroui/input.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 
+import { FieldContainer, type FieldMetaProps } from "./shared";
+
 import { Input as BaseInput } from "@/components/ui/input";
 import { Textarea as BaseTextarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
-import { FieldContainer, type FieldMetaProps } from "./shared";
-
 type ClassNameMap = {
   base?: string;
   description?: string;
@@ -84,7 +84,9 @@ export function Input({
           classNames?.inputWrapper,
         )}
       >
-        {startContent ? <div className="pl-3 text-default-500">{startContent}</div> : null}
+        {startContent ? (
+          <div className="pl-3 text-default-500">{startContent}</div>
+        ) : null}
         <BaseInput
           aria-invalid={isInvalid}
           className={cn(
@@ -100,7 +102,9 @@ export function Input({
           required={isRequired}
           {...props}
         />
-        {endContent ? <div className="pr-3 text-default-500">{endContent}</div> : null}
+        {endContent ? (
+          <div className="pr-3 text-default-500">{endContent}</div>
+        ) : null}
       </div>
     </FieldContainer>
   );

vite-frontend/src/shadcn-bridge/heroui/link.tsx

@@ -20,5 +20,10 @@ function mapColor(color: LinkColor) {
 }
 
 export function Link({ className, color = "default", ...props }: LinkProps) {
-  return <a className={cn("transition-colors", mapColor(color), className)} {...props} />;
+  return (
+    <a
+      className={cn("transition-colors", mapColor(color), className)}
+      {...props}
+    />
+  );
 }

vite-frontend/src/shadcn-bridge/heroui/navbar.tsx

@@ -52,7 +52,12 @@ export function Navbar({
       style={height ? { minHeight: height } : undefined}
       {...props}
     >
-      <div className={cn("mx-auto flex h-full w-full items-center justify-between px-4", maxWidthClass(maxWidth))}>
+      <div
+        className={cn(
+          "mx-auto flex h-full w-full items-center justify-between px-4",
+          maxWidthClass(maxWidth),
+        )}
+      >
         {children}
       </div>
     </nav>
@@ -85,6 +90,9 @@ export function NavbarContent({
   );
 }
 
-export function NavbarBrand({ className, ...props }: React.ComponentProps<"div">) {
+export function NavbarBrand({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return <div className={cn("flex items-center", className)} {...props} />;
 }

vite-frontend/src/shadcn-bridge/heroui/progress.tsx

@@ -3,7 +3,13 @@ import * as React from "react";
 import { Progress as BaseProgress } from "@/components/ui/progress";
 import { cn } from "@/lib/utils";
 
-type ProgressColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+type ProgressColor =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger";
 
 export interface ProgressProps {
   "aria-label"?: string;

vite-frontend/src/shadcn-bridge/heroui/radio.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 
-import { RadioGroup as BaseRadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  RadioGroup as BaseRadioGroup,
+  RadioGroupItem,
+} from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 
@@ -8,7 +11,9 @@ interface RadioContextValue {
   name: string;
 }
 
-const RadioContext = React.createContext<RadioContextValue>({ name: "radio-group" });
+const RadioContext = React.createContext<RadioContextValue>({
+  name: "radio-group",
+});
 
 export interface RadioGroupProps {
   children: React.ReactNode;
@@ -33,7 +38,9 @@ export function RadioGroup({
       <RadioContext.Provider value={{ name: generatedName }}>
         <BaseRadioGroup
           className={cn(
-            orientation === "horizontal" ? "flex flex-wrap items-center gap-4" : "grid gap-3",
+            orientation === "horizontal"
+              ? "flex flex-wrap items-center gap-4"
+              : "grid gap-3",
           )}
           value={value}
           onValueChange={onValueChange}

vite-frontend/src/shadcn-bridge/heroui/select.tsx

@@ -37,6 +37,7 @@ export interface SelectProps<T = unknown> extends FieldMetaProps {
   selectionMode?: SelectionMode;
   size?: "sm" | "md" | "lg";
   variant?: string;
+  dropdownPlacement?: "bottom" | "top";
 }
 
 export interface SelectItemProps {
@@ -163,25 +164,78 @@ export function Select<T>({
   selectedKeys,
   selectionMode = "single",
   size,
+  dropdownPlacement = "bottom",
 }: SelectProps<T>) {
   const generatedId = React.useId();
   const options = React.useMemo(
     () => getOptions(children, items),
     [children, items],
   );
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const listboxRef = React.useRef<HTMLDivElement | null>(null);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const selected = React.useMemo(() => toSet(selectedKeys), [selectedKeys]);
   const disabled = React.useMemo(() => toSet(disabledKeys), [disabledKeys]);
 
+  React.useEffect(() => {
+    if (!isExpanded) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      const container = containerRef.current;
+      const listbox = listboxRef.current;
+
+      if (!container) {
+        return;
+      }
+
+      const target = event.target;
+
+      if (!(target instanceof Node)) {
+        return;
+      }
+
+      if (container.contains(target) || listbox?.contains(target)) {
+        return;
+      }
+
+      setIsExpanded(false);
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsExpanded(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isExpanded]);
+
+  React.useEffect(() => {
+    if (isDisabled) {
+      setIsExpanded(false);
+    }
+  }, [isDisabled]);
+
   const selectedArray = Array.from(selected);
   const singleValue = selectedArray[0] ?? "";
+  const selectedLabels = options
+    .filter((option) => selected.has(option.key))
+    .map((option) => option.label);
+  const resolvedSelectedValues =
+    selectedLabels.length > 0 ? selectedLabels : selectedArray;
+  const selectedFullText = resolvedSelectedValues.join("、");
   const selectedText =
-    selectedArray.length > 0
-      ? options
-          .filter((option) => selected.has(option.key))
-          .map((option) => option.label)
-          .join("、")
-      : (placeholder ?? "请选择");
+    selectedArray.length > 0 ? selectedFullText : (placeholder ?? "请选择");
 
   const updateMultipleSelection = (key: string, checked?: boolean) => {
     if (isDisabled || disabled.has(key)) {
@@ -227,6 +281,71 @@ export function Select<T>({
     onSelectionChange(new Set([event.target.value]));
   };
 
+  const renderMultipleListbox = () => {
+    if (!isExpanded) {
+      return null;
+    }
+
+    const placementClasses =
+      dropdownPlacement === "top" ? "bottom-full mb-1" : "top-full mt-1";
+
+    return (
+      <div
+        ref={listboxRef}
+        className={cn(
+          "absolute left-0 z-50 w-full space-y-1 overflow-y-auto rounded-md border border-divider bg-background p-2 shadow-md max-h-56",
+          placementClasses,
+        )}
+        id={`${generatedId}-listbox`}
+        role="listbox"
+      >
+        {options.length === 0 ? (
+          <div
+            className={cn("px-2 py-1 text-default-500", textSizeClass(size))}
+          >
+            暂无可选项
+          </div>
+        ) : (
+          options.map((option) => {
+            const optionDisabled = isDisabled || disabled.has(option.key);
+
+            return (
+              <div
+                key={option.key}
+                className={cn(
+                  "flex items-center gap-2 rounded-md px-2 py-1.5",
+                  optionDisabled
+                    ? "cursor-not-allowed opacity-60"
+                    : "hover:bg-default-100",
+                )}
+              >
+                <BaseCheckbox
+                  checked={selected.has(option.key)}
+                  disabled={optionDisabled}
+                  onCheckedChange={(value) =>
+                    updateMultipleSelection(option.key, value === true)
+                  }
+                />
+                <button
+                  className={cn(
+                    "min-w-0 flex-1 truncate text-left text-foreground",
+                    textSizeClass(size),
+                    optionDisabled ? "cursor-not-allowed" : "cursor-pointer",
+                  )}
+                  disabled={optionDisabled}
+                  type="button"
+                  onClick={() => updateMultipleSelection(option.key)}
+                >
+                  {option.label}
+                </button>
+              </div>
+            );
+          })
+        )}
+      </div>
+    );
+  };
+
   return (
     <FieldContainer
       className={classNames?.base}
@@ -238,22 +357,18 @@ export function Select<T>({
       label={label}
     >
       {selectionMode === "multiple" ? (
-        <div
-          className={cn(
-            "w-full overflow-hidden rounded-md border border-input bg-background shadow-sm",
-            isDisabled ? "cursor-not-allowed opacity-60" : "",
-            className,
-          )}
-          id={generatedId}
-        >
+        <div ref={containerRef} className={cn("relative w-full", className)}>
           <button
             aria-controls={`${generatedId}-listbox`}
             aria-expanded={isExpanded}
+            aria-haspopup="listbox"
             className={cn(
-              "flex w-full min-w-0 items-center gap-2 overflow-hidden px-3 py-2 text-left",
+              "flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-2 text-left shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              isDisabled ? "cursor-not-allowed opacity-60" : "",
               classNames?.trigger,
             )}
             disabled={isDisabled}
+            id={generatedId}
             type="button"
             onClick={() => setIsExpanded((prev) => !prev)}
           >
@@ -261,9 +376,11 @@ export function Select<T>({
               className={cn(
                 "block min-w-0 flex-1 truncate",
                 textSizeClass(size),
-                selectedArray.length > 0 ? "text-foreground" : "text-default-500",
+                selectedArray.length > 0
+                  ? "text-foreground"
+                  : "text-default-500",
               )}
-              title={selectedText}
+              title={selectedArray.length > 0 ? selectedFullText : undefined}
             >
               {selectedText}
             </span>
@@ -274,62 +391,7 @@ export function Select<T>({
               )}
             />
           </button>
-          {isExpanded ? (
-            <div
-              className="max-h-56 space-y-1 overflow-y-auto border-t border-divider p-2"
-              id={`${generatedId}-listbox`}
-              role="listbox"
-            >
-              {options.length === 0 ? (
-                <div
-                  className={cn(
-                    "px-2 py-1 text-default-500",
-                    textSizeClass(size),
-                  )}
-                >
-                  暂无可选项
-                </div>
-              ) : (
-                options.map((option) => {
-                  const optionDisabled = isDisabled || disabled.has(option.key);
-
-                  return (
-                    <div
-                      key={option.key}
-                      className={cn(
-                        "flex items-center gap-2 rounded-md px-2 py-1.5",
-                        optionDisabled
-                          ? "cursor-not-allowed opacity-60"
-                          : "hover:bg-default-100",
-                      )}
-                    >
-                      <BaseCheckbox
-                        checked={selected.has(option.key)}
-                        disabled={optionDisabled}
-                        onCheckedChange={(value) =>
-                          updateMultipleSelection(option.key, value === true)
-                        }
-                      />
-                      <button
-                        className={cn(
-                          "min-w-0 flex-1 truncate text-left text-foreground",
-                          textSizeClass(size),
-                          optionDisabled
-                            ? "cursor-not-allowed"
-                            : "cursor-pointer",
-                        )}
-                        disabled={optionDisabled}
-                        type="button"
-                        onClick={() => updateMultipleSelection(option.key)}
-                      >
-                        {option.label}
-                      </button>
-                    </div>
-                  );
-                })
-              )}
-            </div>
-          ) : null}
+          {renderMultipleListbox()}
         </div>
       ) : (
         <select

vite-frontend/src/shadcn-bridge/heroui/shared.tsx

@@ -36,7 +36,9 @@ export function FieldContainer({
         </Label>
       ) : null}
       {children}
-      {description ? <p className="text-xs text-default-500">{description}</p> : null}
+      {description ? (
+        <p className="text-xs text-default-500">{description}</p>
+      ) : null}
       {isInvalid && errorMessage ? (
         <p className="text-xs text-danger">{errorMessage}</p>
       ) : null}
@@ -45,14 +47,21 @@ export function FieldContainer({
 }
 
 export function extractText(content: React.ReactNode): string {
-  if (content === null || content === undefined || typeof content === "boolean") {
+  if (
+    content === null ||
+    content === undefined ||
+    typeof content === "boolean"
+  ) {
     return "";
   }
   if (typeof content === "string" || typeof content === "number") {
     return String(content);
   }
   if (Array.isArray(content)) {
-    return content.map((item) => extractText(item)).join("").trim();
+    return content
+      .map((item) => extractText(item))
+      .join("")
+      .trim();
   }
   if (React.isValidElement(content)) {
     return extractText(content.props.children);

vite-frontend/src/shadcn-bridge/heroui/spinner.tsx

@@ -21,10 +21,17 @@ function iconSize(size: SpinnerSize | undefined) {
   return "h-5 w-5";
 }
 
-export function Spinner({ className, label, size = "md", ...props }: SpinnerProps) {
+export function Spinner({
+  className,
+  label,
+  size = "md",
+  ...props
+}: SpinnerProps) {
   return (
     <div className={cn("inline-flex items-center gap-2", className)} {...props}>
-      <Loader2Icon className={cn("animate-spin text-default-500", iconSize(size))} />
+      <Loader2Icon
+        className={cn("animate-spin text-default-500", iconSize(size))}
+      />
       {label ? <span className="text-sm text-default-500">{label}</span> : null}
     </div>
   );

vite-frontend/src/shadcn-bridge/heroui/switch.tsx

@@ -3,7 +3,11 @@ import * as React from "react";
 import { Switch as BaseSwitch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 
-export interface SwitchProps extends Omit<React.ComponentProps<typeof BaseSwitch>, "checked" | "onCheckedChange"> {
+export interface SwitchProps
+  extends Omit<
+    React.ComponentProps<typeof BaseSwitch>,
+    "checked" | "onCheckedChange"
+  > {
   classNames?: Record<string, string>;
   color?: string;
   isDisabled?: boolean;

vite-frontend/src/shadcn-bridge/heroui/table.tsx

@@ -4,11 +4,15 @@ import { cn } from "@/lib/utils";
 
 interface TableClassNames {
   th?: string;
+  td?: string;
+  tr?: string;
   wrapper?: string;
 }
 
 interface TableStyleContextValue {
   thClassName?: string;
+  tdClassName?: string;
+  trClassName?: string;
 }
 
 const TableStyleContext = React.createContext<TableStyleContextValue>({});
@@ -17,10 +21,23 @@ export interface TableProps extends React.ComponentProps<"table"> {
   classNames?: TableClassNames;
 }
 
-export function Table({ children, className, classNames, ...props }: TableProps) {
+export function Table({
+  children,
+  className,
+  classNames,
+  ...props
+}: TableProps) {
   return (
-    <TableStyleContext.Provider value={{ thClassName: classNames?.th }}>
-      <div className={cn("w-full overflow-auto rounded-md", classNames?.wrapper)}>
+    <TableStyleContext.Provider
+      value={{
+        thClassName: classNames?.th,
+        tdClassName: classNames?.td,
+        trClassName: classNames?.tr,
+      }}
+    >
+      <div
+        className={cn("w-full overflow-auto rounded-md", classNames?.wrapper)}
+      >
         <table className={cn("w-full text-sm", className)} {...props}>
           {children}
         </table>
@@ -29,7 +46,11 @@ export function Table({ children, className, classNames, ...props }: TableProps)
   );
 }
 
-export function TableHeader({ children, className, ...props }: React.ComponentProps<"thead">) {
+export function TableHeader({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"thead">) {
   const childArray = React.Children.toArray(children);
   const hasRow = childArray.some(
     (child) => React.isValidElement(child) && child.type === TableRow,
@@ -42,7 +63,8 @@ export function TableHeader({ children, className, ...props }: React.ComponentPr
   );
 }
 
-interface TableBodyProps<T> extends Omit<React.ComponentProps<"tbody">, "children"> {
+interface TableBodyProps<T>
+  extends Omit<React.ComponentProps<"tbody">, "children"> {
   children?: React.ReactNode | ((item: T) => React.ReactNode);
   emptyContent?: React.ReactNode;
   isLoading?: boolean;
@@ -50,18 +72,24 @@ interface TableBodyProps<T> extends Omit<React.ComponentProps<"tbody">, "childre
   loadingContent?: React.ReactNode;
 }
 
-export function TableBody<T>({
-  children,
-  className,
-  emptyContent,
-  isLoading,
-  items,
-  loadingContent,
-  ...props
-}: TableBodyProps<T>) {
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  TableBodyProps<any>
+>(function TableBody<T>(
+  {
+    children,
+    className,
+    emptyContent,
+    isLoading,
+    items,
+    loadingContent,
+    ...props
+  }: TableBodyProps<T>,
+  ref: React.Ref<HTMLTableSectionElement>,
+) {
   if (isLoading) {
     return (
-      <tbody className={className} {...props}>
+      <tbody ref={ref} className={className} {...props}>
         <tr>
           <td className="p-4 text-center text-default-500" colSpan={999}>
             {loadingContent ?? "加载中..."}
@@ -74,7 +102,7 @@ export function TableBody<T>({
   if (items && typeof children === "function") {
     if (items.length === 0) {
       return (
-        <tbody className={className} {...props}>
+        <tbody ref={ref} className={className} {...props}>
           <tr>
             <td className="p-4 text-center text-default-500" colSpan={999}>
               {emptyContent ?? "暂无数据"}
@@ -85,7 +113,7 @@ export function TableBody<T>({
     }
 
     return (
-      <tbody className={className} {...props}>
+      <tbody ref={ref} className={className} {...props}>
         {items.map((item) => {
           const key =
             typeof item === "object" && item !== null && "id" in item
@@ -103,7 +131,7 @@ export function TableBody<T>({
 
   if (staticChildren.length === 0) {
     return (
-      <tbody className={className} {...props}>
+      <tbody ref={ref} className={className} {...props}>
         <tr>
           <td className="p-4 text-center text-default-500" colSpan={999}>
             {emptyContent ?? "暂无数据"}
@@ -114,27 +142,53 @@ export function TableBody<T>({
   }
 
   return (
-    <tbody className={className} {...props}>
+    <tbody ref={ref} className={className} {...props}>
       {typeof children === "function" ? null : children}
     </tbody>
   );
-}
+});
 
-export function TableColumn({ className, ...props }: React.ComponentProps<"th">) {
+export function TableColumn({
+  className,
+  ...props
+}: React.ComponentProps<"th">) {
   const { thClassName } = React.useContext(TableStyleContext);
 
   return (
     <th
-      className={cn("px-3 py-2 text-left font-medium text-default-600", thClassName, className)}
+      className={cn(
+        "px-3 py-2 text-left font-medium text-default-600",
+        thClassName,
+        className,
+      )}
       {...props}
     />
   );
 }
 
-export function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return <tr className={cn("border-b last:border-b-0", className)} {...props} />;
-}
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.ComponentProps<"tr">
+>(({ className, ...props }, ref) => {
+  const { trClassName } = React.useContext(TableStyleContext);
+
+  return (
+    <tr
+      ref={ref}
+      className={cn("border-b last:border-b-0", trClassName, className)}
+      {...props}
+    />
+  );
+});
+TableRow.displayName = "TableRow";
 
 export function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return <td className={cn("px-3 py-2 align-middle", className)} {...props} />;
+  const { tdClassName } = React.useContext(TableStyleContext);
+
+  return (
+    <td
+      className={cn("px-3 py-2 align-middle", tdClassName, className)}
+      {...props}
+    />
+  );
 }

vite-frontend/src/shadcn-bridge/heroui/use-theme.tsx

@@ -10,11 +10,14 @@ function resolveInitialTheme(): ThemeMode {
   }
 
   const fromStorage = window.localStorage.getItem(STORAGE_KEY);
+
   if (fromStorage === "dark" || fromStorage === "light") {
     return fromStorage;
   }
 
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
 }
 
 let currentTheme: ThemeMode = resolveInitialTheme();

vite-frontend/src/styles/globals.css

@@ -2,6 +2,14 @@
 @import "tw-animate-css";
 @import "./tailwind-theme.pcss";
 
+/* GPU acceleration helper - prevents font blurriness during transforms */
+.gpu-accelerated {
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 :root {
   --safe-area-top: env(safe-area-inset-top, 0px);
   --safe-area-bottom: env(safe-area-inset-bottom, 0px);
@@ -181,12 +189,12 @@ body {
 @keyframes captchaModalIn {
   from {
     opacity: 0;
-    transform: scale(0.9) translateY(-20px);
+    transform: translateY(-20px);
   }
 
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
   }
 }